/* ── Theme tokens ────────────────────────────────────────── */

:root {
  --font-size-base: 13px;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}

[data-theme="dark"] {
  --bg: #0a0c10;
  --surface: #111318;
  --surface-raised: #161a23;
  --surface-2: #181c23;
  --surface-3: #1e2330;
  --border: #2a3142;
  --border-strong: #3a4460;
  --border-subtle: #1c2232;
  --text: #dde3ef;
  --text-muted: #6b7694;
  --text-label: #9fadc5;
  --text-dim: #3d4866;
  --accent: #3b82f6;
  --accent-dim: #1d3a6e;
  --green: #22c55e;
  --green-dim: #0f2d1a;
  --orange: #fb923c;
  --orange-dim: #431407;
  --puter-bg: #0e1018;
  /* ── Glossy accent palette ── */
  --gold: #d4a017;
  --gold-dim: rgba(212, 160, 23, 0.12);
  --gold-border: rgba(212, 160, 23, 0.45);
  --gold-glow: rgba(212, 160, 23, 0.07);
  --silver: #8892a4;
  --silver-border: rgba(136, 146, 164, 0.38);
  --silver-glow: rgba(136, 146, 164, 0.05);
  --green-border: rgba(34, 197, 94, 0.38);
  --green-glow: rgba(34, 197, 94, 0.07);
}

[data-theme="light"] {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-raised: #f8f9fb;
  --surface-2: #eef0f4;
  --surface-3: #e2e6ed;
  --border: #d0d5e0;
  --border-strong: #b8bfcc;
  --border-subtle: #e4e7ed;
  --text: #1a1f2e;
  --text-muted: #5a6380;
  --text-label: #3d4a66;
  --text-dim: #a0a8bc;
  --accent: #2563eb;
  --accent-dim: #dbeafe;
  --green: #16a34a;
  --green-dim: #dcfce7;
  --orange: #ea580c;
  --orange-dim: #ffedd5;
  --puter-bg: #f0f2f6;
  /* ── Glossy accent palette ── */
  --gold: #a07800;
  --gold-dim: rgba(160, 120, 0, 0.1);
  --gold-border: rgba(160, 120, 0, 0.42);
  --gold-glow: rgba(160, 120, 0, 0.05);
  --silver: #6b7a94;
  --silver-border: rgba(107, 122, 148, 0.38);
  --silver-glow: rgba(107, 122, 148, 0.04);
  --green-border: rgba(22, 163, 74, 0.4);
  --green-glow: rgba(22, 163, 74, 0.06);
}

/* ── Rich theme — One Dark / Python rich terminal aesthetic ─ */
[data-theme="rich"] {
  /* One Dark backgrounds */
  --bg: #21252b;
  --surface: #282c34;
  --surface-raised: #2c313c;
  --surface-2: #313640;
  --surface-3: #393e49;
  --border: #3e4451;
  --border-strong: #4f5668;
  --border-subtle: #23272e;

  /* Text — boosted for readability (terminal emulators use near-white body text) */
  --text: #e0e4ec;
  --text-muted: #8b95a8;
  --text-label: #98c379;   /* One Dark green — labels look terminal-authentic */
  --text-dim: #4a5165;

  /* One Dark blue accent */
  --accent: #61afef;
  --accent-dim: rgba(97, 175, 239, 0.12);

  /* One Dark green */
  --green: #98c379;
  --green-dim: rgba(152, 195, 121, 0.1);
  --green-border: rgba(152, 195, 121, 0.42);
  --green-glow: rgba(152, 195, 121, 0.05);

  /* One Dark yellow/orange */
  --orange: #e5c07b;
  --orange-dim: rgba(229, 192, 123, 0.1);

  --puter-bg: #21252b;

  /* Primary accent → One Dark blue (replaces gold) */
  --gold: #61afef;
  --gold-dim: rgba(97, 175, 239, 0.1);
  --gold-border: rgba(97, 175, 239, 0.48);
  --gold-glow: rgba(97, 175, 239, 0.05);

  /* Secondary → One Dark purple (replaces silver) */
  --silver: #c678dd;
  --silver-border: rgba(198, 120, 221, 0.4);
  --silver-glow: rgba(198, 120, 221, 0.04);
}

/* Sharp corners — terminals don't round */
[data-theme="rich"] { --r-sm: 1px; --r-md: 2px; --r-lg: 3px; }

/* ── Rich theme: powerline ribbon nav-bar ───────────────────── */

/* Restore nav-rail in rich mode; powerline bar sits alongside it */

[data-theme="rich"] .nav-bar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
  height: 36px;
  align-items: stretch;
  overflow: visible;
}

[data-theme="rich"] .nav-links {
  gap: 0;
  padding: 0;
  align-items: stretch;
  overflow: visible;
}

[data-theme="rich"] .nav-sep { display: none; }

/* Base segment shape — NO gap between segments; arrow overlaps the next */
[data-theme="rich"] .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* extra right padding so text clears the 12px arrow zone */
  padding: 0 calc(1rem + 12px) 0 1.6rem;
  margin-right: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: filter 0.12s;
  background: #313640;
  color: #abb2bf;
}

/* Arrow extends 12px beyond the segment right edge, overlapping the next segment.
   Descending z-index on each segment ensures earlier arrows sit on top. */
[data-theme="rich"] .nav-link::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 0;
  bottom: 0;
  width: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 12px solid #313640;
}

/* Per-segment One Dark colors + descending z-index (arrow of prev overlaps next)
   DOM children: [a:1=Home] [span:2=sep] [a:3=Browse] [span:4] [a:5=Analyze] [span:6] [a:7=About] [span:8] [a:9=Settings] */
