@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap);
:root {
  --navy: #0f1f3d;
  --navy-mid: #1a3260;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --cream: #faf8f3;
  --white: #ffffff;
  --slate: #64748b;
  --slate-light: #94a3b8;
  --border: #e2e8f0;
  --green: #16a34a;
  --green-light: #dcfce7;
  --red: #dc2626;
  --red-light: #fee2e2;
  --amber: #d97706;
  --amber-light: #fef3c7;
  --shadow-sm: 0 1px 3px rgba(15,31,61,0.08);
  --shadow-md: 0 4px 16px rgba(15,31,61,0.12);
  --shadow-lg: 0 8px 32px rgba(15,31,61,0.16);
  --radius: 12px;
  --radius-lg: 20px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --text: #0f1f3d;
  --bg: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { font-family: 'DM Sans', system-ui, sans-serif; font-family: var(--font-body); background: #faf8f3; background: var(--cream); color: #0f1f3d; color: var(--navy); min-height: 100vh; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-family: var(--font-display); }
button { font-family: 'DM Sans', system-ui, sans-serif; font-family: var(--font-body); cursor: pointer; border: none; outline: none; }
input, textarea, select { font-family: 'DM Sans', system-ui, sans-serif; font-family: var(--font-body); outline: none; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e2e8f0; background: var(--border); border-radius: 3px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes bounce { 
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; } 
  30% { transform: translateY(-6px); opacity: 1; } 
}
.fade-in { animation: fadeIn 0.4s ease both; }

.app-shell { display: flex; min-height: 100vh; overflow-x: hidden;
  /* iOS PWA safe area for bottom home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}
.sidebar { width: 260px; background: #0f1f3d; background: var(--navy); display: flex; flex-direction: column; padding: 24px 0; padding-top: max(24px, env(safe-area-inset-top)); position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transition: transform 0.3s ease; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.main-content { margin-left: 260px; flex: 1 1; min-height: 100vh; display: flex; flex-direction: column; max-width: calc(100vw - 260px); transition: margin-left 0.3s ease, max-width 0.3s ease; }
.main-content.sidebar-collapsed { margin-left: 72px; max-width: calc(100vw - 72px); }
.sidebar-brand { padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 36px; height: 36px; background: #c9a84c; background: var(--gold); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', Georgia, serif; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #0f1f3d; color: var(--navy); }
.brand-name { font-family: 'Playfair Display', Georgia, serif; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #ffffff; color: var(--white); line-height: 1.2; }
.brand-sub { font-size: 11px; color: #94a3b8; color: var(--slate-light); letter-spacing: 0.05em; text-transform: uppercase; }
.nav-section { padding: 16px 12px; flex: 1 1; overflow-y: auto; overflow-x: hidden; }
.nav-section::-webkit-scrollbar { width: 3px; }
.nav-section::-webkit-scrollbar-track { background: transparent; }
.nav-section::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; color: var(--slate-light); padding: 0 12px; margin-bottom: 8px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; text-decoration: none; margin-bottom: 2px; background: none; width: 100%; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #ffffff; color: var(--white); }
.nav-item.active { background: rgba(201,168,76,0.15); color: #e8c97a; color: var(--gold-light); }
.nav-item.active svg { color: #c9a84c; color: var(--gold); }
.sidebar-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.08); position: -webkit-sticky; position: sticky; bottom: 0; background: #0f1f3d; background: var(--navy); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 32px; height: 32px; background: #1a3260; background: var(--navy-mid); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #c9a84c; color: var(--gold); border: 1px solid rgba(201,168,76,0.3); }
.user-info { flex: 1 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; color: #ffffff; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-level { font-size: 11px; color: #94a3b8; color: var(--slate-light); }
.page-header { padding: 16px 32px; border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--border); background: #ffffff; background: var(--white); display: flex; align-items: center; justify-content: space-between; }
.page-title { font-size: 24px; font-weight: 700; color: #0f1f3d; color: var(--navy); }
.page-subtitle { font-size: 14px; color: #64748b; color: var(--slate); margin-top: 4px; }
.card { background: #ffffff; background: var(--white); border-radius: 12px; border-radius: var(--radius); border: 1px solid #e2e8f0; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(15,31,61,0.08); box-shadow: var(--shadow-sm); box-sizing: border-box; min-width: 0; max-width: 100%; overflow: hidden; }
.card-p { padding: 24px; box-sizing: border-box; min-width: 0; }
@media (max-width: 768px) { .card-p { padding: 16px; } }
.stat-card { background: #ffffff; background: var(--white); border-radius: 12px; border-radius: var(--radius); border: 1px solid #e2e8f0; border: 1px solid var(--border); padding: 20px 24px; box-shadow: 0 1px 3px rgba(15,31,61,0.08); box-shadow: var(--shadow-sm); box-sizing: border-box; min-width: 0; max-width: 100%; }
.stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; color: var(--slate); margin-bottom: 8px; }
.stat-value { font-family: 'Playfair Display', Georgia, serif; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #0f1f3d; color: var(--navy); }
.stat-sub { font-size: 13px; color: #64748b; color: var(--slate); margin-top: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: all 0.15s ease; white-space: nowrap; }
.btn-primary { background: #0f1f3d; background: var(--navy); color: #ffffff; color: var(--white); }
.btn-primary:hover { background: #1a3260; background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,31,61,0.12); box-shadow: var(--shadow-md); }
.btn-gold { background: #c9a84c; background: var(--gold); color: #0f1f3d; color: var(--navy); }
.btn-gold:hover { background: #e8c97a; background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,31,61,0.12); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: #0f1f3d; color: var(--navy); border: 1.5px solid #e2e8f0; border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: #0f1f3d; border-color: var(--navy); background: #faf8f3; background: var(--cream); }
.btn-ghost { background: transparent; color: #64748b; color: var(--slate); padding: 8px 12px; }
.btn-ghost:hover { background: #faf8f3; background: var(--cream); color: #0f1f3d; color: var(--navy); }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 10px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #0f1f3d; color: var(--navy); margin-bottom: 6px; }
.form-input { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; color: #0f1f3d; color: var(--navy); background: #ffffff; background: var(--white); transition: border-color 0.15s; }
.form-input:focus { border-color: #0f1f3d; border-color: var(--navy); }
.form-input::placeholder { color: #94a3b8; color: var(--slate-light); }
textarea.form-input { resize: vertical; min-height: 120px; line-height: 1.6; }
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 81px); }
.chat-messages { flex: 1 1; overflow-y: auto; padding: 24px max(24px, calc(50% - 450px)); display: flex; flex-direction: column; gap: 20px; }
.chat-input-area { padding: 10px max(24px, calc(50% - 450px)) 16px; background: #ffffff; background: var(--white); border-top: 1px solid #e2e8f0; border-top: 1px solid var(--border); }
.message-row { display: flex; gap: 12px; animation: fadeIn 0.3s ease both; min-width: 0; max-width: 100%; }
.message-row.user { flex-direction: row-reverse; }
.message-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.message-avatar.ai { background: #0f1f3d; background: var(--navy); color: #c9a84c; color: var(--gold); }
.message-avatar.user-av { background: #c9a84c; background: var(--gold); color: #0f1f3d; color: var(--navy); }
.message-bubble { padding: 14px 18px; border-radius: 16px; font-size: 14px; line-height: 1.65; max-width: 80%; overflow-x: hidden; }
.message-bubble.ai { background: #ffffff; background: var(--white); border: 1px solid #e2e8f0; border: 1px solid var(--border); border-top-left-radius: 4px; box-shadow: 0 1px 3px rgba(15,31,61,0.08); box-shadow: var(--shadow-sm); color: #0f1f3d; color: var(--navy); max-width: 100%; overflow: hidden; }
.message-bubble.user { background: #0f1f3d; background: var(--navy); color: #ffffff; color: var(--white); border-top-right-radius: 4px; max-width: 75%; }
.message-bubble p { margin-bottom: 8px; }
.message-bubble p:last-child { margin-bottom: 0; }
.message-bubble strong { font-weight: 600; }
.message-bubble ul, .message-bubble ol { padding-left: 20px; margin: 8px 0; }
.message-bubble li { margin-bottom: 4px; }
.chat-input-row { display: flex; flex-direction: column; background: #faf8f3; background: var(--cream); border: 1.5px solid #e2e8f0; border: 1.5px solid var(--border); border-radius: 12px; border-radius: var(--radius); padding: 10px 14px 8px; transition: border-color 0.15s; }
.chat-input-row:focus-within { border-color: #0f1f3d; border-color: var(--navy); }
.chat-textarea { width: 100%; background: transparent; border: none; font-size: 14px; color: #0f1f3d; color: var(--navy); resize: none; overflow-y: auto; line-height: 1.5; padding: 2px 0; outline: none; font-family: 'DM Sans', system-ui, sans-serif; font-family: var(--font-body); min-height: 24px; max-height: 160px; field-sizing: content; }
.chat-textarea::placeholder { color: #94a3b8; color: var(--slate-light); }
.send-btn { width: 36px; height: 36px; background: #0f1f3d; background: var(--navy); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #ffffff; color: var(--white); flex-shrink: 0; transition: all 0.15s; }
.send-btn:hover { background: #c9a84c; background: var(--gold); color: #0f1f3d; color: var(--navy); }
.send-btn:disabled { opacity: 0.4; }
.typing-dots { display: flex; gap: 4px; padding: 4px 0; }
.typing-dots span { width: 7px; height: 7px; background: #94a3b8; background: var(--slate-light); border-radius: 50%; animation: pulse 1.2s ease infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
.progress-bar { height: 6px; background: #e2e8f0; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #0f1f3d; background: var(--navy); border-radius: 3px; transition: width 0.6s ease; }
.progress-fill.gold { background: #c9a84c; background: var(--gold); }
.progress-fill.green { background: #16a34a; background: var(--green); }
.progress-fill.red { background: #dc2626; background: var(--red); }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; }
.badge-gold { background: #fef3c7; color: #92400e; }
.badge-green { background: #dcfce7; background: var(--green-light); color: #15803d; }
.badge-red { background: #fee2e2; background: var(--red-light); color: #b91c1c; }
.badge-navy { background: rgba(15,31,61,0.08); color: #0f1f3d; color: var(--navy); }
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f1f3d; background: var(--navy); padding: 24px; }
.auth-card { background: #ffffff; background: var(--white); border-radius: 20px; border-radius: var(--radius-lg); padding: 48px; width: 100%; max-width: 440px; box-shadow: 0 8px 32px rgba(15,31,61,0.16); box-shadow: var(--shadow-lg); animation: fadeIn 0.5s ease both; }
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-icon { width: 56px; height: 56px; background: #0f1f3d; background: var(--navy); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.auth-title { font-size: 26px; font-weight: 700; color: #0f1f3d; color: var(--navy); text-align: center; }
.auth-sub { font-size: 14px; color: #64748b; color: var(--slate); text-align: center; margin-top: 6px; }
.onboard-page { min-height: 100vh; background: #faf8f3; background: var(--cream); display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; }
.onboard-card { background: #ffffff; background: var(--white); border-radius: 20px; border-radius: var(--radius-lg); padding: 48px; width: 100%; max-width: 560px; box-shadow: 0 4px 16px rgba(15,31,61,0.12); box-shadow: var(--shadow-md); animation: fadeIn 0.4s ease both; }
.onboard-step { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #c9a84c; color: var(--gold); margin-bottom: 8px; }
.topic-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--border); }
.topic-row:last-child { border-bottom: none; }
.topic-name { flex: 1 1; font-size: 14px; font-weight: 500; color: #0f1f3d; color: var(--navy); }
.topic-score { font-size: 13px; font-weight: 600; width: 44px; text-align: right; }
.topic-bar-wrap { width: 100px; }
.empty-state { text-align: center; padding: 48px 24px; color: #64748b; color: var(--slate); }
.empty-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.6; display: block; }
.empty-title { font-size: 17px; font-weight: 700; color: #0f1f3d; color: var(--navy); margin-bottom: 8px; }
.empty-sub { font-size: 14px; color: #64748b; color: var(--slate); line-height: 1.7; max-width: 320px; margin: 0 auto; }
.spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.3); border-top-color: currentColor; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
.feedback-card ol {
  padding-left: 20px;
  margin: 8px 0 12px;
}
.feedback-card ol li {
  margin-bottom: 12px;
  line-height: 1.7;
  color: #0f1f3d;
  color: var(--text);
}
.feedback-card ol li strong {
  display: block;
  color: #0f1f3d;
  color: var(--navy);
  margin-bottom: 4px;
}
.feedback-card ul {
  padding-left: 18px;
  margin: 6px 0 10px;
}
.feedback-card ul li {
  margin-bottom: 6px;
  line-height: 1.65;
}
.feedback-card h2, .feedback-card h3 {
  margin: 16px 0 8px;
  font-size: 15px;
  color: #0f1f3d;
  color: var(--navy);
}
.feedback-card p {
  margin-bottom: 8px;
  line-height: 1.7;
}

.feedback-card { background: #ffffff; background: var(--white); border: 1px solid #e2e8f0; border: 1px solid var(--border); border-radius: 12px; border-radius: var(--radius); padding: 24px; margin-top: 20px; animation: fadeIn 0.4s ease both; }
.feedback-score { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.score-display { font-family: 'Playfair Display', Georgia, serif; font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #0f1f3d; color: var(--navy); }
.score-pct { font-size: 14px; color: #64748b; color: var(--slate); margin-top: 2px; }
.hamburger { display: none; background: none; border: none; color: #0f1f3d; color: var(--navy); padding: 8px; cursor: pointer; }
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; max-width: 100vw; padding-top: 56px; }
  /* Extra padding for iOS PWA status bar */
  @supports (padding-top: env(safe-area-inset-top)) {
    .main-content { padding-top: calc(56px + env(safe-area-inset-top)); }
  }
  .hamburger { display: flex; }
  .mobile-overlay.show { display: block; }
  .page-header { padding: 20px 20px 16px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .chat-messages { padding: 16px; }
  .chat-input-area { padding: 10px 16px 20px; }
  .message-bubble { max-width: 90%; }
  .message-bubble.user { max-width: 82%; }
  .message-bubble.ai { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; flex: 1 1; }
  .message-row.ai-row .message-avatar.ai { display: none; } /* hide avatar on mobile — bubble fills full width */
  .auth-card { padding: 32px 24px; }
  .onboard-card { padding: 32px 24px; }
}

/* ── Phone landscape: icon-only sidebar + full content area ──────────────
   Phones in landscape are short + wide (max-height: 500px catches them
   without touching tablets, which stay tall even when rotated).
   Strategy: CSS forces the sidebar into icon-only (72px) mode regardless
   of the JS collapsed state, hiding all text labels and the footer so
   only the icon rail is visible. A useEffect in App.js also sets
   sidebarCollapsed(true) on rotate so the JS state stays consistent.
──────────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  /* ── Sidebar: strict 72px icon rail ── */
  .sidebar {
    transform: translateX(0) !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow: hidden;
    overflow-y: auto;
    /* NO safe-area padding here — we let the content be centred in 72px.
       The main content already gets safe-area-inset-right on its side. */
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .sidebar.collapsed,
  .sidebar.open {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    transform: translateX(0) !important;
  }

  /* ── Brand: icon only, centred in 72px rail ── */
  .sidebar .sidebar-brand {
    padding: 12px 0 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 72px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow: hidden !important;
  }
  .sidebar .brand-mark {
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
  }
  /* Hide brand name + sub text */
  .sidebar .brand-name,
  .sidebar .brand-sub { display: none !important; }

  /* ── Nav section: scrollable icon rail ── */
  .sidebar .nav-section {
    padding: 8px 0 !important;
    flex: 1 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 72px !important;
    box-sizing: border-box !important;
  }
  /* Hide "Navigation" label */
  .sidebar .nav-label { display: none !important; }

  /* All nav items: icon-only, centered, strictly within 72px */
  .sidebar .nav-item {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 7px 0 !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0 !important;
    width: 72px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .sidebar .nav-item svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0;
    display: block;
  }
  /* Tiny label under icon — centred, never overflows 72px */
  .sidebar .nav-item-collapsed-label {
    font-size: 6px !important;
    display: block !important;
    color: inherit;
    text-align: center;
    line-height: 1.2;
    width: 68px !important;
    max-width: 68px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
  }
  /* Hide the expanded label span (has justify-content flex wrapper) */
  .sidebar .nav-item > span:not(.nav-item-collapsed-label) {
    display: none !important;
  }

  /* ── Footer: hidden entirely — plan badge + dark toggle + user chip ──
     The footer is `position: sticky; bottom: 0` and takes up ~100px.
     In 72px icon rail mode there's no room; hide it completely. */
  .sidebar .sidebar-footer {
    display: none !important;
  }

  /* ── Main content: full width after icon rail ── */
  .main-content {
    margin-left: 72px !important;
    max-width: calc(100vw - 72px) !important;
    padding-top: 0 !important;
    padding-right: env(safe-area-inset-right);
  }
  .main-content.sidebar-collapsed {
    margin-left: 72px !important;
    max-width: calc(100vw - 72px) !important;
  }

  /* iOS PWA safe area top — no 56px mobile header offset */
  @supports (padding-top: env(safe-area-inset-top)) {
    .main-content,
    .main-content.sidebar-collapsed {
      padding-top: env(safe-area-inset-top) !important;
    }
  }

  /* ── Hide mobile chrome ── */
  .mobile-header        { display: none !important; }
  .mobile-overlay       { display: none !important; }
  .hamburger            { display: none !important; }
  .sidebar-mobile-close { display: none !important; }
  .sidebar-collapse-btn { display: none !important; }

  /* ── Tighten page headers ── */
  .page-header {
    padding: 8px 16px !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 0 !important;
    min-height: initial !important;
  }
  .page-header h1, .page-header .page-title {
    font-size: 15px !important;
  }

  /* Chat pages: hide header, shrink input */
  .main-content.chat-active .page-header {
    display: none !important;
  }
  .chat-input-area {
    padding: 6px 12px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
  .chat-viewport {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0;
  margin: 8px 0;
}
.katex {
  font-size: 1.05em;
}
.message-bubble .katex-display,

.qb-content h2 {
  font-size: 15px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border);
  color: #0f1f3d;
  color: var(--navy);
}
.qb-content h3 {
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
  color: #0f1f3d;
  color: var(--navy);
}
.qb-content p {
  margin-bottom: 10px;
  line-height: 1.75;
}
.qb-content ul, .qb-content ol {
  padding-left: 20px;
  margin-bottom: 12px;
}
.qb-content li {
  margin-bottom: 5px;
  line-height: 1.7;
}
.qb-content strong {
  color: #0f1f3d;
  color: var(--navy);
}

.qb-content .katex-display,
.feedback-card .katex-display {
  background: rgba(15,31,61,0.03);
  border-radius: 6px;
  padding: 12px 16px;
  border-left: 3px solid #c9a84c;
  border-left: 3px solid var(--gold);
}

/* ── Mobile-safe content wrapper ───────────────────────────── */
.qb-content,
.feedback-card {
  overflow-x: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Message bubble — user bubble clips, AI bubble allows table scroll */
.message-bubble {
  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.message-bubble.ai {
  overflow-x: auto;
  overflow-y: visible;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

.feedback-card ol {
  padding-left: 20px;
  margin: 8px 0 12px;
}
.feedback-card ol li {
  margin-bottom: 12px;
  line-height: 1.7;
  color: #0f1f3d;
  color: var(--text);
}
.feedback-card ol li strong {
  display: block;
  color: #0f1f3d;
  color: var(--navy);
  margin-bottom: 4px;
}
.feedback-card ul {
  padding-left: 18px;
  margin: 6px 0 10px;
}
.feedback-card ul li {
  margin-bottom: 6px;
  line-height: 1.65;
}
.feedback-card h2, .feedback-card h3 {
  margin: 16px 0 8px;
  font-size: 15px;
  color: #0f1f3d;
  color: var(--navy);
}
.feedback-card p {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* Table wrapper — scrollable horizontally, bounded to container */
.qb-content table,
.message-bubble table,
.feedback-card table {
  width: auto;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 12px;
  margin: 12px 0;
}

/* Ensure ReactMarkdown table wrappers are bounded */
.qb-content > div,
.feedback-card > div {
  max-width: 100%;
}

/* Direct table scroll when no wrapper — fallback */
.qb-content > table,
.message-bubble > table,
.feedback-card > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Table wrapper div — added by JS for mobile scroll */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
}
.table-scroll-wrapper table {
  margin: 0;
  border: none;
  border-radius: 0;
  min-width: 500px;
}
.qb-content th, .qb-content td,
.message-bubble th, .message-bubble td,
.feedback-card th, .feedback-card td {
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #0f1f3d;
  color: var(--navy);
  vertical-align: top;
  font-size: 12px;
}

.qb-content td:not(:first-child),
.message-bubble td:not(:first-child),
.feedback-card td:not(:first-child) {
  text-align: right;
}
.qb-content th,
.message-bubble th,
.feedback-card th {
  background: #0f1f3d;
  background: var(--navy);
  color: #ffffff;
  color: var(--white);
  font-weight: 600;
  text-align: left;
  white-space: normal;
}
.qb-content th:not(:first-child),
.message-bubble th:not(:first-child),
.feedback-card th:not(:first-child) {
  text-align: center;
}
.qb-content tr:nth-child(even) td,
.message-bubble tr:nth-child(even) td,
.feedback-card tr:nth-child(even) td {
  background: rgba(15,31,61,0.02);
}
.qb-content blockquote p,
.message-bubble blockquote p {
  margin: 0;
  display: inline;
}

.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .sidebar-brand { padding: 0 12px 24px; }
.sidebar.collapsed .brand-mark { justify-content: center; }

.nav-item.collapsed {
  flex-direction: column; gap: 4px; padding: 8px 6px;
  justify-content: center; align-items: center; font-size: 0;
}
.nav-item-collapsed-label {
  font-size: 9px; font-weight: 500; color: inherit;
  text-align: center; line-height: 1.2; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60px;
}
.nav-item.collapsed svg { width: 18px; height: 18px; }

.sidebar-collapse-btn {
  position: fixed; top: 20px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #0f1f3d;
  background: var(--navy); border: 2px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 101; transition: all 0.2s ease;
}
.sidebar-collapse-btn:hover { background: #c9a84c; background: var(--gold); color: #0f1f3d; color: var(--navy); border-color: #c9a84c; border-color: var(--gold); }

/* sidebar-collapsed handled in main rule above */

/* ── Font size zoom — reset mobile chrome inside main-content so it doesn't scale ── */
.mobile-header,
.mobile-filters-panel { zoom: 1 !important; }

.dark-mode-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 0; margin-bottom: 12px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.5); font-size: 13px;
  transition: color 0.15s ease;
}
.dark-mode-toggle:hover { color: #ffffff; color: var(--white); }

:root {
  --text: var(--navy);
  --bg: #ffffff;
}
:root.dark {
  --navy:        #0a1628;
  --navy-mid:    #152040;
  --gold:        #d4aa5a;
  --gold-light:  #e8c96a;
  --cream:       #1a2744;
  --white:       #1f2937;
  --border:      rgba(255,255,255,0.1);
  --slate:       #94a3b8;
  --slate-light: #64748b;
  --green:       #22c55e;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --text:        #f1f5f9;
  --bg:          #111827;
}

:root.dark body,
:root.dark .app-shell { background: #111827; }
:root.dark .main-content { background: #111827; }

:root.dark .card,
:root.dark .card-p { background: #1f2937 !important; border-color: rgba(255,255,255,0.08) !important; }
:root.dark .stat-card { background: #1f2937; border-color: rgba(255,255,255,0.08); }
:root.dark .quick-action { background: #1f2937; border-color: rgba(255,255,255,0.08); color: #f1f5f9; }
:root.dark .quick-action:hover { background: #243358; }

:root.dark .page-title,
:root.dark h1, :root.dark h2, :root.dark h3 { color: #f1f5f9; }
:root.dark .page-subtitle,
:root.dark p { color: #94a3b8; }
:root.dark .form-label { color: #94a3b8; }
:root.dark .stat-label { color: #64748b; }
:root.dark .stat-value { color: #f1f5f9; }

:root.dark .form-input,
:root.dark select,
:root.dark textarea,
:root.dark input[type="text"],
:root.dark input[type="number"] {
  background: #1f2937 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #f1f5f9 !important;
}
:root.dark .form-input::placeholder,
:root.dark textarea::placeholder { color: #64748b !important; }

:root.dark .chat-input-area { background: #1f2937; border-color: rgba(255,255,255,0.08); }
:root.dark .chat-textarea { background: #1f2937 !important; border-color: rgba(255,255,255,0.1) !important; color: #f1f5f9 !important; }
:root.dark .chat-textarea::placeholder { color: #64748b !important; }
:root.dark .message-bubble.ai { background: #1f2937; border-color: rgba(255,255,255,0.08); color: #f1f5f9; }
:root.dark .message-bubble.ai p,
:root.dark .message-bubble.ai li,
:root.dark .message-bubble.ai td { color: #f1f5f9; }

:root.dark .qb-content table th { background: #152040; color: #f1f5f9; }
:root.dark .qb-content table td { border-color: rgba(255,255,255,0.08); color: #f1f5f9; }
:root.dark .qb-content tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
:root.dark .feedback-card ol li,
:root.dark .feedback-card ul li,
:root.dark .feedback-card p { color: #cbd5e1; }
:root.dark .feedback-card ol li strong,
:root.dark .feedback-card h2,
:root.dark .feedback-card h3 { color: #f1f5f9; }

/* Feedback card — full dark mode */
:root.dark .feedback-card {
  background: #1f2937 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}
:root.dark .feedback-card h1,
:root.dark .feedback-card h2,
:root.dark .feedback-card h3,
:root.dark .feedback-card h4,
:root.dark .feedback-card h5 { color: #f1f5f9 !important; }
:root.dark .feedback-card p,
:root.dark .feedback-card li { color: #cbd5e1; }
:root.dark .feedback-card strong { color: #f1f5f9; }
:root.dark .score-display { color: #f1f5f9 !important; }
:root.dark .score-pct { color: #94a3b8 !important; }
:root.dark .feedback-score { border-bottom-color: rgba(255,255,255,0.08) !important; }
:root.dark .feedback-card details summary { color: #94a3b8 !important; }
/* Override inline var(--slate) and var(--navy) inside feedback card */
:root.dark .feedback-card [style*="var(--slate)"] { color: #94a3b8 !important; }
:root.dark .feedback-card [style*="var(--navy)"] { color: #e2e8f0 !important; }
:root.dark .feedback-card [style*="var(--border)"] { border-color: rgba(255,255,255,0.1) !important; }
:root.dark .feedback-card [style*="rgba(15,31,61,0.02)"],
:root.dark .feedback-card [style*="rgba(15,31,61,0.03)"] { background: rgba(255,255,255,0.04) !important; }
/* Action bar bottom of feedback */
:root.dark .feedback-card .btn-outline { 
  border-color: rgba(255,255,255,0.15) !important; 
  color: #e2e8f0 !important; 
}

:root.dark .qb-content h1,
:root.dark .qb-content h2,
:root.dark .qb-content h3,
:root.dark .qb-content h4 { color: #f1f5f9; border-bottom-color: rgba(255,255,255,0.08); }
:root.dark .qb-content p { color: #cbd5e1; }
:root.dark .qb-content li { color: #cbd5e1; }
:root.dark .qb-content strong { color: #f1f5f9; }
:root.dark .qb-content ul,
:root.dark .qb-content ol { color: #cbd5e1; }
:root.dark .qb-content blockquote { border-left-color: rgba(201,168,76,0.4); color: #94a3b8; }
:root.dark .qb-content code { background: rgba(255,255,255,0.08); color: #e2e8f0; }
/* Centre HTML questions: span tags inherit from parent p so they go light in dark mode */
:root.dark .qb-content span { color: inherit; }
:root.dark .qb-content { color: #cbd5e1; }

:root.dark .nav-item { color: rgba(255,255,255,0.5); }
:root.dark .nav-item:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
:root.dark .nav-item.active { background: rgba(201,168,76,0.2); color: #e8c96a; }

:root.dark .badge,
:root.dark .badge-gold { background: rgba(255,255,255,0.08); color: #f1f5f9; }
:root.dark .empty-state { color: #64748b; }
:root.dark .empty-title { color: #f1f5f9 !important; }
:root.dark .empty-icon { opacity: 0.4; }
:root.dark .progress-track { background: rgba(255,255,255,0.08); }

:root.dark .card h1, :root.dark .card h2, :root.dark .card h3,
:root.dark .card-p h1, :root.dark .card-p h2, :root.dark .card-p h3 { color: #f1f5f9 !important; }

:root.dark .quick-action { background: #1f2937 !important; border-color: rgba(255,255,255,0.08) !important; }
:root.dark .quick-action > div { color: #f1f5f9 !important; }
:root.dark .quick-action > p { color: #94a3b8 !important; }

:root.dark .recent-item-title, :root.dark .recent-item-date { color: #94a3b8 !important; }

:root.dark [style*="background: var(--white)"] { background: #374151 !important; color: #f1f5f9 !important; }
:root.dark [style*="background: "var(--white)""] { background: #374151 !important; }

:root.dark .card-p button[style*="var(--border)"] { border-color: rgba(255,255,255,0.15) !important; color: #e2e8f0 !important; }
:root.dark .card-p p[style*="var(--navy)"],
:root.dark .card-p div[style*="color: "var(--navy)""] { color: #f1f5f9 !important; }

:root.dark button[style*="border: 2px solid var(--border)"] { border-color: rgba(255,255,255,0.2) !important; color: #e2e8f0 !important; }

:root.dark .stat-value { color: #f1f5f9 !important; }
:root.dark .stat-label { color: #94a3b8 !important; }

:root.dark [style*="color: "var(--navy)""] { color: #f1f5f9 !important; }

:root.dark .page-header { background: #1f2937; border-color: rgba(255,255,255,0.08); }
:root.dark .page-title { color: #f1f5f9 !important; }
:root.dark .page-subtitle { color: #94a3b8 !important; }

:root.dark button[style*="border: 1px solid var(--border)"] { border-color: rgba(255,255,255,0.15) !important; color: #e2e8f0 !important; }

:root.dark .user-name { color: rgba(255,255,255,0.9) !important; }
:root.dark .user-level { color: rgba(255,255,255,0.5) !important; }

.card-heading, h3 { color: #0f1f3d; color: var(--navy); }
:root.dark .card-heading, :root.dark h3 { color: #f1f5f9 !important; }

.quick-action-label { color: #0f1f3d; color: var(--navy); }
:root.dark .quick-action-label { color: #f1f5f9 !important; }

:root.dark .quick-action { background: #1f2937 !important; }

.recent-item-title { color: #0f1f3d; color: var(--navy); }
:root.dark .recent-item-title { color: #e2e8f0 !important; }

/* Section A / B toggle — dark mode: clear active vs inactive distinction */
:root.dark .section-toggle-btn-active {
  background: #f8fafc !important;   /* near-white pill — clearly "selected" */
  color: #0f172a !important;        /* dark text on light bg */
  box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
}
:root.dark .section-toggle-btn-inactive {
  background: transparent !important;
  color: #94a3b8 !important;        /* muted slate — clearly "not selected" */
}

:root.dark .mcq-option-text { color: #e2e8f0 !important; }

:root.dark .cbt-question-text { color: #f1f5f9 !important; }

:root.dark .stat-card .stat-value { color: #f1f5f9 !important; }
:root.dark .stat-card .stat-label { color: #94a3b8 !important; }

.quick-action-btn {
  background: #ffffff;
  background: var(--white);
  width: 100%;
}
.quick-action-label {
  color: #0f1f3d;
  color: var(--navy);
}
.quick-action-sub {
  color: #64748b;
  color: var(--slate);
}

:root.dark .quick-action-btn {
  background: #1f2937 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
:root.dark .quick-action-label {
  color: #f1f5f9 !important;
}
:root.dark .quick-action-sub {
  color: #94a3b8 !important;
}
:root.dark .quick-action-btn:hover {
  border-color: #c9a84c !important;
  border-color: var(--gold) !important;
  background: #243358 !important;
}

:root.dark .auth-page { background: #0a0f1e; }
:root.dark .auth-card {
  background: #1f2937;
  border: 1px solid rgba(255,255,255,0.08);
  color: #f1f5f9;
}
:root.dark .onboard-card {
  background: #1f2937;
  border: 1px solid rgba(255,255,255,0.08);
  color: #f1f5f9;
}
:root.dark .auth-title { color: #f1f5f9; }
:root.dark .auth-sub { color: #94a3b8; }
:root.dark .auth-card .form-label { color: #94a3b8; }
:root.dark .onboard-card .form-label { color: #94a3b8; }
:root.dark .auth-card h2,
:root.dark .auth-card h3,
:root.dark .onboard-card h2,
:root.dark .onboard-card h3 { color: #f1f5f9; }
:root.dark .auth-card p,
:root.dark .onboard-card p { color: #94a3b8; }
:root.dark .onboard-step-title { color: #f1f5f9; }
:root.dark .onboard-step-sub { color: #94a3b8; }

.toolbar-btn {
  padding: 5px 8px; border-radius: 6px; font-size: 11px; font-weight: 500;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border); background: #ffffff; background: var(--white);
  color: #0f1f3d;
  color: var(--navy); cursor: pointer; transition: all 0.15s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.toolbar-btn:hover { background: #faf8f3; background: var(--cream); border-color: #0f1f3d; border-color: var(--navy); }
.toolbar-btn.active { background: #0f1f3d; background: var(--navy); color: #ffffff; color: var(--white); border-color: #0f1f3d; border-color: var(--navy); }
.toolbar-btn.listening { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.4); color: #dc2626; animation: pulse 1s infinite; }
.toolbar-btn.danger { color: #dc2626; border-color: rgba(239,68,68,0.3); }
.toolbar-btn.danger:hover { background: rgba(239,68,68,0.08); }

:root.dark .toolbar-btn { background: #1f2937; border-color: rgba(255,255,255,0.1); color: #e2e8f0; }
:root.dark .toolbar-btn:hover { background: #374151; border-color: rgba(255,255,255,0.2); }
:root.dark .toolbar-btn.active { background: #c9a84c; background: var(--gold); color: #0f1f3d; border-color: #c9a84c; border-color: var(--gold); }

.stmt-builder {
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(201,168,76,0.03);
}
.stmt-builder-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: rgba(201,168,76,0.08);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  font-size: 13px; font-weight: 600; color: #0f1f3d; color: var(--navy);
}
.stmt-builder-body { padding: 14px 16px; }
.stmt-col-header {
  display: grid; grid-template-columns: 1fr 140px;
  grid-gap: 8px;
  gap: 8px; padding: 0 0 6px 0;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #64748b;
  color: var(--slate); border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.stmt-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #64748b; color: var(--slate);
  margin: 12px 0 6px;
}
.stmt-row {
  display: grid; grid-template-columns: 1fr 100px;
  grid-gap: 6px;
  gap: 6px; margin-bottom: 4px;
}
.stmt-row.bold .stmt-label-input { font-weight: 700; }
.stmt-row.bold .stmt-value-input { font-weight: 700; }
.stmt-label-input, .stmt-value-input {
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px;
  font-size: 12px; font-family: 'DM Sans', system-ui, sans-serif; font-family: var(--font-body);
  background: #ffffff;
  background: var(--white); color: #0f1f3d; color: var(--navy);
  outline: none; transition: border-color 0.15s;
  min-width: 0; width: 100%; box-sizing: border-box;
}
.stmt-label-input:focus, .stmt-value-input:focus { border-color: #c9a84c; border-color: var(--gold); }
.stmt-value-input { text-align: right; }
.stmt-add-row {
  margin-top: 6px; padding: 4px 10px;
  background: none; border: 1px dashed #e2e8f0; border: 1px dashed var(--border);
  border-radius: 6px; font-size: 12px; color: #64748b; color: var(--slate);
  cursor: pointer; width: 100%; text-align: left;
  transition: all 0.15s;
}
.stmt-add-row:hover { border-color: #c9a84c; border-color: var(--gold); color: #0f1f3d; color: var(--navy); }

:root.dark .stmt-builder { background: rgba(255,255,255,0.02); border-color: rgba(201,168,76,0.2); }
:root.dark .stmt-builder-header { background: rgba(201,168,76,0.06); color: #f1f5f9; }
:root.dark .stmt-label-input, :root.dark .stmt-value-input { background: #1f2937; border-color: rgba(255,255,255,0.1); color: #f1f5f9; }
:root.dark .stmt-add-row { color: #94a3b8; border-color: rgba(255,255,255,0.1); }
:root.dark .stmt-add-row:hover { border-color: #c9a84c; border-color: var(--gold); color: #f1f5f9; }

.legal-content p {
  margin-bottom: 10px;
  line-height: 1.8;
  font-size: 14px;
  color: #0f1f3d;
  color: var(--text);
}
.legal-content ul {
  padding-left: 20px;
  margin-bottom: 14px;
}
.legal-content li {
  margin-bottom: 6px;
  line-height: 1.7;
  font-size: 14px;
}
.legal-content strong {
  color: #0f1f3d;
  color: var(--navy);
}
.legal-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  background: var(--white);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  box-shadow: 0 1px 4px rgba(15,31,61,0.08);
}
.mobile-menu-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #0f1f3d;
  color: var(--navy); border-radius: 8px;
}
.mobile-menu-btn:hover { background: #faf8f3; background: var(--cream); }

@media (max-width: 768px) {
  .mobile-header { display: flex; }

  /* Question bank mobile fixes */
  .qb-content,
  .message-bubble,
  .feedback-card ol {
  padding-left: 20px;
  margin: 8px 0 12px;
}
.feedback-card ol li {
  margin-bottom: 12px;
  line-height: 1.7;
  color: #0f1f3d;
  color: var(--text);
}
.feedback-card ol li strong {
  display: block;
  color: #0f1f3d;
  color: var(--navy);
  margin-bottom: 4px;
}
.feedback-card ul {
  padding-left: 18px;
  margin: 6px 0 10px;
}
.feedback-card ul li {
  margin-bottom: 6px;
  line-height: 1.65;
}
.feedback-card h2, .feedback-card h3 {
  margin: 16px 0 8px;
  font-size: 15px;
  color: #0f1f3d;
  color: var(--navy);
}
.feedback-card p {
  margin-bottom: 8px;
  line-height: 1.7;
}

.feedback-card {
    font-size: 13px;
  }
  .qb-content table,
  .message-bubble table,
  .feedback-card table {
    font-size: 11px;
    min-width: 0;
    min-width: initial;
  }
  .qb-content th,
  .qb-content td,
  .message-bubble th,
  .message-bubble td {
    padding: 5px 6px;
    font-size: 11px;
  }
  /* Long content sections */
  .qb-content pre,
  .message-bubble pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    width: 260px !important;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-collapse-btn { display: none; }
  .main-content { margin-left: 0 !important; }
  .main-content.sidebar-collapsed { margin-left: 0 !important; }
}

:root.dark .mobile-header {
  background: #0a1628;
  background: var(--navy-dark, #0a1628);
  border-bottom-color: rgba(255,255,255,0.08);
  color: #f1f5f9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
:root.dark .mobile-menu-btn { color: #f1f5f9; }

/* Mobile bell — hidden on desktop, shown in top bar on mobile */
.mobile-bell-wrapper {
  display: none;
}
@media (max-width: 768px) {
  .mobile-bell-wrapper {
    display: flex;
    align-items: center;
  }
  /* Hide the sidebar notification bell on mobile so it doesn't appear twice */
  .sidebar-bell-wrapper {
    display: none;
  }
}

/* Question bank page mobile container */
@media (max-width: 768px) {
  /* cards expand naturally on mobile — table scroll handled by inner wrapper */

  /* Constrain all content sections on mobile */
  .qb-content {
    max-width: calc(100vw - 48px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .qb-content table {
    min-width: 0;
    min-width: initial;
    font-size: 11px;
  }
  .qb-content th,
  .qb-content td {
    padding: 4px 6px;
    font-size: 11px;
    min-width: 60px;
  }
  /* First column narrower on mobile */
  .qb-content td:first-child,
  .qb-content th:first-child {
    min-width: 80px;
    max-width: 120px;
  }

  /* Long strings break on mobile */
  .qb-content p,
  .qb-content li,
  .qb-content td,
  .qb-content th {
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}

/* Dashboard grid mobile */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .quick-action-btn {
    padding: 10px 10px !important;
    gap: 8px !important;
  }
  .quick-action-label {
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }
  .quick-action-sub {
    font-size: 11px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
  }
}

/* ── Group 4 Mobile UX Fixes ───────────────────────────────── */

/* Sidebar X close button — only shows on mobile */
.sidebar-mobile-close {
  display: none;
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s;
}
.sidebar-mobile-close:hover {
  background: rgba(255,255,255,0.18);
  color: white;
}

@media (max-width: 768px) {
  /* Show X button on mobile */
  .sidebar-mobile-close {
    display: flex;
  }

  /* Increase base font size for readability */
  body { font-size: 15px; }

  /* Page headers */
  .page-title { font-size: 20px !important; }
  .page-subtitle { font-size: 13px !important; }

  /* Stat cards bigger on mobile */
  .stat-card { padding: 14px 16px !important; }

  /* Settings page — stack grid to single column */
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  /* Practice mode image upload — more breathing room */
  .image-upload-area {
    padding: 28px 16px !important;
  }

  /* Form inputs — comfortable touch targets */
  .form-input, select.form-input {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 12px 14px !important;
    min-height: 44px;
  }

  /* Chat textarea — larger touch target */
  .chat-textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  /* Page padding on mobile */
  .page-header {
    padding: 16px 16px 14px !important;
  }

  /* Main content padding */
  .main-content > div > div[style*="padding: "32px 40px""],
  .main-content > div > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Mobile fixes: padding, touch targets, tutor page ──────────── */
@media (max-width: 768px) {
  /* TutorPage inline padding override */
  div[style*="padding: \"32px 40px\""],
  div[style*="padding:\"32px 40px\""] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 20px !important;
  }

  /* Progress page improve button — bigger touch target */
  .topic-row button {
    padding: 5px 10px !important;
    font-size: 12px !important;
    min-height: 36px;
  }

  /* Settings change password — bigger touch target */
  .btn-outline {
    min-height: 44px;
  }

  /* QuestionBank Paper column span reset on mobile */
  div[style*="gridColumn: \"span 2\""] {
    grid-column: span 1 !important;
  }
}

/* ── Sidebar collapse button transitions smoothly ───────────────── */
.sidebar-collapse-btn {
  transition: left 0.3s ease, background 0.2s ease;
}

/* ── Question Bank mobile constraints ───────────────────────── */
@media (max-width: 768px) {
  /* Prevent expanded question content from forcing viewport wider */
  .qb-content {
    max-width: calc(100vw - 48px);
    overflow-x: hidden;
  }
  /* But table wrappers inside CAN scroll */
  .qb-content > div[style*="overflowX"] {
    max-width: calc(100vw - 48px);
    overflow-x: auto !important;
  }
}

/* ── Dark mode additions for new components ─────────────────── */

/* Table renderer (tableComponents.js) — affects all pages */
:root.dark .qb-content table th,
:root.dark .message-bubble table th,
:root.dark .feedback-card table th {
  background: #1e3a5f !important;
  color: #f1f5f9 !important;
  border-right-color: rgba(255,255,255,0.15) !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
}
:root.dark .qb-content table td,
:root.dark .message-bubble table td,
:root.dark .feedback-card table td {
  border-bottom-color: rgba(255,255,255,0.08) !important;
  border-right-color: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}
:root.dark .qb-content table,
:root.dark .message-bubble table,
:root.dark .feedback-card table {
  border-color: rgba(255,255,255,0.1) !important;
}
:root.dark .qb-content table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

/* Table scroll container */
:root.dark div[style*="border: 1px solid var(--border)"][style*="overflow"] {
  border-color: rgba(255,255,255,0.1) !important;
}

/* Message bubble — user */
:root.dark .message-bubble.user {
  background: #1e3a5f !important;
  color: #f1f5f9 !important;
}

/* Scroll hint in table */
:root.dark div[style*="scroll →"] {
  color: #94a3b8 !important;
}

/* BookmarksPage */
:root.dark .bookmark-preview,
:root.dark [style*="rgba(15,31,61,0.03)"] {
  background: rgba(255,255,255,0.03) !important;
}
:root.dark [style*="rgba(201,168,76,0.12)"] {
  background: rgba(201,168,76,0.08) !important;
}
:root.dark [style*="rgba(15,31,61,0.08)"] {
  background: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}

/* Progress page expanded history */
:root.dark [style*="rgba(15,31,61,0.04)"] {
  background: rgba(255,255,255,0.04) !important;
}
:root.dark [style*="rgba(15,31,61,0.03)"] {
  background: rgba(255,255,255,0.03) !important;
}

/* Tab switcher (Tutor, Payment page) */
:root.dark [style*="border-bottom: 1px solid var(--border)"][style*="background: var(--white)"] {
  background: #1f2937 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
:root.dark [style*="borderBottom: \"2px solid var(--gold)\""] {
  color: #f1f5f9 !important;
}

/* Phase pills in Tutor */
:root.dark [style*="rgba(15,31,61,0.04)"][style*="border-radius: 20"] {
  background: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
}

/* Step indicator circles (Practice page) */
:root.dark [style*="var(--border)"][style*="border-radius: \"50%\""] {
  background: rgba(255,255,255,0.1) !important;
}

/* cream backgrounds that appear in dark mode */
:root.dark [style*="background: var(--cream)"],
:root.dark [style*="background: \"var(--cream)\""] {
  background: #111827 !important;
}

/* Gold-tinted backgrounds */
:root.dark [style*="rgba(201,168,76,0.05)"],
:root.dark [style*="rgba(201,168,76,0.06)"],
:root.dark [style*="rgba(201,168,76,0.08)"] {
  background: rgba(201,168,76,0.06) !important;
}

/* ── Rich Editor (TipTap) ─────────────────────────────────────── */
.rich-editor-content {
  outline: none;
  font-size: 14px;
  line-height: 1.7;
  color: #0f1f3d;
  color: var(--navy);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  min-height: 100px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rich-editor-content table {
  border-collapse: collapse;
  /* Don't force 100% width — let wide tables scroll naturally */
  min-width: 100%;
  margin: 10px 0;
}
.rich-editor-content p { margin: 0 0 8px; }
.rich-editor-content h1 { font-size: 20px; font-weight: 700; margin: 12px 0 6px; color: #0f1f3d; color: var(--navy); }
.rich-editor-content h2 { font-size: 17px; font-weight: 700; margin: 10px 0 5px; color: #0f1f3d; color: var(--navy); }
.rich-editor-content h3 { font-size: 15px; font-weight: 600; margin: 8px 0 4px; color: #0f1f3d; color: var(--navy); }
.rich-editor-content ul, .rich-editor-content ol { padding-left: 20px; margin: 6px 0; }
.rich-editor-content li { margin-bottom: 3px; }
.rich-editor-content table { border-collapse: collapse; min-width: 100%; margin: 10px 0; }
.rich-editor-content th, .rich-editor-content td {
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border); padding: 6px 10px; text-align: left;
  vertical-align: top; white-space: nowrap; }
.rich-editor-content th { background: #0f1f3d; background: var(--navy); color: white; font-weight: 600; }
.rich-editor-content .selectedCell { background: rgba(15,31,61,0.05); }
.rich-editor-content img { max-width: 100%; border-radius: 6px; margin: 8px 0; }
.rich-editor-content blockquote {
  border-left: 3px solid #c9a84c;
  border-left: 3px solid var(--gold); padding-left: 12px;
  margin: 8px 0; color: #64748b; color: var(--slate); font-style: italic; }
.rich-editor-content code {
  background: rgba(15,31,61,0.06); border-radius: 4px;
  padding: 1px 5px; font-family: monospace; font-size: 13px; }
/* Placeholder */
.rich-editor-content p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left; color: #94a3b8; color: var(--slate-light);
  pointer-events: none; height: 0;
}

/* Dark mode */
:root.dark .rich-editor-content { color: #f1f5f9; }
:root.dark .rich-editor-content h1,
:root.dark .rich-editor-content h2,
:root.dark .rich-editor-content h3 { color: #f1f5f9; }
:root.dark .rich-editor-content th { background: #1e3a5f; }
:root.dark .rich-editor-content th,
:root.dark .rich-editor-content td { border-color: rgba(255,255,255,0.1); color: #e2e8f0; }

/* ── Floating chat button — mobile positioning ───────────────── */
/* On mobile, chat input areas have send buttons at bottom right  */
/* Move floating button to left side to avoid overlap             */
@media (max-width: 768px) {
  /* Move to left side on mobile */
  button[title="Quick ICAN Question"] {
    right: auto !important;
    left: 16px !important;
    bottom: 20px !important;
  }
}

/* ── PracticePage dark mode fixes ────────────────────────────── */
/* Mode toggle (Type/Photo buttons) */
:root.dark [style*="background: var(--border)"][style*="border-radius: 10"] {
  background: rgba(255,255,255,0.08) !important;
}
:root.dark [style*="background: var(--border)"][style*="border-radius: 10"] button[style*="var(--white)"] {
  background: #374151 !important;
  color: #f1f5f9 !important;
}
:root.dark [style*="background: var(--border)"][style*="border-radius: 10"] button[style*="transparent"] {
  color: #94a3b8 !important;
}
/* Image upload area */
:root.dark [style*="Take or upload a photo"] { color: #f1f5f9 !important; }
:root.dark [style*="border: 2px dashed"] {
  border-color: rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.03) !important;
  color: #94a3b8 !important;
}

/* ── Streaming cursor ──────────────────────────────────────────── */
.streaming-cursor::after {
  content: "▋";
  display: inline-block;
  animation: blink 0.8s step-end infinite;
  color: #0f1f3d;
  color: var(--navy);
  opacity: 0.7;
}
@keyframes blink { 0%, 100% { opacity: 0.7; } 50% { opacity: 0; } }

/* ── Chat pages — remove mobile header padding when chat is active ── */
@media (max-width: 768px) {
  /* On chat pages the mobile header is minimal — smaller height */
  .mobile-header.mobile-header-chat {
    padding: 6px 12px;
    padding-top: max(6px, env(safe-area-inset-top));
    min-height: 0;
    min-height: initial;
    box-shadow: none;
    border-bottom: 1px solid #e2e8f0;
    border-bottom: 1px solid var(--border);
  }
  /* Chat pages account for the slim mobile header height */
  .main-content.chat-active {
    padding-top: calc(44px + max(0px, env(safe-area-inset-top))) !important;
  }
  /* Chat page outer containers use viewport minus header.
     100dvh (dynamic viewport height) recalculates correctly after
     rotation on iOS; 100vh is the fallback for older browsers. */
  .chat-viewport {
    height: calc(100vh - 44px - max(0px, env(safe-area-inset-top))) !important;
    height: calc(100dvh - 44px - max(0px, env(safe-area-inset-top))) !important;
  }
  /* When filters panel is open, subtract its height too */
  .has-filters-panel .chat-viewport {
    height: calc(100vh - 44px - 52px - max(0px, env(safe-area-inset-top))) !important;
    height: calc(100dvh - 44px - 52px - max(0px, env(safe-area-inset-top))) !important;
  }
  /* Hide full page-header on mobile for chat pages — actions are in top bar */
  /* Exception: TutorPage page-header stays — it contains chapter nav */
  .main-content.chat-active .page-header:not(.tutor-header) {
    display: none !important;
  }
}

/* ── Chat pages — prevent main-content from growing beyond viewport ── */
/* Chat page outer divs use height:100vh which handles the constraint.  */
/* Prevent the body/main from adding scrollbars when chat is active.    */
.main-content:has(.chat-container),
.main-content:has(.chat-messages) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  min-height: 0;
  min-height: initial;
}

/* ── TutorPage cheatsheet dark mode ─────────────────────────── */
:root.dark .qb-content h1,
:root.dark .qb-content h2,
:root.dark .qb-content h3,
:root.dark .qb-content h4 { color: #f1f5f9; }
:root.dark .qb-content p,
:root.dark .qb-content li { color: #cbd5e1; }
:root.dark .qb-content strong { color: #f1f5f9; }
:root.dark .qb-content span { color: inherit; }
:root.dark .qb-content { color: #cbd5e1; }
:root.dark .qb-content table th { background: #1e3a5f; color: #f1f5f9; border-color: rgba(255,255,255,0.1); }
:root.dark .qb-content table td { color: #e2e8f0; border-color: rgba(255,255,255,0.08); }
:root.dark .qb-content code { background: rgba(255,255,255,0.08); color: #e2e8f0; }

/* ── Chat page hamburger — only on mobile ── */
@media (min-width: 769px) {
  .chat-page-hamburger { display: none !important; }
}

/* ── Collapsible chat header slim bar ─────────────────────────── */
.chat-slim-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--border);
  background: #ffffff;
  background: var(--white); flex-shrink: 0;
}
.chat-slim-header .slim-title { font-size: 13px; font-weight: 600; color: #0f1f3d; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chat-slim-header .slim-sub { font-size: 11px; color: #64748b; color: var(--slate); }
.chat-slim-header .slim-expand { font-size: 18px; color: #64748b; color: var(--slate); line-height: 1; }

/* Dark mode */
:root.dark .chat-slim-header { background: #1f2937; border-bottom-color: rgba(255,255,255,0.08); }
:root.dark .chat-slim-header .slim-title { color: #f1f5f9; }
:root.dark .chat-slim-header .slim-sub { color: #94a3b8; }
:root.dark .chat-slim-header .slim-expand { color: #94a3b8; }

/* ── Chat history drawer — fixed positioning on all screen sizes ── */
.chat-history-drawer {
  position: fixed;
  /* Desktop: below the desktop header (sidebar + page-header ~64px) */
  top: 64px; left: 260px; right: 0;
  background: #ffffff;
  background: var(--white); z-index: 200;
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  max-height: 360px; overflow-y: auto;
}
/* Collapsed sidebar */
.main-content.sidebar-collapsed .chat-history-drawer {
  left: 72px;
}
@media (max-width: 768px) {
  .chat-history-drawer {
    top: calc(44px + max(0px, env(safe-area-inset-top)));
    left: 0; right: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  }
}
:root.dark .chat-history-drawer {
  background: #1f2937;
  border-color: rgba(255,255,255,0.08);
}

/* ── Mobile top bar action icons — standalone, no button border ── */
.mobile-action-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; padding: 4px 6px; line-height: 1;
  color: #64748b;
  color: var(--slate); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-action-btn:active { opacity: 0.6; }
.mobile-action-btn.active { color: #c9a84c; color: var(--gold); }
.mobile-action-btn.new-btn { font-size: 14px; font-weight: 700; color: #64748b; color: var(--slate); letter-spacing: -0.5px; }
:root.dark .mobile-action-btn { color: #94a3b8; }
:root.dark .mobile-action-btn.active { color: #c9a84c; color: var(--gold); }

/* ── Mobile filters panel — only shows on mobile ─────────────── */
.mobile-filters-panel {
  display: none; /* hidden on desktop */
  background: #ffffff;
  background: var(--white);
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 89;
}
@media (max-width: 768px) {
  .mobile-filters-panel { display: flex; }
}
:root.dark .mobile-filters-panel { background: #1f2937; border-bottom-color: rgba(255,255,255,0.08); }

/* ── Tutor header — hide text labels on mobile ───────────────── */
@media (max-width: 768px) {
  .tutor-header-label { display: none; }
  .tutor-header-divider { display: none; }
  .tutor-phase-label { display: none; }
}

/* ── Dark mode — sidebar brand visibility ─────────────────────── */
:root.dark .brand-name { color: #f1f5f9; }
:root.dark .brand-icon { background: #c9a84c; background: var(--gold); color: #0f1f3d; }
:root.dark .sidebar-brand { border-bottom-color: rgba(255,255,255,0.1); }

/* ── Dark mode — Needs Attention / progress bars ─────────────── */
:root.dark .progress-fill { background: #3b82f6; }
:root.dark .progress-fill.red { background: #ef4444; }
:root.dark .progress-fill.green { background: #22c55e; }
:root.dark .progress-fill.gold { background: #c9a84c; background: var(--gold); }
:root.dark .progress-bar { background: rgba(255,255,255,0.08); }
:root.dark .topic-row { border-bottom-color: rgba(255,255,255,0.06); }

/* ── Dark mode — stat cards inline color fix ──────────────────── */
:root.dark .stat-card h2,
:root.dark .stat-card .stat-value { color: #f1f5f9; }
:root.dark .stat-card p,
:root.dark .stat-card .stat-label { color: #94a3b8; }

/* ── Dark mode specific fixes ─────────────────────────────────── */

/* Sidebar brand — always white, sidebar is always dark navy */
.brand-name { color: #ffffff !important; }
.brand-icon { background: #c9a84c !important; background: var(--gold) !important; color: #0f1f3d !important; color: var(--navy) !important; }
:root.dark .sidebar-brand .brand-name { color: #ffffff !important; }

/* Dashboard inline navy text on dark cards */
:root.dark .card [style*="color: var(--navy)"],
:root.dark .card-p [style*="color: var(--navy)"],
:root.dark .stat-card [style*="color: var(--navy)"] { color: #f1f5f9 !important; }

/* Topic score and progress text on dark */
:root.dark .topic-name { color: #e2e8f0 !important; }
:root.dark .topic-score { color: inherit; }

/* Needs Attention section — progress bar label */
:root.dark .card-p h3[style*="color: var(--navy)"] { color: #f1f5f9 !important; }

/* Quick action buttons on dark */
:root.dark .quick-action-btn { background: #243358 !important; border-color: rgba(255,255,255,0.1) !important; }
:root.dark .quick-action-label { color: #f1f5f9 !important; }
:root.dark .quick-action-sub { color: #94a3b8 !important; }

/* Stat cards value/label on dark */
:root.dark .stat-value { color: #f1f5f9 !important; }
:root.dark .stat-label { color: #94a3b8 !important; }

/* Page title/subtitle already handled but ensure inline overrides */
:root.dark [style*="color: var(--navy)"] { color: #f1f5f9 !important; }
:root.dark [style*="color: \"var(--navy)\""] { color: #f1f5f9 !important; }

/* Mobile action buttons on dark bg mobile header */
:root.dark .mobile-action-btn { color: #94a3b8; }
:root.dark .mobile-action-btn.active { color: #c9a84c; color: var(--gold); }

/* Tutor header on dark */
:root.dark .tutor-header { background: #1f2937 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
:root.dark .tutor-header button { color: #94a3b8; }
:root.dark .tutor-header div[style*="font-size: 14px"] { color: #f1f5f9 !important; }
:root.dark .tutor-header div[style*="font-size: 13px"] { color: #f1f5f9 !important; }

/* ── Button dark mode — comprehensive fix ─────────────────────── */
/* btn-primary: navy bg + white text becomes gold bg + dark text
   (navy on navy is invisible in dark mode) */
:root.dark .btn-primary {
  background: #c9a84c !important;
  background: var(--gold) !important;
  color: #0f1f3d !important;
  border-color: #c9a84c !important;
  border-color: var(--gold) !important;
}
:root.dark .btn-primary:hover {
  background: #e8c97a !important;
  background: var(--gold-light) !important;
  color: #0f1f3d !important;
}

/* btn-gold: already gold bg, stays the same — just ensure text is dark */
:root.dark .btn-gold {
  background: #c9a84c;
  background: var(--gold);
  color: #0f1f3d;
}
:root.dark .btn-gold:hover { background: #e8c97a; background: var(--gold-light); }

/* btn-outline: transparent + navy border + navy text */
:root.dark .btn-outline {
  background: transparent !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.2) !important;
}
:root.dark .btn-outline:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #f1f5f9 !important;
}

/* btn-ghost: transparent + slate text */
:root.dark .btn-ghost {
  color: #94a3b8;
}
:root.dark .btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: #f1f5f9;
}

/* send-btn — chat send button */
:root.dark .send-btn {
  background: #c9a84c !important;
  background: var(--gold) !important;
  color: #0f1f3d !important;
}

/* toolbar-btn danger (reset/delete) */
:root.dark .toolbar-btn.danger { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* form-input on dark — ensure selects and inputs are readable */
:root.dark .form-input {
  background: #374151 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
:root.dark .form-input option {
  background: #374151;
  color: #f1f5f9;
}

/* Auth page submit button */
:root.dark .btn.btn-primary.btn-lg {
  background: #c9a84c !important;
  background: var(--gold) !important;
  color: #0f1f3d !important;
}

/* ── Message edit button ──────────────────────────────────────── */
.msg-edit-btn {
  position: absolute; bottom: 4px; right: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 11px; opacity: 0; transition: opacity 0.15s;
  padding: 2px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.message-bubble.user:hover .msg-edit-btn,
.message-bubble.user:focus-within .msg-edit-btn { opacity: 0.7; }
/* Always show on mobile (no hover) */
@media (max-width: 768px) {
  .msg-edit-btn { opacity: 0.5; }
}
.msg-edit-btn:hover { opacity: 1 !important; }

/* ── PracticePage dark mode fixes (answer section, feedback, marks, buttons) ── */
/* Streaming feedback / reasoning container (uses background: var(--white)) */
:root.dark [style*="background: var(--white)"][style*="border: 1px solid var(--border)"] {
  background: #1f2937 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
/* Reasoning step label text */
:root.dark [style*="color: var(--navy)"][style*="fontWeight"] {
  color: #f1f5f9 !important;
}
/* rgba(15,31,61,...) backgrounds are navy-tinted — invert for dark mode */
:root.dark [style*="rgba(15,31,61,0.02)"] { background: rgba(255,255,255,0.03) !important; }
:root.dark [style*="rgba(15,31,61,0.03)"] { background: rgba(255,255,255,0.03) !important; }
:root.dark [style*="rgba(15,31,61,0.04)"] { background: rgba(255,255,255,0.04) !important; }
:root.dark [style*="rgba(15,31,61,0.06)"] { background: rgba(255,255,255,0.05) !important; }
:root.dark [style*="rgba(15,31,61,0.07)"] { background: rgba(255,255,255,0.05) !important; }

/* Marks / score area inside feedback-card */
:root.dark .score-display { color: #f1f5f9 !important; }
:root.dark .score-pct { color: #94a3b8 !important; }

/* Action buttons at the bottom of feedback card */
:root.dark .feedback-card .btn-outline {
  border-color: rgba(255,255,255,0.18) !important;
  color: #e2e8f0 !important;
  background: transparent !important;
}
:root.dark .feedback-card .btn-primary {
  background: #1a3260 !important;
  background: var(--navy-mid) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.1) !important;
}
:root.dark .feedback-card button[style*="background: none"] {
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.15) !important;
}
/* Submitted answer details section */
:root.dark .feedback-card details summary { color: #94a3b8 !important; }
:root.dark .feedback-card details > div { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; }

/* Upload/image area */
:root.dark [style*="background: var(--cream)"] { background: #1a2744 !important; }
/* Upload dropzone border */
:root.dark [style*="border: 2px dashed var(--border)"] { border-color: rgba(255,255,255,0.15) !important; }

/* CentreMembersPage detail panel dark mode */
:root.dark [style*="color: var(--navy)"][style*="fontWeight: 700"] { color: #f1f5f9 !important; }

/* ── Practice Lab ─────────────────────────────────────────────────────────── */

.practice-lab {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #faf8f3;
  background: var(--cream);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
}

/* ── Context strip (paper + level) ──────────────────────────────────────── */
.lab-context-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  background: #0f1f3d;
  background: var(--navy);
  color: #ffffff;
  color: var(--white);
  font-size: 12px;
  flex-shrink: 0;
}
.lab-context-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lab-context-label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  color: var(--slate-light);
}
.lab-context-value {
  font-weight: 600;
  font-size: 12px;
  color: #e8c97a;
  color: var(--gold-light);
}
.lab-context-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.15);
}
.lab-switch-paper {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(15,35,64,0.25);
  border-radius: 6px;
  color: #0f1f3d;
  color: var(--navy, #0f2340);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  transition: all 0.15s;
  white-space: nowrap;
}
.lab-switch-paper:hover {
  border-color: #0f1f3d;
  border-color: var(--navy, #0f2340);
  background: rgba(15,35,64,0.06);
}
:root.dark .lab-switch-paper {
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.7);
}
:root.dark .lab-switch-paper:hover {
  border-color: rgba(255,255,255,0.5);
  color: #ffffff;
  background: rgba(255,255,255,0.06);
}

/* ── Paper picker overlay ────────────────────────────────────────────────── */
.lab-paper-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lab-paper-picker {
  background: #ffffff;
  color: #1a1a2e;
  border-radius: 12px;
  width: min(420px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  overflow: hidden;
}
:root.dark .lab-paper-picker {
  background: #1a3260;
  background: var(--navy-mid, #1e2d45);
  color: #ffffff;
}
.lab-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1a1a2e;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
:root.dark .lab-picker-header {
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.08);
}
.lab-picker-close {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
}
.lab-picker-close:hover { opacity: 1; }
.lab-picker-levels {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
:root.dark .lab-picker-levels {
  border-bottom-color: rgba(255,255,255,0.06);
}
.lab-picker-level-btn {
  flex: 1 1;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  background: none;
  font-size: 0.8rem;
  cursor: pointer;
  color: #555;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  transition: all 0.15s;
}
:root.dark .lab-picker-level-btn {
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
}
.lab-picker-level-btn.active {
  background: #0f1f3d;
  background: var(--navy, #0f2340);
  color: #ffffff;
  color: var(--white, #fff);
  border-color: transparent;
}
:root.dark .lab-picker-level-btn.active {
  background: rgba(255,255,255,0.15);
}
.lab-picker-papers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 14px;
  overflow-y: auto;
}
.lab-picker-paper-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.10);
  background: none;
  text-align: left;
  font-size: 0.88rem;
  cursor: pointer;
  color: #1a1a2e;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  transition: all 0.15s;
}
:root.dark .lab-picker-paper-btn {
  border-color: rgba(255,255,255,0.08);
  color: #ffffff;
}
.lab-picker-paper-btn:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
}
:root.dark .lab-picker-paper-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}
.lab-picker-paper-btn.active {
  border-color: #0f1f3d;
  border-color: var(--navy, #0f2340);
  background: rgba(15,35,64,0.06);
  font-weight: 600;
}
:root.dark .lab-picker-paper-btn.active {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.07);
}
.lab-picker-check {
  color: #0f1f3d;
  color: var(--navy, #0f2340);
  font-size: 0.85rem;
  flex-shrink: 0;
}
:root.dark .lab-picker-check { color: rgba(255,255,255,0.7); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.lab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  background: #ffffff;
  background: var(--white);
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lab-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #0f1f3d;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}
.lab-subtitle {
  font-size: 12px;
  color: #64748b;
  color: var(--slate);
  margin: 2px 0 0;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.lab-tabs {
  display: flex;
  background: #ffffff;
  background: var(--white);
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 4px;
  overflow-x: auto;
  flex-shrink: 0;
}
.lab-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 14px 8px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
  color: #64748b;
  color: var(--slate);
  gap: 1px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
}
.lab-tab:hover {
  color: #0f1f3d;
  color: var(--navy);
  border-bottom-color: #e2e8f0;
  border-bottom-color: var(--border);
}
.lab-tab.active {
  color: #0f1f3d;
  color: var(--navy);
  border-bottom-color: #c9a84c;
  border-bottom-color: var(--gold);
}
.lab-tab-label {
  font-size: 13px;
  font-weight: 600;
}
.lab-tab-desc {
  font-size: 10px;
  color: #94a3b8;
  color: var(--slate-light);
}
.lab-tab.active .lab-tab-desc {
  color: #c9a84c;
  color: var(--gold);
}
.lab-tab.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto; /* keep tooltip via title attr */
}
.lab-tab.disabled:hover {
  color: #64748b;
  color: var(--slate);
  border-bottom-color: transparent;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.lab-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
  background: #faf8f3;
  background: var(--cream);
}

.lab-tab-content {
  max-width: 800px;
  margin: 0 auto;
}

/* ── Section header ──────────────────────────────────────────────────────── */
.lab-section-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.lab-section-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.lab-section-header h3 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 700;
  color: #0f1f3d;
  color: var(--navy);
  font-family: 'Playfair Display', Georgia, serif;
  font-family: var(--font-display);
}
.lab-section-header p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  color: var(--slate);
  line-height: 1.5;
}

/* ── Structure pill ──────────────────────────────────────────────────────── */
.lab-structure-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: #64748b;
  color: var(--slate);
  margin-bottom: 16px;
  line-height: 1.4;
}
.lab-structure-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.lab-form {
  background: #ffffff;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 12px;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15,31,61,0.08);
  box-shadow: var(--shadow-sm);
}
.lab-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #0f1f3d;
  color: var(--navy);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.lab-label-opt {
  text-transform: none;
  font-weight: 400;
  color: #64748b;
  color: var(--slate);
  letter-spacing: 0;
  font-size: 11px;
}
.lab-textarea {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  color: #0f1f3d;
  color: var(--navy);
  background: #ffffff;
  background: var(--bg);
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.lab-textarea:focus {
  outline: none;
  border-color: #0f1f3d;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,31,61,0.08);
}
.lab-input,
.lab-select {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  color: #0f1f3d;
  color: var(--navy);
  background: #ffffff;
  background: var(--bg);
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.lab-input:focus,
.lab-select:focus {
  outline: none;
  border-color: #0f1f3d;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,31,61,0.08);
}

/* ── Toggles ─────────────────────────────────────────────────────────────── */
.lab-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  border-top: 1px solid var(--border);
}
.lab-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #0f1f3d;
  color: var(--navy);
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
}
.lab-toggle-row input[type="checkbox"] {
  accent-color: #0f1f3d;
  accent-color: var(--navy);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── Difficulty selector ─────────────────────────────────────────────────── */
.lab-difficulty-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.lab-diff-btn {
  flex: 1 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  border: 1.5px solid #e2e8f0;
  border: 1.5px solid var(--border);
  background: #ffffff;
  background: var(--bg);
  color: #64748b;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.lab-diff-btn:hover {
  border-color: #0f1f3d;
  border-color: var(--navy);
  color: #0f1f3d;
  color: var(--navy);
}
.lab-diff-btn.active {
  border-color: #0f1f3d;
  border-color: var(--navy);
  background: #0f1f3d;
  background: var(--navy);
  color: #ffffff;
  color: var(--white);
}
.lab-diff-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.lab-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.lab-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lab-btn.primary {
  background: #0f1f3d;
  background: var(--navy);
  color: #ffffff;
  color: var(--white);
  box-shadow: 0 1px 3px rgba(15,31,61,0.08);
  box-shadow: var(--shadow-sm);
}
.lab-btn.primary:hover:not(:disabled) {
  background: #1a3260;
  background: var(--navy-mid);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15,31,61,0.12);
  box-shadow: var(--shadow-md);
}
.lab-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
/* Gold button — for mark scheme reveal (high-value action) */
.lab-btn.gold {
  background: #c9a84c;
  background: var(--gold);
  color: #0f1f3d;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(15,31,61,0.08);
  box-shadow: var(--shadow-sm);
}
.lab-btn.gold:hover {
  background: #e8c97a;
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15,31,61,0.12);
  box-shadow: var(--shadow-md);
}
.lab-btn.secondary {
  background: #faf8f3;
  background: var(--cream);
  color: #64748b;
  color: var(--slate);
  border: 1.5px solid #e2e8f0;
  border: 1.5px solid var(--border);
}
.lab-btn.secondary:hover {
  background: #e2e8f0;
  background: var(--border);
  color: #0f1f3d;
  color: var(--navy);
}
.lab-btn.pdf {
  background: transparent;
  color: #0f1f3d;
  color: var(--navy);
  border: 1.5px solid #0f1f3d;
  border: 1.5px solid var(--navy);
}
.lab-btn.pdf:hover {
  background: #faf8f3;
  background: var(--cream);
}

/* ── Spinner dots ────────────────────────────────────────────────────────── */
.lab-spinner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: lab-bounce 1s infinite ease-in-out;
}
.dot:nth-child(2) { animation-delay: 0.15s; }
.dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes lab-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Coming soon hint ────────────────────────────────────────────────────── */
.lab-coming-soon-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #ffffff;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  color: #64748b;
  color: var(--slate);
  margin-bottom: 16px;
  line-height: 1.5;
}
.lab-coming-soon-hint strong {
  color: #0f1f3d;
  color: var(--navy);
}

/* ── Steps (SSE progress) ────────────────────────────────────────────────── */
.lab-steps {
  background: #faf8f3;
  background: var(--cream);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lab-step {
  font-size: 12px;
  color: #64748b;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lab-step-dot {
  font-size: 8px;
  color: #c9a84c;
  color: var(--gold);
}

/* ── Output ──────────────────────────────────────────────────────────────── */
.lab-output {
  background: #ffffff;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 12px;
  border-radius: var(--radius);
  padding: 20px;
  line-height: 1.55;
  color: #0f1f3d;
  color: var(--navy);
  position: relative;
  box-shadow: 0 1px 3px rgba(15,31,61,0.08);
  box-shadow: var(--shadow-sm);
}
/* Mark scheme variant — gold accent on top border */
.lab-output.lab-output-markscheme {
  border-top: 3px solid #c9a84c;
  border-top: 3px solid var(--gold);
}
.lab-markscheme-banner {
  background: #fef3c7;
  background: var(--amber-light);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #d97706;
  color: var(--amber);
  margin-bottom: 16px;
}
.lab-output-content {
  font-size: 13.5px;
}
.lab-cursor::after {
  content: "▋";
  animation: lab-blink 1s step-end infinite;
  color: #c9a84c;
  color: var(--gold);
  font-size: 14px;
}
@keyframes lab-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Output typography (content-area blue is intentional — signals study material) */
.lab-h1 {
  font-size: 17px;
  font-weight: 700;
  /* Blue here is semantic: "this is exam question content" — intentional, not brand accent */
  color: #1e3a8a;
  margin: 14px 0 5px;
  padding-bottom: 4px;
  border-bottom: 2px solid #dbeafe;
  font-family: 'Playfair Display', Georgia, serif;
  font-family: var(--font-display);
}
.lab-h2 {
  font-size: 15px;
  font-weight: 700;
  color: #0f1f3d;
  color: var(--navy);
  margin: 12px 0 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-family: var(--font-display);
}
.lab-h3 {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  color: var(--slate);
  margin: 8px 0 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lab-h4 {
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  color: #64748b;
  color: var(--slate);
  margin: 10px 0 3px;
}
.lab-hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}
.lab-hr.thick {
  border-top: 2px solid #c9a84c;
  border-top: 2px solid var(--gold);
  opacity: 0.4;
}
.lab-ul {
  padding-left: 20px;
  margin: 8px 0;
}
.lab-ul li {
  margin-bottom: 4px;
  color: #0f1f3d;
  color: var(--navy);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.lab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
}
.lab-table th {
  /* Table headers stay blue — semantic: "this is exam structure" */
  background: #1e3a8a;
  color: #fff;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
}
.lab-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border);
  color: #0f1f3d;
  color: var(--navy);
}
.lab-table tr:nth-child(even) td {
  background: #faf8f3;
  background: var(--cream);
}
.lab-table tr:last-child td {
  background: #eff6ff;
  font-weight: 700;
  color: #1e3a8a;
  border-bottom: none;
}

/* ── Info / notice boxes ─────────────────────────────────────────────────── */
.lab-info-box {
  background: #ffffff;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  font-size: 13px;
  color: #64748b;
  color: var(--slate);
  text-align: center;
}
.lab-preseen-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef3c7;
  background: var(--amber-light);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #92400e;
}
.lab-fire {
  font-size: 20px;
  flex-shrink: 0;
}
.lab-error {
  background: #fee2e2;
  background: var(--red-light);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #dc2626;
  color: var(--red);
  margin-bottom: 12px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lab-body { padding: 12px; }
  .lab-form { padding: 16px; }
  .lab-output { padding: 16px; }
  .lab-context-strip { gap: 10px; padding: 8px 12px; }
  .lab-header { padding: 12px 12px 8px; }
  .lab-tabs { padding: 0 8px; }
  .lab-tab { padding: 8px 10px 6px; }
  .lab-actions { gap: 6px; }
  .lab-btn { padding: 8px 14px; font-size: 12px; }
  .lab-difficulty-row { gap: 6px; }
}

/* ══ DARK MODE ═══════════════════════════════════════════════════════════════
   App chrome (header, tabs, form cards, buttons) → CSS variables → auto-dark
   Content area (output, table headers, lab-h1) → intentional blue kept,
   lightened for readability on dark backgrounds.
════════════════════════════════════════════════════════════════════════════ */

/* Dark mode vars override — declare what the lab needs */
:root.dark {
  --bg: #0f1f3d;
  --cream: #0a1628;
  --white: #1a2d4a;
  --border: rgba(255,255,255,0.1);
  --text: #e2e8f0;
}

/* Context strip on dark: navy is already dark so keep it slightly lighter */
:root.dark .lab-context-strip {
  background: #1a3260;
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Header */
:root.dark .lab-header {
  background: #1a2d4a;
  border-bottom-color: rgba(255,255,255,0.08);
}
:root.dark .lab-title { color: #e2e8f0; }
:root.dark .lab-subtitle { color: #94a3b8; color: var(--slate-light); }

/* Tabs */
:root.dark .lab-tabs {
  background: #1a2d4a;
  border-bottom-color: rgba(255,255,255,0.08);
}
:root.dark .lab-tab { color: #94a3b8; color: var(--slate-light); }
:root.dark .lab-tab:hover { color: #e2e8f0; border-bottom-color: rgba(255,255,255,0.2); }
:root.dark .lab-tab.active { color: #e8c97a; color: var(--gold-light); border-bottom-color: #c9a84c; border-bottom-color: var(--gold); }
:root.dark .lab-tab-desc { color: #475569; }
:root.dark .lab-tab.active .lab-tab-desc { color: #c9a84c; color: var(--gold); }

/* Structure pill */
:root.dark .lab-structure-pill {
  background: #1a2d4a;
  border-color: rgba(255,255,255,0.08);
  color: #94a3b8;
  color: var(--slate-light);
}

/* Form */
:root.dark .lab-form {
  background: #1a2d4a;
  border-color: rgba(255,255,255,0.08);
}
:root.dark .lab-label { color: #cbd5e1; }
:root.dark .lab-label-opt { color: #94a3b8; color: var(--slate-light); }
:root.dark .lab-textarea {
  background: #0f1f3d;
  border-color: rgba(255,255,255,0.12);
  color: #e2e8f0;
}
:root.dark .lab-textarea:focus {
  border-color: #c9a84c;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}
:root.dark .lab-input,
:root.dark .lab-select {
  background: #0f1f3d;
  border-color: rgba(255,255,255,0.12);
  color: #e2e8f0;
}
:root.dark .lab-select option { background: #1a2d4a; color: #e2e8f0; }
:root.dark .lab-input:focus,
:root.dark .lab-select:focus {
  border-color: #c9a84c;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

/* Toggles */
:root.dark .lab-toggle-row { color: #cbd5e1; }
:root.dark .lab-toggle-row input[type="checkbox"] { accent-color: #c9a84c; accent-color: var(--gold); }

/* Difficulty buttons */
:root.dark .lab-diff-btn {
  background: #0f1f3d;
  border-color: rgba(255,255,255,0.12);
  color: #94a3b8;
  color: var(--slate-light);
}
:root.dark .lab-diff-btn:hover { border-color: #c9a84c; border-color: var(--gold); color: #e8c97a; color: var(--gold-light); }
:root.dark .lab-diff-btn.active { background: #c9a84c; background: var(--gold); border-color: #c9a84c; border-color: var(--gold); color: #0f1f3d; color: var(--navy); }

/* Buttons */
:root.dark .lab-btn.primary { background: #1a3260; background: var(--navy-mid); color: #e2e8f0; }
:root.dark .lab-btn.primary:hover:not(:disabled) { background: #234078; }
:root.dark .lab-btn.secondary {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  color: var(--slate-light);
  border-color: rgba(255,255,255,0.1);
}
:root.dark .lab-btn.secondary:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
:root.dark .lab-btn.pdf {
  background: transparent;
  color: #e8c97a;
  color: var(--gold-light);
  border-color: #c9a84c;
  border-color: var(--gold);
}
:root.dark .lab-btn.pdf:hover { background: rgba(201,168,76,0.1); }

/* Coming soon hint */
:root.dark .lab-coming-soon-hint {
  background: #1a2d4a;
  border-color: rgba(255,255,255,0.08);
  color: #94a3b8;
  color: var(--slate-light);
}
:root.dark .lab-coming-soon-hint strong { color: #e2e8f0; }

/* Steps */
:root.dark .lab-steps {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
:root.dark .lab-step { color: #94a3b8; color: var(--slate-light); }
:root.dark .lab-step-dot { color: #c9a84c; color: var(--gold); }

/* Output — structural chrome goes dark, content headings stay blue (lightened) */
:root.dark .lab-output {
  background: #1a2d4a;
  border-color: rgba(255,255,255,0.08);
  color: #e2e8f0;
}
:root.dark .lab-output.lab-output-markscheme { border-top-color: #c9a84c; border-top-color: var(--gold); }
:root.dark .lab-markscheme-banner {
  background: rgba(201,168,76,0.12);
  color: #e8c97a;
  color: var(--gold-light);
}
:root.dark .lab-cursor::after { color: #c9a84c; color: var(--gold); }

/* Content typography in dark */
:root.dark .lab-h1 {
  color: #93c5fd; /* lightened blue — readable on dark, still semantically "exam content" */
  border-bottom-color: rgba(147,197,253,0.2);
}
:root.dark .lab-h2 { color: #e2e8f0; }
:root.dark .lab-h3 { color: #94a3b8; }
:root.dark .lab-h4 { color: #94a3b8; }
:root.dark .lab-hr { border-top-color: rgba(255,255,255,0.08); }
:root.dark .lab-hr.thick { border-top-color: #c9a84c; border-top-color: var(--gold); opacity: 0.4; }
:root.dark .lab-ul li { color: #e2e8f0; }

/* Tables in dark */
:root.dark .lab-table th { background: #1e3a8a; } /* exam-structure blue — intentional */
:root.dark .lab-table td { border-bottom-color: rgba(255,255,255,0.06); color: #cbd5e1; }
:root.dark .lab-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
:root.dark .lab-table tr:last-child td { background: rgba(59,130,246,0.12); color: #93c5fd; }

/* Notices */
:root.dark .lab-info-box {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #94a3b8;
  color: var(--slate-light);
}
:root.dark .lab-preseen-notice {
  background: rgba(254,215,170,0.08);
  border-color: rgba(254,215,170,0.2);
  color: #fcd34d;
}
:root.dark .lab-error {
  background: rgba(254,242,242,0.06);
  border-color: rgba(254,202,202,0.2);
  color: #f87171;
}

/* ── Diet picker (Unseen Predictor) ─────────────────────────────────────── */
.lab-diet-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  color: var(--slate);
  margin-bottom: 8px;
}
.lab-diet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.lab-diet-btn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  border: 1.5px solid var(--border);
  background: #ffffff;
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #0f1f3d;
  color: var(--text);
  transition: all 0.15s ease;
}
.lab-diet-btn:hover:not(:disabled) {
  border-color: #c9a84c;
  border-color: var(--gold);
  color: #c9a84c;
  color: var(--gold);
}
.lab-diet-btn.upcoming {
  border-color: #22c55e;
  color: #166534;
  background: #f0fdf4;
}
.lab-diet-btn.upcoming:hover:not(:disabled) {
  background: #dcfce7;
}
.lab-diet-btn.upcoming.active {
  background: #22c55e;
  color: #fff;
  border-color: #16a34a;
}
.lab-diet-btn.past {
  border-color: #e2e8f0;
  border-color: var(--border);
  color: #64748b;
  color: var(--slate);
}
.lab-diet-btn.past:hover:not(:disabled) {
  border-color: #c9a84c;
  border-color: var(--gold);
  color: #c9a84c;
  color: var(--gold);
}
.lab-diet-btn.past.active {
  background: #c9a84c;
  background: var(--gold);
  color: #fff;
  border-color: #b45309;
  border-color: var(--gold-dark, #b45309);
}
.lab-diet-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Diet picker — dark mode */
:root.dark .lab-diet-section-label { color: #94a3b8; color: var(--slate-light); }
:root.dark .lab-diet-btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: #cbd5e1;
}
:root.dark .lab-diet-btn.upcoming {
  border-color: #16a34a;
  color: #86efac;
  background: rgba(34,197,94,0.08);
}
:root.dark .lab-diet-btn.upcoming:hover:not(:disabled) { background: rgba(34,197,94,0.16); }
:root.dark .lab-diet-btn.upcoming.active { background: #16a34a; color: #fff; }
:root.dark .lab-diet-btn.past { border-color: rgba(255,255,255,0.12); color: #94a3b8; }
:root.dark .lab-diet-btn.past:hover:not(:disabled) { border-color: #c9a84c; border-color: var(--gold); color: #c9a84c; color: var(--gold); }
:root.dark .lab-diet-btn.past.active { background: #c9a84c; background: var(--gold); color: #fff; }

/* ── Exam Schedule Card ────────────────────────────────────────── */
.exam-schedule-card {
  transition: border-color 0.2s, background 0.2s;
}

/* Row hover — subtle highlight so it feels interactive */
.exam-schedule-row {
  transition: background 0.12s;
  border-radius: 6px;
  margin: 0 -4px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.exam-schedule-row:hover {
  background: rgba(15, 31, 61, 0.04);
}

/* Dark mode — card shell */
:root.dark .exam-schedule-card {
  background: linear-gradient(135deg, rgba(220,38,38,0.06) 0%, rgba(239,68,68,0.03) 100%) !important;
}
:root.dark .exam-schedule-card[style*="rgba(201,168,76"] {
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(15,31,61,0.06) 100%) !important;
}

/* Dark mode — row separator and hover */
:root.dark .exam-schedule-row {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
:root.dark .exam-schedule-row:hover {
  background: rgba(255,255,255,0.04);
}

/* Dark mode — paper name colours */
:root.dark .exam-schedule-card .paper-name-urgent {
  color: #fca5a5; /* softened red readable on dark */
}
:root.dark .exam-schedule-card .paper-name-today {
  color: #f87171;
}

/* Dark mode — "YOUR PAPER" badge */
:root.dark .exam-schedule-card .your-paper-badge {
  background: rgba(201,168,76,0.2);
  color: #c9a84c;
  color: var(--gold);
  border-color: rgba(201,168,76,0.35);
}

/* Dark mode — days pills */
:root.dark .exam-schedule-card .days-pill-urgent {
  background: rgba(220,38,38,0.18);
  color: #fca5a5;
}
:root.dark .exam-schedule-card .days-pill-soon {
  background: rgba(202,138,4,0.15);
  color: #fde047;
}
:root.dark .exam-schedule-card .days-pill-default {
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
}

/* Dark mode — CTA buttons inside card */
:root.dark .exam-schedule-card button {
  color: #cbd5e1;
}
:root.dark .exam-schedule-card button:first-child {
  background: rgba(255,255,255,0.06) !important;
}
:root.dark .exam-schedule-card button:last-child {
  border-color: rgba(255,255,255,0.15) !important;
}

/* Dark mode — "🚨 Exam soon" badge */
:root.dark .exam-soon-badge {
  background: rgba(220,38,38,0.2);
  color: #fca5a5;
  border-color: rgba(220,38,38,0.3);
}

@media (max-width: 640px) {
  .exam-schedule-row .exam-schedule-time { display: none; }
}

@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_AMS-Regular.73ea273a72f4aca30ca5.woff2) format("woff2"),url(/static/media/KaTeX_AMS-Regular.d562e886c52f12660a41.woff) format("woff"),url(/static/media/KaTeX_AMS-Regular.853be92419a6c3766b9a.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/static/media/KaTeX_Caligraphic-Bold.a1abf90dfd72792a577a.woff2) format("woff2"),url(/static/media/KaTeX_Caligraphic-Bold.d757c535a2e5902f1325.woff) format("woff"),url(/static/media/KaTeX_Caligraphic-Bold.7489a2fbfb9bfe704420.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Caligraphic-Regular.d6484fce1ef428d5bd94.woff2) format("woff2"),url(/static/media/KaTeX_Caligraphic-Regular.db074fa22cf224af93d7.woff) format("woff"),url(/static/media/KaTeX_Caligraphic-Regular.7e873d3833eb108a0758.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/static/media/KaTeX_Fraktur-Bold.931d67ea207ab37ee693.woff2) format("woff2"),url(/static/media/KaTeX_Fraktur-Bold.354501bac435c3264834.woff) format("woff"),url(/static/media/KaTeX_Fraktur-Bold.4c761b3711973ab04edf.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Fraktur-Regular.172d3529b26f8cedef6b.woff2) format("woff2"),url(/static/media/KaTeX_Fraktur-Regular.6fdf0ac577be0ba82a4c.woff) format("woff"),url(/static/media/KaTeX_Fraktur-Regular.ed305b5434865e06ffde.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/static/media/KaTeX_Main-Bold.39890742bc957b368704.woff2) format("woff2"),url(/static/media/KaTeX_Main-Bold.0c3b8929d377c0e9b2f3.woff) format("woff"),url(/static/media/KaTeX_Main-Bold.8169508bf58f8bd92ad8.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/static/media/KaTeX_Main-BoldItalic.20f389c4120be058d80a.woff2) format("woff2"),url(/static/media/KaTeX_Main-BoldItalic.428978dc7837d46de091.woff) format("woff"),url(/static/media/KaTeX_Main-BoldItalic.828abcb200061cffbaae.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/static/media/KaTeX_Main-Italic.fe2176f79edaa716e621.woff2) format("woff2"),url(/static/media/KaTeX_Main-Italic.fd947498bc16392e76c2.woff) format("woff"),url(/static/media/KaTeX_Main-Italic.fa675e5e4bec9eb250b6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Main-Regular.f650f111a3b890d116f1.woff2) format("woff2"),url(/static/media/KaTeX_Main-Regular.4f35fbcc9ee8614c2bcc.woff) format("woff"),url(/static/media/KaTeX_Main-Regular.9eba1d77abcf2aa6e94e.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/static/media/KaTeX_Math-BoldItalic.dcbcbd93bac0470b462d.woff2) format("woff2"),url(/static/media/KaTeX_Math-BoldItalic.3f07ed67f06c720120ce.woff) format("woff"),url(/static/media/KaTeX_Math-BoldItalic.bf2d440b3a42ea78a998.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/static/media/KaTeX_Math-Italic.6d3d25f4820d0da8f01f.woff2) format("woff2"),url(/static/media/KaTeX_Math-Italic.96759856b4e70f3a8338.woff) format("woff"),url(/static/media/KaTeX_Math-Italic.8a5f936332e8028c7278.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/static/media/KaTeX_SansSerif-Bold.95591a929f0d32aa282a.woff2) format("woff2"),url(/static/media/KaTeX_SansSerif-Bold.b9cd458ac6d5889ff9c3.woff) format("woff"),url(/static/media/KaTeX_SansSerif-Bold.5b49f4993ae22d7975b4.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/static/media/KaTeX_SansSerif-Italic.7d393d382f3e7fb1c637.woff2) format("woff2"),url(/static/media/KaTeX_SansSerif-Italic.8d593cfaa96238d5e2f8.woff) format("woff"),url(/static/media/KaTeX_SansSerif-Italic.b257a18c016f37ee4543.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/static/media/KaTeX_SansSerif-Regular.cd5e231e0cc53b2cb2c0.woff2) format("woff2"),url(/static/media/KaTeX_SansSerif-Regular.02271ec5cb9f5b4588ac.woff) format("woff"),url(/static/media/KaTeX_SansSerif-Regular.2f7bc363fc5424ebda59.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Script-Regular.c81d1b2a4b75d3eded60.woff2) format("woff2"),url(/static/media/KaTeX_Script-Regular.073b3402d036714b4370.woff) format("woff"),url(/static/media/KaTeX_Script-Regular.fc9ba5249878cd8f8d88.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size1-Regular.6eec866c69313624be60.woff2) format("woff2"),url(/static/media/KaTeX_Size1-Regular.0108e89c9003e8c14ea3.woff) format("woff"),url(/static/media/KaTeX_Size1-Regular.6de7d4b539221a49e9e2.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size2-Regular.2960900c4f271311eb36.woff2) format("woff2"),url(/static/media/KaTeX_Size2-Regular.3a99e70aee4076660d38.woff) format("woff"),url(/static/media/KaTeX_Size2-Regular.57f5c1837853986ea1db.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size3-Regular.e1951519f6f0596f7356.woff2) format("woff2"),url(/static/media/KaTeX_Size3-Regular.7947224e8a9914fa332b.woff) format("woff"),url(/static/media/KaTeX_Size3-Regular.8d6b6822586eea3d3b20.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Size4-Regular.e418bf257af1052628d8.woff2) format("woff2"),url(/static/media/KaTeX_Size4-Regular.aeffd8025cba3647f1a6.woff) format("woff"),url(/static/media/KaTeX_Size4-Regular.4ad7c7e8bb8d10a34bb7.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/static/media/KaTeX_Typewriter-Regular.c295e7f71970f03c0549.woff2) format("woff2"),url(/static/media/KaTeX_Typewriter-Regular.4c6b94fd1d07f8beff7c.woff) format("woff"),url(/static/media/KaTeX_Typewriter-Regular.c5c02d763c89380dcb4e.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.47"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}


/*# sourceMappingURL=main.968d0465.css.map*/