@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
:root{
  --bg:#07070e;
  --bg2:#12101c;
  --card:#16141f;
  --line:#ffffff14;
  --txt:#f6f3ff;
  --mut:#9d96b3;
  --pri:#a78bfa;
  --pri2:#6366f1;
  --acc:#fbbf24;
  --cyan:#22d3ee;
  --ok:#34d399;
  --bad:#fb7185;
  --rad:18px;
}
*{box-sizing:border-box}
html,body{
  margin:0;min-height:100vh;color:var(--txt);
  font-family:Manrope,Inter,system-ui,sans-serif;
  background:
    radial-gradient(900px 420px at 100% -10%, color-mix(in srgb, var(--pri) 28%, transparent), transparent 55%),
    radial-gradient(720px 380px at -10% 110%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 50%),
    radial-gradient(600px 300px at 50% 120%, #22d3ee12, transparent 50%),
    linear-gradient(180deg,#07070e,#0e0c16 40%,#07070e);
}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.04em;margin:0 0 10px}
h1{font-size:clamp(26px,3vw,34px);font-weight:800}
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.top{display:flex;min-height:100vh}
.side{
  width:248px;padding:22px 14px;flex-shrink:0;
  background:linear-gradient(180deg,#120f1ccc,#0b0a12aa);
  border-right:1px solid var(--line);backdrop-filter:blur(18px)
}
.side .nav-lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6f6a82;margin:16px 10px 8px}
.side a{display:block;padding:10px 12px;border-radius:12px;color:var(--mut);margin-bottom:3px;font-weight:600;font-size:14px}
.side a.on{background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 35%,transparent),color-mix(in srgb,var(--pri2) 25%,transparent));color:#fff;box-shadow:0 0 0 1px #ffffff12}
.side a:hover{color:#fff;background:#ffffff10}
.brand{font-weight:800;margin:4px 10px 8px;font-size:20px;background:linear-gradient(90deg,#fff,var(--pri));-webkit-background-clip:text;background-clip:text;color:transparent}
.main{flex:1;padding:26px 28px;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px}
.page-head .mut{margin:0}
.card{
  background:linear-gradient(180deg,#1b1826ee,#121018dd);
  border:1px solid var(--line);border-radius:var(--rad);
  padding:18px;margin-bottom:16px;
  box-shadow:0 10px 40px #00000040
}
.card.accent{border-color:color-mix(in srgb,var(--pri) 40%,transparent)}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.stat{
  position:relative;overflow:hidden;padding:18px 18px 16px
}
.stat .kpi{font-size:32px;font-weight:800;letter-spacing:-.04em}
.stat .mut{margin-bottom:6px}
.stat:before{
  content:"";position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;opacity:.35
}
.stat.s1:before{background:var(--pri)}
.stat.s2:before{background:var(--acc)}
.stat.s3:before{background:var(--cyan)}
.stat.s4:before{background:var(--ok)}
.bar{height:8px;border-radius:99px;background:#ffffff12;overflow:hidden;margin-top:10px}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pri),var(--cyan))}
.course{
  display:block;padding:0;overflow:hidden;transition:transform .15s ease,border-color .15s
}
.course:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pri) 50%,transparent)}
.course .cover{
  height:110px;background:
    linear-gradient(135deg,color-mix(in srgb,var(--pri) 55%,#111),color-mix(in srgb,var(--acc) 40%,#222));
}
.course .cover.alt{background:linear-gradient(135deg,#22d3ee88,#6366f1aa)}
.course .body{padding:16px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--mut);background:#ffffff08}
.tag{font-size:11px;color:var(--acc);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mut{color:var(--mut);font-size:13px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--pri),var(--pri2));
  color:#fff;border:0;border-radius:12px;padding:10px 16px;cursor:pointer;font-weight:700
}
.btn.ghost{background:#ffffff10;color:#fff}
.btn.bad{background:linear-gradient(135deg,#fb7185,#e11d48)}
input,select,textarea{
  width:100%;background:#0c0b14;border:1px solid #ffffff18;color:#fff;
  border-radius:12px;padding:11px 12px;margin:6px 0 12px;font:inherit
}
input:focus,select:focus,textarea:focus{outline:0;border-color:color-mix(in srgb,var(--pri) 70%,white)}
label{font-size:12px;color:var(--mut);font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14px}
th{color:#7c778e;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line)}
.flash{padding:10px 12px;border-radius:12px;margin-bottom:12px}
.ok{background:#34d39922;border:1px solid #34d39955}
.err{background:#fb718522;border:1px solid #fb718555}
.hero{padding:56px 24px 28px;text-align:center}
.hero h1{font-size:clamp(32px,6vw,56px);margin:12px 0 10px}
.lead{font-size:18px;color:var(--mut);max-width:640px;margin:0 auto 22px;line-height:1.5}
.nav{position:sticky;top:0;z-index:5;background:#07070ecc;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding:14px 24px}
.feat h3{margin:8px 0 6px}
.auth{max-width:420px;margin:8vh auto;padding:28px}
iframe,.player{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#000}
.less{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.lock{opacity:.5}
.avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pri),var(--acc));font-weight:800;font-size:13px
}
@media(max-width:960px){
  .top{display:block}
  .side{width:auto;border-right:0;border-bottom:1px solid var(--line)}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .main{padding:18px}
}