:root{
  --bg:#f3f6f9;--panel:#ffffff;--panel2:#edf2f6;--text:#17212b;--muted:#697783;
  --line:#d8e1e8;--accent:#266fff;--accent2:#0e5be2;--good:#16894a;--goodbg:#eaf8f0;
  --bad:#c6404a;--badbg:#fdeff1;--shadow:0 9px 30px rgba(20,35,50,.08);
}
body.dark{
  --bg:#090e13;--panel:#111821;--panel2:#0d141b;--text:#f4f7fb;--muted:#9aa9b7;
  --line:#27323d;--accent:#68a1ff;--accent2:#4d8ce7;--good:#47d78b;--goodbg:#10281d;
  --bad:#ff7a83;--badbg:#2c1519;--shadow:0 10px 34px rgba(0,0,0,.26);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:11px 15px}
button:hover{border-color:var(--accent)}
.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:800}
.primary:hover{background:var(--accent2)}
.wide{width:100%}
.hidden{display:none!important}
.screen{min-height:100vh;padding:24px}
.center{display:grid;place-items:center}
.login-card{width:min(430px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.logo{width:58px;height:58px;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:16px;font-weight:900;font-size:1.25rem}
.login-card h1{margin:18px 0 4px}
.login-card p{color:var(--muted);margin:0 0 22px}
label{display:block;font-weight:800;margin:14px 0 6px}
input{width:100%;margin-top:7px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:13px}
.error{color:var(--bad);min-height:24px;margin-top:10px}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px max(16px,4vw);background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff}
.header-actions{display:flex;gap:8px}
main{width:min(1050px,100%);margin:auto;padding:20px}
.progress-card,.theory-card,.question-card,.topic-row,.metric,.danger-zone{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.progress-card{padding:17px;margin-bottom:18px}
.progress-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.progress-head small{display:block;color:var(--muted);margin-top:3px}
.progress-track{height:10px;background:var(--panel2);border-radius:999px;margin:14px 0;overflow:hidden}
#progressBar{height:100%;width:0;background:var(--accent)}
.stats{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted)}
.theory-card,.question-card{padding:22px;margin-bottom:18px}
.eyebrow{font-size:.77rem;font-weight:900;letter-spacing:.12em;color:var(--accent)}
.theory-card h2,.question-card h2{margin:.35rem 0 .75rem}
.theory-card p{line-height:1.72;margin:0}
.question-number{color:var(--muted);font-weight:800;margin-bottom:8px}
.options{display:grid;gap:10px;margin-top:18px}
.option{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px 15px;width:100%;line-height:1.45}
.option .letter{min-width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--panel2);font-weight:900}
.option.correct{border-color:var(--good);background:var(--goodbg)}
.option.wrong{border-color:var(--bad);background:var(--badbg)}
.option:disabled{cursor:default;opacity:1}
.feedback{margin-top:16px;padding:16px;border-radius:14px;background:var(--panel2);line-height:1.55}
.feedback.good{border:1px solid var(--good)}
.feedback.bad{border:1px solid var(--bad)}
.nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.dash-header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.metric{padding:17px}
.metric span{display:block;color:var(--muted);font-size:.9rem}
.metric b{display:block;font-size:1.55rem;margin-top:5px}
.topic-list{display:grid;gap:10px}
.topic-row{padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.topic-row small{color:var(--muted)}
.danger-zone{padding:18px;margin:24px 0}
.danger{border-color:var(--bad);color:var(--bad)}
@media(max-width:720px){
  .topbar{align-items:flex-start}
  .brand span:last-child{display:none}
  .header-actions{gap:6px}
  .header-actions button{padding:9px 10px}
  main{padding:12px}
  .theory-card,.question-card{padding:17px}
  .summary-grid{grid-template-columns:1fr 1fr}
  .nav{display:grid;grid-template-columns:1fr 1fr}
  #reviewBtn{grid-column:1/-1}
}
@media(max-width:430px){
  .progress-head{font-size:.92rem}
  .stats{gap:10px;font-size:.9rem}
  .summary-grid{grid-template-columns:1fr}
  .question-card h2{font-size:1.08rem;line-height:1.4}
  .login-card{padding:20px}
}

.filters-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px;margin-bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.filters-card label{margin:0}
.filters-card select{width:100%;margin-top:7px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit}
@media(max-width:620px){.filters-card{grid-template-columns:1fr}}

/* ===== Mobile fix v3 ===== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
main{width:100%;max-width:1050px}
.filters-card{width:100%;min-width:0}
.filters-card label{min-width:0}
.filters-card select{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  font-size:16px!important;
}
@media(max-width:760px){
  .topbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:10px 12px!important;
    gap:8px!important;
    width:100%!important;
  }
  .brand span:last-child{display:none!important}
  .header-actions{display:flex!important;gap:6px!important}
  .header-actions button{padding:8px 9px!important;font-size:.82rem!important}
  main{padding:10px!important}
  .filters-card{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:14px!important;
    margin:12px 0 16px!important;
  }
  .filters-card label{
    display:block!important;
    width:100%!important;
    margin:0!important;
  }
  .filters-card select{
    display:block!important;
    width:100%!important;
    height:50px!important;
    padding:10px 12px!important;
    -webkit-appearance:menulist!important;
    appearance:auto!important;
  }
  .nav{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  #retryBtn{grid-column:1/-1!important}
  #reviewBtn{grid-column:1/-1!important}
}