:root{
  color-scheme:dark;
  --bg:#04101d;--panel:#081a2b;--panel2:#0b2135;--line:#19364d;--text:#eef7ff;
  --muted:#8fa9bb;--cyan:#32d7c5;--gold:#efc66d;--blue:#4d8dff;--danger:#ff7181;
  --ok:#42d69a;--shadow:0 24px 70px rgba(0,0,0,.25)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 80% 0,#0b2b46 0,transparent 35%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button,input,textarea{font:inherit}.hidden{display:none!important}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(4,16,29,.9);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.brand img{width:38px;height:38px}.brand strong,.brand small{display:block}.brand small{font-size:.74rem;color:var(--muted);margin-top:2px}.userbar{display:flex;align-items:center;gap:10px}.user-name{font-size:.88rem;color:var(--muted)}
.badge,.status-pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:.75rem}.badge.ok,.status-pill.ok{color:var(--ok);border-color:rgba(66,214,154,.35);background:rgba(66,214,154,.08)}
.shell{min-height:calc(100vh - 74px);display:grid;grid-template-columns:280px minmax(0,1fr)}.sidebar{border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;gap:18px;background:rgba(6,21,35,.76)}.sidebar h1{font-size:1.2rem;margin:2px 0}.eyebrow{font-size:.68rem;letter-spacing:.16em;color:var(--cyan);font-weight:800;margin:0 0 6px}.course-list{display:grid;gap:8px}.course-btn{width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--text);cursor:pointer}.course-btn strong,.course-btn span{display:block}.course-btn span{font-size:.76rem;color:var(--muted);margin-top:4px}.course-btn.active{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(50,215,197,.25) inset}.sidebar-note{margin-top:auto;padding:14px;border-radius:14px;background:linear-gradient(145deg,rgba(50,215,197,.09),rgba(77,141,255,.08));border:1px solid var(--line)}.sidebar-note strong,.sidebar-note span{display:block}.sidebar-note span{font-size:.8rem;line-height:1.5;color:var(--muted);margin-top:5px}
.workspace{padding:28px;min-width:0}.login-card{max-width:540px;margin:9vh auto;padding:28px;border:1px solid var(--line);background:var(--panel);border-radius:22px;box-shadow:var(--shadow)}.login-card h2{margin:4px 0 8px}.login-card p{color:var(--muted)}.login-card form{display:grid;gap:13px;margin:24px 0}.login-card label{font-size:.8rem;color:var(--muted)}.login-card input{width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:#051522;color:var(--text)}.login-card a{color:var(--cyan)}
.primary,.secondary,.ghost,.icon-btn{border:0;border-radius:11px;padding:11px 15px;font-weight:800;cursor:pointer}.primary{background:linear-gradient(90deg,var(--cyan),#59df9e);color:#032019}.secondary{background:#122b40;color:var(--text);border:1px solid var(--line)}.ghost,.icon-btn{background:transparent;color:var(--muted);border:1px solid var(--line)}button:disabled{opacity:.55;cursor:not-allowed}
.course-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 26px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,#08263c,#0b1a2a);box-shadow:var(--shadow)}.course-hero h2{margin:3px 0 8px;font-size:clamp(1.55rem,3vw,2.25rem)}.course-hero p{margin:0;max-width:720px;color:var(--muted);line-height:1.55}.progress-card{min-width:170px}.progress-card span,.progress-card strong{display:block}.progress-card span{font-size:.75rem;color:var(--muted)}.progress-card strong{font-size:2rem;color:var(--gold);margin:4px 0}.bar{height:7px;background:#102b40;border-radius:20px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--cyan));transition:.3s}
.learning-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;margin-top:18px}.outline-panel,.lesson-panel{border:1px solid var(--line);border-radius:18px;background:rgba(8,26,43,.9);min-width:0}.outline-panel{overflow:hidden;align-self:start;position:sticky;top:92px;max-height:calc(100vh - 116px);overflow-y:auto}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid var(--line);font-weight:800}.module{padding:10px 10px 2px}.module-title{padding:7px 6px;color:var(--gold);font-size:.78rem;font-weight:800}.lesson-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--text);cursor:pointer}.lesson-btn:hover{background:#10283b}.lesson-btn.active{background:rgba(50,215,197,.1);color:var(--cyan)}.lesson-btn.locked{color:#60798b;cursor:not-allowed}.lesson-btn small{display:block;color:var(--muted);font-size:.68rem;margin-top:3px}.lesson-icon{flex:0 0 auto;font-size:.75rem}
.lesson-panel{padding:22px;min-height:550px}.empty-state{min-height:450px;display:grid;place-content:center;text-align:center;color:var(--muted);gap:6px}.lesson-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.lesson-heading h2{font-size:1.8rem;margin:3px 0}.lead{color:var(--muted);line-height:1.6;max-width:800px}.content-card{margin-top:16px;padding:18px;border-radius:15px;border:1px solid var(--line);background:var(--panel2)}.content-card h3{margin:3px 0 12px}.content-card p{line-height:1.6;color:#c7d8e4}.concept-grid,.step-list{display:grid;gap:10px}.concept-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.concept{padding:13px;border:1px solid var(--line);border-radius:11px;background:#071a2a}.concept strong,.concept span{display:block}.concept span{font-size:.8rem;color:var(--muted);margin-top:5px}.step{display:flex;gap:12px;align-items:flex-start}.step b{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--cyan);color:#032019;flex:0 0 auto}.step p{margin:3px 0}.example-code,textarea{width:100%;border-radius:12px;background:#03101a;color:#dffdf7;border:1px solid #1d415a;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.example-code{padding:14px;white-space:pre-wrap;overflow:auto}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.quiz-question{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.quiz-question:first-child{border-top:0;padding-top:0}.quiz-question strong{display:block;margin-bottom:9px}.answers{display:grid;gap:8px}.answer{padding:10px 12px;text-align:left;border:1px solid var(--line);border-radius:10px;background:#071a2a;color:var(--text);cursor:pointer}.answer.correct{border-color:var(--ok);background:rgba(66,214,154,.08);color:var(--ok)}.answer.wrong{border-color:var(--danger);background:rgba(255,113,129,.07);color:#ff9daa}.notice{margin-top:14px;padding:11px 13px;border-radius:10px;background:#071a2a;color:var(--muted);border:1px solid var(--line)}.notice.ok{color:var(--ok);border-color:rgba(66,214,154,.35)}.notice.bad{color:#ff9daa;border-color:rgba(255,113,129,.35)}
textarea{min-height:230px;padding:14px;resize:vertical;line-height:1.55}.actions{display:flex;gap:9px;margin-top:12px}.toast{position:fixed;right:20px;bottom:20px;max-width:370px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#0b2336;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:none}
@media(max-width:1000px){.shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:14px 18px}.course-list{display:flex;overflow:auto}.course-btn{min-width:230px}.sidebar-note{display:none}.learning-grid{grid-template-columns:1fr}.outline-panel{position:static;max-height:none}.course-hero{align-items:flex-start}.workspace{padding:18px}}
@media(max-width:620px){.topbar{height:auto;min-height:68px;padding:10px 14px}.brand small,.user-name{display:none}.workspace{padding:12px}.course-hero{display:block;padding:18px}.progress-card{margin-top:18px}.lesson-panel{padding:14px}.concept-grid{grid-template-columns:1fr}.lesson-heading{display:block}.lesson-heading .status-pill{margin-top:6px}.actions{display:grid}}