/* ============================================================
   USMLE Wise — App Theme Layer
   Design tokens + components + dashboard chrome overrides
   Load after main.css on dashboard pages; standalone on tutor.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --uw-blue-50:  #eef0fa;
  --uw-blue-100: #d8ddf2;
  --uw-blue-200: #b0b9e4;
  --uw-blue-300: #818dd0;
  --uw-blue-400: #5260b5;
  --uw-blue-500: #2c3386;
  --uw-blue-600: #262c75;
  --uw-blue-700: #1f2461;
  --uw-blue-800: #181c4d;
  --uw-blue-900: #0f1233;

  --uw-red-50:  #fdecec;
  --uw-red-100: #fad3d3;
  --uw-red-200: #f4a5a6;
  --uw-red-300: #ec7273;
  --uw-red-400: #e94849;
  --uw-red-500: #e32124;
  --uw-red-600: #c61b1e;
  --uw-red-700: #a01517;
  --uw-red-800: #790f11;

  --uw-ink-50:  #fafafb;
  --uw-ink-75:  #f5f5f7;
  --uw-ink-100: #ececef;
  --uw-ink-200: #dcdce2;
  --uw-ink-300: #c2c3cb;
  --uw-ink-400: #9a9ca8;
  --uw-ink-500: #6d7080;
  --uw-ink-600: #4a4d5c;
  --uw-ink-700: #32343f;
  --uw-ink-800: #20222b;
  --uw-ink-900: #14151c;

  --uw-success-50:  #e6f5ee;
  --uw-success-300: #6fe0a3;
  --uw-success-400: #4fc78a;
  --uw-success-500: #2f8a5a;
  --uw-success-700: #1d5e3c;
  --uw-warning-50:  #fef5e3;
  --uw-warning-500: #c98a14;
  --uw-warning-700: #8a5e0a;
  --uw-info-50:     #e8effb;
  --uw-info-500:    #3a5fc0;
  --uw-info-700:    #25448f;

  --uw-danger-50:   #fef2f2;
  --uw-danger-100:  #fee2e2;
  --uw-danger-500:  #b91c1c;
  --uw-danger-700:  #7f1d1d;

  --uw-bg:           #fafaf9;
  --uw-surface:      #ffffff;
  --uw-surface-sunk: #f4f4f3;
  --uw-border:       #e6e6e2;
  --uw-border-strong:#d4d4cf;
  --uw-on-brand:     #ffffff;

  --font-sans:    "Geist", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 21, 28, 0.05);
  --shadow-sm: 0 1px 2px rgba(20,21,28,.05), 0 1px 3px rgba(20,21,28,.06);
  --shadow-md: 0 2px 4px rgba(20,21,28,.04), 0 6px 14px rgba(20,21,28,.06);
  --shadow-lg: 0 4px 8px rgba(20,21,28,.04), 0 14px 28px rgba(20,21,28,.08);
  --shadow-blue: 0 8px 24px rgba(44, 51, 134, 0.18);
  --shadow-red:  0 8px 24px rgba(227, 33, 36, 0.20);
  --shadow-xl: 0 8px 16px rgba(20,21,28,.06), 0 28px 56px rgba(20,21,28,.10);

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --sidebar-w: 268px;

  /* Legacy aliases for pages still using --uw-primary */
  --uw-primary: var(--uw-blue-500);
  --uw-accent: var(--uw-red-500);
  --uw-ink: var(--uw-ink-900);
}

[data-theme="dark"] {
  --uw-bg:           #12131a;
  --uw-surface:      #1b1c27;
  --uw-surface-sunk: #0e0f17;
  --uw-border:       rgba(255,255,255,0.08);
  --uw-border-strong:rgba(255,255,255,0.14);

  --uw-ink-900: #ecedf5;
  --uw-ink-800: #d0d2de;
  --uw-ink-700: #acafc0;
  --uw-ink-600: #878a9a;
  --uw-ink-500: #636676;
  --uw-ink-400: #474a58;
  --uw-ink-300: #333542;
  --uw-ink-200: #272934;
  --uw-ink-100: #1e2030;
  --uw-ink-75:  #191b28;
  --uw-ink-50:  #141624;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 14px 28px rgba(0,0,0,.55);
  --shadow-blue: 0 8px 24px rgba(44,51,134,0.45);
  --shadow-red:  0 8px 24px rgba(227,33,36,0.45);
  --shadow-xl: 0 8px 16px rgba(0,0,0,.45), 0 28px 56px rgba(0,0,0,.65);
}

/* ---------- 2. THEME-ENABLED BASE ---------- */
body.uw-theme {
  font-family: var(--font-sans);
  color: var(--uw-ink-800);
  background: var(--uw-bg);
  -webkit-font-smoothing: antialiased;
}

body.uw-theme ::selection {
  background: var(--uw-blue-100);
  color: var(--uw-blue-800);
}

[data-theme="dark"] body.uw-theme ::selection {
  background: var(--uw-blue-800);
  color: #fff;
}

/* ---------- 3. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast), background var(--dur-fast),
              box-shadow var(--dur-med), border-color var(--dur-fast);
  text-decoration: none;
  white-space: nowrap;
  /* main.css forces `text-transform: capitalize` on every .btn, which renders
     "Create Account" on app pages while the landing page says "Create account".
     Button labels are written in sentence case; let the copy decide its own
     capitalisation. */
  text-transform: none;
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--uw-blue-300); outline-offset: 2px; }

.btn--primary {
  background: var(--uw-red-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--uw-red-600); box-shadow: var(--shadow-red); }

