:root {
  --bg: #070B14;
  --bg2: #111827;
  --card: #1A2233;
  --cyan: #00D1FF;
  --sky: #38BDF8;
  --purple: #7C3AED;
  --text: #E6F1FF;
  --muted: #8aa0c2;
  --navbar-bg: rgba(7,11,20,.7);
  --navbar-border: rgba(0,209,255,.15);
  --btn-primary-text: #001018;
  --btn-primary-shadow: rgba(0,209,255,.35);
  --btn-primary-shadow-hover: rgba(0,209,255,.55);
  --btn-ghost-border: rgba(0,209,255,.4);
  --btn-ghost-hover: rgba(0,209,255,.08);
  --glass-bg1: rgba(26,34,51,.85);
  --glass-bg2: rgba(17,24,39,.75);
  --glass-border: rgba(0,209,255,.18);
  --glass-shadow: rgba(0,209,255,.06);
  --tag-bg: rgba(124,58,237,.15);
  --tag-text: #c4b5fd;
  --tag-border: rgba(124,58,237,.35);
  --input-bg: #0d1426;
  --input-border: rgba(0,209,255,.2);
  --input-text: #fff;
  --input-shadow: rgba(0,209,255,.18);
  --label-color: #cfe2ff;
  --error-color: #ff6b6b;
  --alert-success-bg: rgba(34,197,94,.12);
  --alert-success-text: #86efac;
  --alert-success-border: rgba(34,197,94,.35);
  --table-border: rgba(255,255,255,.06);
  --th-color: #9ec8ff;
  --unit-link: #cfe2ff;
  --unit-link-hover-bg: rgba(0,209,255,.12);
  --unit-link-hover-text: #fff;
  --video-card-shadow: rgba(0,209,255,.18);
  --thumb-grad1: #0b1a33;
  --thumb-grad2: #1A2233;
  --thumb-color: #5b7fb0;
  --pagination-bg: rgba(255,255,255,.04);
  --pagination-color: #cfe2ff;
  --pagination-active-bg: var(--cyan);
  --pagination-active-color: #001018;
  --badge-bg: rgba(0,209,255,.15);
  --badge-text: #7dd3fc;
  --admin-side-bg: #0a1024;
  --admin-side-border: rgba(0,209,255,.15);
  --admin-link: #cfe2ff;
  --admin-link-hover-bg: rgba(0,209,255,.12);
  --admin-link-hover-text: #fff;
  --orb-cyan: #00D1FF;
  --orb-purple: #7C3AED;
}
:root[data-theme='light'] {
  --bg: #F8F9FA;
  --bg2: #E9ECEF;
  --card: #FFFFFF;
  --cyan: #0088CC;
  --sky: #0ea5e9;
  --purple: #6d28d9;
  --text: #1f2937;
  --muted: #64748b;
  --navbar-bg: rgba(248,249,250,.85);
  --navbar-border: rgba(0,136,204,.15);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: rgba(0,136,204,.35);
  --btn-primary-shadow-hover: rgba(0,136,204,.55);
  --btn-ghost-border: rgba(0,136,204,.4);
  --btn-ghost-hover: rgba(0,136,204,.08);
  --glass-bg1: rgba(255,255,255,.95);
  --glass-bg2: rgba(243,244,246,.85);
  --glass-border: rgba(0,136,204,.18);
  --glass-shadow: rgba(0,136,204,.06);
  --tag-bg: rgba(109,40,217,.1);
  --tag-text: #5b21b6;
  --tag-border: rgba(109,40,217,.25);
  --input-bg: #ffffff;
  --input-border: rgba(0,136,204,.25);
  --input-text: #1f2937;
  --input-shadow: rgba(0,136,204,.18);
  --label-color: #374151;
  --error-color: #ef4444;
  --alert-success-bg: rgba(34,197,94,.15);
  --alert-success-text: #166534;
  --alert-success-border: rgba(34,197,94,.35);
  --table-border: rgba(0,0,0,.08);
  --th-color: #4b5563;
  --unit-link: #374151;
  --unit-link-hover-bg: rgba(0,136,204,.1);
  --unit-link-hover-text: #0088CC;
  --video-card-shadow: rgba(0,0,0,.1);
  --thumb-grad1: #e2e8f0;
  --thumb-grad2: #f8fafc;
  --thumb-color: #64748b;
  --pagination-bg: rgba(0,0,0,.05);
  --pagination-color: #4b5563;
  --pagination-active-bg: var(--cyan);
  --pagination-active-color: #ffffff;
  --badge-bg: rgba(0,136,204,.15);
  --badge-text: #0369a1;
  --admin-side-bg: #f1f5f9;
  --admin-side-border: rgba(0,0,0,.08);
  --admin-link: #4b5563;
  --admin-link-hover-bg: rgba(0,136,204,.1);
  --admin-link-hover-text: #0088CC;
  --orb-cyan: rgba(0,136,204,0.5);
  --orb-purple: rgba(109,40,217,0.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;transition:background 0.3s, color 0.3s}
a{color:var(--cyan);text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:0 20px}
.navbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:var(--navbar-bg);border-bottom:1px solid var(--navbar-border);transition:background 0.3s, border-color 0.3s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;font-size:22px;background:linear-gradient(90deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-weight:600;transition:.2s}
.btn-primary{background:linear-gradient(90deg,var(--cyan),var(--sky));color:var(--btn-primary-text);box-shadow:0 0 24px var(--btn-primary-shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 36px var(--btn-primary-shadow-hover)}
.btn-ghost{border-color:var(--btn-ghost-border);color:var(--text);background:transparent}
.btn-ghost:hover{background:var(--btn-ghost-hover)}
.btn-danger{background:#ef4444;color:#fff}
.glass{background:linear-gradient(180deg,var(--glass-bg1),var(--glass-bg2));border:1px solid var(--glass-border);border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 10px 40px var(--glass-shadow);transition:background 0.3s, border-color 0.3s, box-shadow 0.3s}
.h1{font-size:clamp(34px,5vw,64px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.h-grad{background:linear-gradient(90deg,var(--text) 0%,var(--cyan) 50%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.grid{display:grid;gap:20px}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{padding:20px;border-radius:16px;background:var(--card);transition:background 0.3s}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;background:var(--tag-bg);color:var(--tag-text);border:1px solid var(--tag-border)}
.input,.select,.textarea{width:100%;padding:12px 14px;border-radius:10px;background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text);outline:none;transition:background 0.3s, border-color 0.3s, color 0.3s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--input-shadow)}
.label{display:block;margin:10px 0 6px;font-weight:600;color:var(--label-color)}
.error{color:var(--error-color);font-size:12px;margin-top:4px}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:14px}
.alert-success{background:var(--alert-success-bg);color:var(--alert-success-text);border:1px solid var(--alert-success-border)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid var(--table-border);text-align:left;transition:border-color 0.3s}
.table th{color:var(--th-color);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.sidebar{width:280px;flex:0 0 280px}
.layout{display:flex;gap:24px;min-height:calc(100vh - 70px);padding:24px 0}
.unit-list{list-style:none;padding:8px;margin:0}
.unit-list li a{display:block;padding:12px 14px;border-radius:10px;color:var(--unit-link);transition:background 0.3s, color 0.3s}
.unit-list li a:hover,.unit-list li a.active{background:var(--unit-link-hover-bg);color:var(--unit-link-hover-text)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.video-card{overflow:hidden;cursor:pointer;transition:.2s;background:var(--card);border-radius:16px}
.video-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px var(--video-card-shadow)}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--thumb-grad1),var(--thumb-grad2));display:flex;align-items:center;justify-content:center;color:var(--thumb-color);font-weight:700;font-size:14px;transition:background 0.3s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-body{padding:14px}
.video-title{font-weight:700;margin:0 0 6px;font-size:15px;color:var(--text)}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 12px;border-radius:8px;background:var(--pagination-bg);color:var(--pagination-color);transition:background 0.3s, color 0.3s}
.pagination .active span{background:var(--pagination-active-bg);color:var(--pagination-active-color)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:40px 0}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} .layout{flex-direction:column} .sidebar{width:100%} }
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none}
.orb.cyan{width:380px;height:380px;background:var(--orb-cyan);top:-80px;right:-80px;transition:background 0.3s}
.orb.purple{width:420px;height:420px;background:var(--orb-purple);bottom:-100px;left:-120px;transition:background 0.3s}
.scene{position:relative;height:420px;border-radius:20px;overflow:hidden}
.scene canvas{width:100%!important;height:100%!important;display:block}
.no-scroll{height:100vh;overflow:hidden}
.footer{padding:16px;text-align:center;color:var(--muted);font-size:13px}
.subj-card{padding:22px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.subj-card .stats{display:flex;gap:14px;color:var(--th-color);font-size:13px;margin-top:auto}
.badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;background:var(--badge-bg);color:var(--badge-text);margin-left:6px;transition:background 0.3s, color 0.3s}
.admin-shell{display:flex;min-height:100vh}
.admin-side{width:240px;background:var(--admin-side-bg);border-right:1px solid var(--admin-side-border);padding:18px;transition:background 0.3s, border-color 0.3s}
.admin-main{flex:1;padding:24px;background:var(--bg);transition:background 0.3s}
.admin-side a{display:block;padding:10px 12px;border-radius:8px;color:var(--admin-link);margin-bottom:4px;transition:background 0.3s, color 0.3s}
.admin-side a.active,.admin-side a:hover{background:var(--admin-link-hover-bg);color:var(--admin-link-hover-text)}
.kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.kpi .card{padding:18px}
.kpi .num{font-size:28px;font-weight:800;color:var(--cyan)}