:root {
  --dur-fast: .14s;
  --dur-base: .18s;
  --dur-slow: .25s;
  --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px; --r99: 999px;
  --nav-w: 264px;
  --rp-w: 264px;
  --topbar-h: 60px;
  --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;
  /* Step number badge — selalu putih bg, hitam teks di semua mode */
  --num-bg: #1C1C1E;
  --num-fg: #FFFFFF;
}

*,*::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;
  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 */