/* =========================================================================
   GenCode Academy — Logic Building Bank
   Design tokens
   ========================================================================= */
:root{
  --navy-950:#081226;
  --navy-900:#0A1B3D;
  --navy-800:#0F274F;
  --navy-700:#173568;
  --navy-600:#22468a;
  --paper:#F6F4EC;
  --paper-dim:#EDE9DA;
  --ink:#131A2B;
  --ink-soft:#4B5468;
  --gold:#D6A93B;
  --gold-bright:#F0C05A;
  --gold-dim:#9C7B2E;
  --green:#3F9C6D;
  --amber:#D6913B;
  --red:#C1573F;
  --line:rgba(10,27,61,0.12);
  --line-dark:rgba(246,244,236,0.14);
  --radius:14px;
  --radius-sm:8px;
  --shadow-card:0 1px 2px rgba(10,20,45,0.06), 0 8px 24px -12px rgba(10,20,45,0.18);
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
button{ font-family:inherit; }

.lb-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* =========================================================================
   Top bar
   ========================================================================= */
.lb-topbar{
  background:var(--navy-950);
  color:var(--paper);
  border-bottom:1px solid var(--line-dark);
}
.lb-topbar-inner{
  max-width:1240px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lb-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.lb-brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(155deg, var(--gold-bright), var(--gold-dim));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; color:var(--navy-950); font-size:15px;
  flex-shrink:0;
}
.lb-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.lb-brand-name{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--paper); }
.lb-brand-sub{ font-family:var(--font-mono); font-size:11px; color:var(--gold-bright); letter-spacing:.04em; }
.lb-topbar-link{
  font-family:var(--font-mono); font-size:12.5px; text-decoration:none;
  color:var(--paper); opacity:.85; border:1px solid var(--line-dark);
  padding:8px 14px; border-radius:999px; white-space:nowrap;
  transition:opacity .15s ease, border-color .15s ease;
}
.lb-topbar-link:hover{ opacity:1; border-color:var(--gold-bright); }

/* =========================================================================
   Hero — terminal signature element
   ========================================================================= */
.lb-hero{
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(214,169,59,0.16), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color:var(--paper);
  padding:64px 0 56px;
  position:relative;
  overflow:hidden;
}
.lb-hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
@media (max-width:900px){ .lb-hero-grid{ grid-template-columns:1fr; gap:36px; } }

.lb-eyebrow{
  font-family:var(--font-mono); font-size:12.5px; color:var(--gold-bright);
  letter-spacing:.06em; display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.lb-eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(63,156,109,.25); }

.lb-hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4.2vw,46px);
  line-height:1.08; margin:0 0 18px; letter-spacing:-0.01em;
}
.lb-hero h1 em{ color:var(--gold-bright); font-style:normal; }
.lb-hero p.lb-lede{ font-size:16.5px; color:rgba(246,244,236,0.78); max-width:52ch; margin:0 0 28px; }

.lb-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.lb-btn{
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lb-btn:active{ transform:translateY(1px); }
.lb-btn-gold{ background:var(--gold-bright); color:var(--navy-950); }
.lb-btn-gold:hover{ box-shadow:0 8px 22px -8px rgba(240,192,90,.55); }
.lb-btn-ghost{ background:transparent; border-color:var(--line-dark); color:var(--paper); }
.lb-btn-ghost:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }

.lb-hero-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.lb-stat b{ display:block; font-family:var(--font-mono); font-size:22px; color:var(--gold-bright); }
.lb-stat span{ font-size:12.5px; color:rgba(246,244,236,0.65); }

