:root{--primary:#1d4ed8;--accent:#f59e0b;--bg:#f3f5f9;--card:#fff;--text:#1c2434;--muted:#6b7385;--line:#e3e7ef;--ok:#15803d;--okbg:#dcfce7;--bad:#b91c1c;--badbg:#fee2e2;--warn:#92400e;--warnbg:#fef3c7;--radius:12px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;color:var(--text);background:var(--bg)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6em;line-height:1.25}
h1{font-size:1.25rem}h2{font-size:1.08rem}h3{font-size:1rem}
small{color:var(--muted);font-size:.84em}
img{max-width:100%}

/* layout */
.shell{display:flex;min-height:100vh}
.side{width:236px;flex:0 0 236px;background:#101827;color:#cbd3e1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:10px;padding:18px 16px;color:#fff;font-weight:700;border-bottom:1px solid #1f2a3d}
.side .brand:hover{text-decoration:none}
.side nav{flex:1;padding:10px 8px}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#cbd3e1;margin-bottom:2px}
.side nav a:hover{background:#1b2536;text-decoration:none}
.side nav a.on{background:var(--primary);color:#fff}
.side nav i{font-style:normal;width:20px;text-align:center}
.side .badge,.bell b{background:var(--accent);color:#111;border-radius:99px;font-size:.72rem;padding:1px 7px;margin-left:auto;font-weight:700}
.logout{padding:12px}
.logout button{width:100%;background:transparent;border:1px solid #2a364b;color:#cbd3e1;padding:8px;border-radius:8px;cursor:pointer;font:inherit}
.logout button:hover{background:#1b2536}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h1{flex:1;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{display:flex;align-items:center;gap:14px}
.who span{display:flex;flex-direction:column;line-height:1.2;text-align:right;font-weight:600}
.who small{font-weight:400}
.bell{position:relative;font-size:1.15rem}
.bell:hover{text-decoration:none}
.menu{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;padding:0 4px}
.content{padding:22px 24px;max-width:1200px;width:100%}
.foot{margin-top:auto;padding:14px 24px;color:var(--muted);font-size:.8rem}
.logo{width:34px;height:34px;border-radius:8px;object-fit:contain;background:#fff;flex:0 0 auto}
.logo-letter{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:800}
.logo.big{width:72px;height:72px;border-radius:16px;font-size:2rem}

/* blocks */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px}
.card.narrow{max-width:720px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid2>.card,.grid2>div>.card{margin-bottom:18px}
.span2{grid-column:1/-1}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cards .card{margin:0}
a.card.course{color:inherit;border-top:4px solid var(--primary);transition:box-shadow .15s}
a.card.course:hover{text-decoration:none;box-shadow:0 6px 18px rgba(16,24,39,.1)}
.card.course{border-top:4px solid var(--line)}
.card.course p{margin:.2em 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;color:inherit}
a.stat:hover{text-decoration:none;box-shadow:0 6px 18px rgba(16,24,39,.08)}
.stat span{color:var(--muted);font-size:.84rem}
.stat strong{font-size:1.45rem;line-height:1.3}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.row-between h2{margin:0}
.crumb{margin:0 0 12px;color:var(--muted)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:2px solid var(--line)}
.tabs a{padding:8px 14px;border-radius:8px 8px 0 0;color:var(--muted);font-weight:600;margin-bottom:-2px;border-bottom:2px solid transparent}
.tabs a:hover{text-decoration:none;color:var(--text)}
.tabs a.on{color:var(--primary);border-bottom-color:var(--primary)}
.muted{color:var(--muted)}
.center{text-align:center}
.right{text-align:right}
.empty{color:var(--muted);padding:14px 0;margin:0}
.lead{font-size:1.08rem}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.actions{white-space:nowrap}
.gradebook th{text-transform:none;white-space:normal;min-width:86px}
.gradebook th small{display:block}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle}

/* forms */
label{display:block;margin-bottom:12px;font-weight:600;font-size:.9rem}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:9px 11px;border:1px solid #cfd5e1;border-radius:8px;font:inherit;font-weight:400;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
input[type=checkbox],input[type=radio]{display:inline;width:auto;margin:0 4px 0 0}
input[type=color]{padding:2px;height:40px}
input[type=file]{padding:7px}
input.short{width:110px}
input.hp{position:absolute;left:-9999px}
label.check{font-weight:400;display:flex;align-items:center;gap:4px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 14px;margin-bottom:12px}
.hint{display:block;margin:-6px 0 12px}
.inline{display:inline}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form input,.inline-form select{width:auto;margin:0}
.btn{display:inline-block;background:var(--primary);color:#fff;border:1px solid var(--primary);border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.small{padding:5px 11px;font-size:.86rem}
.btn.ghost{background:#fff;color:var(--primary)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.block{display:block;width:100%}
button.link{background:none;border:0;padding:0;color:var(--primary);cursor:pointer;font:inherit}
button.link:hover{text-decoration:underline}
.danger{color:var(--bad)}
.danger-zone{border-color:#fecaca}

/* bits */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:600;background:#e8ebf2;color:#414a5c;white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.bad{background:var(--badbg);color:var(--bad)}
.pill.warn{background:var(--warnbg);color:var(--warn)}
.alert{padding:11px 14px;border-radius:9px;margin-bottom:14px;border:1px solid;word-break:break-word}
.alert.ok{background:var(--okbg);border-color:#86efac;color:#14532d}
.alert.err{background:var(--badbg);border-color:#fca5a5;color:#7f1d1d}
.alert.warn{background:var(--warnbg);border-color:#fcd34d;color:#78350f}
ul.list,ul.notes,ul.files{list-style:none;margin:0;padding:0}
ul.list li,ul.notes li{padding:9px 0;border-bottom:1px solid var(--line)}
ul.list li:last-child,ul.notes li:last-child{border-bottom:0}
ul.list.big li{padding:12px 0}
ul.notes li{display:flex;justify-content:space-between;gap:12px}
ul.notes li.unread a{font-weight:700}
ul.notes li.unread::before{content:"●";color:var(--accent);margin-right:6px}
ul.files li{padding:5px 0}
.ext{display:inline-block;background:var(--primary);color:#fff;border-radius:4px;font-size:.68rem;padding:1px 5px;font-weight:700;vertical-align:middle}
.prose{margin:.6em 0;word-break:break-word}
.prose.answer{background:#f7f8fb;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.video{position:relative;padding-top:56.25%;margin:12px 0;border-radius:10px;overflow:hidden;background:#000;max-width:860px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lecture-img{max-height:560px;border-radius:8px;border:1px solid var(--line)}
ol.outline{padding-left:22px;margin:0}
ol.outline li{padding:4px 0}
.sub{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.sub p{margin:.4em 0}
.grade{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}
.grade label{margin:0}.grade input{width:110px}.grade .grow{flex:1;min-width:180px}.grade .grow input{width:100%}
ol.questions{padding-left:22px}
ol.questions>li{margin-bottom:16px}
ol.questions ul{list-style:none;padding:0;margin:6px 0}
ol.questions ul li{padding:5px 10px;border:1px solid var(--line);border-radius:7px;margin-bottom:4px}
ol.questions li.correct{background:var(--okbg);border-color:#86efac}
ol.questions li.wrong{background:var(--badbg);border-color:#fca5a5}
label.opt{font-weight:400;border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin:6px 0;cursor:pointer;display:flex;gap:6px;align-items:center}
label.opt:hover{border-color:var(--primary)}
.timer{font-weight:800;font-size:1.1rem;background:var(--warnbg);color:var(--warn);padding:5px 12px;border-radius:8px;position:sticky;top:70px}
.timer.low{background:var(--badbg);color:var(--bad)}
.score{font-size:2rem;font-weight:800;margin:.2em 0}
.score small{font-size:1rem;font-weight:600}
td.att label{display:inline-flex;font-weight:400;margin:0 12px 0 0;align-items:center}
.att-A{color:var(--bad)}.att-P{color:var(--ok)}
.post .reply{margin:10px 0 0 18px;padding:8px 12px;border-left:3px solid var(--line);background:#f8f9fc;border-radius:0 8px 8px 0}
.reply-form{display:flex;gap:8px;margin-top:12px}
.reply-form input{margin:0}

/* public pages */
body.public{display:flex;justify-content:center;padding:28px 14px;background:linear-gradient(160deg,var(--primary) 0,var(--primary) 240px,var(--bg) 240px)}
.pub{width:100%;max-width:440px}
.pub.wide{max-width:900px}
.pub-brand{text-align:center;color:#fff;margin-bottom:18px}
.pub-brand h1{font-size:1.5rem;margin:10px 0 2px}
.pub-brand p{margin:0;opacity:.92}
.pub-foot{text-align:center;color:var(--muted);font-size:.8rem}
.pub .btn{margin:4px}
.pub .btn.block{margin:4px 0}

/* receipt */
body.receipt-page{background:#fff;padding:24px}
.receipt{max-width:640px;margin:0 auto;border:2px solid var(--primary);border-radius:12px;padding:24px}
.receipt th{width:150px;text-transform:none;font-size:.9rem}
.brand-line{display:flex;gap:12px;align-items:center}

@media (max-width:860px){
  .side{position:fixed;left:-250px;z-index:20;transition:left .2s}
  .side.open{left:0;box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}
  .menu{display:block}
  .grid2{grid-template-columns:1fr}
  .content{padding:16px 12px}
  .top{padding:12px}
  .who span{display:none}
  th,td{padding:8px 6px}
  td.actions{white-space:normal}
}
@media print{
  .side,.top,.foot,.no-print,.tabs,.btn,form.inline-form{display:none!important}
  body{background:#fff}
  .card{border:0;padding:0}
  .content{padding:0;max-width:none}
}

/* progress, live class, getting started */
progress.bar{width:100%;height:10px;accent-color:var(--primary);margin:0 0 12px}
.card.live{border-left:5px solid #dc2626}
.card.live h2{margin:0 0 4px}
.list.steps li{padding:8px 0}

/* lectures, register, calendar */
h3.sec{margin:18px 0 4px;padding-top:10px;border-top:1px solid var(--line);font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table.register th,table.register td{text-align:center;padding:6px 6px;font-size:.85rem}
table.register td:first-child,table.register th:first-child{text-align:left;position:sticky;left:0;background:var(--card)}
.rg{font-weight:700}.rg-P{color:var(--ok);background:var(--okbg)}.rg-T{color:var(--warn);background:var(--warnbg)}.rg-A{color:var(--bad);background:var(--badbg)}.rg-L{color:#414a5c;background:#e8ebf2}
.calendar{display:flex;flex-wrap:wrap;gap:6px}
.calendar .day{width:54px;border-radius:8px;padding:6px 4px;text-align:center;display:flex;flex-direction:column;line-height:1.15}
.calendar .day small{font-size:.68rem}.calendar .day i{font-style:normal;font-weight:700;font-size:.8rem}
.card.cont{border-left-color:var(--primary)}
/* tour */
.tour{position:fixed;inset:0;background:rgba(15,27,45,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.tour[hidden]{display:none}
.tour-box{background:#fff;border-radius:14px;padding:22px;max-width:440px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.tstep{display:none}.tstep.on{display:block}.tstep small{color:var(--muted)}.tstep h3{margin:4px 0 8px}
.tour-nav{display:flex;justify-content:space-between;margin-top:14px}
/* product page */
body.site{background:#fff;color:#0f1b2d}
.s-wrap{max-width:1060px;margin:0 auto;padding:0 20px}.s-wrap.narrow{max-width:760px}
.s-top{background:#0f1b2d;color:#fff}
.s-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;gap:12px;flex-wrap:wrap}
.s-nav nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.s-nav nav a{color:#c9d2e3}.s-nav nav a.btn{color:#1a1300}
.s-logo{font-weight:800;font-size:1.2rem;color:#fff}
body.site .btn{background:var(--accent);border-color:var(--accent);color:#1a1300}
body.site .btn.ghost{background:transparent;color:#fff;border-color:#4a5873}
body.site section .btn.ghost{color:#0f1b2d;border-color:#c5cbd8}
.btn.big{padding:12px 22px;font-size:1.02rem}
.s-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:48px 20px 60px}
.s-hero h1{font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.15;margin:0 0 14px}
.s-hero p{color:#c9d2e3;font-size:1.08rem}
.s-ticks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;color:#c9d2e3;font-size:.92rem}
.s-ticks li:before{content:"✓ ";color:#5eead4;font-weight:700}
.s-ticks.col{flex-direction:column;color:var(--muted)}.s-ticks.col li:before{color:var(--ok)}
.s-phone{background:#16263d;border:1px solid #2a3b56;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:4px;max-width:330px;justify-self:center;width:100%}
.s-phone small{color:#9fb0cc;font-size:.7rem;letter-spacing:.06em}.s-phone span{color:#c9d2e3;font-size:.88rem}.s-phone hr{border:0;border-top:1px solid #2a3b56;width:100%;margin:10px 0}
.s-bar{height:8px;background:#0f1b2d;border-radius:9px;margin:8px 0 2px}.s-bar i{display:block;width:60%;height:100%;background:#5eead4;border-radius:9px}
body.site section{padding:52px 0}.s-alt{background:#f6f8fb;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.site h2{font-size:clamp(1.35rem,3vw,1.9rem);margin:0 0 6px}.s-sub{color:var(--muted);margin:0 0 24px}
.s-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.s-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.s-card.acc{border-top:4px solid var(--accent)}
.s-card h3{margin:0 0 6px;font-size:1.05rem}.s-card p{margin:0 0 8px;color:var(--muted);font-size:.95rem}
.s-num{display:inline-block;font-weight:800;color:var(--accent);margin-bottom:6px}
.s-calc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.s-result{display:flex;flex-direction:column;justify-content:center;background:#0f1b2d;color:#fff;border-color:#0f1b2d}
.s-result small{color:#9fb0cc;letter-spacing:.06em}.s-result b{font-size:2rem;margin-top:10px}.s-result span{color:#c9d2e3}.s-result .muted{color:#9fb0cc;margin-top:12px}
.s-faq{border-bottom:1px solid var(--line);padding:12px 0}.s-faq summary{cursor:pointer;font-weight:600}.s-faq p{color:var(--muted);margin:8px 0 0}
.s-foot{padding:26px 0;color:var(--muted);font-size:.9rem;text-align:center}
@media(max-width:780px){.s-hero{grid-template-columns:1fr;padding:30px 20px 40px}.s-calc{grid-template-columns:1fr}.s-nav nav a:not(.btn):not([href*="login"]){display:none}}