/* ===================================================================
   Physics Exit Exam Preparation Platform — Doxa Innovation PLC
   Theming (light/dark), layout, responsive, components
   =================================================================== */
:root{
  --blue:#1f4e79; --blue-d:#16365c; --green:#2e7d32; --green-d:#1b5e20;
  --gold:#c9a227; --red:#c0392b; --amber:#b9770e; --info:#2471a3;
  --bg:#eef1f6; --panel:#ffffff; --panel-2:#f6f8fb; --ink:#1a1f29; --muted:#5b6577;
  --line:#dbe1ec; --soft:#f4f6fa; --shadow:0 1px 4px rgba(20,40,70,.08);
  --shadow-lg:0 8px 30px rgba(20,40,70,.16);
  --def:#eaf3ec; --formula:#fff8e6; --note:#fdf0f0; --ex:#eef6ff; --box:#eef3fb;
  --ok:#2e7d32; --bad:#c0392b; --warn:#b9770e; --mark:#2471a3;
  --radius:12px;
}
html.dark{
  --blue:#5a9bd8; --blue-d:#0e2236; --green:#5cba63; --gold:#e6c34a; --red:#e57373;
  --bg:#0e151f; --panel:#172230; --panel-2:#1d2a3a; --ink:#e6ecf5; --muted:#9fb0c4;
  --line:#2a3a4f; --soft:#1b2735; --shadow:0 1px 4px rgba(0,0,0,.4); --shadow-lg:0 10px 34px rgba(0,0,0,.5);
  --def:#16331f; --formula:#332b12; --note:#3a1d1d; --ex:#15273a; --box:#152334;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;line-height:1.55;font-size:15px}
.serif,.q-stem,.opt,.exp,.note-body p,.note-body li{font-family:Georgia,"Times New Roman",serif}
a{color:var(--blue)} a:hover{opacity:.85}
button{font-family:inherit}
mjx-container{vertical-align:middle}
mjx-container[display="true"]{margin:.5em auto;display:block;text-align:center}
.hidden{display:none!important}
.center{text-align:center}

/* ---------- Header ---------- */
.site-header{background:linear-gradient(135deg,var(--blue-d),var(--blue));color:#fff;padding:14px 20px;box-shadow:var(--shadow-lg)}
.hdr-row{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px}
.hdr-logo{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;flex:0 0 auto;line-height:1.1;color:#fff;font-weight:700}
.hdr-text{flex:1;min-width:0}
.hdr-badge{display:inline-block;background:var(--gold);color:#3a2c00;font-weight:700;font-size:11px;
  padding:3px 10px;border-radius:20px;letter-spacing:.3px;margin-bottom:5px}
.hdr-text h1{margin:2px 0;font-size:19px;line-height:1.2}
.hdr-text .meta{font-size:12.5px;opacity:.92}
.hdr-text .prog{font-weight:700}
.hdr-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.hdr-provider{font-size:12px;opacity:.95}
.hdr-provider a{color:var(--gold);font-weight:700;text-decoration:none}
.theme-toggle{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:20px;padding:6px 12px;cursor:pointer;font-size:13px}
.theme-toggle:hover{background:rgba(255,255,255,.26)}

/* ---------- Tab bar ---------- */
.tabbar{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.tabbar .row{max-width:1200px;margin:0 auto;display:flex;gap:2px;overflow-x:auto}
.tabbar button{background:transparent;border:0;border-bottom:3px solid transparent;color:var(--muted);
  padding:13px 18px;cursor:pointer;font-size:14.5px;font-weight:600;white-space:nowrap}
.tabbar button:hover{color:var(--ink);background:var(--panel-2)}
.tabbar button.active{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- Layout ---------- */
main{max-width:1200px;margin:18px auto;padding:0 18px 60px}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card h2{margin:0 0 12px;color:var(--blue);font-size:20px}
.card h3{color:var(--blue);font-size:16px;margin:16px 0 8px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.muted{color:var(--muted)}
.section-title{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.section-title h2{margin:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border:0;border-radius:9px;
  padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.green{background:var(--green)} .btn.gold{background:var(--gold);color:#3a2c00} .btn.red{background:var(--red)}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:7px}
.btn.lg{padding:14px 26px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;border:1px solid var(--line)}
.chip.easy{background:var(--def);color:var(--green-d)} .chip.medium{background:var(--formula);color:var(--amber)}
.chip.hard{background:var(--note);color:var(--red)} .chip.expert{background:#efe6fb;color:#6c3fb0;border-color:#d8c4f0}
html.dark .chip.expert{background:#2a1f3d;color:#c8a8f0;border-color:#46306b}
.chip.topic{background:var(--box);color:var(--blue)} .chip.comp{background:var(--soft);color:var(--muted)}
.chip.cat{background:#e8f4f1;color:#0f7b6c;border-color:#bfe3da}
html.dark .chip.cat{background:#143029;color:#5fd0bd;border-color:#1f4d42}

/* notes sub-tabs */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.subtabs button{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:7px 15px;cursor:pointer;font-size:13px;font-weight:600}
.subtabs button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.subtabs button:hover{color:var(--ink)}
.ref-link{background:var(--box)!important;color:var(--blue)!important;border-color:var(--blue)!important}

/* flag difficult on palette */
.pal-grid button.flagged{box-shadow:inset 0 0 0 2px var(--amber)}
.pal-grid button.flagged::after{content:"⚑";position:absolute;font-size:9px;color:var(--amber)}
.pal-grid button{position:relative}

/* mastery / metric tiles */
.mastery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.mtile{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.mtile .mp{font-size:24px;font-weight:800}
.mtile .ml{font-size:12px;color:var(--muted);margin-top:2px}
.predict{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.predict .big{font-size:38px;font-weight:900;color:var(--blue)}
.missed-list{list-style:none;margin:0;padding:0}
.missed-list li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.missed-list li .ct{color:var(--red);font-weight:700}

/* ---------- Dashboard ---------- */
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}
.stat .num{font-size:30px;font-weight:800;color:var(--blue)}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:3px}
.gauge{position:relative;width:200px;height:110px;margin:0 auto}
.readiness-band{font-weight:800;font-size:18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* ---------- Bar charts ---------- */
.bar-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.bar-row .name{width:210px;font-size:13px;flex:0 0 auto;color:var(--ink)}
.bar-track{flex:1;background:var(--soft);border-radius:8px;height:16px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;border-radius:8px 0 0 8px;background:var(--blue);transition:width .5s}
.bar-row .val{width:64px;text-align:right;font-size:12.5px;color:var(--muted);flex:0 0 auto}
.bar-fill.good{background:var(--green)} .bar-fill.mid{background:var(--gold)} .bar-fill.low{background:var(--red)}

/* ---------- Question bank ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.filters select,.filters input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:13.5px}
.filters input[type=search]{min-width:220px;flex:1}
.qcard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--radius);padding:15px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.qcard .qhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:6px;flex-wrap:wrap}
.qcard .qnum{font-weight:800;color:var(--blue)}
.qcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.q-stem{font-weight:600;margin:4px 0 8px}
.opts{list-style:none;margin:0;padding:0}
.opts li{padding:8px 12px;border:1px solid var(--line);border-radius:8px;margin:5px 0;cursor:pointer;display:flex;gap:9px;align-items:flex-start;background:var(--panel)}
.opts li:hover{background:var(--panel-2)}
.opts li .letter{font-weight:800;color:var(--blue);flex:0 0 auto}
.opts li.sel{border-color:var(--blue);background:var(--box)}
.opts li.correct{border-color:var(--green);background:var(--def)}
.opts li.wrong{border-color:var(--red);background:var(--note)}
.opts li.correct .letter{color:var(--green-d)} .opts li.wrong .letter{color:var(--red)}
.ansbox{margin-top:12px;border-top:1px dashed var(--line);padding-top:11px}
.ansbox .lead{font-weight:700;color:var(--green-d)}
.exp{margin:6px 0}
.exp .label{font-weight:700;color:var(--blue)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)}
.qtools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qtools button{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:6px 11px;font-size:12.5px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.qtools button:hover{background:var(--soft)}
.qtools button.on{background:var(--gold);color:#3a2c00;border-color:var(--gold)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}

/* ---------- Mock exam ---------- */
.exam-top{position:sticky;top:0;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.timer{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--blue);min-width:96px}
.timer.warn{color:var(--amber)} .timer.danger{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.progress-wrap{flex:1;min-width:160px}
.progress-track{background:var(--soft);border:1px solid var(--line);border-radius:8px;height:12px;overflow:hidden}
.progress-bar{height:100%;background:var(--green);width:0;transition:width .3s}
.exam-counts{font-size:13px;color:var(--muted)}
.exam-counts b{color:var(--ink)}
.exam-body{display:grid;grid-template-columns:1fr 250px;gap:18px;align-items:start}
.palette{position:sticky;top:80px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.palette h4{margin:0 0 10px;font-size:14px;color:var(--blue)}
.pal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pal-grid button{aspect-ratio:1;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--ink);
  font-size:12px;font-weight:700;cursor:pointer}
.pal-grid button.answered{background:var(--green);color:#fff;border-color:var(--green)}
.pal-grid button.marked{background:var(--mark);color:#fff;border-color:var(--mark)}
.pal-grid button.current{outline:3px solid var(--gold);outline-offset:1px}
.pal-legend{font-size:11.5px;color:var(--muted);margin-top:10px;display:flex;flex-direction:column;gap:4px}
.pal-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.exam-q .q-stem{font-size:17px}
.exam-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}

/* ---------- Results ---------- */
.result-hero{text-align:center;padding:20px}
.result-score{font-size:52px;font-weight:900;line-height:1}
.passfail{display:inline-block;font-size:22px;font-weight:900;padding:8px 26px;border-radius:30px;margin-top:10px;letter-spacing:1px}
.passfail.pass{background:var(--def);color:var(--green-d);border:2px solid var(--green)}
.passfail.fail{background:var(--note);color:var(--red);border:2px solid var(--red)}

/* ---------- Notes ---------- */
.note-toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.note-toc a{display:block;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  text-decoration:none;color:var(--ink);font-weight:600}
.note-toc a:hover{border-color:var(--blue);background:var(--box)}
.note-toc .th{font-size:11.5px;color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.note-body{font-size:15px}
.note-body h2{font-size:20px;color:#fff;background:var(--blue);padding:9px 14px;border-radius:8px;margin:8px 0 12px}
.note-body h3{color:var(--blue);border-bottom:2px solid var(--line);padding-bottom:4px;margin:18px 0 8px}
.note-body h4{color:var(--green);margin:12px 0 5px}
.note-body .def,.note-body .formula,.note-body .note,.note-body .example{border-radius:8px;padding:9px 13px;margin:10px 0;border:1px solid var(--line)}
.note-body .def{background:var(--def);border-left:4px solid var(--green)}
.note-body .formula{background:var(--formula);border-left:4px solid var(--amber);overflow-x:auto}
.note-body .note{background:var(--note);border-left:4px solid var(--red)}
.note-body .example{background:var(--ex);border-left:4px solid var(--blue)}
.note-body table{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0}
.note-body table.formulas th{background:var(--blue);color:#fff;text-align:left;padding:6px 9px}
.note-body table.formulas td{border:1px solid var(--line);padding:5px 9px}
.note-body .summary,.note-body .revision{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 14px;margin-top:14px}
.note-body .intro{font-style:italic;color:var(--muted);border-left:3px solid var(--blue);padding-left:12px}

/* ---------- Footer ---------- */
.site-footer{background:var(--blue-d);color:#cfdcea;padding:26px 20px;margin-top:40px}
.foot-row{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.site-footer h4{color:#fff;margin:0 0 8px;font-size:14px}
.site-footer a{color:#cfe0f2;text-decoration:none;display:block;padding:2px 0;font-size:13px}
.site-footer a:hover{color:#fff}
.foot-brand a{color:var(--gold);font-weight:700;display:inline}
.foot-bottom{max-width:1200px;margin:18px auto 0;border-top:1px solid rgba(255,255,255,.15);padding-top:14px;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- Toast / modal ---------- */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--panel);
  padding:11px 20px;border-radius:24px;font-size:13.5px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:200}
#toast.show{opacity:1}
.modal-bg{position:fixed;inset:0;background:rgba(10,20,35,.55);display:flex;align-items:center;justify-content:center;z-index:150;padding:18px}
.modal{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:480px;width:100%;padding:22px}
.modal h3{margin:0 0 10px;color:var(--blue)}
.modal textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:8px;padding:8px;font-family:inherit;background:var(--panel-2);color:var(--ink)}
.modal .row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

/* ---------- Loading ---------- */
.loader{display:inline-block;width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .exam-body{grid-template-columns:1fr}
  .palette{position:static}
  .foot-row{grid-template-columns:1fr}
  .hdr-row{flex-wrap:wrap}
  .hdr-side{align-items:flex-start;width:100%;flex-direction:row;justify-content:space-between}
  .bar-row .name{width:130px}
}
@media(max-width:560px){
  .hdr-text h1{font-size:16px}
  .pal-grid{grid-template-columns:repeat(5,1fr)}
  .result-score{font-size:42px}
  main{padding:0 12px 50px}
}
@media print{
  .tabbar,.theme-toggle,.qtools,.exam-top,.palette,.exam-nav,.pager,#toast{display:none!important}
}