/* ============================================================
   Pro Mode / Developer Setting — [DESIGN DRAFT, DUMMY]
   Prefix: .pm-  (Pro Mode). Reuse token warna sama dengan halaman
   lain (--bg2, --border2, --txt, dst) supaya otomatis ikut
   light/dark mode tanpa override tambahan.

   ARAH VISUAL: monokrom hitam & putih ala Apple / macOS System
   Settings — permukaan datar bertingkat abu-abu netral, tipografi
   tegas dengan letter-spacing negatif, garis tipis alih-alih warna
   untuk membedakan hierarki. SATU aksen warna dipakai sangat hemat
   (var(--link), biru khas accent-color default macOS) — cuma untuk
   menandai status "ON/aktif", bukan dekorasi. Badge "PRO" pakai
   pill solid hitam/putih terbalik (bukan warna) supaya kesan
   "premium" datang dari kontras & material, bukan dari warna emas.

   STATUS: LIVE untuk semua 4 grup (Quick Engine, Brackets, Library,
   Backup & Sinkronisasi) — lihat js/qe-pro-mode.js untuk logic
   on/off & gating fiturnya. Base style switch di bawah ini (redup +
   pointer-events:none) tetap dipertahankan sebagai fallback visual;
   di-override jadi interaktif lewat blok "PRO MODE — LIVE" di bawah.
   ============================================================ */

.pm-page {
  /* Lebar disamakan dengan .page (Home) & .qe-page (Quick Engine): full
     width mengikuti .feed-col, tanpa max-width/centering sendiri, supaya
     lebar kartu/konten konsisten antar halaman. */
  padding: 24px 24px 40px; width: 100%; animation: pageIn .28s var(--ease);
  box-sizing: border-box;
}

/* ---- Header card ---- */
.pm-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 18px;
  box-shadow: var(--shadow-card); padding: 20px 22px;
}
.pm-header-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,0,0,.07), rgba(0,0,0,.03));
  border: 1px solid var(--border2); color: var(--txt);
}
html.dark .pm-header-icon { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); }
.pm-header-title { font-size: 17px; font-weight: 800; color: var(--txt); letter-spacing: -.4px; line-height: 1.2; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
/* Badge "PRO" — pill solid terbalik, bukan warna. Ini identitas premium yang paling kuat: kontras material, bukan hue. */
.pm-header-badge-inline {
  font-size: 9px; font-weight: 800; letter-spacing: .8px; color: #fff;
  background: #1c1c1e; border: 1px solid #1c1c1e;
  padding: 2.5px 7.5px; border-radius: 99px; text-transform: uppercase;
}
html.dark .pm-header-badge-inline { color: #1c1c1e; background: #f5f5f7; border-color: #f5f5f7; }
.pm-header-sub { font-size: 11.5px; font-weight: 500; color: var(--txt3); line-height: 1.5; max-width: 560px; }

/* ---- Groups ---- */
.pm-groups { display: flex; flex-direction: column; gap: 12px; }
.pm-group {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.pm-group:hover { border-color: var(--border3); }

/* ---- Header baris "grup/menu" (mis. "Quick Engine · 9 fitur") ----
   Dibedakan dari baris sub-fitur lewat wash abu-abu netral (bukan
   tint warna) + border lebih tegas, nama lebih besar/tebal, dan
   switch versi besar (.pm-switch-lg) — supaya user langsung paham
   ini "toggle induk". ---- */
.pm-group-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.028), rgba(0,0,0,.004));
  border-bottom: 1px solid var(--border2);
}
html.dark .pm-group-head { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.006)); }
.pm-group-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg4); border: 1px solid var(--border2); color: var(--txt2);
}
.pm-group-head-text { flex: 1; min-width: 0; }
.pm-group-name { font-size: 13.5px; font-weight: 800; color: var(--txt); margin-bottom: 2px; letter-spacing: -.15px; }
.pm-group-desc { font-size: 11px; font-weight: 500; color: var(--txt3); line-height: 1.5; }

/* ---- Daftar sub-fitur di bawah header — latar polos, plus garis
   sambung tipis di kolom ikon buat kesan "anak" dari grup di atasnya. ---- */
.pm-group-items { display: flex; flex-direction: column; position: relative; background: var(--bg2); }
.pm-group-items::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 31px; width: 1px;
  background: var(--border);
}
.pm-item {
  position: relative;
  padding: 0 16px 0 46px;
  border-bottom: 1px solid var(--border);
}
.pm-item:last-child { border-bottom: none; }

