@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── CSS Variables ── */
:root {
  --bg:        #0a0a0f;
  --bg-card:   #111118;
  --bg-hover:  #16161f;
  --border:    #1e1e2e;
  --border-hi: #2e2e4e;
  --text:      #e8e8f0;
  --text-muted:#7070a0;
  --text-dim:  #4a4a70;
  --accent:    #6c63ff;
  --accent-lo: rgba(108,99,255,.12);
  --accent-md: rgba(108,99,255,.25);
  --accent2:   #00d4aa;
  --accent2-lo:rgba(0,212,170,.10);
  --danger:    #ff6b6b;
  --warn:      #ffd166;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 4px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.7);
  --transition:all .2s cubic-bezier(.4,0,.2,1);
  --font-display:'Syne', sans-serif;
  --font-body:   'Instrument Sans', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
}

[data-theme="light"] {
  --bg:        #f4f4f9;
  --bg-card:   #ffffff;
  --bg-hover:  #ededf8;
  --border:    #d8d8ec;
  --border-hi: #b8b8dc;
  --text:      #12121e;
  --text-muted:#5050808;
  --text-dim:  #9090b8;
  --accent:    #5548f0;
  --accent-lo: rgba(85,72,240,.08);
  --accent-md: rgba(85,72,240,.18);
  --accent2:   #00b894;
  --accent2-lo:rgba(0,184,148,.10);
  --shadow:    0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.14);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  transition: background .3s, color .3s;
}

/* ── Noise overlay ── */
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ── Navbar ── */
.navbar {
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(1rem,4vw,2.5rem);
  height:64px;
  background: rgba(10,10,15,.85);
  backdrop-filter: blur(20px);
  border-bottom:1px solid var(--border);
  gap:1rem;
}

[data-theme="light"] .navbar {
  background: rgba(244,244,249,.88);
}

.nav-logo {
  font-family: var(--font-display);
  font-size:1.1rem;
  font-weight:800;
  color:var(--text);
  text-decoration:none;
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.nav-logo span { color:var(--accent); }

.nav-actions { display:flex; align-items:center; gap:.75rem; }

.theme-toggle {
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-muted);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  transition:var(--transition);
}
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }

.back-btn {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .85rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-muted);
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:var(--transition);
}
.back-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-lo); }

/* ── Search bar ── */
.search-wrap {
  position:relative;
  flex:1;
  max-width:400px;
}
.search-wrap svg {
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-dim);
  pointer-events:none;
}
.search-input {
  width:100%;
  padding:.5rem .75rem .5rem 2.25rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text);
  font-family:var(--font-body);
  font-size:.875rem;
  transition:var(--transition);
  outline:none;
}
.search-input::placeholder { color:var(--text-dim); }
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-lo); }

/* ── Main layout ── */
.main-wrap {
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:clamp(2rem,6vw,4rem) clamp(1rem,4vw,2.5rem);
}

/* ── Section header ── */
.section-label {
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.5rem;
}

/* ── Topic section ── */
.topic-section {
  margin-bottom:3rem;
}
.topic-header {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.25rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--border);
}
.topic-title {
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
  color:var(--text);
}
.topic-count {
  font-family:var(--font-mono);
  font-size:.7rem;
  padding:.2rem .5rem;
  border-radius:6px;
  background:var(--accent-lo);
  color:var(--accent);
  margin-left:auto;
}

/* ── Accordion ── */
.qa-list { display:flex; flex-direction:column; gap:.5rem; }

.qa-item {
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-card);
  overflow:hidden;
  transition:var(--transition);
}
.qa-item:hover { border-color:var(--border-hi); }
.qa-item.open  { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-lo),var(--shadow); }

.qa-question {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 1.25rem;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}
.qa-q-num {
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text-dim);
  min-width:2ch;
  flex-shrink:0;
}
.qa-q-text {
  font-weight:500;
  font-size:.95rem;
  color:var(--text);
  flex:1;
  line-height:1.5;
}
.qa-chevron {
  flex-shrink:0;
  color:var(--text-dim);
  transition:transform .25s ease;
}
.qa-item.open .qa-chevron { transform:rotate(180deg); color:var(--accent); }

.qa-answer {
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.qa-answer-inner {
  padding:0 1.25rem 1.25rem 3.25rem;
  color:var(--text-muted);
  font-size:.9rem;
  line-height:1.8;
  border-top:1px solid var(--border);
  padding-top:1rem;
  margin-top:0;
}

.qa-answer-inner p { margin-bottom:.75rem; }
.qa-answer-inner p:last-child { margin-bottom:0; }

.qa-answer-inner ul,
.qa-answer-inner ol {
  padding-left:1.25rem;
  margin-bottom:.75rem;
}
.qa-answer-inner li { margin-bottom:.3rem; }

.qa-answer-inner code {
  font-family:var(--font-mono);
  font-size:.82em;
  background:var(--bg-hover);
  color:var(--accent2);
  padding:.1em .35em;
  border-radius:4px;
}

.qa-answer-inner pre {
  background:var(--bg-hover);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  overflow-x:auto;
  margin:1rem 0;
}
.qa-answer-inner pre code {
  background:none;
  padding:0;
  color:var(--text);
  font-size:.83rem;
}

.qa-answer-inner strong { color:var(--text); font-weight:600; }

/* ── No results ── */
.no-results {
  text-align:center;
  padding:3rem 1rem;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.85rem;
  display:none;
}
.no-results.visible { display:block; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-hi); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ── Responsive ── */
@media(max-width:600px){
  .qa-answer-inner { padding-left:1.25rem; }
  .topic-title { font-size:1rem; }
}

/* ── Fade-in animation ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp .5s ease both; }

/* ── Pill tag ── */
.tag {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:500;
  padding:.2rem .55rem;
  border-radius:99px;
  background:var(--accent-lo);
  color:var(--accent);
  border:1px solid var(--accent-md);
  letter-spacing:.04em;
}
.tag.green {
  background:var(--accent2-lo);
  color:var(--accent2);
  border-color:rgba(0,212,170,.2);
}

/* Progress bar for reading */
#reading-progress {
  position:fixed;
  top:0; left:0;
  height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  width:0%;
  z-index:200;
  transition:width .1s linear;
}