/* MedGSerra Quests — shared product design tokens and component finish.
   Loaded by the static production app and imported by the React app. */
:root {
  color-scheme: light;
  --brand-navy: #102b5c;
  --brand-blue: #1769d2;
  --brand-blue-strong: #0b55bb;
  --brand-sky: #e8f2ff;
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-alt: #f6f9fe;
  --text: #152744;
  --muted: #60718d;
  --border: #dce5f1;
  --primary: var(--brand-blue);
  --primary-dark: var(--brand-blue-strong);
  --primary-soft: var(--brand-sky);
  --good: #16835d;
  --good-bg: #e7f6ef;
  --warn: #94620b;
  --warn-bg: #fff4d8;
  --bad: #b23d4a;
  --bad-bg: #ffebed;
  --shadow: 0 8px 24px rgba(16, 43, 92, .055);
  --shadow-raised: 0 16px 40px rgba(16, 43, 92, .105);
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --control-height: 44px;
  --space-unit: 4px;
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --input: var(--border);
  --muted-foreground: var(--muted);
  --secondary: var(--surface-alt);
  --accent: var(--primary-soft);
  --ring: var(--primary);
  --sidebar: var(--surface);
  --card-glow: var(--shadow);
}

/* A translated, closed mobile drawer must not enlarge the document's scroll
   width. Keep horizontal clipping on the page while preserving vertical scroll. */
html, body { max-width: 100%; overflow-x: clip; }

[data-theme="dark"], .dark {
  color-scheme: dark;
  --brand-navy: #07152b;
  --brand-blue: #62a7ff;
  --brand-blue-strong: #3989ef;
  --brand-sky: #173761;
  --bg: #09172b;
  --surface: #10223d;
  --surface-alt: #152c4c;
  --text: #eff5ff;
  --muted: #a8bad3;
  --border: #294362;
  --primary: var(--brand-blue);
  --primary-dark: var(--brand-blue-strong);
  --primary-soft: var(--brand-sky);
  --good: #83ddb3;
  --good-bg: #123b32;
  --warn: #f2cd73;
  --warn-bg: #423716;
  --bad: #ff9ca5;
  --bad-bg: #482632;
  --shadow: 0 10px 28px rgba(0, 0, 0, .18);
  --shadow-raised: 0 18px 44px rgba(0, 0, 0, .28);
  --background: var(--bg);
  --foreground: var(--text);
  --card: var(--surface);
  --card-foreground: var(--text);
  --input: var(--border);
  --muted-foreground: var(--muted);
  --secondary: var(--surface-alt);
  --accent: var(--primary-soft);
  --ring: var(--primary);
  --sidebar: #0c1d35;
  --card-glow: var(--shadow);
}

html { scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--text); text-wrap: balance; }
h1 { font-weight: 760; letter-spacing: -.035em; }
h2, h3 { letter-spacing: -.02em; }
p { text-wrap: pretty; }
a { text-underline-offset: 3px; }

:where(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 43%, transparent);
  outline-offset: 2px;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
:where(input, select, textarea)::placeholder { color: var(--muted); opacity: .78; }
:where(input, select, textarea):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
textarea { line-height: 1.6; }

:where(.button, [data-slot="button"]) {
  min-height: 42px;
  border-radius: var(--radius-sm);
  font-weight: 680;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
:where(.button, [data-slot="button"]):not(:disabled):hover { box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 15%, transparent); }
:where(.button, [data-slot="button"]):active { transform: translateY(1px); }
:where(.button.secondary, [data-variant="secondary"]) { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 18%, var(--border)); color: var(--primary); }
:where(.button.ghost, [data-variant="ghost"]) { color: var(--muted); }
:where(.button.ghost, [data-variant="ghost"]):hover { color: var(--primary); background: var(--primary-soft); }

:where(.card, .panel, .metric-card, .dashboard-mini, .dashboard-panel, .library-root-card, .subject-folder, .question-card, .auth-card, .auth-hero, .history-item, .exam-card) {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  box-shadow: var(--shadow);
}
:where(.card, .panel, .metric-card, .dashboard-mini, .dashboard-panel, .library-root-card, .subject-folder, .question-card, .auth-card, .auth-hero, .history-item, .exam-card) :where(small, .muted, .meta) { color: var(--muted); }
:where(.card, .exam-card, .subject-folder, .library-root-card, .dashboard-mini, .history-item) { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease; }
:where(.card, .exam-card, .subject-folder, .library-root-card, .dashboard-mini, .history-item):hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
:where(.card, .exam-card, .subject-folder, .library-root-card, .dashboard-mini, .history-item):is(a, button):hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }

