/* ===== Brand + theme tokens ===== */
:root{
  /* brand (fixed across themes) */
  --blue:#2456E5; --blue-dark:#1B41AC; --gold:#F5A623; --green:#1B9E62;
  --red:#D14343; --radius:12px;

  /* LIGHT theme (default) */
  --bg:#F6F8FC;          /* page background */
  --surface:#ffffff;     /* cards, tables, inputs */
  --surface-2:#EFF3FA;   /* table head, subtle fills */
  --text:#0E1726;        /* main text */
  --text-muted:#49566C;  /* muted text */
  --border:#E3E8F1;      /* borders */
  --header-bg:#0E1726;   /* top nav bar */
  --header-text:#C9D4E8;
  --footer-bg:#0E1726;
  --badge-bg:#ECF1FE; --badge-text:#2456E5;
  --badge-gold-bg:#FDF3DC; --badge-gold-text:#9A6B0C;
  --ok-bg:#E5F6EE; --ok-text:#0D6E43; --ok-border:#BEE7D2;
  --err-bg:#FBEAEA; --err-text:#9E2B2B; --err-border:#F0C7C7;
  --expl-bg:#F3F6FC;
  --shadow:0 1px 3px rgba(14,23,38,.06);
}

/* ===== DARK theme ===== */
[data-theme="dark"]{
  --bg:#0B1220;
  --surface:#141E33;
  --surface-2:#1B2942;
  --text:#E8EDF7;
  --text-muted:#9FB0CC;
  --border:#26344F;
  --header-bg:#070C16;
  --header-text:#C9D4E8;
  --footer-bg:#070C16;
  --badge-bg:#1B2B52; --badge-text:#9DB7FF;
  --badge-gold-bg:#3A2E12; --badge-gold-text:#F5C172;
  --ok-bg:#143226; --ok-text:#6FE0A6; --ok-border:#1F4A37;
  --err-bg:#3A1B1B; --err-text:#FFA7A7; --err-border:#5A2A2A;
  --expl-bg:#16223A;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light}
[data-theme="dark"] html, html[data-theme="dark"]{color-scheme:dark}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:background .2s,color .2s}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
[data-theme="dark"] a{color:#7FA0FF}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.muted{color:var(--text-muted);font-size:.9rem}

/* header */
header{background:var(--header-bg);color:#fff;position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none!important}
.logo-img{height:42px;width:auto;display:block}
nav ul{display:flex;gap:18px;list-style:none;flex-wrap:wrap}
nav a{color:var(--header-text)!important;font-size:.92rem;text-decoration:none!important}
nav a:hover,nav a.active{color:#fff!important}

/* theme toggle + mobile menu buttons */
.theme-btn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:1.05rem;line-height:1;display:grid;place-items:center;flex:0 0 auto}
.theme-btn:hover{background:rgba(255,255,255,.2)}
.theme-ico-light{display:none}
.theme-ico-dark{display:inline}
[data-theme="dark"] .theme-ico-light{display:inline}
[data-theme="dark"] .theme-ico-dark{display:none}
.menu-btn{display:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:9px;padding:8px 12px;font-size:1.05rem;cursor:pointer}

/* hero / banners */
.hero{background:linear-gradient(135deg,#10182B,#1B41AC);color:#fff;padding:54px 0;text-align:center}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#0B1220,#173075)}
.hero h1{font-size:clamp(1.6rem,4vw,2.5rem);margin-bottom:10px}
.hero p{color:#C9D4E8;max-width:640px;margin:0 auto 22px}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:6px 16px;border-radius:99px;font-size:.85rem;color:#fff!important;text-decoration:none!important}
.chip:hover{background:var(--gold);color:#0E1726!important;border-color:var(--gold)}

/* layout */
section{padding:42px 0}
h2.sec{font-size:1.5rem;margin-bottom:6px;color:var(--text)}
.sub{color:var(--text-muted);margin-bottom:24px}
.grid{display:grid;gap:18px}
.c3{grid-template-columns:repeat(3,1fr)} .c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.c3,.c2{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h3{font-size:1.05rem;margin-bottom:6px;color:var(--text)}
.badge{display:inline-block;background:var(--badge-bg);color:var(--badge-text);font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:3px 10px;border-radius:99px;margin-bottom:10px}
.badge.gold{background:var(--badge-gold-bg);color:var(--badge-gold-text)}

.btn{display:inline-block;background:var(--blue);color:#fff!important;font-weight:600;padding:10px 20px;border-radius:9px;border:none;cursor:pointer;font-size:.92rem;text-decoration:none!important}
.btn:hover{background:var(--blue-dark)}
.btn.gold{background:var(--gold);color:#0E1726!important}
.btn.sm{padding:6px 14px;font-size:.84rem}
.btn.danger{background:var(--red)}
.btn.ghost{background:var(--surface);color:var(--blue)!important;border:1px solid var(--blue)}

/* tabs / filter bar */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.filterbar a{padding:7px 16px;border:1px solid var(--border);border-radius:99px;background:var(--surface);font-size:.86rem;text-decoration:none!important;color:var(--text-muted)!important}
.filterbar a.active{background:var(--blue);border-color:var(--blue);color:#fff!important}

/* tables */
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
th,td{padding:11px 14px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)}
th{background:var(--surface-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
tr:last-child td{border-bottom:none}

/* forms */
label{display:block;font-weight:600;font-size:.86rem;margin:14px 0 5px;color:var(--text)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:.92rem;font-family:inherit;background:var(--surface);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.7}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,86,229,.18)}
textarea{min-height:140px}
.alert{padding:12px 16px;border-radius:9px;font-size:.9rem;margin-bottom:18px}
.alert.ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border)}
.alert.err{background:var(--err-bg);color:var(--err-text);border:1px solid var(--err-border)}

/* video / pdf */
.video-frame{border-radius:10px;overflow:hidden;background:#000}
video{width:100%;border-radius:10px;background:#000}
.pdf-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:10px}
.pdf-row .ic{font-size:1.4rem}

/* MCQ */
.mcq{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.mcq .q{font-weight:600;margin-bottom:12px;color:var(--text)}
.opt{display:block;padding:9px 14px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;font-size:.92rem;color:var(--text)}
.opt:hover{border-color:var(--blue)}
.opt.correct{background:var(--ok-bg);border-color:var(--green)}
.opt.wrong{background:var(--err-bg);border-color:var(--red)}
.expl{margin-top:10px;font-size:.86rem;background:var(--expl-bg);border-left:3px solid var(--blue);padding:10px 14px;border-radius:0 8px 8px 0;display:none;color:var(--text)}

/* mock test */
.timer{position:sticky;top:72px;z-index:30;background:var(--header-bg);color:#fff;padding:10px 18px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.timer b{font-family:Consolas,monospace;font-size:1.15rem;color:var(--gold)}
.score-box{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:40px 20px;margin-bottom:26px}
.score-box .big{font-size:3rem;font-weight:800;color:var(--blue)}

footer{background:var(--footer-bg);color:#9FB0CC;margin-top:40px;padding:26px 0;font-size:.84rem;text-align:center}
footer a{color:#C9D4E8}

/* mobile nav */
@media(max-width:820px){
  .menu-btn{display:block}
  nav{order:3;width:100%}
  nav ul{display:none;flex-direction:column;gap:0;width:100%;padding-bottom:8px}
  nav ul.open{display:flex}
  nav ul li{padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.08);width:100%}
  .nav{height:auto;padding-top:10px;padding-bottom:6px}
}