:root{
  --yellow:#FFD300;
  --navy:#0B1F3A;
  --ink:#0f1115;
  --bg:#061226;
  --card: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.1);
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--white);
  background:
    radial-gradient(1000px 500px at 90% -10%, #122B52 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--bg) 100%);
  min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:var(--yellow); text-decoration:none}
.wrap{width:min(1100px,92%); margin-inline:auto}
header{padding:18px 0}
.brand{display:flex; align-items:center; gap:12px; color:var(--white); text-decoration:none}
.badge{width:48px; height:48px; border-radius:12px; background:var(--yellow); display:grid; place-items:center}
.badge svg{width:26px; height:26px}
.title{display:flex; flex-direction:column; line-height:1.05}
.name{font-weight:800; letter-spacing:.2px}
.slogan{font-weight:600; opacity:.9; font-size:.9rem}
.nav{margin-top:8px; display:flex; gap:10px; flex-wrap:wrap}
.nav a{padding:8px 12px; border:1px solid var(--border); border-radius:10px; color:#fff}
main{padding:16px 0 32px}
h1{margin:.2rem 0 .5rem; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem)}
.lead{opacity:.92}
.grid{display:grid; gap:16px; grid-template-columns:1fr}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px}
.card h3{margin:.2rem 0 .2rem}
.btn{display:inline-flex; gap:8px; align-items:center; padding:12px 14px; border-radius:12px; background:var(--yellow); color:#111; font-weight:800; border:2px solid transparent}
.btn.ghost{background:transparent; color:#fff; border-color:var(--border)}
.kicker{color:var(--yellow); font-weight:800; letter-spacing:.3px; text-transform:uppercase; font-size:.85rem}
.module{margin:10px 0 16px}
.module h4{margin:.5rem 0 .4rem}
.lesson{padding:10px; border:1px dashed var(--border); border-radius:12px; margin:6px 0; background:rgba(255,255,255,.04)}
.lesson p{margin:.2rem 0}
.quiz{margin:10px 0}
.option{display:block; background:rgba(255,255,255,.04); padding:10px; border-radius:10px; border:1px solid var(--border); margin:6px 0; cursor:pointer}
.option input{margin-right:8px}
.progress{margin:12px 0; font-weight:700}
.alert{background:#133; border:1px solid #266; padding:10px 12px; border-radius:10px; color:#cde}
footer{margin-top:auto; padding:22px 0 36px; color:rgba(255,255,255,.8)}
footer .foot{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:860px){
  .grid-3{grid-template-columns:repeat(3, 1fr)}
  footer .foot{grid-template-columns:1fr auto}
}