[data-theme="rich"] .nav-links > .nav-link:nth-child(1) { z-index: 9; background: #313640; color: #abb2bf; }
[data-theme="rich"] .nav-links > .nav-link:nth-child(1)::after { border-left-color: #313640; }

[data-theme="rich"] .nav-links > .nav-link:nth-child(3) { z-index: 8; background: #1d3d6b; color: #61afef; }
[data-theme="rich"] .nav-links > .nav-link:nth-child(3)::after { border-left-color: #1d3d6b; }

[data-theme="rich"] .nav-links > .nav-link:nth-child(5) { z-index: 7; background: #1c3823; color: #98c379; }
[data-theme="rich"] .nav-links > .nav-link:nth-child(5)::after { border-left-color: #1c3823; }

[data-theme="rich"] .nav-links > .nav-link:nth-child(7) { z-index: 6; background: #3c1e52; color: #c678dd; }
[data-theme="rich"] .nav-links > .nav-link:nth-child(7)::after { border-left-color: #3c1e52; }

[data-theme="rich"] .nav-links > .nav-link:nth-child(9) { z-index: 5; background: #3d2e12; color: #e5c07b; }
[data-theme="rich"] .nav-links > .nav-link:nth-child(9)::after { border-left-color: #3d2e12; }

/* Hover: brighten whole segment including its arrow */
[data-theme="rich"] .nav-link:hover { filter: brightness(1.28); }

/* Active: stronger brightness + white text */
[data-theme="rich"] .nav-link-active { filter: brightness(1.45); color: #fff !important; }

/* Flat — no ambient glows */
[data-theme="rich"] .card,
[data-theme="rich"] .prose-page,
[data-theme="rich"] #snippet-card { box-shadow: none; }

/* Code panel: flat terminal look */
[data-theme="rich"] .code-block-wrap {
  border-left: none;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
[data-theme="rich"] .code-header { background: var(--surface-3); }

/* Full monospace UI — body text, labels, buttons, nav all go mono in rich mode */
[data-theme="rich"],
[data-theme="rich"] body {
  --font-mono: 'Cascadia Code', 'Cascadia Mono', 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'Hack', ui-monospace, Menlo, Consolas, monospace;
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  letter-spacing: 0.01em;
}

/* Section titles: ── title ── rule style */
[data-theme="rich"] .settings-section-title,
[data-theme="rich"] .meta-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
[data-theme="rich"] .settings-section-title::before,
[data-theme="rich"] .settings-section-title::after,
[data-theme="rich"] .meta-title::before {
  content: "──";
  color: var(--gold-border);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.85em;
  letter-spacing: -0.12em;
  flex-shrink: 0;
}
[data-theme="rich"] .meta-title::after {
  content: "──";
  flex: 1;
  overflow: hidden;
  color: var(--gold-border);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.85em;
  letter-spacing: -0.12em;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--font-size-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}

.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }

/* ── Header ──────────────────────────────────────────────── */

.topbar {
  border-bottom: 1px solid var(--silver-border);
  padding: 0 1.5rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: var(--surface-raised);
  box-shadow: 0 1px 8px var(--silver-glow);
}/* ── Sidebars ─────────────────────────────────────────────── */

/* ── Nav rail (left) ─────────────────────────────────────── */

.nav-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 56px;
  background: var(--surface-raised);
  border-right: 1px solid var(--gold-border);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transition: width 0.22s ease;
  overflow: hidden;
}

.nav-rail.expanded { width: 200px; }

.nav-rail.expanded .nav-rail-toggle { width: 100%; }

.nav-rail-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.nav-rail-top {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gold-border);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-rail-toggle:hover { background: var(--gold-dim); }

.nav-rail-links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  gap: 0.15rem;
}

.nav-rail-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 44px;
  padding: 0 0 0 0;
  text-decoration: none;
  color: var(--text-label);
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  overflow: hidden;
}

.nav-rail-link:hover {
  color: var(--text);
  background: var(--gold-dim);
  border-left-color: var(--gold);
}

.nav-rail-link.active {
  color: var(--gold);
  background: var(--gold-dim);
  border-left-color: var(--gold);
}

.nav-rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 53px;
}

.nav-rail-label {
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-mono), ui-monospace, monospace;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.nav-rail.expanded .nav-rail-label { opacity: 1; }

/* Push main content right so rail doesn't overlap */
.page-wrap { padding-left: 56px; transition: padding-left 0.22s ease; }
body.nav-expanded .page-wrap { padding-left: 200px; }

/* Right sidebar — unchanged */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 260px;
  background: rgba(17, 19, 24, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-style: solid;
  border-width: 0;
  border-color: var(--gold-border);
  display: flex;
  flex-direction: column;
  z-index: 300;
  transition: transform 0.22s ease;
  overflow: hidden;
  font-family: var(--font-mono), ui-monospace, monospace;
}

[data-theme="light"] .nav-rail { background: var(--surface); }
[data-theme="light"] .sidebar { background: rgba(248, 249, 251, 0.78); }
[data-theme="light"] .sidebar-header { background: rgba(255, 255, 255, 0.5); }

.sidebar-right { right: 0; border-left-width: 1px; transform: translateX(100%); }
.sidebar.open  { transform: none; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--gold-border);
  background: rgba(10, 12, 16, 0.5);
  flex-shrink: 0;
  min-height: 44px;
  gap: 0.4rem;
}

.sidebar-title {
  flex: 1;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.sidebar-header-btns {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sidebar-pin-btn { display: none; color: var(--text-label); border-color: var(--silver-border); }
.sidebar-close   { color: var(--text-label); border-color: var(--silver-border); }

.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* Backdrop (right sidebar only) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 250;
}
.sidebar-backdrop.active { display: block; }

/* Right sidebar pull-tab on mobile */
.sidebar-tab {
  display: none;
  position: fixed;
  top: 65%;
  transform: translateY(-50%);
  z-index: 200;
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 1.25rem 0.45rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.sidebar-tab:hover { background: var(--surface-3); color: var(--text); }
.sidebar-tab-right { right: 0; border-radius: var(--r-md) 0 0 var(--r-md); border-right: none; }
.sidebar-right.open ~ .sidebar-tab-right { transform: translateY(-50%) scaleX(-1); }

/* Topbar sidebar buttons */
.sidebar-topbar-btn { flex-shrink: 0; }

/* Desktop: show pin button */
@media (min-width: 768px) {
  .sidebar-pin-btn { display: inline-flex; }
}

/* ── Mobile nav rail ─────────────────────────────────────── */

@media (max-width: 767px) {
  .nav-rail {
    top: auto;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.5rem;
    width: auto;
    height: 56px;
    flex-direction: row;
    border: 1px solid var(--gold-border);
    border-radius: 1.25rem;
    background: rgba(17, 19, 24, 0.88);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 8px 28px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,100,0.07);
    z-index: 300;
    overflow: hidden;
  }
  [data-theme="light"] .nav-rail {
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), inset 0 1px 0 rgba(160,120,0,0.06);
  }

  .nav-rail-inner {
    flex-direction: row;
    width: 100%;
    height: 56px;
    align-items: stretch;
  }

  .nav-rail-top {
    flex-direction: row;
    flex: 1;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
  }

  .nav-rail-toggle { display: none; }

  .nav-rail-links {
    flex: 1;
    flex-direction: row;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }

  .nav-rail-link {
    flex: 1;
    height: 56px;
    padding: 0;
    border-left: none;
    border-bottom: none;
    border-top: 2px solid transparent;
    justify-content: center;
    min-width: 0;
  }

  .nav-rail-link.active {
    border-top-color: var(--gold);
    border-left-color: transparent;
    border-bottom-color: transparent;
  }

  .nav-rail-icon { width: auto; flex: none; }

  .nav-rail-label { display: none; }

  /* Lift toolbar above the floating nav pill so prev/next buttons are always visible */
  .toolbar { bottom: calc(56px + 0.5rem); z-index: 320; }

  /* padding-bottom = floating nav (56px + 8px gap) + toolbar height (~7rem) */
  .page-wrap { padding-left: 0; padding-bottom: calc(56px + 7rem); transition: padding 0.22s ease; }
  body.nav-expanded .page-wrap { padding-left: 0; padding-bottom: calc(56px + 7rem); }

  .sidebar { width: min(85vw, 320px); }
  .sidebar-tab { display: block; }
}

/* ── Rich theme: powerline ribbon on the mobile bottom nav-rail ── */
@media (max-width: 767px) {
  /* Powerline ribbon needs full-width + overflow for the arrow chevrons */
  [data-theme="rich"] .nav-rail {
    left: 0; right: 0; bottom: 0; width: 100%;
    border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none; border: none; background: transparent;
    overflow: visible;
  }
  [data-theme="rich"] .nav-rail-inner,
  [data-theme="rich"] .nav-rail-top,
  [data-theme="rich"] .nav-rail-links { overflow: visible; background: transparent; border: none; }

  /* Base segment reset */
  [data-theme="rich"] .nav-rail-link {
    position: relative;
    border: none;
    transition: filter 0.12s;
    overflow: visible;
  }

  /* Powerline arrow — 56px-tall right-pointing chevron */
  [data-theme="rich"] .nav-rail-link::after {
    content: '';
    position: absolute;
    right: -14px;
    top: 0;
    bottom: 0;
    width: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 14px solid #313640;
    z-index: 1;
  }

  /* Per-segment One Dark colors + descending z-index for seamless overlap */
  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(1) { z-index: 9; background: #313640; color: #abb2bf; }
  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(1)::after { border-left-color: #313640; }

  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(2) { z-index: 8; background: #1d3d6b; color: #61afef; }
  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(2)::after { border-left-color: #1d3d6b; }

  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(3) { z-index: 7; background: #1c3823; color: #98c379; }
  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(3)::after { border-left-color: #1c3823; }

  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(4) { z-index: 6; background: #3c1e52; color: #c678dd; }
  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(4)::after { border-left-color: #3c1e52; }

  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(5) { z-index: 5; background: #3d2e12; color: #e5c07b; }
  /* Last segment: no arrow */
  [data-theme="rich"] .nav-rail-links > .nav-rail-link:nth-child(5)::after { display: none; }

  /* Hover / active */
  [data-theme="rich"] .nav-rail-link:hover { filter: brightness(1.28); }
  [data-theme="rich"] .nav-rail-link.active { filter: brightness(1.45); color: #fff !important; border-top-color: transparent !important; }

  /* Rich: toolbar above the flat nav bar (56px tall, bottom 0) */
  [data-theme="rich"] .toolbar { bottom: 56px; z-index: 320; }
  [data-theme="rich"] .page-wrap { padding-bottom: calc(56px + 6.5rem); }
  [data-theme="rich"] body.nav-expanded .page-wrap { padding-bottom: calc(56px + 6.5rem); }
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  outline-offset: 3px;
}
.brand-link:hover .brand-name {
  -webkit-text-fill-color: var(--gold);
  animation-play-state: paused;
}
.brand-link:hover .brand-icon {
  filter: drop-shadow(0 0 6px var(--gold));
}

.brand-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 0 4px var(--gold-glow));
}

.brand-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* reset h1 browser defaults when used as a heading */
  margin: 0;
  padding: 0;
  line-height: inherit;
  /* shimmer: gold light sweeps left→right through each word */
  background: linear-gradient(
    90deg,
    var(--text) 0%,
    var(--text) 40%,
    var(--gold) 50%,
    var(--text) 60%,
    var(--text) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-shimmer 6s ease-in-out infinite;
}

/* ── Topbar controls ─────────────────────────────────────── */

.topbar-a11y {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.a11y-control { display: flex; }

/* ── Unified button foundation ────────────────────────────── */
/* Shape, font, border and transitions shared by every button type.
   Sizing, padding and semantic state colours are set per-class below. */

.btn,
.icon-btn,
.copy-btn,
.challenge-btn,
.puter-ask-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  color: var(--text-label);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}

.btn:active,
.icon-btn:active,
.copy-btn:active,
.challenge-btn:active,
.puter-ask-btn:active { transform: translateY(1px); }

.btn:disabled,
.icon-btn:disabled,
.copy-btn:disabled,
.challenge-btn:disabled,
.puter-ask-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Gold hover — default for all buttons; semantic overrides follow per-class */
.btn:not(:disabled):hover,
.icon-btn:not(:disabled):hover,
.copy-btn:not(:disabled):hover,
.challenge-btn:not(:disabled):hover,
.puter-ask-btn:not(:disabled):hover {
  color: var(--text);
  border-color: var(--gold-border);
  background: var(--gold-dim);
}

/* ── Icon btn (topbar: A-, A+, theme) ──────────────────────── */
.icon-btn { padding: 0.2rem 0.45rem; }
.icon-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-border); background: var(--gold-dim); }

/* ── Stats widget (footer) ────────────────────────────────── */

.stats-widget {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  background: var(--surface-raised);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
}

.stat-item   { color: var(--text-muted); }
.stat-label  { color: var(--text-label); margin-right: 0.1rem; }
.stat-sep    { color: var(--text-label); }
.stat-streak { color: var(--gold); font-weight: 700; }
.stat-pipe   { color: var(--silver-border); padding: 0 0.1rem; }

.stat-reset-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  color: var(--text-label);
  line-height: 1;
}
.stat-reset-btn:hover { color: var(--text); text-decoration: underline; }

/* ── Revisit note ────────────────────────────────────────── */

.revisit-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--gold);
  background: var(--surface-2);
  border-top: 1px solid var(--gold-border);
  padding: 0.45rem 1.5rem;
}

.revisit-note::before {
  content: "↩";
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── Layout ──────────────────────────────────────────────── */

.container {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Status bar ──────────────────────────────────────────── */

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-md);
  padding: 0.4rem 0.75rem;
  overflow: hidden;
}

.nav-bar-plain {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-label);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-link:hover      { color: var(--gold); }
.nav-link-active     { color: var(--gold); }

.nav-sep {
  font-size: 0.7rem;
  color: var(--text-dim);
  user-select: none;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-height: 1.3rem;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: background 0.3s;
}

.status-bar.loading .status-dot { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.status-bar.ready   .status-dot { background: var(--green); }
.status-bar.error   .status-dot { background: #ef4444; }
.status-bar.error #status-text  { color: #f87171; }

@keyframes brand-shimmer {
  0%   { background-position: -100% center; }
  55%  { background-position: 200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── Card ────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 0 24px var(--gold-glow),
    inset 0 1px 0 rgba(255, 220, 100, 0.04);
}

/* ── Meta area ───────────────────────────────────────────── */

.meta-area {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gold-border);
  background: var(--surface-raised);
}

.meta-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.meta-title-row-compact {
  margin-bottom: 0.55rem;
  justify-content: flex-end;
}

.meta-title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.meta-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  background: none;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.meta-toggle:hover {
  color: var(--text);
  border-color: var(--silver);
}

.meta-toggle svg {
  transition: transform 0.2s ease;
}

.meta-area.meta-collapsed .meta-toggle svg {
  transform: rotate(180deg);
}

.meta-area.meta-collapsed .meta-title-row {
  margin-bottom: 0;
}

.meta-area.meta-collapsed .meta-grid {
  display: none;
}

.meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  box-shadow: 0 0 8px var(--gold-glow);
  min-width: 80px;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.meta-item:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow), 0 2px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.meta-item:hover .meta-label {
  color: var(--gold);
}

.meta-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-label);
  background: var(--surface-3);
  border-bottom: 1px solid var(--gold-border);
  padding: 0.3rem 0.75rem;
}

.meta-value {
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text);
  padding: 0.45rem 0.75rem;
}

.sev-critical { color: #ef4444; }
.sev-high     { color: #f97316; }
.sev-medium   { color: #eab308; }
.sev-low      { color: #3b82f6; }

.meta-item-static {
  cursor: default;
}
.meta-item-static:hover {
  border-color: var(--gold-border);
  box-shadow: 0 0 8px var(--gold-glow);
  transform: none;
}
.meta-item-static:hover .meta-label { color: var(--text-label); }

/* ── Challenge prompt ────────────────────────────────────── */

.challenge-prompt {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-top: 1px solid var(--gold-border);
}

.meta-challenge-label {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}

.challenge-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  width: 100%;
  padding: 0.55rem 1.5rem;
}

.challenge-group-primary,
.challenge-group-reveal {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Reveal group stays right-anchored even when it wraps to its own row */
.challenge-group-reveal { margin-left: auto; }




/* ── Filter indicator row (snippet page, below toolbar buttons) ────────────── */
.filter-indicator-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.3rem 0 0;
}

.filter-indicator-row.hidden { display: none; }

.filter-indicator-label {
  font-size: 0.72rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Individual filter chips — btn-secondary style */
.filter-indicator-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-label);
  background: transparent;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.18rem 0.5rem;
  white-space: nowrap;
  cursor: default;
}

.filter-indicator-chip-x {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.1rem;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.filter-indicator-chip-x:hover { color: var(--text); }

.filter-indicator-clear {
  font-size: 0.72rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.18rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.filter-indicator-clear:hover {
  border-color: var(--gold-border);
  color: var(--gold);
  background: var(--gold-dim);
}

/* ── Challenge area buttons ─────────────────────────────────── */
.challenge-btn { padding: 0.28rem 0.65rem; }

.challenge-btn.active,
.challenge-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-border); background: var(--gold-dim); }

/* Show Fix pressed state — orange signals "you are viewing the patched code". */
.challenge-btn[data-mode="fix"] {
  color: var(--orange);
  border-color: var(--orange);
  background: var(--orange-dim);
}

/* Prominent CTA — the Check button stands out as the action to take. */
.challenge-btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.challenge-btn-primary:not(:disabled):hover { color: #fff; background: var(--accent); border-color: var(--accent); opacity: 0.9; }

.guess-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
}
.guess-result::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.guess-result.good {
  color: var(--green);
  background: var(--green-dim);
  border-bottom-color: var(--green-border);
}
.guess-result.partial {
  color: #c89a00;
  background: var(--gold-dim);
  border-bottom-color: var(--gold-border);
}
[data-theme="dark"] .guess-result.partial { color: #FEBC2E; }

/* Clickable code lines (line-guessing) */
.code-line { display: block; }

/* Guess mode: highlight the whole block with a silver border + pulsing glow. */
.code-block-wrap.guessing {
  border-color: var(--silver);
  animation: guess-glow 1.8s ease-in-out infinite;
}
@keyframes guess-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--silver-border), 0 0 10px 1px rgba(136, 146, 164, 0.18); }
  50%      { box-shadow: 0 0 0 1px var(--silver),        0 0 22px 3px rgba(136, 146, 164, 0.38); }
}

/* Force no-wrap during guessing so visual rows = logical lines */
.code-block-wrap.guessing.wrap-on pre {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  overflow-x: auto;
}

.code-block-wrap.guessing .code-line { cursor: pointer; }
.code-block-wrap.guessing .code-line:not(.code-line-blank):hover { background: rgba(255, 255, 255, 0.06); }
.code-block-wrap.guessing .code-line-blank { cursor: default; }
.code-block-wrap.guessing .code-line-blank:hover { background: none; }

/* Floating bookmark badge — appended to body by JS, never clipped */
.line-bookmark-badge {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 1.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: translateY(-50%);
}
.line-bookmark-badge__body {
  width: 100%;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  padding: 0.35em 0.2em 0.25em;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.line-bookmark-badge__notch {
  width: 0;
  height: 0;
  border-left: 0.95rem solid var(--accent);
  border-right: 0.95rem solid var(--accent);
  border-bottom: 0.55rem solid transparent;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.3));
}
.code-line.selected { background: var(--gold-glow); box-shadow: inset 3px 0 0 var(--gold); }
.code-line.correct  { background: rgba(34, 197, 94, 0.18);  box-shadow: inset 3px 0 0 var(--green); }
.code-line.wrong    { background: rgba(239, 68, 68, 0.16);  box-shadow: inset 3px 0 0 #ef4444; }
.code-line.missed   { background: rgba(254, 188, 46, 0.16); box-shadow: inset 3px 0 0 #FEBC2E; }

/* Source/sink role tags revealed after a guess */
.line-tag {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.02rem 0.4rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
}
.line-tag-source {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.45);
}
.line-tag-flow {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.16);
  border: 1px solid rgba(192, 132, 252, 0.45);
}
.line-tag-sink {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.16);
  border: 1px solid rgba(251, 146, 60, 0.45);
}


.wrap-btn.active {
  color: var(--gold);
  border-color: var(--gold-border);
}

.code-block-wrap pre {
  overflow-x: auto;
  white-space: pre;
}

.code-block-wrap.wrap-on pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

/* ── Code area ───────────────────────────────────────────── */

.code-area {
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--silver-border);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ── Code block ──────────────────────────────────────────── */

.code-block-wrap {
  font-family: var(--font-mono), ui-monospace, monospace;
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow: hidden;
  box-shadow: 0 0 12px var(--silver-glow);
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.85rem;
  background: var(--surface-3);
  border-bottom: 1px solid var(--silver-border);
}

.code-dots {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.55rem;
  flex-shrink: 0;
}

.code-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
}

.code-dot-red    { background: #FF5F57; }
.code-dot-yellow { background: #FEBC2E; }
.code-dot-green  { background: #28C840; }

.code-header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.code-lang {
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Code header small buttons (Copy, Word Wrap) ────────────── */
.copy-btn { padding: 0.2rem 0.55rem; }

.copy-btn.copied { color: var(--green); border-color: var(--green-border); background: var(--green-dim); }


.code-block-wrap pre {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  border-radius: 0;
}

.code-block-wrap pre code.hljs { padding: 1.1rem 1.25rem; }

/* ── Details area ────────────────────────────────────────── */

.details-area {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--gold-border);
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.details-content h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-label);
  margin: 1.4rem 0 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--gold-border);
}

.details-content h3:first-child { margin-top: 0; }

.details-content p {
  color: var(--text);
  font-size: 0.8125rem;
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.details-content .code-block-wrap { margin: 0.5rem 0 0.9rem; }
.details-content .code-block-wrap pre { font-size: 0.8125rem; }
.details-content .code-block-wrap pre code.hljs { padding: 0.9rem 1.1rem; }

.details-content code:not([class]) {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.8em;
  background: var(--surface-3);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
}

.details-content strong { color: var(--text); font-weight: 600; }

/* ── Puter AI panel ──────────────────────────────────────── */

.puter-panel {
  background: var(--puter-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow:
    0 0 18px var(--green-glow),
    inset 0 1px 0 rgba(34, 197, 94, 0.04);
}

.puter-panel-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--green-border);
  background: var(--surface-3);
}

.puter-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
}

.puter-panel-hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

/* ── AI ask button — keeps green identity to signal AI feature ─ */
.puter-ask-btn {
  padding: 0.25rem 0.65rem;
  color: var(--green);
  border-color: var(--green-border);
  flex-shrink: 0;
}
.puter-ask-btn:not(:disabled):hover { color: var(--green); border-color: var(--green); background: var(--green-dim); }

.puter-output {
  padding: 1.1rem 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text);
  max-height: 32rem;
  overflow-y: auto;
}

.puter-output h2,
.puter-output h3,
.puter-output h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-label);
  margin: 1.35rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--green-border);
}

