:root {
  --dur-fast: .14s;
  --dur-base: .18s;
  --dur-slow: .25s;
  --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px; --r99: 999px;
  /* UI/UX FIX: dilebarkan dari 264px -> 300px sesuai permintaan */
  --nav-w: 300px;
  --rp-w: 300px;
  --topbar-h: 52px;
  /* UI/UX FIX: sb-gap horizontal dinaikkan dari 12px -> 20px supaya
     sidebar kiri & kanan tidak terlalu mepet ke tepi samping layar. */
  --sb-gap: 20px;
  /* UI/UX FIX: jarak vertikal (atas/bawah) khusus .left-nav, DIBUAT SENGAJA
     beda dari --sb-gap horizontal, supaya rounded-box sidebar kiri sejajar
     persis dengan padding kotak konten (.page {padding:24px}) — bukan
     ditempelkan mepet ke tepi viewport. Jarak kiri/kanan (--sb-gap) TETAP
     12px seperti semula, cuma atas/bawah yang disesuaikan jadi 24px. */
  --nav-v-gap: 24px;
  /* [REVISI 2026-08-09] Kartu konten tengah (.page) punya padding 24px,
     sedangkan sidebar kiri/kanan cuma berjarak --sb-gap (20px) dari tepi
     layar. Kalau lebar sidebar dibiarkan apa adanya, jarak sidebar->kartu
     jadi 20+24=44px — lebih renggang dibanding jarak tepi layar->sidebar
     yang cuma 20px. --sb-widen dipakai untuk MELEBARKAN sidebar (bukan
     menggeser posisi kartu) sebesar selisih itu, supaya kedua jarak jadi
     sama-sama renggang. Nilainya harus persis sama dengan padding .page. */
  --sb-widen: 24px;
  --shadow-float: 0 6px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --bg:  #EBEBED;
  --bg2: #FFFFFF;
  --bg3: #F9F9FB;
  --bg4: #F0F0F5;
  --bg5: #E8E8EF;
  --txt:  #1C1C1E;
  --txt2: #3A3A3C;
  --txt3: #8E8E93;
  --border:  rgba(0,0,0,.08);
  --border2: rgba(0,0,0,.12);
  --border3: rgba(0,0,0,.18);
  --shadow-card:  none;
  --shadow-modal: 0 4px 24px rgba(0,0,0,.10), 0 1px 6px rgba(0,0,0,.06);
  --txt4:     #636366;
  --ui-muted: #C7C7CC;
  --danger:   #D93025;
  --danger-bg:#FFF5F5;
  --success:  #28C840;
  --link:     #3C78DC;
  --font-mono: ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace;
  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  /* Brand identity font — dipakai KHUSUS utk logo/wordmark "Createrus" (Poppins SemiBold).
     Jangan dipakai utk teks UI biasa. */
  --font-logo: 'Poppins', var(--font-sans);
  --font-logo-icon: 'Poppins', var(--font-sans);
  /* Step number badge — selalu putih bg, hitam teks di semua mode */
  --num-bg: #1C1C1E;
  --num-fg: #FFFFFF;

  /* ── Tint / Line scale ───────────────────────────────────────────
     Skala "tint" (bg redup transparan di atas kartu) & "line" (garis
     tepi tipis) dipakai untuk elemen "sunken" seperti input, textarea,
     output box, tombol sekunder, dsb — supaya tidak lagi ditulis
     berulang sbg angka rgba(0,0,0,.0x) yang beda-beda di tiap file.
     Light mode = hitam transparan; dark mode (lihat theme.css) =
     putih transparan dengan alpha yang disesuaikan supaya kontrasnya
     setara secara visual. JANGAN hardcode rgba(0,0,0,...) baru lagi
     di komponen — pakai token di bawah ini. */
  --tint-1:  rgba(0,0,0,.03);  /* bg sangat redup (output/result box) */
  --tint-2:  rgba(0,0,0,.04);  /* bg redup (input, textarea, tombol sekunder) */
  --tint-05: rgba(0,0,0,.05);  /* varian bg redup (dipakai di beberapa modul BYOK/pro-mode) */
  --tint-3:  rgba(0,0,0,.06);  /* bg hover/focus di atas elemen sunken */
  --tint-3b: rgba(0,0,0,.07);  /* varian bg redup (mode-pill field) */
  --tint-4:  rgba(0,0,0,.08);  /* bg hover lebih kuat */
  --tint-5:  rgba(0,0,0,.10);  /* bg hover paling kuat / active */
  --line-1:  rgba(0,0,0,.10);  /* garis tepi elemen sunken (default) */
  /* garis tepi kartu/kuat (.18) → pakai var(--border3), sudah ada, jangan duplikat */
  --line-2b: rgba(0,0,0,.20);  /* varian garis tepi kuat */
  --line-3:  rgba(0,0,0,.22);  /* garis tepi saat focus */
  --placeholder: rgba(0,0,0,.28); /* warna teks placeholder */

  /* Permukaan blur/translucent (topbar, header sticky) — beda dari
     --bg2 solid karena butuh transparansi utk efek "frosted". */
  --surface-blur: rgba(255,255,255,.97);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
button, select, input, textarea { outline: none; font-family: inherit; touch-action: manipulation; }
a, [onclick] { touch-action: manipulation; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  /* UI/UX FIX 2026-07-30: iPad + Chrome (tab browser biasa, BUKAN "Add to
     Home Screen") — toolbar alamat/tab Chrome yang collapse/expand bikin
     100vh dihitung dari viewport TERBESAR (toolbar ter-collapse), lebih
     tinggi dari area yang benar-benar kelihatan saat toolbar-nya masih
     nongol. Akibatnya body/`.feed-col` (lihat juga rule di bawah) jadi
     kelebihan tinggi dan nyisain area kosong raksasa di bawah footer yang
     masih bisa di-scroll ("serasa scroll tanpa batas"). Mode standalone
     (Add to Home Screen) tidak punya toolbar itu jadi 100vh pas — makanya
     di sana normal. 100dvh (dynamic viewport height) ngikutin tinggi
     viewport yang BENERAN kelihatan saat itu, jadi dipasang di baris
     kedua supaya browser yang paham dvh pakai ini (browser lama yang
     belum ngerti dvh otomatis skip & tetap pakai 100vh di atas). */
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Skip-to-content link — hidden off-screen, revealed on keyboard focus */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 0;
  z-index: 99999;
  padding: 10px 18px;
  background: var(--bg2);
  color: var(--txt);
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--border2);
  border-radius: 0 0 var(--r8) 0;
  text-decoration: none;
  white-space: nowrap;
  transition: top 0s;
}
.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--accent, #3B82F6);
  outline-offset: -2px;
}

[id$="-overlay"].show,
[id$="-overlay"][style*="display: flex"] {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
  contain: layout style;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 99px; }

.qe-lib-card { contain: layout style; }
.nav-lib-folder { contain: style; }

/* Nav footer note — light: muted, dark: readable */
.nav-bottom-note { color: rgba(0,0,0,.30); }

/* Mobile dark mode: pastikan override semua rule mobile yang hardcode hitam */