:root{
  --bg:#0b1220; --card:#121a2b; --text:#e6eefc; --muted:#b8c2d9;
  --brand:#0ea5e9; --brand-strong:#0284c7; --ok:#22c55e; --warn:#f59e0b;
  --border: color-mix(in oklab, var(--text) 10%, transparent);
}
[data-theme="light"]{
  --bg:#f8fafc; --card:#ffffff; --text:#0b1220; --muted:#475569; --brand:#0ea5e9; --brand-strong:#0369a1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,.15), transparent 60%), var(--bg);
  color:var(--text); line-height:1.55;
}
.container{width:min(1100px,92%); margin-inline:auto}
a{color:var(--brand); text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(14,165,233,.35); border-radius:.5rem}
header{position:sticky; top:0; z-index:10; backdrop-filter:blur(8px); background:color-mix(in oklab, var(--bg) 90%, transparent); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px}
.brand img{width:34px; height:34px; border-radius:.6rem}
.nav a{margin-left:1rem; font-weight:600; color:var(--text); opacity:.9}
.btn{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border); background:linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), var(--card)); padding:.6rem .9rem; border-radius:.8rem; color:var(--text); font-weight:600; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 24px rgba(2,132,199,.18)}
.btn.primary{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 15%, transparent), var(--brand)); border-color:color-mix(in oklab, var(--brand) 35%, transparent); color:white}
.btn.success{background:linear-gradient(180deg, color-mix(in oklab, var(--ok) 15%, transparent), var(--ok)); border-color:color-mix(in oklab, var(--ok) 35%, transparent); color:#052e12}
main{min-height:60vh}
footer{border-top:1px solid var(--border); padding:2rem 0; color:var(--muted)}
.grid{display:grid; gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem}
.hero{display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:2rem; padding:3rem 0 2rem}
.hero h1{font-size:clamp(2rem,3.6vw,3rem); line-height:1.1; margin:0 0 .4rem}
.hero p{color:var(--muted); margin:0 0 1.2rem}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.kpi{border:1px dashed color-mix(in oklab, var(--text) 18%, transparent); border-radius:.8rem; padding:.9rem; text-align:center}
.kpi b{font-size:1.4rem}
input,select,textarea{width:100%; padding:.65rem .75rem; border-radius:.6rem; border:1px solid var(--border); background:color-mix(in oklab, var(--card) 98%, transparent); color:var(--text)}
label{font-weight:600; display:block; margin:.5rem 0 .25rem}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border); padding:.6rem .4rem; text-align:left}
.badge{display:inline-block; padding:.2rem .5rem; border-radius:.5rem; border:1px solid var(--border); font-size:.85rem; color:var(--muted)}
.course-card h3{margin:.4rem 0}
.meta{color:var(--muted); font-size:.95rem}
.video{position:relative; aspect-ratio:16/9; border-radius:.8rem; overflow:hidden; border:1px solid var(--border); background:#000; display:grid; place-items:center; color:#cbd5e1}
.video button{position:absolute; inset:auto auto 1rem 1rem}
.alert{padding:.8rem 1rem; border:1px solid var(--border); border-radius:.7rem; background:linear-gradient(180deg, color-mix(in oklab, var(--card) 98%, transparent), var(--card))}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} .nav a{display:none}}