.puter-output h2:first-child,
.puter-output h3:first-child,
.puter-output h4:first-child { margin-top: 0; }

.puter-output p { margin-bottom: 0.6rem; color: var(--text); }

.puter-output ul,
.puter-output ol { margin: 0.35rem 0 0.7rem 1.25rem; }

.puter-output li { margin-bottom: 0.25rem; }

.puter-output code:not([class]) {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.82em;
  background: var(--surface-3);
  border: 1px solid var(--silver-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--text);
}

/* Bare <pre> during streaming, before addCodeHeaders wraps it */
.puter-output pre {
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 0.5rem 0 0.85rem;
  font-size: 0.8125rem;
}

.puter-output pre code {
  display: block;
  padding: 0.9rem 1.1rem;
}

/* After addCodeHeaders wraps it — reset pre so code-block-wrap takes over */
.puter-output .code-block-wrap { margin: 0.6rem 0 0.9rem; }

.puter-output .code-block-wrap pre {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  font-size: 0.8125rem;
}

.puter-output .code-block-wrap pre code.hljs { padding: 0.9rem 1.1rem; }

.puter-output strong { font-weight: 700; color: var(--text); }

.puter-error {
  color: #f87171;
  font-size: 0.8125rem;
}

/* ── Analyze page ────────────────────────────────────────── */

