/* ═══════════════════════════════════════════════════════════════════════════
   TopMD UI 2.0 — "Aurora Glass" design layer (loaded after medcore.css)
   Modern tokens, glass surfaces, gradient accents and motion. Respects
   prefers-reduced-motion. Light, dark and reverse themes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
  --font: "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Inter", system-ui, -apple-system, Roboto, sans-serif;
  --r: 18px; --r-sm: 12px; --r-xs: 9px;
  --side: 248px; --top: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .22s;
  --grad: linear-gradient(135deg, #22d3ee 0%, #38bdf8 38%, #818cf8 72%, #c084fc 100%);
  --grad-teal: linear-gradient(135deg, #2dd4bf, #22d3ee);
  --grad-warm: linear-gradient(135deg, #fb923c, #f472b6);
}
:root, [data-theme="dark"] {
  --bg: #060b16; --bg-2: #0a1222; --panel: rgb(14 24 42 / .72); --panel-solid: #0e182a;
  --card: rgb(20 33 56 / .62); --card-2: rgb(29 46 76 / .7); --raise: #1d3152;
  --fg: #eaf1fb; --fg-2: #c2cfe2; --muted: #8b9cb8; --line: rgb(148 175 220 / .13); --line-2: rgb(148 175 220 / .22);
  --primary: #38bdf8; --primary-2: #7dd3fc; --primary-soft: rgb(56 189 248 / .13); --on-primary: #03121f;
  --glass-hi: rgb(255 255 255 / .06);
  --glow: 0 0 0 1px rgb(56 189 248 / .45), 0 8px 30px rgb(56 189 248 / .18);
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 10px 30px rgb(0 0 0 / .32);
  --shadow-lg: 0 30px 80px rgb(0 0 0 / .55);
  --aurora-1: rgb(34 211 238 / .16); --aurora-2: rgb(129 140 248 / .16); --aurora-3: rgb(45 212 191 / .12);
}
[data-theme="light"] {
  --bg: #f3f6fc; --bg-2: #eaf0f9; --panel: rgb(255 255 255 / .78); --panel-solid: #fff;
  --card: rgb(255 255 255 / .82); --card-2: #f2f6fc; --raise: #e7eef8;
  --fg: #0d1729; --fg-2: #33425a; --muted: #475569; --line: rgb(15 40 80 / .09); --line-2: rgb(15 40 80 / .16);
  --primary: #0369a1; --primary-2: #075985; --primary-soft: rgb(2 132 199 / .09); --on-primary: #fff;
  /* status colours used as small text: ≥ 4.5:1 on white and the soft tints (WCAG AA) */
  --ok: #166534; --amber: #92400e; --warn: #92400e; --teal: #0f766e;
  --glass-hi: rgb(255 255 255 / .9);
  --glow: 0 0 0 1px rgb(2 132 199 / .35), 0 10px 26px rgb(2 132 199 / .14);
  --shadow: 0 1px 2px rgb(15 23 42 / .05), 0 10px 28px rgb(15 23 42 / .07);
  --shadow-lg: 0 30px 70px rgb(15 23 42 / .2);
  --aurora-1: rgb(56 189 248 / .18); --aurora-2: rgb(167 139 250 / .14); --aurora-3: rgb(45 212 191 / .14);
}
[data-theme="reverse"] { --panel: #0b0b0b; --panel-solid: #0b0b0b; --card: #121212; --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent; }

/* ── 2. Base & animated aurora background ────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 14.5px; letter-spacing: .005em; background: var(--bg); text-rendering: optimizeLegibility; }
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 30vmax at 12% 8%, var(--aurora-1), transparent 60%),
    radial-gradient(38vmax 30vmax at 88% 18%, var(--aurora-2), transparent 62%),
    radial-gradient(44vmax 34vmax at 70% 96%, var(--aurora-3), transparent 60%);
  animation: aurora-drift 28s ease-in-out infinite alternate;
}
@keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(2vmax, -1.5vmax, 0) rotate(4deg); } 100% { transform: translate3d(-2vmax, 1vmax, 0) rotate(-3deg); } }
h1, h2, h3, h4, .hub-title, .sec-h, .panel-h, .doc-title { font-family: var(--font-display); letter-spacing: -.012em; }
::selection { background: rgb(56 189 248 / .35); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── 3. Surfaces: glass panels & cards ───────────────────────────────────── */
.panel-wrap, .filters, .bank-head, .box, .kpi, .tile, .side-card, .facets, .welcome-stats > div, .cw-card, .step, .explanation, .q-card, .room-top, .osce-clock {
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.panel-wrap, .filters, .bank-head, .box, .side-card, .facets { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.panel-wrap { border-radius: var(--r); padding: 22px; }
.list, .card-list li, .rec, .src-card, .track-tile, .test-card, .result, .subject-tile, .hl-card, .related-v, .up-card, .sheet-row, .fixed-card, .form-chip, .ref-sec, .pw-step, .room-choice, .step-opt {
  background: var(--card); border-color: var(--line);
  transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.src-card:hover, .track-tile:hover, .test-card:hover, .result:hover, .subject-tile:hover:not(:disabled), .hl-card:hover, .rec:hover, .related-v:hover, .sheet-row:hover, .form-chip.ready:hover {
  transform: translateY(-3px); border-color: rgb(56 189 248 / .55); box-shadow: var(--glow);
}

/* ── 4. Controls ─────────────────────────────────────────────────────────── */
.btn { border-radius: 12px; font-weight: 650; padding: 10px 17px; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .14s var(--ease), background var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur); }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn.primary { background: var(--grad); background-size: 160% 160%; color: #04121f; border: 0; box-shadow: 0 6px 20px rgb(56 189 248 / .28); }
.btn.primary:hover:not(:disabled) { background-position: 100% 0; box-shadow: 0 10px 28px rgb(129 140 248 / .38); }
.btn.teal { background: var(--grad-teal); color: #032220; border: 0; box-shadow: 0 6px 18px rgb(45 212 191 / .25); }
.btn.primary::after, .btn.teal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%); transform: translateX(-120%);
}
.btn.primary:hover::after, .btn.teal:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn.danger { background: linear-gradient(135deg, #dc2626, #b91c1c); border: 0; color: #fff; }  /* white text ≥ 4.8:1 */
.btn.danger:hover:not(:disabled) { background: linear-gradient(135deg, #b91c1c, #991b1b); }
.btn.sm { border-radius: 10px; padding: 7px 12px; }
.btn.lg { padding: 13px 22px; font-size: 15.5px; border-radius: 14px; }
.icon-btn { border-radius: 12px; transition: background var(--dur), color var(--dur), transform .14s var(--ease); }
.icon-btn:hover { transform: translateY(-1px); }
.input, .field input, .field textarea, .field select, .top-search, .labs-tools .search, .coach-compose {
  border-radius: 12px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); border-color: var(--line-2);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.input:hover, .field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line-2)); }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { box-shadow: 0 0 0 4px var(--primary-soft); }
.chip { transition: all var(--dur) var(--ease); } .chip:hover { border-color: var(--primary); color: var(--fg); }
.chip.on { background: var(--grad); color: #04121f; border-color: transparent; box-shadow: 0 4px 14px rgb(56 189 248 / .25); }
.seg { border-radius: 12px; padding: 4px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
.seg button { border-radius: 9px; transition: background var(--dur), color var(--dur); }
.seg button.on { background: var(--grad); color: #04121f; box-shadow: 0 3px 12px rgb(56 189 248 / .25); }
.badge, .pill { letter-spacing: .01em; }
.meter { height: 7px; background: color-mix(in srgb, var(--line-2) 80%, transparent); }
.meter span, .hb-fill { background: var(--grad); background-size: 200% 100%; transform-origin: left; animation: fill-in .9s var(--ease) both, sheen 3.2s linear infinite; }
@keyframes fill-in { from { transform: scaleX(0); } }
@keyframes sheen { to { background-position: -200% 0; } }

/* ── 5. Shell ───────────────────────────────────────────────────────────── */
.side { background: color-mix(in srgb, var(--panel-solid) 82%, transparent); backdrop-filter: blur(18px); border-right-color: var(--line); padding: 0 14px 18px; }
.logo { font-family: var(--font-display); font-size: 21px; gap: 11px; }
.logo svg { filter: drop-shadow(0 4px 12px rgb(56 189 248 / .35)); transition: transform .4s var(--spring); }
.logo:hover svg { transform: rotate(-8deg) scale(1.06); }
.logo b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.side-nav a { position: relative; border-radius: 12px; padding: 9px 12px; transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease); }
.side-nav a:hover { transform: translateX(3px); }
.side-nav a.active { background: linear-gradient(90deg, rgb(56 189 248 / .18), rgb(129 140 248 / .08)); color: var(--fg); box-shadow: none; }
.side-nav a.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); animation: pop .3s var(--spring); }
.side-nav a.active .ic { color: var(--primary); }
.side-nav .flag { min-width: 30px; flex: none; letter-spacing: 0; gap: 2px; display: inline-flex; justify-content: flex-start; }
.top { background: color-mix(in srgb, var(--panel-solid) 70%, transparent); backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--line); padding: 0 22px; }
.top-search { height: 42px; max-width: 620px; }
.top-search kbd { font: 600 11px var(--font); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
.mode-toggle { height: 42px; border-radius: 12px; }
.avatar { background: var(--grad); border: 0; box-shadow: 0 4px 14px rgb(129 140 248 / .35); transition: transform .3s var(--spring); }
.avatar:hover { transform: scale(1.08); }
.bell em { background: var(--grad-warm); color: #fff; animation: pop .4s var(--spring); }
.net-dot { box-shadow: 0 0 0 4px rgb(52 211 153 / .18); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgb(52 211 153 / .05); } }
.mobile-brand { display: none; }
.side-backdrop { display: none; }  /* shown only while the phone menu is open (section 13) */
.page { padding: 26px 30px 90px; }

/* ── 6. Page & element motion ───────────────────────────────────────────── */
.outlet > * { animation: page-in .45s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
.track-tiles > *, .src-grid > *, .kpis > *, .tiles > *, .rec-list > *, .test-cards > *, .hl-list > *, .subject-grid > *, .related-list > *, .up-cards > *, .saved-grid > *, .card-list > li, .mcs > li {
  animation: rise .5s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
:is(.track-tiles, .src-grid, .kpis, .tiles, .rec-list, .test-cards, .hl-list, .subject-grid, .related-list, .up-cards, .saved-grid, .card-list, .mcs) > :nth-child(2) { animation-delay: .04s; }
:is(.track-tiles, .src-grid, .kpis, .tiles, .rec-list, .test-cards, .hl-list, .subject-grid, .related-list, .up-cards, .saved-grid, .card-list, .mcs) > :nth-child(3) { animation-delay: .08s; }
:is(.track-tiles, .src-grid, .kpis, .tiles, .rec-list, .test-cards, .hl-list, .subject-grid, .related-list, .up-cards, .saved-grid, .card-list, .mcs) > :nth-child(4) { animation-delay: .12s; }
:is(.track-tiles, .src-grid, .kpis, .tiles, .rec-list, .test-cards, .hl-list, .subject-grid, .related-list, .up-cards, .saved-grid, .card-list, .mcs) > :nth-child(5) { animation-delay: .16s; }
:is(.track-tiles, .src-grid, .kpis, .tiles, .rec-list, .test-cards, .hl-list, .subject-grid, .related-list, .up-cards, .saved-grid, .card-list, .mcs) > :nth-child(6) { animation-delay: .2s; }
:is(.track-tiles, .src-grid, .kpis, .tiles, .rec-list, .test-cards, .hl-list, .subject-grid, .related-list, .up-cards, .saved-grid, .card-list, .mcs) > :nth-child(n+7) { animation-delay: .24s; }
.skeleton { position: relative; overflow: hidden; background: var(--card-2); border-radius: 10px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.boot-mark { background: var(--grad); border-radius: 16px; box-shadow: 0 10px 40px rgb(56 189 248 / .45); animation: boot 1.1s var(--ease) infinite alternate; }
@keyframes boot { from { transform: scale(.86) rotate(-6deg); opacity: .5; } to { transform: scale(1) rotate(6deg); opacity: 1; } }

/* ── 7. Auth ─────────────────────────────────────────────────────────────── */
.auth-hero { position: relative; overflow: hidden; background: #050b18; }
.auth-hero::before, .auth-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: float-blob 14s ease-in-out infinite alternate; }
.auth-hero::before { width: 520px; height: 520px; left: -140px; top: -160px; background: radial-gradient(circle, #22d3ee, transparent 65%); }
.auth-hero::after { width: 560px; height: 560px; right: -180px; bottom: -200px; background: radial-gradient(circle, #818cf8, transparent 65%); animation-delay: -6s; }
@keyframes float-blob { to { transform: translate(60px, 40px) scale(1.12); } }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; }
.auth-hero h1 .grad-text { display: inline; }
.hero-points li { padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); backdrop-filter: blur(8px); animation: rise .6s var(--ease) both; }
.hero-points li:nth-child(2) { animation-delay: .1s; } .hero-points li:nth-child(3) { animation-delay: .2s; }
.auth-card { animation: page-in .55s var(--ease) both; }
.auth-card h2 { font-size: 30px; }
.auth-card form .btn.primary { padding: 13px; font-size: 15px; }

/* ── 8. Dashboard ───────────────────────────────────────────────────────── */
.welcome { border: 1px solid rgb(56 189 248 / .3); border-radius: 22px; padding: 28px 30px;
  background: radial-gradient(700px 260px at 100% 0%, rgb(129 140 248 / .35), transparent 70%), radial-gradient(500px 240px at 0% 100%, rgb(45 212 191 / .28), transparent 70%), linear-gradient(120deg, #0c1d36, #0f2c40); }
.welcome::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: conic-gradient(from 0deg, #22d3ee, #818cf8, #c084fc, #22d3ee); filter: blur(50px); opacity: .35; animation: spin 18s linear infinite; pointer-events: none; }
[data-theme="light"] .welcome { background: radial-gradient(700px 260px at 100% 0%, rgb(167 139 250 / .28), transparent 70%), radial-gradient(500px 240px at 0% 100%, rgb(45 212 191 / .22), transparent 70%), linear-gradient(120deg, #e0f2fe, #ecfeff); }
.welcome h1 { font-size: 30px; }
.welcome-stats { border-radius: 16px; max-width: 820px; }
.welcome-stats > div { background: color-mix(in srgb, var(--panel-solid) 60%, transparent); }
.welcome-stats b em { font-size: 17px; }
.track-tile { border-radius: var(--r); padding: 18px; overflow: hidden; }
.track-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 120px at 100% 0%, rgb(56 189 248 / .14), transparent 70%); opacity: 0; transition: opacity var(--dur); }
.track-tile:hover::before { opacity: 1; }
.track-tile .flags { letter-spacing: 0; gap: 6px; height: 34px; }
.flag-svg { display: inline-block; width: 30px; height: 21px; border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / .25), 0 4px 10px rgb(0 0 0 / .25); flex: none; overflow: hidden; }
.side-nav .flag-svg { width: 18px; height: 13px; border-radius: 2px; }
.side-nav .flag .flag-svg + .flag-svg { margin-left: -9px; box-shadow: -1px 0 0 1px var(--panel-solid); }
.track-tile .flags .flag-svg + .flag-svg { margin-left: -8px; }
.resume-card, .rec, .list { border-radius: var(--r-sm); }
.rec .rec-ic { background: var(--grad); color: #04121f; border-radius: 12px; }
.kpi { background: var(--panel); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); opacity: .8; }
.kpi b { font-family: var(--font-display); font-size: 28px; }
.tile { background: var(--panel); border-radius: var(--r-sm); }
.tile b { font-family: var(--font-display); }

/* ── 9. Hubs, sources, search ───────────────────────────────────────────── */
.src-card { border-radius: var(--r); padding: 18px; }
.src-card.live { background: linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--primary)) 12%, var(--card)), var(--card) 55%); }
.src-badge { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, var(--primary)) 40%, transparent); }
.hub-title .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result { border-radius: var(--r-sm); }
.facet { border-radius: 12px; transition: background var(--dur); } .facet.on { background: var(--primary-soft); color: var(--fg); }
.facet.on em { color: var(--primary); font-weight: 700; }
.bank-tabs a { border-radius: 12px; transition: background var(--dur), color var(--dur); }
.bank-tabs a.on { background: var(--grad); color: #04121f; border-color: transparent; box-shadow: 0 4px 14px rgb(56 189 248 / .25); }
.table-wrap { background: var(--card); border-color: var(--line); border-radius: var(--r-sm); }
.table tbody tr { transition: background var(--dur); } .table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.resume { background: var(--grad); box-shadow: 0 10px 30px rgb(56 189 248 / .35); transition: transform .3s var(--spring); }
.resume:hover { transform: scale(1.06) rotate(-3deg); }
.sv-stage img { max-height: 340px; }
.side-card .stack-viewer .sv-stage { aspect-ratio: auto; height: 220px; }

/* ── 10. Modal / toast / popovers ────────────────────────────────────────── */
.modal-wrap { background: rgb(2 6 23 / .55); backdrop-filter: blur(8px); }
.modal { background: color-mix(in srgb, var(--panel-solid) 92%, transparent); backdrop-filter: blur(20px); border-radius: 22px; animation: modal-in .32s var(--spring); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.modal-head h2 { font-family: var(--font-display); font-size: 19px; }
.toast { border-radius: 14px; background: color-mix(in srgb, #0f1b30 92%, transparent); backdrop-filter: blur(12px); animation: toast-in .35s var(--spring); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.toast-success { box-shadow: 0 0 0 1px rgb(52 211 153 / .4), var(--shadow-lg); } .toast-error { box-shadow: 0 0 0 1px rgb(248 113 113 / .45), var(--shadow-lg); }
.hl-palette { border-radius: 16px; animation: pop .25s var(--spring); }
.float-panel { border-radius: 18px; background: color-mix(in srgb, var(--panel-solid) 94%, transparent); backdrop-filter: blur(18px); animation: modal-in .3s var(--spring); }
.study-drawer { background: color-mix(in srgb, var(--panel-solid) 96%, transparent); backdrop-filter: blur(18px); animation: drawer-in .35s var(--ease); border-left: 1px solid var(--line); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.med-term { color: inherit; font-weight: inherit; text-decoration-color: var(--primary); }
.med-term:hover::after, .med-term:focus::after { animation: pop .2s var(--ease); border-radius: 12px; }

/* ── 11. Exam runner ─────────────────────────────────────────────────────── */
.mr { background: var(--bg); }
.mr-top { background: color-mix(in srgb, var(--panel-solid) 85%, transparent); backdrop-filter: blur(16px); padding: 10px 20px; }
.mr-tools { background: color-mix(in srgb, var(--bg-2) 85%, transparent); }
.tool { border-radius: 10px; transition: background var(--dur), color var(--dur), border-color var(--dur); }
.mr-left-sidebar { background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.side-widget { background: var(--card); border-color: var(--line); border-radius: 16px; }
.q-card { border-radius: 20px; padding: 26px 30px; background: var(--panel); box-shadow: var(--shadow); animation: page-in .35s var(--ease) both; }
.q-number-heading { font-family: var(--font-display); font-size: 20px; }
.mcs { gap: 10px; }
.mc { border-radius: 14px; background: var(--card); border-color: var(--line-2); transition: transform .16s var(--ease), border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.mc:hover { transform: translateX(3px); }
.mc-dot { width: 26px; height: 26px; margin-top: 0; border-width: 1.5px; font: 700 12px var(--font); color: var(--muted); }
.mc.sel { box-shadow: var(--glow); }
.mc.sel .mc-dot { animation: pop .3s var(--spring); }
.mc.right { animation: reveal-ok .55s var(--spring); } .mc.wrong { animation: reveal-bad .45s var(--ease); }
@keyframes reveal-ok { 0% { transform: scale(.98); } 60% { transform: scale(1.01); } }
@keyframes reveal-bad { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.mc-peer { font-variant-numeric: tabular-nums; }
.mc-peer-bar { position: absolute; inset: 0 auto 0 0; z-index: 0; background: linear-gradient(90deg, rgb(56 189 248 / .14), rgb(56 189 248 / .04)); transform-origin: left; animation: fill-in .8s var(--ease) both; pointer-events: none; }
.mc.right .mc-peer-bar { background: linear-gradient(90deg, rgb(52 211 153 / .22), rgb(52 211 153 / .05)); }
.result-box { border-radius: 16px; animation: rise .45s var(--spring) both; }
.explanation { border-radius: 20px; animation: rise .5s var(--ease) both; }
.objective { border-radius: 14px; }
.mr-foot { background: color-mix(in srgb, var(--panel-solid) 88%, transparent); backdrop-filter: blur(16px); }
.qn { border-radius: 11px; transition: transform .15s var(--ease); } .qn:hover:not(:disabled) { transform: translateY(-2px); }
.pause-card { border-radius: 24px; animation: modal-in .35s var(--spring); }
.insight-box { margin-top: 18px; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--card); animation: rise .45s var(--ease) both; }
.insight-box header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font: 700 12px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--primary-2); background: linear-gradient(90deg, rgb(56 189 248 / .12), rgb(167 139 250 / .1)); border-bottom: 1px solid var(--line); }
.insight-box .ib-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.insight-box .ib-cols > div { background: var(--card); padding: 14px 18px; font-size: 13.5px; line-height: 1.6; }
.insight-box .ib-cols b { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 768px) { .insight-box .ib-cols { grid-template-columns: 1fr; } }
.bm-tag-pill { color: var(--fg-2); white-space: nowrap; }
.multi-bookmarks-bar { flex-wrap: wrap; row-gap: 6px; }
.mr.book .q-number-heading { color: #12355b; }
.mr.book .q-top-row { border-bottom-color: #dde4ee; }
.mr.book .multi-bookmarks-bar { background: #f1f5fa; border-color: #dde4ee; }
.mr.book .bm-tag-pill { background: #fff; border-color: #c9d5e3; color: #33425a; }
.mr.book .q-card { backdrop-filter: none; }

/* ── 12. Coach, cases, rooms ─────────────────────────────────────────────── */
.coach-shell { border-radius: 24px; background: var(--panel); backdrop-filter: blur(16px); }
.coach-brand-icon, .coach-empty-icon { background: var(--grad); }
.coach-message { animation: rise .35s var(--ease) both; }
.from-user .coach-bubble { background: linear-gradient(135deg, rgb(56 189 248 / .18), rgb(129 140 248 / .14)); }
.msg { animation: rise .3s var(--ease) both; border-radius: 14px; }
.osce-clock b { font-family: var(--font-display); }

/* ── 13. Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mobile-brand { display: inline-flex; align-items: center; gap: 8px; font: 800 17px var(--font-display); color: var(--fg); text-decoration: none !important; margin-right: auto; }
  .mobile-brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .side { background: var(--panel-solid); }
  body.side-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 79; background: rgb(2 6 23 / .5); backdrop-filter: blur(3px); animation: fade .2s; }
  .page { padding: 16px 14px 90px; }
  .welcome { padding: 22px 18px; } .welcome h1 { font-size: 24px; }
}
@media (max-width: 520px) { .track-tiles { grid-template-columns: 1fr; } .auth-hero h1 { font-size: 28px; } }

/* Account → "Hide Bug Button" */
.hide-bug #m-bug, .hide-bug #t-bug { display: none !important; }

/* ── 15. Readability fixes (review V132–V144, V189) ─────────────────────── */
[data-theme="light"] .tag.t-free { color: #92400e; }
/* strike-out control reachable by keyboard and visible on touch screens */
.mc:focus-within .strike-btn, .strike-btn:focus-visible { opacity: 1; }
.strike-btn:focus-visible { outline-offset: -3px; }
@media (hover: none) { .strike-btn { opacity: .6; } }
/* omitted result keeps a status colour */
.result-box.omitted { border-color: var(--warn); background: var(--warn-soft); }
/* book style: the white card gets its own light palette, whatever the app theme */
.mr.book .stem table:not(.q-table) th, .mr.book .expl-body table:not(.q-table) th { background: #f1f5fa; color: #12355b; border-color: #c9d5e3; }
.mr.book .stem table:not(.q-table) td, .mr.book .expl-body table:not(.q-table) td { border-color: #dde4ee; }
.mr.book .result-box.omitted { background: #fff8e6; border-color: #b7791f; }
.mr.book .result-box.omitted b { color: #8a5a00; }
.mr.book .q-fig figcaption, .mr.book .bm-heading { color: #5a6675; }
.mr.book .tfm tr.ok td, .mr.book .match tr.ok td, .mr.book .ord li.ok { background: #eaf6ef; border-color: #2e8b57; }
.mr.book .tfm tr.bad td, .mr.book .match tr.bad td, .mr.book .ord li.bad { background: #fdeeee; border-color: #c0392b; }
.mr.book .blank-in.ok { background: #eaf6ef; border-bottom-color: #2e8b57; }
.mr.book .blank-in.bad { background: #fdeeee; border-bottom-color: #c0392b; }
.ord li.ok::after { content: " ✓"; color: #2e8b57; font-weight: 700; }
.ord li.bad::after { content: " ✗"; color: #c0392b; font-weight: 700; }
.mr.book .bm-tag-pill.active { color: #fff; }
/* classic blue (Prometric) skin: its bars and toolbar carry their own token set, so nothing inherits an invisible colour */
.mr.prometric .mr-top, .mr.prometric .mr-foot { --panel: #06467d; --panel-solid: #06467d; --card: #0a3a66; --card-2: #0e4c84; --fg: #fff; --fg-2: #dbe7f3; --muted: #b5c9de; --line: #2a5d8f; --line-2: #3a6fa3; color: var(--fg); }
.mr.prometric .mr-top { background: #06467d; }
.mr-timer { color: var(--fg); }
.mr.prometric .mr-main { background: #fff; --fg: #0f172a; --fg-2: #334155; --muted: #64748b; --card: #f6f8fc; --card-2: #eef3fa; --line: #dfe6f0; --line-2: #c9d4e4; color: var(--fg); }
.mr.prometric .mr-tools { background: #d8e7f4; border-color: #9ebbd5; color-scheme: light; --fg: #0b2e52; --fg-2: #163a5f; --muted: #3d5a78; --card: #fff; --card-2: #c4d9ec; --line: #9ebbd5;
  --primary: #004b8d; --primary-2: #003861; --primary-soft: rgb(0 75 141 / .12); --amber: #b45309; --warn-soft: rgb(180 83 9 / .14); color: var(--fg); }
/* phones: the exam header wraps instead of pushing Flag / Map / avatar off-screen; tool labels stay for screen readers */
.mr { overflow-x: clip; }
.tool { position: relative; }
@media (max-width: 720px) {
  .mr-top { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
  .mr-top .prometric-skin-toggle { display: none; }
  .mr-sync { font-size: 0; padding: 0 !important; width: 10px; height: 10px; border-radius: 50%; background: currentColor !important; flex: none; }
  .mr-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
  .mr-timer { padding: 4px 4px 4px 8px; gap: 4px; }
  .tool > span { display: inline !important; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ── 14. Motion safety ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before, .welcome::after, .auth-hero::before, .auth-hero::after { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}