:root{color-scheme:light dark;--bg:#eef2f8;--panel:#fff;--panel2:#f7f9fc;--text:#14213d;--muted:#6d7890;--line:#e2e7f0;--brand:#3657d6;--brand2:#6c7ff0;--nav:#1e2f68;--good:#12a36a;--warn:#e9a23b;--danger:#d95757;--shadow:0 18px 50px rgba(26,44,90,.12)}
@media(prefers-color-scheme:dark){:root{--bg:#0d1323;--panel:#151d31;--panel2:#101827;--text:#edf2ff;--muted:#99a5bd;--line:#27314a;--nav:#111a37;--shadow:0 18px 50px rgba(0,0,0,.28)}}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}.app{min-height:100vh;background:var(--bg)}
.top{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px}.logo{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#2948bd,#788cff);display:grid;place-items:center;color:#fff;box-shadow:0 8px 22px #3657d633}.brand small{display:block;color:var(--muted);font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.top-actions{display:flex;align-items:center;gap:10px}.search{width:min(330px,30vw);height:42px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);padding:0 14px;color:var(--text);outline:none}.iconbtn,.avatar{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);display:grid;place-items:center}.avatar{border-radius:50%;background:linear-gradient(135deg,#f0b38c,#6e7ee9);color:#fff;font-weight:800}.layout{display:grid;grid-template-columns:252px 1fr;min-height:calc(100vh - 74px)}.side{background:var(--nav);color:#eaf0ff;padding:18px 14px;position:sticky;top:74px;height:calc(100vh - 74px);overflow:auto}.workspace{padding:28px;min-width:0}.role{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:5px;background:#ffffff12;border:1px solid #ffffff16;border-radius:14px;margin-bottom:20px}.role button{border:0;background:transparent;color:#b9c7ef;padding:9px 4px;border-radius:10px;font-size:11px;font-weight:800}.role button.active{background:#fff;color:#243b8f}.nav{display:grid;gap:6px}.nav button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;border:0;background:transparent;color:#bdc8eb;text-align:left;border-radius:12px;font-weight:700}.nav button:hover,.nav button.active{background:#ffffff14;color:#fff}.nav .dot{width:7px;height:7px;border-radius:50%;background:#7f95ff}.side-footer{margin-top:30px;padding:16px;border:1px solid #ffffff14;border-radius:16px;background:#ffffff08}.side-footer b{font-size:13px}.side-footer p{font-size:11px;line-height:1.5;color:#aebce3}.main-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.eyebrow{color:var(--brand);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.h1{font-size:30px;line-height:1.1;margin:6px 0}.sub{color:var(--muted);margin:0;font-size:14px}.actions{display:flex;gap:9px}.btn{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:12px;font-weight:800}.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 8px 20px #3657d633}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(26,44,90,.05);padding:18px}.stat{display:flex;justify-content:space-between;gap:10px}.stat .k{font-size:12px;color:var(--muted);font-weight:700}.stat .v{font-size:28px;font-weight:900;margin:5px 0}.trend{font-size:11px;color:var(--good);font-weight:800}.spark{width:70px;height:42px}.section{margin-top:18px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-title h2{font-size:16px;margin:0}.section-title span{font-size:12px;color:var(--muted)}.hero{display:grid;grid-template-columns:1.45fr .8fr;gap:14px}.hero-main{min-height:205px;position:relative;overflow:hidden;background:linear-gradient(135deg,#203a92,#526be4);color:#fff;border:0}.hero-main:after{content:"";position:absolute;right:-80px;top:-90px;width:290px;height:290px;border-radius:50%;background:#ffffff13}.hero-main h2{font-size:25px;margin:7px 0}.hero-main p{color:#dce4ff;max-width:570px;line-height:1.55;font-size:13px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{padding:6px 9px;border-radius:99px;background:#ffffff17;border:1px solid #ffffff1e;font-size:10px;font-weight:800}.progress{height:8px;border-radius:99px;background:#ffffff20;overflow:hidden;margin:14px 0 8px}.progress i{display:block;height:100%;width:72%;background:#fff;border-radius:99px}.hero-side{display:flex;flex-direction:column;justify-content:space-between}.mini-title{font-size:12px;color:var(--muted);font-weight:800}.big{font-size:32px;font-weight:900}.ring{width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--brand) 0 83%,#e6eaf2 83% 100%);display:grid;place-items:center}.ring:after{content:"83%";width:58px;height:58px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:14px;font-weight:900}.cols{display:grid;grid-template-columns:1.25fr .85fr;gap:14px}.course-list{display:grid;gap:10px}.course{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.thumb{width:68px;height:52px;border-radius:10px;background:linear-gradient(135deg,#293f9c,#7b8cff);display:grid;place-items:center;color:#fff;font-weight:900}.course h3{font-size:13px;margin:0 0 4px}.course p{font-size:11px;color:var(--muted);margin:0}.tag{font-size:10px;font-weight:900;padding:5px 7px;border-radius:7px;background:#3657d612;color:var(--brand)}.bars{height:170px;display:flex;align-items:flex-end;gap:11px;padding:15px 4px 0}.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}.bar i{width:100%;max-width:30px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#6c7ff0,#3657d6);min-height:10px}.bar span{font-size:9px;color:var(--muted)}.funnel{display:grid;gap:8px}.frow{display:grid;grid-template-columns:92px 1fr 55px;align-items:center;gap:10px;font-size:11px}.track{height:12px;border-radius:99px;background:var(--panel2);overflow:hidden}.track i{display:block;height:100%;background:linear-gradient(90deg,#3657d6,#7a8cff);border-radius:99px}.table{width:100%;border-collapse:collapse;font-size:11px}.table th,.table td{text-align:left;padding:11px 7px;border-bottom:1px solid var(--line)}.table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.status{padding:5px 7px;border-radius:7px;font-weight:800;font-size:9px}.status.good{background:#12a36a14;color:var(--good)}.status.warn{background:#e9a23b16;color:#c27a12}.status.info{background:#3657d612;color:var(--brand)}.social{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.post{padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.post b{font-size:11px}.post p{font-size:11px;line-height:1.45;color:var(--muted)}.metricline{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.metricline span{font-size:10px;color:var(--muted)}.metricline b{font-size:12px}.hidden{display:none!important}
@media(max-width:1100px){.layout{grid-template-columns:76px 1fr}.side{padding:15px 10px}.brandtext,.nav button span,.side-footer,.role{display:none}.nav button{justify-content:center}.grid4{grid-template-columns:repeat(2,1fr)}.hero,.cols{grid-template-columns:1fr}.social{grid-template-columns:1fr}}
@media(max-width:700px){.top{padding:0 14px}.search{display:none}.layout{grid-template-columns:1fr}.side{position:fixed;bottom:0;top:auto;left:0;right:0;height:62px;z-index:30;padding:6px}.nav{display:flex;justify-content:space-around}.nav button{padding:8px}.workspace{padding:18px 14px 82px}.grid4{grid-template-columns:1fr 1fr}.main-head{align-items:flex-start}.actions .btn:not(.primary){display:none}.h1{font-size:24px}.course{grid-template-columns:52px 1fr}.thumb{width:52px}.course .tag{display:none}}