#analyze-output-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#analyze-meta-area .meta-area {
  border-bottom: none;
}

.analyze-meta-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  line-height: 1.5;
}

.analyze-input-wrap {
  padding: 1rem 1.25rem 0;
}

.analyze-textarea {
  width: 100%;
  min-height: 14rem;
  resize: vertical;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color 0.15s;
  display: block;
}

.analyze-textarea:focus { border-color: var(--green-border); }
.analyze-textarea::placeholder { color: var(--text-dim); }

.analyze-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.65rem 1.25rem;
}

.analyze-lang-select {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.75rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.analyze-lang-select:focus { border-color: var(--green-border); }

.analyze-controls-hint {
  font-size: 0.6875rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.analyze-clear-btn {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.analyze-clear-btn:hover { color: var(--text); border-color: var(--border-strong); }

.analyze-run-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.85rem;
  flex-shrink: 0;
}

.analyze-confirm {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.analyze-confirm-text {
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .analyze-controls { gap: 0.5rem; }
  .analyze-lang-select { flex: 1 1 auto; }
  .analyze-controls-hint {
    order: 10;
    flex: 1 1 100%;
  }
}

/* ── Toolbar ─────────────────────────────────────────────── */

.toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  position: sticky;
  bottom: 0;
  margin: 0 -1.5rem -1.5rem;
  padding: 0.6rem 1.5rem 0.75rem;
  background: linear-gradient(to bottom, transparent 0, var(--bg) 0.75rem);
  z-index: 10;
}

/* ── Toolbar buttons (.btn) — larger than code-area buttons ─── */
.btn { font-size: 0.8125rem; }

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); padding: 0.5rem 1.25rem; }
.btn-primary:not(:disabled):hover { opacity: 0.85; color: #fff; background: var(--accent); border-color: var(--accent); }

.btn-secondary { padding: 0.45rem 1rem; }
.btn-secondary.btn-copied { color: var(--green); border-color: var(--green-border); }

/* Toolbar inner groups */
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Nav row: Prev left, Next right; Next stays right even when Prev is hidden */
.toolbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Prev: same size as Next, margin-right:auto pushes Next to far right */
#prev-btn { padding: 0.5rem 1.25rem; margin-right: auto; }

/* ── Site about (collapsible) ────────────────────────────── */

/* ── Prose pages (About, Privacy, Terms) ────────────────── */

.prose-page {
  width: 100%;
  padding: 1.5rem 2rem 2rem;
  background: var(--surface-raised);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-lg);
  box-shadow: 0 0 24px var(--gold-glow), inset 0 1px 0 rgba(255,220,100,0.04);
}