.btn--secondary {
  background: var(--uw-blue-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { background: var(--uw-blue-600); box-shadow: var(--shadow-blue); }

/* The `!important` on the next four variants is deliberate, not sloppiness.
   `assets/css/main.css` (the vendor template) ships
       .btn { color: hsl(var(--white)) !important; }
   which silently paints every one of our light-background buttons white-on-white
   on any page that loads it — login, signup, select-exam and the dashboard. An
   `!important` can only be beaten by another `!important`, so these four carry
   one. Solid variants (primary/secondary) genuinely want white text, so they are
   left alone. Remove these only together with that rule in main.css. */

.btn--outline {
  background: var(--uw-surface);
  color: var(--uw-ink-800) !important;
  border-color: var(--uw-border-strong);
}
.btn--outline:hover { border-color: var(--uw-ink-700); background: var(--uw-ink-75); }

.btn--ghost {
  background: transparent;
  color: var(--uw-ink-700) !important;
}
.btn--ghost:hover { background: var(--uw-ink-75); color: var(--uw-ink-900) !important; }

/* Tonal secondary: a real filled surface, so it reads as a button next to a
   solid primary instead of dissolving into the bar behind it — but tinted, not
   saturated, so it never competes with the primary action. */
.btn--soft {
  background: var(--uw-blue-50);
  color: var(--uw-blue-600) !important;
  border-color: transparent;
}
.btn--soft:hover {
  background: var(--uw-blue-100);
  color: var(--uw-blue-700) !important;
}

[data-theme="dark"] .btn--soft {
  /* blue-50 is a near-white and is not re-mapped for dark, so tint from the
     light end of the blue ramp instead of using the raw token. The label is a
     step lighter than blue-300: against the composited tint (#2b2e42) blue-300
     measures 4.2:1, just under AA for 13px. This clears it at 6.5:1. */
  background: rgba(129, 141, 208, 0.16);
  color: #aab3e2 !important;
}
[data-theme="dark"] .btn--soft:hover {
  background: rgba(129, 141, 208, 0.26);
  color: #c4cbef !important;
}

.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--xs { padding: 6px 10px; font-size: 12px; }
.btn--icon { padding: 10px; aspect-ratio: 1; }

.btn--link {
  background: transparent;
  color: var(--uw-blue-500);
  padding: 6px 4px;
  text-decoration: none;
}
.btn--link:hover { color: var(--uw-blue-700); text-decoration: underline; }

.btn--lg { padding: 14px 24px; font-size: 15px; }

.btn:disabled,
.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ---------- 4. CARDS ---------- */
.uw-card {
  background: var(--uw-surface);
  border: 1px solid var(--uw-border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
}

.uw-card__title {
  font-weight: 600;
  font-size: 16px;
  color: var(--uw-ink-900);
  margin: 0 0 6px;
}

.uw-card__body {
  font-size: 13.5px;
  color: var(--uw-ink-600);
  line-height: var(--lh-base);
}

/* ---------- 5. BADGES ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}

.badge--blue   { background: var(--uw-blue-50); color: var(--uw-blue-700); }
.badge--red    { background: var(--uw-red-50); color: var(--uw-red-700); }
.badge--green  { background: var(--uw-success-50); color: var(--uw-success-700); }
.badge--amber  { background: var(--uw-warning-50); color: var(--uw-warning-700); }
.badge--neutral{ background: var(--uw-ink-75); color: var(--uw-ink-700); }

[data-theme="dark"] .badge--blue   { background: rgba(44,51,134,0.3); color: var(--uw-blue-300); }
[data-theme="dark"] .badge--red    { background: rgba(227,33,36,0.2); color: var(--uw-red-300); }
[data-theme="dark"] .badge--green  { background: rgba(47,138,90,0.2); color: var(--uw-success-300); }
[data-theme="dark"] .badge--amber  { background: rgba(201,138,20,0.2); color: #f0be55; }

/* ---------- 6. CALLOUTS ---------- */
.callout {
  border: 1.5px solid var(--uw-blue-100);
  background: var(--uw-blue-50);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  font-size: 13.5px;
  color: var(--uw-ink-800);
}

.callout--red     { border-color: var(--uw-red-100); background: var(--uw-red-50); }
.callout--amber   { border-color: #f3d98a; background: var(--uw-warning-50); }
.callout--success { border-color: #8ecfb0; background: var(--uw-success-50); }

.callout b {
  color: var(--uw-ink-900);
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

[data-theme="dark"] .callout          { background: rgba(44,51,134,0.18); border-color: rgba(44,51,134,0.35); }
[data-theme="dark"] .callout--red     { background: rgba(227,33,36,0.14); border-color: rgba(227,33,36,0.3); }
[data-theme="dark"] .callout--amber   { background: rgba(201,138,20,0.14); border-color: rgba(201,138,20,0.3); }
[data-theme="dark"] .callout--success { background: rgba(47,138,90,0.14); border-color: rgba(111,224,163,0.25); }

/* ---------- 7. FORMS ---------- */
.input, .textarea, .select {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 11px 14px;
  background: var(--uw-surface);
  border: 1px solid var(--uw-border-strong);
  border-radius: var(--r-md);
  color: var(--uw-ink-900);
  width: 100%;
  transition: border var(--dur-fast), box-shadow var(--dur-fast);
}

/* Stated rather than left to the browser default, which differs per engine and
   is not guaranteed to clear 4.5:1. ink-500 is 4.9:1 on the light surface;
   dark mode needs a lighter step to stay legible on the sunk surface. */
.input::placeholder, .textarea::placeholder { color: var(--uw-ink-500); opacity: 1; }
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder { color: var(--uw-ink-600); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--uw-blue-500);
  box-shadow: 0 0 0 3px var(--uw-blue-100);
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus,
[data-theme="dark"] .select:focus {
  box-shadow: 0 0 0 3px rgba(44,51,134,0.35);
}

/* ---------- 8. TABS ---------- */
.tabs {
  display: inline-flex;
  gap: 0;
  border-bottom: 1px solid var(--uw-border);
}

.tabs__btn {
  font-family: var(--font-sans);
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--uw-ink-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast);
}

@media (hover: hover) {
  .tabs__btn:hover { color: var(--uw-ink-800); }
}
.tabs__btn.is-active {
  color: var(--uw-ink-900);
  font-weight: 600;
  border-bottom-color: var(--uw-red-500);
}

/* ---------- 9. QBANK ANSWERS ---------- */
.qbank-answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--uw-border);
  border-radius: var(--r-md);
  background: var(--uw-surface);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

@media (hover: hover) {
  .qbank-answer:hover { border-color: var(--uw-blue-300); background: var(--uw-blue-50); }
}

.qbank-answer:active:not(.is-disabled) { border-color: var(--uw-blue-300); }
.qbank-answer.is-selected { border-color: var(--uw-blue-500); background: var(--uw-blue-50); }

.qbank-answer__letter {
  font-weight: 700;
  color: var(--uw-blue-700);
  min-width: 20px;
}

.qbank-answer--correct {
  border-color: var(--uw-success-500);
  background: var(--uw-success-50);
}

.qbank-answer--incorrect {
  border-color: var(--uw-red-400);
  background: var(--uw-red-50);
}

.qbank-answer--correct .qbank-answer__letter { color: var(--uw-success-700); }
.qbank-answer--incorrect .qbank-answer__letter { color: var(--uw-red-700); }

[data-theme="dark"] .qbank-answer--correct {
  background: rgba(47,138,90,0.14);
  border-color: rgba(111,224,163,0.35);
}

[data-theme="dark"] .qbank-answer--incorrect {
  background: rgba(227,33,36,0.14);
  border-color: rgba(227,33,36,0.35);
}

/* ---------- 10. THEME TOGGLE ---------- */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--uw-border-strong);
  background: var(--uw-surface);
  color: var(--uw-ink-500);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.theme-toggle:hover {
  background: var(--uw-ink-75);
  color: var(--uw-ink-800);
}

.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle__sun  { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: block; }

/* ---------- 11. DASHBOARD CHROME OVERRIDES ---------- */
body.uw-theme .sidebar {
  background: var(--uw-surface);
  border-right: 1px solid var(--uw-border);
}

body.uw-theme .sidebar__logo {
  background: var(--uw-surface) !important;
  border-bottom: 1px solid var(--uw-border);
}

body.uw-theme .sidebar-menu__link {
  border-radius: var(--r-sm);
  color: var(--uw-ink-600);
  transition: background var(--dur-fast), color var(--dur-fast);
}

body.uw-theme .sidebar-menu__link:hover,
body.uw-theme .sidebar-menu__item.activePage .sidebar-menu__link {
  background: var(--uw-blue-50);
  color: var(--uw-blue-700);
}

body.uw-theme .sidebar-menu__link .icon {
  color: var(--uw-ink-500);
}

body.uw-theme .sidebar-menu__item.activePage .sidebar-menu__link .icon {
  color: var(--uw-blue-500);
}

body.uw-theme .top-navbar {
  background: var(--uw-surface);
  border-bottom: 1px solid var(--uw-border);
}

body.uw-theme .dashboard-main-wrapper {
  background: var(--uw-bg);
}

body.uw-theme .dashboard-body {
  color: var(--uw-ink-800);
}

body.uw-theme .form-control {
  background: var(--uw-surface);
  border-color: var(--uw-border-strong);
  color: var(--uw-ink-900);
}

body.uw-theme .card {
  background: var(--uw-surface);
  border-color: var(--uw-border);
}

[data-theme="dark"] body.uw-theme .sidebar-menu__link:hover,
[data-theme="dark"] body.uw-theme .sidebar-menu__item.activePage .sidebar-menu__link {
  background: rgba(44,51,134,0.3);
  color: var(--uw-blue-300);
}

/* Sidebar brand lockup when theme is active */
.uw-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
}

.uw-sidebar-brand img { width: 32px; height: 32px; }

.uw-sidebar-brand__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--uw-ink-900);
  line-height: 1.1;
}