/* ---- Baris utama: nama fitur (klik untuk buka/tutup keterangan) + switch ---- */
.pm-item-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.pm-item-name-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 6px 8px; margin: -6px 0 -6px -8px;
  border-radius: 8px;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.pm-item-name-btn:hover { background: rgba(0,0,0,.035); }
html.dark .pm-item-name-btn:hover { background: rgba(255,255,255,.045); }
.pm-item-name-btn:hover .pm-item-name { color: var(--txt); }
.pm-item-name-btn:hover .pm-item-info-ic { color: var(--txt2); opacity: .85; }
.pm-item-name-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.pm-item-name { font-size: 12px; font-weight: 600; color: var(--txt2); transition: color var(--dur-base); }
/* Ikon "i" dibuat pointer-events:none supaya klik yang jatuh persis di atas
   svg-nya tetap selalu ditangkap oleh <button> pembungkusnya. */
.pm-item-info-ic { flex-shrink: 0; color: var(--txt3); opacity: .5; transition: all var(--dur-base); pointer-events: none; }
.pm-item[data-open="true"] .pm-item-info-ic { color: var(--txt); opacity: 1; transform: rotate(180deg); }
.pm-item[data-open="true"] .pm-item-name { color: var(--txt); font-weight: 700; }

/* ---- Panel keterangan: collapsed by default, expand via max-height ---- */
.pm-item-desc-panel {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  opacity: 0;
}
.pm-item[data-open="true"] .pm-item-desc-panel { max-height: 140px; opacity: 1; }
.pm-item-desc {
  font-size: 11px; font-weight: 500; color: var(--txt3); line-height: 1.5;
  padding: 0 0 12px;
}
/* Label lokasi ("Muncul di: ...") — dibuat gaya "eyebrow label" khas
   panel System Settings Apple: huruf kecil, tracking lebar, abu-abu
   netral, TANPA ikon emoji berwarna supaya tetap monokrom. */
.pm-item-desc-where {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .6px;
  color: var(--txt3); margin-bottom: 4px; text-transform: uppercase;
}

/* ---- Badge jumlah fitur di sebelah nama menu ("Quick Engine · 5 fitur") ---- */
.pm-group-count {
  font-size: 9.5px; font-weight: 700; color: var(--txt3);
  background: rgba(0,0,0,.045); border: 1px solid var(--border2);
  padding: 1.5px 7px; border-radius: 99px; margin-left: 6px; white-space: nowrap;
  vertical-align: 1px;
}
html.dark .pm-group-count { background: rgba(255,255,255,.06); }

.pm-group-example-note {
  font-size: 10px; font-weight: 600; color: var(--txt3); font-style: italic;
  padding: 8px 16px 12px; text-align: right;
}

/* ---- Switch (dummy — non-interaktif) ----
   Track abu-abu netral saat OFF; saat ON pakai fill monokrom (hitam/putih
   sesuai tema) — full monochrome, tidak ada aksen warna sama sekali di
   toggle ini. Knob diberi shadow halus supaya berasa 3D/tactile, bukan
   flat. pointer-events:none + cursor:default karena memang belum boleh
   diklik di tahap draft ini. */