.prose-page h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1.25rem;
}
.prose-body h2:not(:first-child) {
  margin-top: 2rem;
}

.prose-page h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-label);
  margin: 1.5rem 0 0.4rem;
}

.prose-page p {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.prose-link {
  color: var(--gold);
  text-decoration: none;
}
.prose-link:hover { text-decoration: underline; }

/* ── Settings page ───────────────────────────────────────── */

.prose-body {
  max-width: 65ch;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2.5rem;
}

.about-col h2 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gold);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gold-border);
}

.about-col p {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 600px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem 0;
  }
}

/* .settings-page now fills the full card width — rows use flex space-between */

.settings-section { margin-top: 0.5rem; }

.settings-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-label);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--silver-border);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--silver-border);
}
.settings-row:last-child { border-bottom: none; }

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.settings-row-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.settings-row-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.settings-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

/* ── Theme picker (3-way segmented control) ─────────────── */
.theme-picker {
  display: flex;
  gap: 0;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.theme-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--silver-border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.theme-opt:last-child { border-right: none; }
.theme-opt:hover:not(.active) { background: var(--silver-glow); color: var(--text); }
.theme-opt.active {
  background: var(--gold-dim);
  color: var(--gold);
  cursor: default;
}

.settings-font-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-font-size-label {
  font-size: 0.8125rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text-label);
  min-width: 2.8rem;
  text-align: center;
}