.uw-sidebar-brand__sub {
  font-size: 10px;
  color: var(--uw-ink-500);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- 12. LEGACY TEMPLATE COLOR REMAP ---------- */
body.uw-theme {
  --main-h: 235;
  --main-s: 50%;
  --main-l: 35%;
  --main-two-h: 359;
  --main-two-s: 77%;
  --main-two-l: 51%;
}

body.uw-theme h1,
body.uw-theme h2,
body.uw-theme h3,
body.uw-theme h4,
body.uw-theme h5,
body.uw-theme h6 {
  font-family: var(--font-sans);
  color: var(--uw-ink-900);
  letter-spacing: -0.01em;
}

body.uw-theme .dashboard-body h3 {
  font-weight: 600;
  font-size: var(--fs-xl);
}

/* ---------- 13. LEGACY BUTTON BRIDGES ---------- */
.uw-btn-primary,
body.uw-theme .btn-main,
body.uw-theme .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--uw-red-500) !important;
  border-color: var(--uw-red-500) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-med);
}

.uw-btn-primary:hover,
body.uw-theme .btn-main:hover,
body.uw-theme .btn-primary:hover {
  background: var(--uw-red-600) !important;
  border-color: var(--uw-red-600) !important;
  box-shadow: var(--shadow-red);
}

.uw-btn-soft,
body.uw-theme .btn-outline-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--uw-surface) !important;
  border: 1px solid var(--uw-border-strong) !important;
  color: var(--uw-ink-800) !important;
  border-radius: var(--r-md) !important;
  font-weight: 500;
  padding: 12px 20px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.uw-btn-soft:hover,
body.uw-theme .btn-outline-main:hover {
  background: var(--uw-ink-75) !important;
  border-color: var(--uw-ink-400) !important;
  color: var(--uw-ink-900) !important;
}

.uw-btn-secondary {
  background: var(--uw-blue-500) !important;
  border-color: var(--uw-blue-500) !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
}

.uw-btn-secondary:hover {
  background: var(--uw-blue-600) !important;
  box-shadow: var(--shadow-blue);
}

/* ---------- 14. PAGE HEADER ---------- */
.uw-page-header {
  background: var(--uw-surface);
  border: 1px solid var(--uw-border);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}

.uw-page-header h3 {
  margin: 0 0 4px;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--uw-ink-900);
}

.uw-page-header .text-gray-600,
.uw-page-header .text-13 {
  color: var(--uw-ink-500) !important;
  font-size: var(--fs-sm);
}

/* ---------- 15. BREADCRUMBS ---------- */
body.uw-theme .breadcrumb ul { list-style: none; padding: 0; margin: 0; }

body.uw-theme .breadcrumb a {
  color: var(--uw-ink-500);
  font-size: var(--fs-sm);
  text-decoration: none;
}

body.uw-theme .breadcrumb a:hover { color: var(--uw-ink-800); }

body.uw-theme .breadcrumb [aria-current="page"],
body.uw-theme .breadcrumb .text-main-600 {
  color: var(--uw-blue-600) !important;
  font-weight: 500;
}

/* ---------- 16. SIDEBAR NAV GROUPS ---------- */
body.uw-theme .sidebar-menu__group-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uw-ink-500);
  font-weight: 600;
  padding: var(--space-5) var(--space-5) var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--uw-border);
}

body.uw-theme .sidebar-close-btn {
  background: var(--uw-surface);
  border-color: var(--uw-border-strong) !important;
  color: var(--uw-ink-500) !important;
}

body.uw-theme .sidebar-close-btn:hover {
  background: var(--uw-red-500) !important;
  border-color: var(--uw-red-500) !important;
  color: #fff !important;
}

/* ---------- 17. TOPBAR SEARCH & PROFILE ---------- */
body.uw-theme .top-navbar .form-control {
  background: var(--uw-ink-75);
  border-color: transparent;
  border-radius: var(--r-pill);
  color: var(--uw-ink-900);
}

body.uw-theme .top-navbar .form-control:focus {
  border-color: var(--uw-blue-500);
  box-shadow: 0 0 0 3px var(--uw-blue-100);
  background: var(--uw-surface);
}

body.uw-theme .top-navbar .input-icon { color: var(--uw-ink-400); }

body.uw-theme .users {
  background: var(--uw-surface);
  border-color: var(--uw-border) !important;
}