.pm-switch input[type="checkbox"] { display: none; }
.pm-switch-pill {
  width: 34px; height: 19px; border-radius: 10px; flex-shrink: 0;
  background: rgba(0,0,0,.11); border: 1px solid rgba(0,0,0,.16);
  position: relative; transition: all var(--dur-base);
}
.pm-switch-pill::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.2);
  transition: all var(--dur-base);
}
html.dark .pm-switch-pill { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.16); }
html.dark .pm-switch-pill::after { background: #e8e8ea; box-shadow: 0 1px 3px rgba(0,0,0,.5); }

.pm-switch input:checked ~ .pm-switch-pill {
  background: rgba(0,0,0,.65); border-color: rgba(0,0,0,.65);
}
.pm-switch input:checked ~ .pm-switch-pill::after { left: 17px; background: #fff; }
html.dark .pm-switch input:checked ~ .pm-switch-pill {
  background: rgba(255,255,255,.65); border-color: rgba(255,255,255,.65);
}
html.dark .pm-switch input:checked ~ .pm-switch-pill::after { background: #1c1c1e; }

.pm-switch-lg { /* ukuran disamakan dengan .pm-switch biasa — lihat aturan dasar di atas */ }

/* Semua switch di halaman draft ini sengaja terlihat sedikit "redup" untuk
   menandakan belum bisa diklik, kecuali yang memang dijadikan contoh ON. */
.pm-switch {
  position: relative; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center;
  pointer-events: none; cursor: default; opacity: .85;
}

/* ---- Badge "PRO" di item nav sidebar kiri — pill solid monokrom,
   senada dengan .pm-header-badge-inline. ---- */
.pm-nav-badge {
  margin-left: auto; flex-shrink: 0; font-size: 8.5px; font-weight: 800; letter-spacing: .5px;
  color: #fff; background: #1c1c1e; border: 1px solid #1c1c1e;
  padding: 1.5px 6px; border-radius: 99px; text-transform: uppercase;
}
html.dark .pm-nav-badge { color: #1c1c1e; background: #f5f5f7; border-color: #f5f5f7; }

@media (max-width: 720px) {
  /* UI/UX FIX: horizontal disamain pakai var(--sb-gap), dulu hardcode 12px */
  /* UI/UX FIX: top pakai var(--nav-v-gap), bukan 16px (file ini di-load
     SETELAH components.css jadi harus difix di sini juga). */
  .pm-page { padding: var(--nav-v-gap) var(--sb-gap) 28px; }
  /* UI/UX FIX: dulu flex-wrap:wrap bikin icon "lompat" jadi baris sendiri
     di atas judul (makan tempat vertikal). Sekarang tetap 1 baris
     (icon sejajar judul), sama pola dengan .lic-header di License. */
  .pm-header { gap: 10px; padding: 14px 14px; }
  .pm-header-icon { width: 34px; height: 34px; }
  .pm-header-title { font-size: 14px; }
  .pm-header-sub {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .pm-item { padding-left: 16px; }
  .pm-group-items::before { display: none; }
}

/* ============================================================
   PRO MODE — LIVE (kategori Quick Engine, Brackets, Library & Backup)
   Grup dengan data-pm-group (quick-engine, brackets, library, backup)
   sudah punya logic on/off nyata (lihat js/qe-pro-mode.js), jadi
   switch di dalamnya HARUS interaktif — override redup/pointer-
   events:none dari style dummy di atas.
   ============================================================ */
.pm-group[data-pm-group="quick-engine"] .pm-switch,
.pm-group[data-pm-group="brackets"] .pm-switch,
.pm-group[data-pm-group="library"] .pm-switch,
.pm-group[data-pm-group="backup"] .pm-switch {
  opacity: 1; pointer-events: auto; cursor: pointer;
}
.pm-group[data-pm-group="quick-engine"] .pm-switch input[type="checkbox"]:focus-visible ~ .pm-switch-pill,
.pm-group[data-pm-group="brackets"] .pm-switch input[type="checkbox"]:focus-visible ~ .pm-switch-pill,
.pm-group[data-pm-group="library"] .pm-switch input[type="checkbox"]:focus-visible ~ .pm-switch-pill,
.pm-group[data-pm-group="backup"] .pm-switch input[type="checkbox"]:focus-visible ~ .pm-switch-pill {
  outline: 2px solid var(--link); outline-offset: 1px;
}

/* ---- Efek gating fitur Quick Engine — dikontrol via class di <body>,
   di-toggle oleh js/qe-pro-mode.js (body.pm-off-<featureKey>). Elemen
   terkait disembunyikan total, KECUALI Master Prompt (lihat blok
   khusus di bawah: dikosongkan, bukan disembunyikan). ---- */
/* FIX: sebelumnya cuma 2 dari 3 tombol "Kirim ke AI" yang ke-cover
   (tombol di tab "Hasil AI" #ai-byok-send-btn & #ai-byok-send-btn-tab2
   ketinggalan), jadi masih nongol walau toggle BYOK OFF. Sekalian
   tutup seluruh panel tab "Hasil AI" (#qe-tab-panel-ai) supaya semua
   isinya — pill provider, tombol fullview, dll — ikut mati total,
   bukan cuma tombol switch tab-nya. */
body.pm-off-byok #qe-restab-ai-btn,
body.pm-off-byok #ai-byok-send-btn,
body.pm-off-byok #ai-byok-send-btn-step2,
body.pm-off-byok #ai-byok-send-btn-tab2,
body.pm-off-byok #qe-tab-panel-ai { display: none !important; }

body.pm-off-compare #ai-byok-fullview-compare-toggle { display: none !important; }

body.pm-off-realtime #qe-realtime-group,
body.pm-off-realtime #qe-realtime-divider2 { display: none !important; }

/* "Tampilkan Draft Field" (hint placeholder di dalam field kosong) —
   toggle + labelnya dibungkus #qe-placeholder-group (lihat index.html)
   supaya bisa disembunyikan sekaligus. Divider #qe-realtime-divider2
   ikut disembunyikan juga di sini (selain di rule pm-off-realtime di
   atas) supaya tidak nyangkut sendirian kalau Realtime masih ON tapi
   toggle ini yang dimatikan. */
body.pm-off-placeholder #qe-placeholder-group,
body.pm-off-placeholder #qe-realtime-divider2 { display: none !important; }

/* "Tampilkan Draft Field (Edit Inline)" — tombol switch tampilan
   Tahap 2 (List <-> Inline dalam Teks) di header kartu #qe-step2.
   Saat OFF, tombolnya disembunyikan total dari Tahap 2 (lihat juga
   reconcileFeatureOff('inlinemode') di qe-pro-mode.js yang otomatis
   memaksa balik ke mode List kalau kebetulan lagi di mode Inline). */
body.pm-off-inlinemode #qe-step2-mode-toggle { display: none !important; }

body.pm-off-bhl #qe-bhl-btn { display: none !important; }

body.pm-off-framework #qe-framework-btn,
body.pm-off-framework #rp-divider-framework,
body.pm-off-framework #rp-head-framework,
body.pm-off-framework #rp-body-framework { display: none !important; }

body.pm-off-gist #qe-publish-qe-btn { display: none !important; }

/* ---- 6 fitur toolbar tambahan (sebelumnya tidak ke-gate sama sekali,
   makanya tetap nongol walau toggle "Quick Engine" OFF) ---- */
body.pm-off-syntaxhl #qe-syntax-hl-btn { display: none !important; }
body.pm-off-tplexpand #qe-tpl-expand-btn { display: none !important; }
body.pm-off-linklib #qe-link-lib-btn { display: none !important; }
body.pm-off-ghgdauto #qe-ghgd-auto-btn { display: none !important; }
body.pm-off-importqr #qe-import-qr-btn { display: none !important; }
body.pm-off-snipmenu #qe-snip-btn { display: none !important; }

/* ============================================================
   PRO MODE — LIVE (kategori Brackets)
   ============================================================ */
/* "Kategori & Item Custom Tanpa Batas" — tombol "+" tambah kategori
   (panel kiri) & baris "Tambah item baru…" (panel kanan, di-render
   ulang tiap ganti kategori — makanya di-hide lewat class, bukan id,
   supaya konsisten kena walau elemennya di-render ulang). */
body.pm-off-brcustom #bb-cat-add-icon-btn,
body.pm-off-brcustom .bb-item-add-row { display: none !important; }

/* "Export/Import Brackets (Excel)" — 2 tombol di toolbar atas
   halaman Brackets. Tombol "Reset ke kategori bawaan" di sebelahnya
   SENGAJA tidak ikut disembunyikan — itu aksi dasar, bukan bagian
   dari fitur Export/Import Excel. */
body.pm-off-brxlsx #bb-export-excel-btn,
body.pm-off-brxlsx #bb-import-excel-btn { display: none !important; }

/* ---- Master Prompt — kondisi khusus diminta: kalau toggle OFF,
   JANGAN sembunyikan pill-nya (biar tata letak tombol di atasnya
   tetap seimbang), cukup "polos"-kan isinya (ikon + teks
   disembunyikan, kotak/pill tetap ada apa adanya, tanpa interaksi). ---- */
body.pm-off-masterprompt #qe-mp-inactive-icon,
body.pm-off-masterprompt #qe-mp-inactive-label,
body.pm-off-masterprompt #qe-mp-inactive-cta {
  visibility: hidden;
}
body.pm-off-masterprompt #qe-mp-inactive-bar,
body.pm-off-masterprompt #qe-mp-active-bar {
  pointer-events: none; cursor: default;
}

/* ============================================================
   PRO MODE — LIVE (kategori Library)
   ============================================================ */
/* "Export/Import" — 2 tombol ikon (↑ Export / ↓ Import) di toolbar
   atas halaman Library. Di-render ulang tiap qeLibRender(), jadi
   di-hide lewat attribute selector [title=...] (bukan id/class) biar
   tetap kena walau tombolnya di-render ulang. */
body.pm-off-libexport .qe-lib-ab-icon-btn[title="Export"],
body.pm-off-libexport .qe-lib-ab-icon-btn[title="Import"] { display: none !important; }

/* "Cache Sweep" — panel dropdown di sidebar Library + panel hasil
   scan di area konten utama. */
body.pm-off-libcachesweep #qe-lft-sweep-panel,
body.pm-off-libcachesweep #qe-lib-sweep-main-panel { display: none !important; }

/* "Cek Update" — panel dropdown di sidebar Library. */
body.pm-off-libupdate #qe-lft-update-panel { display: none !important; }

/* "Zona Bahaya" — panel dropdown di sidebar Library. */
body.pm-off-libdanger #qe-lft-danger-panel { display: none !important; }

/* ============================================================
   PRO MODE — LIVE (kategori Backup & Sinkronisasi)
   "Backup Lokal" & "Sinkronisasi GitHub" berbagi 1 modal + 1 ikon
   topbar yang sama, jadi masing-masing cuma menyembunyikan tab +
   panelnya sendiri; ikon topbar-nya baru disembunyikan kalau
   KEDUANYA off sekaligus (aturan gabungan di bawah).
   ============================================================ */
body.pm-off-backuplocal #gh-byok-tab-local-btn,
body.pm-off-backuplocal #gh-byok-panel-local { display: none !important; }

body.pm-off-backupgh #gh-byok-tab-sync-btn,
body.pm-off-backupgh #gh-byok-panel-sync { display: none !important; }

body.pm-off-backuplocal.pm-off-backupgh #tb-github-byok-btn { display: none !important; }

/* ============================================================
   LEVEL PRESET — 4 tombol "Dasar / Menengah / Penuh / Custom" di
   atas daftar grup. Segmented-control minimalis, satu baris di
   desktop, grid 2x2 di mobile. Status aktif pakai fill monokrom
   var(--txt), full monochrome (tidak ada aksen warna).
   Logic switch-nya ada di js/qe-pro-mode.js (LEVELS + applyLevel).
   ============================================================ */
.pm-level {
  margin-bottom: 16px; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px;
}
.pm-level-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.pm-level-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 10px 6px; border-radius: 12px;
  background: var(--bg4); border: 1px solid var(--border2); cursor: pointer;
  font-family: inherit; transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pm-level-btn:hover { border-color: var(--border3); }
.pm-level-btn:active { transform: scale(.97); }
.pm-level-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.pm-level-btn-name { font-size: 12px; font-weight: 800; color: var(--txt2); letter-spacing: -.1px; }
.pm-level-btn-count { font-size: 10px; font-weight: 600; color: var(--txt3); }

/* Status aktif: solid fill monokrom (var(--txt)/var(--bg2) terbalik),
   pola yang sama dipakai di .qe-export-fmt-btn.active / .pos-ab-chip.active
   di seluruh app — sengaja tidak pakai warna aksen sama sekali. */
.pm-level-btn.active {
  background: var(--txt);
  border-color: var(--txt);
}
.pm-level-btn.active .pm-level-btn-name,
.pm-level-btn.active .pm-level-btn-count { color: var(--bg2); }

.pm-level-desc {
  font-size: 11px; font-weight: 500; color: var(--txt3); line-height: 1.5;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .pm-level { padding: 12px; margin-bottom: 12px; }
  .pm-level-row { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .pm-level-btn { padding: 10px 6px; }
}

/* [FASE 7 RACE-CONDITION FIX #4b] Window singkat saat CTR.Store masih
   hidrasi dari IndexedDB — semua switch/tombol level dikunci (attribute
   disabled) lewat qe-pro-mode.js supaya klik tidak bisa menimpa data
   asli sebelum kombinasi Lite/Plus/Max/Custom yang benar termuat (lihat
   catatan lengkap di _pmResyncWhenStoreReady()/_pmSetInteractive() di
   file itu). Aturan di bawah cuma kosmetik: kasih tanda visual "lagi
   sinkron", bukan mekanisme kunci-nya sendiri (itu di JS). Durasinya
   normalnya cuma beberapa puluh milidetik, jadi sengaja tidak dikasih
   transition/animasi supaya tidak kelihatan "berkedip". */
.pm-store-syncing .pm-switch,
.pm-store-syncing .pm-level-btn {
  opacity: .55;
  cursor: wait;
}
.pm-store-syncing input:disabled + .pm-switch-pill {
  cursor: wait;
}