/* ── Footer ──────────────────────────────────────────────── */

.footer {
  text-align: center;
  padding: 0.9rem 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--gold-border);
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.5rem;
}

.footer-row-stats { min-height: 0; }

.footer .status-bar { min-height: 0; }

.footer-sep { color: var(--text-dim); }

/* ── Code fullscreen overlay ─────────────────────────────── */

.code-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: scr-modal-in 0.15s ease;
}

.code-fullscreen-overlay.hidden { display: none; }

.code-fullscreen-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  background: var(--surface-raised);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-lg);
  box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 30px var(--gold-glow);
  overflow: hidden;
  animation: scr-modal-up 0.15s ease;
}

.code-fullscreen-box > pre {
  flex: 1;
  overflow: auto;
  margin: 0;
  border-radius: 0;
  padding: 1rem 1.5rem;
  line-height: 1.55;
  max-height: none;
}

.fullscreen-btn { opacity: 0.7; }
.fullscreen-btn:hover { opacity: 1; }

/* ── Confirm modal ───────────────────────────────────────── */

.scr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: scr-modal-in 0.15s ease;
}

@keyframes scr-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.scr-modal {
  background: var(--surface-raised);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-lg);
  box-shadow: 0 0 40px rgba(0,0,0,0.5), 0 0 24px var(--gold-glow);
  padding: 1.5rem 1.75rem;
  max-width: 380px;
  width: 100%;
  animation: scr-modal-up 0.15s ease;
}