.uw-profile-menu {
  min-width: 320px;
  border: 1px solid var(--uw-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  background: var(--uw-surface);
}

.uw-profile-menu__head {
  background: linear-gradient(135deg, var(--uw-blue-500), var(--uw-blue-700));
  padding: var(--space-5);
  color: #fff;
}

.uw-profile-menu__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.uw-profile-menu__name {
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uw-profile-menu__email {
  font-size: var(--fs-xs);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uw-profile-menu__role {
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.uw-profile-menu__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--uw-border);
}

.uw-profile-menu__stat {
  padding: var(--space-4) var(--space-2);
  text-align: center;
  border-right: 1px solid var(--uw-border);
}

.uw-profile-menu__stat:last-child { border-right: none; }

.uw-profile-menu__stat-val {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--uw-ink-900);
}

.uw-profile-menu__stat-val--green { color: var(--uw-success-500); }
.uw-profile-menu__stat-val--red { color: var(--uw-red-500); }

.uw-profile-menu__stat-label {
  font-size: 10px;
  color: var(--uw-ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.uw-profile-menu__score {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--uw-border);
}

.uw-profile-menu__score-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--uw-ink-600);
}

.uw-profile-menu__score-val { font-weight: 800; font-size: var(--fs-sm); }

.uw-profile-menu__links { padding: var(--space-2) var(--space-3); }

.uw-profile-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--uw-ink-700);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast);
}

.uw-profile-menu__link:hover {
  background: var(--uw-ink-75);
  color: var(--uw-ink-900);
}

.uw-profile-menu__link i { font-size: 1.15rem; color: var(--uw-blue-500); }

.uw-profile-menu__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--uw-red-600);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.uw-profile-menu__logout:hover { background: var(--uw-red-50); }

.uw-profile-menu__footer { padding: 4px 12px 12px; }

/* ---------- 18. CARDS & KPI ---------- */
body.uw-theme .dashboard-main-wrapper .card {
  border-radius: var(--r-lg);
  border: 1px solid var(--uw-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med), transform var(--dur-med);
}

body.uw-theme .dashboard-main-wrapper .card:hover {
  box-shadow: var(--shadow-md);
}

body.uw-theme .card-header {
  background: var(--uw-surface-sunk);
  border-bottom: 1px solid var(--uw-border);
  color: var(--uw-ink-800);
}

/* ---------- 19. ALERTS ---------- */
body.uw-theme .alert {
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid var(--uw-border);
}

body.uw-theme .alert-danger {
  background: var(--uw-red-50);
  border-color: var(--uw-red-200);
  color: var(--uw-red-700);
}

body.uw-theme .alert-success {
  background: var(--uw-success-50);
  border-color: #8ecfb0;
  color: var(--uw-success-700);
}

body.uw-theme .alert-warning {
  background: var(--uw-warning-50);
  border-color: #f3d98a;
  color: var(--uw-warning-700);
}

body.uw-theme .alert-info {
  background: var(--uw-info-50);
  border-color: var(--uw-blue-200);
  color: var(--uw-info-700);
}

[data-theme="dark"] body.uw-theme .alert-danger {
  background: rgba(227, 33, 36, 0.14);
  border-color: rgba(227, 33, 36, 0.3);
  color: var(--uw-red-300);
}

/* ---------- 20. TABLES & DATATABLES ---------- */
body.uw-theme .table {
  font-size: var(--fs-sm);
  color: var(--uw-ink-700);
}

body.uw-theme .table thead th {
  background: var(--uw-surface-sunk);
  color: var(--uw-ink-700);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--uw-border);
}

body.uw-theme .table td { border-color: var(--uw-border); }

body.uw-theme .table-hover tbody tr:hover {
  background: var(--uw-ink-50);
}

