/* AI & AI Security Academy — modern, engaging "security console" theme. */
:root{
  --bg:#0b1020; --bg2:#0f1630; --panel:#141d3a; --panel2:#1b274b;
  --ink:#e7ecf7; --muted:#9aa6c4; --line:#27345e;
  --brand:#5b8cff; --brand2:#7c5cff; --accent:#22d3ee;
  --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --radius:14px; --maxw:980px;
  --grad:linear-gradient(135deg,var(--brand),var(--brand2));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font:16px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34,211,238,.12), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(11,16,32,.78); border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center;
  justify-content:space-between; padding:.7rem 1.2rem;
}
.brand{color:var(--ink);font-weight:800;font-size:1.06rem;letter-spacing:.2px;display:flex;align-items:center;gap:.5rem}
.brand:hover{text-decoration:none}
.logo{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.3rem}
.topbar nav{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center}
.topbar nav a{color:var(--muted);font-size:.93rem;font-weight:600}
.topbar nav a:hover{color:var(--ink);text-decoration:none}
.who{color:var(--accent);font-size:.82rem;font-weight:700}

main{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.2rem 3rem}

/* ---- hero ---- */
.hero{
  margin:1rem 0 2rem; padding:2.4rem 2rem; border-radius:20px;
  background:linear-gradient(135deg,rgba(91,140,255,.16),rgba(124,92,255,.10));
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.hero h1{font-size:2.2rem;line-height:1.15;margin:.2rem 0 .6rem;letter-spacing:-.5px}
.hero p{font-size:1.08rem;color:#c7d0ea;max-width:60ch;margin:.4rem 0}
.hero .pills{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.gradtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- buttons & pills ---- */
.btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--grad);color:#fff;border:none;
  padding:.62rem 1.05rem;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;
  text-decoration:none;transition:transform .08s ease,box-shadow .2s ease;box-shadow:0 6px 18px rgba(91,140,255,.25)}
.btn:hover{transform:translateY(-1px);text-decoration:none;box-shadow:0 10px 26px rgba(124,92,255,.35)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);background:rgba(91,140,255,.08)}
.btn.sm{padding:.4rem .7rem;font-size:.85rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;
  padding:.28rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.pill.lvl{color:var(--accent);border-color:rgba(34,211,238,.4)}
.pill.done{color:var(--good);border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.08)}