@keyframes scr-modal-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.scr-modal-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.scr-modal-msg {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.scr-modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ── Utility ─────────────────────────────────────────────── */

.hidden { display: none !important; }

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Responsive ──────────────────────────────────────────── */

/* ── Sidebar display-settings panel ─────────────────────── */
.sb-prefs { padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sb-pref-group { display: flex; flex-direction: column; gap: 0.6rem; }
.sb-pref-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.sb-pref-btns  { display: flex; gap: 0.4rem; }
/* Theme toggle button inherits icon-btn — just needs wider padding for the text */
.sb-theme-btn  { padding: 0.2rem 0.65rem; }

/* ── Sidebar nav (left panel) ────────────────────────────── */
.sb-nav { display: flex; flex-direction: column; padding: 0.4rem 0; }
.sb-nav-link {
  padding: 0.65rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-label);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sb-nav-link:hover {
  color: var(--text);
  background: var(--gold-dim);
  border-left-color: var(--gold);
}

@media (max-width: 640px) {
  .topbar { padding: 0 0.85rem; gap: 0.5rem; }
  .topbar-a11y { display: none; }
  .sidebar-topbar-btn { display: none; }
  .brand-name { font-size: 0.8125rem; }

  /* Settings rows: stack vertically so controls never get clipped */
  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .nav-bar { display: none; }

  .container { padding: 0.75rem; gap: 0.75rem; }

  .meta-area { padding: 0.9rem 1rem; }
  .meta-grid { gap: 0.45rem; }
  .meta-item { min-width: calc(50% - 0.225rem); flex: 1 1 calc(50% - 0.225rem); }

  .challenge-actions { justify-content: flex-start; padding: 0.45rem 0.75rem; }
  .guess-result { padding: 0.4rem 0.75rem; }
  .challenge-group-reveal { margin-left: 0; }
  .challenge-btn-primary {
    flex: 1;
    justify-content: center;
  }

  .code-area { padding: 0.75rem; }

  .code-header { padding: 0.35rem 0.65rem; }
  .code-lang   { font-size: 0.625rem; }

  .copy-btn { font-size: 0.625rem; padding: 0.15rem 0.4rem; }
  .challenge-btn { font-size: 0.6875rem; padding: 0.22rem 0.5rem; }

  .puter-panel-hint { display: none; }
  .puter-panel-header { padding: 0.55rem 0.75rem; }
  .puter-output { padding: 0.85rem 0.9rem; }

  .details-area { padding: 0.85rem; }

  .toolbar {
    margin: 0 -0.75rem -0.75rem;
    padding: 0.5rem 0.75rem 0.6rem;
    gap: 0.4rem;
  }
  /* Actions row: scrollable if many buttons */
  .toolbar-actions {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .toolbar-actions::-webkit-scrollbar { display: none; }
  /* Nav row: both buttons share the row equally */
  #prev-btn    { flex: 1; justify-content: center; margin-right: 0; }
  #refresh-btn { flex: 1; justify-content: center; }

  .footer { padding: 0.65rem 0.75rem; font-size: 0.6875rem; gap: 0.2rem; }
  .footer-row { gap: 0.15rem 0.4rem; }
}

@media (max-width: 400px) {
  .meta-item { min-width: 100%; flex: 1 1 100%; }
  .icon-btn { padding: 0.25rem 0.3rem; font-size: 0.7rem; }
}

/* ── Tag chips ───────────────────────────────────────────── */

.tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.25rem;
}

.tags-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-label);
  margin-right: 0.2rem;
  flex-shrink: 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 500;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tag-chip:hover {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
}

/* ── Browse page ─────────────────────────────────────────── */

.browse-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.browse-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.01em;
}