/* ---------- 21. MODALS & DROPDOWNS ---------- */
body.uw-theme .modal-content {
  background: var(--uw-surface);
  border: 1px solid var(--uw-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
}

body.uw-theme .modal-header {
  border-bottom: 1px solid var(--uw-border);
}

body.uw-theme .modal-title {
  font-weight: 600;
  color: var(--uw-ink-900);
}

body.uw-theme .dropdown-menu {
  background: var(--uw-surface);
  border: 1px solid var(--uw-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

/* ---------- 22. PRELOADER ---------- */
body.uw-theme .preloader {
  background: var(--uw-surface);
}

body.uw-theme .loader {
  border-color: var(--uw-ink-200);
  border-top-color: var(--uw-blue-500);
}

/* ---------- 23. FOOTER ---------- */
body.uw-theme .dashboard-footer {
  background: var(--uw-surface);
  border-top: 1px solid var(--uw-border);
  color: var(--uw-ink-500);
  font-size: var(--fs-sm);
}

/* ---------- 24. PROGRESS ---------- */
body.uw-theme .progress {
  background: var(--uw-ink-100);
  border-radius: var(--r-pill);
  height: 8px;
}

body.uw-theme .progress-bar {
  background: var(--uw-blue-500);
  border-radius: var(--r-pill);
}

body.uw-theme .progress-bar.bg-success { background: var(--uw-success-500) !important; }
body.uw-theme .progress-bar.bg-danger { background: var(--uw-red-500) !important; }

/* ---------- 25. PAGINATION ---------- */
body.uw-theme .pagination .page-link {
  border-color: var(--uw-border);
  color: var(--uw-ink-700);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

body.uw-theme .pagination .page-item.active .page-link {
  background: var(--uw-blue-500);
  border-color: var(--uw-blue-500);
}

body.uw-theme .pagination .page-link:hover {
  background: var(--uw-ink-75);
}

/* ---------- 26. FORM FOCUS ---------- */
body.uw-theme .form-control:focus,
body.uw-theme .form-select:focus {
  border-color: var(--uw-blue-500);
  box-shadow: 0 0 0 3px var(--uw-blue-100);
}

[data-theme="dark"] body.uw-theme .form-control:focus,
[data-theme="dark"] body.uw-theme .form-select:focus {
  box-shadow: 0 0 0 3px rgba(44, 51, 134, 0.35);
}

/* ---------- 27. ICON COLORS ---------- */
body.uw-theme .ph { vertical-align: middle; }

body.uw-theme .hover-text-main-600:hover { color: var(--uw-blue-600) !important; }

body.uw-theme .text-main-600 { color: var(--uw-blue-600) !important; }
body.uw-theme .text-main-500 { color: var(--uw-blue-500) !important; }
body.uw-theme .bg-main-50 { background: var(--uw-blue-50) !important; }
body.uw-theme .bg-main-600 { background: var(--uw-blue-500) !important; }
body.uw-theme .border-main-600 { border-color: var(--uw-blue-500) !important; }

body.uw-theme .text-gray-200 { color: var(--uw-ink-500) !important; }
body.uw-theme .text-gray-500 { color: var(--uw-ink-400) !important; }
body.uw-theme .text-gray-600 { color: var(--uw-ink-600) !important; }
body.uw-theme .border-gray-100 { border-color: var(--uw-border) !important; }

/* ---------- 28. ACTIVATION BADGE ---------- */
body.uw-theme .activation-badge {
  background: var(--uw-success-500);
  border: 2px solid var(--uw-surface);
}

/* ---------- 29. CALENDAR CARD ---------- */
body.uw-theme .calendar-card .card-header {
  background: var(--uw-blue-50);
  border-bottom: 1px solid var(--uw-border);
}

[data-theme="dark"] body.uw-theme .calendar-card .card-header {
  background: rgba(44, 51, 134, 0.25);
}

/* ---------- 30. DASHBOARD LAYOUT HELPERS ---------- */
body.uw-theme .dashboard-body > .row {
  display: flex;
  align-items: stretch;
}

body.uw-theme .dashboard-body > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

body.uw-theme .dashboard-body .card { width: 100%; }

body.uw-theme .uw-bg-primary { background: var(--uw-blue-500) !important; }
body.uw-theme .uw-bg-primary-soft { background: var(--uw-blue-50) !important; }
body.uw-theme .uw-bg-accent { background: var(--uw-red-500) !important; }
body.uw-theme .uw-bg-accent-soft { background: var(--uw-red-50) !important; }
body.uw-theme .uw-text-primary { color: var(--uw-blue-500) !important; }
body.uw-theme .uw-text-accent { color: var(--uw-red-500) !important; }

/* ---------- 31. DESIGN-GUIDE APP SHELL ---------- */
body.uw-theme .sidebar {
  width: var(--sidebar-w);
}

body.uw-theme .dashboard-main-wrapper {
  margin-inline-start: var(--sidebar-w);
}

body.uw-theme .sidebar-menu-wrapper .p-20 {
  padding: 12px !important;
}

body.uw-theme .sidebar-menu__item:not(:last-child) {
  margin-block-end: 2px;
}

body.uw-theme .sidebar-menu__link {
  min-height: 38px;
  padding: 8px 12px;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 450;
  text-transform: none;
}

body.uw-theme .sidebar-menu__link .icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--uw-border);
  border-radius: var(--r-sm);
  background: var(--uw-surface);
  color: var(--uw-ink-500);
  font-size: 15px;
}

body.uw-theme .sidebar-menu__item.activePage .sidebar-menu__link {
  background: var(--uw-blue-50);
  color: var(--uw-blue-700);
  font-weight: 600;
}

body.uw-theme .sidebar-menu__item.activePage .sidebar-menu__link .icon {
  border-color: var(--uw-blue-100);
  background: var(--uw-blue-500);
  color: #fff;
}

body.uw-theme .sidebar-menu__group-label {
  padding: 18px 12px 6px;
  margin: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

body.uw-theme .sidebar-menu__group-label--first {
  padding-top: 4px;
}

body.uw-theme .uw-sidebar-brand {
  min-height: 73px;
  padding: 16px 24px;
}

body.uw-theme .uw-sidebar-brand img {
  width: 36px;
  height: 36px;
}

body.uw-theme .uw-sidebar-brand__name {
  font-size: 15px;
  letter-spacing: -0.01em;
}

body.uw-theme .top-navbar {
  min-height: 73px;
  padding-block: 16px;
}

body.uw-theme .dashboard-body {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-top: 28px;
}

.dashboard-overview {
  width: 100%;
}

/* ---------- 32. EDITORIAL DASHBOARD ---------- */
.uw-eyebrow {
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-red-500);
}

.uw-page-header--dashboard {
  padding: 4px 0 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.uw-theme .uw-page-header--dashboard h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.uw-kpi-grid > [class*="col-"] {
  display: flex;
}

body.uw-theme .dashboard-main-wrapper .uw-kpi {
  height: 100%;
  min-height: 148px;
  box-shadow: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-med), transform var(--dur-med);
}

body.uw-theme .dashboard-main-wrapper .uw-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--uw-blue-200);
  box-shadow: var(--shadow-md);
}

.uw-kpi .card-body {
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.uw-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.uw-kpi__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--uw-ink-500);
}

.uw-kpi__icon {
  font-size: 17px;
  color: var(--uw-blue-500);
}

.uw-kpi__icon--success { color: var(--uw-success-500); }
.uw-kpi__icon--danger { color: var(--uw-red-500); }

body.uw-theme .uw-kpi__value {
  margin: 13px 0 2px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.uw-kpi__meta {
  margin-top: auto;
  font-size: 11.5px;
  color: var(--uw-ink-500);
}

.uw-kpi__meta--up {
  color: var(--uw-success-700);
}

body.uw-theme .dashboard-main-wrapper .uw-chart-card,
body.uw-theme .dashboard-main-wrapper .uw-progress-card {
  box-shadow: none;
}

.uw-chart-card .card-body {
  padding: 22px 24px;
}

.uw-chart-card h4 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

body.uw-theme .uw-progress-card .card-header,
body.uw-theme .calendar-card .card-header {
  padding: 15px 18px;
  background: var(--uw-surface);
}

.uw-progress-card__value {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--uw-ink-900);
}

.uw-progress-card__caption {
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--uw-ink-500);
}

body.uw-theme .calendar-card {
  min-height: 390px !important;
}

@media screen and (max-width: 1199px) {
  body.uw-theme .dashboard-main-wrapper {
    margin-inline-start: 0;
  }
}

@media screen and (max-width: 767px) {
  body.uw-theme .dashboard-body {
    padding-top: 20px;
  }

  .uw-page-header--dashboard > div {
    align-items: flex-start !important;
  }

  .uw-page-header--dashboard .btn {
    padding: 10px 14px;
  }
}

/* ---------- 35. QUESTION SEARCH REVIEW ---------- */
body.qs-review-page {
  background: var(--uw-bg);
  color: var(--uw-ink-800);
}

body.qs-review-page .nbme-header {
  min-height: 64px;
  height: auto;
  padding: 8px 20px;
  border-bottom: 1px solid var(--uw-blue-700);
  background: var(--uw-blue-500);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
}

body.qs-review-page .left-navigator {
  width: 74px;
  padding: 8px;
  border-right: 1px solid var(--uw-border);
  background: var(--uw-surface);
}

body.qs-review-page .left-navigator td {
  padding: 9px 6px;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--uw-ink-600);
  font-family: var(--font-mono);
  font-size: 11px;
}