/* Terminal card */
.lb-terminal{
  background:var(--navy-800);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  overflow:hidden;
}
.lb-terminal-bar{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  background:var(--navy-900); border-bottom:1px solid var(--line-dark);
}
.lb-dot{ width:10px; height:10px; border-radius:50%; }
.lb-dot.red{ background:#E5645A; } .lb-dot.amber{ background:#E5B24C; } .lb-dot.green{ background:#59C08A; }
.lb-terminal-file{
  margin-left:8px; font-family:var(--font-mono); font-size:12px; color:rgba(246,244,236,0.55);
}
.lb-terminal-body{ padding:20px 22px 24px; font-family:var(--font-mono); font-size:13px; overflow-x:auto; }
@media (max-width:480px){
  .lb-terminal-body{ font-size:11px; padding:16px; }
  .lb-terminal-line{ white-space:pre-wrap; word-break:break-word; }
}
.lb-terminal-body .c1{ color:#7FB3E8; } .lb-terminal-body .c2{ color:var(--gold-bright); }
.lb-terminal-body .c3{ color:#8FCB9E; } .lb-terminal-body .cm{ color:rgba(246,244,236,0.4); }
.lb-terminal-line{ white-space:pre; margin-bottom:4px; }
.lb-caret{ display:inline-block; width:7px; height:14px; background:var(--gold-bright); vertical-align:-2px; animation:lb-blink 1s steps(1) infinite; }
@keyframes lb-blink{ 50%{ opacity:0; } }

.lb-ring-block{ display:flex; align-items:center; gap:18px; margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-dark); }
.lb-ring-wrap{ position:relative; width:78px; height:78px; flex-shrink:0; }
.lb-ring-wrap svg{ transform:rotate(-90deg); }
.lb-ring-track{ fill:none; stroke:var(--line-dark); stroke-width:7; }
.lb-ring-fill{ fill:none; stroke:var(--gold-bright); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .5s ease; }
.lb-ring-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; color:var(--paper); }
.lb-ring-text b{ display:block; font-family:var(--font-display); font-size:15px; color:var(--paper); }
.lb-ring-text span{ font-size:12px; color:rgba(246,244,236,0.6); }

/* =========================================================================
   Controls (search / filters) — sticky
   ========================================================================= */
.lb-controls{
  position:sticky; top:0; z-index:20;
  background:rgba(246,244,236,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.lb-controls-inner{ display:flex; flex-direction:column; gap:12px; }
.lb-search{
  position:relative; max-width:420px;
}
.lb-search input{
  width:100%; padding:11px 14px 11px 38px; border-radius:10px;
  border:1px solid var(--line); background:#fff; font-size:14px; color:var(--ink);
  font-family:var(--font-body);
}
.lb-search input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.lb-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.45; }

.lb-filter-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.lb-diff-pills{ display:flex; gap:8px; }
.lb-pill{
  font-family:var(--font-mono); font-size:12px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink-soft);
  transition:all .15s ease;
}
.lb-pill[aria-pressed="true"]{ background:var(--navy-900); color:var(--paper); border-color:var(--navy-900); }
.lb-pill.easy[aria-pressed="true"]{ background:var(--green); border-color:var(--green); }
.lb-pill.medium[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); }
.lb-pill.hard[aria-pressed="true"]{ background:var(--red); border-color:var(--red); }

.lb-topic-select{
  font-family:var(--font-mono); font-size:12.5px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink); max-width:260px;
}

.lb-progress-mini{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.lb-progress-mini .track{ width:120px; height:6px; border-radius:99px; background:var(--paper-dim); overflow:hidden; }
.lb-progress-mini .fill{ height:100%; background:linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); transition:width .4s ease; }

/* =========================================================================
   Layout: explorer sidebar + content
   ========================================================================= */
.lb-body{ display:grid; grid-template-columns:260px 1fr; gap:36px; padding:36px 0 80px; align-items:start; }
@media (max-width:900px){ .lb-body{ grid-template-columns:1fr; } }

.lb-explorer{
  position:sticky; top:96px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; max-height:calc(100vh - 130px); overflow-y:auto;
}
@media (max-width:900px){ .lb-explorer{ position:static; max-height:none; display:none; } }
.lb-explorer-title{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); letter-spacing:.06em; padding:6px 8px 10px; }
.lb-explorer-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--ink);
  text-decoration:none; margin-bottom:2px;
}
.lb-explorer-item:hover{ background:var(--paper); }
.lb-explorer-item.active{ background:var(--navy-900); color:var(--paper); }
.lb-explorer-item .cnt{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }
.lb-explorer-item.active .cnt{ color:rgba(246,244,236,0.7); }
.lb-explorer-item .bar{ width:34px; height:4px; border-radius:2px; background:var(--paper-dim); overflow:hidden; flex-shrink:0; }
.lb-explorer-item .bar i{ display:block; height:100%; background:var(--gold); }
.lb-explorer-item.active .bar{ background:rgba(246,244,236,0.2); }

