/* =========================================================
   Learning Hub — polished UI (dark default + light toggle)
   ======================================================= */
:root{
  --bg:#0b1220; --bg-accent1:#0f1b3a; --bg-accent2:#0b3a2b;
  --panel:#101827; --panel-2:#0e1624;
  --ink:#e6eefc; --ink-dim:#a8bed8;
  --brand:#6dd3ff; --accent:#8b7bff; --accent-2:#31d0aa;
  --chip:#0f1a2f; --line:#1a2a48;
  --ok:#26d07c; --warn:#ffb020; --bad:#ff5d73;
  --rad:16px; --gap:16px; --pad:20px; --shadow:0 14px 40px rgba(0,0,0,.35);
}
html.light{
  --bg:#f6f8fe; --bg-accent1:#dde8ff; --bg-accent2:#dff7ef;
  --panel:#ffffff; --panel-2:#f7f9fe;
  --ink:#0b1220; --ink-dim:#4a5b77;
  --chip:#eef3ff; --line:#e3e9f4; --shadow:0 10px 28px rgba(12,27,66,.12);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;color:var(--ink);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 700px at -10% -10%, var(--bg-accent1) 0%, transparent 65%),
    radial-gradient(900px 600px at 120% 10%, var(--bg-accent2) 0%, transparent 60%),
    var(--bg);
}
.container{max-width:1100px;margin-inline:auto;padding:clamp(16px,2vw,24px)}
.container.narrow{max-width:840px}.container.wide{max-width:1280px}
.sr-only{position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding-top:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--accent));color:#071225;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.brand-text{font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;padding:.55rem .8rem;border-radius:10px;border:1px solid transparent}
.nav a[aria-current="page"], .nav a:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:transform .06s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{box-shadow:0 8px 24px rgba(0,0,0,.15)} .btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#061023;border-color:transparent;font-weight:700}
.btn.ghost{background:transparent;border-color:var(--line)} .btn.link{border-color:transparent;padding:0;height:auto;color:var(--brand)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(16px,3vw,36px);padding-top:6px;padding-bottom:8px}
.hero .lead{color:var(--ink-dim);max-width:58ch} .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hero-art{min-height:260px;position:relative}
.orbit{--s:320px;position:absolute;inset:0;display:grid;place-items:center;filter:drop-shadow(0 8px 30px rgba(109,211,255,.25))}
.orbit::before{content:"";width:var(--s);height:var(--s);border-radius:50%;border:1.5px dashed rgba(255,255,255,.18)}
.planet{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff 0 20%, transparent 21%),linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 0 18px rgba(109,211,255,.65)}
.p1{animation:rev 9s linear infinite}.p2{animation:rev 12s linear infinite;transform:translate(40px,-40px)}.p3{animation:rev 15s linear infinite;transform:translate(-60px,60px)}
@keyframes rev{to{transform:rotate(360deg) translate(120px) rotate(-360deg)}}
.grid{display:grid;gap:var(--gap)} .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.three{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--rad);padding:var(--pad);box-shadow:var(--shadow)}
.card-link{display:block;text-decoration:none;color:inherit;font-weight:700;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--rad);padding:var(--pad);box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease}
.card-link:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.35);border-color:#2a3a66}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;font-size:.85rem;color:var(--ink-dim)}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--rad);padding:var(--pad);box-shadow:var(--shadow);margin-top:18px}
.row{display:flex;align-items:center}.row.gap{gap:10px}
.hidden{display:none}.muted{color:var(--ink-dim)}.tiny{font-size:.92rem}.text-lg{font-size:1.1rem}
.progress h2{margin:.2rem 0 1rem}
.progress-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
@media (max-width:820px){.progress-grid{grid-template-columns:1fr}}
.progress-card{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);padding:var(--pad);border-radius:var(--rad)}
.ring{--v:0;--size:62px;width:var(--size);height:var(--size);border-radius:50%;background:conic-gradient(var(--accent) calc(var(--v)*1%), rgba(255,255,255,.08) 0),radial-gradient(circle at 50% 50%, rgba(0,0,0,.0) 56%, rgba(0,0,0,.35) 57%);display:grid;place-items:center;font-weight:800;color:var(--ink)}
.ring::after{content: attr(data-pct) "%";font-size:.9rem}
label{display:grid;gap:6px}
select,input[type="text"]{height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink);padding:0 10px;outline:none;transition:border-color .15s ease, box-shadow .2s ease}
select:focus,input[type="text"]:focus{border-color:#2a3a66;box-shadow:0 0 0 3px rgba(109,211,255,.25)}
.site-footer{margin-top:40px;border-top:1px solid var(--line);padding-top:18px}
.foot{display:flex;gap:10px;flex-wrap:wrap}
.banner{background:linear-gradient(135deg,rgba(109,211,255,.12),rgba(49,208,170,.12));border:1px dashed rgba(255,255,255,.22);border-radius:var(--rad)}
h1,h2,h3,h4{letter-spacing:.2px} a{color:var(--brand)} a:hover{color:#9adfff}
@media (min-width:1440px){.container{max-width:1200px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}
.hero,.pillars .card,.progress-card,.panel{animation:fadeUp .4s ease both}