/* MedExExam v2 — Frontend CSS */
:root {
  --blue:#0EA5E9; --blue-dk:#0284C7; --blue-lt:#E0F2FE;
  --green:#22C55E; --green-lt:#DCFCE7;
  --red:#EF4444;   --red-lt:#FEE2E2;
  --amber:#F59E0B; --amber-lt:#FEF3C7;
  --purple:#8B5CF6;
  --bg:#F8FAFC; --card:#FFFFFF; --sidebar:#0F172A;
  --border:#E2E8F0; --border2:#CBD5E1;
  --t1:#0F172A; --t2:#64748B; --t3:#94A3B8;
  --sw:240px; --r:12px; --r2:8px;
  --sh:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.04);
  --sh2:0 4px 12px rgba(0,0,0,.12),0 8px 32px rgba(0,0,0,.06);
}
.mqp-app,
.mqp-app * { box-sizing:border-box; }
.mqp-app {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; color:var(--t1); background:var(--bg);
  min-height:100vh; display:flex; line-height:1.6;
}

/* ── Sidebar ── */
.mqp-sidebar {
  width:var(--sw); min-height:100vh; background:var(--sidebar);
  display:flex; flex-direction:column; flex-shrink:0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.mqp-logo {
  display:flex; align-items:center; gap:10px;
  padding:24px 20px 20px; color:#fff; font-weight:700; font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mqp-nav { padding:16px 12px; flex:1; }
.mqp-nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--r2); color:#94A3B8; text-decoration:none;
  font-size:13.5px; font-weight:500; transition:.15s; margin-bottom:2px;
}
.mqp-nav-item svg { flex-shrink:0; }
.mqp-nav-item:hover { background:rgba(255,255,255,.06); color:#CBD5E1; }
.mqp-nav-item.active { background:rgba(14,165,233,.18); color:#fff; }
.mqp-sidebar-footer {
  padding:16px 20px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px; color:#94A3B8;
}
.mqp-avatar {
  width:34px; height:34px; border-radius:50%; background:var(--blue);
  color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mqp-user-name { font-size:13px; font-weight:600; color:#CBD5E1; }
.mqp-logout { font-size:12px; color:#64748B; text-decoration:none; }
.mqp-logout:hover { color:var(--red); }

/* ── Main ── */
.mqp-main { flex:1; padding:32px 36px; overflow-y:auto; min-width:0; }
.mqp-page-hdr {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;
}
.mqp-page-hdr h1 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.4px; }

/* ── Views ── */
.mqp-view { display:none; }
.mqp-view.active { display:block; }

/* ── Card ── */
.mqp-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:24px; box-shadow:var(--sh);
}
.mqp-card h3 {
  margin:0 0 16px; font-size:12px; font-weight:700; color:var(--t2);
  text-transform:uppercase; letter-spacing:.6px;
}

/* ── Stat grid ── */
.mqp-stat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;
}
.mqp-stat-tile {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:20px 24px; box-shadow:var(--sh);
}
.mqp-stat-tile:nth-child(1){border-top:3px solid var(--blue);}
.mqp-stat-tile:nth-child(2){border-top:3px solid var(--green);}
.mqp-stat-tile:nth-child(3){border-top:3px solid var(--amber);}
.mqp-stat-tile:nth-child(4){border-top:3px solid var(--purple);}
.mqp-stat-tile .mqp-n { display:block; font-size:30px; font-weight:800; letter-spacing:-1px; color:var(--t1); }
.mqp-stat-tile .mqp-l { display:block; font-size:12px; color:var(--t2); font-weight:500; margin-top:4px; }
.mqp-stat-tile .mqp-s { display:block; font-size:11px; color:var(--t3); }
.mqp-skel { animation:mqp-pulse 1.4s ease-in-out infinite; }
.mqp-sk-n { height:30px; width:60%; background:var(--border); border-radius:6px; margin-bottom:8px; }
.mqp-sk-l { height:12px; width:40%; background:var(--border); border-radius:4px; }
@keyframes mqp-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Grid ── */
.mqp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }

/* ── Buttons ── */
.mqp-btn {
  display:inline-flex; align-items:center; gap:6px; padding:9px 18px;
  border-radius:var(--r2); font-size:13.5px; font-weight:600; cursor:pointer;
  border:1.5px solid transparent; text-decoration:none; transition:.15s; white-space:nowrap;
}
.mqp-btn-primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.mqp-btn-primary:hover { background:var(--blue-dk); }
.mqp-btn-ghost { background:transparent; color:var(--t2); border-color:var(--border2); }
.mqp-btn-ghost:hover { background:var(--bg); color:var(--t1); }
.mqp-btn-danger { background:var(--red); color:#fff; border-color:var(--red); }
.mqp-btn-sm { padding:6px 12px; font-size:12.5px; }

/* ── Countdown Banner ── */
.mqp-countdown {
  background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%);
  border-radius:var(--r); margin-bottom:24px; overflow:hidden; box-shadow:var(--sh2);
}
.mqp-cd-left { display:flex; align-items:center; gap:14px; }
.mqp-cd-icon { font-size:28px; flex-shrink:0; }
.mqp-cd-label { display:block; font-size:16px; font-weight:700; color:#fff; }
.mqp-cd-sub   { display:block; font-size:12.5px; color:#94A3B8; margin-top:2px; }
.mqp-cd-right { display:flex; align-items:center; gap:20px; flex-shrink:0; }
.mqp-cd-num-wrap {
  text-align:center; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r2); padding:10px 20px;
}
.mqp-cd-num  { display:block; font-size:36px; font-weight:900; color:#fff; letter-spacing:-2px; line-height:1; }
.mqp-cd-unit { font-size:11px; color:#94A3B8; text-transform:uppercase; letter-spacing:.6px; }
.mqp-cd-num-wrap.urgent  .mqp-cd-num { color:#FCA5A5; }
.mqp-cd-num-wrap.warning .mqp-cd-num { color:#FCD34D; }
.mqp-cd-num-wrap.ok      .mqp-cd-num { color:#86EFAC; }
.mqp-countdown>.mqp-cd-left,
.mqp-countdown>.mqp-cd-right { display:flex; }
/* inner layout */
.mqp-countdown { padding:0; }
.mqp-cd-inner { display:flex; align-items:center; justify-content:space-between; padding:20px 28px; gap:16px; }
.mqp-cd-bar-wrap { height:4px; background:rgba(255,255,255,.1); }
.mqp-cd-bar { height:100%; background:linear-gradient(90deg,#0EA5E9,#22C55E); transition:width 1s ease; }

/* ── Specialty mini list ── */
.mqp-spec-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.mqp-spec-row:last-child { border-bottom:none; }
.mqp-spec-name { flex:1; font-weight:500; }
.mqp-spec-bar-wrap { width:80px; background:var(--border); border-radius:99px; height:5px; }
.mqp-spec-bar { height:100%; border-radius:99px; }
.mqp-spec-bar.good { background:var(--green); }
.mqp-spec-bar.fair { background:var(--amber); }
.mqp-spec-bar.poor { background:var(--red); }
.mqp-spec-pct { font-weight:700; min-width:40px; text-align:right; }

/* ── Table ── */
.mqp-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.mqp-table th { text-align:left; padding:10px 14px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); border-bottom:2px solid var(--border); }
.mqp-table td { padding:12px 14px; border-bottom:1px solid var(--border); }
.mqp-table tbody tr:hover { background:var(--bg); }
.mqp-table tbody tr:last-child td { border-bottom:none; }
.mqp-loading-row { text-align:center; color:var(--t3); padding:20px; }

/* ── Score badges ── */
.mqp-badge { display:inline-block; padding:3px 8px; border-radius:6px; font-weight:700; font-size:12px; }
.mqp-badge.good { background:var(--green-lt); color:#15803D; }
.mqp-badge.fair { background:var(--amber-lt); color:#92400E; }
.mqp-badge.poor { background:var(--red-lt); color:#991B1B; }
.mqp-badge.type { background:#EDE9FE; color:#5B21B6; }
.mqp-badge.spec { background:var(--blue-lt); color:var(--blue-dk); }
.mqp-badge.easy   { background:var(--green-lt); color:#15803D; border:1px solid #BBF7D0; }
.mqp-badge.medium { background:var(--amber-lt); color:#B45309; border:1px solid #FDE68A; }
.mqp-badge.hard   { background:var(--red-lt);   color:#B91C1C; border:1px solid #FECACA; }

/* ── Question Bank ── */
.mqp-app-bank .mqp-main { padding:32px 36px; }
.mqp-bank-layout { display:grid; grid-template-columns:300px 1fr; gap:24px; align-items:start; }
.mqp-filter-panel { position:sticky; top:24px; }
.mqp-fg { margin-bottom:20px; }
.mqp-label { display:block; font-size:12px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.mqp-select, .mqp-input {
  width:100%; padding:8px 12px; border:1px solid var(--border2);
  border-radius:var(--r2); font-size:13.5px; color:var(--t1); background:#fff; outline:none; transition:.15s;
}
.mqp-select:focus, .mqp-input:focus { border-color:var(--blue); }
.mqp-radio-grp { display:flex; flex-direction:column; gap:8px; }
.mqp-radio-opt {
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  border:1.5px solid var(--border); border-radius:var(--r2); cursor:pointer; transition:.15s;
}
.mqp-radio-opt:has(input:checked) { border-color:var(--blue); background:var(--blue-lt); }
.mqp-radio-opt span { font-weight:600; font-size:13px; }
.mqp-radio-opt small { display:block; color:var(--t3); font-size:11.5px; }
.mqp-cb-list { display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; }
.mqp-cb-list label { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }

/* ── Quiz ── */
.mqp-app-quiz { flex-direction:column; background:var(--bg); }
.mqp-quiz-hdr {
  height:58px; background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  position:sticky; top:0; z-index:100; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.mqp-quiz-hdr-l { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; }
.mqp-quiz-hdr-c { font-size:13px; font-weight:600; color:var(--t2); }
.mqp-quiz-hdr-r { display:flex; align-items:center; gap:12px; }
.mqp-timer { display:flex; align-items:center; gap:5px; font-size:14px; font-weight:700; background:var(--bg); padding:6px 12px; border-radius:var(--r2); border:1px solid var(--border); }
.mqp-timer.warn { color:var(--amber); border-color:var(--amber); background:var(--amber-lt); }
.mqp-timer.crit { color:var(--red); border-color:var(--red); background:var(--red-lt); animation:mqp-pulse .7s infinite; }

/* ── Progress bar ── */
.mqp-progress-strip {
  background:var(--card); border-bottom:1px solid var(--border);
  padding:10px 24px 8px; position:sticky; top:58px; z-index:90;
}
.mqp-prog-segs {
  display:flex; gap:2px; height:10px; border-radius:99px; overflow:hidden;
  background:var(--border); margin-bottom:7px;
}
.mqp-seg { flex:1; height:100%; border-radius:2px; background:var(--border); transition:background .35s; }
.mqp-seg.correct  { background:linear-gradient(180deg,#4ADE80,#22C55E); }
.mqp-seg.wrong    { background:linear-gradient(180deg,#F87171,#EF4444); }
.mqp-seg.current  { background:#BAE6FD; }
.mqp-seg.flagged-unanswered { background:#FDE68A; }
@keyframes mqp-seg-pop{0%{transform:scaleY(1)}40%{transform:scaleY(1.5)}70%{transform:scaleY(.9)}100%{transform:scaleY(1)}}
.mqp-seg.pop { animation:mqp-seg-pop .4s ease forwards; }
.mqp-prog-stats { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; }
.mqp-ps-correct { color:var(--green); }
.mqp-ps-wrong   { color:var(--red); }
.mqp-ps-rem     { color:var(--t3); }
.mqp-ps-sep     { color:var(--border2); }
.mqp-ps-pill {
  margin-left:auto; background:var(--bg); border:1px solid var(--border2);
  border-radius:20px; padding:2px 10px; font-size:12px; font-weight:700; color:var(--t2);
  transition:.3s;
}
.mqp-ps-pill.good { background:var(--green-lt); color:#15803D; border-color:#BBF7D0; }
.mqp-ps-pill.fair { background:var(--amber-lt); color:#92400E; border-color:#FDE68A; }
.mqp-ps-pill.poor { background:var(--red-lt);   color:#991B1B; border-color:#FECACA; }

/* ── Quiz body ── */
.mqp-quiz-body { display:flex; flex:1; min-height:0; }
.mqp-quiz-nav {
  width:220px; flex-shrink:0; background:var(--card); border-right:1px solid var(--border);
  padding:20px 16px; overflow-y:auto; height:calc(100vh - 100px); position:sticky; top:100px;
}
.mqp-nav-hdr h4 { margin:0 0 8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--t2); }
.mqp-nav-legend { font-size:11px; color:var(--t3); margin-bottom:14px; display:flex; flex-wrap:wrap; gap:8px; }
.mqp-leg-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:3px; }
.mqp-leg-dot.answered { background:var(--blue); }
.mqp-leg-dot.flagged  { background:var(--amber); }
.mqp-q-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:16px; }
.mqp-q-btn {
  aspect-ratio:1; border:1.5px solid var(--border); border-radius:6px; background:#fff;
  font-size:11px; font-weight:600; cursor:pointer; color:var(--t2); transition:.12s; padding:0;
}
.mqp-q-btn:hover    { border-color:var(--blue); color:var(--blue); }
.mqp-q-btn.current  { background:var(--blue); border-color:var(--blue); color:#fff; }
.mqp-q-btn.correct  { background:var(--green-lt); border-color:var(--green); color:var(--green); }
.mqp-q-btn.wrong    { background:var(--red-lt);   border-color:var(--red);   color:var(--red); }
.mqp-q-btn.answered { background:var(--blue-lt);  border-color:var(--blue);  color:var(--blue); }
.mqp-q-btn.flagged  { border-color:var(--amber);  background:var(--amber-lt); color:var(--amber); }
.mqp-nav-foot { font-size:12px; color:var(--t3); padding-top:12px; border-top:1px solid var(--border); }
.mqp-quiz-main { flex:1; padding:32px; overflow-y:auto; min-width:0; }

/* ── Question card ── */
.mqp-q-card { max-width:760px; margin:0 auto; }
.mqp-q-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.mqp-q-stem {
  font-size:15.5px; line-height:1.75; margin-bottom:24px; padding:24px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh);
}
.mqp-options { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.mqp-option {
  display:flex; align-items:flex-start; gap:14px; padding:14px 18px;
  border:2px solid var(--border); border-radius:var(--r); cursor:pointer;
  background:var(--card); transition:.15s; font-size:14px;
}
.mqp-option:hover:not(.disabled) { border-color:var(--blue); background:var(--blue-lt); transform:translateX(2px); }
.mqp-option.disabled { cursor:default; }
.mqp-option.selected { border-color:var(--blue); background:var(--blue-lt); }
.mqp-option.correct  { border-color:var(--green); background:var(--green-lt); }
.mqp-option.wrong    { border-color:var(--red);   background:var(--red-lt); }
.mqp-option-key {
  width:28px; height:28px; border-radius:50%; background:var(--bg); border:1.5px solid var(--border2);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  flex-shrink:0; color:var(--t2); transition:.15s;
}
.mqp-option.selected .mqp-option-key { background:var(--blue); border-color:var(--blue); color:#fff; }
.mqp-option.correct  .mqp-option-key { background:var(--green); border-color:var(--green); color:#fff; }
.mqp-option.wrong    .mqp-option-key { background:var(--red);   border-color:var(--red);  color:#fff; }
.mqp-option-text { flex:1; padding-top:3px; line-height:1.5; }
.mqp-q-actions { display:flex; gap:8px; margin-bottom:24px; }
.mqp-flag-btn.flagged  { background:var(--amber-lt); border-color:var(--amber); color:var(--amber); }
.mqp-bkmk-btn.bookmarked { background:var(--blue-lt); border-color:var(--blue); color:var(--blue); }

/* ── Explanation ── */
.mqp-expl { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:24px; box-shadow:var(--sh); }
.mqp-expl-hdr { padding:14px 20px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.mqp-expl-hdr.correct { background:var(--green-lt); color:#15803D; border-bottom:1px solid #BBF7D0; }
.mqp-expl-hdr.wrong   { background:var(--red-lt);   color:#B91C1C; border-bottom:1px solid #FECACA; }
.mqp-expl-body { padding:20px; font-size:14px; line-height:1.75; background:var(--card); }
.mqp-expl-ref  { padding:12px 20px; background:var(--bg); border-top:1px solid var(--border); font-size:12px; color:var(--t3); font-style:italic; }
.mqp-q-nav-btns { display:flex; justify-content:space-between; padding-top:8px; }
.mqp-hidden { display:none !important; }

/* ── Overlays ── */
.mqp-overlay {
  position:fixed; inset:0; background:rgba(15,23,42,.65);
  display:flex; align-items:center; justify-content:center; z-index:9999; backdrop-filter:blur(4px);
}
.mqp-overlay-card {
  background:#fff; border-radius:var(--r); padding:40px 48px; text-align:center;
  max-width:400px; width:90%; box-shadow:var(--sh2);
}
.mqp-overlay-card h2 { margin:0 0 12px; font-size:22px; }
.mqp-overlay-card p  { color:var(--t2); margin:0 0 24px; }
.mqp-overlay-card .mqp-btn { margin:4px; min-width:140px; }
.mqp-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  padding:12px 24px; border-radius:var(--r2); font-weight:600; font-size:14px; z-index:9998;
  background:var(--amber-lt); color:#92400E; border:1.5px solid var(--amber); box-shadow:var(--sh2);
}

/* ── Loading ── */
.mqp-loading-spinner { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:var(--t3); }
.mqp-spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:mqp-spin .75s linear infinite; margin-bottom:14px; }
@keyframes mqp-spin{to{transform:rotate(360deg)}}
.mqp-loading { display:flex; align-items:center; justify-content:center; padding:40px; grid-column:1/-1; }

/* ── Results ── */
.mqp-app-results { flex-direction:column; }
.mqp-results-hdr { height:58px; background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 32px; }
.mqp-results-body { max-width:940px; margin:0 auto; padding:36px 24px; width:100%; }
.mqp-results-hero { display:flex; align-items:center; gap:48px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:36px 40px; margin-bottom:28px; box-shadow:var(--sh); }
.mqp-ring-wrap { position:relative; flex-shrink:0; }
.mqp-ring-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mqp-ring-pct { font-size:30px; font-weight:800; letter-spacing:-1px; color:var(--t1); display:block; }
.mqp-results-hero h1 { margin:0 0 16px; font-size:24px; font-weight:800; }
.mqp-results-meta { display:grid; grid-template-columns:repeat(4,auto); gap:28px; margin-bottom:24px; }
.mqp-results-meta>div { display:flex; flex-direction:column; gap:2px; }
.mqp-results-meta label { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; }
.mqp-results-meta strong { font-size:20px; font-weight:700; }
.mqp-results-actions { display:flex; gap:10px; flex-wrap:wrap; }
.mqp-results-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:24px; gap:4px; }
.mqp-tab { padding:10px 20px; background:none; border:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--t2); border-bottom:2px solid transparent; margin-bottom:-2px; transition:.15s; }
.mqp-tab.active { color:var(--blue); border-color:var(--blue); }
.mqp-filter-pills { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.mqp-pill { padding:6px 16px; border:1.5px solid var(--border2); border-radius:20px; background:#fff; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--t2); transition:.15s; }
.mqp-pill.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.mqp-review-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r); margin-bottom:16px; overflow:hidden; box-shadow:var(--sh); }
.mqp-review-hdr { display:flex; align-items:flex-start; gap:14px; padding:16px 20px; cursor:pointer; }
.mqp-review-icon { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.mqp-review-icon.correct  { background:var(--green-lt); color:var(--green); }
.mqp-review-icon.wrong    { background:var(--red-lt);   color:var(--red); }
.mqp-review-q { font-size:13.5px; color:var(--t1); line-height:1.5; }
.mqp-review-num { font-size:12px; color:var(--t3); margin-bottom:3px; }
.mqp-review-expand { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--t3); font-size:18px; flex-shrink:0; }
.mqp-review-body { border-top:1px solid var(--border); padding:20px; display:none; }
.mqp-review-body.open { display:block; }
.mqp-breakdown-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.mqp-breakdown-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh); }
.mqp-prog-bar-wrap { background:var(--border); border-radius:99px; height:6px; overflow:hidden; margin:6px 0 10px; }
.mqp-prog-bar { height:100%; border-radius:99px; transition:width 1s ease; }
.mqp-prog-bar.good { background:var(--green); }
.mqp-prog-bar.fair { background:var(--amber); }
.mqp-prog-bar.poor { background:var(--red); }

/* ── Calendar ── */
.mqp-cal-strip {
  background:linear-gradient(135deg,#1E3A8A,#0EA5E9); border-radius:var(--r);
  padding:20px 28px; margin-bottom:24px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; color:#fff; box-shadow:var(--sh2);
}
.mqp-cd-ring-wrap { position:relative; width:60px; height:60px; flex-shrink:0; }
.mqp-cd-ring { width:60px; height:60px; }
.mqp-ring-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.mqp-cal-strip-title { font-size:18px; font-weight:800; }
.mqp-cal-strip-sub   { font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; }
.mqp-cd-counter { text-align:center; }
.mqp-cd-big   { display:block; font-size:48px; font-weight:900; letter-spacing:-3px; line-height:1; }
.mqp-cd-small { font-size:11px; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.5px; }
.mqp-cal-layout { display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
.mqp-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.mqp-cal-wdays { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:8px; }
.mqp-cal-wdays span { text-align:center; font-size:11.5px; font-weight:700; color:var(--t3); text-transform:uppercase; padding:4px 0; }
.mqp-cal-wdays .wknd { color:var(--blue); }
.mqp-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; min-height:280px; }
.mqp-cal-day {
  aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:6px 4px 4px; cursor:pointer;
  border:1.5px solid transparent; transition:.15s; position:relative; background:var(--bg); min-height:52px;
}
.mqp-cal-day:hover:not(.empty) { border-color:var(--blue); background:var(--blue-lt); transform:scale(1.04); z-index:2; }
.mqp-cal-day.empty  { cursor:default; background:transparent; }
.mqp-cal-day.today  { border-color:var(--blue); background:var(--blue-lt); }
.mqp-cal-day.selected { border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(14,165,233,.25); }
.mqp-cal-day.goal-met { background:var(--green-lt); }
.mqp-cal-day.partial  { background:var(--amber-lt); }
.mqp-cal-day.missed   { background:var(--red-lt); }
.mqp-cal-day.studied  { background:#EDE9FE; }
.mqp-cal-day.exam-day { background:linear-gradient(135deg,#FEF3C7,#FDE68A) !important; border-color:var(--amber) !important; box-shadow:0 2px 8px rgba(245,158,11,.3); }
@keyframes mqp-exam-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.06)}}
.mqp-cal-day.exam-day::after { content:''; position:absolute; inset:-4px; border-radius:12px; border:2px solid var(--amber); animation:mqp-exam-pulse 2s ease-in-out infinite; }
.mqp-day-num  { font-size:13px; font-weight:700; color:var(--t1); line-height:1; margin-bottom:3px; }
.mqp-day-dots { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; }
.mqp-day-dot  { width:5px; height:5px; border-radius:50%; }
.mqp-day-dot.goal { background:var(--blue); }
.mqp-day-dot.act  { background:var(--green); }
.mqp-day-dot.exam { background:var(--amber); }
.mqp-day-score    { font-size:9.5px; font-weight:700; margin-top:2px; color:var(--t2); }
.mqp-day-exam-lbl { font-size:8.5px; font-weight:800; text-transform:uppercase; color:#B45309; margin-top:1px; }
.mqp-cal-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.mqp-cal-legend span { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--t2); }
.mqp-dot { width:10px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0; }
.mqp-dot.goal-met { background:var(--green-lt); border:1.5px solid var(--green); }
.mqp-dot.partial  { background:var(--amber-lt); border:1.5px solid var(--amber); }
.mqp-dot.missed   { background:var(--red-lt);   border:1.5px solid var(--red); }
.mqp-dot.studied  { background:#EDE9FE; border:1.5px solid var(--purple); }
.mqp-dot.exam-day { background:#FDE68A; border:1.5px solid var(--amber); }
.mqp-cal-aside { display:flex; flex-direction:column; gap:16px; }
.mqp-cal-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mqp-cs { background:var(--bg); border-radius:var(--r2); padding:12px; text-align:center; }
.mqp-cs-n { display:block; font-size:22px; font-weight:800; letter-spacing:-1px; color:var(--t1); }
.mqp-cs-l { display:block; font-size:11px; color:var(--t3); margin-top:2px; text-transform:uppercase; letter-spacing:.4px; }
.mqp-goal-editor { padding:20px; }
.mqp-goal-act { display:flex; gap:0; background:var(--bg); border-radius:var(--r2); overflow:hidden; margin-bottom:16px; border:1px solid var(--border); }
.mqp-goal-act>div { flex:1; display:flex; flex-direction:column; align-items:center; padding:10px 6px; font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; border-right:1px solid var(--border); gap:3px; }
.mqp-goal-act>div:last-child { border-right:none; }
.mqp-goal-act strong { font-size:15px; font-weight:800; color:var(--t1); }
.mqp-hint { background:var(--card); border:1px dashed var(--border2); border-radius:var(--r); padding:24px; text-align:center; color:var(--t3); }
.mqp-hint p { margin:0; font-size:13px; line-height:1.6; }
.mqp-icon-btn { background:none; border:none; cursor:pointer; font-size:16px; color:var(--t3); padding:0; line-height:1; }
.mqp-icon-btn:hover { color:var(--red); }

/* ── Modal ── */
.mqp-modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.65); display:flex; align-items:center; justify-content:center; z-index:9999; backdrop-filter:blur(4px); }
.mqp-modal-card { background:#fff; border-radius:var(--r); padding:36px 40px; max-width:440px; width:90%; box-shadow:var(--sh2); }
.mqp-modal-card h2 { margin:0 0 8px; }
.mqp-modal-card p  { color:var(--t2); margin:0 0 20px; }

/* ── Notice ── */
.mqp-notice { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:32px; text-align:center; max-width:480px; margin:60px auto; }
.mqp-notice--upgrade { border-top:3px solid var(--blue); }
.mqp-notice h3 { margin:0 0 10px; }
.mqp-notice p  { color:var(--t2); margin:0 0 20px; }

/* ── Responsive ── */
/* ───── TABLET (≤1024px) ───── */
@media(max-width:1024px){
  .mqp-stat-grid      { grid-template-columns:repeat(2,1fr) }
  .mqp-grid2          { grid-template-columns:1fr }
  .mqp-bank-layout    { grid-template-columns:1fr }
  .mqp-cal-layout     { grid-template-columns:1fr }
  .mqp-results-hero   { flex-direction:column;text-align:center;gap:24px }
  .mqp-app-bank .mqp-main { padding:24px 20px }
  .mqp-filter-panel   { position:static; width:100% }
  .mqp-quiz-nav       { width:100%;min-height:auto;border-right:none;
                        border-bottom:1px solid var(--border);
                        flex-direction:row;flex-wrap:wrap;gap:4px;padding:10px;
                        overflow-x:auto;max-height:120px }
  .mqp-q-btn          { min-width:32px;height:32px;font-size:12px }
}

/* ───── MOBILE (≤768px) ───── */
@media(max-width:768px){
  /* Sidebar collapses to a top bar */
  .mqp-sidebar        { display:none }
  .mqp-app            { flex-direction:column }

  /* General padding */
  .mqp-main           { padding:16px 14px }
  .mqp-app-bank .mqp-main { padding:16px 14px }

  /* Stat tiles: 2 columns */
  .mqp-stat-grid      { grid-template-columns:1fr 1fr; gap:10px }
  .mqp-stat-tile      { padding:12px 14px }
  .mqp-n              { font-size:20px }

  /* Dashboard views: single column */
  .mqp-grid2          { grid-template-columns:1fr }
  .mqp-overview-grid  { grid-template-columns:1fr }
  .mqp-bank-layout    { grid-template-columns:1fr;gap:14px }

  /* Question bank: full-width filter panel */
  .mqp-filter-panel   { position:static;width:100%;border-radius:var(--r) }
  .mqp-radio-grp      { flex-direction:column;gap:8px }
  .mqp-radio-opt      { flex:none }

  /* Quiz: hide side nav, use top progress bar */
  .mqp-quiz-nav       { display:none }
  .mqp-quiz-main      { padding:14px 14px }
  .mqp-q-card         { padding:16px 14px }
  .mqp-q-meta         { flex-wrap:wrap;gap:6px }
  .mqp-options        { gap:8px }
  .mqp-option         { padding:10px 12px }
  .mqp-q-nav-btns     { gap:8px }
  .mqp-q-nav-btns .mqp-btn { flex:1;text-align:center;padding:12px 8px;font-size:13px }

  /* Results */
  .mqp-results-hero   { flex-direction:column;text-align:center;gap:20px;padding:20px 14px }
  .mqp-results-meta   { justify-content:center;flex-wrap:wrap;gap:12px }
  .mqp-ring-wrap      { margin:0 auto }
  .mqp-breakdown-grid { grid-template-columns:1fr }

  /* Analytics */
  .mqp-spec-chart-wrap { min-height:300px }
  .mqp-spec-row       { flex-wrap:wrap;gap:6px }
  .mqp-spec-name      { min-width:100%;font-size:13px }

  /* Calendar */
  .mqp-cal-layout     { grid-template-columns:1fr }
  .mqp-cal-grid       { gap:3px }
  .mqp-day            { min-height:36px;font-size:11px }
  .mqp-cal-strip      { padding:10px 14px;gap:10px }
  .mqp-cd-big         { font-size:28px }

  /* Countdown widget */
  .mqp-countdown      { flex-direction:column;gap:10px }
  .mqp-cd-num-wrap    { align-self:flex-start }

  /* History table */
  .mqp-table          { font-size:12px }
  .mqp-table td, .mqp-table th { padding:8px 10px }
  .mqp-table .mqp-btn-sm { padding:4px 8px;font-size:11px }

  /* Page header */
  .mqp-page-hdr       { flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px }
  .mqp-page-hdr h1    { font-size:20px }

  /* Cards */
  .mqp-card           { padding:14px }

  /* Filter chips */
  .mqp-cb-list        { max-height:160px;overflow-y:auto }

  /* Exam type list */
  #mqp-exam-type-list > label { padding:8px 10px;font-size:13px }

  /* Licence widget */
  #mqp-licence-widget { padding:12px 14px }
}

/* ───── SMALL MOBILE (≤480px) ───── */
@media(max-width:480px){
  .mqp-stat-grid      { grid-template-columns:1fr 1fr;gap:8px }
  .mqp-stat-tile      { padding:10px 12px }
  .mqp-n              { font-size:18px }
  .mqp-l              { font-size:11px }
  .mqp-option         { padding:9px 10px;font-size:13px }
  .mqp-option-key     { width:26px;height:26px;font-size:12px }
  .mqp-results-hero   { padding:16px 12px }
  .mqp-ring-wrap canvas { width:140px!important;height:140px!important }
  .mqp-ring-label .mqp-ring-pct { font-size:24px }
  .mqp-page-hdr h1    { font-size:18px }
}

/* ─────────────────────────────────────────────────────────
   ANTI-SCREENSHOT — blocks OS-level screenshot tools on
   the quiz interface by making protected content invisible
   in screen captures while keeping it fully readable on
   screen. Uses CSS isolation + mix-blend-mode trick.
   NOTE: Text is still selectable/copyable as per design.
───────────────────────────────────────────────────────── */
.mqp-app-quiz .mqp-q-stem,
.mqp-app-quiz .mqp-option-text,
.mqp-app-quiz .mqp-expl-body,
.mqp-app-quiz .mqp-expl-ref {
  /* Isolation context — required for the blend mode to work */
  isolation: isolate;
  position: relative;
}

/* The ::before pseudo-element carries the blending layer.
   On screen: transparent (invisible to user).
   In screenshots: captures as solid colour due to how
   screenshot compositing bypasses mix-blend-mode. */
.mqp-app-quiz .mqp-q-stem::before,
.mqp-app-quiz .mqp-option-text::before,
.mqp-app-quiz .mqp-expl-body::before,
.mqp-app-quiz .mqp-expl-ref::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: rgba(255, 255, 255, 0.01);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 0;
}

/* Keep text on top of the blend layer */
.mqp-app-quiz .mqp-q-stem *,
.mqp-app-quiz .mqp-option-text *,
.mqp-app-quiz .mqp-expl-body * {
  position: relative;
  z-index: 1;
}

/* Additional layer: vary the background subtly so solid-
   colour screenshot replacement is more disruptive */
.mqp-app-quiz .mqp-q-stem {
  background: linear-gradient(
    135deg,
    rgba(248,250,252,1) 0%,
    rgba(241,245,249,1) 50%,
    rgba(248,250,252,1) 100%
  );
}

/* Prevent dev-tools screenshot (right-click → save/copy image) */
.mqp-app-quiz .mqp-q-stem,
.mqp-app-quiz .mqp-options,
.mqp-app-quiz .mqp-expl {
  -webkit-user-select: text;  /* allow copy — by design */
  user-select: text;
  -webkit-touch-callout: none; /* disable iOS save-image callout */
}

/* ───── MOBILE TOP NAV BAR ───── */
.mqp-mobile-nav {
  display:none;
  background:var(--sidebar);
  padding:0 14px;
  position:sticky;
  top:0;
  z-index:100;
  align-items:center;
  justify-content:space-between;
  height:52px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mqp-mobile-nav .mqp-logo-sm {
  display:flex; align-items:center; gap:8px;
  color:#fff; font-weight:700; font-size:15px;
}
.mqp-mobile-nav-links {
  display:flex; align-items:center; gap:2px;
}
.mqp-mobile-nav-links a {
  color:#94A3B8; font-size:12px; font-weight:600;
  padding:6px 8px; border-radius:6px; text-decoration:none;
  white-space:nowrap;
}
.mqp-mobile-nav-links a:hover,
.mqp-mobile-nav-links a.active { color:#fff; background:rgba(14,165,233,.2); }
@media(max-width:768px){
  .mqp-mobile-nav { display:flex; }
}