/* ---- cards / module grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem;margin-top:1.2rem}
.card{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.2rem 1.3rem;transition:transform .1s,border-color .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);border-color:var(--brand)}
.card .num{font-size:.8rem;font-weight:800;color:var(--muted);letter-spacing:.12em}
.card .ico{font-size:1.7rem;line-height:1}
.card h3{margin:.5rem 0 .35rem;font-size:1.12rem}
.card p{color:#c2cbe6;font-size:.94rem;margin:.2rem 0 .9rem;flex:1}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto}
.card .meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.card .barwrap{height:7px;border-radius:99px;background:#0a0f22;border:1px solid var(--line);overflow:hidden;margin:.2rem 0 .8rem}
.card .bar{height:100%;width:0;background:var(--grad);transition:width .5s ease}

/* ---- module reader ---- */
.reader{max-width:760px;margin:0 auto}
.crumbs{font-size:.85rem;color:var(--muted);margin:.2rem 0 1rem}
.modhead h1{font-size:1.9rem;margin:.3rem 0 .5rem;letter-spacing:-.4px}
.modhead .sub{color:#c7d0ea;font-size:1.05rem}
.objectives{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.3rem 0}
.objectives h4{margin:.1rem 0 .5rem;color:var(--accent);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.objectives li{margin:.25rem 0}
section.block{margin:1.9rem 0}
section.block h2{font-size:1.4rem;margin:.2rem 0 .6rem;letter-spacing:-.3px}
section.block p{color:#dbe2f4}
section.block code{background:#0a0f22;border:1px solid var(--line);padding:.08rem .35rem;border-radius:5px;font-size:.88em;color:var(--accent)}
.lead{font-size:1.1rem;color:#cdd6ee}

/* callouts */
.callout{border-radius:12px;padding:1rem 1.1rem;margin:1.3rem 0;border:1px solid var(--line);background:var(--panel)}
.callout .ttl{font-weight:800;margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
.callout.key{border-color:rgba(91,140,255,.5);background:rgba(91,140,255,.08)}
.callout.tip{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.07)}
.callout.warn{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.08)}
.callout.story{border-color:rgba(124,92,255,.5);background:rgba(124,92,255,.09);font-style:italic}
.callout.key .ttl{color:var(--brand)} .callout.tip .ttl{color:var(--good)}
.callout.warn .ttl{color:var(--warn)} .callout.story .ttl{color:var(--brand2)}

/* figures & video */
figure{margin:1.5rem 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;text-align:center}
figure img,figure svg{max-width:100%;height:auto;border-radius:8px}
figcaption{color:var(--muted);font-size:.85rem;margin-top:.6rem}
.video{position:relative;margin:1.5rem 0}
.video .frame{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .vcap{color:var(--muted);font-size:.85rem;margin-top:.5rem}
.video .src{color:var(--accent);font-weight:700}

/* compare / steps */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0}
.compare .col{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem}
.compare .col h4{margin:.1rem 0 .5rem}
.steps{counter-reset:s;margin:1.3rem 0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding:.6rem 0 .6rem 2.6rem;border-bottom:1px solid var(--line)}
.steps li:before{content:counter(s);position:absolute;left:0;top:.5rem;width:1.8rem;height:1.8rem;border-radius:50%;
  background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem}

/* key terms & sources */
.terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem;margin:1.2rem 0}
.terms .t{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem}
.terms .t b{color:var(--accent)}
.sources{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin:1.6rem 0}
.sources h4{margin:.1rem 0 .6rem;color:var(--accent);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.sources li{margin:.4rem 0;font-size:.92rem}
.sources .org{display:inline-block;font-size:.72rem;font-weight:800;color:var(--bg);background:var(--accent);
  padding:.05rem .45rem;border-radius:5px;margin-right:.5rem;vertical-align:middle}

/* quiz */
.quiz{max-width:720px;margin:0 auto}
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1rem 0}
.qcard .qn{color:var(--muted);font-weight:800;font-size:.8rem;letter-spacing:.1em}
.qcard .qtext{font-size:1.12rem;font-weight:600;margin:.4rem 0 1rem}
.opt{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:.5rem 0;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--brand)}
.opt input{margin-right:.6rem}
.opt.correct{border-color:var(--good);background:rgba(52,211,153,.12)}
.opt.wrong{border-color:var(--bad);background:rgba(251,113,133,.12)}
.opt.locked{cursor:default;opacity:.95}
.explain{margin-top:.7rem;padding:.7rem .9rem;border-left:3px solid var(--brand);background:rgba(91,140,255,.07);border-radius:0 8px 8px 0;font-size:.93rem;display:none}
.explain.show{display:block}
.tags{margin-top:.5rem;display:flex;gap:.35rem;flex-wrap:wrap}
.tag{font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:.05rem .5rem}

/* progress dashboard & results */
.scorewrap{text-align:center;margin:1.5rem 0}
.ring{--p:0;width:160px;height:160px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--brand) calc(var(--p)*1%), #0a0f22 0)}
.ring .inner{width:124px;height:124px;border-radius:50%;background:var(--bg);display:grid;place-items:center}
.ring .pct{font-size:2rem;font-weight:800}
.bars .b{margin:.7rem 0}
.bars .b .lab{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.25rem}
.bars .b .track{height:10px;border-radius:99px;background:#0a0f22;border:1px solid var(--line);overflow:hidden}
.bars .b .fill{height:100%;border-radius:99px}
.fill.good{background:var(--good)} .fill.mid{background:var(--warn)} .fill.low{background:var(--bad)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.2rem 0}
.panel h3{margin-top:0}
.focuslist li{margin:.5rem 0}

/* forms */
fieldset{border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;background:var(--panel);margin:1rem 0}
legend{font-weight:800;padding:0 .4rem;color:var(--accent)}
label.field{display:block;margin:.7rem 0;font-size:.92rem;color:var(--muted)}
input[type=text],input[type=password]{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;
  background:var(--bg2);color:var(--ink);font:inherit;margin-top:.25rem}
.flash{padding:.7rem 1rem;border-radius:10px;margin:1rem 0;border:1px solid var(--line)}
.flash.error{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.5);color:#ffd7dd}
.flash.ok{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.5)}
.toast{position:fixed;bottom:1.1rem;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);padding:.7rem 1.1rem;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:100;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}

/* footer */
footer{border-top:1px solid var(--line);margin-top:2rem}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:1.4rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}

@media (max-width:620px){
  .hero h1{font-size:1.7rem} .compare{grid-template-columns:1fr}
  .topbar nav a{font-size:.86rem}
}