body.qs-review-page .left-navigator tr + tr td {
  border-top: 3px solid var(--uw-surface);
}

body.qs-review-page .left-navigator .row-selected {
  background: var(--uw-blue-50) !important;
  color: var(--uw-blue-700) !important;
}

body.qs-review-page .nbme-body {
  width: calc(100% - 74px);
  margin-left: 74px;
  padding: 34px clamp(22px, 5vw, 70px) 96px;
  background: var(--uw-bg);
}

body.qs-review-page #questionText,
body.qs-review-page #answerContainer,
body.qs-review-page .stats-bar,
body.qs-review-page .explanation,
body.qs-review-page .standards-container {
  max-width: 1040px;
  margin-inline: auto;
}

body.qs-review-page #questionText {
  color: var(--uw-ink-900);
  font-family: var(--font-sans);
  line-height: 1.7;
}

body.qs-review-page table.answer-container {
  overflow: hidden;
  border: 1px solid var(--uw-border);
  border-radius: var(--r-md);
  background: var(--uw-surface);
  box-shadow: none;
}

body.qs-review-page table.answer-container td {
  border-color: var(--uw-border);
  background: var(--uw-surface);
}

body.qs-review-page table.answer-container tr:hover td {
  background: var(--uw-blue-50);
}

body.qs-review-page .stats-bar,
body.qs-review-page .explanation,
body.qs-review-page .standards {
  border-color: var(--uw-border);
  border-radius: var(--r-lg);
  background: var(--uw-surface);
  box-shadow: var(--shadow-xs);
}

body.qs-review-page .nbme-footer {
  border-top: 1px solid var(--uw-border);
  background: var(--uw-surface);
  color: var(--uw-ink-600);
  box-shadow: 0 -2px 12px rgba(20,21,28,.04);
}

@media screen and (max-width: 768px) {
  body.qs-review-page .nbme-header {
    min-height: 54px;
    padding-inline: 10px;
  }

  body.qs-review-page .left-navigator {
    width: 58px;
  }

  body.qs-review-page .nbme-body {
    width: calc(100% - 58px);
    margin-left: 58px;
    padding: 22px 14px 86px;
  }
}

/* ---------- 33. QUESTION SEARCH ---------- */
.qs-page {
  width: 100%;
  max-width: 1180px;
}

.qs-page__header {
  margin-bottom: 30px;
}

.qs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 24px;
  font-size: var(--fs-xs);
  color: var(--uw-ink-500);
}

.qs-breadcrumb a {
  color: var(--uw-ink-500);
  text-decoration: none;
}

.qs-breadcrumb a:hover { color: var(--uw-blue-600); }
.qs-breadcrumb i { font-size: 11px; color: var(--uw-ink-400); }

body.uw-theme .qs-page__header h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--uw-ink-900);
}

.qs-page__header > p {
  max-width: 620px;
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--uw-ink-600);
}

.qs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.8fr);
  gap: 20px;
  align-items: stretch;
}

.qs-search-card,
.qs-guide-card {
  border: 1px solid var(--uw-border);
  border-radius: var(--r-lg);
}

.qs-search-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  min-height: 350px;
  padding: 30px;
  background: var(--uw-surface);
  box-shadow: var(--shadow-sm);
}

.qs-search-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--uw-blue-50);
  color: var(--uw-blue-500);
  font-size: 22px;
}

body.uw-theme .qs-search-card h2,
body.uw-theme .qs-guide-card h2 {
  margin: 3px 0 8px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--uw-ink-900);
}

.qs-search-card__lede {
  max-width: 58ch;
  margin: 0 0 28px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--uw-ink-600);
}

.qs-field label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--uw-ink-800);
}

.qs-input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.qs-input-wrap {
  position: relative;
  min-width: 0;
  flex: 1;
}

.qs-input-wrap > i {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--uw-ink-400);
  font-size: 17px;
  pointer-events: none;
}

.qs-search-input {
  width: 100%;
  height: 46px;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--uw-border-strong);
  border-radius: var(--r-md);
  outline: 0;
  background: var(--uw-surface);
  color: var(--uw-ink-900);
  font-family: var(--font-mono);
  font-size: 13px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.qs-search-input::placeholder {
  color: var(--uw-ink-400);
  opacity: 1;
}

.qs-search-input:focus {
  border-color: var(--uw-blue-500);
  box-shadow: 0 0 0 3px var(--uw-blue-100);
}

.qs-submit {
  min-height: 46px;
  padding-inline: 18px;
}

.qs-search-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--uw-ink-500);
}

.qs-search-hint code {
  padding: 1px 4px;
  border-radius: var(--r-xs);
  background: var(--uw-surface-sunk);
  color: var(--uw-ink-700);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.qs-error-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid var(--uw-red-200);
  border-radius: var(--r-md);
  background: var(--uw-red-50);
  color: var(--uw-red-700);
  font-size: var(--fs-sm);
}

.qs-error-alert i {
  margin-top: 2px;
  font-size: 17px;
  flex-shrink: 0;
}

.qs-guide-card {
  padding: 28px 24px;
  background: var(--uw-blue-500);
  border-color: var(--uw-blue-700);
  color: #fff;
}

.qs-guide-card .uw-eyebrow {
  color: rgba(255,255,255,.58);
}

body.uw-theme .qs-guide-card h2 {
  color: #fff;
}

.qs-steps {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.qs-steps li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.13);
}

.qs-steps li > span {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: rgba(255,255,255,.55);
}

.qs-steps strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.qs-steps small {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.68);
}

.qs-guide-card__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.09);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.76);
}

