:root{
  --bg:#050a11;--panel:#09121d;--panel2:#0d1825;--line:rgba(116,236,232,.14);
  --cyan:#58eee7;--cyan2:#98fff9;--text:#edf7ff;--muted:#8aa0b3;--danger:#ff7777;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{background:
 radial-gradient(circle at 75% 12%,rgba(68,228,220,.08),transparent 24%),
 radial-gradient(circle at 20% 85%,rgba(85,136,255,.06),transparent 26%),#050a11}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(460px,100%);border:1px solid var(--line);background:rgba(9,18,29,.95);border-radius:26px;padding:34px;box-shadow:0 30px 100px rgba(0,0,0,.42)}
.brand{font-weight:950;letter-spacing:.17em;color:var(--cyan);font-size:13px}
.login-card h1{font-size:32px;margin:12px 0 8px}
.sub{color:var(--muted);line-height:1.55}
.field{margin:18px 0}
.field label{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1px solid #20384c;background:#06101a;color:white;border-radius:12px;padding:13px 14px;outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan)}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:900;background:var(--cyan);color:#032521}
.btn.secondary{background:#132335;color:var(--text);border:1px solid #274057}
.btn.danger{background:#35171b;color:#ffd8d8;border:1px solid #63262e}
.btn.ghost{background:transparent;color:var(--cyan);border:1px solid #274057}
.btn:disabled{opacity:.5;cursor:not-allowed}
.err{color:#ff9b9b;font-size:13px;margin-top:12px}
.classroom{min-height:100vh;display:grid;grid-template-columns:340px minmax(0,1fr)}
.sidebar{height:100vh;position:sticky;top:0;overflow:auto;background:#07111c;border-right:1px solid var(--line);padding:24px 16px}
.sidebar-head{padding:0 8px 18px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sidebar-head h2{font-size:18px;margin:8px 0 4px}
.sidebar-head small{color:var(--muted)}
.lesson-list{display:grid;gap:7px}
.lesson-item{border:1px solid transparent;background:transparent;color:var(--text);text-align:left;border-radius:13px;padding:11px 12px;display:grid;grid-template-columns:34px 1fr 20px;gap:8px;align-items:center}
.lesson-item:hover{background:#0c1927}
.lesson-item.active{background:#102336;border-color:rgba(88,238,231,.28)}
.lesson-num{color:var(--cyan);font-size:12px;font-weight:900}
.lesson-title{font-size:13px;line-height:1.25}
.check{color:#48e6a5;font-weight:900}
.main{min-width:0;padding:34px clamp(20px,4vw,64px) 60px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}
.eyebrow{color:var(--cyan);font-size:12px;font-weight:950;letter-spacing:.14em}
.topbar h1{font-size:clamp(28px,4vw,48px);margin:7px 0 0;letter-spacing:-.035em}
.userbox{text-align:right;color:var(--muted);font-size:13px}
.video-shell{position:relative;aspect-ratio:16/9;background:#020509;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.42)}
.video-shell video,.video-shell iframe{width:100%;height:100%;border:0;background:#000}
.placeholder{height:100%;display:grid;place-items:center;text-align:center;padding:30px;color:var(--muted)}
.placeholder b{display:block;color:var(--text);font-size:22px;margin-bottom:8px}
.controls{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
.controls-left,.controls-right{display:flex;gap:10px;flex-wrap:wrap}
.progress-wrap{margin-top:24px}
.progress-line{height:7px;background:#111e2b;border-radius:99px;overflow:hidden}
.progress-line i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#76bfff);width:0}
.progress-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--muted)}
.desc{margin-top:24px;color:#aebdca;line-height:1.7}
.admin-wrap{max-width:1200px;margin:auto;padding:28px 18px 70px}
.admin-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}
.admin-head h1{margin:5px 0 0}
.tabs{display:flex;gap:8px;margin:18px 0}
.tab{background:#0c1825;border:1px solid #22394d;color:var(--text);border-radius:10px;padding:10px 14px}
.tab.active{background:#123047;border-color:rgba(88,238,231,.4);color:var(--cyan)}
.card{border:1px solid var(--line);background:rgba(9,18,29,.92);border-radius:18px;padding:20px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
@media(max-width:900px){.classroom{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.grid,.grid.two{grid-template-columns:1fr}.sidebar{max-height:45vh}}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 8px;border-bottom:1px solid #172a3a;text-align:left;font-size:13px;vertical-align:top}
th{color:var(--muted)}
code{background:#050b12;padding:4px 6px;border-radius:6px;color:#dcffff}
.status-on{color:#5af0ac}.status-off{color:#ff8a8a}
.lesson-editor{display:grid;grid-template-columns:70px 1fr 150px 2fr auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid #172a3a}
.lesson-editor input,.lesson-editor select{width:100%;background:#07111c;color:white;border:1px solid #22394d;border-radius:9px;padding:9px}
@media(max-width:900px){.lesson-editor{grid-template-columns:1fr}.userbox{text-align:left}.topbar{display:block}.lesson-list{grid-template-columns:1fr}}