:where(.badge, .status-badge, .attempt-badge, .subject-pill) { border-radius: 999px; font-weight: 680; letter-spacing: .005em; }
:where(.status-ready, .badge-ready, .attempt-badge.success) { color: var(--good); background: var(--good-bg); }
:where(.status-review, .badge-review, .attempt-badge.pending) { color: var(--warn); background: var(--warn-bg); }
:where(.status-failed, .badge-failed, .attempt-badge.danger) { color: var(--bad); background: var(--bad-bg); }

:where(.notice, .feedback, .empty-state) { border-radius: var(--radius-md); }
:where(.modal, .dialog, [role="dialog"]) { border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); }
:where(.toast, [data-sonner-toaster]) { font-family: inherit; }

/* Shared finish for the published library, study flow and dashboard. */
.top { border-color: var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.brand-mark { flex: 0 0 auto; }
.logo { color: var(--brand-navy); }
[data-theme="dark"] .logo, .dark .logo { color: var(--text); }
.top-nav button { border-radius: 11px; transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
.top-nav button.active { color: var(--primary); background: var(--primary-soft); }
.nav-link { color: var(--muted); border-radius: 11px; transition: color .16s ease, background-color .16s ease; }
.nav-link:hover { color: var(--primary); background: var(--primary-soft); }
.nav-link.active, .dark .nav-link.active { color: var(--primary); background: var(--primary-soft); }
.nav-link.active { font-weight: 700; }
.sidebar-upload { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: var(--radius-sm); }
.welcome-strip, .dark .welcome-strip { background: linear-gradient(110deg, color-mix(in srgb, var(--surface) 75%, var(--primary-soft)), var(--surface-alt)); border-color: var(--border); }
.welcome-icon, .stat-icon.green, .stat-icon.blue, .stat-icon.purple, .stat-icon.orange { color: var(--primary); background: var(--primary-soft); }
.welcome-strip h3, .dark .welcome-strip h3 { color: var(--brand-navy); }
[data-theme="dark"] .welcome-strip h3, .dark .welcome-strip h3 { color: var(--text); }
.chart-legend i, .progress-track > div { background: var(--primary); }
.demo-banner, .dark .demo-banner { color: var(--muted); background: var(--surface-alt); border-color: var(--border); }
.demo-banner i { background: var(--primary); }
.toast { background: var(--brand-navy); }
.theme, .menu-toggle { border-color: var(--border); border-radius: 11px; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.theme:hover, .menu-toggle:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.wrap { width: min(100%, 1320px); }
.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.card, .panel { padding: clamp(17px, 2vw, 22px); }
.card h3 { line-height: 1.42; }
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: var(--shadow-raised); }
.exam-head { align-items: center; margin: 0 0 24px; padding-top: 4px; }
.exam-head h1 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.18; }
.exam-head p { margin: 7px 0 0; }
.question-card { max-width: 1080px; margin-inline: auto; }
.question { max-width: 78ch; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.78; }
.option { min-height: 58px; border-radius: 13px; }
.option:not(:disabled):hover { transform: translateY(-1px); }
.nav { padding-top: 4px; }
.dashboard-shell { gap: clamp(16px, 2vw, 22px); }
.dashboard-welcome { padding: 2px 1px 4px; }
.dashboard-welcome h1 { line-height: 1.12; }
.dashboard-quote { color: var(--muted); font-weight: 600; }
.metric-grid { gap: 14px; }
.metric-card { border-radius: var(--radius-md); padding: 18px 20px; }
.metric-card b { color: var(--brand-navy); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .metric-card b, .dark .metric-card b { color: var(--text); }
.dashboard-columns { gap: 16px; align-items: start; }
.dashboard-panel { padding: clamp(17px, 2vw, 22px); }
.dashboard-panel-head { align-items: center; gap: 10px; }
.continue-premium { border: 1px solid var(--border); border-radius: 13px; background: var(--surface-alt); padding: 15px; }
.continue-icon { border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.dashboard-row { min-width: 0; }
.dashboard-row > div { min-width: 0; }
.dashboard-row strong { overflow-wrap: anywhere; }
.subject-progress-row { gap: 12px; }
.dashboard-mini-grid { gap: 12px; }
.dashboard-mini { text-align: left; min-height: 132px; }
.dashboard-mini span { color: var(--primary); }
.top-nav button { letter-spacing: -.01em; }
.top-nav button::before { flex: 0 0 22px; }
.top-nav button.active { box-shadow: inset 3px 0 0 var(--primary); }
.sidebar-user { border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.header-status { font-variant-numeric: tabular-nums; }
.library-root-card, .subject-folder { min-height: 120px; padding: 19px; }
.library-root-card:hover, .subject-folder:hover { background: color-mix(in srgb, var(--surface) 90%, var(--primary-soft)); }
.subject-folder.active { border-color: var(--primary); background: var(--primary-soft); }
.attempt-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 27px; padding: 5px 10px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; font-size: 11px; line-height: 1.2; font-weight: 720; }
.attempt-badge.neutral { color: var(--muted); background: var(--surface-alt); }
.attempt-badge.progress { color: var(--primary); background: var(--primary-soft); }
.exam-tools { gap: 8px; }
.timer, .progress { border-radius: 999px; }
.sidebar-user { background: color-mix(in srgb, var(--surface-alt) 74%, transparent); }
.auth-hero { box-shadow: var(--shadow-raised); }
.auth-card { max-width: 500px; }
.finish-review-backdrop, .modal-backdrop { backdrop-filter: blur(6px); }
.empty-state { display: grid; justify-items: start; gap: 8px; padding: 24px; border: 1px dashed var(--border); background: color-mix(in srgb, var(--surface) 75%, var(--surface-alt)); }
.empty-state > :where(h2, h3, p) { margin: 0; }
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-alt); }
.skeleton::after { position: absolute; inset: 0; content: ""; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 10%, transparent), transparent); animation: mq-shimmer 1.35s infinite; }
@keyframes mq-shimmer { to { transform: translateX(100%); } }