.qs-guide-card__note i {
  margin-top: 1px;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

[data-theme="dark"] .qs-search-card__icon {
  background: rgba(44,51,134,.35);
  color: var(--uw-blue-300);
}

[data-theme="dark"] .qs-search-input:focus {
  box-shadow: 0 0 0 3px rgba(44,51,134,.35);
}

@media screen and (max-width: 900px) {
  .qs-layout {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .qs-page__header {
    margin-bottom: 22px;
  }

  .qs-breadcrumb {
    margin-bottom: 18px;
  }

  .qs-search-card {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 22px 18px;
  }

  .qs-input-row {
    flex-direction: column;
  }

  .qs-submit {
    width: 100%;
  }

  .qs-search-hint {
    align-items: flex-start;
  }

  .qs-guide-card {
    padding: 24px 20px;
  }
}

/* ---------- 34. AUTHENTICATED INNER-PAGE SYSTEM ---------- */
body.uw-theme :is(
  .aq-page-header,
  .mq-page-header,
  .pt-page-header,
  .sr-page-header,
  .notes-page-header,
  .tr-header
) {
  margin-bottom: 28px !important;
  padding: 2px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.uw-theme :is(
  .aq-page-header__title,
  .mq-page-header__title,
  .pt-page-header__title,
  .sr-page-header__title,
  .notes-page-header__title,
  .tr-header h1
) {
  margin: 0 0 6px !important;
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: var(--uw-ink-900) !important;
}

body.uw-theme :is(
  .aq-page-header__subtitle,
  .mq-page-header__subtitle,
  .pt-page-header__subtitle,
  .sr-page-header__subtitle,
  .notes-page-header__subtitle
) {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--uw-ink-500) !important;
}

body.uw-theme :is(
  .aq-page-header,
  .mq-page-header,
  .pt-page-header,
  .sr-page-header,
  .notes-page-header,
  .tr-header
) .breadcrumb {
  margin-bottom: 16px !important;
  font-size: var(--fs-xs);
}

body.uw-theme :is(
  .aq-btn,
  .mq-btn,
  .pt-btn,
  .sr-btn,
  .tr-btn,
  .cs-btn-lite
) {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 15px !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-med), transform var(--dur-fast);
}

body.uw-theme :is(.mq-btn--primary, .pt-btn--primary, .sr-btn--primary) {
  border-color: var(--uw-red-500) !important;
  background: var(--uw-red-500) !important;
  color: #fff !important;
}

body.uw-theme :is(.mq-btn--primary, .pt-btn--primary, .sr-btn--primary):hover {
  border-color: var(--uw-red-600) !important;
  background: var(--uw-red-600) !important;
  box-shadow: var(--shadow-red) !important;
}

body.uw-theme :is(.aq-btn--soft, .tr-btn--soft, .cs-btn-lite) {
  border: 1px solid var(--uw-border-strong) !important;
  background: var(--uw-surface) !important;
  color: var(--uw-ink-700) !important;
}

body.uw-theme :is(.aq-btn--soft, .tr-btn--soft, .cs-btn-lite):hover {
  border-color: var(--uw-ink-400) !important;
  background: var(--uw-ink-75) !important;
  color: var(--uw-ink-900) !important;
}

body.uw-theme :is(.mq-stats, .pt-stats, .sr-stats) {
  gap: 14px !important;
  margin-bottom: 22px !important;
}

body.uw-theme :is(.mq-stat-card, .pt-stat-card, .sr-stat-card) {
  min-height: 118px;
  padding: 18px !important;
  border: 1px solid var(--uw-border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--uw-surface) !important;
  box-shadow: none !important;
}

body.uw-theme :is(.mq-stat-card, .pt-stat-card, .sr-stat-card):hover {
  transform: translateY(-2px);
  border-color: var(--uw-blue-200) !important;
  box-shadow: var(--shadow-md) !important;
}

body.uw-theme :is(.mq-stat-card__value, .pt-stat-card__value, .sr-stat-card__value) {
  font-family: var(--font-display) !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--uw-ink-900) !important;
}

body.uw-theme :is(.mq-stat-card__label, .pt-stat-card__label, .sr-stat-card__label) {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--uw-ink-500) !important;
}

body.uw-theme :is(.mq-stat-card__icon, .pt-stat-card__icon, .sr-stat-card__icon) {
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-size: 18px !important;
}

body.uw-theme :is(
  .mq-table-container,
  .pt-table-container,
  .sr-table-container,
  .tr-card,
  .tr-chart-card,
  .cs-card,
  .ai-toggle-card,
  .form-section,
  .notes-iframe-container,
  .chat-container
) {
  border: 1px solid var(--uw-border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--uw-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.uw-theme :is(.mq-toolbar, .pt-toolbar, .sr-toolbar, .tr-card__head, .cs-card-header, .chat-header) {
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--uw-border) !important;
  background: var(--uw-surface) !important;
}

body.uw-theme :is(.pt-toolbar__title, .sr-toolbar__title, .tr-card__title, .cs-title, .chat-header__name) {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--uw-ink-900) !important;
}

body.uw-theme :is(.mq-table, .pt-table, .sr-table) {
  margin: 0;
  color: var(--uw-ink-700) !important;
  font-size: var(--fs-sm);
}

body.uw-theme :is(.mq-table, .pt-table, .sr-table) thead th {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--uw-border) !important;
  background: var(--uw-surface-sunk) !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--uw-ink-500) !important;
}

body.uw-theme :is(.mq-table, .pt-table, .sr-table) tbody td {
  padding: 13px 14px !important;
  border-color: var(--uw-border) !important;
  background: var(--uw-surface);
}

body.uw-theme :is(.mq-table, .pt-table, .sr-table) tbody tr:hover td {
  background: var(--uw-ink-50) !important;
}

body.uw-theme :is(
  .mq-search__input,
  .pt-search__input,
  .sr-search__input,
  .pt-filter__select,
  .sr-per-page__select,
  .cs-search-input
) {
  min-height: 40px;
  border: 1px solid var(--uw-border-strong) !important;
  border-radius: var(--r-md) !important;
  background: var(--uw-surface) !important;
  color: var(--uw-ink-800) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  box-shadow: none !important;
}

body.uw-theme :is(
  .mq-search__input,
  .pt-search__input,
  .sr-search__input,
  .pt-filter__select,
  .sr-per-page__select,
  .cs-search-input
):focus {
  border-color: var(--uw-blue-500) !important;
  box-shadow: 0 0 0 3px var(--uw-blue-100) !important;
  outline: 0;
}

body.uw-theme :is(.pt-empty, .sr-empty, .mq-empty, .chat-empty) {
  padding: 44px 24px !important;
  border-radius: var(--r-lg);
  color: var(--uw-ink-500);
}

body.uw-theme :is(.pt-empty__icon, .sr-empty__icon, .mq-empty__icon, .chat-empty__icon) {
  background: var(--uw-blue-50) !important;
  color: var(--uw-blue-500) !important;
  box-shadow: none !important;
}

body.uw-theme :is(.pt-empty__title, .sr-empty__title, .mq-empty__title, .chat-empty__title) {
  font-family: var(--font-display) !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  color: var(--uw-ink-900) !important;
}

body.uw-theme .form-section {
  margin-bottom: 16px !important;
  padding: 22px !important;
}

body.uw-theme .form-section h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}

body.uw-theme .cs-wrap {
  max-width: 1180px;
  margin-inline: auto;
}

body.uw-theme .cs-section {
  color: var(--uw-ink-700);
}

body.uw-theme .chat-container {
  overflow: hidden;
}

body.uw-theme .chat-messages {
  background: var(--uw-bg) !important;
}