.browse-back {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-right: auto;
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.6rem;
  transition: border-color 0.15s, color 0.15s;
}

.browse-back:hover { border-color: var(--gold-border); color: var(--gold); }

.browse-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Layout toggle ───────────────────────────────────────── */

.layout-toggle {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
}

.layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.layout-btn:hover {
  border-color: var(--gold-border);
  color: var(--gold);
}

.layout-btn.active {
  border-color: var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold);
}

/* ── Browse search ───────────────────────────────────────── */

/* ── Browse search row (search + filter selects on one line) ─ */

.browse-search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0.6rem 0 0;
  flex-wrap: wrap;
}

.browse-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.browse-search-wrap::before {
  content: "⌕";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  color: var(--text-muted);
  pointer-events: none;
  line-height: 1;
}

.browse-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.75rem 0.4rem 2.1rem;
  font-size: 0.8125rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  height: 30px;
}

.browse-search:focus {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.browse-search::placeholder { color: var(--text-muted); }

/* ── Custom filter dropdowns ─────────────────────────────── */

.browse-filters {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: auto;
}

.browse-filters-label {
  font-size: 0.72rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  padding-right: 0.15rem;
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 30px;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-label);
  background: var(--surface-raised);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  outline: none;
}

.filter-dropdown-btn:hover {
  border-color: var(--gold-border);
  color: var(--gold);
  background: var(--gold-dim);
}

.filter-dropdown-btn:focus-visible {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.filter-dropdown-btn.filter-active {
  border-color: var(--gold-border);
  color: var(--gold);
  background: var(--gold-dim);
}

.filter-dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.15s;
}

.filter-dropdown-btn[aria-expanded="true"] .filter-dropdown-chevron {
  transform: rotate(180deg);
}

.filter-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px var(--border-subtle);
  z-index: 200;
  padding: 0.3rem;
  list-style: none;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
}

.filter-dropdown-list.open { display: block; }

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.filter-dropdown-item:hover {
  background: var(--gold-dim);
  color: var(--gold);
}

.filter-dropdown-item[aria-selected="true"] {
  color: var(--gold);
  background: var(--gold-dim);
  border-left: 2px solid var(--gold);
  padding-left: calc(0.6rem - 2px);
}

.filter-dropdown-item-none {
  color: var(--text-muted);
}

/* ── Active filter chips bar ─────────────────────────────── */

.browse-active-filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.1rem;
  min-height: 1.5rem;
}

.browse-active-filters.hidden { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  padding: 0.15rem 0.5rem 0.15rem 0.65rem;
  white-space: nowrap;
}

.filter-chip-label {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 0.1rem;
}

.filter-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gold);
  opacity: 0.7;
  line-height: 1;
  font-size: 0.85rem;
  transition: opacity 0.15s;
}

.filter-chip-clear:hover { opacity: 1; }

.filter-clear-all {
  font-size: 0.7rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.2rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.filter-clear-all:hover { color: var(--text); }

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

/* ── List layout mode ────────────────────────────────────── */

.results-grid.layout-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.results-grid.layout-list .result-card {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
}

.results-grid.layout-list .result-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-grid.layout-list .result-meta {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.results-grid.layout-list .result-tags {
  display: none;
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 8px var(--silver-glow);
}

.result-card:hover {
  border-color: var(--gold-border);
  background: var(--surface-raised);
  box-shadow: 0 0 16px var(--gold-glow);
}

.result-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.result-badge {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono), ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--silver);
  background: var(--surface-3);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.15rem 0.45rem;
}

.result-badge.sev-critical { color: #ef4444; border-color: #ef444455; background: #ef444412; }
.result-badge.sev-high     { color: #f97316; border-color: #f9731655; background: #f9731612; }
.result-badge.sev-medium   { color: #eab308; border-color: #eab30855; background: #eab30812; }
.result-badge.sev-low      { color: #3b82f6; border-color: #3b82f655; background: #3b82f612; }

.result-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.tag-chip-sm {
  font-size: 0.625rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.page-btn {
  cursor: pointer;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--silver-border);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}

.page-btn:hover:not(:disabled) { border-color: var(--gold-border); background: var(--gold-dim); color: var(--gold); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-btn-active {
  border-color: var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold);
  pointer-events: none;
}

.page-info { font-size: 0.75rem; color: var(--text-muted); min-width: 4rem; text-align: center; }

.page-ellipsis {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 0.15rem;
  align-self: center;
  user-select: none;
}

.browse-empty,
.browse-loading,
.browse-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.browse-error { color: #f87171; }

@media (max-width: 640px) {
  .results-grid { grid-template-columns: 1fr; }
  .browse-header { gap: 0.5rem; }
}