@media (min-width: 681px) {
  .top { background: var(--sidebar); box-shadow: 8px 0 28px rgba(16, 43, 92, .035); }
  [data-theme="dark"] .top, .dark .top { box-shadow: 8px 0 28px rgba(0, 0, 0, .12); }
}
@media (max-width: 980px) {
  .dashboard-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .wrap { padding: 22px 16px max(40px, env(safe-area-inset-bottom)); }
  .exam-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .exam-tools { justify-content: flex-start; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-mini { min-height: 110px; }
}
@media (max-width: 390px) {
  .wrap { padding-inline: 12px; }
  .metric-grid { gap: 9px; }
  .metric-card { padding: 14px; }
  .dashboard-panel-head { align-items: flex-start; flex-direction: column; }
}

::selection { background: color-mix(in srgb, var(--primary) 25%, transparent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 680px) {
  :root { --control-height: 46px; }
  :where(.button, [data-slot="button"]) { min-height: 44px; }
  .wrap { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
}
.question-figure{margin:0 0 24px;max-width:100%}.question-figure-open{display:block;max-width:100%;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:zoom-in}.question-figure-open img{display:block;max-width:100%;height:auto;object-fit:contain}.question-figure figcaption{margin-top:7px;color:var(--muted);font-size:12px}.question-figure-fallback{margin-top:12px}.pdf-reference{margin:18px 0 0}.pdf-reference .button{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap}.figure-lightbox{max-width:min(96vw,1200px);max-height:92dvh;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text)}.figure-lightbox::backdrop{background:rgba(2,10,24,.78)}.figure-lightbox img{display:block;max-width:100%;max-height:calc(92dvh - 90px);object-fit:contain}.figure-lightbox .button{margin-top:12px}.prompt-fallback{width:min(680px,calc(100vw - 24px));max-height:90dvh;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text)}.prompt-fallback::backdrop{background:rgba(2,10,24,.7)}.prompt-fallback textarea{width:100%;min-height:220px;margin:12px 0;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt);color:var(--text);resize:vertical}.prompt-fallback .result-actions{justify-content:flex-end}