body.uw-theme .chat-input {
  border-top: 1px solid var(--uw-border) !important;
  background: var(--uw-surface) !important;
}

body.uw-theme .notes-iframe-container {
  overflow: hidden;
}

body.uw-theme .dashboard-footer {
  margin-top: 28px;
  padding: 18px 4px;
  border-radius: 0;
  border-top: 1px solid var(--uw-border);
  background: transparent;
}

body.uw-theme .dashboard-body > .uw-page-header {
  margin-bottom: 28px !important;
  padding: 2px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.uw-theme .dashboard-body > .uw-page-header h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

body.uw-theme .dashboard-body > .uw-page-header .breadcrumb {
  margin-bottom: 16px !important;
}

body.uw-theme .dashboard-insights-grid {
  margin-top: 2px;
}

body.uw-theme .dashboard-insights-grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

body.uw-theme .dashboard-insights-grid .uw-chart-card {
  flex: 1;
  min-height: 520px;
}

body.uw-theme .dashboard-insights-grid .uw-chart-card .card-body {
  display: flex;
  flex-direction: column;
}

body.uw-theme .dashboard-insights-grid #doubleLineChart {
  min-height: 390px;
  flex: 1;
}

body.uw-theme .dashboard-insights-grid .uw-progress-card {
  flex: 0 0 auto;
}

body.uw-theme .dashboard-insights-grid .calendar-card {
  flex: 1 1 auto !important;
}

@media screen and (max-width: 767px) {
  body.uw-theme :is(
    .aq-page-header,
    .mq-page-header,
    .pt-page-header,
    .sr-page-header,
    .notes-page-header,
    .tr-header
  ) {
    margin-bottom: 20px !important;
  }

  body.uw-theme :is(.mq-stat-card, .pt-stat-card, .sr-stat-card) {
    min-height: 104px;
    padding: 15px !important;
  }

  body.uw-theme :is(.mq-toolbar, .pt-toolbar, .sr-toolbar) {
    gap: 12px;
  }
}

/* ---------- 36. LANDING CONTENT ADMIN ---------- */
.lc-tabs {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.lc-tabs .tabs__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
}

.lc-panel {
  background: var(--uw-surface);
  border: 1px solid var(--uw-border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.lc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.lc-toolbar__text,
.lc-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--uw-ink-500);
}

.lc-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--uw-ink-500);
}

.lc-empty i { font-size: 28px; color: var(--uw-blue-500); }
.lc-empty p { margin: 0; max-width: 44ch; }

.lc-table-wrap { overflow-x: auto; }
.lc-table { min-width: 680px; margin: 0; }
.lc-table td { vertical-align: middle; }
.lc-table__main { font-weight: 600; color: var(--uw-ink-900); }
.lc-table__detail { max-width: 360px; color: var(--uw-ink-500); }

.lc-table__group th {
  background: var(--uw-surface-sunk);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uw-ink-500);
}

.lc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.lc-actions form { margin: 0; }
.lc-actions .btn { min-width: 44px; min-height: 44px; }

.lc-form {
  display: grid;
  gap: var(--space-5);
  max-width: 640px;
}

body.uw-theme .lc-form__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--uw-ink-900);
}

.lc-field { display: grid; gap: 6px; }
.lc-field__label { font-size: 13px; font-weight: 600; color: var(--uw-ink-800); }
.lc-field__req { color: var(--uw-red-600); }
.lc-field__hint { font-size: 12px; color: var(--uw-ink-500); }

.lc-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--uw-danger-500);
}

[data-theme="dark"] .lc-field__error { color: var(--uw-red-300); }

.lc-field--error .input,
.lc-field--error .textarea,
.lc-field--error .select { border-color: var(--uw-danger-500); }

.lc-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 24px;
  font-size: 14px;
  color: var(--uw-ink-800);
  cursor: pointer;
}

.lc-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--uw-blue-500);
}

.lc-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.lc-photo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lc-photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

.lc-preview {
  padding: var(--space-5);
  border: 1px dashed var(--uw-border-strong);
  border-radius: var(--r-lg);
  background: var(--uw-bg);
}

.lc-preview__eyebrow {
  min-height: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uw-red-500);
}

.lc-preview__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--uw-ink-900);
}

.lc-preview__title em { color: var(--uw-red-500); }
.lc-preview__title em:empty { display: none; }
.lc-preview__sub { max-width: 60ch; margin-top: var(--space-2); font-size: 14px; color: var(--uw-ink-600); }

.lc-demo-current { margin-bottom: var(--space-6); }
.lc-search { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.lc-search .input { flex: 1 1 260px; }
.lc-demo-preview { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--uw-border); }
.lc-demo-preview__stem { font-size: 15px; line-height: 1.65; color: var(--uw-ink-900); }

.lc-demo-preview__options {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 767px) {
  .lc-panel { padding: var(--space-4); }
}

/* ============================================================
   SITE HEADER + BRAND LOCKUP  (shared)

   One implementation of the top bar and the wordmark, in the one
   stylesheet every page loads. Previously the brand existed three
   times — `.lp-brand` (landing nav + landing footer), `.auth-lockup`
   (login, select-exam) and an inline `.signup-header` — and they had
   drifted: different emblem sizes, different container widths, and the
   auth copy rendered the whole wordmark in the display italic instead
   of "USMLE" sans-bold + "Wise" italic.

   `.lp-brand` is kept as an alias so the landing markup and its tests
   are untouched; both names resolve to these rules.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--uw-surface);
  border-bottom: 1px solid var(--uw-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) { .site-header__inner { padding-inline: var(--space-6); } }
@media (min-width: 1200px) { .site-header__inner { padding-inline: var(--space-12); } }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 44px, matching the landing nav and the >=44px touch-target commitment in
   PRODUCT.md. */
.site-header__actions .btn { min-height: 44px; }
.site-header .theme-toggle { width: 44px; height: 44px; }

.site-brand,
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  text-decoration: none;
}

.site-brand img,
.lp-brand img { width: 32px; height: 32px; }

.site-brand__word,
.lp-brand__word { font-size: 18px; line-height: 1; white-space: nowrap; }

.site-brand__usmle,
.lp-brand__usmle {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--uw-blue-500);
}

.site-brand__wise,
.lp-brand__wise {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  color: var(--uw-ink-900);
}

[data-theme="dark"] .site-brand__usmle,
[data-theme="dark"] .lp-brand__usmle { color: var(--uw-blue-300); }

/* The emblem is the only thing left at very narrow widths; the wordmark
   would otherwise push the actions off the bar. */
@media (max-width: 380px) {
  .site-brand__word { display: none; }
}