/* components.css — UI components, layout, animations
   Dark mode overrides for component-specific styles are co-located here.
   Global dark mode tokens → theme.css
   ---------------------------------------------------------------- */
@keyframes qe-spin { to { transform: rotate(360deg); } }
.qe-gen-spinner {
  will-change: transform;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: var(--txt);
  display: inline-block;
  animation: qe-spin .7s linear infinite;
  flex-shrink: 0;
}
.qe-generate-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
}

#qe-custom-input-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.32);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
#qe-custom-input-overlay.show { opacity: 1; pointer-events: auto; }
#qe-custom-input-overlay.show .qe-custom-input-box { transform: translateY(0) scale(1); opacity: 1; }
.qe-custom-input-box {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--r20); padding: 0;
  width: 100%; max-width: 320px;
  transform: translateY(6px) scale(.99); opacity: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,.16), 0 2px 10px rgba(0,0,0,.08);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.qe-custom-input-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.qe-custom-input-title { font-size: 14px; font-weight: 800; color: var(--txt); }
.qe-custom-input-close {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all var(--dur-fast);
}
.qe-custom-input-close:hover { background:var(--tint-3b); color: var(--txt); }
.qe-custom-input-body { padding: 16px 18px 18px; }
.qe-custom-input-label {
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; display: block;
}
.qe-custom-input-field {
  width: 100%; padding: 10px 13px;
  border-radius: var(--r8); border: 1.5px solid var(--border2);
  background:var(--tint-1); color: var(--txt);
  font-size: 14px; font-family: inherit; outline: none; transition: border-color var(--dur-base);
}
.qe-custom-input-field:focus { border-color: var(--border3); }
.qe-custom-input-actions { display: flex; gap: 8px; margin-top: 14px; }


#qe-generate-btn.qe-gen-sticky {
  /* Android: geser ke atas keyboard menggunakan CSS env jika tersedia */
  position: fixed !important;
  bottom: env(keyboard-inset-height, 0px);
  left: 0;
  right: 0;
  z-index: 500;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
}

/* Desktop sticky mode active above. Mobile @media (max-width:600px) below resets to static. */

@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* [FEATURE 2026-07-19] Header image banner — posisi di ATAS card "1 Template
   Prompt" (di antara banner nama template & card Step 1), BUKAN di
   dalamnya.
   - aspect-ratio DIKUNCI SATU NILAI TETAP (5/1, diubah dari 4/1) → SAMA
     PERSIS di semua lebar layar, desktop maupun HP. Sengaja TIDAK ada
     override per breakpoint, supaya bentuk frame-nya tidak pernah berubah
     proporsi saat layar melebar/menyempit — cuma ukurannya yang ikut skala.
   - object-fit:cover pada <img> → frame SELALU terisi penuh, tidak ada
     spasi kosong di sisi mana pun. Konsekuensinya: kalau rasio gambar
     asli beda dari 5/1, bagian tepi gambar yang "meluber" dipotong
     (di-crop) supaya pas mengisi kotak — ini permintaan eksplisit,
     prioritaskan "penuh tanpa spasi" di atas "gambar utuh tanpa potong".
   - border-radius DISAMAKAN PERSIS dengan var(--r16), radius yang sama
     dipakai card "1 Prompt Template" (.qe-card) di bawahnya — supaya
     sudut membulatnya konsisten, tidak beda sendiri. */
.qe-header-img-wrap { /* [FIX 2026-08-09] cap dipakai sebagai titik awal transisi collapse — lihat .qe-cover-collapsed di bawah */ /* anchor buat tombol panah & dot navigasi carousel */
  /* [FIX 2026-07-29] pan-y: browser tetap boleh scroll vertikal langsung
     lewat elemen ini (gestur default), sementara gestur HORIZONTAL
     diambil-alih JS (lihat initSwipeGestures di js/qe-remote-cover.js)
     buat geser slide cover kiri/kanan lewat layar sentuh. */
  /* [FIX 2026-07-25] Shadow dihapus sesuai permintaan — cover sekarang
     flat, cuma dibatasi border tipis (var(--border2) di atas), tanpa
     efek "mengambang" dari drop shadow. */
  /* [FIX 2026-08-09 — BUG REPORT] Transisi dipakai buat class
     ".qe-cover-collapsed" (lihat di bawah) — begitu tombol mata diklik,
     banner beneran MENGECIL/MINIMIZE (tinggi, margin, & border-nya
     sama-sama collapse ke 0) sebelum hilang, BUKAN cuma gambarnya yang
     dikosongkan sementara kotaknya tetap sebesar semula. */
  width: 100%;
  max-height: 600px;
  aspect-ratio: 5 / 1;
  border-radius: var(--r16);
  overflow: hidden;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border2);
  animation: tplBannerIn .3s var(--spring);
  position: relative;
  touch-action: pan-y;
  box-shadow: none;
  transition: max-height .32s var(--spring), opacity .22s ease,
    margin-bottom .32s var(--spring), border-width .32s var(--spring);
}
/* [FIX 2026-08-09 — BUG REPORT] Ditambahkan/dilepas oleh qeUpdateHeaderImage
   (js/qe-engine.js) lewat qeIsCoverHidden() — kondisi user klik tombol mata
   utk menyembunyikan banner secara manual. Semua dimensi yang "makan
   tempat" di-collapse ke 0, jadi hasil akhirnya sama seperti banner
   dilipat/diminimalkan, bukan sekadar area kosong bergradasi. */
.qe-header-img-wrap.qe-cover-collapsed {
  max-height: 0;
  margin-bottom: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}
.qe-header-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* [FEATURE 2026-07-19 v2] Crossfade soft antar-slide cover ("default"
   CREATERUS bawaan + gambar-gambar remote dari manifest.json).
   ------------------------------------------------------------
   Ketiga layer (.qe-header-default-cover, img#qe-header-img, dan
   img#qe-header-img-2) ditumpuk PERSIS di posisi yang sama via
   position:absolute + inset:0 di dalam .qe-header-img-wrap (yang sudah
   position:relative & punya ukuran tetap dari aspect-ratio). Pindah slide
   = tinggal toggle class "qe-cover-active" (opacity 0 <-> 1), TIDAK pernah
   ubah "display" — supaya transisinya murni opacity compositing yang
   digarap GPU, bukan reflow/repaint, jadi tetap mulus walau gonta-ganti
   slide cepat. Layer yang lagi tidak aktif dikasih pointer-events:none
   supaya klik/hover tidak nyasar ke layer yang lagi transparan. */
.qe-header-default-cover,
.qe-header-img-wrap img {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.qe-header-default-cover.qe-cover-active,
.qe-header-img-wrap img.qe-cover-active {
  opacity: 1;
  pointer-events: auto;
}
/* [v58] Cover default sekarang polos (tanpa animasi internal apa pun —
   lihat blok ".qe-header-default-cover" di bawah), jadi rule pause
   animasi per-elemen mesin (qe-machine-*/qe-cover-orb/-spark) yang dulu
   ada di sini sudah tidak relevan & sudah dicabut. */
@media (prefers-reduced-motion: reduce) {
  .qe-header-default-cover,
  .qe-header-img-wrap img,
  .qe-header-img-wrap {
    transition: none;
  }
}

/* [REDESIGN 2026-07-20 v8] Klaster navigasi carousel cover remote —
   sekarang jadi SATU kapsul kaca (frosted pill) di bawah-TENGAH, panah
   & titik-titiknya menyatu langsung bersebelahan (bukan lagi dua
   kelompok terpisah di pojok kanan seperti v7) — kontrolnya persis
   "pas di titik carousel", tidak numpuk di atas planet (kanan-atas)
   maupun tipografi poster (kiri-bawah). Cuma dimunculkan (display:'')
   oleh js/qe-remote-cover.js kalau manifest.json berisi lebih dari 1
   gambar; wrapper-nya sendiri statis (tidak di-toggle JS) jadi aman
   walau isinya kosong. */
/* [FIX 2026-07-20 v10] Dipindah dari kapsul bawah-TENGAH (v9) ke pojok
   kiri-BAWAH. Alasan: bawah-tengah numpuk tepat di atas bagian bawah
   headline/tagline begitu lebar layar menyempit (HP) — kelihatan
   "menghalangi" teks/elemen di belakangnya begitu lebar kapsul makin
   dekat ke tepi konten. Pojok kiri-bawah kosong di semua breakpoint
   (console + chip output semuanya di sisi KANAN, headline vertikal-
   tengah tidak pernah turun sampai ke sudut bawah) jadi navigasi tidak
   pernah menutupi elemen manapun, di desktop maupun HP. */
/* [REVERT 2026-07-20 v14] Kapsul kaca (frosted pill) di belakang navigasi
   DIHAPUS atas permintaan user — sekarang cuma panah & titik polos yang
   melayang langsung di atas cover, tanpa wadah/background apapun. Supaya
   tetap kebaca di atas cover terang MAUPUN gelap (kapsulnya dulu yang
   menjamin kontras), panah & titik dikasih drop-shadow gelap tipis
   (lihat .qe-cover-nav & .qe-cover-dot di bawah) sebagai pengganti. */
/* [UPDATE 2026-08-08] Dipindah balik ke tengah-bawah atas permintaan
   user. Alasan v10 (menghindari overlap dgn headline/tagline "mesin
   kata") SUDAH TIDAK RELEVAN — konten itu sudah dicabut total sejak
   v58, cover sekarang cuma gambar custom/iklan polos, jadi kapsul di
   tengah-bawah aman, tidak menutupi apa pun. */
.qe-cover-carousel-controls {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qe-cover-nav {
  /* [FIX 2026-07-20 v11] Sengaja HARDCODE putih, bukan var(--cvr-ink) —
     supaya tetap kebaca jelas di atas slide gambar apa pun terlepas dari
     tema cover di baliknya. [REVERT v14] Drop-shadow gelap ditambah
     sebagai pengganti kapsul kaca yang dihapus, biar kontras tetap
     terjaga walau sekarang melayang langsung di atas cover. */
  position: static;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
  opacity: .75;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  padding: 0;
  flex-shrink: 0;
}
.qe-cover-nav:hover { opacity: 1; }
.qe-cover-nav:active { transform: scale(.88); }
.qe-cover-dots-nav {
  position: static;
  display: flex;
  align-items: center;
  gap: 5px;
}
.qe-cover-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.qe-cover-dot:hover { background: #fff; }
.qe-cover-dot.active { background: #fff; transform: scale(1.3); }

/* [FIX 2026-08-09 — BUG REPORT] Tombol mata show/hide cover manual PINDAH
   dari overlay melayang di pojok kanan-atas banner (class ".qe-cover-eye-btn"
   lama, sudah dihapus) ke action bar atas, sejajar Undo/Redo — sekarang
   pakai class ".qe-active-tpl-icon-btn" yang sama seperti tombol Undo/Redo
   (lihat markup #qe-cover-toggle-btn di index.html), jadi otomatis
   konsisten gaya/ukuran tanpa perlu rule terpisah di sini. Alasan pindah:
   dulu (waktu masih nebeng di gambar) tombolnya ikut ke-collapse tiap kali
   user manual menyembunyikan banner lewat tombol itu sendiri — sekarang di
   action bar, tombolnya AMAN dari efek collapse-nya banner sendiri, tapi
   TETAP di-display:none oleh qeUpdateCoverToggleBtn (js/qe-engine.js) kalau
   memang tidak ada satupun pemicu cover aktif (manifest.json remote
   false/kosong DAN Prompt Template tidak ada baris "=== Cover: URL ===")
   — sengaja disembunyikan total, bukan cuma dipudarkan/disabled, karena
   memang tidak ada gunanya toggle sesuatu yang tidak pernah ada. */

/* [UPDATE 2026-08-08] Sebelumnya (v58) elemen ini adalah panel POLOS
   yang TAMPIL sebagai fallback tiap kali tidak ada cover custom (lalu
   sempat diisi daftar "recent engine" ala playlist di v59). SEKARANG
   ATURANNYA BERUBAH lagi atas permintaan user: cover header cuma boleh
   nongol kalau memang ADA yang manggil (baris "=== Cover: URL ===" di
   Prompt Template, atau iklan/info aktif dari manifest remote) — kalau
   tidak ada dua-duanya, seluruh wrapper (.qe-header-img-wrap) DIHIDE
   TOTAL via inline style + qeUpdateHeaderImage() (lihat js/qe-engine.js).
   Elemen #qe-header-default-cover ini jadi TIDAK PERNAH terlihat lagi —
   dipertahankan cuma sebagai salah satu dari 3 layer crossfade yang
   dipakai qeCoverActivate() (biar strukturnya tidak perlu dirombak),
   isinya sengaja dikosongkan permanen. */
.qe-header-default-cover {
  /* position:absolute (crossfade) tetap dari rule gabungan di atas. */
  width: 100%; height: 100%;
  background: var(--bg2);
  box-sizing: border-box;
}

.qe-active-tpl-banner {
  display: none;
  align-items: center; gap: 12px;
  padding: 12px 16px 12px 18px;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--r12);
  margin-bottom: 12px;
  animation: tplBannerIn .3s var(--spring);
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

@keyframes tplBannerIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tplNameSwap {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes tplIconSwap {
  0%   { opacity: 0; transform: scale(.6) rotate(-15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.qe-active-tpl-name.name-anim { animation: tplNameSwap .25s cubic-bezier(.34,1.56,.64,1); }
.qe-active-tpl-icon.icon-anim { animation: tplIconSwap .28s cubic-bezier(.34,1.56,.64,1); }
.qe-active-tpl-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.qe-active-tpl-info { flex: 1; min-width: 0; }
.qe-active-tpl-name {
  font-size: 13.5px; font-weight: 700; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.2px; line-height: 1.25;
}
.qe-banner-lock-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; line-height: 1;
  filter: none !important; opacity: 1 !important;
  color: initial;
  font-style: normal;
  vertical-align: middle;
}
.qe-active-tpl-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qe-active-tpl-open-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: var(--r8);
  background:var(--tint-3b);
  border: 1px solid rgba(0,0,0,.14);
  color: rgba(0,0,0,.65); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base) var(--spring); white-space: nowrap;
  letter-spacing: .1px;
}
.qe-active-tpl-open-btn:hover {
  background: rgba(0,0,0,.12);
  border-color:var(--line-3);
  color: var(--txt);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.qe-active-tpl-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  padding: 0; border-radius: var(--r8);
  background:var(--tint-3b);
  border: 1px solid rgba(0,0,0,.14);
  color: rgba(0,0,0,.65);
  cursor: pointer; transition: all var(--dur-base) var(--spring);
}
.qe-active-tpl-icon-btn:hover {
  background: rgba(0,0,0,.12);
  border-color:var(--line-3);
  color: var(--txt);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.qe-active-tpl-icon-btn[aria-pressed="true"] { color: var(--accent, #3B82F6); }
.qe-active-tpl-icon-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--topbar-h);
  background: var(--surface-blur);
  border-bottom: 1px solid rgba(0,0,0,.09);
  transform: translateZ(0);
  display: flex; align-items: center; padding: 0 12px; gap: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 2px 10px rgba(0,0,0,.07);
}
.topbar-left { display: flex; align-items: center; gap: 6px; flex: 1; flex-shrink: 0; }
.topbar-right { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: flex-end; flex-shrink: 0; }
.topbar-brand { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; text-decoration: none; }
.topbar-brand-text {
  font-size: 15px; font-weight: 500; letter-spacing: .2px; text-transform: none;
  color: var(--txt); font-family: var(--font-logo); font-style: normal;
}
.topbar-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: var(--r8);
  background: var(--bg3);
  border: 1px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base), width var(--dur-base) cubic-bezier(.4,0,.2,1), flex var(--dur-base) cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  flex-shrink: 0;
}
.topbar-search:focus-within {
  border-color: var(--border2);
  background: var(--bg2);
}

.topbar-search-icon {
  position: absolute;
  left: 9px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  color: var(--txt3); opacity: .6;
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0; z-index: 2;
}

.topbar-search input {
  flex: 1; min-width: 0; width: 100%;
  height: 30px; background: transparent;
  border: none; padding: 0 10px 0 30px;
  font-size: 16px; font-weight: 500;
  letter-spacing: -.1px; color: var(--txt);
  font-family: inherit;
}
.topbar-search input::placeholder { color: var(--txt3); font-weight: 500; }

@media (min-width: 769px) {
  .topbar-left  { flex: 0 0 auto !important; }
  .topbar-right { flex: 0 0 auto !important; }

  .topbar-search {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0 16px;
    cursor: text;
  }
  .topbar-search:hover {
    border-color: var(--border);
    background: var(--bg4);
  }
  .topbar-search.tb-search-expanded-desktop {
    flex: 1 1 0;
    width: auto;
    border-color: var(--border2);
    background: var(--bg2);
  }

  #tb-search-icon-mobile { display: none !important; }
}

#tb-search-icon-mobile { display: none; } .tb-search-dd {
  display: none; position: fixed; top: 52px; left: 50%; transform: translateX(-50%);
  width: min(480px, 96vw);
  background: var(--bg2); border: 1px solid rgba(0,0,0,.10); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden; z-index: 9999; max-height: 380px; overflow-y: auto;
}
.tb-search-dd.open { display: block; }
.tb-search-dd::-webkit-scrollbar { width: 0; }
.tb-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; transition: background var(--dur-fast);
  border-radius: 0;
}
.tb-search-item:hover, .tb-search-item.active { background: var(--bg4); }
.tb-search-item-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.tb-search-item-body { flex: 1; min-width: 0; }
.tb-search-item-name { font-size: 12.5px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-search-item-sub { font-size: 10.5px; color: var(--txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tb-search-empty { padding: 20px 14px; text-align: center; color: var(--txt3); font-size: 12px; }

.tb-btn,
#tb-search-icon-mobile,
.hamburger {
  width: 30px; height: 30px;
  border-radius: var(--r8);
  border: none; background: transparent;
  color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.tb-btn:hover,
#tb-search-icon-mobile:hover {
  background: var(--bg4);
  color: var(--txt2);
}
.tb-btn.active-fullview,
.tb-btn.tb-btn--active,
#tb-rp-btn.active-fullview {
  background: var(--bg5);
  color: var(--txt);
}
.hamburger {
  flex-direction: column; gap: 4.5px;
  padding: 0;
}
.hamburger:hover { background: var(--bg4); }
.hamburger.nav-hidden { opacity: .38; }

.main-layout { display: flex; min-height: 100dvh; padding-top: var(--topbar-h); }
.left-nav::-webkit-scrollbar { width: 0; }
.nav-profile { padding: 18px 14px 14px; border-bottom: 1px solid var(--border); }
.nav-profile-inner {
  /* ══ UI/UX FIX 2026-07-26 (v4) ══ Baris ini sebelumnya TANPA tinggi
     tetap — tingginya cuma ikut konten (max dari tombol gir 26px vs
     blok nama+handle ~34px). Begitu mode rail aktif, nama+handle
     di-`display:none`, jadi baris ini menyusut ~8px, dan itu yang
     nyeret garis pembatas (.nav-profile border-bottom) + SEMUA item
     menu di bawahnya (Home, Quick Engine, dst) ikut naik ~8px —
     persis "biang kerok" garis pembatas geser yang dilaporkan.
     Dikunci min-height supaya tinggi baris identik di kedua mode,
     jadi garis pembatas & posisi menu di bawahnya benar2 diam. */
  display: flex; align-items: center; gap: 9px;
  min-height: 36px;
}
.nav-avatar-ring {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ui-muted), var(--txt3)); padding: 1.5px;
  cursor: pointer; transition: box-shadow var(--dur-base);
}
.nav-avatar-ring:hover { box-shadow: 0 0 0 3px rgba(0,0,0,.10); }
.nav-avatar-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: rgba(0,0,0,.75);
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
}
.nav-profile-name:hover { color: var(--txt2); }

/* ── Shortcut Link (sidebar kanan) ──
   UI/UX FIX 2026-07-27: sejajarkan kiri grid shortcut dgn kiri icon
   ".rp-section-icon" di section "Content Funnel"/"Framework Prompt" di
   bawahnya. Section itu punya struktur: padding-left 14px + garis 2.5px
   + gap 9px, baru icon dimulai → offset kiri icon = 14+2.5+9 = 25.5px
   dari tepi panel. Sebelumnya .rp-shortcuts cuma padding-left 14px polos
   (tanpa garis+gap), jadi kolom icon shortcut selalu geser ~11.5px ke
   kiri dibanding kolom icon label di bawahnya — sekarang disamakan
   persis pakai padding-left 25.5px, sisi kanan tetap 14px (sejajar dgn
   inset kanan chevron section, yg juga 14px dari tepi). */
.rp-shortcuts { padding: 10px 14px 12px 25.5px; border-bottom: 1px solid var(--border); }
/* UI/UX FIX 2026-07-27: dari flex-wrap bebas (bisa 6/7 icon nyempil di
   baris pertama, tidak simetris) → CSS grid 5 kolom TETAP. Dengan
   `repeat(5, 1fr)`, apa pun lebar panel-nya (desktop 260px atau HP
   ~130-180px), grid SELALU membagi rata jadi persis 5 kolom per baris —
   icon ke-6 dst otomatis turun ke baris berikutnya, tetap rapi & rata
   kiri-kanan mengikuti kolom yg sama (simetris antar baris). */
.rp-shortcuts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rp-shortcut-item {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; min-width: 0;
  transition: background var(--dur-base), transform var(--dur-base);
}
.rp-shortcut-item:hover { background: var(--bg5); transform: translateY(-1px); }
.rp-shortcut-item img { width: 60%; height: 60%; max-width: 18px; max-height: 18px; border-radius: 3px; object-fit: contain; }
.rp-shortcut-del {
  position: absolute; top: -5px; right: -5px; width: 14px; height: 14px;
  border-radius: 50%; border: none; background: var(--txt3); color: var(--bg2);
  font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity var(--dur-fast);
  padding: 0;
}
.rp-shortcut-item:hover .rp-shortcut-del { opacity: 1; }
.rp-shortcut-add {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; min-width: 0;
  border: 1px dashed var(--border2); background: transparent; color: var(--txt3);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base), color var(--dur-base);
  padding: 0;
}
.rp-shortcut-add:hover { background: var(--bg4); color: var(--txt2); }

.qnote-wrap {
  margin-top: 10px;
  border-radius: var(--r12);
  background: var(--bg2);
  border: 1px solid var(--border2);
  overflow: hidden;
  transition: border-color var(--dur-base);
}
.qnote-header {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 11px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base);
  background: #F7F7F7;
}
.qnote-wrap:not(.qnote-minimized) .qnote-header { border-bottom-color: rgba(0,0,0,.07); }
.qnote-header:hover { background: #EFEFEF; }
.qnote-macos-dots { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.qnote-dot {
  width: 9px; height: 9px; border-radius: 50%;
  opacity: 1; flex-shrink: 0;
  cursor: pointer; transition: transform var(--dur-base) var(--spring), filter var(--dur-base);
}
.qnote-dot:hover { transform: scale(1.25); filter: brightness(1.15); }
.qnote-dot:active { transform: scale(.9); }
.qnote-dot-r { background: #ff5f57; }
.qnote-dot-y { background: #febc2e; }
.qnote-dot-g { background: var(--success); }

.qnote-wrap.qnote-expanded {
  position: fixed !important;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: calc(100vw - 48px);
  margin: 0 !important; z-index: 201 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.14), 0 2px 16px rgba(0,0,0,.08);
  border-color:var(--border3);
  animation: qnoteExpandIn var(--dur-base) var(--ease) !important;
}
.qnote-wrap.qnote-expanded .qnote-body { height: 340px !important; }
@keyframes qnoteExpandIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#qnote-expand-backdrop {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,.20); animation: pageIn .2s var(--ease);
  right: var(--rp-w);
}
#qnote-expand-backdrop.show { display: block; }

.qnote-title-area { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.qnote-chevron { font-size: 9px; color: var(--txt3); transition: transform var(--dur-base) var(--ease); flex-shrink: 0; line-height: 1; }
.qnote-minimized .qnote-chevron { transform: rotate(-90deg); }

.qnote-body {
  height: 148px;
  overflow: hidden;
  transition: height var(--dur-base) var(--ease), opacity var(--dur-base);
  display: flex; flex-direction: column;
}
.qnote-minimized .qnote-body { height: 0; opacity: 0; pointer-events: none; }

.qnote-textarea {
  flex: 1;
  width: 100%; resize: none;
  background: transparent; border: none; outline: none;
  color: var(--txt); font-size: 11px; line-height: 1.6;
  font-family: var(--font-sans);
  padding: 9px 11px 4px;
  caret-color: var(--txt);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-appearance: none;
  box-shadow: none;
}
.qnote-textarea::placeholder { color: var(--txt3); font-style: italic; }
.qnote-textarea:focus { outline: none; box-shadow: none; border: none; }
.qnote-textarea::-webkit-scrollbar { width: 3px; }
.qnote-textarea::-webkit-scrollbar-track { background: transparent; }
.qnote-textarea::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.qnote-preview {
  flex: 1;
  width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--txt); font-size: 11px; line-height: 1.6;
  font-family: var(--font-sans);
  padding: 9px 11px 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 0;
}
.qnote-preview::-webkit-scrollbar { width: 3px; }
.qnote-preview::-webkit-scrollbar-track { background: transparent; }
.qnote-preview::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
.qnote-preview-empty { color: var(--txt3); font-style: italic; }

.qnote-nav-row {
  display: flex; align-items: center;
  padding: 4px 6px 6px;
  flex-shrink: 0; gap: 4px;
}
.qnote-nav-arrow {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.09);
  color: var(--txt3);
  -webkit-text-fill-color: var(--txt3);
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur-base); user-select: none;
  -webkit-appearance: none; appearance: none;
}
.qnote-nav-arrow:hover { background: rgba(0,0,0,.09); border-color: rgba(0,0,0,.16); color: var(--txt) !important; -webkit-text-fill-color: var(--txt); }
.qnote-nav-arrow:active { transform: scale(.9); }
.qnote-nav-arrow:disabled { opacity: .2; cursor: default; }
.qnote-dots-row { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; }
.qnote-slide-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,0,0,.18);
  cursor: pointer;
  transition: background var(--dur-base), transform var(--dur-base), width var(--dur-base);
  flex-shrink: 0;
}
.qnote-slide-dot:hover { background: rgba(0,0,0,.40); transform: scale(1.3); }
.qnote-slide-dot.active { background: rgba(0,0,0,.70); width: 14px; border-radius: 99px; }
.qnote-slide-dot.has-content { background: rgba(0,0,0,.30); }
.qnote-slide-dot.has-content.active { background: rgba(0,0,0,.80); }

.qnote-link {
  color: #0077CC;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  transition: color var(--dur-base), background var(--dur-base);
  word-break: break-all;
  pointer-events: auto;
}
.qnote-link:hover { color: #005FA3; background: rgba(0,119,204, 0.07); }
.nav-section { padding: 2px 8px; }
/* UI/UX FIX 2026-07-26: .nav-profile (yg dulu kasih padding-top ~18px di
   atas .left-nav) sudah dipindah ke #right-panel, jadi menu paling atas
   (Home, dst) butuh sedikit jarak sendiri dari sudut atas sidebar supaya
   tidak nempel ke border radius. */
.left-nav > .nav-section:first-child { padding-top: 14px; }
.nav-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.nav-item .ni-icon {
  font-size: 13px; width: 18px; height: 18px; text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .55; transition: opacity .1s; color: currentColor;
}
.nav-item .ni-icon svg { display: block; }
.nav-item .ni-badge { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: var(--r99); background:var(--tint-3); color: var(--txt3); }
.nav-item .nav-item-chevron { font-size: 12px; color: rgba(0,0,0,.18); line-height: 1; flex-shrink: 0; }
.nav-item:hover { background: rgba(0,0,0,.05) !important; color: var(--txt) !important; border-color: rgba(0,0,0,.07) !important; }
.nav-item.active:hover { background: #000 !important; color: #fff !important; border-color: #000 !important; }
.nav-item:hover .ni-icon { opacity: .80; }
.nav-item.active .ni-label { font-weight: 600; color: #fff !important; }
.nav-item.active .ni-icon { opacity: 1 !important; color: #fff !important; }
.nav-item.active .ni-badge { background: rgba(255,255,255,.20) !important; color: #fff !important; }
.nav-item.active .nav-item-chevron { color: rgba(255,255,255,.55); }

#nav-lib-toggle-btn {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--txt2); transition: background .1s, color .1s, border-color .1s;
  user-select: none; min-height: 30px; position: relative; margin-bottom: 1px;
  letter-spacing: -.1px; border: 1px solid transparent;
}
#nav-lib-toggle-btn:hover { background: rgba(0,0,0,.05); color: var(--txt); border-color: rgba(0,0,0,.07); }
#nav-lib-toggle-btn:hover .ni-icon { opacity: .80; }
#nav-lib-toggle-btn .ni-icon {
  font-size: 13px; width: 18px; height: 18px; text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; opacity: .55; color: currentColor;
}
#nav-lib-toggle-btn .ni-icon svg { display: block; }
#nav-lib-toggle-btn .ni-label { flex: 1; font-weight: 500; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav-lib-toggle-btn .ni-badge { font-size: 8.5px; font-weight: 600; padding: 1px 5px; border-radius: var(--r99); background:var(--tint-3); color: var(--txt3); flex-shrink: 0; }
#nav-lib-toggle-btn .nav-lib-toggle-chev {
  display: none;
}

#nav-lib-open-btn {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.10); background: transparent;
  color: rgba(0,0,0,.32); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; transition: all var(--dur-fast); line-height: 1;
  padding: 0; box-sizing: border-box;
}
#nav-lib-open-btn:hover { background:var(--tint-3b); color: rgba(0,0,0,.65); border-color:var(--border3); }
#nav-lib-open-btn svg { transition: transform var(--dur-base) var(--ease); }
#nav-lib-toggle-btn.folders-open #nav-lib-open-btn svg { transform: rotate(90deg); }

/* Highlight "Library" di sidebar kiri saat Library sedang terbuka —
   dulu tidak ada state highlight sama sekali, jadi klik "Library" terasa
   tidak "nyambung" (tidak ada feedback yang menunjukkan sedang aktif).
   Disamakan visualnya dengan .nav-item.active supaya konsisten dengan
   Home/Quick Engine/Brackets/dll. */
#nav-lib-toggle-btn.active {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 7px;
  font-weight: 600;
}
#nav-lib-toggle-btn.active:hover { background: #000; color: #fff; border-color: #000; }
#nav-lib-toggle-btn.active .ni-label { font-weight: 600; color: #fff !important; }
#nav-lib-toggle-btn.active .ni-icon { opacity: 1 !important; color: #fff !important; }
#nav-lib-toggle-btn.active .ni-badge { background: rgba(255,255,255,.20) !important; color: #fff !important; }
#nav-lib-toggle-btn.active #nav-lib-open-btn { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.75); }
#nav-lib-toggle-btn.active #nav-lib-open-btn:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.5); }

.feed-col {
  /* UI/UX FIX 2026-07-30: iPad + Chrome tab (BUKAN "Add to Home Screen") —
     lihat komentar lengkap di rule `body` (base.css). 100vh di sini bikin
     .feed-col dipaksa setinggi viewport TERBESAR (toolbar Chrome
     collapsed), padahal .feed-col ini scroll-container sendiri
     (overflow-y:auto) — begitu tinggi kontennya (misal halaman Home) lebih
     pendek dari 100vh yang kegedean itu, sisa selisihnya jadi area kosong
     raksasa di bawah footer yang masih bisa di-scroll ("serasa scroll
     tanpa batas"). 100dvh mengikuti tinggi viewport yang BENERAN
     kelihatan saat itu, jadi selisihnya hilang. */
  /* UI/UX FIX: matikan scroll anchoring — lapis pertahanan kedua supaya
     browser nggak diam-diam geser posisi scroll saat konten di atas
     berubah tinggi (mis. font baru selesai load), yang keliatannya
     seperti "geser sendiri pelan-pelan". */
  /* BUG FIX (iPad portrait + sidebar kiri/kanan melebar): breakpoint lama
     buat stacking .qe-step23-row (lihat @media(max-width:720px) di bawah)
     cuma ngecek lebar VIEWPORT, bukan lebar RUANG KONTEN yang beneran
     tersisa. Di iPad mode vertical, viewport-nya >720px jadi rule lama
     nggak pernah nyala — padahal begitu sidebar kiri+kanan lagi melebar
     (bukan mini/hidden), margin-left/margin-right di atas motong feed-col
     ini jadi sempit banget, sisanya nggak cukup buat grid 2 kolom Tahap
     2 & 3 (tombol & elemen jadi kepotong/berdesakan). Container query di
     bawah ngukur lebar KONTEN feed-col ini sendiri (udah dipotong margin
     sidebar), jadi tetap ke-detect sempit walau viewport-nya lebar. */
  flex: 1; margin-left: var(--nav-w); margin-right: var(--rp-w);
  min-width: 0; overflow-y: auto; overflow-x: hidden;
  min-height: calc(100dvh - var(--topbar-h));
  transition: margin var(--dur-base) var(--ease);
  overflow-anchor: none;
  container-type: inline-size;
  container-name: qe-feedcol;
}
.page { padding: 24px; animation: pageIn var(--dur-base) var(--ease); contain: layout style paint; }

.right-panel {
  /* [REVISI 2026-08-09] +var(--sb-widen) — sama seperti .left-nav di atas,
     supaya jarak kartu tengah->sidebar kanan sama renggangnya dengan jarak
     sidebar kanan->tepi layar. Posisi kartu tengah (.feed-col margin-right)
     TIDAK ikut berubah — cuma sidebar ini yang melebar ke arah kartu. */
  /* UI/UX FIX: samain perlakuan kayak .left-nav — top & height pakai
     --nav-v-gap (24px) biar sudut rounded atas/bawah sejajar sama kotak
     konten, kiri/kanan (--sb-gap) tetap dipisah supaya tidak nempel tepi. */
  /* UI/UX FIX: hapus total efek shadow di sidebar kanan */
  width: calc(var(--rp-w) - (var(--sb-gap) * 2) + var(--sb-widen)); min-width: calc(var(--rp-w) - (var(--sb-gap) * 2) + var(--sb-widen));
  height: calc(100dvh - var(--topbar-h) - (var(--nav-v-gap) * 2));
  position: fixed; top: calc(var(--topbar-h) + var(--nav-v-gap)); right: var(--sb-gap);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: none;
  overflow-y: auto; overflow-x: hidden;
  transition: transform var(--dur-base) var(--ease), width var(--dur-base) var(--ease), min-width var(--dur-base) var(--ease);
  transform: translate3d(0,0,0);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scroll-behavior: auto;
  contain: layout style paint;
  pointer-events: auto;
}
.right-panel::-webkit-scrollbar { width: 0; }
.rp-divider { height: 0.5px; background:var(--tint-3b); margin: 2px 0; }

/* ── FITUR BARU 2026-07-27: mode rail utk panel kanan (desktop only, ──
   sama seperti pola rail sidebar kiri di atas) ──
   Mirror perilaku rail sidebar kiri (lihat --nav-rail-w) tapi lebih
   ringkas krn cuma perlu sembunyikan label/isi teks & center-kan icon
   yg tersisa (gear, Content Funnel, Framework Prompt, Shortcut Link).
   UI/UX FIX 2026-07-27 (v2): `.fullview` sekarang ikut memakai selector
   yg SAMA dgn `.right-panel-mini` di sini (persis pola `.left-nav` di
   bawah, yg sudah lebih dulu berbagi selector antara `.left-nav-hidden`
   & `.fullview`) — supaya klik tombol "Tampilan Penuh" bikin panel kanan
   ikut menyusut jadi rail-icon, BUKAN hilang total translateX keluar
   layar spt sebelumnya. Behavior "hilang total" (`right-panel-hidden`)
   sekarang cuma dipakai jalur khusus lain (swap sidebar lewat hamburger
   saat fullview aktif), bukan lagi dipakai fullview biasa. */
@media (min-width: 769px) {
  body.right-panel-mini .right-panel,
  body.fullview .right-panel {
    width: var(--nav-rail-w) !important; min-width: var(--nav-rail-w) !important;
  }
  body.right-panel-mini .feed-col,
  body.fullview .feed-col {
    /* UI/UX FIX: dulu jarak rail→konten di sini = sb-gap*2 (40px) + padding
       .page (24px) = 64px, jauh lebih renggang dibanding jarak rail→konten
       di mode expanded (cuma 20px, berkat --sb-widen — lihat komentar
       panjang di base.css soal --sb-widen). Kurangi var(--sb-widen) di sini
       supaya margin rail-mode "meniru" pola margin expanded (sidebar
       expanded ikut melebar var(--sb-widen) ke arah konten sehingga jarak
       akhirnya cuma var(--sb-gap)) — hasil: jarak rail→konten sekarang
       identik 20px di kedua mode, bukan 44px lebih lebar saat rail. */
    margin-right: calc(var(--nav-rail-w) + (var(--sb-gap) * 2) - var(--sb-widen)) !important;
  }
  body.right-panel-mini .nav-profile-textwrap,
  body.fullview .nav-profile-textwrap,
  body.right-panel-mini .qnote-wrap,
  body.fullview .qnote-wrap,
  body.right-panel-mini .rp-collapsible-head-label,
  body.fullview .rp-collapsible-head-label,
  body.right-panel-mini .rp-collapsible-head-chev,
  body.fullview .rp-collapsible-head-chev,
  body.right-panel-mini .rp-collapsible-body,
  body.fullview .rp-collapsible-body { display: none !important; }
  /* Nol-kan padding kiri/kanan .nav-profile di mode rail (normalnya 14px
     kiri/kanan) supaya lebar konten yg tersedia = penuh 58px, persis pola
     rail kiri (.left-nav .nav-item padding-right dikecilkan serupa). */
  body.right-panel-mini .nav-profile,
  body.fullview .nav-profile { padding-left: 0; padding-right: 0; }
  body.right-panel-mini .nav-profile-inner,
  body.fullview .nav-profile-inner { justify-content: center; gap: 6px; }
  /* Gear button punya margin-left:11.5px inline (dipakai utk sejajar dgn
     Content Funnel di mode EXPANDED saja) — di mode rail harus dinolkan
     supaya gear + tombol toggle sama2 center, tidak nge-geser ke kanan. */
  body.right-panel-mini #rp-gear-btn,
  body.fullview #rp-gear-btn { margin-left: 0 !important; }
  body.right-panel-mini .rp-collapsible-head,
  body.fullview .rp-collapsible-head { justify-content: center; padding: 10px 0; gap: 0; }
  body.right-panel-mini .rp-collapsible-head::before,
  body.fullview .rp-collapsible-head::before { display: none; }
  body.right-panel-mini .rp-shortcuts,
  body.fullview .rp-shortcuts { padding: 10px 0; }
  body.right-panel-mini .rp-shortcuts-grid,
  body.fullview .rp-shortcuts-grid { grid-template-columns: 1fr; justify-items: center; }
  body.right-panel-mini .rp-shortcut-item,
  body.fullview .rp-shortcut-item,
  body.right-panel-mini .rp-shortcut-add,
  body.fullview .rp-shortcut-add { width: 30px; height: 30px; aspect-ratio: unset; }
}

.rp-section { padding: 14px 14px; }
.rp-title { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--txt3); margin-bottom: 10px; }

/* FIX (sama seperti body.fullview di bawah): dulu margin-left di-nol-kan
   saat sidebar kiri disembunyikan manual (tombol hamburger) — jadi kalau
   sidebar kiri & kanan disembunyikan satu per satu (bukan lewat tombol
   "Tampilan Penuh"), konten tetap ikut melebar padahal secara visual
   hasil akhirnya sama persis dengan mode Tampilan Penuh. Sekarang margin
   var(--nav-w) TETAP dipertahankan supaya posisi & lebar konten diam,
   apa pun jalur yang dipakai untuk menyembunyikan sidebar. */
/* FIX: .left-nav dipasang dengan `left: var(--sb-gap)` (bukan left:0), jadi
   translateX(-100%) sama seperti kasus .right-panel di bawah — masih nyisa
   sliver selebar var(--sb-gap) di layar. Ditambah buffer supaya benar-benar
   hilang total pada breakpoint mobile yang masih memakai mode "sembunyikan
   total" ini. (Di desktop, .left-nav-hidden DAN .fullview sekarang sama2
   pakai mode rail-icon — lihat blok "LEFT NAV — ICON RAIL" di bawah — jadi
   aturan translateX di sini praktis cuma dipakai jalur mobile.) */
body.left-nav-hidden .left-nav,
body.fullview .left-nav { transform: translateX(calc(-100% - var(--sb-gap) - 24px)); }
/* FIX: margin-left feed-col TETAP var(--nav-w) baik saat sidebar kiri
   disembunyikan (mobile/off-screen) MAUPUN saat masuk mode rail-icon desktop
   (lihat override di dalam media query di bawah — sengaja TIDAK dikecilkan
   ke --nav-rail-w) supaya posisi & lebar konten tengah tidak pernah ikut
   geser/melebar ke kiri, mengikuti permintaan: konten diam, cuma sidebar-nya
   yang menyusut jadi rail. */
body.left-nav-hidden .feed-col,
body.fullview .feed-col { margin-left: var(--nav-w) !important; }

/* ══ BUG FIX 2026-07-29: Guest Quick Engine (dibuka dari halaman login,
   lihat js/guest-engine.js) ikut memasang class body.fullview supaya
   sidebar kiri/kanan tersembunyi — TAPI class ini awalnya cuma didesain
   untuk mode DESKTOP (rail-icon / tombol "Tampilan Penuh"), sedangkan
   aturan margin-left di atas (var(--nav-w) !important) TIDAK dibatasi
   media query apa pun, jadi ikut kepakai walau layarnya HP.
   Akibatnya: di HP, konten Quick Engine ke-geser ke kanan sejauh
   var(--nav-w) (bisa sampai separuh lebar layar di ponsel kecil),
   menyisakan area kosong lebar di sisi kiri — persis bug "UI berantakan
   di HP" yang dilaporkan. Di breakpoint mobile, sidebar kiri SELALU
   off-canvas total (bukan mode rail 58px), jadi feed-col harus balik ke
   margin-left: 0 di layar sesempit apa pun — sama sekali tidak
   tergantung apakah class .fullview / .left-nav-hidden sedang aktif.

   UI/UX FIX 2026-07-30: kondisi query DITAMBAH `(max-height:500px) and
   (max-width:1024px)` supaya HP mode LANDSCAPE ikut kena juga — HP
   landscape lebar layarnya sering >768px (misal ~850-930px) meski
   tingginya cuma ~380-430px, jadi kalau cuma ngecek max-width:768px,
   breakpoint mobile ini nggak pernah nyala pas HP diputar horizontal,
   padahal ruang yang tersedia tetap sangat sempit. Cap max-width:1024px
   di sisi kanan supaya iPad/tablet asli (tinggi landscape-nya masih
   ≥800px) & laptop tidak ikut ketangkep, cuma HP. ══ */
@media (max-width: 768px), (max-height: 500px) and (max-width: 1024px) {
  body.left-nav-hidden .feed-col,
  body.fullview .feed-col { margin-left: 0 !important; }
}

/* FIX: .right-panel dipasang dengan `right: var(--sb-gap)` (bukan right:0),
   jadi translateX(100%) cuma menggeser sejauh lebar panel itu sendiri —
   sisa celah selebar var(--sb-gap) di sisi kanan tetap kelihatan nongol di
   layar. Tambahkan var(--sb-gap) + sedikit buffer (utk box-shadow) supaya
   panel kanan benar-benar hilang total, tidak nyisa sedikit pun.
   UI/UX FIX 2026-07-27 (v2): `body.fullview` DIHAPUS dari rule ini —
   dulu tombol "Tampilan Penuh" bikin panel kanan hilang TOTAL dari layar
   (translateX 100%), padahal sidebar KIRI di kondisi yg sama cuma
   menyusut jadi rail-icon (masih kelihatan). Sekarang `.fullview` ikut
   aturan rail-icon yg sama dgn `.right-panel-mini` (lihat media query di
   atas) — simetris dgn sidebar kiri. Rule translateX di bawah ini jadi
   cuma berlaku utk jalur "hilang total" yg tersisa (lihat komentar
   `right-panel-hidden` di js/ui-components.js — dipakai saat user
   swap sidebar lewat tombol hamburger ketika fullview sedang aktif). */
body.right-panel-hidden .right-panel { transform: translateX(calc(100% + var(--sb-gap) + 24px)); }
/* ══ UI/UX FIX 2026-07-26: reclaim dead space when right panel is off-screen ══
   Dulu margin-right feed-col tetap dikunci var(--rp-w) (264px) walau
   .right-panel sudah di-translateX 100% ke luar layar sepenuhnya —
   hasilnya jurang abu-abu kosong selebar hampir 264px menempel di tepi
   kanan browser (paling kerasa di layar lebar/desktop, persis di
   screenshot yang dilaporkan). Sekarang cuma sisa var(--sb-gap) supaya
   konten memenuhi ruang yang benar2 kosong, tapi tetap ada nafas tipis
   ke tepi layar. */
body.right-panel-hidden .feed-col { margin-right: var(--sb-gap) !important; }
.tb-btn.nav-hidden { opacity: .38; }

/* ══ LEFT NAV — ICON RAIL (desktop only) ══
   Berlaku utk 2 kondisi: (1) sidebar kiri disembunyikan manual lewat tombol
   hamburger (.left-nav-hidden), dan (2) tombol "Tampilan Penuh" diklik
   (.fullview) — di kondisi (2), sidebar KANAN tetap hilang total (slide
   keluar layar), tapi sidebar KIRI ikut menyusut jadi rail-icon persis
   seperti kondisi (1), bukan ikut hilang total. Khusus di layar desktop
   (>768px, sama seperti breakpoint mobile drawer di JS toggleNav()), sidebar
   kiri TIDAK hilang total — ia menyusut jadi rail sempit berisi ikon saja,
   supaya navigasi cepat & posisi menu tetap kebaca walau sedang
   "disembunyikan". Mode "hilang total" tetap dipakai di mobile (drawer) —
   itu tidak diubah.

   PENTING: posisi tiap ikon WAJIB identik dengan posisi saat sidebar terbuka
   — tidak ada yang boleh ikut naik/geser. Makanya di sini kita TIDAK
   menyembunyikan blok .nav-profile secara utuh (itu akan bikin "Home" dkk
   ikut naik mengisi slot yang kosong) — cukup teks nama/handle-nya saja yang
   disembunyikan, tombol gir pengaturan tetap tampil & tetap di slot/posisi
   atas yang sama persis seperti kondisi terbuka. Kotak "Notes" (.qnote-wrap)
   juga TIDAK di-display:none — kalau di-display:none, tinggi .nav-profile
   ikut menyusut (~50px) dan seluruh menu di bawahnya (Home, Quick Engine,
   Library, dst) ikut geser naik dibanding posisi persis saat sidebar
   terbuka. Makanya dipakai visibility:hidden — ruang tetap "dipesan" (tinggi
   .nav-profile sama persis di kedua kondisi), tapi kontennya disembunyikan
   dari mata & tidak bisa diklik. */

@media (min-width: 769px) {
  body.left-nav-hidden .left-nav,
  body.fullview .left-nav {
    transform: translateX(0);
    width: var(--nav-rail-w); min-width: var(--nav-rail-w);
  }
  /* NB: margin-left feed-col di-override lewat rule terpisah lebih ke
     bawah di blok media query yang sama ini — cari komentar "UI/UX FIX
     2026-07-26: reclaim dead space when rail collapses" (sudah dites
     lewat browser render: gap rail→konten = 20px, sama persis dgn
     --sb-gap & simetris dgn sisi kanan / .right-panel-mini). */

  /* NB: dulu di sini ada aturan buat menyembunyikan/mengecilkan blok
     .nav-profile (gir + nama/handle) & .qnote-wrap (Notes) saat mode
     rail-icon aktif. Sekarang kedua blok itu sudah dipindah keluar dari
     .left-nav ke #right-panel (lihat komentar "UI/UX FIX 2026-07-26" di
     index.html), jadi aturan itu sudah tidak relevan lagi & dihapus —
     mode rail-icon kiri sekarang cuma berlaku utk menu (Home, Quick
     Engine, Library, dst), bukan buat profil/Notes lagi. */

  /* Sembunyikan semua teks/label/badge/tree Library — sisakan ikon saja */
  body.left-nav-hidden .left-nav .ni-label,
  body.fullview .left-nav .ni-label,
  body.left-nav-hidden .left-nav .ni-badge,
  body.fullview .left-nav .ni-badge,
  body.left-nav-hidden .left-nav .pm-nav-badge,
  body.fullview .left-nav .pm-nav-badge,
  body.left-nav-hidden .left-nav .nav-item-chevron,
  body.fullview .left-nav .nav-item-chevron,
  body.left-nav-hidden .left-nav .nav-lib-toggle-chev,
  body.fullview .left-nav .nav-lib-toggle-chev,
  body.left-nav-hidden .left-nav #nav-lib-open-btn,
  body.fullview .left-nav #nav-lib-open-btn,
  body.left-nav-hidden .left-nav .nav-section-label,
  body.fullview .left-nav .nav-section-label {
    display: none !important;
  }
  /* ══ UI/UX FIX 2026-07-26 (v6) ══ Sebelumnya #nav-lib-folders-wrap
     ikut dipaksa display:none di mode rail — padahal di mode normal
     (tertutup/default), elemen ini SUDAH "nol tinggi" lewat teknik lain
     (grid-template-rows:0fr + opacity:0, lihat rule dasarnya). Dua
     teknik yang beda ini menghasilkan tinggi sisa yang beda tipis
     (selisih sub-pixel), dan itu yang narik ikon Pro Mode dikit ke atas
     mendekati Library pas rail aktif — cuma di pasangan ini karena cuma
     di sini ada elemen folders-wrap yang nyempil di antara dua ikon.
     Sekarang di mode rail dipaksa pakai teknik nol-tinggi yang SAMA
     PERSIS dengan kondisi tertutup normal, supaya tingginya identik
     bit-for-bit di kedua mode, apa pun state buka/tutup folder-nya. */
  body.left-nav-hidden .left-nav #nav-lib-folders-wrap,
  body.fullview .left-nav #nav-lib-folders-wrap {
    display: grid !important; grid-template-rows: 0fr !important;
    opacity: 0 !important; pointer-events: none !important;
  }

  /* ══ UI/UX FIX 2026-07-26 (v5) ══ Sebelumnya padding-left nav-section
     (8px→4px) DAN nav-item (9px→0px) sama-sama dikecilkan, plus ikon
     dipaksa justify-content:center — kombinasi itu yang bikin ikon
     terlihat "geser dulu ke kanan" pas transisi (dari posisi nempel-
     kiri di mode normal, ke posisi tengah-kotak di mode rail). Sekarang
     padding-left section TIDAK diubah (tetap 8px seperti mode normal)
     supaya offset kiri ikon 100% identik di kedua mode — cukup padding
     kanan yang dikecilkan (aman, karena tidak ada apa2 di kanan ikon
     lagi setelah labelnya hilang). */
  body.left-nav-hidden .left-nav .nav-section,
  body.fullview .left-nav .nav-section { padding-right: 4px; }
  /* ══ UI/UX FIX 2026-07-26 (v7) ══ .nav-item sebelumnya tetap
     block-level penuh-lebar (mengisi seluruh lebar rail), padahal
     isinya di mode rail cuma ikon 18px + padding-left 9px — sisi
     kanannya jadi jauh lebih lebar dari sisi kiri, makanya kotak
     highlight/hover kelihatan "melebar ke kanan", nggak simetris.
     Sekarang box-nya dipersempit pas-pasan sesuai ikon + padding di
     KEDUA sisi. Posisi kiri box TETAP sama (nempel di inner-edge
     nav-section, persis seperti sebelumnya) jadi ikon tidak ikut
     geser — cuma sisi kanan box yang sekarang dipangkas biar sama-rata
     dengan sisi kiri.

     ══ UI/UX FIX 2026-07-26 (v8) ══ DUA BUG lanjutan dari v7:

     BUG A — "2 ikon sempat naik ke atas" saat proses animasi
     minimize: v7 pakai `display:inline-flex`. Karena .nav-section
     BUKAN flex container (cuma block biasa), anak ber-`display:
     inline-flex` dianggap kotak INLINE oleh induknya — persis kayak
     inline-block/gambar, sesama elemen inline akan sebaris
     berdampingan selama masih muat di lebar baris. Padahal lebar
     .left-nav lagi bertransisi mulus dari lebar penuh → 58px (lihat
     `transition: width` di .left-nav), jadi di tengah-tengah animasi
     (mis. lebar rail masih ~150-250px) beberapa kotak ikon 36px itu
     MASIH MUAT berdampingan → sesaat kelihatan 2-3 ikon nyempil satu
     baris (makanya kelihatan "naik ke atas") sebelum akhirnya jatuh
     ke baris sendiri-sendiri pas lebar final 58px kepakai. Fix:
     kembali ke `display:flex` (BUKAN inline-flex) — flex tetap
     block-level (bukan inline), jadi walau width-nya cuma 36-38px, ia
     TETAP selalu satu box per baris, apa pun lebar container di
     tengah animasi. Width eksplisit tidak butuh inline-flex sama
     sekali untuk "tidak stretch"; block-level dgn width eksplisit
     sudah otomatis tidak ikut melebar ke 100%.

     BUG B — kotak highlight masih sedikit tidak simetris: `*,
     box-sizing:border-box` global (base.css) bikin `width` di sini
     mencakup border+padding. #nav-lib-toggle-btn tidak punya border
     (36px = 9+18+9 pas), TAPI .nav-item punya
     `border:1px solid transparent` (lihat definisi dasar .nav-item)
     yang belum dihitung — jadi ruang isi sebenarnya cuma 34-18=16px,
     lebih sempit dari ikon 18px → ikon overflow ~2px ke kanan,
     kelihatan nempel/kepotong di sisi kanan vs sisi kiri yang masih
     ada napas. Fix: .nav-item butuh +2px (border kiri+kanan) jadi
     38px, sedangkan #nav-lib-toggle-btn (tanpa border) tetap 36px. */
  body.left-nav-hidden .left-nav .nav-item,
  body.fullview .left-nav .nav-item {
    display: flex; width: 38px; padding-right: 9px;
  }
  body.left-nav-hidden .left-nav #nav-lib-toggle-btn,
  body.fullview .left-nav #nav-lib-toggle-btn {
    display: flex; width: 36px; padding-right: 9px;
  }

  /* ══ UI/UX FIX 2026-07-26 (v4) ══ Sebelumnya dipaksa var(--r16)=16px
     biar "senada" sama radius card sidebar — tapi kotak ikon di mode
     rail itu cuma ~40px, jadi radius 16px sudah lebih dari separuh sisi
     terpendeknya → hasilnya membulat penuh jadi pill/kapsul, bukan
     kotak lagi. Dikembalikan ke radius yang SAMA dengan mode normal
     (7px, lihat .nav-item di atas) supaya bentuknya konsisten "kotak
     membulat tipis" di kedua mode, bukan berubah jadi pil pas
     collapse. */
  body.left-nav-hidden .left-nav .nav-item,
  body.fullview .left-nav .nav-item,
  body.left-nav-hidden .left-nav #nav-lib-toggle-btn,
  body.fullview .left-nav #nav-lib-toggle-btn {
    gap: 0;
    border-radius: 7px;
  }
  body.left-nav-hidden .left-nav .nav-item.active,
  body.fullview .left-nav .nav-item.active,
  body.left-nav-hidden .left-nav #nav-lib-toggle-btn.open,
  body.fullview .left-nav #nav-lib-toggle-btn.open {
    border-radius: 7px;
  }

  /* ══ UI/UX FIX 2026-07-26: reclaim dead space when rail collapses ══
     Sebelumnya feed-col SENGAJA tetap pakai margin-left: var(--nav-w)
     (lihat komentar panjang di atas blok ini) walau sidebar sudah
     menyusut jadi rail 58px — alasannya supaya konten "diam" saat
     toggle. Efek sampingnya: muncul jurang abu-abu kosong selebar
     ~190px di antara rail ikon dan kartu konten (persis keluhan
     "kosong/hampa" di kiri). Konten sekarang ikut melebar mengisi
     ruang yang ditinggalkan rail, konsisten dengan perilaku
     right-panel di bawah. Transisi margin sudah di-handle oleh
     `.feed-col { transition: margin ... }` jadi tetap smooth. */
  body.left-nav-hidden .feed-col,
  body.fullview .feed-col {
    /* UI/UX FIX: sama seperti fix simetrisnya di .right-panel-mini/.fullview
       (.feed-col margin-right) di atas — kurangi var(--sb-widen) supaya
       jarak rail kiri→konten = 20px, sama persis dengan jarak
       sidebar→konten saat mode expanded (bukan 44px yang lebih renggang). */
    margin-left: calc(var(--nav-rail-w) + (var(--sb-gap) * 2) - var(--sb-widen)) !important;
  }
}

#fullview-overlay {
  position: fixed; inset: 0; z-index: 49;
  opacity: 0; visibility: hidden;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease),
  visibility var(--dur-base) var(--ease);
  left: 0; right: 0;
}
#fullview-overlay.show { opacity: 1; visibility: visible; }

body.fullview .left-nav {
  z-index: 51 !important;
  filter: none !important;
  opacity: 1;
}

@keyframes posBlinkDot {
  0%, 100% { opacity: 1; }
  40%       { opacity: .2; }
  50%       { opacity: 0; }
}
.ctr-storage-meter:hover { border-color: var(--border2); }
.ctr-sm-used-label span { color: var(--txt2); }

.ctr-sm-bar {
  height: 100%; border-radius: 99px;
  background: rgba(0,0,0,.22);
  min-width: 0;
  position: relative;
  overflow: visible;
  transition: background .4s;
}

.ctr-sm-bar[data-level="warn"]     { background: rgba(255,185,50,.85); }
.ctr-sm-bar[data-level="critical"] { background: rgba(255,75,50,.90); }

@keyframes ctrPctPop {
  0%   { transform: scale(1);    opacity: .5; }
  40%  { transform: scale(1.15); opacity: 1;  }
  70%  { transform: scale(.97);  }
  100% { transform: scale(1);    }
}
.ctr-sm-pct-animating { display: inline-block; animation: ctrPctPop .55s cubic-bezier(.34,1.56,.64,1) forwards; }

@keyframes ctrRowIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ctr-sm-row-animate { animation: ctrRowIn .35s var(--ease) both; }

@keyframes ctrTrackGlowLight {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,.14); }
  40%  { box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,.0); }
}
.ctr-sm-track.animating { animation: ctrTrackGlowLight 1.6s ease forwards; }

.ctr-sm-refresh.spinning { pointer-events: none; }
.ctr-sm-quota-info strong { color: var(--txt2); }
.ctr-sm-refresh:hover { border-color: var(--border3); color: var(--txt2); background: var(--bg3); }

.ctr-sm-alert {
  display: none; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--r8);
  margin-top: 9px;
}
.ctr-sm-alert.warn { display:flex; background:rgba(255,185,50,.10); border:1px solid rgba(255,185,50,.22); color:#ffb932; }
.ctr-sm-alert.critical { display:flex; background:rgba(255,75,50,.10); border:1px solid rgba(255,75,50,.22); color:#ff6050; }
.qe-lib-sm-label {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--txt3); white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-mono);
}
.qe-lib-sm-track { flex: 1; height: 4px; border-radius: 99px; background:var(--tint-4); overflow: hidden; position: relative; }
.qe-lib-sm-fill {
  height: 100%; border-radius: 99px; width: 0%;
  background: rgba(60,60,67,.55);
  transition: width .45s cubic-bezier(.4,0,.2,1), background .3s;
}
.qe-lib-sm-fill[data-level="warn"]     { background: rgba(255,185,50,.85); }
.qe-lib-sm-fill[data-level="critical"] { background: rgba(255,75,50,.90); }
.qe-lib-sb-fill[data-level="warn"]     { background: rgba(255,185,50,.85); }
.qe-lib-sb-fill[data-level="critical"] { background: rgba(255,75,50,.90); }
.qe-lib-sm-nums { font-size: 10px; font-weight: 600; color: var(--txt3); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; }
.qe-lib-sm-nums span { color: var(--txt2); }
.qe-lib-sm-link {
  font-size: 10px; font-weight: 700; color: var(--txt3); cursor: pointer;
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border2);
  background: transparent; transition: all var(--dur-fast); white-space: nowrap; flex-shrink: 0;
  letter-spacing: .2px;
}
.qe-lib-sm-link:hover { background: var(--bg4); color: var(--txt2); border-color: var(--border3); }
.ctr-mgmt-row:last-child { border-bottom: none; }
.ctr-mgmt-row:hover { background: var(--bg3); }
.ctr-mgmt-info { flex: 1; min-width: 0; }
.ctr-mgmt-sublabel strong { color: var(--txt2); font-weight: 600; }
.ctr-mgmt-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.ctr-mgmt-slider-wrap { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--txt3); }
.ctr-mgmt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--txt2);
  border: 2px solid var(--bg2);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: pointer;
}
.ctr-mgmt-archive-btn {
  background: rgba(255,180,30,.10);
  color: #8A6800;
  border-color: rgba(255,180,30,.30);
}
.ctr-mgmt-archive-btn:hover { background: rgba(255,180,30,.18); border-color: rgba(255,180,30,.45); }
.ctr-mgmt-clear-btn:hover {
  background: rgba(255,60,40,.14);
  border-color: rgba(255,60,40,.35);
  color: #ff6050;
  transform: translateY(-1px);
}
.ctr-sweep-header:hover { background: rgba(217,48,37,.08); }
.ctr-sweep-header-body { flex: 1; min-width: 0; }
.ctr-sweep-chev {
  font-size: 10px; color: rgba(217,48,37,.5); transition: transform var(--dur-base) var(--ease);
  flex-shrink: 0;
}
.ctr-sweep-panel.open .ctr-sweep-chev { transform: rotate(90deg); }
.ctr-sweep-body { display: none; padding: 12px 14px; border-top: 1px solid rgba(217,48,37,.10); }
.ctr-sweep-panel.open .ctr-sweep-body { display: block; }
.ctr-sweep-scan-btn {
  width: 100%; padding: 9px 14px; border-radius: var(--r8);
  border: 1.5px solid rgba(217,48,37,.30);
  background: transparent; color: var(--danger);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all var(--dur-base); display: flex; align-items: center;
  justify-content: center; gap: 7px;
  font-family: inherit;
}
.ctr-sweep-scan-btn:hover { background: rgba(217,48,37,.08); border-color: rgba(217,48,37,.55); }
.ctr-sweep-scan-btn:active { transform: scale(.98); }
.ctr-sweep-result { margin-top: 11px; }
.ctr-sweep-empty {
  padding: 14px; text-align: center;
  font-size: 11.5px; color: var(--txt3);
  background: var(--bg3); border-radius: var(--r8);
  border: 1px solid var(--border);
}
.ctr-sweep-empty strong { color: var(--success); display: block; font-size: 13px; margin-bottom: 3px; }
.ctr-sweep-list { display: flex; flex-direction: column; gap: 4px; }
.ctr-sweep-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r8);
  background: var(--bg2); border: 1px solid var(--border2);
  transition: background var(--dur-fast);
}
.ctr-sweep-item:hover { background: rgba(217,48,37,.04); }
.ctr-sweep-item-chk {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--border2); flex-shrink: 0;
  cursor: pointer; accent-color: var(--danger);
}
.ctr-sweep-item-key {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctr-sweep-item-size { font-size: 9.5px; color: var(--txt3); flex-shrink: 0; font-family: var(--font-mono); }
.ctr-sweep-item-del {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(217,48,37,.25); background: transparent;
  color: var(--danger); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-item-del:hover { background: rgba(217,48,37,.10); border-color: var(--danger); }
.ctr-sweep-actions { display: flex; gap: 7px; margin-top: 10px; }
.ctr-sweep-del-sel {
  flex: 1; padding: 8px 12px; border-radius: var(--r8);
  border: 1.5px solid rgba(217,48,37,.35);
  background: transparent; color: var(--danger);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-del-sel:hover { background: rgba(217,48,37,.08); border-color: var(--danger); }
.ctr-sweep-del-sel:disabled { opacity: .38; cursor: default; }
.ctr-sweep-del-all {
  flex: 1; padding: 8px 12px; border-radius: var(--r8);
  border: none; background: var(--danger);
  color: #fff; font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-del-all:hover { background: #b5271f; }
.ctr-sweep-del-all:disabled { opacity: .38; cursor: default; }
.ctr-sweep-summary { margin-bottom: 9px; font-size: 10.5px; color: var(--txt3); display: flex; align-items: center; justify-content: space-between; }
.ctr-sweep-summary strong { color: var(--danger); }
.ctr-sweep-chk-all { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--txt3); cursor: pointer; }
.ctr-sweep-chk-all input { accent-color: var(--danger); }

.ctr-sweep-orphan-section { margin-top: 14px; }
.ctr-sweep-orphan-title {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color:var(--placeholder); margin-bottom: 7px; font-family: var(--font-mono);
}
.ctr-sweep-orphan-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r8);
  background: rgba(255,180,30,.07); border: 1px solid rgba(255,180,30,.22);
  margin-bottom: 5px; cursor: pointer; transition: background var(--dur-fast);
}
.ctr-sweep-orphan-row:hover { background: rgba(255,180,30,.14); }
.ctr-sweep-orphan-icon { font-size: 13px; flex-shrink: 0; }
.ctr-sweep-orphan-name { flex: 1; font-size: 11.5px; font-weight: 600; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctr-sweep-orphan-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 99px; background: rgba(255,160,0,.18);
  color: #b06000; flex-shrink: 0;
}
.ctr-sweep-orphan-del {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(217,48,37,.25); background: transparent;
  color: var(--danger); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base); font-family: inherit;
}
.ctr-sweep-orphan-del:hover { background: rgba(217,48,37,.10); border-color: var(--danger); }

.ctr-storage-meter {
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--bg2); padding: 9px 12px !important;
  margin-bottom: 8px;
  transition: border-color var(--dur-base);
}
.ctr-sm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px !important; }
.ctr-sm-title {
  display: flex; align-items: center; gap: 5px !important; font-size: 8px !important; font-weight: 900; letter-spacing: 1.4px !important; text-transform: uppercase;
  color: var(--txt3);
  font-family: var(--font-mono);
}
.ctr-sm-icon { font-size: 10px !important; }
.ctr-sm-used-label { font-size: 9px !important; font-weight: 700;
  color: var(--txt3);
  font-family: var(--font-mono);
}

.ctr-sm-track {
  width: 100%; height: 3px !important; border-radius: 99px;
  background: var(--bg5);
  border: 1px solid var(--border);
  overflow: hidden; margin-bottom: 5px !important;
  position: relative;
}

.ctr-sm-breakdown {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px 8px !important; padding: 5px 8px !important;
  background: var(--bg3);
  border-radius: var(--r8);
  border: 1px solid var(--border);
  margin-bottom: 0 !important;
}
.ctr-sm-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 9px !important; color: var(--txt2); }
.ctr-sm-row-label {
  display: flex; align-items: center; gap: 4px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600; font-size: 9px !important;
}
.ctr-sm-dot { width: 5px !important; height: 5px !important; border-radius: 50%; flex-shrink: 0; background: rgba(0,0,0,.28); }
.ctr-sm-row-val { font-family: var(--font-mono); font-size: 8.5px !important; font-weight: 700; color: var(--txt); flex-shrink: 0; }
.ctr-sm-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: 5px !important; padding-top: 5px !important;
  border-top: 1px solid var(--border);
}
.ctr-sm-quota-info { font-size: 8.5px !important; color: var(--txt3); font-family: var(--font-mono); }
.ctr-sm-refresh { font-size: 9px !important; font-weight: 700; color: var(--txt3);
  background: none; border: 1px solid var(--border2);
  border-radius: var(--r8); padding: 2px 7px !important;
  cursor: pointer; transition: all var(--dur-base);
}

.ctr-mgmt-panel {
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--bg2);
  overflow: hidden; margin-bottom: 6px !important;
}

.ctr-mgmt-divider { padding: 4px 12px 3px !important; font-size: 7.5px !important; font-weight: 900; letter-spacing: 1.5px !important;
  text-transform: uppercase; color: var(--txt3);
  background: var(--bg3); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
.ctr-mgmt-row {
  display: flex; align-items: center; gap: 9px !important; padding: 7px 12px !important;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
}
.ctr-mgmt-icon { font-size: 12px !important; flex-shrink: 0; width: 18px !important; text-align: center; }
.ctr-mgmt-label { font-size: 11px !important; font-weight: 700; color: var(--txt); display: flex; align-items: center; gap: 6px !important; }
.ctr-mgmt-sublabel { font-size: 9px !important; color: var(--txt3); margin-top: 1px !important; line-height: 1.4; }
.ctr-mgmt-badge { font-size: 8.5px !important; font-weight: 800;
  font-family: var(--font-mono);
  color: var(--txt3);
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--r99); padding: 1px 6px !important;
  flex-shrink: 0;
}
.ctr-mgmt-slider {
  -webkit-appearance: none; appearance: none; width: 70px !important; height: 4px;
  border-radius: 99px;
  background: var(--bg5);
  cursor: pointer; outline: none;
}
.ctr-mgmt-slider-val {
  font-family: var(--font-mono); font-size: 9px !important; font-weight: 800;
  color: var(--txt2); min-width: 22px !important; text-align: right;
}

.ctr-mgmt-clear-btn { padding: 3px 9px !important; border-radius: var(--r8);
  background: rgba(255,60,40,.07);
  border: 1px solid rgba(255,60,40,.18);
  color: #e86050; font-size: 9px !important; font-weight: 800; cursor: pointer;
  transition: all var(--dur-base) var(--spring);
  white-space: nowrap;
}

.ctr-sweep-panel {
  border: 1px solid var(--border2);
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--bg2); margin-bottom: 6px !important;
}
.ctr-sweep-header {
  display: flex; align-items: center; gap: 8px !important; padding: 8px 12px !important;
  background: rgba(217,48,37,.04);
  border-bottom: 1px solid rgba(217,48,37,.10);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast);
}
.ctr-sweep-header-icon { font-size: 12px !important; flex-shrink: 0; }
.ctr-sweep-header-title { font-size: 11px !important; font-weight: 800; color: var(--danger); margin-bottom: 0 !important; letter-spacing: -.1px; }
.ctr-sweep-header-sub { font-size: 9px !important; color: var(--txt3); line-height: 1.4; }

.pos-ab-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.pos-ab-row:last-child { border-bottom: none; }
.pos-ab-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ui-muted); flex-shrink: 0; transition: background .3s;
}
.pos-ab-label { flex: 1; font-size: 11px; font-weight: 700; color: var(--txt); }
.pos-ab-sub { font-size: 9.5px; color: var(--txt3); }
.pos-ab-btn-sm {
  padding: 4px 11px; border-radius: 99px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt2); font-size: 10px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-fast); white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
}
.pos-ab-btn-sm:hover { border-color: var(--border3); background: var(--bg3); color: var(--txt); }
.pos-ab-gear {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--txt3); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast); flex-shrink: 0;
}
.pos-ab-gear:hover { background: var(--bg3); color: var(--txt2); }
.pos-ab-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pos-ab-chip {
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border);
  background: transparent; color: var(--txt3); font-size: 10px; font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast); font-family: inherit; white-space: nowrap;
}
.pos-ab-chip:hover { border-color: var(--border3); color: var(--txt2); }
.pos-ab-chip.active { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.funnel-card { margin-bottom: 4px; border-radius: var(--r8); overflow: clip; border: 0.5px solid rgba(0,0,0,.09); transition: border-color .12s, background .12s; background: var(--bg2); contain: layout style; }
.funnel-card:hover { border-color:var(--border3); }
.funnel-card.funnel-card-open { border: 1.5px solid rgba(0,0,0,.28); background: var(--bg2); position: relative; z-index: 1; margin-bottom: 8px; margin-top: 2px; border-radius: 10px; }
.funnel-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; user-select: none; background: transparent; overflow: clip; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.funnel-head:active { background:var(--tint-2); }
.funnel-card-open .funnel-head { background: #F5F5F5; border-bottom: 1px solid rgba(0,0,0,.10); }
.funnel-badge { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--txt); letter-spacing: .3px; flex-shrink: 0; background: #F2F2F7; border: 0.5px solid rgba(0,0,0,.10); }
.funnel-titles { flex: 1; min-width: 0; }
.funnel-name { font-size: 12px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: clip; text-overflow: ellipsis; letter-spacing: -.1px; }
.funnel-sub { font-size: 9.5px; color: var(--txt3); margin-top: 1px; white-space: nowrap; overflow: clip; text-overflow: ellipsis; font-weight: 500; }
.funnel-arrow { font-size: 8px; color: var(--ui-muted); transition: transform .2s cubic-bezier(.4,0,.2,1); line-height: 1; flex-shrink: 0; will-change: transform; }
.funnel-body { max-height: 0; overflow: hidden; transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease; opacity: 0; background: #FAFAFA; will-change: max-height, opacity; }
.funnel-body.open { opacity: 1; }
.funnel-inner { padding: 10px 12px 12px; border-top: 0.5px solid rgba(0,0,0,.07); contain: layout style; }

.rp-ratio-box { margin-top: 10px; padding: 9px 10px; background: var(--bg2); border: 0.5px solid var(--border2); border-radius: var(--r8); }
.rp-ratio-bar { display: flex; height: 3px; border-radius: 99px; overflow: hidden; gap: 2px; margin-bottom: 7px; }
.rp-ratio-t { flex: 5; background: var(--txt); border-radius: 99px; }
.rp-ratio-m { flex: 3; background: var(--txt3); border-radius: 99px; }
.rp-ratio-b { flex: 2; background: var(--ui-muted); border-radius: 99px; }
.rp-ratio-row { display: flex; gap: 12px; }
.rp-ratio-item strong { color: var(--txt); font-weight: 600; }

.fw-section { padding: 12px 14px 8px; }
.fw-section-title { font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--txt3); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }

/* ── RIGHT PANEL: Premium macOS-Inspired Section Headers ── */
.rp-collapsible-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px 10px;
  cursor: pointer; user-select: none;
  background: var(--bg2);
  transition: background var(--dur-base) var(--ease);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid transparent;
  touch-action: pan-y !important;
}
.rp-collapsible-head::before {
  content: '';
  display: block;
  width: 2.5px;
  height: 14px;
  border-radius: 99px;
  background: var(--ui-muted);
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease), height var(--dur-base) var(--spring), opacity var(--dur-base);
  opacity: .45;
}
.rp-collapsible-head.open::before {
  background: var(--txt2);
  height: 18px;
  opacity: .8;
}
.rp-collapsible-head:hover { background: var(--bg4); }
.rp-collapsible-head:active { background: var(--bg5); }
.rp-collapsible-head:hover::before { opacity: .65; }

.rp-divider + .rp-collapsible-head,
.rp-collapsible-body + .rp-collapsible-head,
.rp-collapsible-body + .rp-divider + .rp-collapsible-head {
  border-top: 1px solid var(--border);
}

.rp-section-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--spring);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.rp-collapsible-head:hover .rp-section-icon {
  background: var(--bg5);
  transform: scale(1.06);
}
.rp-collapsible-head.open .rp-section-icon {
  background: var(--txt);
  border-color: var(--txt);
  color: var(--bg);

}

.rp-collapsible-head-label {
  flex: 1;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .25px;
  color: var(--txt2);
  font-feature-settings: 'ss01';
}
.rp-collapsible-head.open .rp-collapsible-head-label {
  color: var(--txt);
  font-weight: 700;
}

/* When open: add bottom border + slight bg shift to separate header from content */
.rp-collapsible-head.open {
  border-bottom: 1.5px solid var(--border2);
  background: var(--bg2);
}
.rp-collapsible-head.open:hover {
  background: var(--bg4);
}
.rp-collapsible-head:not(.open) {
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

/* Chevron — refined SVG-style using CSS */
.rp-collapsible-head-chev {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg4);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: var(--txt3);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0; line-height: 1;
  will-change: transform;
}
.rp-collapsible-head:hover .rp-collapsible-head-chev {
  background: var(--bg5);
  border-color: var(--border2);
  color: var(--txt2);
}
.rp-collapsible-head.open .rp-collapsible-head-chev {
  transform: rotate(180deg);
  background: var(--bg5);
  border-color: var(--border2);
  color: var(--txt);
}

.rp-collapsible-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .16s ease;
  will-change: max-height, opacity;
  contain: layout style;
}
.rp-collapsible-body.open {
  background: var(--bg2);
  border-bottom: 1px solid var(--border); opacity: 1; overflow: clip;
}
.fw-card { margin-bottom: 4px; border-radius: var(--r8); overflow: clip; border: 0.5px solid rgba(0,0,0,.09); transition: border-color .12s, background .12s; background: var(--bg2); contain: layout style; }
.fw-card:hover { border-color:var(--border3); }
.fw-card.fw-card-open { border: 1.5px solid rgba(0,0,0,.28); background: var(--bg2); position: relative; z-index: 1; margin-bottom: 8px; margin-top: 2px; border-radius: 10px; }
.fw-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer; user-select: none; background: var(--bg2); overflow: clip; touch-action: pan-y !important; -webkit-tap-highlight-color: transparent; }
.fw-head:active { background:var(--tint-2); }
.fw-card-open .fw-head { background: var(--bg3); border-bottom: 1px solid rgba(0,0,0,.10); }
.fw-info { flex: 1; min-width: 0; }
.fw-name { font-size: 12px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: clip; text-overflow: ellipsis; letter-spacing: -.1px; }
.fw-chevron { font-size: 8px; color: var(--ui-muted); transition: transform .2s cubic-bezier(.4,0,.2,1); flex-shrink: 0; line-height: 1; will-change: transform; }
.fw-chevron.open { transform: rotate(180deg); }
.fw-body { max-height: 0; overflow: hidden; transition: max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease; opacity: 0; background: var(--bg3); touch-action: pan-y; will-change: max-height, opacity; }
.fw-body.open { opacity: 1; }
.fw-inner { padding: 10px 12px 12px; border-top: 0.5px solid rgba(0,0,0,.07); background: var(--bg3); touch-action: pan-y; contain: layout style; }
.fw-desc { font-size: 11px; color: var(--txt2); line-height: 1.58; margin-bottom: 8px; font-weight: 500; }
.fw-struct-title { font-size: 8.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--txt3); margin-bottom: 5px; }
.fw-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.fw-tag { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 99px; border: 0.5px solid rgba(0,0,0,.12); color: var(--txt2); background: transparent; }
.fw-example { background: #F2F2F7; border-radius: var(--r8); border: 0.5px solid rgba(0,0,0,.07); padding: 7px 10px; font-size: 10.5px; color: var(--txt2); line-height: 1.55; }
.fw-example strong { color: var(--txt); font-weight: 600; }

/* [FIX 2026-07-27] Sebelumnya .qe-page (satu-satunya dari 4 halaman utama:
   .page/.qe-page/.pm-page/.bb-page) punya max-width:1560px + margin auto
   utk nge-center — jadi di layar lebar (mis. monitor eksternal), halaman
   Quick Engine TIDAK ikut melebar penuh seperti Home/Pro Mode/Bracket Bank
   (yang sengaja width:100% tanpa max-width, lihat komentar di .pm-page &
   .bb-page). Dihapus supaya konsisten mengikuti lebar .feed-col penuh
   di semua ukuran layar, sama seperti 3 halaman lainnya. */
.qe-page { padding: 24px 24px 40px; animation: pageIn var(--dur-base) var(--ease); width: 100%; box-sizing: border-box; }
.qe-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.qe-title { font-size:16px; font-weight:700; color:var(--txt); letter-spacing:-.4px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif; margin-bottom:3px; }
.qe-subtitle { font-size:11.5px; color:var(--txt3); margin-top:2px; }
.qe-flow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.qe-flow-step { font-size:11px; font-weight:700; color:var(--txt2); background:var(--tint-2); border:1px solid var(--border2); padding:4px 10px; border-radius:99px; }
.qe-flow-arrow { color:var(--txt3); font-size:12px; }
.qe-card-body { padding:10px 16px 16px; flex:1; min-height:0; display:flex; flex-direction:column; }
/* Step 1: rapatkan textarea ke bawah header (batas atas mepet ke garis header) */
#qe-step1-card .qe-card-body { padding-top:2px; }

.qe-bracket-row { display:flex; gap:5px; flex-wrap:nowrap; align-items:center; }
/* ── FORMAT row buttons unified token ── */
.qe-bracket-btn,
.qe-syntax-hl-btn,
.qe-tpl-expand-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 10px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--txt3); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap; flex-shrink: 0; user-select: none; line-height: 1;
  font-family: var(--font-mono);
}
.qe-bracket-btn:hover,
.qe-syntax-hl-btn:hover,
.qe-tpl-expand-btn:hover {
  border-color: var(--border3); background: rgba(0,0,0,.05); color: var(--txt2);
}
.qe-bracket-btn.active,
.qe-syntax-hl-btn.active,
.qe-tpl-expand-btn.active {
  border-color: var(--border3); background:var(--tint-4); color: var(--txt);
}
.qe-tpl-expand-btn { padding: 3px 8px; }


.qe-hint { font-size:11px; color:var(--txt3); display:flex; align-items:center; gap:6px; padding:8px 11px; background:var(--tint-1); border:1px solid var(--border); border-radius:var(--r8); margin-bottom:10px; }
.qe-hint code { font-family:var(--font-mono); font-size:11px; color:var(--txt2); background:var(--tint-3); padding:1px 5px; border-radius:4px; }

.qe-textarea {
  width:100%; height:110px; min-height:110px; padding:10px 12px;
  background: transparent; border: none;
  border-radius: calc(var(--r12) - 1.5px); color:var(--txt); font-size:13px; font-family: var(--font-sans);
  line-height:1.5; resize:vertical; transition: none;
  overflow-y: auto;
  position: relative; z-index: 1;
  display: block;
}
.qe-textarea.auto-expand {
  height: auto;
  resize: none;
  overflow-y: hidden;
}
.qe-textarea:focus { outline:none; background: transparent; }
.qe-textarea::placeholder { color:var(--txt3); }

.qe-actions-row { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.qe-parse-status { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--txt3); flex:1; min-width:0; line-height:1; white-space:nowrap; }
.qe-parse-status .dot { width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.28); flex-shrink:0; align-self:center; }
.qe-parse-status.found .dot { background:#6BCA6B; box-shadow:0 0 6px rgba(107,202,107,.5); }
.qe-parse-status .mono { font-family:var(--font-mono); font-size:11px; }

.qe-btn-outline { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1.5px solid var(--border2); background:transparent; border-radius:var(--r8); font-size:12px; font-weight:700; color:var(--txt2); cursor:pointer; transition:all var(--dur-base); }
.qe-btn-outline:hover { background:rgba(0,0,0,.05); border-color:var(--border3); color:var(--txt); }

.qe-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; }
@media(max-width:560px) { .qe-fields-grid { grid-template-columns:1fr; } }

.qe-field-item.qe-field-expanded,
.qe-field-item.qe-field-full { grid-column: 1 / -1; }

/* [FEATURE 2026-08-09] Header Blok Label — grid-column:1/-1 supaya selalu
   mulai baris baru sendiri, sama seperti .qe-field-full di atas.
   [FIX] Sebelumnya cuma teks kecil uppercase + garis tipis di bawah —
   ukuran & bobotnya nyaris identik dengan .qe-field-label (label field
   biasa spt "[role AI]"), jadi user tidak bisa langsung bedain mana
   JUDUL BLOK vs mana LABEL FIELD biasa cuma dari sekilas lihat. Sekarang
   dibikin jadi "pill" mandiri: background & border sendiri (beda layer
   dari field di bawahnya), aksen garis warna di kiri, ukuran huruf lebih
   besar & lebih tebal — supaya keliatan jelas ini BATAS/JUDUL grup, bukan
   nama field. */
.qe-field-group-label::before {
  content: '';
  width: 3px; height: 15px; flex-shrink: 0;
  border-radius: 2px;
  background: var(--bg);
  opacity: .55;
}
.qe-field-group-label--default {
  /* Grup default ("Umum") tetap solid & kontras tinggi, tapi pakai
     abu-abu (bukan hitam/putih pekat) supaya tetap kebeda dari grup
     yang namanya user tentukan sendiri. */
  color: var(--bg);
  background: var(--txt3);
  border-color: var(--txt3);
  font-weight: 700;
}
.qe-field-group-label--default::before { background: var(--bg); opacity: .6; }
.qe-fields-grid > .qe-field-group-label:first-child { margin-top: 0; }

/* [FEATURE Collapsible Group — Tahap 2] Header grup sekarang clickable buat
   collapse/expand isi grup itu — cuma aktif kalau template memang punya
   Blok Label section; kalau tidak ada section, elemen-elemen ini tidak
   pernah dirender sama sekali (lihat qeRenderFields), jadi tampilan field
   tanpa section tetap normal seperti biasa, tidak berubah sedikit pun. */
.qe-field-group-label {
  /* [FIX] Sebelumnya pakai bg tint tipis (--tint-3) yang masih kebaca
     "form field biasa" karena kontrasnya rendah, mirip nuansa input di
     bawahnya. Sekarang pakai warna SOLID kebalikan dari warna teks utama
     (var(--txt)) — hitam pekat di mode terang, putih pekat di mode gelap
     — supaya kontrasnya jauh lebih tinggi & jelas beda layer dari field. */
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--bg);
  background: var(--txt);
  border: 1px solid var(--txt);
  border-radius: var(--r8);
  padding: 9px 12px;
  margin: 16px 0 6px;
  position: relative; cursor: pointer; user-select: none; transition: opacity var(--dur-base);
}
.qe-field-group-label:hover { opacity: .88; }
.qe-field-group-label-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qe-field-group-count {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  background: rgba(255,255,255,.18); color: var(--bg); border-radius: 99px; padding: 2px 8px;
  font-family: var(--font-mono);
}
.qe-field-group-label--default .qe-field-group-count { background: rgba(255,255,255,.22); }
.qe-field-group-chevron { flex-shrink: 0; transition: transform var(--dur-base); opacity: .85; }
.qe-field-group-label--collapsed .qe-field-group-chevron { transform: rotate(-90deg); }
.qe-field-group-label--collapsed { margin-bottom: 16px; }

/* Field yang lagi disembunyikan karena grupnya di-collapse — dibuang total
   dari layout (bukan cuma visibility:hidden) supaya tidak nyisain gap
   kosong di grid, dan supaya validasi/generate tidak "melihat" input yang
   sedang tersembunyi sebagai kosong-tapi-required secara visual. */
.qe-field-item--collapsed { display: none !important; }

/* [FIX] Tombol jenis field disederhanakan jadi ikon SVG polos saja —
   tidak ada lagi kotak/pill/lingkaran background SAMA SEKALI, di state
   apa pun (default, hover, maupun active/mode-terpilih). Cuma warna ikon
   yang berubah jadi lebih gelap/terang (var(--txt)) sebagai penanda
   hover/active, bukan background. Ukuran ikon SERAGAM 15x15 di semua
   jenis field tanpa kecuali (lihat modeIcon di qeRenderFields). */
.qe-field-expand-btn {
  width:24px; height:24px; border:none; background:transparent;
  color:var(--txt3); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-left:8px;
  transition:color var(--dur-base);
}
.qe-field-expand-btn svg { width:15px; height:15px; flex-shrink:0; display:block; }
.qe-field-expand-btn:hover { background:transparent; color:var(--txt); }
.qe-field-expand-btn.active { color:var(--txt); background:transparent; }

/* [FEATURE Tahap 2] Menu Dropdown "Jenis Field" — popover yang muncul saat
   .qe-field-expand-btn diklik, isinya daftar semua jenis field (Text,
   Text Area, Dropdown, Multi-Select, Color Picker, Date Picker, Number)
   supaya bisa dipilih langsung 1 klik, tidak perlu muter siklus toggle. */
.qe-field-type-menu {
  position:fixed; z-index:9500; min-width:196px; max-width:250px;
  background:var(--bg2,#fff); border:1.5px solid rgba(0,0,0,.12);
  border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.16);
  overflow:hidden; padding:5px;
}
.qe-field-type-menu-item {
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
  cursor:pointer; transition:background .1s;
}
.qe-field-type-menu-item:hover { background:rgba(0,0,0,.06); }
.qe-field-type-menu-item.active { background:rgba(0,0,0,.08); }
.qe-field-type-menu-icon {
  flex-shrink:0; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  color:var(--txt3); border-radius:6px; background:var(--tint-2);
}
.qe-field-type-menu-item.active .qe-field-type-menu-icon { color:var(--txt); background:var(--tint-4); }
.qe-field-type-menu-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.qe-field-type-menu-label {
  font-size:12.5px; font-weight:600; color:var(--txt); font-family:var(--font-sans);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qe-field-type-menu-hint {
  font-size:10px; color:var(--txt3); font-family:var(--font-sans);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qe-field-type-menu-check { flex-shrink:0; color:var(--txt); display:flex; align-items:center; }

.qe-field-textarea {
  padding:7px 10px; background:var(--tint-2); border:1.5px solid var(--line-1);
  border-radius:var(--r8); color:var(--txt); font-size:12.5px; font-family: var(--font-sans);
  transition:border-color var(--dur-base); width:100%; resize:vertical; min-height:68px; line-height:1.45;
}
.qe-field-textarea:focus { border-color:var(--line-3); outline:none; background:var(--tint-3); }
.qe-field-textarea::placeholder { color:var(--placeholder); font-style:italic; }

.qe-color-field {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 6px;
  border-radius: var(--r8); border:1.5px solid var(--line-1);
  background: var(--bg3); transition: border-color var(--dur-base);
  cursor: default;
}
.qe-color-field:focus-within { border-color:var(--line-3); }
.qe-color-swatch {
  -webkit-appearance: none; appearance: none;
  width: 36px; height: 36px; border: none; border-radius: 8px;
  padding: 0; cursor: pointer; flex-shrink: 0;
  background: transparent; outline: none;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.10);
  transition: box-shadow var(--dur-base), transform var(--dur-fast);
}
.qe-color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 7px; }
.qe-color-swatch::-webkit-color-swatch { border: none; border-radius: 7px; }
.qe-color-swatch:hover { box-shadow: 0 0 0 2.5px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.14); transform: scale(1.06); }
.qe-color-hex {
  flex: 1; background: transparent; border: none; box-shadow: none;
  font-family: var(--font-mono); font-size: 12.5px;
  font-weight: 700; color: var(--txt); letter-spacing: .5px;
  padding: 0; outline: none;
}
.qe-color-preview {
  font-size: 9.5px; font-weight: 800; font-family: var(--font-mono);
  padding: 3px 9px; border-radius: var(--r99);
  color: rgba(255,255,255,.92); letter-spacing: .4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  flex-shrink: 0; pointer-events: none;
  transition: background var(--dur-fast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.qe-date-field {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; position: relative; cursor: pointer;
  border-radius: var(--r8); border:1.5px solid var(--line-1);
  background: var(--bg3); transition: border-color var(--dur-base);
}
.qe-date-field:hover { border-color:var(--border3); }
.qe-date-field:focus-within { border-color:var(--line-3); }
.qe-date-icon {
  flex-shrink: 0; color: var(--txt3); transition: color var(--dur-fast);
}
.qe-date-field:hover .qe-date-icon, .qe-date-field:focus-within .qe-date-icon { color: var(--txt2); }
.qe-date-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; background: transparent; box-shadow: none;
  opacity: 0; outline: none; padding: 0; margin: 0;
  pointer-events: none; -webkit-appearance: none; appearance: none;
}
.qe-date-display {
  flex: 1; font-size: 12.5px; font-weight: 600;
  color: var(--txt); font-family: var(--font-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .2px;
}
.qe-date-display.qe-date-placeholder {
  color: var(--txt3); font-style: italic; font-weight: 400; opacity: .7;
}

/* (syntax-hl-btn now in FORMAT row unified token) */
.qe-syntax-hl-btn .sh-dot { display: none; }
.sh-bracket  { color: #0066CC; }
.sh-dm-sq  { color: #0066CC; }   .sh-dm-cu  { color: inherit; }   .sh-dm-an  { color: inherit; }   .sh-dm-ro  { color: inherit; }   .sh-sep      { color: #C07000; }
.sh-note-txt { color: #8B5500; }

.sh-url {
  color: var(--link, #3C78DC);
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.sh-url:hover {
  background: rgba(60,120,220,.10);
  opacity: .85;
}
#qe-url-overlay::-webkit-scrollbar { display: none; }
#qe-url-overlay .sh-url:hover {
  background: rgba(60,120,220,.10);
}

#qe-url-overlay .sh-url::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--txt);
  color: var(--bg2);
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
  z-index: 99;
  letter-spacing: .2px;
}
#qe-url-overlay .sh-url:hover::after {
  opacity: 1;
}
#qe-url-overlay .sh-url {
  color: transparent;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 2px;
  transition: background var(--dur-fast);
  position: relative;
}

#qe-template.sh-active {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: var(--txt);
  background: transparent !important;
}
#qe-syntax-overlay.sh-visible {
  background: transparent;
}
.qe-textarea-wrap {
  position: relative;
  border-radius: var(--r12);
  overflow: hidden;
  border:1.5px solid var(--line-1);
  transition: border-color var(--dur-base);
  background:var(--tint-1);
}
.qe-textarea-wrap:focus-within {
  border-color:var(--line-2b);
  background: rgba(0,0,0,.05);
}

/* URL Chip Strip — disembunyikan, sudah digantikan oleh embed card */
#qe-url-chip-strip {
  display: none !important;
}

#qe-yt-preview-strip {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-width: 100%;
  overflow: hidden;
}
#qe-yt-preview-strip.has-items {
  display: flex;
}

.qe-vpc {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.09);
  background:var(--tint-1);
  overflow: hidden;
  transition: border-color var(--dur-base);
  cursor: pointer;
}
.qe-vpc:hover { border-color: rgba(0,0,0,.16); background: rgba(0,0,0,.045); }

.qe-vpc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.qe-vpc-head:hover .qe-vpc-thumb-wrap { filter: brightness(.88); }

.qe-vpc-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background:var(--tint-5);
  transition: filter var(--dur-base);
  display: flex; align-items: center; justify-content: center;
}
.qe-vpc-thumb-wrap.tt { width: 80px; height: 56px; } .qe-vpc-thumb-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity var(--dur-slow);
}
.qe-vpc-thumb-wrap img.loaded { opacity: 1; }
.qe-vpc-play-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.30);
}
.qe-vpc-play-badge svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }

.qe-vpc-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.qe-vpc-platform {
  font-size: 9px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; display: flex; align-items: center; gap: 4px;
}
.qe-vpc-platform.yt  { color: #FF0000; }
.qe-vpc-platform.tt  { color: #010101; }

.qe-vpc-platform.ig  {
  background: linear-gradient(90deg,#833ab4,#fd1d1d,#fcb045);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.qe-vpc-yt-err {
  position: absolute; inset: 0; z-index: 10;
  background: #111;
  display: flex; align-items: center; justify-content: center;
}
.qe-vpc-url {
  font-size: 10.5px; font-family: var(--font-mono);
  color: var(--txt2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.qe-vpc-hint {
  font-size: 9px; color: var(--txt3); opacity: .75;
}

.qe-vpc-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.qe-vpc-eye {
  width: 28px; height: 28px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--txt3);
  cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; line-height: 1;
}
.qe-vpc-eye:hover { color: var(--txt); background:var(--tint-3b); }
.qe-vpc-eye.active { color: var(--txt); }
.qe-vpc-dismiss {
  width: 22px; height: 22px; border-radius: 6px;
  border: none; background: transparent; color: var(--txt3);
  font-size: 11px; cursor: pointer; opacity: .45;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-fast), background var(--dur-fast); padding: 0; flex-shrink: 0;
}
.qe-vpc-dismiss:hover { opacity: 1; background:var(--tint-4); }

.qe-vpc-visit {
  width: 28px; height: 28px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--txt3); cursor: pointer; opacity: .6;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  padding: 0; flex-shrink: 0;
}
.qe-vpc-visit:hover { opacity: 1; background:var(--tint-3b); color: var(--link); }

.qe-vpc-player {
  display: none;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
}
.qe-vpc-player.active { display: block; }
.qe-vpc-player iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}
.qe-vpc-player-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: rgba(0,0,0,.65); color: #fff;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; opacity: .8; transition: opacity var(--dur-fast);
}
.qe-vpc-player-close:hover { opacity: 1; }

.qe-vpc-tt-embed {
  display: none;
  padding: 10px;
  background: rgba(0,0,0,.02);
  border-top: 1px solid rgba(0,0,0,.06);
  align-items: center;
  justify-content: center;
}
.qe-vpc-tt-embed.active { display: flex; flex-direction: column; align-items: center; }

.qe-vpc-thumb-wrap.loading::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.06) 75%);
  background-size: 200% 100%;
  animation: qe-vpc-shimmer 1.2s ease infinite;
}
@keyframes qe-vpc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.qe-vpc-thumb-wrap img.loaded ~ .qe-vpc-thumb-wrap::after { display: none; }

.qe-vpc-platform.gd { color: #1a73e8; }
.qe-vpc-thumb-wrap.gd {
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
}

.qe-vpc-thumb-wrap.ig-thumb {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.qe-vpc-platform.img { color: #34a853; }
.qe-vpc-viewer {
  display: none;
  width: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.10);
  align-items: center;
  justify-content: center;
}
.qe-vpc-viewer.active { display: flex; flex-direction: column; }
.qe-vpc-viewer iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}
.qe-vpc-viewer img {
  width: 100%; display: block;
  object-fit: contain; max-height: 400px;
  background: #f0f0f0;
}
.qe-vpc-viewer-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: rgba(0,0,0,.60); color: #fff;
  font-size: 12px; cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  opacity: .8; transition: opacity var(--dur-fast);
}
.qe-vpc-viewer-close:hover { opacity: 1; }

.qe-vpc-platform.file { color: #5f6368; }
.qe-vpc-thumb-wrap.file {
  background:var(--tint-3);
  display: flex; align-items: center; justify-content: center;
}

/* ── GitHub / GitHub Gist card (Update Tahap 2) ── */
.qe-vpc-platform.gh { color: #24292e; }
.qe-vpc-thumb-wrap.gh {
  background: rgba(36,41,46,.07);
  display: flex; align-items: center; justify-content: center;
}
.qe-vpc-viewer.gh-text {
  background: var(--bg3);
  align-items: stretch;
  justify-content: flex-start;
}
.qe-vpc-gh-pre {
  width: 100%; max-height: 320px; overflow: auto; margin: 0;
  padding: 34px 16px 16px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.55;
  color: var(--txt2); white-space: pre-wrap; word-break: break-word;
  box-sizing: border-box;
}
.qe-vpc-gh-msg {
  width: 100%; padding: 26px 16px; text-align: center;
  font-size: 10.5px; color: var(--txt3); line-height: 1.6;
}

/* BUG FIX 2026-07-29: kartu preview link (.qe-vpc — YouTube/TikTok/IG/Drive/
   Gambar/GitHub & GitHub Gist) sebelumnya SAMA SEKALI belum punya rule
   responsif. Row-nya (.qe-vpc-head) memakai flex dengan thumbnail 80px +
   area tombol aksi ~118px yang keduanya fixed-width, sementara
   `.qe-vpc-info { flex:1; min-width:0 }` dibiarkan menyusut mengambil sisa
   ruang. Di layar HP (<=480px) sisa ruang itu tinggal ±100px, sehingga teks
   platform/hint ("Pratinjau isi teks atau buka di GitHub") terpaksa patah
   satu-kata-per-baris dan bikin seluruh kartu terlihat berantakan — ini
   yang terjadi saat kartu GitHub Gist tampil di Tahap 1 (Prompt Template),
   termasuk saat dibuka lewat alur dari layar login (guest mode / QR
   deeplink), karena kartu ini dirender oleh fungsi yang sama di
   js/qe-engine.js apa pun jalur masuknya.
   Perbaikan: di layar sempit, baris head boleh wrap 2 baris (thumbnail+info
   di baris pertama, tombol aksi pindah ke baris kedua rata kanan), beri
   .qe-vpc-info lebar minimum yang layak dibaca, thumbnail diperkecil, dan
   teks hint (non-esensial, cuma keterangan tambahan) disembunyikan supaya
   tidak makan tempat. */
@media (max-width: 480px) {
  .qe-vpc-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .qe-vpc-thumb-wrap,
  .qe-vpc-thumb-wrap.tt,
  .qe-vpc-thumb-wrap.gh {
    width: 44px;
    height: 44px;
  }
  .qe-vpc-info {
    flex: 1 1 140px;
    min-width: 140px;
  }
  .qe-vpc-hint {
    display: none;
  }
  .qe-vpc-actions { /* sejajar dgn kolom info, bukan di bawah thumbnail */
    flex: 1 0 100%;
    justify-content: flex-end;
    padding-left: 54px;
  }
}

/* (tpl-expand-btn now in FORMAT row unified token) */

/* ── Link Library Button (FORMAT row) — sengaja TIDAK ada override lagi,
   supaya tampilannya identik dengan tombol toolbar lain (.qe-tb-btn):
   borderless & polos by default, baru kelihatan (background abu) saat
   hover atau saat class .has-pinned aktif lewat aturan umum
   .qe-tb-btn.active/.is-on di bawah. Tidak ada indikator titik terpisah —
   background abu itu sendiri sudah cukup jadi penanda "aktif". ── */
.qe-link-lib-btn.has-pinned {
  background:var(--tint-3b);
  border-color: transparent;
  color: var(--txt);
}

/* ── Pinned Link Strip (above textarea, always visible until X) ── */
#qe-pinned-link-strip {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
#qe-pinned-link-strip.has-items { display: flex; }

/* ── Link Library Picker Modal ── */
#qe-link-lib-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.28);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#qe-link-lib-overlay.show { display: flex; animation: pageIn .18s var(--ease); }
.qe-link-lib-box {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r20); padding: 0;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-modal);
  max-height: 80vh; display: flex; flex-direction: column;
}
.qe-link-lib-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qe-link-lib-title { font-size: 13.5px; font-weight: 800; color: var(--txt); display: flex; align-items: center; gap: 7px; }
.qe-link-lib-title svg { flex-shrink: 0; opacity: .7; }
.qe-link-lib-close {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all var(--dur-fast);
}
.qe-link-lib-close:hover { background:var(--tint-3b); color: var(--txt); }
.qe-link-lib-body {
  overflow-y: auto; flex: 1;
  padding: 12px 14px 16px;
}
.qe-link-lib-empty {
  text-align: center; padding: 28px 16px; color: var(--txt3);
  font-size: 12px; font-weight: 500;
}
.qe-link-lib-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: .4; }
.qe-link-lib-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: var(--r12);
  border: 1px solid var(--border);
  background: var(--bg3); margin-bottom: 7px;
  cursor: pointer; transition: all var(--dur-base);
  position: relative;
}
.qe-link-lib-item:last-child { margin-bottom: 0; }
.qe-link-lib-item:hover { border-color: rgba(0,80,220,.25); background: rgba(0,80,220,.04); }
.qe-link-lib-item.pinned { border-color: rgba(0,80,220,.30); background: rgba(0,80,220,.06); }
.qe-link-lib-item-icon {
  font-size: 20px; flex-shrink: 0; line-height: 1; margin-top: 1px;
}
.qe-link-lib-item-body { flex: 1; min-width: 0; }
.qe-link-lib-item-name {
  font-size: 12.5px; font-weight: 700; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.qe-link-lib-item-links {
  font-size: 10px; color: var(--txt3); font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qe-link-lib-item-pin-btn {
  flex-shrink: 0; padding: 4px 10px; border-radius: var(--r8);
  border: 1px solid var(--border2); background: transparent;
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
  cursor: pointer; transition: all var(--dur-base); white-space: nowrap;
}
.qe-link-lib-item-pin-btn:hover { background: rgba(0,80,220,.08); border-color: rgba(0,80,220,.25); color: #0055DD; }
.qe-link-lib-item.pinned .qe-link-lib-item-pin-btn {
  background: rgba(0,80,220,.10); border-color: rgba(0,80,220,.30); color: #0055DD;
}
.qe-link-lib-item-count-badge {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 99px;
  background: rgba(0,80,220,.10); color: #0055DD;
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
}

@media (max-width: 600px) {
  .qe-tpl-fv-box { max-width: 100%; border-radius: var(--r16); }
  #qe-tpl-fv-textarea { font-size: 13px; }
}

.qe-bracket-preview-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r8);
  border:1.5px solid var(--line-1);
  background: transparent;
  color: var(--txt3); font-size: 10.5px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base) var(--ease);
  font-family: var(--font-mono); letter-spacing: .2px;
  flex-shrink: 0;
}
.qe-bracket-preview-toggle:hover {
  background: rgba(0,80,220,.06);
  border-color: rgba(0,80,220,.22);
  color: #0055DD;
}
.qe-bracket-preview-toggle.active {
  background: rgba(0,80,220,.09);
  border-color: rgba(0,80,220,.30);
  color: #0055DD;
  box-shadow: 0 0 0 3px rgba(0,80,220,.08);
}
.qe-bracket-preview-toggle .bpt-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  opacity: 0; transition: opacity var(--dur-base);
}
.qe-bracket-preview-toggle.active .bpt-dot { opacity: 1; }

.qe-bp-bracket {
  color: #2563EB;
  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.qe-bp-bracket-empty {
  color: rgba(37,99,235,.38);
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.qe-step23-row { /* Step 2 tinggi natural, Step 3 tidak paksa Step 2 melar */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}
/* Step 2: tinggi mengikuti kontennya sendiri */
.qe-step23-row .qe-card { margin-bottom:0; height:auto; }
/* Step 3: tinggi di-clamp via JS (max-height diset dari offsetHeight Step 2) */
.qe-step23-row .qe-result-card {
  /* max-height diset oleh JS: _qeSyncResultCardHeight() -> lihat js/step-sync.js */
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ── ALIGNMENT FIX: Generate btn & action buttons presisi sejajar ── */
/* Step 2: fields-grid meregang, generate btn + fast-mode-row didorong ke bawah */
.qe-step23-row .qe-card .qe-card-body { min-height:0; }
.qe-step23-row #qe-step2 .qe-card-body .qe-fields-grid { flex:1; min-height:0; }
.qe-step23-row #qe-step2 .qe-card-body #qe-field-progress-wrap { flex-shrink:0; }
/* [FIX 2026-07-27] Sebelumnya margin-top:auto — tapi #qe-fields-grid
   (flex:1) di atasnya SELALU menyerap semua sisa ruang kosong duluan,
   jadi margin auto ini praktis selalu jadi 0 (tombol "Generate Prompt"
   nempel banget ke bar PROGRESS di atasnya). Diganti jarak tetap supaya
   selalu ada nafas, berapa pun tinggi kartu-nya. */
.qe-step23-row #qe-step2 .qe-card-body .qe-generate-row { flex-shrink:0; margin-top:28px; margin-bottom:4px; }
.qe-step23-row #qe-step2 .qe-card-body .qe-generate-row .qe-generate-btn { margin-top:0; margin-bottom:0; }
.qe-step23-row #qe-step2 .qe-card-body #qe-generate-sticky-placeholder { flex-shrink:0; }
/* Garis divider Step 2 (border-top di fast-mode-row) sejajar dengan garis di Step 3 (border-top di qe-open-header) */
/* Step 2: fast-mode-row padding-top:14px → margin dari btn ke garis = margin-bottom:4px + margin-top:6px + padding-top:14px → garis ada 10px di bawah btn */
/* Step 3: result-actions margin-top:10px → open-section margin-top:12px → open-header padding-top:12px → garis ada 12px di bawah result-actions */
/* Fine-tune: samakan spacing agar garis benar-benar sejajar */
/* Total jarak result-actions → garis Step3 = open-section margin-top:12px + open-header padding-top:12px = 24px dari bottom result-actions ke border */
/* Maka fast-mode-row: margin-bottom generate(4px) + margin-top fast-mode-row + padding-top fast-mode-row = 24px → margin-top:6px + padding-top:14px = 20px, perlu +4px */
.qe-step23-row #qe-step2 .qe-card-body #qe-fast-mode-row { flex-shrink:0; margin-top:8px !important; padding-top:12px !important; }
.qe-step23-row #qe-step2 .qe-card-body > div[style*="position:relative"] { flex-shrink:0; }

/* ── Step 3: flex chain scroll — konten hasil generate scroll di dalam box ── */
.qe-step23-row .qe-result-card .qe-result-body { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
/* [FIX 2026-07-27d] Sebelumnya kotak Tahap 3 (#qe-result-text) tidak
   punya margin-bottom sama sekali, padahal kotak PROGRESS di Tahap 2
   (#qe-field-progress-wrap) punya margin-bottom:12px (inline style).
   Akibatnya jarak total ke tombol hitam beda 12px antara kedua sisi
   (Tahap 2 = 12px + 28px margin-top tombol = 40px, Tahap 3 = 0 + 28px
   = 28px saja) — tombol "Copy" jadi terlihat lebih mepet ke kotak
   dibanding tombol "Generate Prompt". Disamakan di sini supaya kedua
   sisi total-nya sama-sama 40px. */
.qe-step23-row .qe-result-card .qe-result-body .qe-result-text { flex:0 0 auto; min-height:0; overflow-y:auto; margin-bottom:12px; }
.qe-step23-row .qe-result-card .qe-result-body .qe-result-text:not(.has-content) { overflow-y:hidden; }
/* [FIX 2026-07-27c] Sebelumnya kotak Tahap 3 (#qe-result-text) sering
   lebih PENDEK dari batas "Field progress" Tahap 2 (lihat FIX 2026-07-27b
   di atas), sehingga sisa ruang kosong di bawahnya membuat baris tombol
   "Copy" TERLIHAT punya jarak lega ke kotak di atasnya — padahal jarak
   itu cuma efek samping bug, bukan margin asli (margin asli cuma 18px,
   dari base rule .qe-result-actions). Setelah kotak Tahap 3 dibetulkan
   supaya sejajar persis dengan bar PROGRESS, margin 18px itu jadi
   terlihat terlalu mepet dibanding sebelumnya. Tambah margin di sini
   (scoped ke layout 2-kolom saja) supaya sejajar dengan jarak baru
   antara bar PROGRESS & tombol "Generate Prompt" di Tahap 2 (28px). */
.qe-step23-row .qe-result-card .qe-result-body .qe-result-actions { flex-shrink:0; margin-top:28px; }
.qe-step23-row .qe-result-card .qe-result-body .qe-open-section { flex-shrink:0; }

@media(max-width:720px) {
  .qe-step23-row { grid-template-columns:1fr; }
  .qe-step23-row .qe-result-card,
  .qe-step23-row .qe-card { height:auto; max-height:none !important; }
  /* Mobile: result-text punya max-height agar tetap scrollable */
  .qe-step23-row .qe-result-card .qe-result-body .qe-result-text { max-height:55vh; flex:none; }
  /* Mobile: batalkan margin-top auto, kembali ke normal */
  .qe-step23-row #qe-step2 .qe-card-body .qe-generate-row { margin-top:14px; }
  .qe-step23-row #qe-step2 .qe-card-body .qe-fields-grid { flex:none; }
}

/* ── BUG FIX: iPad mode vertical + sidebar kiri/kanan sama-sama melebar ──
   Rule sama persis dengan @media(max-width:720px) di atas, tapi dipicu
   berdasarkan lebar KONTEN .feed-col yang sebenarnya tersedia (lewat
   container query, container-type di-set di rule .feed-col), bukan lebar
   viewport. Jadi tetap kepicu walau viewport tablet-nya lebar, selama
   sidebar kiri+kanan lagi motong ruang konten sampai sempit — Tahap 3
   otomatis pindah ke bawah Tahap 2, bukan lagi maksa sejajar di
   kanannya sampai kepotong. Browser yg belum dukung container query
   otomatis skip blok ini (fallback tetap ke @media di atas). */
@container qe-feedcol (max-width: 760px) {
  .qe-step23-row { grid-template-columns:1fr; }
  .qe-step23-row .qe-result-card,
  .qe-step23-row .qe-card { height:auto; max-height:none !important; }
  .qe-step23-row .qe-result-card .qe-result-body .qe-result-text { max-height:55vh; flex:none; }
  .qe-step23-row #qe-step2 .qe-card-body .qe-generate-row { margin-top:14px; }
  .qe-step23-row #qe-step2 .qe-card-body .qe-fields-grid { flex:none; }
}

.qe-field-mode-badge {
  font-size: 8.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 1.5px 6px; border-radius: var(--r99);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.qe-field-mode-badge--color    { background:var(--tint-3); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }
.qe-field-mode-badge--date     { background:var(--tint-3); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }
.qe-field-mode-badge--textarea { background:var(--tint-3); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }
.qe-field-mode-badge--dropdown { background:var(--tint-3); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }
.qe-field-mode-badge--number   { background:var(--tint-3); color: var(--txt3); border: 1px solid rgba(0,0,0,.10); }

/* [FEATURE] Number Field — hint kecil rentang min-max di sebelah input,
   muncul cuma kalau syntax "angka:1-100" dipakai (lihat qe-engine.js). */
.qe-number-field-wrap { display:flex; align-items:center; gap:6px; }
.qe-number-range-hint {
  font-size: 10px; font-weight: 600; color: var(--txt3);
  font-family: var(--font-mono); flex-shrink: 0; white-space: nowrap;
  opacity: .7;
}

/* FIX 3: Indikator "Live" — dot biru berkedip saat Realtime Mode aktif */
.qe-live-indicator {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0A84FF;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.qe-live-indicator.active { display: inline-flex; }
.qe-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #0A84FF; flex-shrink: 0;
  animation: qeLiveDotPulse 1.6s ease-in-out infinite;
}
@keyframes qeLiveDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(10,132,255,.45); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(10,132,255,0); }
}

.qe-dropdown-field { display: block; }

/* ── Custom Dropdown: struktur identik antara mode pilih & mode ketik ── */
/* Wrapper selalu position:relative (diset inline di JS) */
.qe-dd-wrap { position: relative; display: block; }

/* Input custom dropdown — SATU rule untuk SEMUA mode, tidak ada <select> native */
.qe-dd-wrap .qe-dd-input {  /* kanan: ruang untuk chevron */
  width: 100%;
  padding: 7px 30px 7px 10px !important;
  border-radius: var(--r8);
  border:1.5px solid var(--line-1);
  background:var(--tint-2);
  color: var(--txt);
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
  animation: none !important;
}
.qe-dd-wrap .qe-dd-input[data-mode="manual"] { cursor: text; }
.qe-dd-wrap .qe-dd-input:focus { border-color:var(--line-3); outline: none; background:var(--tint-3); }
.qe-dd-wrap .qe-dd-input::placeholder { color: rgba(0,0,0,.35); font-style: italic; }

/* Chevron button — posisi FIXED: right:0, full-height, centered */
.qe-dd-chevron {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--txt3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0 var(--r8) var(--r8) 0;
  transition: color var(--dur-base);
  pointer-events: auto;
}
.qe-dd-chevron:hover { color: var(--txt2); }
.qe-dropdown-select {
  /* BUG FIX: line-height & box-sizing harus identik dengan .qe-field-input
     agar height sama persis saat switch mode — cegah panah bergeser */
  width: 100%;
  padding: 7px 28px 7px 10px;
  border-radius: var(--r8); border:1.5px solid var(--line-1);
  background-color: rgba(0,0,0,.04);
  color: var(--txt); font-size: 12.5px; font-family: inherit;
  line-height: 1.4; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base);
}
.qe-dropdown-select:focus { border-color:var(--line-3); outline: none; background-color: rgba(0,0,0,.06); }
.qe-dropdown-text-input {
  /* BUG FIX: Hapus animasi — mencegah visual shift/flash saat switch ke mode manual */
  width: 100%; padding: 7px 10px;
  border-radius: var(--r8); border: 1.5px solid rgba(100,60,220,.30);
  background: rgba(100,60,220,.04);
  color: var(--txt); font-size: 12.5px; font-family: inherit;
  transition: border-color var(--dur-base), background var(--dur-base);
  animation: none;
}
/* BUG FIX: .qe-field-input dalam .qe-dropdown-field (mode manual) override agar
   height PERSIS sama dengan .qe-dropdown-select — tidak ada rule tambahan yang bisa
   memperbesar field. box-sizing + line-height wajib eksplisit. */
.qe-dropdown-field .qe-field-input {
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  padding: 7px 28px 7px 10px !important;
  animation: none !important;
}
.qe-dropdown-text-input:focus { border-color: rgba(100,60,220,.50); outline: none; background: rgba(100,60,220,.07); }
.qe-dropdown-text-input::placeholder { color: var(--txt3); font-style: italic; }

.qe-field-item { display:flex; flex-direction:column; gap:6px; animation: fieldFadeIn .2s ease; min-width:0; }
@keyframes fieldFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.qe-field-label { font-size:11px; font-weight:700; color:var(--txt2); display:flex; align-items:center; justify-content:space-between; cursor:default; user-select:none; gap:6px; }
.qe-field-label .qe-field-tag { font-size:9.5px; color:var(--txt3); font-family:var(--font-mono); }
/* FIX 2: wrapper boleh menyusut (min-width:0) sehingga teks label bisa
   ter-ellipsis menyesuaikan lebar field, sementara mode-badge & tombol
   expand (flex-shrink:0) — tempat dot biru indikator berada — tidak
   pernah tertimpa/tergeser. */
/* padding-right memberi jarak antara akhir label-text (]) dengan dot biru */
.qe-field-label-main { display:flex; align-items:center; gap:4px; min-width:0; flex:1 1 auto; overflow:hidden; padding-right:6px; }
/* label-text: flex:0 1 auto agar tidak stretch penuh — ] mengikuti panjang teks, bukan mentok kanan */
.qe-field-label-text { display:flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; flex:0 1 auto; }
.qe-field-label-bracket { flex-shrink:0; }
.qe-field-label-inner { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; }
.qe-field-input {
  padding:7px 10px; background:var(--tint-2); border:1.5px solid rgba(0,0,0,.09);
  border-radius:var(--r8); color:var(--txt); font-size:12.5px; font-family: var(--font-sans);
  line-height:1.4; transition:border-color var(--dur-base); width:100%;
}
.qe-field-input:focus { border-color:var(--line-2b); outline:none; background:var(--tint-3); }
.qe-field-input::placeholder { color:var(--placeholder); font-style:italic; }
.qe-field-input.qe-field-empty-highlight {
  border-color: rgba(0,0,0,.14) !important;
  background:var(--tint-1) !important;
}
/* Dot indicator: kiri expand button, tengah vertikal */
.qe-field-item:has(.qe-field-empty-highlight),
.qe-field-item.qe-field-dot-empty {
  position: relative;
}
.qe-field-item:has(.qe-field-empty-highlight)::after,
.qe-field-item.qe-field-dot-empty::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 32px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0A84FF;
  pointer-events: none;
}
/* Edit mode: result box itself becomes editable — no new textarea spawned */
#qe-result-text.qe-edit-active {
  background: var(--bg2) !important;
  border-color:var(--line-3) !important;
  cursor: text !important;
  caret-color: var(--txt);
  outline: none;
}
#qe-result-text.qe-edit-active .cr-anchor,
#qe-result-text.qe-edit-active .qe-result-content {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  outline: none;
  min-height: 40px;
}
html.dark #qe-result-text.qe-edit-active {
  background: #1C1C1E !important;
  border-color: rgba(255,255,255,.20) !important;
}
#qe-edit-result-btn.editing {
  background: var(--txt) !important;
  color: var(--bg2) !important;
  border-color: var(--txt) !important;
}

/* Baris pembungkus Generate Prompt + tombol kotak "Kirim ke AI" (muncul saat
   API AI aktif). Generate tetap mengisi sisa ruang; tombol kirim kotak 40x40
   di sebelah kanan, sejajar tinggi. */
.qe-generate-row { display:flex; align-items:stretch; gap:8px; margin-top:14px; margin-bottom:4px; flex-shrink:0; }
.qe-generate-row .qe-generate-btn { flex:1; min-width:0; margin-top:0; margin-bottom:0; }
.qe-generate-row .qe-generate-send-btn { flex-shrink:0; }
.qe-generate-row .qe-generate-send-btn:hover { transform:translateY(-1px); }
.qe-result-head { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; gap:10px; flex-shrink:0; }
.qe-result-meta-row { display:flex; align-items:center; gap:8px; }
.qe-result-body { padding:10px 16px 16px; flex:1; display:flex; flex-direction:column; min-height:0; }
/* [FIX 2026-07-27] Selama belum ada hasil generate (masih placeholder
   "Isi form dan generate"), kotak Tahap 3 TIDAK BOLEH menampilkan
   scrollbar sama sekali — sebelumnya overflow-y:auto tetap aktif walau
   isinya kosong, jadi scrollbar (track kosong) tetap kelihatan nempel di
   tepi kanan meski tidak ada apa pun untuk di-scroll. Scroll baru
   diaktifkan lagi otomatis begitu class .has-content terpasang (hasil
   generate benar-benar ada). */
.qe-result-text:not(.has-content) {
  overflow-y: hidden;
}
.qe-result-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--txt3); font-size:12px; text-align:center;
  font-family: var(--font-sans); font-weight:500;
  flex:1; min-height:96px;
}
.qe-result-text.has-content .qe-result-placeholder { display:none; }
.qe-result-content { display:block; width:100%; white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.5; font-weight:500; -webkit-font-smoothing:antialiased; }
.qe-result-actions { display:flex; gap:8px; flex-wrap:nowrap; margin-top:18px; align-items:center; width:100%; }

.qe-copy-btn {
  transition: all var(--dur-base) var(--spring) !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; background:var(--txt); border:1.5px solid transparent; border-radius:var(--r8); color:var(--bg); font-size:12.5px; font-weight:800; cursor:pointer; box-shadow:none;
}
.qe-copy-btn:hover { transform:translateY(-1px); box-shadow:none; opacity:.9; }
.qe-save-btn { flex:1; min-width:120px; padding:10px 16px; background:var(--tint-2); border:1.5px solid var(--line-1); border-radius:var(--r8); color:var(--txt2); font-size:12.5px; font-weight:700; cursor:pointer; transition:all var(--dur-base); display:flex; align-items:center; justify-content:center; gap:7px; }
.qe-save-btn:hover { background:var(--tint-4); border-color:var(--border3); color:var(--txt); }
.qe-open-section { margin-top:12px; padding-top:0; border-top:none; }
.qe-open-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-top:12px; border-top:1px solid var(--border); min-height:20px; }
/* ── Step 3 header mini-buttons: [ ] · × · Kelola — SATU class, SERAGAM ── */
.qe-open-action-btn,
.qe-open-kelola-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 3px 10px;
  height: 20px; line-height: 1;
  font-size: 10px; font-weight: 600;
  font-family: var(--font-sans);
  color: var(--txt3);
  cursor: pointer;
  white-space: nowrap;
  min-width: 20px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.qe-open-action-btn:hover,
.qe-open-kelola-btn:hover { background:var(--tint-3); border-color: var(--border3); color: var(--txt2); }
/* dark mode — langsung tampil tanpa hover dulu */
html.dark .qe-open-action-btn,
html.dark .qe-open-kelola-btn { border-color: rgba(255,255,255,.15); color: var(--txt3); background: transparent; }
html.dark .qe-open-action-btn:hover,
html.dark .qe-open-kelola-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); color: var(--txt); }
/* [ ] bracket-btn active state */
.qe-open-action-btn.qe-bp-bracket-btn.active { border-color: rgba(0,80,220,.35); color: #0055DD; background: rgba(0,80,220,.08); }
html.dark .qe-open-action-btn.qe-bp-bracket-btn.active { border-color: #7BBEFF; color: #7BBEFF; background: rgba(123,190,255,.10); }
.qe-open-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.qe-open-label { font-size:9px; font-weight:500; letter-spacing:0.3px; text-transform:none; color:var(--txt3); opacity:0.55; }
.qe-open-ai-btn { display:flex; align-items:center; justify-content:center; gap:4px; height:24px; padding:0 7px; border-radius:var(--r8); border:1px solid var(--border2); background:transparent; font-size:10px; font-weight:600; color:var(--txt2); cursor:pointer; transition:all var(--dur-base); text-decoration:none; text-align:center; }
.qe-open-ai-btn:hover { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.16); color:var(--txt); }

/* ── Tombol tutup modal bergaya macOS: lingkaran polos dengan ikon X tipis ── */
.qe-modal-close-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background:var(--tint-3);
  color: var(--txt3);
  cursor: pointer;
  padding: 0;
  font-size: 0;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.qe-modal-close-btn svg { width: 10px; height: 10px; display: block; }
.qe-modal-close-btn:hover { background: rgba(0,0,0,.12); color: var(--txt); }
.qe-modal-close-btn:active { transform: scale(.92); }
html.dark .qe-modal-close-btn { background: rgba(255,255,255,.10); color: var(--txt3); }
html.dark .qe-modal-close-btn:hover { background: rgba(255,255,255,.16); color: var(--txt); }

.qe-result-card.hidden .qe-result-body { display:none; }
.qe-result-card .qe-result-body { display:flex; }
.qe-result-card .qe-result-empty {
  display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:40px 20px;
  color:var(--txt3); font-size:12px; text-align:center;
  min-height:160px;
}
.qe-result-card.has-result .qe-result-empty { display:none; }
.qe-result-card.hidden .qe-result-empty { display:flex; }
.qe-result-card.hidden .qe-result-meta-row { opacity:0; pointer-events:none; }

/* ── UNIFIED action button token (Step 1 header) ── */
.qe-btn-ghost,
.qe-lib-inline-btn,
.qe-save-tpl-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; height: 26px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border2);
  color: var(--txt3); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space: nowrap; flex-shrink: 0;
}
.qe-save-tpl-btn--icon {
  padding: 0; width: 26px; height: 26px; justify-content: center;
}
.qe-btn-ghost:hover,
.qe-lib-inline-btn:hover,
.qe-save-tpl-btn:hover {
  background: rgba(0,0,0,.05); border-color: var(--border3); color: var(--txt2);
}
/* lib count badge */
/* reset btn tweak — icon only, slightly wider touch */
.qe-reset-btn { padding: 4px 8px; }

.qe-bracket-btn {
  padding: 3px 9px;
  font-size: 11px;
  height: 26px;
  min-height: 26px;
  min-width: 0;
  max-height: 26px;
  letter-spacing: .1px;
  line-height: 1;
}
.qe-step1-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.qe-step1-divider {
  width: 1px; height: 14px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 1px;
}
/* ── Step 1: clean header ── */

.qe-card-head.qe-step1-head {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 11px 14px 11px;
  background: transparent !important;
}
.qe-card-head { display:flex; align-items:center; gap:10px; padding:11px 16px; flex-shrink:0; background: transparent !important; }
.qe-step1-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.qe-step1-row-top .qe-parse-status {
  font-size: 10.5px;
  justify-content: flex-end;
}
/* Hide old bottom row — now inline in header */
.qe-step1-row-bottom { display: none; }

/* ── Unified toolbar below textarea ── */
/* Toolbar wrapper — scroll-fade menggunakan mask-image (works in dark mode) */
.qe-unified-toolbar-wrap {
  position: relative;
  overflow: visible;
}

.qe-unified-toolbar {
  /* DIHAPUS: mask-image fade kanan yang memblokir klik tombol Publish */
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r8);
  min-height: 34px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: none;
  mask-image: none;
  transition: none;
}
.qe-unified-toolbar::-webkit-scrollbar { display: none; }

/* Fade kiri/kanan dihapus — mask-image memblokir klik tombol Publish */
.qe-unified-toolbar.scrolled {
  -webkit-mask-image: none;
  mask-image: none;
}

.qe-unified-toolbar.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.qe-unified-toolbar.at-end:not(.scrolled) {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Generic toolbar button */
.qe-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  min-width: 26px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt3);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.qe-tb-btn:hover {
  background:var(--tint-3);
  border-color: var(--border2);
  color: var(--txt2);
}
.qe-tb-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.qe-tb-btn.active,
.qe-tb-btn.is-on,
.qe-bracket-btn.active {
  background:var(--tint-3b);
  border-color: transparent;
  color: var(--txt);
  box-shadow: none;
}

/* ── Tombol Publish (Kirim ke GitHub Gist) — mode kilat ── */
.qe-publish-qe-btn {
  position: relative;
  overflow: hidden;
}
.qe-publish-qe-btn:hover {
  background:var(--tint-3);
  border-color: var(--border2) !important;
  color: var(--txt2) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
html.dark .qe-publish-qe-btn:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--txt2) !important;
  box-shadow: none;
}
/* Animasi kilat saat klik */
@keyframes qe-kilat-flash {
  0%   { opacity: 0; transform: translateX(-100%) skewX(-20deg); }
  50%  { opacity: 1; transform: translateX(60%) skewX(-20deg); }
  100% { opacity: 0; transform: translateX(200%) skewX(-20deg); }
}
.qe-publish-qe-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  opacity: 0;
  pointer-events: none;
}
.qe-publish-qe-btn.qe-publish-kilat::after {
  animation: qe-kilat-flash 0.4s ease-out forwards;
}
.qe-publish-qe-btn.qe-publish-kilat {
  box-shadow: 0 0 0 2px rgba(59,130,246,.45), 0 2px 10px rgba(59,130,246,.2);
  transform: scale(1.04);
  transition: transform .1s, box-shadow .1s;
}

/* Step 2 — "Reset semua field" button (qe-fast-mode-row) */
.qe-row-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--txt3);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.qe-row-reset-btn:hover {
  background:var(--tint-3);
  border-color: var(--border3);
  color: var(--txt2);
}
html.dark .qe-row-reset-btn { border-color: rgba(255,255,255,.15); color: var(--txt3); background: transparent; }
html.dark .qe-row-reset-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); color: var(--txt2); }
.qe-row-reset-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* Toolbar button label — hide on small screens */
.qe-tb-lbl { font-size: 11px; font-weight: 600; }

/* Vertical divider between groups */
.qe-tb-divider-v {
  width: 1px;
  height: 16px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 3px;
}

/* Button groups */
.qe-tb-group {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

/* Custom bracket inputs inside toolbar */
.qe-tb-custom-input {
  width: 32px;
  height: 24px;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--txt);
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: center;
  outline: none;
  flex-shrink: 0;
}
.qe-tb-custom-preview {
  font-size: 10px;
  color: var(--txt2);
  font-family: var(--font-mono);
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--bg4);
  height: 24px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mobile: hide text labels, keep icons */
@media (max-width: 480px) {
  .qe-tb-lbl { display: none; }
  .qe-lib-btn-label { display: none; }
  .qe-tb-btn { padding: 0 6px; min-width: 28px; }
}

/* Dark mode toolbar */
html.dark .qe-unified-toolbar { background: transparent; border-color: transparent; }
html.dark .qe-tb-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--txt2); }
html.dark .qe-tb-btn.active, html.dark .qe-bracket-btn.active { background: rgba(255,255,255,.12); border-color: transparent; color: var(--txt); box-shadow: none; }
html.dark .qe-tb-custom-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); }
html.dark .qe-tb-custom-preview { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }

/* ── File Import Button ── */
.qe-import-file-btn { position: relative; }
.qe-import-file-btn.is-loading { pointer-events: none; opacity: .6; }
@keyframes qe-import-spin { to { transform: rotate(360deg); } }
.qe-import-file-spinner {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15); border-top-color: var(--txt3);
  animation: qe-import-spin .7s linear infinite;
  display: none; flex-shrink: 0;
}
.qe-import-file-btn.is-loading .qe-import-file-spinner { display: inline-block; }
.qe-import-file-btn.is-loading .qe-import-file-icon { display: none; }

/* ── QR Import Button ── */
.qe-import-qr-btn { position: relative; }
.qe-import-qr-btn.is-loading { pointer-events: none; opacity: .6; }
.qe-import-qr-spinner {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.15); border-top-color: var(--txt3);
  animation: qe-import-spin .7s linear infinite;
  display: none; flex-shrink: 0;
}
.qe-import-qr-btn.is-loading .qe-import-qr-spinner { display: inline-block; }
.qe-import-qr-btn.is-loading .qe-import-qr-icon { display: none; }
html.dark .qe-import-qr-spinner { border-color: rgba(255,255,255,.15); border-top-color: var(--txt3); }

/* ── Export Template btn ── */
.qe-export-tpl-btn { gap: 5px; }
.qe-export-fmt-btn {
  padding: 5px 11px; border-radius: 7px;
  border: 1.5px solid var(--border2);
  background: transparent; color: var(--txt3);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--font-mono); transition: all var(--dur-fast);
  line-height: 1;
}
.qe-export-fmt-btn:hover { background: rgba(0,0,0,.05); color: var(--txt2); border-color: var(--border3); }
.qe-export-fmt-btn.active { background: var(--txt); color: var(--bg2); border-color: var(--txt); }
html.dark .qe-export-fmt-btn { color: var(--txt3); border-color: rgba(255,255,255,.15); }
html.dark .qe-export-fmt-btn:hover { background: rgba(255,255,255,.08); color: var(--txt2); border-color: rgba(255,255,255,.25); }
html.dark .qe-export-fmt-btn.active { background: var(--txt); color: #1C1C1E; border-color: var(--txt); }
html.dark #qe-export-tpl-overlay > div { background: #252528 !important; border: 1px solid rgba(255,255,255,.10); }
html.dark #qe-export-filename { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.13) !important; }
html.dark #qe-export-filename:focus { border-color: rgba(255,255,255,.30) !important; }
html.dark #qe-export-tpl-filename { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.13) !important; }
html.dark #qe-export-tpl-filename:focus { border-color: rgba(255,255,255,.30) !important; }
html.dark .qe-import-file-spinner { border-color: rgba(255,255,255,.15); border-top-color: var(--txt3); }

@media (max-width: 540px) {
  .qe-lib-btn-label { display: none; }
}

@media (max-width: 400px) {
  .qe-step1-divider { display: none; }
}

.qe-card-head .qe-parse-status { font-size: 10.5px; flex: 0 1 auto; display: inline-flex; align-items: center; }
.qe-result-stats { font-size: 10px; color: var(--txt3); font-family: var(--font-mono); margin-top: 1px; }
/* .qe-result-head padding now unified in base rule */
.qe-lib-preview-pop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#qe-lib-preview-content {
  font-size: 11.5px; line-height: 1.65; color: var(--txt2);
  font-family: var(--font-mono);
  white-space: pre-wrap; word-break: break-word;
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}
#qe-lib-preview-content::-webkit-scrollbar { width: 4px; }
#qe-lib-preview-content::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-dl-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(24px);
  z-index: 9999999; opacity: 0; pointer-events: none;
  transition: all .3s var(--spring);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 16px; padding: 12px 18px 12px 14px;
  box-shadow: var(--shadow-modal);
  max-width: 340px; min-width: 240px;
}
.ctr-dl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ctr-dl-toast-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.ctr-dl-toast-body { flex: 1; min-width: 0; }
.ctr-dl-toast-title { font-size: 12px; font-weight: 800; color: var(--txt); letter-spacing: -.1px; }
.ctr-dl-toast-sub { font-size: 10.5px; color: var(--txt3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-dl-toast-close {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border2); color: var(--txt3);
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  cursor: pointer; transition: all var(--dur-fast); pointer-events: auto;
}
.ctr-dl-toast-close:hover { background: var(--bg4); color: var(--txt); }
/* reset-btn now inherits from unified token; padding only override */

.qe-lib-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 99px;
  cursor: pointer; transition: all var(--dur-base); font-size: 11.5px;
  font-weight: 700; color: var(--txt2); flex-shrink: 0;
}
.qe-lib-pill:hover { background: var(--bg4); color: var(--txt); }

.qe-lib-overlay {
  contain: layout paint;
  position: fixed; inset: 0; background: transparent;
  z-index: 9100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) cubic-bezier(.2,0,.2,1);
}
/* Hanya Library utama yang gelap — sub-modal (export, confirm, edit, dll) tetap transparent agar tidak double-dark */
.qe-lib-overlay.show { opacity: 1; pointer-events: auto; }
.qe-lib-overlay.hiding { opacity: 0; pointer-events: none; }
.qe-lib-overlay.show .qe-lib-modal { transform: none; opacity: 1; }
.qe-lib-overlay.hiding .qe-lib-modal {
  transform: translateY(3px) scale(.997);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}

/* [UPDATE 2026-08-02] Animasi KEMUNCULAN Library (dibuka dari sidebar —
   "berpindah menu") disamakan dengan menu lain (Home/Quick Engine/Brackets/
   Pro Mode/FYC), yang semuanya pakai pageIn: fade + translateY(8px), .28s,
   var(--ease) — lihat @keyframes pageIn. Sebelumnya Library pakai timing +
   scale sendiri (.18s + scale .99) yang terasa lebih instan/beda gaya
   dibanding transisi menu lain. Sengaja discope KHUSUS #qe-lib-overlay
   (Library utama), BUKAN .qe-lib-overlay generik, supaya sub-modal kecil
   (konfirmasi, folder, rename, dll — yang juga pakai class .qe-lib-overlay)
   tidak ikut berubah timingnya. Menutup tetap dibuat sedikit lebih cepat
   dari membuka (terasa lebih responsif saat user menutup). */
#qe-lib-overlay.hiding .qe-lib-modal {
  transform: translateY(4px);
  transition: transform .16s var(--ease), opacity .16s var(--ease);
}
.qe-lib-head-info { flex: 1; min-width: 0; }
.qe-lib-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qe-lib-add-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r8);
  background: var(--txt); color: var(--bg); border: none;
  font-size: 12px; font-weight: 800; cursor: pointer;
  transition: all var(--dur-base) var(--spring);
}
.qe-lib-add-btn:hover { transform: translateY(-1px); opacity: .88; }
.qe-lib-tag-name { line-height: 1; }
.qe-lib-tag-count {
  font-size: 8.5px; font-weight: 700; line-height: 1;
  color: var(--txt3); font-family: var(--font-mono);
  opacity: .55; letter-spacing: .2px;
}
.qe-lib-tag-chip:hover .qe-lib-tag-count { opacity: .8; color: var(--txt2); }
@media (max-width: 560px) { .qe-lib-grid { grid-template-columns: 1fr; } }

.qe-lib-card-head { padding: 11px 13px 8px; display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--border); }
.qe-lib-card-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.qe-lib-card-meta { flex: 1; min-width: 0; }
.qe-lib-card-name {
  font-size: 12px; font-weight: 700; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.1px;
}
.qe-lib-card-date { font-size: 9.5px; color: var(--txt3); font-family: var(--font-mono); margin-top: 2px; }
.qe-lib-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.qe-lib-card-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none;
  background: transparent; color: var(--txt3); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast);
}
.qe-lib-card-btn:hover { background: var(--bg4); color: var(--txt2); }
.qe-lib-card-btn.del:hover { background: rgba(255,60,60,.10); color: #ff453a; }

.qe-lib-card-body { padding: 9px 13px; flex: 1; }
.qe-lib-card-preview {
  font-size: 11px; color: var(--txt3); line-height: 1.55;
  font-family: var(--font-mono);
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qe-lib-card-foot {
  padding: 7px 13px 9px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.qe-lib-card-tag {
  font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--txt3); letter-spacing: .3px;
}

.qe-save-tpl-overlay {
  contain: layout paint;
  position: fixed; inset: 0; background: rgba(0,0,0,.40);
  z-index: 9100;
  display: none; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base);
}
.qe-save-tpl-overlay.show { display: flex; opacity: 1; pointer-events: auto; }
.qe-save-tpl-overlay.show .qe-save-tpl-box { transform: translateY(0) scale(1); }
.qe-save-tpl-title { font-size: 14px; font-weight: 800; color: var(--txt); margin-bottom: 16px; }
.qe-save-tpl-label { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt3); margin-bottom: 6px; }
.qe-save-tpl-input {
  width: 100%; padding: 9px 12px; border-radius: var(--r8);
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--txt); font-size: 13px; font-family: inherit; margin-bottom: 12px;
  transition: border-color var(--dur-base);
}
.qe-save-tpl-input:focus { border-color: var(--border3); outline: none; }
.qe-save-tpl-input::placeholder { color: var(--txt3); }
.qe-save-tpl-emoji-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.qe-save-tpl-emoji {
  width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border2);
  background: transparent; font-size: 14px; cursor: pointer; transition: all var(--dur-base);
  display: flex; align-items: center; justify-content: center;
}
.qe-save-tpl-emoji:hover { border-color: var(--border3); background: var(--bg4); transform: scale(1.12); }
.qe-save-tpl-emoji.sel { border-color: var(--border3); background: var(--bg4); }
.qe-save-tpl-tags-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.qe-save-tpl-tag-btn {
  padding: 4px 11px; border-radius: 99px; border: 1.5px solid var(--border2);
  background: var(--bg3); color: var(--txt3); font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base); user-select: none;
}
.qe-save-tpl-tag-btn:hover { border-color: var(--border3); color: var(--txt2); }
.qe-save-tpl-tag-btn.sel { border-color: var(--txt3); background: var(--bg4); color: var(--txt); }
.qe-save-tpl-actions { display: flex; gap: 8px; }
.qe-save-tpl-cancel {
  flex: 1; padding: 10px; border-radius: var(--r8); border: 1.5px solid var(--border2);
  background: transparent; color: var(--txt2); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base);
}
.qe-save-tpl-cancel:hover { background: var(--bg3); color: var(--txt); }
.qe-save-tpl-confirm {
  flex: 1.6; padding: 10px; border-radius: var(--r8); border: none;
  background: var(--txt); color: var(--bg); font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all var(--dur-base) var(--spring);
}
.qe-save-tpl-confirm:hover { transform: translateY(-1px); opacity: .88; }

.qe-modal-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 6px; display: block;
}
.qe-modal-input {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  background: var(--bg3); border: 1.5px solid var(--border2);
  color: var(--txt); font-size: 13px; font-family: inherit;
  transition: border-color var(--dur-base); display: block;
}
.qe-modal-input:focus { border-color: var(--border3); outline: none; }
.qe-modal-input::placeholder { color: var(--txt3); }
.qe-modal-btn-cancel {
  flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border2);
  background: transparent; color: var(--txt2); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-base);
}
.qe-modal-btn-cancel:hover { background: var(--bg3); color: var(--txt); }
.qe-modal-btn-save {
  flex: 1.4; padding: 10px; border-radius: 10px; border: none;
  background: var(--txt); color: var(--bg); font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all var(--dur-base) var(--spring);
}
.qe-modal-btn-save:hover { opacity: .88; transform: translateY(-1px); }

.qe-meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 99px; cursor: pointer;
  font-size: 12px; font-weight: 600; transition: all var(--dur-base);
  border: 1.5px solid var(--border2); background:var(--tint-2); color: var(--txt2);
  user-select: none;
}
.qe-meta-chip:hover { background: rgba(255,60,40,.10); border-color: rgba(255,60,40,.28); color: #ff7060; }
.qe-meta-chip .qe-meta-chip-del { font-size: 9px; opacity: .6; }
.qe-meta-chip:hover .qe-meta-chip-del { opacity: 1; }
.qe-save-tpl-box {
  width: 100%; max-width: 420px;
  background: var(--bg2); border: 1px solid rgba(0,0,0,.09);
  border-radius: 18px; padding: 24px 22px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
  transform: translateY(14px) scale(.97); transition: transform .26s var(--spring); max-height: 92vh; overflow-y: auto;
}
.qe-save-tpl-box::-webkit-scrollbar { width: 3px; }
.qe-save-tpl-box::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* ── Library Sidebar Wrap: folder + storage + tools all-in-one ── */
.qe-lib-sidebar-wrap {
  display: flex; flex-direction: column;
  width: 220px; min-width: 200px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,.015);
  overflow: hidden;
  position: relative;
}
.qe-lib-sidebar-wrap .qe-lib-folder-sidebar {
  flex: 1; min-height: 0;
  width: 100% !important; min-width: unset !important;
  border-right: none !important;
  background: transparent !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Storage block in sidebar */
.qe-lib-sb-storage {
  flex-shrink: 0; border-top: 1px solid var(--border);
  padding: 8px 10px 7px; background: transparent;
}
.qe-lib-sb-storage-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;
}
.qe-lib-sb-storage-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--txt3); font-family: var(--font-mono);
}
.qe-lib-sb-storage-nums { font-size: 8.5px; color: var(--txt3); font-family: var(--font-mono); }
.qe-lib-sb-track {
  height: 3px; border-radius: 99px; background:var(--tint-4); overflow: hidden; margin-bottom: 5px;
}
.qe-lib-sb-fill {
  height: 100%; border-radius: 99px; width: 0%; background: rgba(60,60,67,.55); transition: width .5s ease;
}
.qe-lib-sb-detail-toggle {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 9px; color: var(--txt3); font-family: var(--font-mono);
  padding: 2px 0; transition: color var(--dur-fast); user-select: none;
}
.qe-lib-sb-detail-toggle:hover { color: var(--txt2); }
.qe-lib-sb-detail-chev { font-size: 7px; transition: transform var(--dur-base) var(--ease); color: rgba(0,0,0,.20); }
#qe-lib-sb-detail-body { padding-top: 8px; animation: pageIn .15s var(--ease); }
/* Sidebar tool panels */
.qe-lib-sb-tool-panel { flex-shrink: 0; border-top: 1px solid var(--border); }
.qe-lib-sb-tool-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; cursor: pointer; min-height: 27px;
  transition: background var(--dur-fast); user-select: none;
}
.qe-lib-sb-tool-head:hover { background:var(--tint-2); }
.qe-lib-sb-tool-head--danger:hover { background: rgba(217,48,37,.05); }
.qe-lib-sb-tool-icon { font-size: 10px; flex-shrink: 0; opacity: .5; line-height: 1; }
.qe-lib-sb-tool-label {
  flex: 1; font-size: 9.5px; font-weight: 600; color: var(--txt3); letter-spacing: .1px;
}
.qe-lib-sb-tool-label--danger { color: rgba(217,48,37,.55); }
.qe-lib-sb-tool-chev {
  font-size: 7px; color: rgba(0,0,0,.18); transition: transform var(--dur-base) var(--ease); flex-shrink: 0; line-height: 1;
}
.qe-lib-sb-tool-panel.open .qe-lib-sb-tool-chev { transform: rotate(90deg); }
.qe-lib-sb-tool-body {
  display: none; padding: 4px 10px 10px; border-top: 1px solid rgba(0,0,0,.05);
  overflow-y: auto; max-height: 260px; animation: pageIn .15s var(--ease);
}
.qe-lib-sb-tool-panel.open .qe-lib-sb-tool-body { display: block; }
.qe-lib-sb-sweep-info {
  font-size: 9px; color: var(--txt3); line-height: 1.55;
  padding: 5px 7px; border-radius: 5px;
  background: rgba(60,120,220,.05); border: 1px solid rgba(60,120,220,.09); margin-bottom: 6px;
}
.qe-lib-sb-scan-btn {
  width: 100%; padding: 5px 8px; border-radius: 5px;
  border:1px solid var(--border2); background: transparent;
  color: var(--txt3); font-size: 9.5px; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; transition: all var(--dur-fast);
}
.qe-lib-sb-scan-btn:hover { background: rgba(217,48,37,.06); border-color: rgba(217,48,37,.25); color: var(--danger); }
.qe-lib-sb-scan-btn:active { transform: scale(.98); }
.qe-lib-sb-danger-btn {
  width: 100%; padding: 6px 8px; border-radius: 5px;
  border: 1px solid rgba(217,48,37,.18); background: rgba(217,48,37,.04);
  color: rgba(217,48,37,.75); font-size: 10.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 7px; transition: all var(--dur-base); text-align: left;
}
.qe-lib-sb-danger-btn:hover { background: rgba(217,48,37,.10); border-color: rgba(217,48,37,.35); }
.qe-lib-sb-danger-btn:active { transform: scale(.98); }
.qe-lib-folder-sidebar::-webkit-scrollbar { width: 0; }
.qe-lib-folder-item-sub .qe-lib-fi-icon { font-size: 11px; }

.qe-lib-fi-icon {
  font-size: 12px; flex-shrink: 0;
  width: 16px; text-align: center;
  line-height: 1; display: flex; align-items: center; justify-content: center;
}
.qe-lib-fi-name { flex: 1; overflow: clip; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; align-self: center; }

.qe-lib-folder-item .qe-lib-fi-note { display: none; font-size: 9px; font-weight: 500; color: var(--txt3); white-space: normal; line-height: 1.35; margin-top: 2px; opacity: .8; }
.qe-lib-folder-item--default { align-items: center; }
.qe-lib-folder-item--default .qe-lib-fi-icon { margin-top: 0; }
.qe-lib-folder-item--default .qe-lib-fi-name-wrap { flex: 1; min-width: 0; display: contents; }
.qe-lib-folder-item--default .qe-lib-fi-note { display: none; }
.qe-lib-fi-del {
  display: none; width: 18px; height: 18px; border-radius: 5px; border: none;
  background: rgba(255,60,60,.14); color: #ff7060; font-size: 9px; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.qe-lib-fi-ren {
  display: none; width: 18px; height: 18px; border-radius: 5px; border: none;
  background:var(--tint-3b); color: var(--txt2); font-size: 11px; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.qe-lib-folder-item:hover .qe-lib-fi-del { display: flex; }
.qe-lib-folder-item:hover .qe-lib-fi-ren { display: flex; }
.qe-lib-folder-item:hover .qe-lib-fi-more { display: flex; }

.qe-lib-fi-ctx {
  position: fixed; z-index: 9999;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 10px; padding: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  min-width: 170px; display: none;
}
.qe-lib-fi-ctx.open { display: block; animation: pageIn .12s var(--ease); }
.qe-lib-fi-ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--txt2);
  transition: background .1s, color .1s; user-select: none;
}
.qe-lib-fi-ctx-item:hover { background: rgba(0,0,0,.05); color: var(--txt); }
.qe-lib-fi-ctx-item.danger { color: #ff6050; }
.qe-lib-fi-ctx-item.danger:hover { background: rgba(255,60,40,.10); color: #ff7060; }
.qe-lib-fi-ctx-icon { font-size: 11px; width: 16px; text-align: center; flex-shrink: 0; opacity: .7; }
.qe-lib-fi-ctx-sep { height: 1px; background: var(--border); margin: 3px 4px; }

.qe-lib-fav-item { color: var(--txt2); }
.qe-lib-fav-item:hover { background: rgba(0,0,0,.05) !important; color: var(--txt) !important; }
.qe-lib-fav-item.active {
  background:var(--tint-4);
  border-color: rgba(0,0,0,.14);
  color: var(--txt);
}

.qe-lib-sort-btn { font-variant-numeric: tabular-nums; }

.qe-ab-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  background: #FFFFFF;
  color: var(--txt2);
  border:1px solid var(--border3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.qe-ab-btn:hover {
  background: #F5F5F7;
  border-color: rgba(0,0,0,.26);
  color: var(--txt);
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.qe-ab-btn:active {
  background: #EBEBED;
  border-color: rgba(0,0,0,.30);
  transform: scale(.97);
  box-shadow: none;
}
.qe-ab-btn--primary {
  background: #1C1C1E;
  color: #FFFFFF;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.qe-ab-btn--primary:hover {
  background: #3A3A3C;
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.22);
}
.qe-ab-btn--primary:active {
  background: #000;
  transform: scale(.97);
  box-shadow: none;
}

.qe-lib-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ── In-window Library sub-panel (Export, Kelola Icon & Tag, Buat/Edit Template) ──
   Dulu tiap sub-menu ini adalah overlay/window sendiri yang floating di atas
   Library (backdrop + macOS titlebar sendiri). Sekarang mereka jadi panel yang
   swap dengan #qe-lib-body-main di dalam window Library yang sama — persis
   pola Cache Sweep & Recycle Bin, supaya tidak lagi terlihat "melayang". */
.qe-lib-inpanel { display: none; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.qe-lib-inpanel.show { display: flex; }
.qe-lib-inpanel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.qe-lib-inpanel-head-info { flex: 1; min-width: 0; }
.qe-lib-inpanel-title { font-size: 13px; font-weight: 700; color: var(--txt); letter-spacing: -.1px; }
.qe-lib-inpanel-sub { font-size: 10px; color: var(--txt3); margin-top: 1px; }
.qe-lib-inpanel-close {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.qe-lib-inpanel-close:hover { background: var(--bg5); color: var(--txt2); }
.qe-lib-inpanel-body { flex: 1; overflow-y: auto; min-height: 0; }

.qe-lib-action-bar--inline {
  border-bottom: none !important;
}
.qe-lib-del-sel-btn:disabled { opacity: .30; cursor: default; }

.qe-lib-add-tpl-btn {
  color: var(--txt);
  border-color: var(--border3);
  font-weight: 700;
}
.qe-lib-add-tpl-btn:hover { background:var(--tint-3b) !important; }

.qe-save-tpl-emoji.qe-inline-add-btn {
  border-style: dashed;
  color: var(--txt3);
  font-size: 13px;
}
.qe-save-tpl-emoji.qe-inline-add-btn:hover { color: var(--txt2); border-color: var(--border3); }
.qe-save-tpl-tag-btn.qe-inline-add-btn { border-style: dashed; color: var(--txt3); }
.qe-save-tpl-tag-btn.qe-inline-add-btn:hover { color: var(--txt2); border-color: var(--border3); }
.qe-lib-body::-webkit-scrollbar { width: 4px; }

#qe-lib-sel-bar {
  /* BUG FIX: sebelumnya elemen ini TIDAK punya display:none default, jadi
     walau kontennya (count + actions) disembunyikan lewat child selector,
     box kosongnya sendiri tetap ikut jadi flex sibling (flex:1) di samping
     .qe-lib-tags-row — akibatnya baris tag "diperas" cuma dapat separuh
     lebar tagbar-row dan keliatan seperti "terputus"/berhenti di tengah
     jalan alih-alih mentok sampai ke sisi kanan. Sekarang disembunyikan
     total secara default, baru ditampilkan (flex) saat mode seleksi aktif
     lewat class .show, supaya .qe-lib-tags-row bisa flex:1 penuh sendirian. */
  display: none;
  align-items: center; gap: 6px;
  padding: 0 8px 0 6px;
  flex: 1; min-width: 0;
}
#qe-lib-sel-bar.show {
  display: flex;
  animation: selBarIn .15s var(--ease);
}
#qe-lib-sel-bar .qe-sel-bar-count { display: none; }
#qe-lib-sel-bar.show .qe-sel-bar-count { display: inline; }
#qe-lib-sel-bar .qe-sel-bar-actions { display: none; }
#qe-lib-sel-bar.show .qe-sel-bar-actions { display: flex; align-items: center; gap: 4px; }
.qe-lib-tagbar-row.sel-active .qe-lib-tags-row { display: none !important; }

@keyframes selBarIn {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.qe-lib-grid { display: block; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 100%; position: relative; }

/* Cegah native long-press callout & text-select yang memicu lingkaran biru di iOS/Android */
.qe-finder-row,
.qe-finder-row *,
.qe-finder-row-wrap {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.qe-finder-row-edit { background: rgba(100,200,255,.025); }

.qe-finder-row.pinned-row { background: transparent; }

.qe-finder-checkbox {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--dur-fast); flex-shrink: 0;
  position: relative; z-index: 10; pointer-events: auto;
}
.qe-finder-checkbox::after { content: ''; }
.qe-finder-checkbox.checked { background: rgba(0,0,0,.80); border-color: rgba(0,0,0,.90); }
.qe-finder-checkbox.checked::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background-color: #111;
  -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

.qe-finder-select-all {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0; margin: 0 auto;
}

.qe-finder-select-all::after { content: ''; }

.qe-finder-select-all.partial { border-color: rgba(0,0,0,.35); background: transparent; }
.qe-finder-select-all.partial::after { content: ''; }

.qe-finder-select-all.all-checked { background: rgba(0,0,0,.80); border-color: rgba(0,0,0,.90); }
.qe-finder-select-all.all-checked::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background-color: #111;
  -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

.qe-finder-col-name { display: flex; align-items: center; gap: 5px; min-width: 0; padding-right: 10px; }

.qe-finder-col-tags { display: flex; align-items: center; gap: 2px; overflow: clip; flex-wrap: nowrap; min-width: 0; }
.qe-finder-tag-sep { font-size: 10px; color: var(--txt3); flex-shrink: 0; margin: 0 1px; }

.qe-finder-col-folder { display: flex; align-items: center; overflow: clip; }

.qe-finder-col-date {
  display: flex; flex-direction: column; gap: 1px; justify-content: center; overflow: clip;
}
.qe-finder-row:hover .qe-finder-more-btn,
.qe-finder-more-btn:focus { color: var(--txt2); }

.qe-finder-inline-actions { display: flex; align-items: center; gap: 2px; }
.qe-finder-btn.dup:hover { background: rgba(100,200,255,.10); border-color: rgba(100,200,255,.24); color: #7dd4f8; }
.qe-finder-btn.pin-btn { color: var(--txt3); }
.qe-finder-btn.pin-btn:hover { color: var(--txt2); background:var(--tint-3); border-color: var(--border2); }
.qe-finder-btn.pin-active { color: var(--txt2); }
.qe-finder-btn.pin-active:hover { background:var(--tint-4) !important; border-color: rgba(0,0,0,.16) !important; }
.qe-finder-ctx-menu.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.qe-lib-del-sel-btn.danger-outline { border-color: rgba(255,60,60,.28); color: #ff6060; background: rgba(255,60,60,.06); }
.qe-lib-del-sel-btn.danger-outline:hover { background: rgba(255,60,60,.14) !important; border-color: rgba(255,60,60,.45) !important; }
.qe-lib-del-sel-btn.sort-btn { border-color: transparent !important; color: rgba(0,0,0,0.52); background: transparent; }
.qe-lib-del-sel-btn.sort-btn:hover { background:var(--tint-3b) !important; border-color:var(--line-1) !important; color: rgba(0,0,0,.80) !important; }
.qe-ab-btn.sort-btn { background: transparent !important; border-color: transparent !important; }
.qe-lib-del-sel-btn.active-mode { background:var(--tint-4) !important; border-color:var(--line-2b) !important; color: var(--txt) !important; }

#qe-lib-rubberband {
  position: fixed; z-index: 9990;
  pointer-events: none;
  border: 1.5px solid rgba(60, 120, 220, 0.45);
  background: rgba(60, 120, 220, 0.07);
  border-radius: 4px;
  display: none;
}
#qe-lib-rubberband.active { display: block; }

.qe-finder-row.block-selected {
  background:var(--tint-3b) !important;
  outline: none;
}
.qe-finder-row.block-selected::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: rgba(0,0,0,.35);
  border-radius: 0 2px 2px 0;
}

.qe-sel-bar-count {
  font-size: 11px; font-weight: 800; color: rgba(0,0,0,0.75);
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px; padding: 2px 8px;
  flex-shrink: 0; white-space: nowrap;
}.qe-sel-bar-sep {
  width: 1px; height: 14px;
  background: var(--border2); flex-shrink: 0; margin: 0 2px;
}
.qe-sel-bar-btn {
  height: 28px; width: 32px; padding: 0; border-radius: 7px;
  background: transparent; color: var(--txt2);
  border: 1px solid var(--border2);
  font-size: 13px; cursor: pointer;
  font-family: inherit; transition: all var(--dur-fast);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qe-sel-bar-btn:hover {
  background: var(--bg4); border-color: var(--border3); color: var(--txt);
}
.qe-sel-bar-btn.danger {
  color: var(--danger); border-color: rgba(217,48,37,.22);
}
.qe-sel-bar-btn.danger:hover {
  background: var(--danger-bg); border-color: rgba(217,48,37,.45);
}
.qe-sel-bar-dismiss {
  margin-left: auto;
  height: 24px; width: 24px; border-radius: 6px; border: none;
  background: transparent; color: var(--txt3);
  font-size: 11px; cursor: pointer; transition: all var(--dur-fast);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: inherit;
}
.qe-sel-bar-dismiss:hover { background: var(--bg4); color: var(--txt); }
.qe-row-preview-tip.show { opacity: 1; transform: scale(1) translateY(0); display: block; }
.qe-row-preview-tip-name {
  font-size: 11.5px; font-weight: 800; color: var(--txt);
  margin-bottom: 5px; line-height: 1.3;
  display: flex; align-items: center; gap: 6px;
}
.qe-row-preview-tip-content {
  font-family: var(--font-mono);
  font-size: 9.5px; color: var(--txt3); line-height: 1.65;
  max-height: 90px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  white-space: pre-wrap; word-break: break-word;
}
.qe-row-preview-tip-footer {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; color: var(--txt3);
}
.qe-row-preview-tip-tag {
  padding: 1px 6px; border-radius: 99px; background: var(--bg4);
  border: 1px solid var(--border); font-size: 9px; font-weight: 700; color: var(--txt3);
}

@keyframes qeLongPressRipple {
  0%  { transform: scale(0); opacity: .4; }
  80% { transform: scale(2.4); opacity: .15; }
  100%{ transform: scale(2.8); opacity: 0; }
}
.qe-long-press-ripple {
  position: absolute; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(60,120,220,.5);
  pointer-events: none; z-index: 1;
  animation: qeLongPressRipple .55s ease-out forwards;
  transform-origin: center; margin-left: -14px; margin-top: -14px;
}

.qe-finder-row.block-selected .qe-finder-col-icon::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background-color: rgba(0,0,0,.82);
  background-image: var(--qe-bgi-check-white);
  background-repeat: no-repeat; background-position: center; background-size: 9px 9px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.qe-finder-row-selected.block-selected .qe-finder-col-icon::after { display: none; }

.qe-finder-row .qe-block-chk {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: rgba(255,255,255,.8);
  display: none; align-items: center; justify-content: center;
  transition: all var(--dur-fast); flex-shrink: 0; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.qe-lib-body.block-select-mode .qe-finder-col-icon { position: relative; cursor: pointer; }
.qe-lib-body.block-select-mode .qe-block-chk { display: flex; }
.qe-lib-body.block-select-mode .qe-finder-icon-box { opacity: 0; }
.qe-finder-row.block-selected .qe-block-chk {
  background: rgba(0,0,0,.82); border-color: rgba(0,0,0,.82);
}
.qe-finder-row.block-selected .qe-block-chk::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background-color: #fff;
  -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ── Library Footer Tools ── */
.qe-lib-footer-tools {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.qe-lft-panel {
  border-bottom: 1px solid var(--border);
}
.qe-lft-panel:last-child { border-bottom: none; }
.qe-lft-head {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 14px; cursor: pointer;
  transition: background var(--dur-fast); user-select: none; min-height: 28px;
}
.qe-lft-head:hover { background:var(--tint-1); }
.qe-lft-icon { font-size: 10px; flex-shrink: 0; opacity: .5; }
.qe-lft-label {
  flex: 1; font-size: 10px; font-weight: 600; color: var(--txt3);
  letter-spacing: .1px;
}
.qe-lft-head--danger .qe-lft-icon { opacity: 1; }
.qe-lft-head--danger .qe-lft-label { color: rgba(217,48,37,.60); }
.qe-lft-head--danger:hover { background: rgba(217,48,37,.04); }
.qe-lft-chev {
  font-size: 7px; color: rgba(0,0,0,.18);
  transition: transform var(--dur-base) var(--ease); flex-shrink: 0; line-height: 1;
}
.qe-lft-panel.open .qe-lft-chev { transform: rotate(90deg); }
.qe-lft-body {
  display: none; padding: 4px 14px 10px;
  border-top: 1px solid rgba(0,0,0,.05);
  animation: pageIn .15s var(--ease);
}
.qe-lft-panel.open .qe-lft-body { display: block; }
.qe-lft-sweep-info {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 9px; background: rgba(60,120,220,.04);
  border: 1px solid rgba(60,120,220,.09); border-radius: 6px;
  margin-bottom: 7px;
}
.qe-lft-sweep-info-text { font-size: 9.5px; color: var(--txt3); line-height: 1.5; }
.qe-lft-scan-btn {
  width: 100%; padding: 6px 11px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,.13); background: transparent;
  color: var(--txt3); font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all var(--dur-fast);
}
.qe-lft-scan-btn:hover { background: rgba(217,48,37,.05); border-color: rgba(217,48,37,.25); color: var(--danger); }
.qe-lft-scan-btn:active { transform: scale(.98); }
.qe-lft-danger-btn {
  width: 100%; padding: 7px 11px; border-radius: 6px;
  border: 1px solid rgba(217,48,37,.20); background: rgba(217,48,37,.04);
  color: rgba(217,48,37,.80); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 8px;
  transition: all var(--dur-base); text-align: left;
}
.qe-lft-danger-btn:hover { background: rgba(217,48,37,.09); border-color: rgba(217,48,37,.38); }
.qe-lft-danger-btn:active { transform: scale(.98); }
.qe-lft-danger-btn-sub { font-size: 9px; font-weight: 500; color: rgba(217,48,37,.50); margin-top: 1px; }
.qe-lib-status-left { display: flex; align-items: center; gap: 10px; }
.qe-lib-status-right { display: flex; align-items: center; gap: 6px; }
.qe-lib-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,0,0,.25); flex-shrink: 0;
}
.qe-lib-status-hint {
  font-size: 9px; color: rgba(0,0,0,.25); letter-spacing: .2px;
}

.qe-finder-row .qe-hover-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.22); background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast); flex-shrink: 0;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; opacity: 0;
  pointer-events: auto; z-index: 3;
}
.qe-finder-row:hover .qe-hover-check { opacity: 1; }
.qe-finder-row.block-selected .qe-hover-check {
  opacity: 1;
  background: rgba(0,0,0,.82); border-color: rgba(0,0,0,.82);
}
.qe-finder-row.block-selected .qe-hover-check::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background-color: #fff;
  -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.qe-finder-row-selected .qe-hover-check,
.qe-finder-row .qe-finder-checkbox ~ .qe-hover-check,
.qe-lib-selection-active .qe-finder-row .qe-hover-check,
.qe-finder-col-icon:has(.qe-finder-checkbox) .qe-hover-check {
  display: none !important;
  pointer-events: none !important;
}
.qe-finder-col-icon.has-checkbox .qe-hover-check {
  display: none !important;
  pointer-events: none !important;
}
.qe-lib-selection-active .qe-finder-row .qe-row-use-btn {
  display: none !important;
  pointer-events: none !important;
}

.qe-finder-col-icon { display: flex; align-items: center; justify-content: center; position: relative; }

.qe-finder-row .qe-row-use-btn,
.qe-finder-row:hover .qe-row-use-btn,
.qe-finder-row.block-selected .qe-row-use-btn {
  display: none !important;
  pointer-events: none !important;
}

.qe-finder-col-actions { display: flex; align-items: center; justify-content: center; position: relative; gap: 5px; }

@media (hover: none) and (pointer: coarse) {
  .qe-finder-row { min-height: 44px; }
  .qe-finder-more-btn { width: 32px; height: 32px; font-size: 14px; }
  .qe-finder-row .qe-hover-check { opacity: 0 !important; } .qe-sel-bar-btn { height: 34px; width: 36px; font-size: 14px; }
  .qe-row-preview-tip { display: none !important; } }
.qe-lib-tags-row::-webkit-scrollbar { height: 0; display: none; }
.qe-lib-actions-dd.open {
  opacity: 1; pointer-events: auto;
  transform: scale(1) translateY(0)
}
.qe-lib-actions-dd-item-icon {
  font-size: 14px; width: 20px; text-align: center; flex-shrink: 0;
}
.qe-lib-actions-dd-item-label { flex: 1; }
.qe-lib-actions-dd-sep {
  height: 1px; background:var(--tint-3b); margin: 4px 6px;
}
.qe-lib-inline-preview-text {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.7;
  color: var(--txt2);
  padding: 10px 14px 6px;
  margin: 0;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  border: none;
  letter-spacing: -.01em;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.qe-lib-inline-preview-text::-webkit-scrollbar { width: 3px; }
.qe-lib-inline-preview-text::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }

.qe-lib-inline-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px 9px;
  background: var(--bg3);
  border-top: 1px solid rgba(0,0,0,.06);
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ── Inline action buttons: 7 buah, 1 baris, icon-only ── */
.qe-lib-inline-pakai,
.qe-lib-inline-detail,
.qe-lib-inline-edit,
.qe-lib-inline-fav,
.qe-lib-inline-dupe,
.qe-lib-inline-move,
.qe-lib-inline-del {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  max-width: 44px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 1;
  transition: all var(--dur-fast) var(--spring);
  background: var(--bg2);
  color: var(--txt2);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* Pakai — aksen primer */
.qe-lib-inline-pakai {
  background: var(--txt);
  color: var(--bg2);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.qe-lib-inline-pakai:hover { opacity: .85; transform: translateY(-1px); }
.qe-lib-inline-pakai:active { transform: scale(.93); opacity: 1; }

/* Lihat */
.qe-lib-inline-detail:hover { background: var(--bg4); border-color: rgba(0,0,0,.24); color: var(--txt); }
.qe-lib-inline-detail:active { transform: scale(.93); }

/* Edit */

/* Favorit — bisa toggle warna */
.qe-lib-inline-fav { color: var(--txt3); }
.qe-lib-inline-fav.pinned { color: #F5A623; border-color: rgba(245,166,35,.30); background: rgba(245,166,35,.08); }
.qe-lib-inline-fav:hover { background: rgba(245,166,35,.12); color: #F5A623; border-color: rgba(245,166,35,.30); }
.qe-lib-inline-fav:active { transform: scale(.93); }

/* Duplikat */
.qe-lib-inline-dupe:hover { background: var(--bg4); color: var(--txt2); border-color:var(--line-2b); }
.qe-lib-inline-dupe:active { transform: scale(.93); }

/* Pindah */
.qe-lib-inline-move:hover { background: var(--bg4); border-color:var(--line-3); color: var(--txt); }
.qe-lib-inline-move:active { transform: scale(.93); }

/* Hapus — merah */
.qe-lib-inline-del { color: var(--txt3); }
.qe-lib-inline-del:hover { background: rgba(217,48,37,.08); color: var(--danger); border-color: rgba(217,48,37,.22); }
.qe-lib-inline-del:active { transform: scale(.93); }

/* Separator dihapus — tidak dipakai */
.qe-lib-inline-sep { display: none !important; }

/* [FIX] Panel "Lihat Detail/Prompt" — dulu #qe-detail-modal-overlay adalah
   window mengambang terpisah (position:fixed, backdrop & titlebar macOS
   sendiri) yang di-stack DI ATAS window Library. Sekarang jadi panel biasa
   DI DALAM window Library yang sama (#qe-detail-inpanel, class
   .qe-lib-inpanel) — titlebar, backdrop, dan ukuran window sepenuhnya
   diwariskan dari #qe-lib-overlay/.qe-lib-modal, sama seperti panel Edit
   Template & Kelola Icon/Tag di atas. Yang tersisa di sini cuma styling
   internal panel: icon header, baris meta/tag, toolbar, isi prompt, footer. */
.qe-detail-ip-head { padding: 13px 16px; align-items: flex-start; }
.qe-detail-ip-icon {
  width: 30px; height: 30px; border-radius: 9px; margin-top: 1px;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; line-height: 1;
}
.qe-detail-modal-meta {
  display: flex; align-items: center; gap: 0;
  margin-top: 3px; flex-wrap: nowrap;
  font-size: 10px; color: var(--txt3);
  font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; line-height: 1.4;
}
.qe-detail-modal-meta .dm-meta-val { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qe-detail-modal-meta .dm-meta-sep { flex-shrink: 0; margin: 0 5px; opacity: .3; }
.qe-detail-modal-tags-inline {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 5px;
}
.qe-detail-tag-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 99px;
  background: var(--bg4); border: 1px solid var(--border2);
  font-size: 9.5px; font-weight: 600; color: var(--txt3); white-space: nowrap;
}

.qe-detail-modal-content {
  flex: 1; overflow-y: hidden; padding: 16px 20px;
  background: var(--bg3);
  display: flex; flex-direction: column; min-height: 0;
}
.qe-detail-modal-content::-webkit-scrollbar { width: 4px; }
.qe-detail-modal-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }
.qe-detail-prompt-text {
  font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.85; color: var(--txt);
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; user-select: text;
  min-height: 0; flex: 1;
  overflow-y: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.qe-detail-prompt-text::-webkit-scrollbar { width: 4px; }
.qe-detail-prompt-text::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }

/* UI/UX FEATURE 2026-08-02: ringkasan Deskripsi di panel Lihat Detail —
   ditaruh SEBELUM toolbar & isi prompt (urutan Nama->Deskripsi->Isi
   Prompt yang sama dgn form Tambah/Edit). Font biasa (bukan mono) &
   warna redup supaya jelas beda peran dgn .qe-detail-prompt-text
   (isi prompt asli). display:none by default di markup, di-toggle
   lewat JS (qeLibShowDetailModal) hanya kalau tpl.description ada isi. */
.qe-dm-desc {
  font-size: 12px; line-height: 1.6; color: var(--txt2);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 10px;
  flex-shrink: 0; white-space: pre-wrap; word-break: break-word;
}

.qe-dm-toolbar {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px; flex-shrink: 0;
}
.qe-dm-tool-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--border2); background: var(--bg4);
  color: var(--txt3); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
  white-space: nowrap;
}
.qe-dm-tool-btn:hover { background: var(--bg5); border-color: var(--border3); color: var(--txt2); }
.qe-dm-tool-btn.active { background: var(--bg5); border-color: var(--border3); color: var(--txt); }
.qe-detail-prompt-text .sh-sep      { color: #C07000; }
.qe-detail-prompt-text .sh-note-txt { color: #8B5500; }

.qe-detail-modal-footer {
  padding: 10px 16px 12px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  background: var(--bg3);
}
.qe-detail-use-btn {
  flex: 1; height: 34px; border-radius: 8px;
  background: var(--txt); color: var(--bg); border: none;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--dur-base) var(--spring); letter-spacing: -.1px;
}
.qe-detail-use-btn:hover { opacity: .85; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.qe-detail-use-btn:active { transform: scale(.97); }
.qe-detail-copy-btn, .qe-detail-edit-btn {
  height: 34px; padding: 0 16px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--txt2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
  white-space: nowrap; letter-spacing: -.05px;
}
.qe-detail-copy-btn:hover, .qe-detail-edit-btn:hover {
  background: var(--bg4); border-color:var(--line-3); color: var(--txt);
}

.qe-fb-detail-btn {
  height: 24px; padding: 0 9px; border-radius: 6px;
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--txt3); font-size: 10px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.qe-fb-detail-btn:hover { background: var(--bg5); color: var(--txt2); border-color: var(--border3); }

.qe-row-preview-tip {
  position: fixed; z-index: 8000;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; padding: 10px 12px;
  max-width: 280px; min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
  pointer-events: none;
  opacity: 0; transform: scale(.96) translateY(4px);
  transition: opacity var(--dur-base), transform var(--dur-base);
  font-size: 10.5px; line-height: 1.6; color: var(--txt2); display: none !important;
}


@media (max-width: 600px) {
  .qe-lib-actions-dd { min-width: 180px; }
}

.qe-em3-header {
  /* disamakan persis dengan .macos-titlebar (Template Library): */
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 11px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
  background: var(--bg3);
  position: relative;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
/* Semua anak non-button di header: cursor default */
.qe-em3-header > *:not(.qe-em3-traffic) {
  cursor: default !important;
}
/* Traffic lights tetap pointer saat hover */
.qe-em3-tl:not([disabled]) {
  cursor: pointer !important;
}
.qe-em3-traffic {
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0; z-index: 1;
}
.qe-em3-tl {
  width: 12px; height: 12px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; transition: filter var(--dur-fast); flex-shrink: 0;

  position: relative;
}
.qe-em3-tl:hover { filter: brightness(.88); }
.qe-em3-tl:active { filter: brightness(.75) scale(.9); }
.qe-em3-tl-red  { background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.qe-em3-tl-max  { background: #28c840; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.qe-em3-title {   /* tidak pernah menerima event apapun */      /* tidak bisa diseleksi → tidak ada I-beam */
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--txt2); letter-spacing: -.15px; margin: 0 !important;
  white-space: nowrap;
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
  -webkit-user-select: none !important;

  z-index: 2;
}
.qe-em3-close { display: none !important; }

.qe-em3-body {
  display: flex; flex-direction: row;
  flex: 1; min-height: 0; overflow: hidden;
}
.qe-em3-col-left {
  width: 280px; min-width: 240px; flex-shrink: 0;
  padding: 20px 18px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg3);
  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.1) transparent;
}
.qe-em3-col-left::-webkit-scrollbar { width: 3px; }
.qe-em3-col-left::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 99px; }
.qe-em3-col-right {
  flex: 1; display: flex; flex-direction: column;
  padding: 20px 20px 16px;
  overflow: hidden;
  min-height: 0;
  background: var(--bg3);
}

.qe-em3-field { margin-bottom: 20px; }
.qe-em3-field-last { margin-bottom: 22px; }
.qe-em3-label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 8px;
}

.qe-em3-input {
  width: 100%; padding: 9px 13px;
  border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--txt); font-size: 13.5px; font-weight: 500;
  font-family: inherit; transition: all var(--dur-base); display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qe-em3-input:focus { outline: none; background: var(--bg2); border-color: var(--border3); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.qe-em3-input::placeholder { color: var(--txt3); font-weight: 500; }

.qe-em3-meta-group {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qe-em3-sel-row {
  display: flex; align-items: center;
  padding: 9px 14px; cursor: pointer;
  transition: background .1s;
  user-select: none; gap: 8px;
}
.qe-em3-sel-row:hover { background: var(--bg3); }
.qe-em3-sel-row.open { background: var(--bg3); }
.qe-em3-sel-label {
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
  letter-spacing: .2px; width: 58px; flex-shrink: 0;
}
.qe-em3-sel-preview {
  flex: 1; font-size: 12px; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.qe-em3-sel-preview.muted { color: var(--txt3); font-weight: 500; }
.qe-em3-sel-chevron {
  font-size: 15px; color: var(--ui-muted); font-weight: 500;
  transition: transform var(--dur-base) ease;
  flex-shrink: 0; line-height: 1;
}
.qe-em3-sel-row.open .qe-em3-sel-chevron { transform: rotate(90deg); }

.qe-em3-panel {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-base) ease;
  background: var(--bg2);
  border-top: 0px solid var(--border);
}
.qe-em3-panel.open {
  max-height: 240px;
  border-top-width: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.1) transparent;
}
.qe-em3-panel.open::-webkit-scrollbar { width: 3px; }
.qe-em3-panel.open::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 99px; }
.qe-em3-sel-divider {
  height: 1px; background: var(--border); margin: 0;
}

/* [FIX] Safety net — jamin field Nama & Isi Template SELALU interactive,
   apapun state overlay/dialog lain yang mungkin nyangkut di atasnya. */
.qe-em3-col-left,
.qe-em3-col-right,
.qe-em3-input,
.qe-em3-textarea {
  pointer-events: auto !important;
}
.qe-em3-textarea {
  width: 100%; flex: 1;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--txt); font-size: 13px; font-family: inherit;
  line-height: 1.75; resize: none;
  min-height: 0;
  transition: all var(--dur-base); display: block;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qe-em3-textarea:focus { outline: none; border-color: var(--border3); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.qe-em3-textarea::placeholder { color: var(--txt3); }

/* UI/UX FEATURE 2026-08-02: field Deskripsi (base data baru, terpisah
   dari Isi Template) — dipakai di form Tambah/Edit Template. SENGAJA
   varian kecil sendiri (bukan pakai .qe-em3-textarea apa adanya) karena
   fungsinya beda: ringkasan singkat 1-3 baris utk preview di list &
   panel detail, bukan wadah isi prompt yang panjang. min-height fixed
   (bukan flex:1 spt .qe-em3-textarea) supaya tidak ikut "makan" ruang
   vertikal kolom kiri yang juga dipakai selector Icon/Kategori/Folder
   di bawahnya. */
.qe-em3-textarea-desc {
  width: 100%; padding: 9px 13px;
  border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--txt); font-size: 12.5px; font-family: inherit;
  line-height: 1.55; resize: vertical;
  min-height: 54px; max-height: 140px;
  transition: all var(--dur-base); display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.qe-em3-textarea-desc:focus { outline: none; border-color: var(--border3); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.qe-em3-textarea-desc::placeholder { color: var(--txt3); }
.qe-em3-desc-counter {
  font-size: 9.5px; color: var(--txt3); text-align: right;
  margin-top: 4px; font-family: var(--font-mono);
}
.qe-em3-desc-counter.warn { color: #ff9500; }

.qe-em3-footer {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 9px 16px 11px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg3);
}
.qe-em3-btn-cancel {
  padding: 7px 20px; border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--bg2); color: var(--txt2);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: all var(--dur-fast); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  letter-spacing: -.1px; flex-shrink: 0;
}
.qe-em3-btn-cancel:hover { background: var(--bg4); color: var(--txt); border-color: var(--border3); }
.qe-em3-btn-cancel:active { transform: scale(.97); }
.qe-em3-btn-save {
  flex: 1; max-width: 260px;
  padding: 7px 24px; border-radius: 8px;
  border: none; background: #1C1C1E; color: #fff;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; letter-spacing: -.15px;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: all var(--dur-base);
}
.qe-em3-btn-save:hover { background: #2C2C2E; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.qe-em3-btn-save:active { transform: scale(.97); }

#qe-edit-tpl-overlay .qe-save-tpl-emoji-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
#qe-edit-tpl-overlay .qe-save-tpl-tags-row  { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
#qe-edit-tpl-overlay .qe-save-tpl-emoji {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--border2); background: var(--bg4);
  font-size: 13px; cursor: pointer; transition: background .1s, border-color .1s;
  display: flex; align-items: center; justify-content: center;
}
#qe-edit-tpl-overlay .qe-save-tpl-emoji:hover { border-color: var(--border3); background: var(--bg5); }
#qe-edit-tpl-overlay .qe-save-tpl-emoji.sel {
  border-color: var(--txt); background: var(--txt);
}
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn {
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--border2);
  background: var(--bg4); color: var(--txt3);
  font-size: 10.5px; font-weight: 500;
  cursor: pointer; transition: background .1s, border-color .1s, color .1s;
  min-height: 24px; display: inline-flex; align-items: center;
}
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn:hover { border-color: var(--border3); color: var(--txt2); background: var(--bg5); }
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn:active { opacity: .75; }
#qe-edit-tpl-overlay .qe-save-tpl-tag-btn.sel { background: var(--txt); color: var(--bg); border-color: var(--txt); }

@media (max-width: 720px) {
  .qe-edit-modal-v3 {
    border-radius: 20px 20px 0 0;
    height: 94dvh;
    max-width: 100%;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .qe-em3-body { flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }
  .qe-em3-col-left { width: 100%; border-right: none; border-bottom: 1px solid rgba(0,0,0,.06); padding: 18px 18px 16px; }
  .qe-em3-col-right { padding: 16px 18px 16px; min-height: 200px; }
  .qe-em3-textarea { min-height: 150px; resize: vertical; }
  .qe-em3-header { padding: 12px 16px 11px; flex-shrink: 0; }
  .qe-em3-footer {
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  #qe-edit-tpl-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}
.nav-lib-section { padding: 10px 10px 4px; border-top: 1px solid var(--border); }

.nav-lib-header-left { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.nav-lib-header-icon-wrap {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: rgba(0,0,0,.05);
  border:1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.nav-lib-header-icon { font-size: 14px; line-height: 1; }
.nav-lib-header-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-lib-header-title { font-size: 12px; font-weight: 600; color: var(--txt); letter-spacing: -.2px; line-height: 1.2; }
.nav-lib-header-sub { font-size: 9px; color: var(--txt3); font-weight: 500; letter-spacing: .1px; }

.nav-lib-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-lib-header-count {
  font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 99px;
  background:var(--tint-3); border:1px solid var(--border);
  color: var(--txt3); font-family: var(--font-mono);
  letter-spacing: .3px;
}
.nav-lib-chevron {
  font-size: 17px; color:var(--placeholder); font-weight: 500;
  transition: transform var(--dur-base) var(--ease), color var(--dur-base);
  line-height: 1;
}

.nav-lib-folder { display: flex; flex-direction: column; width: 100%; overflow-x: hidden; }
.nav-lib-folder + .nav-lib-folder { border-top: none; }

.nav-lib-folder-head {
  /* padding-right disamakan dengan #nav-lib-toggle-btn (9px) supaya kolom
     badge/chevron di tiap baris folder sejajar vertikal dengan tombol panah
     "Buka Library" di header — bukan kepotong lebih mepet dari itu. */
  display: flex; align-items: center;
  padding: 2px 9px 2px var(--nav-pad);
  margin: 0 0 1px 0;
  cursor: pointer; user-select: none;
  transition: background .1s;
  border-radius: 7px;
  background: transparent; min-height: 24px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.nav-lib-folder-head:hover { background: rgba(0,0,0,.05); }

.nav-lib-folder-chev {
  display: none;
}

.nav-lib-folder-emoji {
  width: var(--nav-emoji); height: var(--nav-emoji);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; line-height: 1;
  margin-right: var(--nav-gap);
  filter: grayscale(1) contrast(.65) brightness(1.1); opacity: .72;
  transition: filter var(--dur-base), opacity var(--dur-base);
  pointer-events: none;
}
.nav-lib-folder-head:hover .nav-lib-folder-emoji { opacity: .88; filter: grayscale(.6) contrast(.75); }

.nav-lib-folder-name {
  flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 500;
  color: var(--txt2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  letter-spacing: -.1px;
  max-width: 100%;
  pointer-events: none;
}
.nav-lib-folder-head:hover .nav-lib-folder-name { color: var(--txt); }

.nav-lib-folder-cnt {
  /* jaga supaya badge 2-3 digit tetap utuh, tidak pernah ikut terpotong */
  font-size: 8.5px; font-weight: 600; color: var(--txt3);
  font-family: var(--font-mono); flex-shrink: 0;
  background: rgba(0,0,0,.055); border-radius: 99px;
  padding: 1px 5px; letter-spacing: .2px; margin-left: 4px;
  pointer-events: none;
  min-width: 14px; text-align: center; box-sizing: content-box;
}
.nav-lib-folder-toggle-chev {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0; margin-left: 3px;
  color: var(--txt3); opacity: .6;
  transition: transform var(--dur-base) cubic-bezier(.4,0,.2,1), opacity var(--dur-base);
  pointer-events: none;
}
.nav-lib-folder-toggle-chev.open {
  transform: rotate(180deg); opacity: .85;
}
.nav-lib-folder-head:hover .nav-lib-folder-toggle-chev { opacity: .9; }
/* FIX (akar masalah teks nested kepotong ngaco): .nav-lib-items adalah
   display:grid, dan <div> anaknya otomatis jadi grid item. Grid item punya
   default min-width:auto (BUKAN 0), yang di-resolve jadi ukuran min-content
   dari isinya — dan karena nama folder/template pakai white-space:nowrap,
   min-content-nya = lebar penuh teks tanpa terpotong sama sekali. Akibatnya
   baris nested boleh melebar lebih lebar dari sidebar itu sendiri buat
   menampung teks itu, jadi overflow ke kanan — makin panjang namanya, makin
   jauh dia nembus batas kanan yang seharusnya (persis kasus di screenshot).
   min-width:0 di sini memaksa grid item mengikuti lebar container seperti
   block biasa, supaya text-overflow:ellipsis di elemen nama akhirnya benar2
   kepakai & batas kanannya konsisten di semua level indent. */
.nav-lib-items > * { min-height: 0; min-width: 0; overflow: clip; touch-action: pan-y; }
.nav-lib-items > div { overflow: visible; }
.nav-lib-items.open > * { overflow: visible; }
#nav-lib-folders::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}

#nav-lib-folders > .nav-lib-folder { position: relative; }

#nav-lib-folders > .nav-lib-folder > .nav-lib-folder-head {
  padding-left: 35px !important;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap {
  margin-left: 43px;
  border-left: none;
  padding-left: 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.18) 100%, transparent 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left 0 top 0;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-tpl-item {
  padding-left: 15px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-folder-head {
  padding-left: 15px !important;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap {
  margin-left: 23px;
  border-left: none;
  padding-left: 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.18) 100%, transparent 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left 0 top 0;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-tpl-item {
  padding-left: 15px;
}
#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-folder-head {
  padding-left: 15px !important;
}

.nav-lib-tree-wrap { position: relative; padding-left: 0; overflow-x: hidden; }
.nav-lib-tree-wrap > .nav-lib-folder + .nav-lib-folder { border-top: none; }
.nav-lib-tree-wrap > .nav-lib-tpl-item { padding-left: 13px; }
.nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-folder-head { padding-left: 13px; }

.nav-lib-tpl-item {
  display: flex; align-items: center;
  padding: 2px 9px 2px 9px;
  gap: var(--nav-gap);
  cursor: pointer; transition: background .08s;
  border-radius: 6px; margin: 0 0 1px 0;
  min-height: 24px; background: transparent; position: relative;
  overflow: hidden;
  max-width: 100%;
}
.nav-lib-tpl-item:last-child { margin-bottom: 0; }
.nav-lib-tpl-item:hover { background: rgba(0,0,0,.05); }

.nav-lib-tpl-icon {
  font-size: 11px; flex-shrink: 0; line-height: 1;
  width: var(--nav-emoji); text-align: center;
  filter: grayscale(1) contrast(.65) brightness(1.1); opacity: .65;
  transition: filter var(--dur-base), opacity var(--dur-base);
  pointer-events: none;
}
.nav-lib-tpl-name {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 500;
  color: var(--txt2); overflow: hidden; white-space: nowrap; text-overflow: clip;
  line-height: 1.3; letter-spacing: -.05px;
  pointer-events: none;
}
.nav-lib-tpl-item:hover .nav-lib-tpl-name { color: var(--txt); }
.nav-lib-tpl-item:active .nav-lib-tpl-name { color: var(--txt); }

.nav-lib-tpl-item.tpl-is-new {
  position: relative;
}
.nav-lib-tpl-item.tpl-is-new::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--txt3);
  box-shadow: 0 0 0 2px var(--border2);
  flex-shrink: 0;
  pointer-events: none;
}
/* Badge "NEW" di library card — cukup dijadikan satu-satunya penanda
   (lihat .tpl-new-badge di bawah). Row-nya sendiri TIDAK dikasih efek
   apapun (background/border-left) supaya tetap sejajar rapi dengan
   row lain, tidak ada garis/strip tambahan yang bikin misalign. */
.tpl-new-badge {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--txt);
  color: var(--bg2);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.20);
  animation: newBadgePulse 2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes newBadgePulse {
  0%,100% { box-shadow: 0 1px 4px rgba(0,0,0,.20); }
  50%      { box-shadow: 0 1px 8px rgba(0,0,0,.35), 0 0 0 3px rgba(0,0,0,.10); }
}
.nav-lib-tpl-item:hover .nav-lib-tpl-icon { opacity: .85; filter: grayscale(.5) contrast(.75); }

.nav-lib-tpl-item.nav-tpl-active { background:var(--tint-3); border-radius: 6px; margin: 0 0 1px 0; }
.nav-lib-tpl-item.nav-tpl-active::after {
  content: '';
  position: absolute; left: 2px; top: 20%; bottom: 20%;
  width: 2px; border-radius: 99px;
  background: rgba(0,0,0,.35);
}
.nav-lib-tpl-item.nav-tpl-active .nav-lib-tpl-name { color: var(--txt); font-weight: 600; }
.nav-lib-tpl-item.nav-tpl-active .nav-lib-tpl-icon { opacity: 1; filter: grayscale(.3) contrast(.9); }

.nav-lib-empty { padding: 5px 9px 7px 24px; font-size: 10.5px; color: var(--txt3); opacity: .5; font-style: italic; }

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-empty {
  padding-left: 57px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-empty {
  padding-left: 15px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-empty {
  padding-left: 37px;
}

#nav-lib-folders > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-tree-wrap > .nav-lib-folder > .nav-lib-items > div > .nav-lib-empty {
  padding-left: 37px;
}
.nav-lib-folder-sep { height: 1px; background: var(--border); margin: 3px 8px; opacity: .5; }
.nav-lib-bottom { height: 8px; }

#nav-lib-section { padding: 0; width: 100%; overflow: visible; }
#nav-lib-section .nav-lib-bottom { display: none; }
#nav-lib-folders-wrap {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease), opacity var(--dur-base) ease;
}
#nav-lib-folders-wrap.open {
  grid-template-rows: 1fr; opacity: 1; overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease), opacity var(--dur-base) ease .05s;
}
#nav-lib-folders-wrap > #nav-lib-folders { min-height: 0; overflow: visible; }

#nav-lib-folders {
  position: relative; margin: 0 0 2px 0; overflow: visible; padding-left: 0; width: 100%;
}
#nav-lib-section .nav-lib-folder + .nav-lib-folder { border-top: none; }

/* Mobile meta label di subfolder row — hanya tampil saat kolom disembunyikan */
.qe-sf-mobile-meta {
  display: none;
  font-size: 10px;
  color: var(--txt3);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  letter-spacing: .1px;
}

/* Mobile meta column untuk template row — tersembunyi di desktop */
.qe-tpl-mobile-meta-col { display: none; }
.qe-tpl-mobile-meta {
  font-size: 10px;
  color: var(--txt3);
  font-family: var(--font-mono);
  white-space: nowrap;
  letter-spacing: .1px;
}
/* Dua baris di kolom Detail */
.qe-meta-two-line {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.qe-meta-line1 {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--txt3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.qe-meta-line2 {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 600px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 120px 36px; }

  /* Subfolder mobile: hapus flex-column, kolom detail sudah di kanan */
  .qe-subfolder-row .qe-finder-col-name { flex-direction: row; align-items: center; }
  .qe-sf-mobile-meta { display: none; }
  /* Tampilkan kolom meta kanan untuk template row */
  .qe-tpl-mobile-meta-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    overflow: hidden;
  }
  .qe-tpl-mobile-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  .qe-meta-two-line { white-space: normal; }
  .qe-meta-line1, .qe-meta-line2 { text-align: right; }
}

/* NB: aturan grid-template-columns & sembunyikan kolom Folder untuk breakpoint
   ini sekarang HANYA didefinisikan sekali, di blok kanonis v5.17 (cari
   "Tablet 601–768 px" di bawah) — supaya tidak ada 2-3 sumber kebenaran yang
   saling override secara ambigu lagi. */

.qe-lib-move-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--txt2);
  border: 1.5px solid transparent; transition: all var(--dur-fast);
}
.qe-lib-move-item .mi-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.qe-lib-move-item .mi-name { flex: 1; line-height: 1.2; }
.qe-lib-move-item:hover { background: rgba(0,0,0,.05); border-color: var(--border2); color: var(--txt); }
.qe-lib-move-item.active { background:var(--tint-3b); border-color:var(--border3); color: var(--txt); }
.qe-edit-modal-v3 {
  width: 100%; max-width: 960px; max-height: 82vh; height: 82vh;
  background: var(--bg3);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pageIn .22s var(--ease) both;
}

.qe-lib-mobile-folder-toggle { display: none !important; }
.qe-lib-drawer-backdrop { display: none; }

@media (max-width: 600px) {
  .qe-lib-overlay { padding: 0; align-items: flex-end; }
  .qe-lib-modal {
    max-width: 100%; width: 100%;
    height: calc(92dvh - env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #qe-lib-folder-modal,
  #qe-lib-rename-modal,
  #qe-lib-move-modal,
  #qe-import-conflict-modal,
  #qe-generic-confirm-modal { padding: 16px; align-items: center; }
  #qe-lib-folder-modal > div,
  #qe-lib-rename-modal > div,
  #qe-lib-move-modal > div,
  #qe-generic-confirm-modal > div {
    border-radius: 18px; max-height: 90vh; overflow-y: auto;
  }

  .qe-lib-content-wrap { flex-direction: row; position: relative; }

  .qe-lib-sidebar-wrap {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 20;
    width: 220px; min-width: 0; flex-shrink: 0;
    border-right: none; border-bottom: none;
    background: var(--bg2);
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
    border-radius: 0;
  }
  .qe-lib-sidebar-wrap.drawer-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.13);
    border-right: 1px solid var(--border2);
  }

  .qe-lib-folder-drawer-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    border: 1px solid var(--border2); background: var(--bg3);
    color: var(--txt2); cursor: pointer; font-size: 15px;
    transition: all var(--dur-base); -webkit-tap-highlight-color: transparent;
  }
  .qe-lib-folder-drawer-btn:active { background: var(--bg5); }
  .qe-lib-folder-drawer-btn.active {
    background: rgba(0,0,0,.09); border-color:var(--border3); color: var(--txt);
  }

  .qe-lib-active-folder-pill {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 10px;
    border-bottom: 1px solid var(--border);
    background: transparent; flex-shrink: 0;
    min-height: 0;
  }
  .qe-lib-afp-icon { font-size: 13px; flex-shrink: 0; line-height: 1; }
  .qe-lib-afp-name {
    font-size: 11.5px; font-weight: 700; color: var(--txt2);
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qe-lib-afp-count {
    font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 99px;
    background:var(--tint-3b); color: var(--txt3);
    font-family: var(--font-mono); flex-shrink: 0;
  }

  .qe-finder-header { grid-template-columns: 34px 1fr 120px 36px; }
  .qe-finder-row    { grid-template-columns: 34px 1fr 120px 36px; }
  .qe-finder-col-tags,
  .qe-finder-col-folder,
  .qe-finder-col-date { display: none !important; }

  .qe-lib-action-bar {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 4px; padding: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .qe-lib-action-bar::-webkit-scrollbar { display: none; }
  .qe-lib-action-bar > * { flex-shrink: 0; }
  .qe-lib-action-bar > span { flex-shrink: 1; min-width: 50px; }

  /* qe-save-tpl mobile overrides moved to end-of-file fix block */
}

/* ══ UI/UX FIX 2026-08-01: Library inner sidebar (kolom LIBRARY/FOLDER)
   auto-minimize saat RUANG TENGAH menyempit — bukan cuma di HP asli
   (@media max-width:600px di atas), tapi JUGA saat viewport-nya lebar tapi
   sidebar kiri+kanan APLIKASI UTAMA sama-sama sedang terbuka (bukan mode
   rail/hidden). Kondisi itu bikin `.feed-col` — dan `#qe-lib-overlay`, yang
   markup-nya di index.html memang ikut memakai class `feed-col` supaya
   ke-geser oleh margin-left/margin-right sidebar yang sama — ke-squeeze
   jadi sempit walau lebar VIEWPORT-nya sendiri nggak berubah sama sekali.
   Rule lama cuma ngecek lebar viewport (`@media max-width:600px`), jadi di
   skenario ini nggak pernah kepicu: sidebar Library tetap dipaksa nempel
   220px, sisa ruang buat body daftar template (nama/ukuran/dst) jadi
   kepotong parah — persis bug "sidebar Library ketiban ruang gara-gara
   sidebar utama dibuka" yang dilaporkan.

   Dipicu lewat container query `qe-feedcol` (pola yang sama persis dipakai
   di file ini utk .qe-step23-row, cari komentar "iPad mode vertical +
   sidebar kiri/kanan sama-sama melebar" di atas — container-type sudah
   di-set di rule `.feed-col`), supaya reaktif terhadap lebar RUANG yang
   BENERAN tersisa (sudah dipotong margin sidebar kiri/kanan), bukan lebar
   viewport mentah. Begitu ruang menyempit, sidebar Library otomatis
   off-canvas (mode drawer — persis perilaku mobile di atas, class/JS-nya
   didaur ulang: qeLibDrawerOpen/Close/Toggle di js/qe-library.js) supaya
   body daftar template dapat prioritas lebar penuh; user tetap bisa buka
   sidebar-nya kapan saja lewat tombol drawer yang otomatis muncul di
   kondisi ini. Browser yang belum dukung container query otomatis skip
   blok ini (fallback tetap ke @media di atas utk HP asli). */
@container qe-feedcol (max-width: 760px) {
  .qe-lib-content-wrap { flex-direction: row; position: relative; }

  .qe-lib-sidebar-wrap {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 20;
    width: 220px; min-width: 0; flex-shrink: 0;
    border-right: none; border-bottom: none;
    background: var(--bg2);
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
    border-radius: 0;
  }
  .qe-lib-sidebar-wrap.drawer-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,.13);
    border-right: 1px solid var(--border2);
  }

  .qe-lib-folder-sidebar {
    position: static; width: 100% !important; min-width: unset !important;
    transform: none !important;
    box-shadow: none !important;
    border-right: none !important;
    background: transparent !important;
  }

  /* UI/UX FIX 2026-08-01: backdrop di belakang drawer folder (kolom kiri
     Library, muncul saat sidebar utama kiri+kanan dibuka bareng sehingga
     kotak Library ke-squeeze sempit) dulu dikasih background hitam
     transparan (rgba(0,0,0,.22)) supaya kelihatan seperti overlay modal
     biasa. User minta efek gelap ini dihilangkan. Elemen ini TETAP ada
     (masih dipakai buat nangkep klik-di-luar via onclick="qeLibDrawerClose()"
     di index.html, lihat qeLibDrawerOpen/Close di js/qe-library.js) — cuma
     visualnya yang dibikin transparan total, jadi klik-di-luar-drawer
     masih berfungsi normal menutup drawer, tanpa lagi menggelapkan body
     daftar template di baliknya. */
  .qe-lib-drawer-backdrop {
    display: block;
    position: absolute; inset: 0; z-index: 19;
    background: transparent;
    opacity: 0; pointer-events: none;
    transition: none;
  }
  .qe-lib-drawer-backdrop.show { opacity: 1; pointer-events: auto; }

  .qe-lib-folder-item {
    white-space: normal; flex-shrink: 0;
    padding: 7px 10px; width: 100%;
  }
  .qe-lib-folder-item-sub { padding-left: 22px; }
  .qe-lib-add-folder-btn { margin-top: 6px; width: 100%; }

  /* [FIX 2026-08-26] !important WAJIB di sini. Tanpa ini, tombol kalah
     cascade lawan rule global unconditional ".qe-lib-folder-drawer-btn
     { display:none }" di bagian bawah file (beda blok, sama-sama 1 class
     specificity → yang menang cuma soal urutan file). Akibatnya di mode
     "tanggung" (viewport lebar tapi ke-squeeze sidebar kiri+kanan
     aplikasi utama, jadi qe-feedcol container query ini yang nyala,
     BUKAN @media max-width:600px) sidebar Library sudah auto-hidden
     (drawer/off-canvas) tapi tombol buka-nya ikut ketutup display:none
     juga — user kejebak, gak ada jalan buka sidebar lagi. Pola fix yang
     sama (!important) sudah dipakai di 2 blok lain yg serupa persis
     (@media max-width:600px & @container qelib-toolbar), blok ini yang
     kelewatan. */
  .qe-lib-folder-drawer-btn {
    display: flex !important; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    border: 1px solid var(--border2); background: var(--bg3);
    color: var(--txt2); cursor: pointer; font-size: 15px;
    transition: all var(--dur-base); -webkit-tap-highlight-color: transparent;
  }
  .qe-lib-folder-drawer-btn:active { background: var(--bg5); }
  .qe-lib-folder-drawer-btn.active {
    background: rgba(0,0,0,.09); border-color:var(--border3); color: var(--txt);
  }

  .qe-lib-active-folder-pill {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 10px;
    border-bottom: 1px solid var(--border);
    background: transparent; flex-shrink: 0;
    min-height: 0;
  }
  .qe-lib-afp-icon { font-size: 13px; flex-shrink: 0; line-height: 1; }
  .qe-lib-afp-name {
    font-size: 11.5px; font-weight: 700; color: var(--txt2);
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qe-lib-afp-count {
    font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 99px;
    background:var(--tint-3b); color: var(--txt3);
    font-family: var(--font-mono); flex-shrink: 0;
  }

  /* Kolom tabel body (grid-template-columns dst) DIPINDAH ke bawah dekat
     blok "v5.17: Hapus kolom AKSI dari grid" (cari komentar "FIX BUG
     2026-08-01" di situ) — supaya menang cascade lawan rule kanonis
     `!important` yang letaknya lebih ke bawah di file ini (tie-breaker
     !important vs !important itu urutan sumber, BUKAN posisi @container).
     Bagian display:none folder/tags/date TETAP di sini krn nggak ada
     rule !important lain yang menyaingi posisi ini utk properti tsb. */
  .qe-finder-col-tags,
  .qe-finder-col-folder,
  .qe-finder-col-date { display: none !important; }

  .qe-lib-action-bar {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 4px; padding: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .qe-lib-action-bar::-webkit-scrollbar { display: none; }
  .qe-lib-action-bar > * { flex-shrink: 0; }
  .qe-lib-action-bar > span { flex-shrink: 1; min-width: 50px; }
}

@media (min-width: 601px) and (max-width: 768px) {
  .qe-lib-modal { max-width: 100%; height: 88vh; }
  .qe-lib-folder-sidebar { width: 180px; min-width: 160px; }
  /* grid-template-columns & sembunyikan Folder: lihat blok kanonis v5.17 */
}

@media (max-width: 1100px) { :root { --rp-w: 260px; --nav-w: 260px; } }
/* UI/UX FIX 2026-07-29: breakpoint drawer-mode sidebar KANAN disamakan
   persis dengan sidebar KIRI (768px — lihat @media(max-width:768px) di
   bawah utk .left-nav). Sebelumnya sidebar kanan masuk mode drawer
   (hilang dari layar) sejak 900px, padahal sidebar kiri baru masuk mode
   drawer di 768px — akibatnya di rentang 769–900px sidebar kanan sudah
   hilang duluan sementara sidebar kiri masih full-width, bikin layout
   kelihatan njomplang & lebar konten .feed-col ke-adjust nggak simetris
   saat resize. Sekarang kedua sidebar collapse bareng di breakpoint yg
   sama supaya penyesuaian lebar konten selalu simetris kiri-kanan.
   UI/UX FIX 2026-07-30: query ditambah `(max-height:500px) and
   (max-width:1024px)` — sama seperti fix di rule .feed-col margin-left
   di atas — supaya HP mode landscape (lebar >768px tapi tinggi cuma
   ~380-430px) ikut kena breakpoint drawer ini juga. */
@media (max-width: 768px), (max-height: 500px) and (max-width: 1024px) {
  .right-panel { display: block !important; transform: translateX(calc(100% + var(--sb-gap) + 24px)); }
  .feed-col { margin-right: 0; }
  .right-panel.drawer-open { transform: translateX(0) !important; z-index: 65; box-shadow: none; }
}

@media (max-width: 360px) {
  .topbar { padding: 0 8px; gap: 4px; }
  .topbar-brand-text { display: none; }
  .topbar-brand { gap: 0; }
  }

.nav-overlay,
.rp-drawer-overlay {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.25);
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease),
  visibility var(--dur-base) var(--ease);
  cursor: pointer;
}
.nav-overlay.show,
.rp-drawer-overlay.show { opacity: 1; visibility: visible; }

@media (max-width: 480px) {
  /* UI/UX FIX: aturan lebar drawer mobile dipindah & disatukan ke
     media query (max-width:768px) di bawah supaya konsisten di SELURUH
     rentang mode HP/drawer (bukan cuma <=480px) — lihat --nav-w & --rp-w
     override di dekat rule .left-nav mobile. */
  :root { --sb-gap: 10px; }
}

.rg-page {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--topbar-h));
  background: var(--bg);
}

@media (max-width: 900px) {
  .rg-grid { gap: 5px; }
}

.qe-finder-row-wrap { position: relative; display: flex; flex-direction: column; }
.qe-finder-row-wrap.expanded .qe-finder-row { background: rgba(0,0,0,.025); }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qe-fb-segment {
  color: var(--txt3); font-size: 10.5px; font-weight: 500;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1;
}

.qe-fb-tags { color: var(--txt3); font-size: 10.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
.qe-inline-preview-txt::-webkit-scrollbar { width: 3px; }
.qe-result-text { /* ← scroll konten panjang, tidak mendorong card melebar */
  /* Scrollbar tipis agar tidak mengganggu layout */
  font-family: var(--font-sans); font-size:13px; color:var(--txt);
  line-height:1.5; white-space:pre-wrap; word-break:break-word;
  background:var(--tint-1); padding:10px 12px; border-radius:var(--r12);
  border:1.5px solid var(--line-1); min-height:80px;
  flex:1; display:flex; flex-direction:column; align-items:stretch; position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  letter-spacing: 0;
  margin-top: 0;
  scrollbar-width: thin;
  scrollbar-color:var(--border3) transparent;
}

/* ██ PERF OPT: cr-* cinematic CSS extracted — lazy-injected on first generate. */

.ctr-export-box {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 20px; width: 100%; max-width: 560px;
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal); overflow: hidden;
  animation: pageIn .22s var(--ease);
}

.ctr-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg3);
}
.ctr-modal-icon-wrap {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--txt);
}
.ctr-modal-title { font-size: 14px; font-weight: 800; color: var(--txt); letter-spacing: -.2px; }
.ctr-modal-sub { font-size: 10.5px; color: var(--txt3); margin-top: 2px; }
.ctr-modal-close {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border2);
  background: transparent; color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: all var(--dur-fast); flex-shrink: 0;
}
.ctr-modal-close:hover { background: rgba(255,60,60,.12); border-color: rgba(255,60,60,.25); color: #ff6060; }

.ctr-export-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.ctr-export-body::-webkit-scrollbar { width: 3px; }
.ctr-export-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-export-section { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.ctr-export-section-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 10px;
}
.ctr-step-num {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background:var(--tint-4); border: 1px solid rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: var(--txt2); line-height: 1;
}
.ctr-select-all-btn {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--txt3);
  background: transparent; border: 1px solid var(--border2);
  padding: 2px 8px; border-radius: 5px; cursor: pointer; transition: all var(--dur-fast);
  letter-spacing: 0; text-transform: none;
}
.ctr-select-all-btn:hover { background: rgba(0,0,0,.05); color: var(--txt2); border-color: var(--border3); }

.ctr-folder-list { display: flex; flex-direction: column; gap: 5px; max-height: 160px; overflow-y: auto; }
.ctr-folder-list::-webkit-scrollbar { width: 3px; }
.ctr-folder-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-folder-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: 8px; background: rgba(0,0,0,.02); border: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ctr-folder-row:hover { background: rgba(0,0,0,.05); border-color: var(--border2); }
.ctr-folder-row.checked { background:var(--tint-3b); border-color: rgba(0,0,0,.16); }
.ctr-folder-check {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: var(--txt); transition: all var(--dur-fast);
}
.ctr-folder-row.checked .ctr-folder-check { background: rgba(0,0,0,.80); border-color: rgba(0,0,0,.90); color: var(--bg2); }
.ctr-export-summary {
  margin-top: 8px; font-size: 11.5px; color: var(--txt3); line-height: 1.5;
  padding: 7px 10px; background: rgba(0,0,0,.02); border: 1px solid var(--border);
  border-radius: 7px;
}

.ctr-author-row { display: flex; gap: 10px; }
@media (max-width: 480px) { .ctr-author-row { flex-direction: column; } }
.ctr-field-group { display: flex; flex-direction: column; gap: 4px; }
.ctr-field-label { font-size: 10px; font-weight: 700; color: var(--txt3); letter-spacing: .3px; }
.ctr-field-input {
  padding: 8px 11px; border-radius: var(--r8); border: 1px solid var(--border2);
  background:var(--tint-2); color: var(--txt); font-size: 12.5px;
  font-family: inherit; outline: none; transition: border-color var(--dur-base), background var(--dur-base); width: 100%;
}
.ctr-field-input:focus { border-color: var(--border3); background:var(--tint-3); }
.ctr-field-input::placeholder { color: var(--txt3); }
.ctr-field-input--error {
  border-color: var(--danger) !important;
  background: rgba(217,48,37,.04) !important;
  animation: ctr-field-shake .32s cubic-bezier(.36,.07,.19,.97);
}
.ctr-field-input--error:focus { border-color: var(--danger) !important; background: rgba(217,48,37,.06) !important; }
@keyframes ctr-field-shake {
  0%,100% { transform: translateX(0); }
  18%      { transform: translateX(-5px); }
  36%      { transform: translateX(5px); }
  54%      { transform: translateX(-4px); }
  72%      { transform: translateX(4px); }
  90%      { transform: translateX(-2px); }
}
.ctr-author-error-msg {
  display: none;
  align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--danger);
  margin-top: 5px;
  animation: ctr-err-fadein .18s var(--ease);
}
.ctr-author-error-msg.show { display: flex; }
@keyframes ctr-err-fadein { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.ctr-author-note {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 8px;
  font-size: 11px; color: var(--txt3); line-height: 1.55;
  padding: 8px 11px; background:var(--tint-2);
  border: 1px solid rgba(0,0,0,.09); border-radius: 7px;
}

/* ---- Menu Export: tombol info (ⓘ) untuk keterangan panjang ----
   Sama polanya dengan .pm-item-info-ic di halaman Pro Mode: keterangan
   (.ctr-author-note) disembunyikan secara default lewat pembungkus
   .ctr-note-collapse, baru ditampilkan di TEMPAT YANG SAMA saat tombol
   ini diklik. Style & ukuran teks .ctr-author-note tetap tidak diubah
   sama sekali — cuma visibility-nya yang dikontrol. */
.ctr-note-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border2); background: transparent; color: var(--txt3);
  cursor: pointer; padding: 0; margin: 0; transition: all var(--dur-fast);
}
.ctr-note-toggle-btn svg { width: 11px; height: 11px; pointer-events: none; display: block; }
.ctr-note-toggle-btn:hover { background: rgba(0,0,0,.05); color: var(--txt2); border-color: var(--border3); }
.ctr-note-toggle-btn[aria-expanded="true"] { color: var(--txt); border-color: var(--border3); background: rgba(0,0,0,.06); }
.ctr-note-toggle-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
html.dark .ctr-note-toggle-btn:hover { background: rgba(255,255,255,.07); }
html.dark .ctr-note-toggle-btn[aria-expanded="true"] { background: rgba(255,255,255,.09); }

.ctr-note-collapse {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.ctr-note-collapse.open { max-height: 260px; opacity: 1; }

.ctr-toggle-label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-left: auto; }
.ctr-toggle-label input[type="checkbox"] { display: none; }
.ctr-toggle-pill {
  width: 32px; height: 18px; border-radius: 9px; flex-shrink: 0;
  background:var(--tint-5); border: 1px solid rgba(0,0,0,.16);
  position: relative; cursor: pointer; transition: all var(--dur-base);
}
.ctr-toggle-pill::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0,0,0,.55); transition: all var(--dur-base);
}

.ctr-toggle-label input:checked ~ .ctr-toggle-pill { background: rgba(0,0,0,.25); border-color: rgba(0,0,0,.35); }
.ctr-toggle-label input:checked ~ .ctr-toggle-pill::after { left: 16px; background: var(--bg2); }

.ctr-export-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ctr-mode-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border2); background:var(--tint-1);
  cursor: pointer; transition: all var(--dur-base); user-select: none;
}
.ctr-mode-card input[type="radio"] { display: none; }
.ctr-mode-card:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-mode-card.active { border-color: rgba(0,0,0,.35); background:var(--tint-3b); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.ctr-mode-card-head { display: flex; align-items: center; gap: 7px; }
.ctr-mode-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ctr-mode-title { font-size: 12px; font-weight: 800; color: var(--txt2); letter-spacing: .2px; }
.ctr-mode-card.active .ctr-mode-title { color: var(--txt); }
.ctr-mode-desc { font-size: 10px; color: var(--txt3); line-height: 1.45; }

.ctr-mode-card[data-mode="baca"] { border-color: var(--border2); }
.ctr-mode-card[data-mode="baca"]:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-mode-card[data-mode="baca"].active {
  border-color: rgba(0,0,0,.35);
  background:var(--tint-3b);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.ctr-mode-card[data-mode="baca"] .ctr-mode-icon { filter: none; }

.ctr-format-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.ctr-fmt-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 9px; border-radius: 10px;
  border: 1.5px solid var(--border2); background:var(--tint-1);
  cursor: pointer; transition: all var(--dur-base); user-select: none; text-align: center;
}
.ctr-fmt-btn input[type="radio"] { display: none; }
.ctr-fmt-btn:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-fmt-btn.active { border-color: rgba(0,0,0,.40); background:var(--tint-4); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.ctr-fmt-icon { font-size: 13px; font-weight: 900; color: var(--txt2); font-family: var(--font-mono); line-height: 1; }
.ctr-fmt-btn.active .ctr-fmt-icon { color: var(--txt); }
.ctr-fmt-name { font-size: 10.5px; font-weight: 800; color: var(--txt2); letter-spacing: .3px; }
.ctr-fmt-btn.active .ctr-fmt-name { color: var(--txt); }
.ctr-fmt-desc { font-size: 9.5px; color: var(--txt3); line-height: 1.45; margin-top: 1px; }

.ctr-json-ext-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ctr-json-ext-label { font-size: 10px; font-weight: 700; color: var(--txt3); letter-spacing: .3px; white-space: nowrap; }
.ctr-ext-chip {
  padding: 3px 9px; border-radius: var(--r99); font-size: 10px; font-weight: 800;
  border: 1.5px solid var(--border2); background: transparent; color: var(--txt3);
  cursor: pointer; transition: all var(--dur-fast); font-family: var(--font-mono);
}
.ctr-ext-chip:hover { border-color: var(--border3); color: var(--txt2); background:var(--tint-2); }
.ctr-ext-chip.active { border-color: rgba(0,0,0,.30); color: var(--txt); background:var(--tint-3b); }
.ctr-ext-chip:disabled { cursor: default; opacity: .9; }

.ctr-fmt-btn[data-fmt="docx"] { border-color: var(--border2); }
.ctr-fmt-btn[data-fmt="docx"]:hover { border-color: var(--border3); background: rgba(0,0,0,.05); }
.ctr-fmt-btn[data-fmt="docx"].active {
  border-color: rgba(0,0,0,.40);
  background:var(--tint-4);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.ctr-fmt-btn[data-fmt="docx"] .ctr-fmt-icon { color: var(--txt2); font-family: var(--font-sans); font-size: 14px; }
.ctr-fmt-btn[data-fmt="docx"].active .ctr-fmt-icon { color: var(--txt); }
.ctr-fmt-btn[data-fmt="docx"] .ctr-fmt-name { color: var(--txt2); }
.ctr-fmt-btn[data-fmt="docx"].active .ctr-fmt-name { color: var(--txt); }

.ctr-fmt-btn[data-fmt="txt"].active { border-color: rgba(180,180,180,.55); background: rgba(180,180,180,.09); }

#ctr-export-pwd-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ctr-modal-foot {
  display: flex; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--border); flex-shrink: 0;
  background: rgba(0,0,0,.015);
}
.ctr-export-btn {
  flex: 1.6; padding: 10px; border-radius: 10px; border: none;
  background: var(--txt); color: var(--bg); font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all var(--dur-base) var(--spring);
}
.ctr-export-btn:hover { transform: translateY(-1px); opacity: .88; }

.ctr-preview-stats { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ctr-preview-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 14px; border-radius: 10px;
  background:var(--tint-2); border: 1px solid var(--border2);
  flex: 1; min-width: 70px; text-align: center;
}
.ctr-preview-stat-num { font-size: 20px; font-weight: 900; color: var(--txt); font-family: var(--font-mono); line-height: 1; }
.ctr-preview-stat-lbl { font-size: 9.5px; color: var(--txt3); margin-top: 4px; font-weight: 600; letter-spacing: .3px; }

.ctr-preview-folder-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; margin-bottom: 4px; }
.ctr-preview-folder-list::-webkit-scrollbar { width: 3px; }
.ctr-preview-folder-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

.ctr-preview-folder-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  background:var(--tint-1); border: 1px solid var(--border);
  font-size: 12px;
}

.ctr-preview-folder-row--check { cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); user-select: none; }
.ctr-preview-folder-row--check:hover { background: rgba(0,0,0,.05) !important; border-color: var(--border2) !important; }
.ctr-preview-folder-row--check .ctr-folder-check {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--border2); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: var(--bg); transition: all var(--dur-fast);
}
.ctr-preview-folder-row--check.checked .ctr-folder-check { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.ctr-preview-folder-row--check:not(.checked) { opacity: .5; }

.hv-icon-btn { transition: background var(--dur-fast), color var(--dur-fast); }
.hv-icon-btn:hover { background: var(--bg3) !important; color: var(--txt) !important; }

.hv-subtle { transition: background var(--dur-fast), color var(--dur-fast); }
.hv-subtle:hover { background: #F5F5F5 !important; }
.hv-subtle-txt:hover { background: #F5F5F5 !important; color: var(--txt2) !important; }

.hv-ghost { transition: background var(--dur-fast); }
.hv-ghost:hover { background: var(--bg3) !important; }

.hv-danger { transition: background var(--dur-fast); }
.hv-danger:hover { background: var(--danger-bg) !important; }

.hv-dim { transition: background var(--dur-fast); }
.hv-dim:hover { background: rgba(0,0,0,.11) !important; }

.hv-xs { transition: background var(--dur-fast); }
.hv-xs:hover { background:var(--tint-2) !important; }
.hv-xs-md:hover { background:var(--tint-3) !important; }
.hv-xs-sm:hover { background:var(--tint-1) !important; }

.hv-card { transition: border-color var(--dur-fast), background var(--dur-fast); }
.hv-card:hover { border-color:var(--line-2b) !important; background: var(--bg4) !important; }
.hv-card-dashed { transition: background var(--dur-fast), border-color var(--dur-fast); }
.hv-card-dashed:hover { background:var(--tint-1) !important; border-color:var(--line-3) !important; }

.hv-fade { transition: opacity var(--dur-fast); }
.hv-fade:hover { opacity: .85 !important; }
.hv-fade-sm:hover { opacity: .82 !important; }

.hv-lift { transition: opacity var(--dur-base), transform var(--dur-base); }
.hv-lift:hover { opacity: .85 !important; transform: translateY(-1px) !important; }

.hv-close-danger { transition: color var(--dur-fast); }
.hv-close-danger:hover { color: rgba(200,50,50,.8) !important; }

.hv-bg4-txt2 { transition: background var(--dur-fast), color var(--dur-fast); }
.hv-bg4-txt2:hover { background: var(--bg4) !important; color: var(--txt2) !important; }
/* Fix: inline onmouseenter/onmouseleave → CSS class-based (mobile-safe) */
.hv-ghost-dim:hover { background:var(--tint-3) !important; }
.hv-import-replace { background: rgba(0,100,200,.06); }
.hv-import-replace:hover { background: rgba(0,100,200,.12) !important; }
.hv-import-skip:hover { background: rgba(0,0,0,.05) !important; }
.hv-ai-reset { color: var(--txt3); border-color: var(--border2); transition: color var(--dur-base), border-color var(--dur-base); }
.hv-ai-reset:hover { color: var(--danger) !important; border-color: var(--danger) !important; }
.hv-ai-remove { color: var(--txt3); transition: color var(--dur-fast); }
.hv-ai-remove:hover { color: var(--danger) !important; }
/* ── Toggle pin per baris di modal "Kelola Daftar AI" — konsep sama
   dgn checklist "Pill Shortcut" BYOK (.byok-pill-check), tapi bentuknya
   ikon-only supaya muat di baris list yg sudah padat (nama+url+hapus). ── */
.hv-ai-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; padding: 0;
  border-radius: 6px; border: 1.5px solid var(--border2); background: transparent;
  color: var(--txt3); cursor: pointer; transition: all var(--dur-base);
}
.hv-ai-pin:hover { border-color: var(--border3); color: var(--txt); }
.hv-ai-pin.pinned { background: var(--tint-3); border-color: var(--line-3); color: var(--txt); }
html.dark .hv-ai-pin.pinned { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: var(--txt); }
.hv-recycle-bin-empty { background: rgba(217,48,37,.05); transition: background var(--dur-fast); }
.hv-recycle-bin-empty:hover { background: rgba(217,48,37,.12) !important; }
.hv-recycle-row { background: var(--bg3); transition: background var(--dur-base); }
.hv-recycle-row:hover { background: var(--bg4) !important; }
.hv-recycle-restore { background: var(--bg2); transition: all var(--dur-base); }
.hv-recycle-restore:hover { background: var(--bg4) !important; }
.hv-recycle-delete { background: transparent; transition: all var(--dur-base); }
.hv-recycle-delete:hover { background: rgba(217,48,37,.08) !important; }
.hv-close-x { background: transparent; transition: background var(--dur-fast); }
.hv-close-x:hover { background:var(--tint-3) !important; }
.hv-pe-cancel { background: transparent; transition: background var(--dur-fast); }
.hv-pe-cancel:hover { background: rgba(0,0,0,.05) !important; }
.hv-pe-save { background: transparent; transition: all var(--dur-fast); }
.hv-pe-save:hover { background: rgba(0,0,0,.05) !important; }
.hv-pe-done { background: var(--txt); transition: background var(--dur-fast); }
.hv-pe-done:hover { background: var(--txt2) !important; }
.hv-reset-cancel { background: var(--bg4); transition: background var(--dur-base); }
.hv-reset-cancel:hover { background: var(--bg5) !important; }
.hv-reset-confirm { background: #D93025; transition: all var(--dur-base); }
.hv-reset-confirm:hover { background: #B71C1C !important; }
.hv-export-row { background: var(--bg3); transition: background var(--dur-fast); }
.hv-export-row:hover { background: var(--bg4) !important; }
.hv-abd-cancel { background: transparent; transition: background var(--dur-fast); }
.hv-abd-cancel:hover { background: var(--bg3) !important; }
.hv-abd-delete { background: transparent; transition: background var(--dur-fast); }
.hv-abd-delete:hover { background: rgba(217,48,37,.05) !important; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .qe-cine-overlay { animation: none !important; opacity: 1 !important; }
  .qe-cine-bar-fill { animation: none !important; width: 100% !important; }
}

/* Quick Engine — card utama & result card */

.qe-card { background:var(--bg2);
  border:1px solid var(--border2) !important; border-radius:var(--r16); margin-bottom:10px; overflow:hidden;
  box-shadow: none !important; display:flex; flex-direction:column; }
.qe-card:focus-within {
  border-color:var(--border3) !important;
  box-shadow: none !important;
}


.qe-result-card { background:var(--bg2);
  border:1px solid var(--border2) !important; border-radius:var(--r16); overflow:hidden;
  box-shadow: none !important; display:flex; flex-direction:column; }
.qe-logo { width:44px; height:44px; border-radius:13px;
  background: var(--bg4) !important; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
  border: 1px solid var(--border2) !important;
  box-shadow: none !important; }
.qe-generate-btn:hover { transform:translateY(-1px);
  box-shadow: none !important; }

/* Quick Engine — Library panel */

.qe-lib-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r12); overflow: hidden; cursor: pointer;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
  display: flex; flex-direction: column;
  box-shadow: none !important;
}
.qe-lib-card:hover { border-color: var(--border3); transform: translateY(-1px);
  box-shadow: none !important; }
.topbar-logo-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.14) !important;
  transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base) var(--spring); flex-shrink: 0;
}
.topbar-brand:hover .topbar-logo-icon { transform: rotate(-5deg) scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; }
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px;
  border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500;
  color: var(--txt2) !important; transition: background .1s, color .1s, border-color .1s; margin-bottom: 1px;
  user-select: none; position: relative; letter-spacing: -.1px; min-height: 30px;
  border: 1px solid transparent; text-align: left !important;
}
.nav-item .ni-label {
  /* ══ UI/UX FIX 2026-07-26 (v3) ══ Tanpa ini, saat lebar sidebar lagi
     animasi menyempit/melebar, teks label yang panjang (mis. "Quick
     Engine") sempat ke-wrap jadi 2 baris untuk beberapa frame di
     tengah animasi — itu yang bikin tinggi baris nav-item ikut
     membesar sesaat, dan ikon (yang center-align vertikal) kelihatan
     "loncat" naik-turun padahal seharusnya diam total. Dikunci nowrap
     + clip biar teks selalu 1 baris, apapun lebar containernya di
     tengah animasi, jadi tinggi baris (dan posisi ikon) benar2 statis.
     Konsisten dengan proteksi yang sudah dipakai di #nav-lib-toggle-btn
     .ni-label (lihat baris di bawah). */
  flex: 1; font-weight: 500; font-size: 12px; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: clip; min-width: 0; text-align: left !important;
}
.nav-section-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color:var(--placeholder);
  padding: 10px 4px 4px; display: flex; align-items: center; gap: 7px; text-align: left !important;
}

/* ── SCROLL ISOLATION FIX: prevent sidebar/modal scroll from leaking to feed-col ── */

/* ── SCROLL ISOLATION FIX: prevent sidebar/modal scroll from leaking to feed-col ── */
.left-nav,
.right-panel,
.qe-lib-overlay,
.qe-save-tpl-overlay {
  isolation: isolate;
}
.right-panel *,
.qe-lib-overlay *,
.qe-save-tpl-overlay * {
  overscroll-behavior: contain;
}

/* ── TOUCH SCROLL FIX: sidebar inner content must capture vertical scroll ── */
/* Elemen dengan overflow:hidden di dalam sidebar memblok touch event — override */

.left-nav .nav-lib-items,
.left-nav .nav-lib-items > *,
.left-nav .nav-lib-folder,
.left-nav .nav-lib-tree-wrap,
.left-nav #nav-lib-folders,
.right-panel .rp-collapsible-body,
.right-panel .rp-collapsible-body *,
.right-panel .fw-card,
.right-panel .fw-body,
.right-panel .fw-inner,
.right-panel .fw-section,
.right-panel .funnel-card,
.right-panel .funnel-body,
.right-panel .funnel-inner {
  touch-action: pan-y;
}

/* Pastikan elemen button/clickable di sidebar tidak block pan-y */
.left-nav [onclick],
.left-nav a,
.left-nav .nav-item,
.left-nav .nav-lib-folder-head,
.left-nav .nav-lib-tpl-item,
.right-panel [onclick],
.right-panel a,
.right-panel *,
.right-panel .rp-collapsible-head,
.right-panel .rp-guide-item {
  touch-action: pan-y !important;
}

/* --- LOGIN SCREEN v3 (Editorial Dark/Light) DIHAPUS 2026-08-03 ---
   Gerbang login lama (dgn carousel) sudah diganti gerbang baru bergaya
   "Hub" (planet/starfield). Style barunya sekarang ada di file terpisah:
   css/login-gate.css — lihat file itu utk semua styling #ctr-login-screen. */

/* ══════════════════════════════════════════════════════════════════════
   GUEST QUICK ENGINE MODE — fullscreen, no sidebar/search, fitur terbatas
   Diaktifkan lewat: body.ctr-guest-mode (di-set oleh js/guest-engine.js)
════════════════════════════════════════════════════════════════════════ */
#ctr-guest-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99997;
  background: rgba(17,17,19,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 10px rgba(0,0,0,.12);
}
.ctr-guest-footer-inner {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  flex-wrap: wrap; max-width: 960px; margin: 0 auto;
}
.ctr-guest-footer-text { color: rgba(255,255,255,.6); font-weight: 500; font-size: 11.5px; }
.ctr-guest-footer-cta {
  color: #fff; background: rgba(255,255,255,.14); border-radius: 99px;
  padding: 4px 12px; text-decoration: none; font-weight: 700; font-size: 11.5px;
  white-space: nowrap; transition: background .15s ease;
}
.ctr-guest-footer-cta:hover { background: rgba(255,255,255,.24); }

body.ctr-guest-mode .topbar,
body.ctr-guest-mode .left-nav,
body.ctr-guest-mode .right-panel,
body.ctr-guest-mode .nav-overlay,
body.ctr-guest-mode .rp-drawer-overlay,
body.ctr-guest-mode #fullview-overlay,
body.ctr-guest-mode #tb-search-dropdown,
body.ctr-guest-mode #ctr-topbar-storage-banner,
body.ctr-guest-mode #peek-left-btn,
body.ctr-guest-mode #peek-right-btn,
body.ctr-guest-mode #qe-active-tpl-banner,
body.ctr-guest-mode .skip-to-content {
  display: none !important;
}
body.ctr-guest-mode .main-layout { padding-top: 0 !important; padding-bottom: 46px !important; }
body.ctr-guest-mode .feed-col { display: flex; justify-content: center; }
body.ctr-guest-mode .qe-page { max-width: 1080px; width: 100%; margin: 0 auto; }

/* Step 1 — hanya tampilan, tidak bisa diedit/klik */
body.ctr-guest-mode #qe-template.ctr-guest-locked-ta {
  cursor: default; background: var(--bg3); opacity: .92;
}
body.ctr-guest-mode #qe-step1-card .qe-unified-toolbar button,
body.ctr-guest-mode #qe-step1-card .qe-unified-toolbar .qe-tb-btn {
  cursor: not-allowed; opacity: .45;
}

/* Step 2 — hanya isi field + tombol Generate yang aktif */
body.ctr-guest-mode #qe-fast-mode-toggle,
body.ctr-guest-mode #qe-realtime-toggle,
body.ctr-guest-mode #qe-placeholder-toggle,
body.ctr-guest-mode .qe-row-reset-btn,
body.ctr-guest-mode #qe-mp-active-bar,
body.ctr-guest-mode #qe-mp-inactive-bar {
  cursor: not-allowed; opacity: .45;
}

/* Step 3 — hanya Copy + 4 shortcut AI yang aktif */
body.ctr-guest-mode #qe-regen-btn,
body.ctr-guest-mode #qe-edit-result-btn,
body.ctr-guest-mode #qe-export-result-btn,
body.ctr-guest-mode .qe-open-action-btn {
  cursor: not-allowed; opacity: .45;
}

/* --- Merged block 2: /* ── Wrapper: klik seluruh area (row + desc) ── */ --- */
    .ctr-gi-wrap {
      cursor: pointer;
      margin-bottom: 4px;
    }

    /* Card — selalu ada background, persis seperti funnel-card / fw-card */
    .ctr-gi-wrap:hover .ctr-gi { border-color:var(--border3); }
    /* Expanded — border tebal, persis funnel-card-open / fw-card-open */
    .ctr-gi-wrap:has(.ctr-gi-desc.open) .ctr-gi {
      border: 1.5px solid rgba(0,0,0,.28);
      border-radius: var(--r8) var(--r8) 0 0;
      border-bottom: 0.5px solid rgba(0,0,0,.10);
      background: #F5F5F5;
    }
    .ctr-gi {
      display: flex; align-items: center; gap: 9px;
      padding: 8px 10px;
      border-radius: var(--r8);
      background: var(--bg2);
      border: 0.5px solid rgba(0,0,0,.09);
      transition: border-color var(--dur-base), background var(--dur-base);
      overflow: hidden; cursor: inherit;
    }

    .ctr-gi-dot {
      width: 24px; height: 24px; border-radius: 6px;
      background: #F2F2F7;
      border: 0.5px solid rgba(0,0,0,.10);
      flex-shrink: 0; transition: all var(--dur-base);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 600; color: var(--txt3);
    }
    .ctr-gi-dot.done { background: #28C840; border-color: #28C840; color: white; }
    .ctr-gi-dot.done::after {
      content: ''; display: inline-block; width: 9px; height: 9px;
      background-color: #fff;
      -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
      -webkit-mask-size: contain; mask-size: contain;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: center; mask-position: center;
    }

    .ctr-gi-text { flex: 1; min-width: 0; }
    .ctr-gi-label { font-size: 12px; font-weight: 600; color: var(--txt); line-height: 1.3; letter-spacing: -.1px; }
    .ctr-gi-sub   { font-size: 9.5px; color: var(--txt3); margin-top: 1px; line-height: 1.35; }
    .ctr-gi-sub code {
      font-family: var(--font-mono); background: var(--bg5);
      padding: 0 3px; border-radius: 3px; font-size: 9px;
    }
    .ctr-gi-arrow { font-size: 8px; color: var(--ui-muted); flex-shrink: 0; }
    .ctr-gi-lock {
      font-size: 9px; flex-shrink: 0; opacity: .6;
      line-height: 1; display: inline-flex; align-items: center;
    }

    .ctr-gi-chev {
      font-size: 8px; color: var(--ui-muted); flex-shrink: 0;
      transition: transform .26s cubic-bezier(.4,0,.2,1); line-height: 1; display: inline-block;
    }
    .ctr-gi-chev.open { transform: rotate(180deg); }

    /* Body — persis seperti funnel-body / fw-body */
    .ctr-gi-desc {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity var(--dur-base) ease;
      background: #FAFAFA;
      border: 1.5px solid rgba(0,0,0,.28);
      border-top: 0.5px solid rgba(0,0,0,.07);
      border-radius: 0 0 var(--r8) var(--r8);
      margin-bottom: 8px;
    }
    .ctr-gi-desc.open { opacity: 1; overflow: visible; }
    .ctr-gi-desc-inner {
      font-size: 10.5px; color: var(--txt2); line-height: 1.55;
      padding: 10px 12px 12px;
    }
    .ctr-gi-desc-inner strong { font-weight: 600; color: var(--txt); }
    .ctr-gi-desc-inner code {
      font-family: var(--font-mono); background: var(--bg5);
      padding: 0 3px; border-radius: 3px; font-size: 9.5px;
    }
    .ctr-gi-desc-inner em { font-style: italic; color: var(--txt3); }

      .aff2-card {
        border-radius: 20px;
        border: 1px solid rgba(0,0,0,.09);
        background: var(--bg2);
        overflow: hidden;
        position: relative;
      }

      .aff2-card::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: var(--border3);
        z-index: 1;
      }

      .aff2-inner { padding: 24px 20px 20px; position: relative; z-index: 1; }

      .aff2-eyebrow {
        display: inline-flex; align-items: center; gap: 6px;
        font-family: var(--font-mono);
        font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
        color: var(--txt3); margin-bottom: 12px;
      }
      .aff2-live-dot {
        width: 5px; height: 5px; border-radius: 50%;
        background: var(--txt3); flex-shrink: 0;
        animation: posBlinkDot 2s ease-in-out infinite;
      }

      .aff2-headline {
        font-family: var(--font-sans);
        font-size: clamp(22px, 5.5vw, 28px);
        font-weight: 900; line-height: 1.15; letter-spacing: -.8px;
        color: var(--txt); margin-bottom: 16px;
      }
      .aff2-headline .aff2-green {
        color: var(--txt);
        font-style: italic;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        text-decoration-color: rgba(0,0,0,.22);
      }

      .aff2-stats {
        display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
      }
      .aff2-stat {
        display: flex; align-items: center; gap: 7px;
        background: var(--bg4); border: 1px solid var(--border2);
        border-radius: 10px; padding: 8px 12px;
        flex: 1; min-width: 0;
        transition: border-color var(--dur-base);
      }
      .aff2-stat:hover { border-color: var(--border3); }
      .aff2-stat-val {
        font-family: var(--font-mono);
        font-size: 15px; font-weight: 900; color: var(--txt);
        line-height: 1; letter-spacing: -.5px; white-space: nowrap;
      }
      .aff2-stat-val.green { color: var(--txt); }
      .aff2-stat-label {
        font-size: 10px; font-weight: 600; color: var(--txt3);
        line-height: 1.3;
      }

      .aff2-flow {
        display: flex; align-items: center; gap: 4px;
        margin-bottom: 18px; flex-wrap: nowrap; overflow: hidden;
      }
      .aff2-flow-step {
        display: flex; align-items: center; gap: 6px;
        background: var(--bg3); border: 1px solid var(--border);
        border-radius: 99px; padding: 6px 11px;
        flex: 1; min-width: 0; white-space: nowrap;
        overflow: hidden;
      }
      .aff2-flow-num {
        font-family: var(--font-mono);
        font-size: 8.5px; font-weight: 800; color: var(--txt3);
        flex-shrink: 0;
      }
      .aff2-flow-label {
        font-size: 10px; font-weight: 700; color: var(--txt2);
        overflow: hidden; text-overflow: ellipsis;
      }
      .aff2-flow-arrow {
        font-size: 10px; color: var(--txt3); opacity: .4; flex-shrink: 0;
      }

      .aff2-via {
        display: inline-flex; align-items: center; gap: 6px;
        margin-bottom: 18px;
        font-size: 10.5px; font-weight: 600; color: var(--txt3);
      }
      .aff2-via-pill {
        display: inline-flex; align-items: center; gap: 5px;
        background: var(--bg4); border: 1px solid var(--border2);
        border-radius: 99px; padding: 3px 10px 3px 7px;
        font-size: 10.5px; font-weight: 700; color: var(--txt2);
      }
      .aff2-via-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--txt3); flex-shrink: 0;
      }

      .aff2-cta {
        display: flex; align-items: center; justify-content: center; gap: 0;
        width: 100%;
        padding: 12px 18px;
        background: var(--txt); color: var(--bg);
        border: none; border-radius: var(--r12);
        font-size: 13.5px; font-weight: 900; cursor: pointer;
        transition: all var(--dur-base) var(--spring); font-family: inherit;
        letter-spacing: -.1px; text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
      }
      .aff2-cta:hover { transform: translateY(-1px); box-shadow: none; }
      .aff2-cta:active { transform: scale(.98); }
      .aff2-cta-sub { font-size: 9px; font-weight: 500; opacity: .55; display: block; margin-top: 2px; }

#page-license {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--topbar-h));
}
.lic-page {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  animation: pageIn var(--dur-base) var(--ease);
}
.lic-inner {
  /* UI/UX FIX: top padding disamain jadi 24px (dulu 28px) supaya sejajar
     persis sama .page/.qe-page/.bb-page/.pm-page yang semuanya 24px. */
  padding: 24px 24px 60px;
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
}

.lic-header {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 4px;
}
.lic-header-icon {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.07), rgba(0,0,0,.03)); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; color: var(--txt); font-size: 20px;
}
/* [BUG FIX] Kotak ikon header di 3 menu saudaranya (Brackets = .bb-header-icon,
   Pro Mode = .pm-header-icon, Updates = .fyc-header-icon — lihat komentar
   "HEADER CARD — konsisten di semua menu" di css/fyc.css) semuanya punya
   varian gradient KHUSUS dark mode (lebih terang, rgba(255,255,255,...))
   supaya tetap kontras di atas background gelap. .lic-header-icon kelewatan
   tidak ikut disamakan — tanpa ini, di dark mode kotak ikon License tetap
   pakai gradient versi light (rgba(0,0,0,...)) yang nyaris tak kelihatan
   di atas --bg2 gelap, beda sendiri dari 3 menu lain. */
html.dark .lic-header-icon { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); }
.lic-header-title {
  font-size: 17px; font-weight: 800; color: var(--txt);
  letter-spacing: -.4px; line-height: 1.2; margin-bottom: 4px;
}
.lic-header-sub {
  font-size: 11.5px; color: var(--txt3); font-weight: 500;
}

.lic-intro-block {
  padding: 18px 24px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 14px;
  font-size: 13px; color: var(--txt2); line-height: 1.75;
}
.lic-intro-block strong { color: var(--txt); font-weight: 700; }

.lic-group {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 16px; overflow: hidden;
}
.lic-group-label {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 20px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.lic-label-green { color: var(--txt3); }
.lic-label-red   { color: var(--txt3); }
.lic-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.lic-dot-green { background: var(--txt3); }
.lic-dot-red   { background: var(--txt3); }

.lic-list {
  display: flex; flex-direction: column;
}
.lic-item {
  display: flex; align-items: baseline; gap: 13px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--txt2); line-height: 1.65;
  transition: background var(--dur-fast);
}
.lic-item:last-child { border-bottom: none; }
.lic-item:hover { background: var(--bg3); }
.lic-item strong { color: var(--txt); font-weight: 600; }
.lic-item em { font-style: italic; }

.lic-item-check {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.lic-check-green {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--txt2);
}
.lic-check-red {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--txt2);
}

.lic-warn-block {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 22px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 14px;
}
.lic-warn-badge {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt2);
  font-size: 15px;
}
.lic-warn-title {
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--txt); margin-bottom: 6px;
}
.lic-warn-body {
  font-size: 12.5px; color: var(--txt2); line-height: 1.7;
}
.lic-warn-body strong { color: var(--txt); font-weight: 700; }

.lic-footer-note {
  padding: 16px 4px 0;
  font-size: 11px; color: var(--txt3); text-align: center; line-height: 1.7;
}
.lic-footer-strong {
  display: block; margin-top: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--txt3);
}
.lic-header-owner {
  font-size: 11px; font-weight: 500; color: var(--txt3);
  margin-top: 5px; letter-spacing: .1px;
}
.lic-header-owner strong { color: var(--txt2); font-weight: 700; }

/* [FEATURE] Halaman "Hubungi Kami" (page-contact, index.html) — baris
   kontak/sosial-media/kanal resmi. Dedicated class (prefix .ctc-), sengaja
   TIDAK pakai .lic-check-green/.lic-label-green/.lic-dot-green supaya
   nol warna hijau/aksen — full monokrom mengikuti token tema yang sama
   persis dengan sisa app (var(--bg3), var(--border), var(--txt/2/3)). */
.ctc-group-label {
  padding: 13px 20px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--txt3);
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.ctc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast);
  /* [FIX] Baris "WhatsApp" sekarang bisa jadi <button> (buka modal kontak
     dulu, bukan langsung <a href> ke wa.me) selain <a> (Email/social/dll
     yang tetap link langsung) — reset default styling <button> supaya
     hasilnya identik dgn <a class="ctc-row">. */
  width: 100%; text-align: left; background: transparent; border: none;
  border-bottom: 1px solid var(--border);
  font: inherit; cursor: pointer; box-sizing: border-box;
}
.ctc-row:last-child { border-bottom: none; }
.ctc-row:hover { background: var(--bg3); }
.ctc-row-icon {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--txt2);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.ctc-row:hover .ctc-row-icon { background: var(--bg4); border-color: var(--border3); color: var(--txt); }
.ctc-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ctc-row-title {
  font-size: 13.5px; font-weight: 700; color: var(--txt); letter-spacing: -.1px;
}
.ctc-row-value {
  font-size: 11.5px; color: var(--txt3); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctc-row-arrow {
  flex-shrink: 0; display: flex; color: var(--txt3); opacity: .55;
  transition: opacity var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
}
.ctc-row:hover .ctc-row-arrow { opacity: 1; color: var(--txt2); transform: translateX(2px); }

@media (max-width: 600px) {
  .ctc-group-label { padding: 12px 16px; }
  .ctc-row { padding: 12px 16px; gap: 12px; }
  .ctc-row-icon { width: 32px; height: 32px; border-radius: 9px; }
  .ctc-row-value { white-space: normal; }
}


@media (max-width: 600px) {
  /* UI/UX FIX: horizontal disamain pakai var(--sb-gap), dulu hardcode 14px */
  /* UI/UX FIX: top padding pakai var(--nav-v-gap) (24px) — sebelumnya
     16px, bikin kotak konten lebih mepet ke atas dibanding sidebar
     drawer yang top-nya pakai --nav-v-gap juga. Sekarang sejajar. */
  .lic-inner { padding: var(--nav-v-gap) var(--sb-gap) 60px; }
  .lic-header { padding: 14px 14px; gap: 10px; }
  .lic-header-icon { width: 34px; height: 34px; }
  .lic-header-title { font-size: 14px; }
  .lic-intro-block { padding: 16px 18px; }
  .lic-item { padding: 13px 16px; }
  .lic-group-label { padding: 12px 16px; }
  .lic-warn-block { padding: 16px 16px; }
}

.qe-conflict-btn {
  width:100%; padding:10px 14px; border-radius:10px;
  font-size:12px; font-weight:800; cursor:pointer;
  text-align:left; transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
  display: block;
}
.qe-conflict-btn--replace {
  border: 1.5px solid rgba(180,120,0,.22);
  background: rgba(255,160,40,.08);
  color: #8B5A00;
}
.qe-conflict-btn--replace:hover { background: rgba(255,160,40,.14); border-color: rgba(180,120,0,.38); }
.qe-conflict-btn--duplicate {
  border: 1.5px solid var(--border2);
  background:var(--tint-1);
  color: var(--txt2);
}
.qe-conflict-btn--duplicate:hover {
  background:var(--tint-3);
  border-color: var(--border3);
  color: var(--txt);
}
.qe-conflict-btn--skip {
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--txt3);
}
.qe-conflict-btn--skip:hover {
  color: var(--txt2);
  background:var(--tint-1);
  border-color: var(--border2);
}
/* --merge: dipakai qe-import-choice-modal (Gabung / Timpa / Batal) —
   aksi aman/non-destruktif jadi diberi warna accent biru, beda dari
   --replace (oranye, dipakai untuk pilihan Timpa yang destruktif). */
.qe-conflict-btn--merge {
  border: 1.5px solid color-mix(in srgb, var(--accent, #3B82F6) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #3B82F6) 9%, transparent);
  color: var(--accent, #3B82F6);
}
.qe-conflict-btn--merge:hover {
  background: color-mix(in srgb, var(--accent, #3B82F6) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent, #3B82F6) 50%, transparent);
}

:focus-visible {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

.ctr-conflict-btn { transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.ctr-conflict-btn:hover { opacity: .88; }

.qe-import-conflict-btn { transition: background var(--dur-base), border-color var(--dur-base); }

/* [FIX 2026-07-28] Notifikasi (qe-toast) dipindah dari pill mengambang di
   bawah layar, menjadi satu blok solid yang menyatu persis dengan TOP BAR
   (posisi & tinggi identik: top:0 + height:var(--topbar-h)). Saat notifikasi
   tampil, "topbar" berubah warna solid hitam (light theme) / putih (dark
   theme) dan menampilkan pesannya di sana. Teks panjang TIDAK pernah pindah
   baris — kalau kepanjangan, otomatis jadi running text (marquee). */
.qe-toast {
  position: fixed;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  transform: translateY(-100%);
  opacity: 1;
  transition: transform .38s cubic-bezier(.22,.68,.36,1);
  background: #050505;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.1px;
  padding: 0 20px;
  border-radius: 0;
  z-index: 9999998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.20);
  line-height: 1.3;
}
.qe-toast.show { transform: translateY(0); will-change: transform; }
/* [Tahap 7 — checkmark chrome UI via CSS mask, bukan emoji/karakter Unicode
   mentah] CSS `content` tidak bisa merender <svg> langsung, jadi dipakai
   teknik mask-image (bentuk sama persis dengan simbol sprite #ic-check),
   warnanya ikut `background-color` yang di-set per selector pemakainya.
   Variabel dipakai bareng di semua indikator "checked"/"done" di bawah,
   supaya data-URI-nya tidak diulang berkali-kali di file ini. */
:root {
  --qe-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --qe-bgi-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* [Tahap 1 — sistem SVG terpusat] Icon SVG pengganti emoji di toast/modal.
   Warna disesuaikan otomatis lewat tone class (ok/warn/err/neutral). */
.qe-svg-ico { flex: 0 0 auto; display: inline-block; vertical-align: -2px; }
.qe-svg-ico--ok    { color: #4ADE80; }
.qe-svg-ico--warn  { color: #FBBF24; }
.qe-svg-ico--err   { color: #FB7185; }
.qe-svg-ico--neutral { color: currentColor; opacity: .85; }
/* Teks kepanjangan → mode running text: rata kiri + animasi geser bolak-balik,
   supaya tidak pernah membungkus ke baris baru. */
.qe-toast.marquee { justify-content: flex-start; }
.qe-toast-inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  will-change: transform;
}
.qe-toast.marquee .qe-toast-inner {
  animation-name: qe-toast-marquee;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: var(--qe-toast-marquee-dur, 8s);
}
@keyframes qe-toast-marquee {
  0%, 8%   { transform: translateX(0); }
  46%, 54% { transform: translateX(var(--qe-toast-marquee-dist, 0px)); }
  92%, 100% { transform: translateX(0); }
}
/* [FIX 2026-07-28] .qe-toast sengaja pointer-events:none supaya toast biasa
   tidak menghalangi klik ke konten di baliknya — tapi itu ikut memblokir
   link interaktif di dalamnya (mis. tombol "Undo" pada toast Reset).
   Aktifkan lagi pointer-events khusus untuk elemen yang memang harus
   bisa diklik, tanpa mengubah perilaku toast lain yang tidak punya link. */
.qe-toast a { pointer-events: auto; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* [FIX 2026-08-26] Tombol close (X) untuk notifikasi/toast top bar.
   Sengaja POSITION:ABSOLUTE, bukan flex item di sebelah .qe-toast-inner —
   supaya keluar dari alur flex sama sekali dan TIDAK ikut mendorong/
   menggeser .qe-toast-inner yang harus tetap rata-tengah persis seperti
   sebelumnya (justify-content:center pada .qe-toast tidak disentuh sama
   sekali). Diposisikan nempel ke kanan blok toast, minimalis (cuma ikon X
   tipis, tanpa border/background solid, transparan sampai di-hover).
   .qe-toast sendiri pointer-events:none (biar tidak menghalangi klik ke
   konten di baliknya) jadi tombol ini butuh pointer-events:auto sendiri,
   sama seperti pola yang sudah dipakai utk link (.qe-toast a) di atas. */
.qe-toast-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  flex-shrink: 0;
  transition: opacity var(--dur-base), background var(--dur-base);
  -webkit-tap-highlight-color: transparent;
}
.qe-toast-close:hover { opacity: 1; background: rgba(255,255,255,.10); }
.qe-toast-close:active { background: rgba(255,255,255,.16); }
html.dark .qe-toast-close:hover { background: rgba(0,0,0,.08); }
html.dark .qe-toast-close:active { background: rgba(0,0,0,.14); }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.14) transparent;
}

.qe-generate-btn {
  width:100%; height:40px; padding:0 12px; background:var(--txt); color:var(--bg); border:1.5px solid transparent;
  border-radius:var(--r12); font-size:12.5px; font-weight:900; cursor:pointer;
  transition:all var(--dur-base) var(--spring);
  box-shadow: none !important;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; margin-bottom:4px;
  flex-shrink:0; position: relative; overflow: hidden;
}
.qe-generate-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}
.qe-generate-btn:not(:disabled):hover::after { transform: translateX(100%); transition: transform .5s ease; }

::selection { background: rgba(0,0,0,.12); color: var(--txt); }

.qe-fields-empty {
  display: flex;
  flex-direction: column;
  align-items: center; justify-content:center;
  padding: 28px 20px;
  color: var(--txt3);
  font-size: 12.5px;
  gap: 10px;
  text-align: center; flex:1; min-height:120px;
  line-height: 1.55;
  user-select: none; }
.qe-fields-empty > div:first-child { font-size: 28px; opacity: .22; }
.nav-item.active {
  background:#000;
  color: #fff;
  border: 1px solid #000; border-radius: 7px;
  font-weight: 600;
  position: relative;
  border-color:#000;
}
.nav-item.active::before { display: none; }

#qe-result-text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #2C2C2E;
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.qe-lib-grid:empty::after {
  content: '';
  display: block;
  height: 48px;
  background: linear-gradient(90deg, var(--bg3) 0%, var(--bg5) 50%, var(--bg3) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r8);
  margin: 8px;
}

.topbar-search input:focus {
  background:var(--tint-3b);
  border-color:var(--line-1);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}

.qe-lib-main:hover::-webkit-scrollbar-thumb { background: var(--border3); }

.qe-generate-btn:active:not(:disabled) { transform: scale(.98); }
.qe-copy-btn:active,
.eb2-cta-btn:active:active { transform: scale(.97); } /* kept for safety */

.qe-lib-empty-state {
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qe-lib-empty-icon svg { display: block; }
.qe-lib-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt2);
  letter-spacing: -.2px;
}
.qe-lib-empty-desc {
  font-size: 12px;
  color: var(--txt3);
  line-height: 1.6;
  max-width: 260px;
}

.page, .rg-page, .fw-page { animation: pageIn .24s cubic-bezier(.4,0,.2,1) !important; }

.qe-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--txt3);
  opacity: .7;
}
.qe-kbd {
  background: rgba(0,0,0,.05);
  border: 1px solid var(--border2);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 8.5px;
  line-height: 1.4;
}

body, .topbar, .qe-lib-modal {
  transition: background-color var(--dur-slow) ease, border-color var(--dur-slow) ease, color var(--dur-slow) ease;
}
/* ══ UI/UX FIX 2026-07-26 (v2) ══ Rule ini SEBELUMNYA menimpa ulang
   `transition` punya .left-nav (cuma transform + warna dark-mode), jadi
   nge-overwrite width/min-width yang sudah ditambahkan di rule utama
   .left-nav — akibatnya animasi rail-collapse tetap loncat instan
   walau sudah ditambahkan di atas. Sekarang digabung jadi satu daftar
   supaya tidak saling menimpa lagi. */

.left-nav {
  /* [REVISI 2026-08-09] +var(--sb-widen) supaya jarak sidebar->kartu tengah
     sama renggangnya dengan jarak tepi layar->sidebar (lihat komentar
     --sb-widen di base.css). Posisi kartu tengah (.feed-col margin-left)
     TIDAK ikut berubah — cuma sidebar ini yang melebar ke arah kartu. */
  /* UI/UX FIX: top & height pakai --nav-v-gap (24px), BUKAN --sb-gap (12px),
     supaya sudut rounded atas turun sejajar dgn kotak konten (.page,
     padding:24px) dan sudut rounded bawah naik sejajar juga — TANPA
     mengubah --sb-gap horizontal (kiri tetap 12px dari tepi, sidebar TIDAK
     nempel mepet ke kiri/atas/bawah viewport, tetap "melayang" seperti
     semula, cuma proporsinya disamakan dgn kotak konten di sebelahnya). */
  /* UI/UX FIX: hapus total efek shadow di sidebar kiri */
  /* ══ UI/UX FIX 2026-07-26: animasi buka/tutup rail kiri ══
     Dulu cuma "transform" yang di-transition, padahal mode rail-icon
     desktop (lihat blok @media min-width:769px di bawah) berubah lewat
     "width"/"min-width", bukan translate — jadi transform-nya diam di
     translateX(0) terus dan resize-nya kelihatan "loncat" instan tanpa
     animasi geser, beda sama sidebar kanan yang murni pakai translateX.
     Sekarang width/min-width ikut di-animasikan pakai durasi & easing
     yang sama, supaya kerasa geser-mulus persis seperti panel kanan. */
  width: calc(var(--nav-w) - (var(--sb-gap) * 2) + var(--sb-widen)); min-width: calc(var(--nav-w) - (var(--sb-gap) * 2) + var(--sb-widen));
  height: calc(100dvh - var(--topbar-h) - (var(--nav-v-gap) * 2));
  position: fixed; top: calc(var(--topbar-h) + var(--nav-v-gap)); left: var(--sb-gap);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: none;
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  z-index: 200; transition: transform var(--dur-base) var(--ease), width var(--dur-base) var(--ease), min-width var(--dur-base) var(--ease), background-color var(--dur-slow) ease, border-color var(--dur-slow) ease, color var(--dur-slow) ease;
  transform: translate3d(0,0,0);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

button:disabled, input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; user-select: none; }

html { color-scheme: light; }

#tb-darkmode-btn { position: relative; }
#tb-darkmode-btn svg { transition: transform .4s var(--spring), opacity var(--dur-slow); }
#tb-darkmode-btn .icon-sun { display: none; }

/* ── Move to Folder modal — visible in both themes ── */
.qe-move-modal-inner {
  border: 1.5px solid rgba(0,0,0,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.06);
}
.qe-lib-head-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.11);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.qe-lib-head-title { font-size: 13.5px; font-weight: 700; color: var(--txt); letter-spacing: -.2px; }
.qe-lib-head-sub { font-size: 10.5px; color: var(--txt3); margin-top: 2px; }

.qe-lib-manage-btn {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.13);
  background:var(--tint-3);
  color: var(--txt2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer; transition: all var(--dur-base); white-space: nowrap;
}
.qe-lib-manage-btn:hover { background:var(--tint-5) !important; border-color:var(--line-2b) !important; color: var(--txt) !important; }
.qe-lib-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.11); background: rgba(0,0,0,.05); color: var(--txt3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: all var(--dur-base); flex-shrink: 0;
}
.qe-lib-close:hover { background: rgba(255,59,48,.10) !important; border-color: rgba(255,59,48,.25) !important; color: #ff3b30 !important; }

.qe-lib-content-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.qe-lib-del-sel-btn {
  padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(0,0,0,.13); background: transparent; color: var(--txt2); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); white-space: nowrap; position: relative; line-height: 1.4;
}
.qe-lib-del-sel-btn:hover { background:var(--tint-3) !important; border-color:var(--line-2b) !important; color: var(--txt) !important; }
.qe-lib-del-sel-btn:active { background:var(--tint-5) !important; border-color: rgba(0,0,0,.26) !important; transform: scale(.97); }

.qe-lib-del-sel-btn.edit-mode-btn { border-color: rgba(0,0,0,.13); color: var(--txt2); background: transparent;
}
.qe-lib-del-sel-btn.edit-mode-btn:hover { background:var(--tint-3) !important; border-color:var(--line-2b) !important; color: var(--txt) !important;
}
.qe-lib-del-sel-btn.qe-lib-add-tpl-btn { background: var(--txt); color: var(--bg2); border-color: transparent; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.qe-lib-del-sel-btn.qe-lib-add-tpl-btn:hover { background: var(--txt2) !important; }
.qe-lib-del-sel-btn.qe-lib-add-tpl-btn:active { background: #000 !important; transform: scale(.97); }
.qe-lib-del-sel-btn.danger { color: #d92d20; border-color: rgba(217,45,32,.20); background: transparent; }
.qe-lib-del-sel-btn.danger:hover { background: rgba(217,45,32,.07) !important; border-color: rgba(217,45,32,.32) !important; }
.qe-lib-del-sel-btn.danger:active { background: rgba(217,45,32,.13) !important; transform: scale(.97); }

.nav-lib-subfolder-wrap { position: relative; }
.qe-lib-folder-item-sub {
  padding-left: 22px;
  font-size: 11px; font-weight: 500;
  position: relative; }
.qe-lib-folder-item-sub::before {
  content: '↳';
  position: absolute;
  left: 8px;
  opacity: .35;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.qe-lib-fi-ctx-item.subfolder-action { color: #3A7BD5; }
.qe-lib-fi-ctx-item.subfolder-action .qe-lib-fi-ctx-icon { color: #3A7BD5; }

.qe-subfolder-row { cursor: pointer; transition: background var(--dur-fast); }
.qe-subfolder-row:hover { background: var(--bg4); }

.qe-subfolder-divider {
  display: flex;
  align-items: center;
  padding: 7px 16px 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--txt3);
  opacity: .7;
  user-select: none;
  pointer-events: none;
}
.qe-subfolder-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 10px;
}

.qe-move-checkbox { border-color: rgba(0,0,0,.35); }
.qe-move-checkbox.checked { background: rgba(0,0,0,.82); border-color: rgba(0,0,0,.82); }
.qe-move-checkbox.checked::after {
  content: ''; display: inline-block; width: 8px; height: 8px;
  background-color: var(--bg2);
  -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.qe-move-row-selected > .qe-finder-row { background: rgba(0,0,0,.05); }
.qe-move-exec-btn {
  background: var(--txt);
  color: var(--bg2);
  border-color: transparent;
}
.qe-move-exec-btn:disabled { opacity: .4; }
.qe-move-mode-btn { color: rgba(0,0,0,.65); border-color:var(--line-2b); }
.qe-move-mode-btn:hover {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.30);
  color: rgba(0,0,0,.85);
}
.qe-lib-move-item-dest { transition: background var(--dur-fast); }

.qe-breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.qe-breadcrumb-back {
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--txt2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast);
  flex-shrink: 0;
  line-height: 1;
  touch-action: manipulation;
}
.qe-breadcrumb-back:hover {
  background: var(--bg4);
  border-color: var(--border3);
  color: var(--txt);
}
.qe-breadcrumb-path {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  min-width: 0;
}
.qe-breadcrumb-crumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.qe-breadcrumb-link {
  /* reset gaya bawaan <button> supaya tampilannya tetap sama seperti <span> sebelumnya */
  color: var(--txt2);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast);
  padding: 2px 4px;
  border-radius: 4px;
  border: none;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.qe-breadcrumb-link:hover { color: var(--txt); background: var(--bg5); }
.qe-breadcrumb-chevron {
  color: var(--txt3);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0 1px;
}
.qe-breadcrumb-active { color: var(--txt); font-weight: 700; }

.qe-lib-body { flex: 1; overflow-y: auto; padding: 0; min-height: 0; overscroll-behavior: contain; position: relative; -webkit-overflow-scrolling: touch; background: var(--bg); cursor: default; }
.qe-lib-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.11); border-radius: 99px; }
/* BUG FIX (light mode only): area list template sebelumnya pakai var(--bg)
   (#EBEBED — abu-abu kentara), jauh lebih gelap dibanding sidebar kiri-atas
   yang cuma tint hitam 1.5% di atas putih (~#FCFCFC) & header/tagbar-row
   yang putih murni. Bedanya kelihatan jelas jadi "blok" terpisah. Diganti
   putih murni supaya menyatu. TIDAK menyentuh dark mode — html.dark tetap
   pakai var(--bg) gelap seperti semula (lihat theme.css). */
html:not(.dark) .qe-lib-body { background: #FFFFFF !important; }

/* BUG FIX LANJUTAN (light mode only): fix di atas ternyata belum cukup —
   .qe-finder-header, .qe-finder-row (baris tabel yang BENERAN kelihatan
   di layar, isinya nama/folder/ukuran/tanggal), .qe-finder-row:nth-child
   (even), baris expanded, sampai .qe-lib-content-wrap (pembungkus paling
   luar area sidebar+list) SEMUANYA masih define ulang "background:
   var(--bg)" (abu-abu #EBEBED) setelah fix .qe-lib-body di atas — jadi
   biarpun wadahnya sudah putih, baris-barisnya sendiri tetap abu-abu dan
   menimpa balik. Ini penyebab utama area list Template Library kelihatan
   "abu-abu jelek" dan tidak senada dengan sidebar utama (.left-nav) yang
   solid var(--bg2)/putih. Disamakan jadi putih murni di sini. TIDAK
   menyentuh dark mode sama sekali — semua override dark sudah punya jalur
   sendiri dengan !important + spesifisitas lebih tinggi (html.dark ...)
   di css/theme.css, jadi tetap aman & tidak berubah. */
html:not(.dark) .qe-lib-content-wrap,
html:not(.dark) .qe-finder-header,
html:not(.dark) .qe-finder-row,
html:not(.dark) .qe-finder-row:nth-child(even),
html:not(.dark) .qe-finder-row-wrap.expanded > .qe-finder-row,
html:not(.dark) .qe-finder-breadcrumb-row {
  background: #FFFFFF !important;
}
/* Sidebar folder di dalam Library tetap tint tipis (~1.5% hitam di atas
   putih, senada dgn komentar di atas) — bukan blok putih solid, supaya
   masih ada pemisah visual halus dari area list, tapi tetap "keputihan"
   bukan abu-abu. Tidak diubah, sudah benar sejak awal. */

.qe-finder-row {
  min-height: 32px;
  border-bottom: 1px solid rgba(0,0,0,.055);
  transition: background .1s;
  position: relative;
  background: var(--bg);
}
.qe-finder-row:nth-child(even) { background: var(--bg); }
.qe-finder-row:hover { background: #F7F7F9 !important; }
.qe-finder-row:last-child { border-bottom: none; }
.qe-finder-row-selected { background: var(--bg4); }

.qe-finder-row-wrap:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.06) !important; }
.qe-finder-row-wrap .qe-finder-row { transition: background var(--dur-base) cubic-bezier(.4,0,.2,1); border-bottom: none; }
.qe-finder-row-wrap.expanded > .qe-finder-row {
  background: var(--bg3) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}

.qe-finder-breadcrumb-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: nowrap;
  padding: 5px 10px 5px 40px;
  background: var(--bg);
  border-top: 1px solid rgba(0,0,0,.07);
  font-size: 10.5px;
  color: var(--txt3);
  animation: fadeInDown .15s ease;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.qe-fb-name { color: var(--txt2); font-weight: 600; }
.qe-fb-tags, .qe-fb-segment { color: var(--txt3); }
.qe-fb-sep { color: var(--ui-muted); opacity: 1; font-size: 10px; flex-shrink: 0; }
.qe-fb-meta { margin-left: auto; font-size: 9.5px; color: #AEAEB2; font-family: var(--font-mono); opacity: 1; }
.qe-fb-actions {
  margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.qe-fb-icon-btn {
  width: 26px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.13);
  background: var(--bg2);
  color: #6E6E73;
  font-size: 11px;
  cursor: pointer; transition: color var(--dur-fast), opacity var(--dur-fast); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px;
  line-height: 1;
  opacity: 1;
  min-width: 24px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  white-space: nowrap;
}
.qe-fb-icon-btn:hover { background: var(--bg2) !important; border: none; color: var(--txt) !important; opacity: 1; border-color: rgba(0,0,0,.24) !important; }
.qe-fb-icon-btn.primary {
  background: var(--txt); border: none;
  color: var(--bg2);
  opacity: 1;
  border-color: transparent;
  padding: 0 10px;
  font-size: 11px; font-weight: 700; }
.qe-fb-icon-btn.primary:hover { background: var(--txt2) !important; color: var(--txt); opacity: 1; }

.qe-finder-inline-preview {
  border-top: 1px solid rgba(0,0,0,.07);
  background: var(--bg2);
  animation: fadeInDown .15s ease;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.qe-inline-preview-txt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--txt2);
  line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  padding: 10px 16px 8px; margin: 0; max-height: 200px; overflow-y: auto;
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.06);
  letter-spacing: -.01em;
}
.qe-inline-preview-txt::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 99px; }

.qe-inline-preview-footer {
  padding: 7px 12px 8px;
  display: flex;
  gap: 6px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  align-items: center;
  position: relative;
  z-index: 2 !important;
}

.qe-ipreview-pakai-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--txt);
  color: var(--bg2);
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-base) var(--spring) !important;
  letter-spacing: -.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.qe-ipreview-pakai-btn:hover { background: var(--txt2) !important; transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba(0,0,0,.18) !important; }
.qe-ipreview-pakai-btn:active { transform: scale(.97) !important; }

.qe-ipreview-close-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.16);
  color: #6E6E73;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.qe-ipreview-close-btn:hover { background: var(--bg) !important; border-color: rgba(0,0,0,.26) !important; color: var(--txt2) !important; }
.qe-ipreview-close-btn:active { transform: scale(.97) !important; }

.qe-ipreview-copy-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.16);
  color: #6E6E73;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: auto;
}
.qe-ipreview-copy-btn:hover { background: var(--bg) !important; border-color: rgba(0,0,0,.26) !important; color: var(--txt2) !important; }
.qe-ipreview-copy-btn:active { transform: scale(.97) !important; }

.qe-finder-inline-preview div[style*="border-top"] { border-top-color: rgba(0,0,0,.06); }
.qe-finder-icon-box { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; background: var(--bg4); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1;
}
.qe-finder-name { font-size: 12.5px; font-weight: 600; color: var(--txt);
  overflow: clip; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; letter-spacing: -.1px;
}
.qe-finder-tag-plain { font-size: 10.5px; font-weight: 500; color: var(--txt3);
  white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: clip; text-overflow: ellipsis;
}
.qe-finder-folder-pill { font-size: 10px; font-weight: 500; color: #6E6E73; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.qe-finder-date-line { font-size: 9.5px; color: var(--txt3); white-space: nowrap;
  overflow: clip; text-overflow: ellipsis; line-height: 1.4;
  font-family: var(--font-mono);
}
.qe-finder-date-line.muted { font-size: 9px; color: var(--ui-muted); opacity: 1; }

.qe-finder-fav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ui-muted); flex-shrink: 0; }

.qe-finder-more-btn {
  width: 22px; height: 22px; border-radius: 5px; border: 1px solid transparent; background: transparent; color: #AEAEB2; font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast); letter-spacing: 1px; flex-shrink: 0;
  line-height: 1; padding-bottom: 2px; border-color: transparent;
}
.qe-finder-row:hover .qe-finder-more-btn { color: #6E6E73 !important; }
.qe-finder-more-btn:hover { background:var(--tint-3b) !important; border-color: rgba(0,0,0,.11) !important; color: var(--txt) !important; }

.qe-finder-btn {
  width: 20px; height: 20px; border-radius: 4px; border: 1px solid transparent;
  background: transparent; color: transparent; font-size: 10px;
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.qe-finder-row:hover .qe-finder-btn { color: #AEAEB2 !important; }
.qe-finder-btn:hover { background:var(--tint-3) !important; border-color:var(--line-1) !important; color: var(--txt) !important; }
.qe-finder-btn.primary { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.11); color: var(--txt2); }
.qe-finder-btn.primary:hover { background:var(--tint-5) !important; border-color:var(--border3) !important; color: var(--txt) !important; }
.qe-finder-btn.del:hover { background: rgba(255,59,48,.08) !important; border-color: rgba(255,59,48,.18) !important; color: #ff3b30 !important; }

.qe-finder-ctx-menu {
  position: fixed; z-index: 99999; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 4px;
  min-width: 170px;
  box-shadow: 0 6px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05) !important;
  opacity: 0; transform: scale(.95) translateY(-4px);
  pointer-events: none; transition: opacity var(--dur-base), transform var(--dur-base);
  transform-origin: top right;
}
.qe-finder-ctx-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--txt2);
  transition: background .1s, color .1s; user-select: none;
}
.qe-finder-ctx-item:hover { background: var(--bg4) !important; color: var(--txt) !important; }
.qe-finder-ctx-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; opacity: 1; }
.qe-finder-ctx-divider { height: 1px; background: var(--border); margin: 3px 4px; }
.qe-finder-ctx-item.danger:hover { background: rgba(217,45,32,.07) !important; color: #ff7070; }

.qe-finder-checkbox, .qe-finder-select-all { border-color:var(--line-2b); }
.qe-finder-checkbox.checked, .qe-finder-select-all.all-checked { background: var(--txt); border-color: var(--txt); }
.qe-finder-checkbox.checked::after, .qe-finder-select-all.all-checked::after { color: var(--bg2); }

.qe-lib-preview-pop {
  position: fixed; z-index: 800; background: rgba(255,255,255,.99); border:1px solid var(--border);
  border-radius: var(--r12); padding: 0;
  width: min(360px, calc(100vw - 32px)); max-height: 65vh; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05) !important;
  opacity: 0; transform: translateY(4px);
  pointer-events: none; transition: opacity var(--dur-base), transform var(--dur-base);
  display: flex; flex-direction: column;
}
.qe-lib-preview-pop-head {
  font-size: 10px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--txt3); background: var(--bg3); padding: 10px 14px 10px 16px; border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

.qe-lib-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; color: var(--ui-muted); font-size: 12px; gap: 8px; text-align: center;
  grid-column: 1 / -1;
}
.qe-lib-empty-icon {
  font-size: 40px; opacity: .2;
  color: var(--txt3);
  margin-bottom: 4px; }

.peek-btn { transition: transform var(--dur-base) var(--spring), background var(--dur-base) ease !important; }
.peek-btn:hover { transform: scale(1.05) !important; }
.peek-btn:active { transform: scale(.95) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
  animation-duration: .01ms;
  animation-iteration-count: 1;
  transition-duration: .01ms;
  }
  .qe-toast { transition: transform var(--dur-base) ease !important; border-radius: 0 !important; }
  .qe-toast.marquee .qe-toast-inner { animation: none !important; }
  .qe-toast.marquee { justify-content: flex-start !important; text-overflow: ellipsis !important; overflow: hidden !important; }
}


@media (max-width: 600px) {

}

/* --- Merged block 8: /* ── Profile Edit Modal v31 — minimalist flat redesign ── * --- */
.pe-field-label {
  font-size:9.5px; font-weight:700; color:var(--txt3);
  text-transform:uppercase; letter-spacing:.55px; margin-bottom:5px; display:block;
}
.pe-input {
  width:100%; padding:9px 12px; border-radius:var(--r8);
  border:1.5px solid var(--border2);
  background:var(--bg3);
  color:var(--txt); font-size:13px; font-family:inherit;
  outline:none; transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
.pe-input:focus {
  border-color:rgba(0,0,0,.32);
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
  background:var(--bg2);
}
.pe-input::placeholder { color:var(--ui-muted); }
.pe-input-icon-wrap { position:relative; }
.pe-input-icon-wrap .pe-icon {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:12px; opacity:.38; pointer-events:none; font-weight:700;
  font-family:var(--font-mono);
}
.pe-input-icon-wrap .pe-input { padding-left:26px; }
/* Divider between sections */
.pe-divider {
  height:1px; background:var(--tint-3b); margin:4px 0;
}
/* ── [ADMIN CONTACT] Form Nama+Subjek+Pesan di modal #ctr-contact-modal-overlay
   (menu Contact post-login) — subjek dropdown & textarea, gaya konsisten dgn
   .pe-input/.pe-field-label yang sudah ada (bukan reuse token login-gate). ── */
.ctc-modal-subject-wrap { position: relative; }
.ctc-modal-subject-row { display: flex; align-items: center; position: relative; }
.ctc-modal-subject-row .pe-input { padding-right: 34px; }
.ctc-modal-subject-btn {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px; border: none;
  background: var(--bg4); color: var(--txt3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 10px; transition: background .15s, color .15s; flex-shrink: 0;
}
.ctc-modal-subject-btn:hover { background: var(--bg5); color: var(--txt); }
.ctc-modal-subject-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 200px; overflow-y: auto;
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--r8); box-shadow: 0 12px 32px rgba(0,0,0,.16);
  display: none;
}
.ctc-modal-subject-list.open { display: block; animation: gtcDdIn .15s ease; }
.ctc-modal-subject-item {
  padding: 9px 12px; font-size: 12px; font-weight: 550; color: var(--txt2); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.ctc-modal-subject-item:last-child { border-bottom: none; }
.ctc-modal-subject-item:hover { background: var(--bg3); color: var(--txt); }
.ctc-modal-subject-icon { font-size: 13px; flex-shrink: 0; }
.ctc-modal-textarea {
  width: 100%; min-height: 72px; max-height: 130px; resize: none;
  padding: 9px 12px; border-radius: var(--r8);
  border: 1.5px solid var(--border2);
  background: var(--bg3); color: var(--txt);
  font-size: 13px; font-family: inherit; line-height: 1.5;
  outline: none; box-sizing: border-box;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.ctc-modal-textarea::placeholder { color: var(--ui-muted); }
.ctc-modal-textarea:focus {
  border-color: rgba(0,0,0,.32); box-shadow: 0 0 0 3px rgba(0,0,0,.06); background: var(--bg2);
}
@keyframes gtcDdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Bypass toggle row */
.pe-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-radius:var(--r8);
  background:var(--bg3); border:1.5px solid rgba(0,0,0,.09);
  cursor:pointer; transition:border-color var(--dur-base);
  gap:12px;
}
.pe-toggle-row:hover { border-color:var(--border3); }
.pe-toggle-row-info { flex:1; min-width:0; }
.pe-toggle-row-title { font-size:12.5px; font-weight:700; color:var(--txt); line-height:1.3; }
.pe-toggle-row-sub { font-size:10.5px; color:var(--txt3); margin-top:2px; line-height:1.4; }
/* iOS-style toggle switch */
.pe-switch {
  width:40px; height:22px; border-radius:99px;
  background:rgba(0,0,0,.18); position:relative;
  transition:background var(--dur-base) var(--ease); flex-shrink:0;
  border:none; cursor:pointer; padding:0; outline:none;
}
.pe-switch.on { background:#FF3B30; }
.pe-switch-knob {
  width:18px; height:18px; border-radius:50%;
  background:#fff; position:absolute; top:2px; left:2px;
  transition:left var(--dur-base) var(--spring);
  box-shadow:0 1px 4px rgba(0,0,0,.20);
}
.pe-switch.on .pe-switch-knob { left:20px; }
/* Warning note for bypass ON */
.pe-bypass-warn {
  display:none;
  padding:9px 12px; border-radius:8px;
  background:rgba(255,59,48,.07); border:1px solid rgba(255,59,48,.22);
  font-size:11px; color:#c0392b; font-weight:500; line-height:1.5;
}
.pe-bypass-warn.show { display:block; }

.macos-titlebar {
  display: flex;
  align-items: center;
  padding: 12px 16px 11px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  user-select: none;
}
.macos-traffic-lights {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  z-index: 2;
}
.macos-btn {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  padding: 0;
}
.macos-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 900;
  color: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.1s;
  line-height: 12px;
  text-align: center;
}
.macos-traffic-lights:hover .macos-btn::after { opacity: 1; }
.macos-btn-close { background: #ff5f57; }
.macos-btn-close::after { content: 'x'; }
.macos-btn-min   { background: #C8C8CA; }
.macos-btn-min::after   { content: ''; }
.macos-btn-min:hover   { background: #C8C8CA; }

/* [FIX] Tombol hijau (maximize) dimatikan fungsinya — tombolnya tetap ada
   biar susunan 3 dot khas macOS gak berubah, tapi diabuin & non-klik sama
   persis kayak tombol kuning (.macos-btn-min) di sampingnya. Cuma tombol
   merah (close) yang masih aktif & berfungsi. */
.macos-btn-max   { background: #C8C8CA; }
.macos-btn-max::after   { content: ''; }
.macos-btn-close:hover { background: #e0443c; }
.macos-btn-max:hover   { background: #C8C8CA; }
.macos-window-title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt2);
  letter-spacing: -0.15px;
  pointer-events: none;
  white-space: nowrap;
}
.macos-titlebar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  z-index: 2;
}
.macos-tbtn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--txt3);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}
.macos-tbtn:hover { background: var(--bg4); border-color: var(--border3); color: var(--txt2); box-shadow: none; }
.macos-tbtn.filled { background: var(--txt); color: var(--bg); border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.28); }
.macos-tbtn.filled:hover { opacity: .88; }

#qe-lib-overlay .qe-lib-head { display: none !important; }

.qe-lib-folder-sidebar {
  /* UI/UX FIX: sebelumnya 6px 6px 10px — kelewat mepet ke tepi/side bar
     dibanding jarak yang dipakai menu lain (mis. .nav-section 8px +
     .nav-item 9px di sidebar kiri). Dinaikkan jadi 10px kiri-kanan supaya
     konsisten & tidak terasa "kepotong" oleh tepi panel. */
  width: 210px !important;
  min-width: 210px !important;
  flex-shrink: 0 !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  padding: 10px 10px 14px !important; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  background: rgba(243,243,245,0.97) !important;   max-width: 210px !important;
  transition: none !important;
}

.macos-nav-section {
  padding: 11px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.38);
  pointer-events: none;
  user-select: none;
}
.qe-lib-folder-item:hover {
  background: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.9) !important;
  transform: none !important; }
.qe-lib-folder-item.active {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
  transform: none !important; }
.qe-lib-folder-item.active:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

.qe-lib-folder-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important; cursor: pointer;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,0.75) !important;
  transition: background 0.08s !important;
  position: relative !important;
  border: 1px solid transparent !important;
  touch-action: pan-y; user-select: none;
  -webkit-user-select: none; min-height: 28px !important;
  transform: none !important;
  padding-right: 32px !important;
}
.qe-lib-fi-count {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 99px !important;
  background:var(--tint-3b) !important;
  color: var(--txt3) !important;
  font-family: var(--font-mono) !important;
  min-width: 18px !important;
  text-align: center !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  transition: opacity var(--dur-base) !important;
  pointer-events: none !important;
  margin-right: 0 !important;
}
.qe-lib-folder-item.active .qe-lib-fi-count {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important; }

.qe-lib-fi-more {
  display: flex !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(0,0,0,0.45) !important;
  font-size: 13px !important; font-weight: 900;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: opacity var(--dur-base), background 0.1s !important;
  line-height: 1 !important;
  padding: 0 !important;
  letter-spacing: 0px !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

@media (hover: hover) {
  .qe-lib-folder-item:hover .qe-lib-fi-count {
    opacity: 0 !important;
  }
  .qe-lib-folder-item:hover .qe-lib-fi-more {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (hover: none) {
  .qe-lib-fi-count {
    opacity: 0 !important;
  }
  .qe-lib-fi-more {
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 28px !important;
    height: 28px !important;
    right: 4px !important;
  }
}
.qe-lib-fi-more.open { display: flex;
  background:var(--tint-4) !important;
  color: rgba(0,0,0,0.72) !important;
  opacity: 1 !important;
  pointer-events: auto !important; }

.qe-lib-fi-more.open ~ .qe-lib-fi-count,
.qe-lib-folder-item:has(.qe-lib-fi-more.open) .qe-lib-fi-count {
  opacity: 0 !important;
}
.qe-lib-fi-more:hover {
  background: rgba(0,0,0,0.1) !important;
  color: rgba(0,0,0,0.72) !important; }

.qe-lib-fi-ren,
.qe-lib-fi-del {
  visibility: hidden !important;
  display: flex !important;
}
.qe-lib-folder-item:hover .qe-lib-fi-ren,
.qe-lib-folder-item:hover .qe-lib-fi-del { visibility: visible !important; }

.qe-lib-folder-separator {
  height: 1px !important;
  background: rgba(0,0,0,0.08) !important;
  margin: 5px 5px !important;
  flex-shrink: 0 !important; }
.qe-lib-add-folder-btn {
  margin-top: 8px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  border: 1px dashed rgba(0,0,0,0.16) !important;
  background: transparent !important;
  color: rgba(0,0,0,0.42) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
  text-align: left !important;
  width: 100% !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.qe-lib-add-folder-btn:hover {
  border-color: rgba(0,0,0,0.18) !important;
  color: var(--txt2) !important;
  background: rgba(0,0,0,0.06) !important; }
.qe-lib-action-bar button {
  transition: background var(--dur-fast), opacity var(--dur-fast) !important;
  transform: none !important;
}
.qe-lib-action-bar button:hover {
  transform: none !important;
}

.qe-finder-ctx-menu,
.qe-lib-fi-ctx,
#qe-lib-folder-ctx { /* missing semicolon — Firefox/Safari border fix */
  background: rgba(249,249,251,0.97) !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
  padding: 4px !important;
  min-width: 178px !important;
}
.qe-finder-ctx-item,
.qe-lib-fi-ctx-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,0.85) !important;
  cursor: pointer !important;
  transition: background 0.08s !important;
  transform: none !important;
}
.qe-finder-ctx-item:hover,
.qe-lib-fi-ctx-item:hover {
  background: rgba(0,0,0,0.08) !important;
  color: rgba(0,0,0,0.9) !important;
  transform: none !important;
}
.qe-finder-ctx-item.danger { color: #d93025 !important; }
.qe-finder-ctx-item.danger:hover,
.qe-lib-fi-ctx-item.danger:hover { background: rgba(215,45,35,0.88) !important; color: #fff !important; }
.qe-lib-bc-sep {
  width: 1px !important;
  height: 13px !important;
  background: rgba(0,0,0,0.14) !important;
  flex-shrink: 0 !important; }
.qe-lib-bc-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1C1C1E !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.1px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.qe-lib-bc-count {
  font-size: 10px; font-weight: 600; color: var(--txt3);
  background:var(--tint-3); border-radius: 5px; padding: 1px 6px;
  font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0;
  display: none !important;
}

.qe-lib-folder-drawer-btn { display: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important; }

.qe-lib-action-bar .qe-ab-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.52) !important;
  height: 28px !important;
  width: 30px !important;
  padding: 0 !important;
  font-size: 13px !important;
  border-radius: 7px !important;
}
.qe-lib-action-bar .qe-ab-btn:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important;
  box-shadow: none !important;
}
.qe-lib-action-bar .qe-ab-btn:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.95) !important;
}

.qe-lib-action-bar .qe-ab-btn--primary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--txt3) !important;
  box-shadow: none !important;
  width: auto !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.qe-lib-action-bar .qe-ab-btn--primary:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: var(--txt) !important;
}
.qe-lib-action-bar .qe-ab-btn--primary:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.97) !important;
  box-shadow: none !important;
}
.qe-lib-ab-sep {
  width: 1px !important;
  height: 14px !important;
  background: rgba(0,0,0,0.12) !important;
  flex-shrink: 0 !important;
  margin: 0 4px !important; }

.qe-lib-ab-icon-btn {
  width: 30px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(0,0,0,0.52) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
  font-family: inherit !important;
}
.qe-lib-ab-icon-btn:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important; }
.qe-lib-ab-icon-btn:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.95) !important; }
.qe-lib-ab-icon-btn.danger { color: #D93025 !important; }
.qe-lib-ab-icon-btn.danger:hover { background: rgba(217,48,37,0.09) !important; border-color: rgba(217,48,37,0.14) !important; }
.qe-lib-ab-overflow-trigger:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important;
}
.qe-lib-ab-inline-group { display: contents !important; }

/* ════════════════════════════════════════════════════════════════════
   FIX: Search bar Template Library dulu punya lebar TETAP (flex-shrink:0,
   150-260px) yang tidak pernah mengecil — begitu window/panel di sekitar
   Library menyempit (mis. sidebar kiri+kanan sama-sama terbuka di
   desktop), breadcrumb + search box sama-sama "ngotot" pakai lebar
   penuhnya, action-bar di tengah kehabisan ruang, dan search box
   akhirnya terdorong sampai terpotong oleh tepi modal (radius/overflow
   Library) — persis seperti bug "Cari..." yang kepotong.

   Solusi: search box SEKARANG collapse jadi ikon kaca pembesar saja
   secara default di SEMUA ukuran layar (bukan cuma mobile seperti
   sebelumnya), baru melebar penuh saat ikonnya diklik — tombol toggle
   & tombol ✕ ini sudah otomatis di-inject oleh js/ui-fixes.js
   (_initSearchToggle), sebelumnya cuma displaystyle-nya yang dipaksa
   none di atas 600px lewat rule "@media(min-width:601px)" (sudah
   dihapus, lihat di bawah). ════════════════════════════════════════ */
.qe-lib-bar.search-open .qe-lib-search-icon {
  left: 9px !important;
  display: flex !important;
  align-items: center !important;
}
.qe-lib-bar.search-open .qe-lib-search {
  padding-left: 28px !important;
  padding-right: 30px !important;
  border-color: rgba(0,122,255,0.38) !important;
  background: var(--bg2) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.10) !important;
}
/* Beri jalan ekstra: sembunyikan breadcrumb + action bar sementara saat
   search sedang terbuka, supaya search box benar-benar dapat ruang
   penuh alih-alih berebut dengan elemen lain di kondisi sempit. */
.qe-lib-bar.search-open .qe-lib-breadcrumb,
.qe-lib-bar.search-open .qe-lib-action-bar {
  flex: 0 0 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding-right: 0 !important;
}

/* 🔍 Tombol ikon kaca pembesar (di-inject via JS) — tampil di semua
   ukuran layar sebagai pengganti search box terbuka lebar. */
#qe-lib-search-toggle-btn:hover { background: rgba(0,0,0,0.07) !important; color: rgba(0,0,0,0.80) !important; }
#qe-lib-search-toggle-btn:active { background: rgba(0,0,0,0.13) !important; transform: scale(.92) !important; }
.qe-lib-bar.search-open #qe-lib-search-toggle-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* ✕ Tombol tutup pencarian, muncul di dalam search box saat terbuka */
#qe-lib-search-clear-btn {
  display: none !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0,0,0,0.11) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 9.5px !important;
  color: rgba(0,0,0,0.50) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}
.qe-lib-bar.search-open #qe-lib-search-clear-btn {
  display: inline-flex !important;
}

.qe-lib-tagbar-row {
  display: flex; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.07) !important; flex-shrink: 0; background: var(--bg2) !important; min-height: 34px; overflow: hidden;
  position: relative;
}

.qe-lib-storage-bar {
  flex-shrink: 0; border-top: 1px solid rgba(0,0,0,0.08) !important;
  padding: 9px 18px 10px;
  display: flex; align-items: center; gap: 10px; background: var(--bg2) !important;
}

.qe-lib-status-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px; gap: 8px; border-top: 1px solid rgba(0,0,0,0.06) !important; background: var(--bg2) !important; font-size: 11px !important; color: var(--txt3);
  font-family: var(--font-mono);
}
.qe-finder-ctx-divider,
.qe-lib-fi-ctx-sep { height: 1px !important; background: rgba(0,0,0,0.09) !important; margin: 3px 0 !important; padding: 0 !important; display: none !important; }

.qe-finder-ctx-item.danger,
.qe-lib-fi-ctx-item.danger { margin-top: 2px !important; }

#qe-lib-folder-ctx,
#qe-finder-ctx {
  background: rgba(249,249,251,0.97) !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 4px !important;
  min-width: 175px !important;
}

#qe-lib-overlay .macos-btn-min { display: inline-flex !important; }
#qe-lib-overlay #mac-btn-min   { display: inline-flex !important; }
#qe-lib-overlay .qe-lib-modal.mac-minimized > *:not(.macos-titlebar) { display: none !important; }
#qe-lib-overlay .qe-lib-modal.mac-minimized { max-height: 44px !important; }
#qe-lib-overlay.mac-maximized { padding: 0 !important; }

@media (max-width: 600px) {
  .macos-titlebar { padding: 10px 12px; }
  .macos-window-title { font-size: 12px; }
  .qe-lib-folder-drawer-btn { display: flex !important; }
}
.qe-lib-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px !important;
  border-radius: 99px !important; flex-shrink: 0 !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  background: transparent !important;
  color: #6E6E73 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important; white-space: nowrap !important; user-select: none; letter-spacing: .1px; scroll-snap-align: start;
  transform: none !important;
}
.qe-lib-tag-chip:hover {
  color: #1C1C1E !important;
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.22) !important;
  transform: none !important; }
.qe-lib-tag-chip.active {
  color: #fff !important;
  background: #1C1C1E !important;
  border-color: #1C1C1E !important;
  transform: none !important; }
.qe-lib-tag-chip .qe-lib-tag-count {
  color: #AEAEB2 !important;
  opacity: 1 !important; }
.qe-lib-tag-chip.active .qe-lib-tag-count {
  opacity: 1 !important;
  color: rgba(255,255,255,0.48) !important; }
.qe-lib-search:focus {
  border-color: var(--border3) !important;
  outline: none !important;
  background: var(--bg2) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.06) !important; }
.qe-lib-search::placeholder { color: #AEAEB2 !important; }
.qe-lib-search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; color: #AEAEB2 !important; pointer-events: none; line-height: 1; }

@media (max-width: 600px) {
  .qe-lib-active-folder-pill { display: none !important; }
  .qe-lib-bc-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
    display: block !important;
  }
  .qe-lib-breadcrumb {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
  }
}

.qe-lib-overlay .qe-finder-row,
.qe-lib-overlay .qe-finder-row-wrap,
.qe-lib-overlay .nav-lib-folder,
.qe-lib-overlay .qe-lib-folder-item,
.qe-lib-overlay .qe-lib-nav-item,
.qe-lib-overlay .qe-lib-tag-chip,
.qe-lib-overlay [onclick],
.qe-lib-overlay .qe-lib-ab-icon-btn,
.qe-lib-overlay .qe-ab-btn,
.qe-lib-overlay .qe-finder-btn,
.qe-lib-overlay .macos-btn,
.qe-lib-overlay button {
  cursor: pointer;
}

.qe-finder-header {
  height: 28px !important;
  border-bottom: 1.5px solid var(--border) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--txt3) !important;
  background: var(--bg3) !important;
  position: sticky; top: 0; z-index: 5;
  user-select: none;
}
.qe-finder-header .qe-finder-col-actions {
  color: #6E6E73 !important;
}

.qe-lib-actions-dd {
  position: fixed; z-index: 9997;
  background: rgba(250,250,252,0.98) !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  min-width: 200px;
  opacity: 0; pointer-events: none;
  transform: scale(.94) translateY(-6px);
  transform-origin: top right;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--spring);
}
.qe-lib-actions-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px !important;
  border-radius: 6px !important; cursor: pointer;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1C1C1E !important;
  transition: background 0.10s !important; user-select: none;
  transform: none !important;
}
.qe-lib-actions-dd-item:hover {
  background: rgba(0,0,0,0.07) !important;
  color: #1C1C1E !important;
  transform: none !important; }
.qe-lib-actions-dd-item.danger { color: #D93025 !important; }
.qe-lib-actions-dd-item.danger:hover {
  background: rgba(217,48,37,0.08) !important;
  color: #D93025 !important; }
.qe-lib-actions-dd-item--active { font-weight: 700 !important; color: var(--txt) !important; }

.qe-lib-ab-overflow-trigger {
  display: none !important;   background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.52) !important;
  height: 28px !important;
  width: 30px !important;
  padding: 0 !important;
  font-size: 14px !important;
}
@media (max-width: 680px) {
  .qe-lib-ab-overflow-trigger {
    display: inline-flex !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: rgba(0,0,0,0.52) !important;
    height: 28px !important;
    width: 30px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }
  .qe-lib-ab-overflow-trigger:hover {
    background: rgba(0,0,0,0.07) !important;
    border-color: rgba(0,0,0,0.10) !important;
    color: rgba(0,0,0,0.80) !important;
  }
}
.qe-lib-search {
  width: 100%;
  padding: 6px 10px 6px 28px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 8px !important;
  color: var(--txt) !important;
  font-size: 12.5px !important;
  transition: border-color var(--dur-base), box-shadow var(--dur-base) !important; font-family: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  padding-left: 30px !important;
}

.qe-lib-ab-overflow-trigger > span,
#qe-lib-actions-trigger > span {
  display: none !important;
}

/* [FIX 2026-08-22] Icon tombol "opsi lainnya" dikembalikan ke bentuk ASLI
   (grid titik 2×3 / 6 titik) sesuai permintaan — TAPI didefinisikan SATU
   KALI SAJA di sini dengan ukuran yang jelas kebaca (bukan kecil seperti
   sebelumnya), supaya otomatis konsisten di SEMUA kondisi tombol ini
   tampil: mode HP (@media max-width:680px) maupun "mode tanggung desktop"
   (@container qelib-toolbar max-width:680px, saat sidebar kiri/kanan
   mempersempit modal walau viewport browser masih lebar). Sebelumnya ada
   icon 3-titik-ellipsis di sini (light mode default) TAPI dark mode masih
   pakai rule grid-6-titik peninggalan lama di css/theme.css (ukuran kecil,
   viewBox 17×13) yang tidak pernah diupdate — dua rule berbeda inilah
   penyebab bentuk & ukuran ikonnya kelihatan BEDA antara mode HP (ikutin
   rule di sini) vs mode tanggung desktop (ikutin rule lama di theme.css).
   Sekarang rule lama di theme.css SUDAH DIHAPUS (lihat catatan di sana)
   supaya cuma ada SATU sumber kebenaran untuk icon ini. */
.qe-lib-ab-overflow-trigger::before,
#qe-lib-actions-trigger::before {
  content: '';
  display: block;
  width: 20px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.6' fill='%23636366'/%3E%3Crect x='7' y='0' width='6' height='6' rx='1.6' fill='%23636366'/%3E%3Crect x='14' y='0' width='6' height='6' rx='1.6' fill='%23636366'/%3E%3Crect x='0' y='8' width='6' height='6' rx='1.6' fill='%23636366'/%3E%3Crect x='7' y='8' width='6' height='6' rx='1.6' fill='%23636366'/%3E%3Crect x='14' y='8' width='6' height='6' rx='1.6' fill='%23636366'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  transition: opacity var(--dur-fast);
}
.qe-lib-ab-overflow-trigger:hover::before,
#qe-lib-actions-trigger:hover::before,
.qe-lib-ab-overflow-trigger:active::before,
#qe-lib-actions-trigger:active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.6' fill='%231C1C1E'/%3E%3Crect x='7' y='0' width='6' height='6' rx='1.6' fill='%231C1C1E'/%3E%3Crect x='14' y='0' width='6' height='6' rx='1.6' fill='%231C1C1E'/%3E%3Crect x='0' y='8' width='6' height='6' rx='1.6' fill='%231C1C1E'/%3E%3Crect x='7' y='8' width='6' height='6' rx='1.6' fill='%231C1C1E'/%3E%3Crect x='14' y='8' width='6' height='6' rx='1.6' fill='%231C1C1E'/%3E%3C/svg%3E");
}
html.dark .qe-lib-ab-overflow-trigger::before,
html.dark #qe-lib-actions-trigger::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.6' fill='%23C7C7CC'/%3E%3Crect x='7' y='0' width='6' height='6' rx='1.6' fill='%23C7C7CC'/%3E%3Crect x='14' y='0' width='6' height='6' rx='1.6' fill='%23C7C7CC'/%3E%3Crect x='0' y='8' width='6' height='6' rx='1.6' fill='%23C7C7CC'/%3E%3Crect x='7' y='8' width='6' height='6' rx='1.6' fill='%23C7C7CC'/%3E%3Crect x='14' y='8' width='6' height='6' rx='1.6' fill='%23C7C7CC'/%3E%3C/svg%3E") !important;
}
html.dark .qe-lib-ab-overflow-trigger:hover::before,
html.dark #qe-lib-actions-trigger:hover::before,
html.dark .qe-lib-ab-overflow-trigger:active::before,
html.dark #qe-lib-actions-trigger:active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.6' fill='%23F2F2F7'/%3E%3Crect x='7' y='0' width='6' height='6' rx='1.6' fill='%23F2F2F7'/%3E%3Crect x='14' y='0' width='6' height='6' rx='1.6' fill='%23F2F2F7'/%3E%3Crect x='0' y='8' width='6' height='6' rx='1.6' fill='%23F2F2F7'/%3E%3Crect x='7' y='8' width='6' height='6' rx='1.6' fill='%23F2F2F7'/%3E%3Crect x='14' y='8' width='6' height='6' rx='1.6' fill='%23F2F2F7'/%3E%3C/svg%3E") !important;
}

@media (max-width: 680px) {
.qe-lib-ab-overflow-trigger,
#qe-lib-actions-trigger {
  width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
}

/* Sort button icon: macOS-style descending lines (Image 2 reference) */

.qe-sort-dropdown {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  min-width: 148px;
  padding: 4px;
  display: none;
  overflow: hidden;
}
.qe-sort-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--txt2);
  transition: background .1s ease;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
}
.qe-sort-opt:hover {
  background: var(--bg4);
  color: var(--txt);
}
.qe-sort-opt.active {
  background: var(--bg4);
  color: var(--txt);
  font-weight: 500;
}
.qe-sort-opt-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--txt3);
  opacity: .7;
}
.qe-sort-opt.active .qe-sort-opt-icon {
  color: var(--txt2);
  opacity: 1;
}
.qe-sort-opt > span:nth-child(2) {
  flex: 1;
}
.qe-sort-opt-check {
  font-size: 11px;
  color: var(--txt3);
  font-weight: 600;
  margin-left: auto;
  opacity: .7;
}

/* Sort button trigger: only show icon (no text label) */
.qe-sort-label-text {
  display: none !important;
}
/* Strip the sort trigger — make it a plain icon like sibling buttons */
#qe-sort-trigger {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.52) !important;
  min-width: 30px !important;
  width: 30px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast) !important;
}
#qe-sort-trigger:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.80) !important;
}
#qe-sort-trigger:active {
  background: rgba(0,0,0,0.12) !important;
  transform: scale(.95) !important;
}

@media (max-width: 680px) {

  /* Bar: tight, no gap — items use their own margins */
  .qe-lib-bar {
    gap: 0 !important;
    padding: 5px 10px !important;
    min-height: 42px !important;
    overflow: hidden !important;
  }

  /* LEFT: folder icon + sep + name — takes all available space */
  .qe-lib-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    padding-right: 4px !important;
    transition: opacity var(--dur-base), max-width var(--dur-base) cubic-bezier(.4,0,.2,1) !important;
  }
  .qe-lib-bc-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  /* MIDDLE: action bar — only the grid icon + add button on mobile */
  .qe-lib-action-bar {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 2px !important;
    justify-content: flex-end !important;
    transition: opacity var(--dur-base), max-width var(--dur-base) cubic-bezier(.4,0,.2,1) !important;
  }

  #qe-sort-wrap { display: none !important; }
  /* inline-group DISEMBUNYIKAN di mobile — semua masuk ke dropdown */
  .qe-lib-ab-sep { display: none !important; }
  .qe-lib-ab-sep-collapse { display: none !important; }
  .qe-lib-ab-inline-group { display: none !important; }

  /* Grid button + add button sizing
     [FIX 2026-08-22] dari 34×32 → 38×34 supaya area sentuh tombol dropdown
     "opsi lainnya" lebih nyaman & sepadan dengan icon titik-tiganya yang
     sekarang diperbesar juga (lihat rule ::before di atas). */
  .qe-lib-ab-overflow-trigger,
  #qe-lib-actions-trigger {
    width: 30px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  /* [FIX] Icon grid-titik-6 dikecilkan di mode HP / mode tanggung desktop
     (area sentuh tombol tetap 30x28px, cuma grafik titiknya yang
     diperkecil dari ukuran default 20x14). */
  .qe-lib-ab-overflow-trigger::before,
  #qe-lib-actions-trigger::before {
    width: 14px !important;
    height: 10px !important;
  }
  .qe-lib-action-bar .qe-ab-btn--primary {
    width: 34px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 17px !important;
  }

  /* ── SEARCH WRAP: collapsed (0-width) by default on mobile ── */
  .qe-lib-search-wrap {
    flex: 0 0 0px !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: flex-basis var(--dur-slow) cubic-bezier(.4,0,.2,1),
                max-width 0.25s cubic-bezier(.4,0,.2,1),
                opacity 0.18s,
                padding-left 0.25s !important;
  }

  .qe-lib-bar.search-open .qe-lib-search-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-left: 0 !important;
  }

  /* Search icon: keep it 9px from left of wrap (wrap now has no pad-left) */
  .qe-lib-bar.search-open .qe-lib-search-icon {
    left: 9px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Input padding: enough room for the icon (icon is at 9px, icon ~14px wide → 23px + buffer) */
  .qe-lib-bar.search-open .qe-lib-search {
    padding-left: 28px !important;
    padding-right: 30px !important;
    border-color: rgba(0,122,255,0.38) !important;
    background: var(--bg2) !important;
    box-shadow: 0 0 0 3px rgba(0,122,255,0.10) !important;
  }

  /* Hide breadcrumb + action bar when search open */
  .qe-lib-bar.search-open .qe-lib-breadcrumb,
  .qe-lib-bar.search-open .qe-lib-action-bar {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding-right: 0 !important;
  }

  /* ── 🔍 magnifier toggle button ── */
  #qe-lib-search-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    color: rgba(0,0,0,0.50) !important;
    cursor: pointer !important;
    border-radius: 7px !important;
    transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-base) !important;
    margin-left: 2px !important;
  }
  #qe-lib-search-toggle-btn:hover { background: rgba(0,0,0,0.07) !important; color: rgba(0,0,0,0.80) !important; }
  #qe-lib-search-toggle-btn:active { background: rgba(0,0,0,0.13) !important; transform: scale(.92) !important; }

  .qe-lib-bar.search-open #qe-lib-search-toggle-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* ── ✕ clear/close button inside the search wrap ── */
  #qe-lib-search-clear-btn {
    display: none !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0,0,0,0.11) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 9.5px !important;
    color: rgba(0,0,0,0.50) !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
  }
  .qe-lib-bar.search-open #qe-lib-search-clear-btn {
    display: inline-flex !important;
  }

}

/* (Tombol toggle/clear pencarian sekarang tampil di semua ukuran layar —
   rule lama yang memaksa display:none di atas 600px sudah dihapus,
   lihat ruleset universal ".qe-lib-search-wrap" beberapa ratus baris
   ke atas.) */

@media (min-width: 681px) {
  .qe-lib-ab-overflow-trigger,
  #qe-lib-actions-trigger {
    display: none !important;
  }
  /* Also hide the separator that sits right before +P on wide screens */
  .qe-lib-action-bar .qe-lib-ab-sep:last-of-type {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {

  /* When block-select mode is active on the body, */
  .qe-lib-body.block-select-mode .qe-finder-row .qe-hover-check {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Selected rows: filled checkbox */
  .qe-finder-row.block-selected .qe-hover-check {
    opacity: 1 !important;
    background: rgba(0,0,0,.82) !important;
    border-color: rgba(0,0,0,.82) !important;
    pointer-events: auto !important;
  }
  .qe-finder-row.block-selected .qe-hover-check::after {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background-color: #fff;
    -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
  }

  .qe-lib-body.block-select-mode .qe-finder-col-icon {
    min-width: 36px !important;
    width: 36px !important;
  }
  .qe-lib-body.block-select-mode .qe-hover-check {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
  }
  .qe-lib-body.block-select-mode .qe-finder-row.block-selected .qe-hover-check::after {
    font-size: 11px !important;
  }

  /* Subtle background on unselected rows in block-select mode */
  .qe-lib-body.block-select-mode .qe-finder-row:not(.block-selected) {
    background: rgba(0,0,0,0.01) !important;
  }

  /* Long-press hint: show a small "hold to select" label on first render */
  .qe-lib-body:not(.block-select-mode) .qe-finder-row:first-child::after {
    /* no visible text — the ripple animation already provides feedback */
    content: '';
  }
}

.svg-bolt {
  display: inline-block;
  vertical-align: -.15em;
  flex-shrink: 0;
  pointer-events: none;
  fill: currentColor;
}

@media (max-width: 600px) {
  .qe-lib-ab-overflow-trigger > span,
  #qe-lib-actions-trigger > span {
    display: none !important;
  }
}

/* Touch device: di edit mode, selalu tampilkan check */
@media (hover: none) and (pointer: coarse) {
  .qe-lib-body .qe-finder-row-edit .qe-hover-check {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .qe-lib-body .qe-finder-row-edit.block-selected .qe-hover-check {
    background: rgba(0,0,0,.82) !important;
    border-color: rgba(0,0,0,.82) !important;
  }
  .qe-lib-body .qe-finder-row-edit.block-selected .qe-hover-check::after {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background-color: #fff;
    -webkit-mask-image: var(--qe-mask-check); mask-image: var(--qe-mask-check);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
  }
}
.qe-lib-body .qe-finder-row-edit:hover .qe-hover-check {
  opacity: 1 !important;
}
.qe-lib-body .qe-finder-row-edit.block-selected .qe-hover-check {
  opacity: 1 !important;
}

#qe-lib-mobile-back-btn {
  display: none;
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  background: rgba(28,28,30,0.90);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.32), 0 1px 4px rgba(0,0,0,0.18);
  font-family: inherit;
  align-items: center;
  gap: 7px;
  transition: opacity var(--dur-base), transform var(--dur-base);
  white-space: nowrap;
  letter-spacing: -0.1px;
}
#qe-lib-mobile-back-btn:active {
  transform: translateX(-50%) scale(0.95);
  opacity: 0.80;
}
@media (max-width: 600px) {
  #qe-lib-mobile-back-btn {
    display: inline-flex !important;
  }
}
@media (min-width: 601px) {
  #qe-lib-mobile-back-btn {
    display: none !important;
  }
}

.qe-finder-row-edit .qe-hover-check,
.qe-finder-row-edit .qe-block-chk {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.qe-finder-row-edit.block-selected {
  background: transparent !important;
}
.qe-finder-row-edit.block-selected::before {
  display: none !important;
}

.qe-lib-inline-expand {
  background: var(--bg2);
  border-top: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
  transition: height 160ms cubic-bezier(.22,1,.36,1),
              opacity 120ms cubic-bezier(.22,1,.36,1) !important;
  opacity: 1;
}

/* Sidebar nav-lib-items: dari 220-280ms → 130-160ms */

.nav-lib-items {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  transition: grid-template-rows var(--dur-fast) cubic-bezier(.22,1,.36,1),
              opacity .10s ease !important;
}
.nav-lib-items.open {
  grid-template-rows: 1fr; opacity: 1; overflow: hidden;
  transition: grid-template-rows var(--dur-base) cubic-bezier(.22,1,.36,1),
              opacity .12s ease !important;
}

/* BUGFIX #2: Pakai dvh (dynamic viewport height) + env(safe-area-inset-bottom) */
@media (max-width: 600px) {
  .qe-lib-modal {
    height: 92dvh !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
    box-sizing: border-box !important;
  }
  .qe-edit-modal-v3 {
    height: auto !important;
    max-height: calc(90dvh - 32px) !important;
    max-width: calc(100% - 32px) !important;
    border-radius: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,.11) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  .qe-em3-footer {
    padding: 10px 16px 14px !important;
  }
  /* Fullscreen state: lepas semua constraint biar benar-benar full */
  .qe-edit-modal-v3.qe-em3-fullscreen {
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
  }
  #qe-edit-tpl-overlay {
    align-items: center !important;
    padding: 16px !important;
  }
  /* qe-save-tpl-box overrides in end-of-file fix block */
}
/* Mac-maximized: pakai 100dvh agar full screen tidak tertutup toolbar */
#qe-lib-overlay.mac-maximized .qe-lib-modal { max-width: 100% !important;
  max-height: 100dvh !important;
  height: 100dvh !important; border-radius: 0 !important; }

/* ── Tags row: chip pertama sejajar dengan teks breadcrumb, scroll bebas ── */

.qe-lib-tags-row {
  /* mask hanya aktif saat konten melebihi lebar — tidak clip di kiri */
  display: flex !important; align-items: center;
  gap: 4px !important;
  padding: 5px 16px 5px 10px !important; border-bottom: none; flex-shrink: 0;
  overflow-x: auto !important;
  flex-wrap: nowrap !important; flex: 1; min-width: 0;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 20px), transparent 100%) !important;
  mask-image: linear-gradient(to right, black 0%, black calc(100% - 20px), transparent 100%) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  scroll-padding-left: 16px !important;
}

/* ── Kode akses: selalu tampil sebagai bintang di semua browser ── */
#ctr-p,
#nav-fr-password-input {
  -webkit-text-security: disc !important;
  text-security: disc !important;
  font-family: text-security-disc, inherit !important;
}
/* Pastikan input type=password tidak di-override oleh patch lain */
#ctr-p[type="text"],
#nav-fr-password-input[type="text"] {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

/* ── PATCH: em3 traffic light hover icons (sync dengan library) ── */
.qe-em3-tl::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 900;
  color: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .1s;
  line-height: 12px; text-align: center;

  overflow: hidden;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.qe-em3-traffic:hover .qe-em3-tl::after { opacity: 1; }
.qe-em3-tl-red::after  { content: 'x'; }
.qe-em3-tl-max::after  { content: '+'; }
.qe-em3-tl-min  { background: #C8C8CA; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); cursor: default !important; pointer-events: none !important; }
/* Hide lama close button jika masih ada */
.qe-em3-close, #qe-edit-tpl-overlay .qe-lib-close { display: none !important; }
/* Sync title di em3 dengan id baru */
#qe-edit-tpl-overlay .qe-em3-title { font-size: 13px !important; }

/* Light mode — shadow lebih dalam & tegas */
#qe-generic-confirm-modal {  /* backdrop standar */
  background: rgba(0,0,0,.40) !important;
}

/* ── FIX 4: Matikan auto-zoom — viewport lock (maximum-scale=1, user-scalable=no) sudah cukup */

/* ── FIX 1, 2, 3: Layout & fullscreen di mobile ≤600px ── */
@media (max-width: 600px) {

  /* ─── Window 1: Template Library — full layar ─── */
  .qe-lib-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .qe-lib-modal {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }
  .qe-lib-overlay.show .qe-lib-modal { transform: none !important; }
  .qe-lib-overlay.hiding .qe-lib-modal { transform: none !important; opacity: 0 !important; }

  /* ─── Window 3: Edit Template — full layar ─── */
  #qe-edit-tpl-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .qe-edit-modal-v3 {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── FIX 1: Footer tombol Batal rata kiri di edit template ─── */
  .qe-em3-footer {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .qe-em3-btn-cancel {
    /* Cancel tetap ukuran aslinya di kiri */
    flex: 0 0 auto !important;
    min-width: 80px !important;
    order: 0 !important;
  }
  .qe-em3-btn-save {
    /* Save mengisi sisa ruang di kanan */
    flex: 1 !important;
    max-width: none !important;
    order: 1 !important;
  }

  /* ─── FIX 2: Generic confirm & small modals — JANGAN full screen ─── */
  /* Override stretch dari .qe-lib-overlay agar dialog kecil tetap centered */
  #qe-generic-confirm-modal,
  #qe-error-modal,
  #qe-lib-folder-modal,
  #qe-lib-rename-modal,
  #qe-lib-move-modal,
  #qe-import-conflict-modal {
    align-items: center !important;
    padding: 16px !important;
  }
  #qe-generic-confirm-modal > div,
  #qe-error-modal > div,
  #qe-lib-folder-modal > div,
  #qe-lib-rename-modal > div,
  #qe-lib-move-modal > div,
  #qe-import-conflict-modal > div {
    width: calc(100% - 0px) !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: 88dvh !important;
    border-radius: 18px !important;
  }

  /* ─── Extra: Kelola Icon & Tag — full layar ─── */
  #qe-lib-meta-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #qe-lib-meta-modal .qe-lib-modal {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #qe-lib-meta-modal .macos-titlebar {
    border-radius: 0 !important;
  }

  /* ─── Extra: Export Library — full layar ───
     BUG FIX: aturan ini dulu ditulis waktu #qe-export-modal MASIH berupa
     overlay window terpisah (persis pola #qe-lib-meta-modal /
     #ctr-import-preview-modal di atas — overlay dgn 1 kotak modal sebagai
     anak). Sekarang #qe-export-modal SUDAH dipindah jadi panel DI DALAM
     window Library yang sama (class .qe-lib-inpanel — lihat komentar
     "DI DALAM window Library" di index.html), dgn TIGA anak div langsung:
     .qe-lib-inpanel-head, .ctr-export-body, .ctr-modal-foot. Selector lama
     `#qe-export-modal > div` ikut memaksa method KETIGA anak itu (bukan
     cuma 1 kotak modal) masing2 setinggi 100dvh — hasilnya 3 kotak
     setinggi layar penuh numpuk vertikal (header raksasa kosong duluan,
     body raksasa nyaris tak kelihatan, footer ikut ketarik jauh ke bawah),
     persis bug "blank/kosong" yang dilaporkan. #qe-export-modal sendiri
     juga bukan lagi container overlay (flex+align-items:center) — dia
     `.qe-lib-inpanel` (display:flex; flex-direction:column; height:100%),
     jadi tidak butuh override apa pun di sini; container full-layarnya
     sudah otomatis mengikuti .qe-lib-modal induknya (lihat rule
     `.qe-lib-modal` di atas). Aturan lama dihapus total, tidak diganti. */

  /* ─── Extra: Import Preview — full layar ─── */
  #ctr-import-preview-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #ctr-import-preview-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── Extra: Recycle Bin — pakai class qe-lib-overlay/qe-lib-modal, no override needed ─── */
  #qe-recycle-list {
    max-height: none !important;
  }

  /* ─── Extra: Master Prompt — full layar ─── */
  #qe-mp-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #qe-mp-overlay > div {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ─── Preview quick-view — full layar ─── */
  #qe-preview-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #qe-preview-modal-overlay > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* Canonical: semua titlebar/header area modal */
.macos-titlebar,
.qe-detail-modal-titlebar,
.qe-em3-header {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px 11px !important;
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: none !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* ── 2. TRAFFIC LIGHT CONTAINER — gap & alignment ─────────────────────── */
.macos-traffic-lights,
.qe-detail-modal-traffic,
.qe-em3-traffic {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
}

/* ── 3. TRAFFIC LIGHT BUTTONS — ukuran & bentuk ──────────────────────── */
.macos-btn,
.qe-detail-modal-traffic button,
.qe-em3-tl {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: filter var(--dur-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
}

/* ── 4. CLOSE dot — #ff5f57 ──────────────────────────────────────────── */
.macos-btn-close,
.qe-detail-modal-traffic .dm-close,
.qe-em3-tl-red {
  background: #ff5f57 !important;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
}

.macos-btn-min,
.qe-detail-modal-traffic .dm-min,
.qe-em3-tl-min {
  background: #C8C8CA !important;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12) !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* [FIX] Tombol hijau (MAXIMIZE) diabuin & dimatiin fungsinya — sama persis
   perlakuannya kayak tombol kuning (MINIMIZE) di atas. Tombolnya tetap
   ada di susunan 3 dot, cuma udah gak ngapa-ngapain kalau diklik. */
.macos-btn-max,
.qe-detail-modal-traffic .dm-max,
.qe-em3-tl-max {
  background: #C8C8CA !important;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12) !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ── 7. HOVER & ACTIVE states — identik di semua dot ─────────────────── */
.macos-btn:hover,
.qe-detail-modal-traffic button:hover,
.qe-em3-tl:hover {
  filter: brightness(.85) !important;
}
.macos-btn:active,
.qe-detail-modal-traffic button:active,
.qe-em3-tl:active {
  filter: brightness(.72) !important;
  transform: scale(.9) !important;
}

/* ── Hover icons — SEMUA traffic light sistem (Library, Detail, Edit, Recycle) ── */
.macos-btn::after,
.qe-detail-modal-traffic button::after,
.qe-em3-tl::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  color: rgba(0,0,0,.50) !important;
  opacity: 0 !important;
  transition: opacity .1s !important;
  line-height: 12px !important;
  text-align: center !important;
}
/* Close = × */
.macos-btn-close::after,
.qe-detail-modal-traffic .dm-close::after,
.qe-em3-tl-red::after  { content: '×' !important; }
/* Min = − (disabled, tapi tetap show icon) */
.macos-btn-min::after,
.qe-detail-modal-traffic .dm-min::after,
.qe-em3-tl-min::after  { content: '−' !important; }
/* Max = + */
.macos-btn-max::after,
.qe-detail-modal-traffic .dm-max::after,
.qe-em3-tl-max::after  { content: '+' !important; }
/* Trigger hover pada group */
.macos-traffic-lights:hover .macos-btn::after,
.qe-detail-modal-traffic:hover button::after,
.qe-em3-traffic:hover .qe-em3-tl::after { opacity: 1 !important; }

/* Disable state — min dot non-interaktif */
.macos-btn-disabled {
  pointer-events: none !important;
  cursor: default !important;
}

/* ── 8. WINDOW TITLE — posisi & tipografi seragam ───────────────────── */
.macos-window-title,
.qe-detail-modal-titlebar-title,
.qe-em3-title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--txt2) !important;
  letter-spacing: -0.15px !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  white-space: nowrap !important;
  cursor: default !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* ── Export modal fullscreen support ─────────────────────────────────── */
#qe-export-modal.mac-maximized {
  padding: 0 !important;
}
#qe-export-modal.mac-maximized .qe-lib-modal {
  max-width: 100% !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}

/* ── Recycle Bin fullscreen (mac-maximized) ──────────────────────────── */
#qe-recycle-overlay.mac-maximized {
  padding: 0 !important;
}
#qe-recycle-overlay.mac-maximized .qe-lib-modal {
  max-width: 100% !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}

/* ── Kelola Icon & Tag fullscreen (mac-maximized) ────────────────────── */
#qe-lib-meta-modal.mac-maximized {
  padding: 0 !important;
}
#qe-lib-meta-modal.mac-maximized .qe-lib-modal {
  max-width: 100% !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
}
#qe-lib-meta-modal.mac-maximized .macos-titlebar {
  border-radius: 0 !important;
}

/* Traffic dots tidak berubah di dark mode (warna macOS asli tetap sama) */

/* ── 10. LIBRARY MODAL: .qe-lib-head diseragamkan jika masih tampil ──── */

.qe-lib-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px 11px !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  background: var(--bg3) !important;
  box-shadow: none !important;
  position: relative !important;
  user-select: none !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* ── 11. BORDER RADIUS modal — samakan semua ke 20px ─────────────────── */

/* ── 12. BORDER MODAL OUTER — ketebalan dan warna seragam ────────────── */

/* ── 13. BOX SHADOW modal — seragamkan depth ─────────────────────────── */
.qe-lib-modal,
.qe-edit-modal-v3 {
  border-radius: 20px !important;
  border: 1px solid rgba(0,0,0,.11) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.20), 0 4px 20px rgba(0,0,0,.10) !important;
}

/* ── 14. UKURAN modal — Library disamakan dengan Detail & Edit (82vh) ── */
.qe-lib-modal {
  width: 100%; max-width: 960px;
  height: 82vh !important;
  max-height: 82vh !important;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,.13);
  border-radius: 20px; display: flex; flex-direction: column;
  overflow: clip;
  box-shadow: 0 24px 80px rgba(0,0,0,.17), 0 4px 16px rgba(0,0,0,.07);
  transform: translateY(6px) scale(.99);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  opacity: 0;
  position: relative; }
/* Padding Library overlay disamakan dengan Detail overlay (16px sudah sama) */

#qe-lib-overlay.wsm-bg {
  opacity: 1 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ── MODE KECIL: bottom sheet 78vh saat mac-maximized dilepas ── */
@media (max-width: 600px) {

  /* Template Library — mode kecil */
  #qe-lib-overlay.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-lib-overlay.mob-fs-default:not(.mac-maximized) .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }

  /* Edit Template — mode kecil */
  #qe-edit-tpl-overlay.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-edit-tpl-overlay.mob-fs-default:not(.mac-maximized) .qe-edit-modal-v3 {
    width: 100% !important;
    max-width: 100% !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }

  /* Kelola Icon — mode kecil */
  #qe-lib-meta-modal.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-lib-meta-modal.mob-fs-default:not(.mac-maximized) .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }
  #qe-lib-meta-modal.mob-fs-default:not(.mac-maximized) .macos-titlebar {
    border-radius: 20px 20px 0 0 !important;
  }

  /* Recycle Bin — mode kecil (sama persis dengan library lain) */
  #qe-recycle-overlay.mob-fs-default:not(.mac-maximized) {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #qe-recycle-overlay.mob-fs-default:not(.mac-maximized) .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 78vh !important;
    max-height: 78dvh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    transform: none !important;
  }

  /* ── MODE FULLSCREEN: saat mac-maximized aktif (semua 5 overlay) ── */
  #qe-lib-overlay.mob-fs-default.mac-maximized,
  #qe-edit-tpl-overlay.mob-fs-default.mac-maximized,
  #qe-lib-meta-modal.mob-fs-default.mac-maximized,
  #qe-recycle-overlay.mob-fs-default.mac-maximized {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #qe-lib-overlay.mob-fs-default.mac-maximized .qe-lib-modal,
  #qe-recycle-overlay.mob-fs-default.mac-maximized .qe-lib-modal,
  #qe-lib-meta-modal.mob-fs-default.mac-maximized .qe-lib-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #qe-edit-tpl-overlay.mob-fs-default.mac-maximized .qe-edit-modal-v3 {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #qe-lib-meta-modal.mob-fs-default.mac-maximized .macos-titlebar {
    border-radius: 0 !important;
  }

  /* Override animasi transform untuk semua .mob-fs-default agar tidak konflik */
  .qe-lib-overlay.mob-fs-default.show .qe-lib-modal,
  .qe-lib-overlay.mob-fs-default.hiding .qe-lib-modal {
    transform: none !important;
  }
}

/* [FIX] Dulu maximize masih aktif khusus mobile — sekarang fungsinya
   sudah dimatikan semua ukuran layar (lihat rule .macos-btn-max di atas),
   jadi override cursor:pointer ini gak relevan lagi & dihapus. */
:root { --nav-rail-w: 58px;
  --nav-pad:   9px;   --nav-chev:  16px;  --nav-gap:   6px;   --nav-emoji: 16px;  --nav-chev-cx: calc(var(--nav-pad) + var(--nav-chev) / 2);
  --qe-ta-size:    13px;
  --qe-ta-lh:      1.5;
  --qe-ta-pad-v:   10px;
  --qe-ta-pad-h:   12px;
  --qe-ta-family: var(--font-sans);
  --qe-ta-weight:  400;
  --qe-ta-spacing: 0; }

/* Textarea */
#qe-template {
  font-family:    var(--qe-ta-family)   !important;
  font-size:      var(--qe-ta-size)     !important;
  font-weight:    var(--qe-ta-weight)   !important;
  line-height:    var(--qe-ta-lh)       !important;
  letter-spacing: var(--qe-ta-spacing)  !important;
  padding:        var(--qe-ta-pad-v) var(--qe-ta-pad-h) !important;
  box-sizing:     border-box            !important;
  -webkit-font-smoothing: antialiased   !important;
}

/* Syntax overlay div — harus 100% identik */

#qe-syntax-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  padding:        var(--qe-ta-pad-v) var(--qe-ta-pad-h) !important;
  font-family:    var(--qe-ta-family)   !important;
  font-size:      var(--qe-ta-size)     !important;
  font-weight:    var(--qe-ta-weight)   !important;
  line-height:    var(--qe-ta-lh)       !important;
  letter-spacing: var(--qe-ta-spacing)  !important;
  white-space: pre-wrap; word-break: break-word;
  overflow: hidden;
  border-radius: 0;
  color: var(--txt);
  background: transparent;
  z-index: 2;
  box-sizing:     border-box            !important;
  display: none;
  -webkit-font-smoothing: antialiased   !important;
}

/* URL overlay — sama */

#qe-url-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  padding:        var(--qe-ta-pad-v) var(--qe-ta-pad-h) !important;
  font-family:    var(--qe-ta-family)   !important;
  font-size:      var(--qe-ta-size)     !important;
  font-weight:    var(--qe-ta-weight)   !important;
  line-height:    var(--qe-ta-lh)       !important;
  letter-spacing: var(--qe-ta-spacing)  !important;
  white-space: pre-wrap; word-break: break-word;
  overflow: auto;
  border-radius: 0;
  color: transparent;
  background: transparent;
  z-index: 3;
  box-sizing:     border-box            !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-font-smoothing: antialiased   !important;
}


/* ── Traffic Light — lebih besar di mobile ── */
@media (max-width: 600px) {
  .macos-btn,
  .qe-detail-modal-traffic button,
  .qe-em3-tl {
    width: 16px !important;
    height: 16px !important;
  }
  .macos-traffic-lights,
  .qe-detail-modal-traffic,
  .qe-em3-traffic {
    gap: 9px !important;
  }
}

/* ── Step 3: Edit button — fix alignment & warna ── */

/* ── Field text-input (qe-field-input) — font kecil seragam ── */

/* inline-expand pointer-events: see consolidated rule below */

/* ── Tombol Export Template ── */
.qe-lib-inline-export {
  background: var(--bg2);
  color: var(--txt2);
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--spring);
}
.qe-lib-inline-export:hover { background: var(--bg4); border-color: rgba(0,0,0,.26); color: var(--txt); transform: translateY(-1px); }
.qe-lib-inline-export:active { transform: scale(.94); }

/* ── Tombol Edit Template ── */
.qe-lib-inline-edit {
  background: var(--bg2);
  color: var(--txt2);
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--spring);
}
.qe-lib-inline-edit:hover { background: rgba(0,122,255,.08); border-color: rgba(0,122,255,.30); color: #007AFF; transform: translateY(-1px); }
.qe-lib-inline-edit:active { transform: scale(.94); }

/* ── Tombol Close / Kecilkan drawer ── */
.qe-lib-inline-close { /* dorong ke kanan */
  background: transparent;
  color: var(--txt3);
  border: 1px solid rgba(0,0,0,.09);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: inherit;
  flex-shrink: 0;
  margin-left: auto;
  transition: all var(--dur-fast);
}
.qe-lib-inline-close:hover { background:var(--tint-3b); color: var(--txt2); border-color:var(--border3); }
.qe-lib-inline-close:active { transform: scale(.92); }

/* ── Mobile: tombol lebih besar agar mudah di-tap ── */

/* ── v5.17: Hapus kolom AKSI (···) dari Library — aksi via inline footer ── */
.qe-finder-col-actions,
.qe-finder-header .qe-finder-col-actions,
.qe-finder-more-btn {
  display: none !important;
}

/* ── v5.17: Hapus slot kolom AKSI dari grid — geser detail/tanggal ke ujung kanan ── */

/* Desktop default */

.qe-finder-header,
.qe-finder-row {
  display: grid;
  grid-template-columns: 34px 1fr 130px 84px 92px !important;
  align-items: center;
  padding: 0 12px;
  gap: 0;
}

/* Tablet 601–768 px */
@media (min-width: 601px) and (max-width: 768px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 120px 148px !important; }
  .qe-finder-col-folder { display: none !important; }
}

/* Mobile ≤600 px */
@media (max-width: 600px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 120px !important; }
}

/* Pastikan kolom date/detail rata kanan */
.qe-finder-col-date,
.qe-tpl-mobile-meta-col {
  justify-content: flex-end;
  text-align: right;
  padding-right: 10px;
}

/* FIX BUG 2026-08-01: Library inner sidebar auto-minimize (lihat komentar
   "UI/UX FIX 2026-08-01" dekat @container qe-feedcol di atas, dekat blok
   drawer mobile) juga perlu grid tabel body ikut mengikuti pola kanonis
   v5.17 di atas (icon + nama + Detail, TANPA slot Aksi — kolom Aksi sudah
   dihapus total dari Library), PLUS menyalakan `.qe-tpl-mobile-meta-col`
   ("Detail": ukuran+tanggal jadi satu) yang defaultnya `display:none`.
   Sengaja diletakkan SETELAH blok kanonis "Desktop default" & Tablet/Mobile
   di atas (bukan di dekat definisi drawer sidebar) — kalau diletakkan lebih
   awal di file, rule !important di sini bakal KALAH lawan rule
   `!important` "Desktop default" di atas walau container query-nya match,
   karena utk !important vs !important dgn specificity sama, yang menang
   adalah yang urutannya lebih akhir di file, bukan yang kondisinya lebih
   spesifik. Inilah sebabnya sebelumnya kolom Ukuran/Folder/Tanggal yang
   disembunyikan malah nyisa 3 slot grid KOSONG MELOMPONG (bukan cuma
   nyempit) di sebelah nama template — "ruang kosong ngambil alih tempat
   nama file" yg dilaporkan — sementara kolom Detail pengganti nggak pernah
   dinyalakan sama sekali. */
@container qe-feedcol (max-width: 760px) {
  .qe-finder-header,
  .qe-finder-row { grid-template-columns: 34px 1fr 120px !important; }

  .qe-tpl-mobile-meta-col {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    overflow: hidden;
  }
  .qe-tpl-mobile-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }
  .qe-meta-two-line { white-space: normal; }
  .qe-meta-line1, .qe-meta-line2 { text-align: right; }
}

/* Inline expand pointer-events isolation */

/* Inline expand panel dan semua isinya selalu interactive */
.qe-lib-inline-expand,
.qe-lib-inline-expand-inner,
.qe-lib-inline-footer,
.qe-lib-inline-footer button,
.qe-lib-inline-pakai,
.qe-lib-inline-detail,
.qe-lib-inline-edit,
.qe-lib-inline-fav,
.qe-lib-inline-dupe,
.qe-lib-inline-move,
.qe-lib-inline-del {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Pastikan overlay library tidak overflow ke sidebar */

/* ── font-size 13px: all inputs/textareas globally — prevents iOS autozoom ── */
input, textarea, select,
.ctr-lf-input, .qe-textarea, #qe-template,
.qe-field-input, .qe-field-textarea, .qe-dropdown-text-input,
.qe-dropdown-select, .qe-color-hex, .qe-date-native,
.qe-em3-input, .qe-em3-textarea, .qe-em3-content-textarea,
.ctr-field-input, .qe-modal-input,
.qnote-textarea,
.qnote-preview { font-size: 13px; } /* [BUG FIX] .qnote-preview disertakan juga —
  sebelumnya cuma .qnote-textarea yang di-bump ke 13px di sini, sedangkan
  .qnote-preview tetap 11px (aturan dasar di atas). Akibatnya ukuran teks
  "melompat" tiap kali NOTES pindah dari mode ketik (textarea, 13px) ke
  mode preview (div, 11px), padahal isinya sama persis. Disamakan supaya
  tidak ada efek berubah ukuran saat berpindah mode. */

@media (max-width: 600px) {
  /* Overlay fullscreen, tanpa padding */
  .qe-save-tpl-overlay.show {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  /* Box memenuhi seluruh layar vertikal */
  .qe-save-tpl-box {          /* overflow di sini TIDAK scroll */
    /* Slide-up dari bawah, bukan scale */
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transform: translateY(40px) !important;
    transition: transform var(--dur-base) var(--ease) !important;
  }

  .qe-save-tpl-overlay.show .qe-save-tpl-box {
    transform: translateY(0) !important;
  }

  /* Title header — fixed di atas */
  .qe-save-tpl-box > .qe-save-tpl-title {
    flex-shrink: 0 !important;
    padding: max(20px, env(safe-area-inset-top, 20px)) 22px 14px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 15px !important;
  }

  /* Scroll wrapper (diinject via JS) — area tengah yang bisa scroll */
  .qe-save-tpl-inner-scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 0 22px 16px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-label {
    padding-top: 14px !important;
    margin-bottom: 6px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-input {
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-emoji-row {
    margin-bottom: 4px !important;
  }

  .qe-save-tpl-inner-scroll .qe-save-tpl-tags-row {
    margin-bottom: 0 !important;
  }

  /* Tombol Batal & Simpan — sticky footer, tidak menyentuh batas bawah HP */
  .qe-save-tpl-box > .qe-save-tpl-actions {
    flex-shrink: 0 !important;
    padding: 14px 22px max(24px, env(safe-area-inset-bottom, 24px)) !important;
    border-top: 1px solid var(--border) !important;
    background: var(--bg2) !important;
    z-index: 2 !important;
  }
}

/* ── waTopicIn keyframes & WA Topic hover (moved from inline body style) ── */
@keyframes waTopicIn {
from { opacity:0; transform:translateY(-6px) scale(.97); }
to   { opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width: 768px), (max-height: 500px) and (max-width: 1024px) {
  /* UI/UX FIX 2026-07-30: query blok mobile ini ditambah
     `(max-height:500px) and (max-width:1024px)` — HP mode LANDSCAPE
     lebar layarnya sering >768px (contoh iPhone landscape ~850-930px)
     meski tingginya cuma ~380-430px, jadi kalau breakpoint cuma ngecek
     max-width:768px, seluruh treatment "mode HP" di blok raksasa ini
     (topbar tipis, sidebar jadi drawer off-canvas, --nav-w/--rp-w jadi
     50vw, dst) nggak pernah nyala pas HP diputar horizontal — sidebar
     kiri/kanan malah kepaksa pakai treatment desktop (rail-icon / hilang
     manual) yang nggak dirancang buat layar sesempit itu, hasilnya
     macam-macam kombinasi state yang nyangkut & keliatan "bug" (salah
     satu sidebar nongol nggak semestinya, sisi lain hilang tapi ruang
     kontennya nggak ke-reclaim). Cap max-width:1024px supaya iPad asli
     (tinggi landscape-nya ≥800px) & laptop TIDAK ikut ketangkep, murni
     cuma HP. */
  /* UI/UX FIX 2026-07-27: topbar dibuat lebih tipis khusus di layar HP
     (60px→46px sebelumnya kerasa terlalu tebal utk layar kecil). Semua
     elemen yg posisinya dihitung dari var(--topbar-h) (main-layout,
     sidebar kiri/kanan, overlay, dst) otomatis ikut menyesuaikan karena
     semuanya pakai var(), bukan angka hardcode. */
  /* [REVISI 2026-08-09] Diminta user: sidebar drawer (kiri & kanan) di
     mode HP dilebarkan jadi ~3/4 lebar layar (layar vertikal dibagi 4
     bagian, 3 bagian diisi sidebar, 1 bagian sisanya tetap kelihatan
     backdrop-nya) — sebelumnya cuma ~1/2 layar (50vw, cap 320px).
     Melebar ke ARAH DALAM saja: .left-nav tetap nempel `left:var(--sb-gap)`
     dan .right-panel tetap nempel `right:var(--sb-gap)` (lihat rule
     .left-nav/.right-panel di atas), jadi nambah --nav-w/--rp-w di sini
     cuma mendorong tepi DALAM sidebar makin ke tengah, bukan mengubah
     posisi/gaya sidebar itu sendiri. Cap 420px dijaga supaya di tablet
     kecil (masih kena breakpoint drawer ini lewat kondisi max-height)
     sidebar tidak jadi kelewat lebar. */
  :root { --nav-w: min(75vw, 420px); --rp-w: min(75vw, 420px); --topbar-h: 46px; }
#qe-generate-btn.qe-gen-sticky {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    border-radius: var(--r12) !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

.topbar-search {
    display: none;
    flex: 1;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0 6px;
  }

  .topbar-search.tb-search-expanded {
    display: flex !important;
  }

  .topbar.tb-search-active .topbar-left  { flex: 0 0 auto !important; }
  .topbar.tb-search-active .topbar-right { flex: 0 0 auto !important; }
  .topbar.tb-search-active .topbar-brand-text { display: none; }
  .topbar.tb-search-active #tb-search-icon-mobile { display: none !important; }

  #tb-search-icon-mobile { display: flex !important; }

.feed-col { margin-left: 0; margin-right: 0; }
  .topbar { gap: 4px; padding: 0 10px; }
  .topbar-brand { flex-shrink: 0; }
  .topbar-brand-text { display: block; }
  .topbar-left { flex: 0 0 auto; }
  #btn-fullview { display: none !important; }
  
  .hamburger { display: flex; width: 26px; height: 26px; }
  .topbar-logo-icon { width: 26px; height: 26px; flex-shrink: 0; }
  .topbar-right { flex: 0 0 auto; margin-left: auto; gap: 2px; }
.left-nav {
  /* FIX: pastikan sidebar selalu bisa di-scroll sampai konten paling bawah di mobile */
    height: calc(100dvh - var(--topbar-h) - (var(--nav-v-gap) * 2)) !important;
  overflow-y: auto !important;
    overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  transform: translateX(calc(-100% - var(--sb-gap) - 24px));
  z-index: 99;
  box-shadow: none;
  }
  .left-nav.open { transform: translateX(0); box-shadow: none; }
  .qe-step1-row-top { flex-wrap: nowrap; gap: 6px; }
  .qe-save-tpl-btn { font-size: 10.5px; padding: 5px 9px; }
  .qe-btn-ghost { padding: 4px 8px; font-size: 11px; }

.rp-drawer-overlay { z-index: 64; }
  .right-panel { z-index: 65; }
  .nav-overlay { z-index: 98; }

.rg-clear-btn span { display: none; }
  .rg-clear-btn-icon { display: inline-block; }
  .rg-clear-btn { padding: 5px 9px; min-width: 0; }

.qe-lib-body,
  .qe-lib-body * {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

.nav-item { min-height: 30px; }
  .tb-btn,
  #tb-search-icon-mobile,
  .hamburger { width: 36px; height: 36px; }
  .qe-copy-btn { padding: 8px 12px; min-height: 40px; }
  .qe-generate-btn { padding: 0 12px !important; height: 40px !important; font-size: 13px !important; }
  .qe-open-row { grid-template-columns:repeat(4,1fr); gap:4px; }
  .qe-open-ai-btn { font-size:9px; padding:0 4px; }
  /* UI/UX FIX: horizontal padding pakai var(--sb-gap) (bukan angka
     hardcode 16px) supaya tepi kartu di halaman ini SELALU sejajar
     persis sama jarak sidebar dari tepi layar, di breakpoint manapun. */
  /* UI/UX FIX: .qe-page sebelumnya TIDAK PUNYA override mobile sama
     sekali, jadi di HP dia masih pakai padding desktop (24px kiri-kanan)
     — makanya kelihatan "lebih dalam/mepet" dibanding halaman lain.
     Sekarang disamain: horizontal pakai var(--sb-gap) kayak page lain. */
  .qe-page { padding: var(--nav-v-gap) var(--sb-gap) 32px; }
  /* UI/UX FIX: License sebelumnya baru compact di bawah 600px (beda
     breakpoint dari page lain yg 768px) — disamain di sini juga supaya
     konsisten mulai 768px ke bawah, bukan cuma di bawah 600px. */
  .lic-inner { padding: var(--nav-v-gap) var(--sb-gap) 60px; }
  /* [BUG FIX] Fix di atas cuma nyentuh padding halaman (.lic-inner) —
     kartu header-nya sendiri (.lic-header/-icon/-title) KELEWATAN,
     masih nempel di `@media (max-width:600px)` yang lama (cari
     komentar ".lic-header-owner" di file ini), beda breakpoint dari
     saudaranya .bb-header (≤760px)/.pm-header (≤720px)/.fyc-header
     (≤768px) yang sudah disamakan ke 768px. Akibatnya di lebar
     601–768px, header License masih ukuran desktop (ikon 44px, padding
     lega) padahal badan halaman di bawahnya sudah versi mobile compact
     — beda sendiri dari 3 menu lain yang header+bodinya kompak bareng
     di lebar yang sama. Disamakan di sini juga; rule lama di bawah
     (≤600px) sengaja dibiarkan (nilainya identik, jadi cuma redundant
     di rentang yang sudah dicover blok ini). */
  .lic-header { padding: 14px 14px; gap: 10px; }
  .lic-header-icon { width: 34px; height: 34px; }
  .lic-header-title { font-size: 14px; }
  .page { padding: var(--nav-v-gap) var(--sb-gap); }
  /* UI/UX FIX: Brackets & Pro Mode punya breakpoint sendiri (760px /
     720px) yang beda dari 768px di sini — ditambahin juga di breakpoint
     768px ini supaya SEMUA halaman switch ke padding compact di lebar
     yang sama persis, nggak ada jendela lebar dimana sebagian halaman
     masih desktop-padded dan sebagian udah mobile-padded. */
  .bb-page { padding: var(--nav-v-gap) var(--sb-gap) calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pm-page { padding: var(--nav-v-gap) var(--sb-gap) 28px; }
  /* UI/UX FIX: sama seperti .qe-page di atas — .fyc-page (menu Updates)
     juga TIDAK PUNYA override mobile sama sekali sebelumnya, jadi di HP
     dia masih pakai padding desktop (24px kiri-kanan flat dari
     css/fyc.css), lebih renggang dibanding .page/.qe-page/.lic-inner/
     .bb-page/.pm-page yang semuanya sudah kompak ke var(--sb-gap) di
     breakpoint ini. Disamakan di sini juga. */
  .fyc-page { padding: var(--nav-v-gap) var(--sb-gap) 24px; }

.qe-finder-ctx-menu,
  .qe-lib-preview-pop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

/* Row utama — specificity lebih tinggi dari `[onclick]{manipulation}` */
  .qe-lib-body .qe-finder-row,
  .qe-lib-body .qe-finder-row[onclick],
  .qe-lib-body .qe-finder-row-wrap,
  .qe-lib-body .qe-finder-header {
    touch-action: pan-y !important;
  }

  /* Kolom DETAIL: pointer-events:none agar touch naik ke parent scroller */
  .qe-lib-body .qe-tpl-mobile-meta-col,
  .qe-lib-body .qe-tpl-mobile-meta,
  .qe-lib-body .qe-meta-two-line,
  .qe-lib-body .qe-meta-line1,
  .qe-lib-body .qe-meta-line2,
  .qe-lib-body .qe-finder-col-name,
  .qe-lib-body .qe-finder-col-icon,
  .qe-lib-body .qe-finder-col-folder {
    touch-action: pan-y !important;
    pointer-events: none;
  }

  /* Semua [onclick] dalam lib-body: override global rule */
  .qe-lib-body [onclick] {
    touch-action: pan-y !important;
  }

  /* Container scroll */
  .qe-lib-body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Tombol aksi ⋯ tetap tappable */
  .qe-lib-body .qe-finder-col-actions,
  .qe-lib-body .qe-finder-col-actions button,
  .qe-lib-body .qe-finder-col-actions [onclick],
  .qe-lib-body .qe-finder-more-btn {
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

/* Step 2: semua field — font 13px, viewport sudah lock autozoom */
  .qe-field-textarea {
    font-size: 13px !important;
    padding: 7px 10px !important;
    min-height: 68px !important;
    line-height: 1.45 !important;
  }
  .qe-dropdown-select {
    font-size: 13px !important;
    padding: 7px 28px 7px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  .qe-dropdown-text-input {
    font-size: 13px !important;
    padding: 7px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }
  /* BUG FIX mobile: input mode ketik dalam dropdown harus sama persis */
  .qe-dropdown-field .qe-field-input {
    font-size: 13px !important;
    padding: 7px 28px 7px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }

/* Semua field Step 2 — 13px seragam, viewport lock cegah autozoom */

.qe-lib-inline-pakai,
  .qe-lib-inline-detail,
  .qe-lib-inline-edit,
  .qe-lib-inline-fav,
  .qe-lib-inline-dupe,
  .qe-lib-inline-move,
  .qe-lib-inline-del {
    height: 38px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .qe-lib-inline-footer {
    gap: 4px !important;
    padding: 8px 8px 10px !important;
  }

/* [FIX] Rule .macos-btn-max di sini dulu KHUSUS mobile — sekarang jadi
   duplikat karena tombol max sudah diabuin/dimatiin fungsinya secara
   global (lihat .macos-btn-max di bagian atas file). Dihapus biar gak
   dobel; behavior mobile tetap sama karena rule globalnya sudah nyakup
   semua ukuran layar. */

/* Pastikan touch-action aktif di semua input */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input:not([type]),
  textarea,
  select {
    touch-action: manipulation !important;
  }

  /* Notes: paksa 11px di mobile — sama dengan view mode */
  .qnote-textarea,
  .qnote-preview {
    font-size: 11px !important;
    line-height: 1.6 !important;
    padding: 9px 11px 4px !important;
  }

  .qnote-textarea::placeholder {
    font-size: 11px !important;
  }

}

/* ================================================================ */


/* v11-clean: fw-sub subtitles — always visible */
.fw-sub { font-size: 9.5px; color: var(--txt3); margin-top: 1px; white-space: nowrap; overflow: clip; text-overflow: ellipsis; font-weight: 500; display: block !important; }

/* v11-clean: fw-badge — softer, no border */
.fw-badge { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 7.5px !important; font-weight: 600; color: var(--txt3) !important; letter-spacing: .3px; flex-shrink: 0; background: rgba(0,0,0,.05) !important; border: none !important; }
html.dark .fw-badge { background: rgba(255,255,255,.08) !important; color: var(--txt3) !important; border: none !important; }

/* v11-clean: nav bottom disclaimer — much more subtle */
.nav-bottom-note p { opacity: 0.45 !important; font-size: 9.5px !important; }

/* UI/UX FIX 2026-08-26: dikembalikan lagi — sekarang cuma nunjukin jumlah
   KARAKTER (format "N kar", bukan "N kata · N kar"), diposisikan tepat di
   sebelah kiri tombol tab "Final Prompt" / "Result" lewat .qe-result-stats
   yang memang satu baris (.qe-result-meta-row) dengan #qe-result-tabs.
   Sebelumnya rule di sini yang mengunci elemennya ke display:none
   !important begitu hasil prompt ada isinya (has-result) — sekarang
   dibiarkan tampil normal (mengikuti display default .qe-result-stats). */
#qe-result-card.has-result #qe-result-stats { display: block; }

/* ═══════════════════════════════════════════
   v12-clean  STAGE 2 — Reduce visual noise
   ═══════════════════════════════════════════ */

/* 1. Step labels — kill uppercase + heavy weight */
.qe-step-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--txt) !important; }

/* 2. Step number circles — smaller, bold on desktop & mobile */
.qe-step-num {
  width: 20px !important;
  height: 20px !important; border-radius:50%;
  background: var(--bg2) !important;
  color: var(--txt) !important; display:flex; align-items:center; justify-content:center;
  font-size: 10px !important;
  font-weight: 900 !important; flex-shrink:0;
  border:1.5px solid var(--border3) !important;
  box-shadow: none !important; }
html.dark .qe-step-num {
  border-color: rgba(255,255,255,.22) !important;
  background: #3A3A3C !important;
  color: var(--txt) !important;
}

/* 3. "Format:" label in bracket row — hide, brackets self-explain */

.qe-bracket-label {
  font-size: 9.5px; font-weight: 700; color: var(--txt3);
  padding: 0 2px 0 0; white-space: nowrap; letter-spacing: .3px;
  text-transform: uppercase; line-height: 26px;
  display: none !important;
}

/* 4. "Belum ada placeholder" parse status — tone down, it's default empty state */
.qe-parse-status:not(.found) {
  opacity: 0.4 !important;
  font-size: 10.5px !important;
}
.qe-parse-status:not(.found) .dot {
  background: rgba(0,0,0,.15) !important;
}

/* 5. "Prompt Ready" result meta label — less shout */
.qe-result-meta {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  color: var(--txt3) !important;
  opacity: 0.65 !important; }

/* 6. Master Prompt INACTIVE bar — very quiet, almost ghost */
#qe-mp-inactive-bar {
  border-color:var(--border3) !important;
  opacity: 0.55 !important;
}
html.dark #qe-mp-inactive-bar {
  border-color: rgba(255,255,255,.30) !important;
  opacity: 1 !important;
}
html.dark #qe-mp-inactive-bar span,
html.dark #qe-mp-inactive-bar svg {
  opacity: 0.7 !important;
}

/* 7. "MASTER PROMPT" label in active bar — lighter */
#qe-mp-active-bar span[style*="letter-spacing:.3px"] {
  letter-spacing: 0 !important;
  font-size: 9px !important;
  text-transform: none !important;
  opacity: 0.5 !important;
}

/* 8. qe-lib-inline-count badge (Library count) — less prominent */
.qe-lib-inline-count { color: var(--txt3);
  font-size: 8px !important; font-weight: 800; font-family: var(--font-mono);
  opacity: 0.45 !important; }

/* 9. nav-lib-total badge — dihilangkan sesuai request; badge jumlah di masing-masing sub-folder
   Library (nav-lib-folders) TIDAK terpengaruh, tetap tampil seperti biasa. */
#nav-lib-total.ni-badge {
  display: none !important;
}

/* 10. nav-profile handle (@createrus) — dibuat lebih jelas terbaca,
   tapi tetap TIDAK bold (font-weight default/normal, bukan 600/800). */
.nav-profile-handle {
  font-size: 11px !important; color: var(--txt3); font-family: var(--font-mono); letter-spacing: .1px;
  opacity: 0.7 !important;
  font-weight: 400 !important; }

/* 11. nav-profile-name — slightly smaller */
.nav-profile-name {
  font-size: 12px !important;
  font-weight: 600 !important; color: var(--txt); margin-bottom: 3px; cursor: pointer; letter-spacing: -.5px; line-height: 1.2; font-family: var(--font-sans); font-style: normal; }

/* 12. rp-ratio-label ("RASIO IDEAL") — lose the uppercase shout */
.rp-ratio-label {
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important; color: var(--txt3); margin-bottom: 7px;
  opacity: 0.45 !important; }

/* 13. rp-ratio-item text — more muted */
.rp-ratio-item {
  font-size: 9.5px !important; color: var(--txt3); font-weight: 500;
  opacity: 0.65 !important; }

/* 14. "Example" ghost button — ghost it further, it's secondary action */
.qe-contoh-btn {
  opacity: 0.45 !important;
  font-size: 11px !important;
}
.qe-contoh-btn:hover {
  opacity: 0.85 !important;
}

/* 16. qe-mode-divider (pipe between Fast/Realtime) — invisible when modes are quiet */
.qe-mode-divider {
  opacity: 0.3 !important;
}

/* 17. Fast mode row — consistent spacing di semua ukuran layar */
/* ── Quick Engine fast-mode-row ── */
#qe-fast-mode-row {
  overflow: visible !important;
  margin-top: 16px !important;
  margin-bottom: 2px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border) !important;
}

/* Mobile ≤480px: label toggle tampil, reset icon-only */
@media (max-width: 480px) {
  #qe-fast-mode-row .qe-mode-label { display: inline !important; }
  #qe-fast-mode-row .qe-mode-divider { margin: 0 1px !important; }
  .qe-row-reset-label { display: none !important; }
  .qe-row-reset-btn { padding: 3px 8px !important; }
  #qe-fast-mode-row { gap: 5px !important; }
}

/* 18. qnote-title-label "Notes" — smaller */
.qnote-title-label {
  font-size: 11px !important;
  font-weight: 500 !important; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--txt2); font-family: var(--font-mono); line-height: 1;
  opacity: 0.65 !important;
}

/* 19. qnote-counter — tiny mono count next to Notes */
.qnote-counter { font-size: 8px; font-weight: 600; color: var(--txt3); font-family: var(--font-mono); line-height: 1;
  opacity: 0.4 !important; }

/* 20. nav-bottom-note disclaimer — even more ghost (was .30, now .18) */
.nav-bottom-note {
  opacity: 0.38 !important;
}
html.dark .nav-bottom-note {
  opacity: 0.30 !important;
}

/* 21. Step 2 field count badge — softer pill */
#qe-field-count-badge {
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  opacity: 0.6 !important;
  background:var(--tint-2) !important;
  border: 0.5px solid rgba(0,0,0,.08) !important;
}

/* 22. parse-status found state — keep vibrant (green dot) but text lighter */
.qe-parse-status.found {
  color: var(--txt3) !important;
  font-size: 10.5px !important; }

/* 23. "↺ Reset" ghost button in step 2 — very quiet */
.qe-card-head .qe-btn-ghost[onclick*="qeClearFields"] {
  opacity: 0.4 !important;
  font-size: 11px !important;
}
.qe-card-head .qe-btn-ghost[onclick*="qeClearFields"]:hover {
  opacity: 0.85 !important;
}


/* ── Storage quota banner (ctr-topbar-storage-banner) ── */
#ctr-topbar-storage-banner { transition: background .3s, color .3s; }
#ctr-topbar-storage-banner.tsb-warn  { background: #FF9500; color: #fff; }
#ctr-topbar-storage-banner.tsb-crit  { background: #FF3B30; color: #fff; }
html.dark #ctr-topbar-storage-banner.tsb-warn { background: #B36B00; }
html.dark #ctr-topbar-storage-banner.tsb-crit { background: #C0392B; }
body.ctr-storage-banner-visible .main-layout { padding-top: calc(var(--topbar-h,60px) + 36px); }
body.ctr-storage-banner-visible .left-nav {
  top: calc(var(--topbar-h,60px) + 36px + var(--nav-v-gap)) !important;
  height: calc(100vh - var(--topbar-h,60px) - 36px - (var(--nav-v-gap) * 2)) !important;
}
body.ctr-storage-banner-visible .right-panel {
  top: calc(var(--topbar-h,60px) + 36px + var(--nav-v-gap)) !important;
  height: calc(100vh - var(--topbar-h,60px) - 36px - (var(--nav-v-gap) * 2)) !important;
}

/* ── FIX: cegah elemen dengan visibility:visible inline meng-override
   ancestor yang di-hide (visibility:hidden) saat transisi login → app.
   visibility TIDAK seperti display — child bisa override visibility
   parent jika child punya nilai visibility sendiri. Force-inherit
   selama login screen masih ada di DOM. ── */
body:has(#ctr-login-screen) .main-layout * {
  visibility: inherit !important;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH: Template Library — dari jendela mengambang (floating modal +
   backdrop hitam transparan) menjadi HALAMAN NORMAL, konsisten dengan
   menu lain (Home, Quick Engine, Brackets, Pro Mode): statis di dalam
   alur .main-layout, didorong oleh sidebar kiri (.left-nav) & sidebar
   kanan (.right-panel) yang tetap terlihat — bukan lagi menutupi
   seluruh layar di atas menu lain.

   Sengaja pakai selector ID (#qe-lib-overlay), BUKAN class
   (.qe-lib-overlay) — class itu masih dipakai bersama oleh banyak
   modal/dialog LAIN (konfirmasi, error, folder, rename, move, meta,
   export, dll) yang memang seharusnya tetap tampil sebagai dialog
   mengambang seperti biasa. Override di bawah ini hanya menempel ke
   jendela Library utama.
   ════════════════════════════════════════════════════════════════════ */
#qe-lib-overlay {
  /* UI/UX FIX 2026-08-02: sebelumnya `transition: none` di sini — ID
     selector (#qe-lib-overlay) menang cascade lawan `.feed-col
     { transition: margin var(--dur-base) var(--ease); }` (base.css/
     components.css awal), padahal elemen ini JUGA memakai class
     `feed-col` (lihat index.html: class="qe-lib-overlay feed-col") agar
     ikut didorong margin-left/margin-right saat sidebar kiri/kanan
     ditoggle atau tombol Full View diklik — sama seperti .page milik
     Home/Brackets/dll. Karena `transition` adalah shorthand, override
     `none` di sini menghapus TOTAL transition margin yang diwariskan,
     jadi lebar konten Library melompat instan alih-alih meluncur mulus.
     Sekarang diberi transition margin sendiri dengan durasi & easing
     YANG SAMA PERSIS dengan .feed-col, supaya perilakunya seragam
     dengan menu lain. opacity/transform sengaja TIDAK diikutkan karena
     sudah dipaksa statis (opacity:1 !important, transform:none
     !important di rule .qe-lib-modal) — buka/tutup window ini dikontrol
     lewat display:none/flex, bukan fade/scale. */
  background: transparent;
  transition: margin var(--dur-base) var(--ease);
  isolation: isolate;
  position: static;
  inset: auto;
  z-index: auto;
  padding: 0;
  display: none;
  opacity: 1;
  pointer-events: auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start; }
#qe-lib-overlay.show,
#qe-lib-overlay.hiding { display: flex; opacity: 1; pointer-events: auto; }
#qe-lib-overlay .qe-lib-modal {
  /* flex-grow, bukan height:100% — parent (.feed-col) cuma punya
     min-height, bukan height eksplisit, jadi persentase tinggi tidak
     bisa diandalkan di sini */
  /* BUG FIX: toolbar (breadcrumb + action bar + search) dulu cuma
     "pintar" collapse ke mode ringkas (ikon overflow "..." dsb — pola
     yang sudah benar, contoh: mode HP) kalau LEBAR LAYAR/VIEWPORT yang
     sempit (@media). Padahal Library sekarang jadi halaman statis yang
     didesak sidebar kiri+kanan, jadi box qe-lib-modal-nya sendiri bisa
     jauh lebih sempit dari viewport (mis. viewport 1400px tapi modal
     cuma ~480px karena kedua sidebar kebuka). @media tidak tahu itu,
     sehingga toolbar TIDAK collapse dan tombol-tombolnya numpuk/nabrak
     satu sama lain persis seperti di screenshot. Container query di
     bawah bikin toolbar collapse berdasar LEBAR MODAL ITU SENDIRI,
     bukan viewport — jadi selalu rapi di ukuran window berapa pun. */
  transform: none !important;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
  width: 100%; max-width: none;
  flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
  border-radius: var(--r16);
  box-shadow: none;
  opacity: 1 !important;
  container-type: inline-size;
  container-name: qelib-toolbar;
}

/* ════════════════════════════════════════════════════════════════════
   Container-query version dari pola compact "mode HP" yang sudah ada
   (isinya SENGAJA disamakan persis dengan blok @media(max-width:600px)
   yang menangani .qe-lib-bar/.qe-lib-breadcrumb/.qe-lib-action-bar/
   .qe-lib-search-wrap) — bedanya trigger-nya bukan viewport, tapi lebar
   #qe-lib-overlay .qe-lib-modal sendiri lewat container-name di atas.
   ════════════════════════════════════════════════════════════════════ */
@container qelib-toolbar (max-width: 680px) {
  .macos-titlebar { padding: 10px 12px; }
  .macos-window-title { font-size: 12px; }
  .qe-lib-folder-drawer-btn { display: flex !important; }

  .qe-lib-active-folder-pill { display: none !important; }
  .qe-lib-bc-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
    display: block !important;
  }

  /* Bar: tight, no gap — items use their own margins */
  .qe-lib-bar {
    gap: 0 !important;
    padding: 5px 10px !important;
    min-height: 42px !important;
    overflow: hidden !important;
  }

  /* LEFT: folder icon + sep + name — takes all available space */
  .qe-lib-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    padding-right: 4px !important;
    transition: opacity var(--dur-base), max-width var(--dur-base) cubic-bezier(.4,0,.2,1) !important;
  }

  /* MIDDLE: action bar — only the grid icon + add button, rest tucked
     into the "…" overflow dropdown */
  .qe-lib-action-bar {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 2px !important;
    justify-content: flex-end !important;
    transition: opacity var(--dur-base), max-width var(--dur-base) cubic-bezier(.4,0,.2,1) !important;
  }

  #qe-sort-wrap { display: none !important; }
  .qe-lib-ab-sep { display: none !important; }
  .qe-lib-ab-sep-collapse { display: none !important; }
  .qe-lib-ab-inline-group { display: none !important; }

  /* BUG FIX 2026-08-01 ("mode tanggung" — sidebar kiri+kanan terbuka,
     modal jadi sempit walau viewport browser masih lebar): blok
     container-query ini SEBELUMNYA cuma set width/height/flex-shrink
     utk overflow trigger, TIDAK PERNAH set `display` balik ke visible.
     Trigger-nya jadinya masih nurut rule viewport-based lama
     "@media(min-width:681px){display:none!important}" — yang MENANG
     karena viewport browser di skenario sidebar-terbuka ini memang
     ≥681px, walau MODAL/CONTAINER-nya sendiri sudah ≤680px dan
     seharusnya collapse. Hasilnya: inline-group ke-hide (rule di atas),
     TAPI trigger overflow-nya ikut ke-hide juga → cuma nyisa "+P" +
     search doang, semua aksi (Export/Import/Kelola Icon&Tag/Recycle
     Bin/Pilih Semua/sort) jadi TIDAK BISA DIAKSES SAMA SEKALI. Fix di
     sini eksplisit paksa `display:inline-flex` menang (blok ini ada di
     bawah file, jadi menang tie-break atas rule viewport lama yang di
     atas, sama-sama !important & selector sama). */
  .qe-lib-ab-overflow-trigger,
  #qe-lib-actions-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  .qe-lib-ab-overflow-trigger::before,
  #qe-lib-actions-trigger::before {
    width: 14px !important;
    height: 10px !important;
  }
  .qe-lib-action-bar .qe-ab-btn--primary {
    width: 34px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 17px !important;
  }

  /* Search: collapsed to icon by default (sama seperti global rule,
     ditegaskan lagi di sini biar konsisten walau container sempit) */
  .qe-lib-search-wrap {
    flex: 0 0 0px !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .qe-lib-bar.search-open .qe-lib-search-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-left: 0 !important;
  }
  .qe-lib-bar.search-open .qe-lib-breadcrumb,
  .qe-lib-bar.search-open .qe-lib-action-bar {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding-right: 0 !important;
  }
}

/* Titlebar ala macOS (traffic light merah/kuning/hijau) TETAP dipakai
   walau Library sudah jadi halaman statis (bukan jendela mengambang) —
   sekadar dekorasi identitas visual + tombol Tutup, bukan lagi kontrol
   window sungguhan. (Rule display:none lama dihapus — lihat fix desktop
   di bawah yang mengembalikannya tampil di semua mode.) */

@media (max-width: 600px) {
  /* Di mobile, sidebar kiri/kanan memang sudah disembunyikan (mode
     fullview bawaan), jadi Library tetap tampil penuh layar seperti
     sebelumnya — hanya positioning-nya saja yang sekarang statis. */
  #qe-lib-overlay .qe-lib-modal { border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   BUG FIX (ukuran & shadow Library): blok "halaman biasa" di atas
   masih KETIBAN override lama section 10-14 (jauh di atas file ini) —
   rule-rule itu ditulis !important dan menyasar SEMUA modal berbasis
   .qe-lib-modal (Detail/Edit/Meta/Recycle/Export ikut memakainya juga,
   makanya sengaja !important supaya seragam) sehingga walau posisi
   #qe-lib-overlay sudah static, ia tetap kebagian padding 16px, tinggi
   terkunci 82vh, box-shadow, radius 20px, DAN macos-titlebar-nya masih
   dipaksa `display:flex!important` oleh rule ".macos-titlebar { ...
   !important }" (canonical titlebar unifier). Hasilnya: Library masih
   kelihatan seperti window mengambang dengan jarak atas/bawah yang
   tidak sama dengan sidebar kiri/kanan, plus sisa shadow/backdrop.

   Fix di bawah ini SENGAJA di-scope ketat ke #qe-lib-overlay saja
   (tidak pernah menyentuh #qe-lib-meta-modal/#qe-recycle-overlay/
   #qe-export-modal/dll — modal-modal itu memang harus tetap mengambang
   seperti biasa) dan dipasang !important supaya menang telak atas
   override lama di atas, apa pun urutannya. Ukuran & posisi disamakan
   PERSIS dengan .left-nav / .right-panel: mulai dari (topbar-h +
   nav-v-gap) dari atas, berhenti dengan jarak nav-v-gap yang sama dari
   tepi bawah, radius r16, tanpa shadow/backdrop residual apa pun.

   UI/UX FIX 2026-08-01 ("mode sempit" kelihatan pendek + masih ada
   shadow): threshold-nya SEBELUMNYA cuma ≥769px, padahal sidebar
   kiri/kanan sendiri sudah masuk mode drawer/off-canvas sejak ≤768px
   (lihat blok raksasa "@media (max-width:768px), (max-height:500px)
   and (max-width:1024px)" di atas — --topbar-h turun ke 46px &
   .feed-col margin-left/right sudah di-nol-kan di situ). Jadi ada
   CELAH 601–768px di mana sidebar SUDAH hilang (layar sudah "sempit")
   tapi Library BELUM kebagian fix ini — dia jatuh balik ke override
   lama section 13/14 (jauh di atas file ini): box-shadow tebal, radius
   20px, tinggi terkunci 82vh (jauh lebih pendek dari viewport, makanya
   kelihatan "aneh terlalu pendek" dengan jarak kosong di atas & bawah),
   plus overlay dapat padding:16px lagi (window jadi kelihatan
   mengambang lagi, bukan halaman statis). Diturunkan ke ≥601px supaya
   celah itu tertutup dan seragam persis dengan mode desktop; ≤600px
   (mode HP asli, ".mob-fs-default" full-screen bottom sheet) sengaja
   tetap tidak disentuh sama sekali. ══════════ */
/* UI/UX FIX 2026-08-01: blok ini SEBELUMNYA dibungkus
   `@media (min-width: 601px)`, jadi mode HP (≤600px) — yang dulu masih
   dipaksa pakai class mob-fs-default/mac-maximized (bottom-sheet 78vh /
   fullscreen 0-padding, lihat blok "mode kecil" & "mac-maximized" jauh di
   atas file ini) — TIDAK PERNAH kebagian ukuran & margin yang sama seperti
   desktop, sehingga kotak Library kelihatan "terlalu pendek" dan masih
   bawa shadow bawaan mode HP tsb. Sekarang js/mobile-fixes.js sudah tidak
   lagi menambahkan mob-fs-default/mac-maximized ke #qe-lib-overlay sama
   sekali (lihat FS_IDS di sana), jadi selector `:not(.mac-maximized)` di
   bawah ini otomatis cocok di SEMUA lebar layar — blok ini sengaja
   di-unwrap dari @media supaya margin atas/bawah/kiri/kanan & box-shadow:
   none berlaku 1:1 sama persis antara desktop maupun HP. Nested
   `@media (max-width:768px)` di bagian bawah blok ini TETAP dipertahankan
   apa adanya — itu cuma mengecilkan padding kiri/kanan (sama seperti
   .page/.qe-page/.bb-page/.pm-page lain saat sidebar off-canvas), bukan
   mengubah treatment jadi bottom-sheet lagi. */
#qe-lib-overlay:not(.mac-maximized) {
    /* UI/UX FIX: SEMUA halaman lain (Home = .page, Quick Engine = .qe-page,
       Brackets = .bb-page, Pro Mode = .pm-page) pakai padding kiri-kanan
       24px TAMBAHAN di atas jarak arsitektural bawaan .feed-col (yang
       sudah otomatis memberi jarak var(--sb-gap)=20px dari sidebar lewat
       margin-left:var(--nav-w) / margin-right:var(--rp-w)). Sebelumnya
       #qe-lib-overlay diset `padding:0`, jadi Library CUMA dapat jarak
       20px itu dari sidebar — kelihatan lebih mepet dibanding halaman
       lain yang total jaraknya 20px + 24px = 44px. Disamakan di sini
       dengan menambah padding kiri-kanan 24px, PERSIS seperti pola
       `padding: 24px` yang dipakai .page/.qe-page/.bb-page/.pm-page. */
    /* Ceiling, bukan cuma lantai — height (bukan min-height) supaya box ini
       BOUNDED persis seperti .left-nav, dan tidak lagi ikut memanjang saat
       jumlah template bertambah. overflow:hidden mengunci batas ini supaya
       .qe-lib-body di dalamnya yang kebagian tugas scroll, bukan card-nya. */
    /* BUG FIX: elemen ini juga membawa class shared ".feed-col", yang
       punya sendiri `min-height: calc(100dvh - var(--topbar-h))` (≈ tinggi
       viewport dikurangi topbar SAJA, tanpa dikurangi nav-v-gap*2). Nilai
       itu selalu LEBIH BESAR dari height/max-height di atas (beda persis
       nav-v-gap*2, 48px), dan menurut spec CSS, min-height selalu menang
       atas height & max-height kalau bentrok — akibatnya kotak Library
       selalu dipaksa 48px lebih tinggi dari .left-nav/.right-panel walau
       height & max-height di atas sudah di-set match persis. Reset di
       sini supaya height di atas yang benar-benar menentukan tinggi
       akhir, dan batas bawah Library akhirnya sejajar dengan sidebar. */
    padding: 0 24px !important;
    background: transparent !important;
    margin-top: var(--nav-v-gap) !important;
    margin-bottom: var(--nav-v-gap) !important;
    height: calc(100dvh - var(--topbar-h) - (var(--nav-v-gap) * 2)) !important;
    max-height: calc(100dvh - var(--topbar-h) - (var(--nav-v-gap) * 2)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
  #qe-lib-overlay:not(.mac-maximized) .qe-lib-modal {
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    border-radius: var(--r16) !important;
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
  }
  /* UI/UX FIX: titlebar macOS (traffic light merah/kuning/hijau + judul
     "Template Library") DIKEMBALIKAN tampil lagi di mode desktop —
     rule lama di sini memaksa disembunyikan (display:none!important),
     padahal versi mobile & mac-maximized tetap menampilkannya (menang
     lewat canonical unifier ".macos-titlebar{display:flex!important}"
     di atas), jadi jadi tidak konsisten: titlebar cuma hilang khusus di
     satu mode ini. Sekarang disamakan — titlebar selalu tampil, dengan
     radius atas menyatu dengan .qe-lib-modal supaya tetap rapi. */
  #qe-lib-overlay:not(.mac-maximized) .macos-titlebar {
    display: flex !important;
    border-radius: var(--r16) var(--r16) 0 0;
  }
  /* Traffic light dot — dikunci 12px persis sama dengan mode desktop
     (bukan 16px yang dipakai khusus ≤600px), supaya seragam di seluruh
     rentang ≥601px ini walau @container di atas mengecilkan padding
     titlebar-nya saat modal/toolbar menyempit. */
  #qe-lib-overlay:not(.mac-maximized) .macos-btn {
    width: 12px !important;
    height: 12px !important;
  }
  #qe-lib-overlay:not(.mac-maximized) .macos-traffic-lights {
    gap: 7px !important;
  }

  /* Di rentang 601–768px sidebar kiri/kanan sudah off-canvas (mode
     drawer HP — lihat blok besar @media(max-width:768px) di atas),
     jadi .feed-col di situ sudah tidak lagi punya margin-left/right
     dari sidebar. Halaman lain (.page/.qe-page/.bb-page/.pm-page) ikut
     mengecilkan padding horizontal jadi var(--sb-gap)=20px di breakpoint
     yang SAMA (lihat komentar "UI/UX FIX" di blok itu) — disamakan di
     sini juga supaya Library konsisten dengan halaman lain, bukan malah
     tetap 24px sendirian. */
  @media (max-width: 768px) {
    #qe-lib-overlay:not(.mac-maximized) {
      padding: 0 var(--sb-gap) !important;
    }
  }

/* ════════════════════════════════════════════════════════════════════
   FIX FINAL — Toolbar Template Library: tombol-tombol (sort, export,
   import, recycle bin, kelola, pilih semua, +P) tidak pernah benar-
   benar presisi di TENGAH toolbar. Root cause: toolbar sebelumnya pakai
   flex biasa (breadcrumb kiri lebar tetap ~195px, search kanan collapse
   ke ~32px ikon) lalu action-bar di tengah diberi `flex:1;justify-
   content:center` — itu cuma men-centering DIRINYA di dalam SISA ruang
   antara breadcrumb & search, bukan di tengah toolbar SECARA UTUH. Kalau
   dua sisi (kiri/kanan) tidak sama lebar (dan memang tidak pernah sama:
   195px vs ~32px), pusat "sisa ruang" itu otomatis condong lebih dekat
   ke sisi yang lebih sempit — makanya gerombolan tombol selalu terlihat
   nempel/dominan ke kanan, persis seperti yang dilaporkan.

   Solusi: ganti .qe-lib-bar dari flex ke CSS GRID 3 kolom
   `minmax(0,1fr) auto minmax(0,1fr)`. Kolom tengah (action-bar) otomatis
   selebar kontennya sendiri, dan DIJEPIT oleh dua kolom sisi yang
   PASTI SAMA LEBAR (1fr = 1fr) — jadi action-bar selalu presisi di
   tengah toolbar, berapa pun panjang teks breadcrumb atau lebar search
   box saat itu (termasuk saat search sedang dibuka/collapse). Blok ini
   sengaja diletakkan PALING BAWAH file (di luar semua @media) supaya
   menang cascade di atas seluruh rule qe-lib-bar/qe-lib-breadcrumb/
   qe-lib-action-bar/qe-lib-search-wrap versi lama di semua breakpoint
   (mobile & desktop) — jadi satu aturan ini berlaku konsisten di semua
   ukuran layar, tidak perlu ditambal lagi per breakpoint. ════════════ */

.qe-lib-bar {
  /* FIX: dulu var(--bg3) (#F9F9FB, agak keabuan), beda tone dari
     .macos-titlebar/.qe-lib-head/.qe-lib-tagbar-row di sekitarnya yang
     semuanya var(--bg2) (putih) — sekarang disamakan supaya 1 tone. */
  display: grid !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-bottom: 1px solid var(--border) !important; flex-shrink: 0;
  background: var(--bg2) !important;
  position: relative !important;
  z-index: 50 !important;
  min-height: 44px !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  grid-template-rows: auto !important;
  column-gap: 6px !important;
}

.qe-lib-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding-right: 8px !important;
  width: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}
.qe-lib-action-bar {
  display: flex !important;
  align-items: center !important;
  gap: 1px !important;
  padding: 0 4px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  background: transparent !important; position: relative; z-index: 10;
  justify-content: center !important; border-bottom-color: transparent;
  border-bottom: none !important;
  min-height: auto !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: visible !important;
  border: none !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: max-content !important;
}
.qe-lib-search-wrap {
  position: relative !important;
  flex: 0 0 0px !important;
  min-width: 0 !important;
  max-width: 0 !important;
  z-index: 10 !important;
  padding-left: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: flex-basis var(--dur-slow) cubic-bezier(.4,0,.2,1),
              max-width 0.25s cubic-bezier(.4,0,.2,1),
              opacity 0.18s,
              padding-left 0.25s !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
/* ── FIX: tombol kaca-pembesar (#qe-lib-search-toggle-btn) di-inject
   lewat JS (js/ui-fixes.js) sebagai anak ke-4 di dalam .qe-lib-bar,
   TAPI tidak pernah diberi posisi grid eksplisit. Akibatnya browser
   memakai algoritma auto-placement: karena breadcrumb/action-bar/
   search-wrap sama-sama cuma punya `grid-column` (bukan `grid-row`),
   toggleBtn — yang grid-column & grid-row-nya SAMA SEKALI auto — malah
   "mendahului" & merebut sel row1/col3 SEBELUM search-wrap sempat
   ditempatkan di situ, sehingga search-wrap kebagian TERDESAK ke baris
   baru (row2) begitu tombol diklik. Itulah sebabnya search box terlihat
   "loncat" ke baris terpisah & toolbar jadi lebih tinggi/aneh saat
   dibuka. Solusi: kunci toggleBtn eksplisit ke sel yang SAMA persis
   dengan search-wrap (row1/col3) — keduanya boleh tumpang tindih di
   satu sel karena hanya salah satu yang terlihat setiap saat (diatur
   lewat opacity/width di rule search-open di bawah). ─────────────── */
#qe-lib-search-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(0,0,0,0.50) !important;
  cursor: pointer !important;
  border-radius: 7px !important;
  transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-base) !important;
  margin-left: 2px !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
/* ── FIX v2: saat search dibuka, box terlihat "mengambang" di tengah
   dengan celah kosong besar di kiri & kanan alih-alih benar-benar
   mepet ke tepi. Penyebab: (1) rule lama cuma nyembunyiin breadcrumb/
   action-bar via opacity+max-width:0, TAPI kolom grid-nya sendiri
   (col1 = minmax(0,1fr), col2 = auto) tetap dihitung terpisah oleh
   grid-template-columns 3-kolom — track col1 tetap ngambil jatah 1fr
   walau isinya kosong; (2) ada cap `max-width:320px !important` dari
   rule lama (baris ~8901) yang bikin box gak pernah selebar penuh.
   Solusi tegas: begitu `.search-open` aktif, GANTI total jadi grid
   1-kolom penuh, dan SEMBUNYIKAN breadcrumb/action-bar/tombol toggle
   total via display:none (bukan cuma opacity) supaya track-nya juga
   ikut hilang — search box jadi satu-satunya elemen, dijamin mepet
   dari ujung kiri sampai ujung kanan toolbar. ─────────────────────── */
.qe-lib-bar.search-open {
  grid-template-columns: minmax(0,1fr) !important;
}
.qe-lib-bar.search-open .qe-lib-breadcrumb,
.qe-lib-bar.search-open .qe-lib-action-bar,
.qe-lib-bar.search-open #qe-lib-search-toggle-btn {
  display: none !important;
}
.qe-lib-bar.search-open .qe-lib-search-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding-left: 0 !important;
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: auto !important;
}

/* ════════════════════════════════════════════════════════════════════
   UI/UX FIX 2026-08-01: hapus total ".qe-lib-active-folder-pill"
   ("📁 <nama folder>  <jumlah>" yang muncul DI BAWAH .qe-lib-bar) —
   ini murni duplikat dari breadcrumb yang sudah tampil DI ATASNYA
   (.qe-lib-bc-name utk nama folder + .qe-lib-bc-count utk jumlahnya,
   di dalam #qe-lib-breadcrumb). Selama ini pill ini SEHARUSNYA sudah
   disembunyikan lewat dua rule !important terpisah (satu di dalam
   @media(max-width:600px) utk HP asli, satu lagi di dalam
   @container qelib-toolbar(max-width:680px) utk toolbar yang menyempit)
   — TAPI dua rule itu mengukur lebar dari 2 elemen container query yang
   BEDA (qe-feedcol = lebar overlay luar vs qelib-toolbar = lebar modal
   dalam, beda ~48px karena padding overlay). Rule yang MENAMPILKAN pill
   (@container qe-feedcol max-width:760px) jadinya bisa aktif duluan
   SEBELUM rule yang MENYEMBUNYIKANNYA (@container qelib-toolbar
   max-width:680px) sempat ikut aktif — ada celah ~48px lebar modal di
   mana pill kelihatan berbarengan dengan breadcrumb yang masih tampil
   penuh di atasnya, persis bug "keterangan folder dobel" yang
   dilaporkan. Solusi tegas & final: matikan total elemen ini di semua
   kondisi (bukan cuma nutup celahnya) — breadcrumb di atas sudah cukup,
   tidak perlu diulang lagi di bawah toolbar. Diletakkan paling akhir
   file supaya menang cascade atas SEMUA rule display:flex lain untuk
   pill ini di atas, apa pun breakpoint/container query-nya. ══════════ */
.qe-lib-active-folder-pill {
  display: none !important; }

/* ══════════ FIX FINAL v3 (light mode only): 3 TINGKAT GRADASI ══════════
   Diletakkan paling akhir file supaya menang cascade atas SEMUA rule
   background sebelumnya, apa pun spesifisitasnya.

   CATATAN PENTING: var(--bg) (#EBEBED) TIDAK BOLEH dipakai untuk blok
   merah — itu persis sama dengan background HALAMAN di luar modal
   (body { background: var(--bg) }), jadi blok merah jadi nyatu/hilang
   dengan sekitarnya (bug yang dilaporkan). Dipakai warna abu custom
   #E3E3E7 yang jelas berbeda & sedikit lebih gelap dari var(--bg),
   supaya tetap kebaca sebagai bar tersendiri terhadap halaman di
   belakangnya.

   1) BLOK ATAS (titlebar traffic-light + header nama folder + action bar
      ikon sort/trash/gear/+P/search + baris pills tag) => var(--bg).

   2) SIDEBAR kiri "LIBRARY/FOLDER/Storage/Cache Sweep/dst" => var(--bg3).

   3) AREA DAFTAR LIST TEMPLATE (header kolom NAMA/FOLDER/UKURAN/TANGGAL +
      baris-baris template) => var(--bg2), putih murni. */

html:not(.dark) .macos-titlebar,
html:not(.dark) .qe-lib-head,
html:not(.dark) .qe-lib-bar,
html:not(.dark) .qe-lib-tagbar-row,
html:not(.dark) .qe-lib-tags-row {
  background: var(--bg3) !important;
}

html:not(.dark) .qe-lib-sidebar-wrap,
html:not(.dark) .qe-lib-sidebar-wrap .qe-lib-folder-sidebar,
html:not(.dark) .qe-lib-sidebar-wrap .qe-lib-folder-item {
  background: var(--bg2) !important;
}

html:not(.dark) .qe-lib-sidebar-wrap .qe-lib-folder-item.active {
  background: #000 !important;
  color: #fff !important;
}

html:not(.dark) .qe-lib-content-wrap,
html:not(.dark) .qe-lib-body,
html:not(.dark) .qe-finder-header,
html:not(.dark) .qe-finder-row,
html:not(.dark) .qe-finder-row:nth-child(even),
html:not(.dark) .qe-finder-row-wrap.expanded > .qe-finder-row,
html:not(.dark) .qe-finder-breadcrumb-row {
  background: var(--bg2) !important;
}