.lb-mobile-jump{ display:none; margin-bottom:8px; }
@media (max-width:900px){ .lb-mobile-jump{ display:block; } }

/* Topic sections */
.lb-topic-section{ margin-bottom:44px; scroll-margin-top:150px; }
.lb-topic-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.lb-topic-head h2{ font-family:var(--font-display); font-size:21px; margin:0; font-weight:600; }
.lb-topic-head .lb-topic-count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.lb-topic-progress{ width:100%; height:5px; border-radius:99px; background:var(--paper-dim); overflow:hidden; margin-bottom:16px; }
.lb-topic-progress i{ display:block; height:100%; background:linear-gradient(90deg, var(--gold-dim), var(--gold)); transition:width .4s ease; }

.lb-qlist{ display:flex; flex-direction:column; gap:10px; }
.lb-qcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
  transition:border-color .15s ease;
}
.lb-qcard.solved{ border-color:rgba(63,156,109,0.4); background:linear-gradient(0deg, rgba(63,156,109,0.045), rgba(63,156,109,0.045)), #fff; }
.lb-qcard-row{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; cursor:pointer; }
.lb-check{
  width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line);
  flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center;
  background:#fff; cursor:pointer; transition:all .15s ease;
}
.lb-check.on{ background:var(--green); border-color:var(--green); }
.lb-check svg{ opacity:0; transform:scale(.6); transition:all .15s ease; }
.lb-check.on svg{ opacity:1; transform:scale(1); }
.lb-qcard-main{ flex:1; min-width:0; }
.lb-qcard-top{ display:flex; align-items:center; gap:10px; margin-bottom:3px; flex-wrap:wrap; }
.lb-qid{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); }
.lb-diff-tag{ font-family:var(--font-mono); font-size:10.5px; padding:2px 8px; border-radius:999px; font-weight:600; letter-spacing:.02em; }
.lb-diff-tag.Easy{ background:rgba(63,156,109,0.14); color:#2A7350; }
.lb-diff-tag.Medium{ background:rgba(214,145,59,0.16); color:#9A6620; }
.lb-diff-tag.Hard{ background:rgba(193,87,63,0.14); color:#A5432D; }
.lb-qtitle{ font-size:14.5px; color:var(--ink); line-height:1.4; }
.lb-qcard.solved .lb-qtitle{ color:var(--ink-soft); }
.lb-chev{ margin-left:auto; flex-shrink:0; opacity:.4; transition:transform .2s ease; margin-top:3px; }
.lb-qcard[data-open="true"] .lb-chev{ transform:rotate(180deg); }

.lb-qcard-hint{
  max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease;
  padding:0 16px 0 52px;
}
.lb-qcard[data-open="true"] .lb-qcard-hint{ max-height:160px; padding:0 16px 16px 52px; }
.lb-qcard-hint-inner{
  font-size:13.5px; color:var(--ink-soft); background:var(--paper); border-radius:8px; padding:11px 13px;
  border-left:2px solid var(--gold);
}
.lb-qcard-hint-inner b{ color:var(--gold-dim); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:4px; }

.lb-empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.lb-empty svg{ opacity:.35; margin-bottom:14px; }
.lb-empty p{ font-size:14px; }

/* Reveal on scroll */
.lb-reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.lb-reveal.in{ opacity:1; transform:none; }

/* SEO about section */
.lb-about-seo{ background:var(--paper-dim); border-top:1px solid var(--line); padding:36px 0; }
.lb-about-seo h2{ font-family:var(--font-display); font-size:16px; margin:0 0 10px; color:var(--ink); }
.lb-about-seo p{ font-size:13px; line-height:1.7; color:var(--ink-soft); max-width:82ch; }
.lb-about-seo a{ color:var(--gold-dim); text-decoration:underline; }

/* Footer */
.lb-footer{ background:var(--navy-950); color:rgba(246,244,236,0.6); padding:28px 0; }
.lb-footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; }
.lb-footer a{ color:var(--gold-bright); text-decoration:none; }

/* Toast */
.lb-toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-950); color:var(--paper); font-family:var(--font-mono); font-size:12.5px;
  padding:11px 18px; border-radius:999px; border:1px solid var(--line-dark);
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:50;
  display:flex; align-items:center; gap:8px;
}
.lb-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.lb-toast b{ color:var(--gold-bright); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}