:root, [data-theme="dark"]{
  --bg: #0b0d12;
  --surface: #12151d;
  --surface-2: #1a1e29;
  --surface-3: #212637;
  --border: #262b3a;
  --border-strong: #333a4d;
  --text: #f1f2f6;
  --text-dim: #8b90a3;
  --text-faint: #5b6072;

  --accent: #818cf8;
  --accent-strong: #6366f1;
  --accent-soft: rgba(129,140,248,0.16);
  --on-accent: #ffffff;

  --success: #34d399;
  --success-soft: rgba(52,211,153,0.14);
  --danger: #f87171;
  --danger-soft: rgba(248,113,113,0.14);

  /* Back-compat aliases: nothing else in this file reads these anymore, but
     kept in case a future panel copies an old pattern. */
  --amber: var(--accent);
  --amber-dim: var(--accent-soft);
  --teal: var(--success);
  --teal-dim: var(--success-soft);
  --muted: var(--text-dim);

  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.16);
  --shadow-md: 0 4px 16px -4px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.2);
  --shadow-lg: 0 16px 40px -12px rgba(0,0,0,.45);
  --ring: 0 0 0 3px var(--accent-soft);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Spacing/type scale -- documented reference for new CSS, not a mandate to
     rewrite existing rules (which stay as their current literal px values).
     Same as the radii above, defined once here (not theme-dependent, so not
     repeated in the light block below). Values reflect what's already most
     common throughout this file, not an arbitrary new system. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 22px;
  --text-3xl: 26px;
}
[data-theme="light"]{
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #f2f2f8;
  --surface-3: #e8e8f2;
  --border: #e3e3ee;
  --border-strong: #d0d0e2;
  --text: #14151f;
  --text-dim: #666a7c;
  --text-faint: #9698a8;

  --accent: #5850ec;
  --accent-strong: #4338ca;
  --accent-soft: rgba(88,80,236,0.10);
  --on-accent: #ffffff;

  --success: #0f9d74;
  --success-soft: rgba(15,157,116,0.10);
  --danger: #dc4c3e;
  --danger-soft: rgba(220,76,62,0.10);

  --amber: var(--accent);
  --amber-dim: var(--accent-soft);
  --teal: var(--success);
  --teal-dim: var(--success-soft);
  --muted: var(--text-dim);

  --shadow-sm: 0 1px 2px rgba(20,21,31,.05);
  --shadow-md: 0 4px 16px -4px rgba(20,21,31,.10), 0 1px 2px rgba(20,21,31,.06);
  --shadow-lg: 0 16px 40px -12px rgba(20,21,31,.16);
  --ring: 0 0 0 3px var(--accent-soft);
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--sans); min-height: 100vh; transition: background .15s, color .15s;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(720px 420px at 8% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(640px 420px at 96% 6%, color-mix(in srgb, var(--success) 7%, transparent), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
[data-theme="light"] body{
  background-image:
    radial-gradient(720px 420px at 8% -8%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    radial-gradient(640px 420px at 96% 6%, color-mix(in srgb, var(--success) 5%, transparent), transparent 60%);
}

a{ color: var(--accent); }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
  background: var(--surface); color: var(--accent); border:1px solid var(--border);
  padding:10px 16px; border-radius: var(--r-sm); font-size:13.5px; font-weight:600; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; overflow:visible; }

/* Thin, unobtrusive scrollbars on internal panes */
.transcript, .reading, .summary-box, #chat-log, #sidebyside-box, .marks-panel{ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.transcript::-webkit-scrollbar, .reading::-webkit-scrollbar, #chat-log::-webkit-scrollbar{ width:8px; }
.transcript::-webkit-scrollbar-thumb, .reading::-webkit-scrollbar-thumb, #chat-log::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 8px; }

.wrap{ max-width: 900px; margin: 0 auto; padding: 36px 22px 90px; }

.sticky-nav{ position: sticky; top: 0; z-index: 40; background: var(--bg); padding-bottom: 2px; }
header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 28px; gap:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:38px; height:38px; flex-shrink:0; border-radius: 11px;
  box-shadow: var(--shadow-sm); display:block; object-fit:cover;
}
.brand-text h1{ font-size: 20px; font-weight: 800; margin:0; letter-spacing: -0.02em; }
.brand-text .tagline{ color: var(--text-dim); font-size: 12.5px; margin-top:2px; }
.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:38px; height:38px; border-radius: var(--r-sm); border:1px solid var(--border); background: var(--surface);
  color: var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s, transform .1s;
}
.icon-btn:hover{ background: var(--surface-2); border-color: var(--border-strong); }
.icon-btn:active{ transform: scale(.94); }

.tabs{
  display:flex; gap:4px; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-md);
  padding:5px; margin-bottom:26px; overflow-x:auto; box-shadow: var(--shadow-sm);
}
.tab{
  appearance:none; border:0; background:transparent; font-family:inherit;
  flex: 0 0 auto; text-align:center; padding:9px 15px; border-radius: 9px; cursor:pointer; font-size:13.5px;
  font-weight: 500; color: var(--text-dim); user-select:none; transition: background .15s, color .15s; white-space:nowrap;
}
.tab:hover{ color: var(--text); background: var(--surface-2); }
.tab.active{ background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tab.active:hover{ background: var(--accent-soft); }
.panel{ display:none; }
.panel.active{ display:block; animation: panelIn .16s ease-out; }
@keyframes panelIn{ from{ opacity:0; transform: translateY(3px); } to{ opacity:1; transform:none; } }

@media (min-width: 860px){
  .tabs{ flex-wrap: wrap; overflow: visible; }
}

/* ===== Panel headers (orientation) ===== */
.panel-head{ margin-bottom: 18px; }
.panel-eyebrow{
  display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color: var(--accent); margin-bottom:6px;
}
.panel-eyebrow .ico{ width:14px; height:14px; opacity:1; }
.panel-head h2{ font-size:19px; font-weight:800; letter-spacing:-0.01em; margin:0 0 5px; color: var(--text); }
.panel-head p{ margin:0; font-size:13.5px; line-height:1.6; color: var(--text-dim); max-width:62ch; }

.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding:24px;
  box-shadow: var(--shadow-md);
}

/* ===== Full-page login screen (required -- see syncLoginOverlay() in
   app.js; no dismiss/skip path) */
#login-overlay{
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg); display:flex; align-items:center; justify-content:center;
  padding: 24px; overflow-y:auto;
}
.login-card{
  width:100%; max-width: 380px; text-align:center;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  padding: 36px 28px; box-shadow: var(--shadow-md);
}
.login-card .brand-mark{ width:44px; height:44px; margin: 0 auto 14px; box-shadow: var(--shadow-sm); border-radius: 12px; }
.login-title{ font-size:22px; font-weight:800; margin:0 0 8px; }
.login-subtitle{ font-size:13.5px; color: var(--text-dim); line-height:1.5; margin:0 0 22px; }
.login-card input[type=text], .login-card input[type=password]{
  max-width:none; width:100%; margin-bottom:10px; padding:11px 13px; font-size:14px;
}
.login-card .setup-row{ margin-bottom:0; }
.login-card .toolbar button{ padding:10px 15px; }
.login-privacy{ margin:16px 0 0; color:var(--text-faint); font-size:11.5px; line-height:1.5; }
.login-link{ appearance:none; border:0; background:transparent; color:var(--accent); cursor:pointer; font:600 12.5px var(--sans); padding:11px; }
.login-link:hover{ text-decoration:underline; }
#login-reset-panel{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
#login-reset-panel input{ margin-bottom:10px; }
body.auth-locked{ overflow:hidden; }
body.auth-locked .wrap{ visibility:hidden; }

/* ===== Admin sub-navigation -- distinct classes from .tabs/.tab/.panel
   on purpose (see app.js wireAdminSubtabs): those are wired with a global
   querySelectorAll('.tab') click handler that would otherwise catch these
   too and try to activate top-level panels that don't exist. Visually a
   quieter, more compact echo of the main tab bar so it reads as a nested
   second level, not a duplicate of the primary nav. */
.admin-subtabs{
  display:flex; gap:3px; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md);
  padding:4px; margin:16px 0 20px; overflow-x:auto;
}
.admin-subtab{
  flex: 0 0 auto; text-align:center; padding:7px 13px; border-radius: 7px; cursor:pointer; font-size:12.5px;
  font-weight:500; color: var(--text-dim); user-select:none; transition: background .15s, color .15s; white-space:nowrap;
}
.admin-subtab:hover{ color: var(--text); }
.admin-subtab.active{ background: var(--accent-soft); color: var(--accent); font-weight:600; }
.admin-subpanel{ display:none; }
.admin-subpanel.active{ display:block; animation: panelIn .16s ease-out; }
.admin-subpanel-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 8px; }
.admin-subpanel-head h3{ font-size:14px; margin:0; }

/* ===== Workspace (Live transcribe merged with Summary/Translate/Ask/
   Insights/Study) -- same nested-tab pattern as .admin-subtabs above,
   renamed for this context. The transcript pane stays visible at all
   times; only the tools pane switches between the five sub-sections. */
.workspace-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:start; }
.workspace-transcript-pane{ min-width:0; }
.workspace-tools{ min-width:0; }
.workspace-subtabs{
  display:flex; gap:3px; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md);
  padding:4px; margin-bottom:16px; overflow-x:auto;
}
.workspace-subtab{
  flex: 0 0 auto; text-align:center; padding:7px 13px; border-radius: 7px; cursor:pointer; font-size:12.5px;
  font-weight:500; color: var(--text-dim); user-select:none; transition: background .15s, color .15s; white-space:nowrap;
}
.workspace-subtab:hover{ color: var(--text); }
.workspace-subtab.active{ background: var(--accent-soft); color: var(--accent); font-weight:600; }
.workspace-subpanel{ display:none; }
.workspace-subpanel.active{ display:block; animation: panelIn .16s ease-out; }
@media (max-width:900px){
  .workspace-grid{ grid-template-columns:1fr; }
}

.mic-row{ display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.mic-btn{
  width:60px; height:60px; border-radius:50%; border: 2px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.mic-btn:hover{ border-color: var(--border-strong); color: var(--text); }
.mic-btn:active{ transform: scale(.96); }
.mic-btn.recording{
  border-color: var(--accent); background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 7px var(--accent-soft), var(--shadow-md);
  animation: micPulse 2s ease-in-out infinite;
}
@keyframes micPulse{
  0%, 100%{ box-shadow: 0 0 0 7px var(--accent-soft), var(--shadow-md); }
  50%{ box-shadow: 0 0 0 11px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-md); }
}
.waveform{ display:flex; align-items:center; gap:3px; height:36px; flex:1; }
.bar{ width:4px; background: var(--border-strong); border-radius:2px; height:6px; transition: height .08s ease-out, background .15s; }
@keyframes barPulse{ 0%, 100% { height: 6px; } 50% { height: 30px; } }
.waveform.listening .bar{ background: var(--accent); animation: barPulse 1s ease-in-out infinite; }
.status{ font-size: 13px; color: var(--text-dim); min-width: 90px; text-align:right; }

.level-meter{ height:8px; border-radius:5px; background: var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.level-meter-fill{
  height:100%; width:0%; border-radius:5px; background: var(--text-dim);
  transition: width .06s linear, background .15s;
}
.level-meter-fill.good{ background: var(--success); }
.level-meter-fill.clipping{ background: var(--danger); }

.setup-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.setup-row label{ font-size:12.5px; color: var(--text-dim); font-weight:500; }
select, input[type=text], input[type=email], input[type=password], input[type=url]{
  background: var(--surface-2); color: var(--text); border:1px solid var(--border);
  border-radius: var(--r-sm); padding:8px 11px; font-size:13.5px; font-family: var(--sans); max-width: 220px;
  transition: border-color .15s, box-shadow .15s;
}
select:hover, input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=url]:hover{ border-color: var(--border-strong); }
select:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus{
  outline:none; border-color: var(--accent); box-shadow: var(--ring);
}

/* Wraps a password input so the show/hide eye button can sit inside it as
   an overlay -- width lives on the wrapper (not just max-width) so the
   input's own width:100% below has something definite to resolve against
   inside a flex row. .login-card overrides both to full-width, matching
   how it already treats the bare input. */
.pw-field{ position:relative; width:220px; max-width:100%; }
.pw-field input[type=password]{ width:100%; padding-right:36px; }
.login-card .pw-field{ width:100%; margin-bottom:10px; }
.login-card .pw-field input[type=password]{ margin-bottom:0; }
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:none; background:transparent; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--text-dim);
}
.pw-toggle:hover{ color: var(--text); }
.pw-toggle svg{ width:17px; height:17px; pointer-events:none; }

.transcript .speaker-label{ color: var(--accent); font-weight:600; cursor:pointer; border-bottom: 1px dotted var(--accent); }

.transcript{
  font-family: var(--mono); font-size: 14px; line-height: 1.7;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md);
  padding:16px; min-height: 180px; max-height: 340px; overflow-y:auto; white-space: pre-wrap;
}
.transcript:focus{ outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.transcript .interim{ color: var(--text-dim); font-style: italic; }
.transcript .marker{ color: var(--success); font-weight:600; }
.placeholder{ color: var(--text-dim); }
.edit-hint{ font-size:12px; color: var(--text-dim); margin-top:8px; }

.toolbar{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }

.workspace-statusbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; padding:11px 13px; margin:-2px 0 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); }
.workspace-statusbar>span{ display:flex; align-items:center; gap:6px; min-height:32px; }
.workspace-statusbar small{ color:var(--text-faint); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.workspace-statusbar b{ font-size:12px; font-variant-numeric:tabular-nums; }
.workspace-statusbar button:first-of-type{ margin-left:auto; }
.workspace-state i{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); box-shadow:0 0 0 4px color-mix(in srgb,var(--text-faint) 12%,transparent); }
.workspace-state.is-live i{ background:var(--success); box-shadow:0 0 0 4px var(--success-soft); }
.workspace-state.is-connecting i{ background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); animation:statusPulse 1.2s ease-in-out infinite; }
@keyframes statusPulse{ 50%{ opacity:.45; } }
@media(max-width:640px){ .workspace-statusbar{ gap:6px 12px; } .workspace-statusbar>span{ flex:1 1 42%; } .workspace-statusbar button:first-of-type{ margin-left:0; } .workspace-statusbar button{ flex:1; min-height:44px; } }
@media(prefers-reduced-motion:reduce){ .workspace-state.is-connecting i{ animation:none; } }

/* ===== Premium home dashboard ===== */
.home-hero{
  min-height:280px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr); align-items:center;
  gap:32px; padding:clamp(28px,5vw,54px); overflow:hidden; position:relative;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:var(--r-lg);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 75%,var(--surface)) 0%,var(--surface) 52%,color-mix(in srgb,var(--success-soft) 45%,var(--surface)) 100%);
  box-shadow:var(--shadow-lg);
}
.home-hero::after{ content:''; position:absolute; width:260px; height:260px; right:-90px; top:-120px; border-radius:50%; background:var(--accent-soft); filter:blur(4px); pointer-events:none; }
.home-hero-copy{ position:relative; z-index:1; }
.home-hero h2{ font-size:clamp(28px,4vw,42px); letter-spacing:-.035em; line-height:1.08; margin:0 0 12px; text-wrap:balance; }
.home-hero p{ color:var(--text-dim); max-width:52ch; line-height:1.65; margin:0; font-size:14.5px; }
.home-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.home-actions button{ padding:12px 18px; font-size:13.5px; min-height:44px; }
.home-primary-action{ box-shadow:0 10px 26px -14px var(--accent); }
.home-voice-art{ height:210px; position:relative; z-index:1; overflow:hidden; border-radius:22px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); background:#071735; box-shadow:0 28px 58px -34px var(--accent); transform:rotate(1.5deg); }
.home-voice-art::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 50px rgba(4,12,34,.42); pointer-events:none; }
.home-voice-art img{ width:100%; height:100%; object-fit:cover; object-position:65% center; transform:scale(1.08); }
.home-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0; }
.home-metric{ min-width:0; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.home-metric-label,.home-section-kicker{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.065em; color:var(--text-faint); }
.home-metric strong{ display:block; margin:8px 0 4px; font-size:24px; letter-spacing:-.025em; color:var(--text); }
.home-metric>span:last-child{ color:var(--text-dim); font-size:12px; }
.usage-meter{ height:6px; overflow:hidden; background:var(--surface-3); border-radius:99px; margin:9px 0 7px; }
.usage-meter span{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--success)); transition:width .35s ease; }
.skeleton-text{ color:transparent!important; width:74px; border-radius:6px; background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:skeleton 1.3s linear infinite; }
@keyframes skeleton{ to{ background-position:-200% 0; } }
.home-content-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:18px; }
.home-section-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.home-section-head h3{ font-size:16px; margin:3px 0 0; }
.home-recent-card .history-item{ padding:13px 14px; margin-bottom:8px; }
.home-quick-card{ align-self:start; }
.home-quick-action{ width:100%; text-align:left; display:flex; flex-direction:column; gap:5px; padding:14px; margin-top:8px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; font:inherit; transition:transform .12s,border-color .15s,background .15s; }
.home-quick-action:hover{ transform:translateY(-1px); border-color:var(--border-strong); background:var(--surface-3); }
.home-quick-action span{ display:flex; align-items:center; }
.home-quick-action small{ color:var(--text-dim); line-height:1.45; }
@media(max-width:780px){ .home-hero{ grid-template-columns:1fr; min-height:0; } .home-voice-art{ height:150px; transform:none; } .home-metrics{ grid-template-columns:1fr; } .home-content-grid{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .usage-meter span{ transition:none; } .skeleton-text{ animation:none; } .home-quick-action{ transition:none; } }
button.ghost{
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  padding: 9px 15px; border-radius: var(--r-sm); font-size:13px; font-weight:500; cursor:pointer; font-family: var(--sans);
  transition: background .15s, border-color .15s, transform .1s;
}
button.ghost:hover{ background: var(--surface-2); border-color: var(--border-strong); }
button.ghost:active{ transform: scale(.97); }
button.ghost:disabled{ opacity:.4; cursor:not-allowed; }
button.danger{ border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
button.danger:hover{ background: var(--danger-soft); border-color: var(--danger); }
.export-group{ display:flex; gap:6px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.export-label{ font-size:12px; color: var(--text-dim); margin-right:2px; }

.banner{
  background: var(--success-soft); border:1px solid color-mix(in srgb, var(--success) 55%, transparent); color: var(--text);
  font-size:13px; padding:11px 14px; border-radius: var(--r-sm); margin-bottom:16px; display:none;
}
.banner.error{ background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

textarea{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding:12px; font-family: var(--sans); font-size:14px; line-height:1.6;
  resize: vertical; min-height: 90px; transition: border-color .15s, box-shadow .15s;
}
textarea:focus{ outline:none; border-color: var(--accent); box-shadow: var(--ring); }
.controls-row{ display:flex; align-items:center; gap:14px; margin: 14px 0; flex-wrap:wrap; }
.rate-group{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-dim); }
input[type=range]{ accent-color: var(--accent); }
.play-btn{
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--on-accent); border:none; padding:10px 19px;
  border-radius: var(--r-sm); font-size:13.5px; font-weight:600; cursor:pointer; font-family: var(--sans);
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent-strong) 55%, transparent);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.play-btn:hover:not(:disabled){ filter:brightness(1.07); box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent-strong) 65%, transparent); }
.play-btn:active:not(:disabled){ transform: scale(.97); }
.play-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }

.mode-switch{ display:flex; gap:4px; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-sm); padding:3px; margin-bottom:16px; width: fit-content; }
.mode-btn{ padding:7px 15px; border-radius:7px; font-size:13px; font-weight:500; cursor:pointer; color: var(--text-dim); transition: background .15s, color .15s; }
.mode-btn.active{ background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.mode-block{ display:none; }
.mode-block.active{ display:block; }

.reading{
  font-family: var(--serif); font-size: 19px; line-height: 1.9;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md);
  padding:22px; min-height: 140px; max-height: 380px; overflow-y:auto;
}
.reading span.word{ transition: background .1s, color .1s; padding: 1px 1px; border-radius:3px; }
.reading span.word.active{ background: var(--accent); color: var(--on-accent); }
.reading span.word.done{ color: var(--text-dim); }

.summary-box{
  font-size: 15px; line-height: 1.7; background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--r-md); padding:16px; min-height: 100px; white-space: pre-wrap;
}
.summary-box.empty{ color: var(--text-dim); }

/* History */
.history-item{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md);
  padding:15px; margin-bottom:10px; transition: border-color .15s;
}
.history-item:hover{ border-color: var(--border-strong); }
.history-item .history-date{ font-size:12px; color: var(--text-dim); margin-bottom:6px; font-weight:500; }
.history-item .history-preview{ font-size:13.5px; line-height:1.5; max-height:60px; overflow:hidden; }
.history-item .history-actions{ display:flex; gap:8px; margin-top:10px; }
.history-empty{ color: var(--text-dim); font-size:14px; text-align:center; padding:30px 0; }

/* Sentence-synced transcript shown under a History entry's audio player,
   only when that entry has segment timing -- see buildSyncTranscript in
   app.js. */
.sync-transcript{
  margin-top:10px; padding:12px; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-sm); font-size:13.5px; line-height:1.8; max-height:220px; overflow-y:auto;
}
.sync-seg{ cursor:pointer; border-radius:4px; padding:1px 2px; transition: background .15s; }
.sync-seg:hover{ background: var(--surface-2); }
.sync-seg-active{ background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Settings */
.settings-group{
  margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--border);
}
.settings-group:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.settings-group h3{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color: var(--text-dim); margin:0 0 12px; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.settings-row:last-child{ border-bottom:none; }
.settings-row .settings-label{ font-size:14px; font-weight:500; }
.settings-row .settings-hint{ font-size:12.5px; color: var(--text-dim); margin-top:3px; line-height:1.5; }
.pill{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; background: var(--surface-2); border:1px solid var(--border); color: var(--text-dim); }
.pill.soon{ opacity:.7; }
.pill-accent{ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); }
.pill-success{ background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success); }
.pill-danger{ background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }

.switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background: var(--border-strong); border-radius:24px; cursor:pointer; transition:.15s;
}
.switch .track::before{
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .track{ background: var(--accent); }
.switch input:checked + .track::before{ transform: translateX(18px); }

.roadmap{ margin-top: 30px; font-size:13px; color: var(--text-dim); line-height:1.6; }
.roadmap b{ color: var(--text); }

#target-lang{ max-width: 260px; }

/* File input: visually hidden (not display:none) so mobile browsers can still
   activate it via its label. display:none breaks the picker on some Androids. */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.file-label{
  display:inline-block; background: var(--surface); border:1px solid var(--border);
  color: var(--text); padding: 9px 15px; border-radius: var(--r-sm); font-size:13px; font-weight:500;
  cursor:pointer; font-family: var(--sans); transition: background .15s, border-color .15s;
}
.file-label:hover{ background: var(--surface-2); border-color: var(--border-strong); }

.marker-seek{
  cursor:pointer; text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px;
}
.marker-seek:hover{ color: var(--accent); }

.setting-unavailable .settings-label{ opacity:0.55; }
.setting-unavailable .switch{ opacity:0.4; cursor:not-allowed; }

/* ===== Ask (chat) ===== */
.chat-msg{
  padding:11px 14px; border-radius: var(--r-md); margin-bottom:8px;
  font-size:14px; line-height:1.5; white-space:pre-wrap; max-width:88%;
}
.chat-user{ background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--on-accent); margin-left:auto; }
.chat-bot{ background: var(--surface-2); color: var(--text); border:1px solid var(--border); }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  background: var(--surface); border:1px solid var(--border); color: var(--text-dim);
  padding:6px 12px; border-radius:20px; font-size:12px; cursor:pointer;
  font-family: var(--sans); transition: background .15s, color .15s, border-color .15s;
}
.chip:hover{ background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

/* ===== Search highlighting ===== */
mark.find{ background: var(--accent); color: var(--on-accent); border-radius:3px; padding:0 2px; }

/* ===== Insights ===== */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap:10px; }
.stat-card{
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--r-md); padding:14px 15px;
}
.stat-card.wide{ grid-column:1/-1; }
.stat-value{ font-size:21px; font-weight:700; color: var(--text); letter-spacing:-0.01em; }
.stat-label{ font-size:12px; color: var(--text-dim); margin-top:3px; }
.share-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:13px; }
.share-name{ flex:0 0 30%; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-bar{ flex:1; height:8px; background: var(--border); border-radius:4px; overflow:hidden; }
.share-bar i{ display:block; height:100%; background: var(--accent); }
.share-pct{ flex:0 0 40px; text-align:right; color: var(--text-dim); }

.highlight-row{
  display:flex; gap:10px; align-items:flex-start; padding:10px 13px;
  border-left:3px solid var(--border); background: var(--surface-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0; margin-bottom:7px; font-size:13px;
}
.hl-type{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; flex:0 0 68px; color: var(--text-dim); font-weight:600; }
.hl-text{ flex:1; color: var(--text); }
.hl-time{ color: var(--text-dim); font-size:12px; }
.hl-decision{ border-left-color: var(--success); }
.hl-problem{ border-left-color: var(--danger); }
.hl-deadline{ border-left-color: var(--accent); }
.hl-question{ border-left-color:#58a6ff; }


/* ===== Live simultaneous translation ===== */
.live-translate-controls{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 12px;
}
.live-translate-label{ font-size:13px; color:var(--text-dim); }
#live-target-lang{ min-width:210px; }
.live-dual{ display:grid; grid-template-columns:1fr; gap:12px; }
.live-dual.translation-on{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.live-dual-pane{ min-width:0; }
.live-dual-head{
  display:none; padding:0 4px 7px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
}
.live-dual.translation-on .live-dual-head{ display:block; }
.live-dual.translation-on .transcript{ min-height:280px; }
.live-translation{ overflow-y:auto; }
.live-translation-row{
  padding:0 0 10px; margin:0 0 10px; border-bottom:1px solid var(--border);
  white-space:pre-wrap;
}
.live-translation-row:last-child{ border-bottom:none; }
.live-translation-row.pending{ color:var(--text-dim); font-style:italic; }
.live-translation-row.failed{ color: var(--danger); }
@media (max-width:760px){
  .live-dual.translation-on{ grid-template-columns:1fr; }
  #live-target-lang{ min-width:0; width:100%; }
  .live-translate-label{ width:100%; }
}

/* ===== Side-by-side translation ===== */
.switch-inline{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-dim); cursor:pointer; }
.sbs-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; border-bottom:1px solid var(--border); }
.sbs-cell{ padding:9px 12px; font-size:14px; line-height:1.55; color: var(--text); word-break:break-word; }
.sbs-cell:first-child{ border-right:1px solid var(--border); color: var(--text-dim); }
.sbs-head .sbs-cell{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color: var(--text-dim); font-weight:600; }
.sbs-partial{ background: color-mix(in srgb, var(--accent) 8%, transparent); }
@media (max-width: 620px){
  .sbs-row{ grid-template-columns:1fr; gap:0; }
  .sbs-cell:first-child{ border-right:none; border-bottom:1px dashed var(--border); padding-bottom:4px; }
  .sbs-cell:last-child{ padding-top:4px; }
}

/* ===== Word-following playback ===== */
.pw{ border-radius:3px; transition: background-color .12s ease, color .12s ease; }
.pw-on{
  background: var(--accent); color: var(--on-accent); font-weight:600;
  box-shadow:0 0 0 2px var(--accent-soft);
}
.pw-done{ color: var(--text-dim); }
.pw:hover{ background: var(--accent-soft); cursor:pointer; }

/* ===== Action items ===== */
.action-row{ display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border); }
.action-row:last-child{ border-bottom:none; }
.action-check{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color: var(--accent); }
.action-task{ font-size:14px; color: var(--text); line-height:1.45; }
.action-meta{ font-size:12px; color: var(--text-dim); margin-top:3px; }
.action-row.done .action-task{ text-decoration:line-through; color: var(--text-dim); }

/* ===== Study ===== */
.quiz-card{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md); padding:16px; margin-bottom:12px; }
.quiz-q{ font-size:14px; font-weight:600; margin-bottom:11px; color: var(--text); }
.quiz-opt{
  display:block; width:100%; text-align:left; background: var(--surface);
  border:1px solid var(--border); color: var(--text); padding:10px 13px;
  border-radius: var(--r-sm); margin-bottom:7px; font-size:13px; cursor:pointer;
  font-family: var(--sans); transition: background .15s, border-color .15s;
}
.quiz-opt:hover{ background: var(--surface-2); border-color: var(--border-strong); }
.quiz-opt.right{ border-color: var(--success); background: var(--success-soft); }
.quiz-opt.wrong{ border-color: var(--danger); background: var(--danger-soft); }
.quiz-why{ font-size:12px; color: var(--text-dim); margin-top:8px; line-height:1.5; }
.flashcard{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md);
  padding:17px; margin-bottom:10px; cursor:pointer; min-height:56px; transition: border-color .15s;
}
.flashcard:hover{ border-color: var(--border-strong); }
.fc-front{ font-size:14px; font-weight:600; color: var(--text); }
.fc-back{ display:none; font-size:13px; color: var(--text-dim); margin-top:10px; line-height:1.55; }
.flashcard.flipped .fc-back{ display:block; }

/* ===== Focus mode ===== */
body.focus-mode .tabs,
body.focus-mode header .subtitle,
body.focus-mode footer,
body.focus-mode .panel:not(#panel-live),
body.focus-mode #panel-live .toolbar,
body.focus-mode #panel-live .setup-row:not(.focus-keep),
body.focus-mode .workspace-tools,
body.focus-mode #audio-player-wrap{ display:none !important; }
body.focus-mode .workspace-grid{ grid-template-columns:1fr; }
body.focus-mode #transcript{ min-height:58vh; font-size:17px; line-height:1.75; }
body.focus-mode .card{ border:none; background:transparent; padding:0; box-shadow:none; }

/* ===== Scripture references ===== */
.scripture-row{
  display:flex; gap:12px; align-items:baseline; padding:10px 0;
  border-bottom:1px solid var(--border);
}
.scripture-row:last-of-type{ border-bottom:none; }
.sc-ref{ font-weight:600; color: var(--text); flex:0 0 34%; font-size:14px; }
.sc-context{ flex:1; color: var(--text-dim); font-size:13px; }
.sc-flag{
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color: var(--on-accent); background: var(--accent); border-radius:4px; padding:2px 7px; font-weight:600;
}
.scripture-row.unsure .sc-ref{ color: var(--accent); }
.verify-note{
  font-size:12px; line-height:1.55; color: var(--text-dim);
  border-left:3px solid var(--accent); padding:9px 13px; margin-bottom:12px;
  background: var(--accent-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ===== Icons ===== */
.ico{
  width:16px; height:16px; flex-shrink:0; vertical-align:-3px;
  color: currentColor; opacity:.82;
}
.tab .ico{ margin-right:7px; opacity:.6; transition:opacity .15s, transform .15s; }
.tab.active .ico{ opacity:1; color: var(--accent); }
.tab:hover .ico{ opacity:.95; }
.tab{ display:inline-flex; align-items:center; }
button .ico{ margin-right:7px; }
.play-btn, .ghost, .mic-btn{ display:inline-flex; align-items:center; justify-content:center; }
.play-btn .ico{ opacity:.95; }
.search-ico{ opacity:.5; margin-right:-28px; position:relative; left:9px; z-index:1; pointer-events:none; }
#search-input{ padding-left:34px; }

@media (prefers-reduced-motion: reduce){
  .tab .ico{ transition:none; }
  .mic-btn.recording{ animation:none; }
  .panel.active{ animation:none; }
}

/* ===== Upload dropzone ===== */
.upload-dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap: var(--space-2); padding: var(--space-7) var(--space-4);
  border:1.5px dashed var(--border); border-radius: var(--r-lg); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.upload-dropzone p{ margin:0; color: var(--text-dim); font-size: var(--text-base); }
.upload-dropzone.dragover{ border-color: var(--accent); background: var(--accent-soft); }

/* ===== Empty states ===== */
.summary-box.empty, #study-box:empty, #highlights-box:empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; min-height:130px; color: var(--text-dim);
  border:1.5px dashed var(--border); border-radius: var(--r-md); background:transparent;
}
.empty-mark{
  width:38px; height:38px; opacity:.45; color: var(--accent);
}

/* Transcript placeholder gets room to breathe */
.transcript .placeholder{ display:block; max-width:46ch; margin:6px auto; text-align:center; line-height:1.65; }

/* Tabs scroll cleanly on narrow screens instead of wrapping raggedly */
.tabs{ scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ white-space:nowrap; }

/* ===== Guide ===== */
.guide-title{ font-family: var(--serif); font-size:23px; margin:0 0 6px; color: var(--text); }
.guide-lede{ margin:0 0 18px; font-size:13px; color: var(--text-dim); }

.device-report{
  border:1px solid var(--border); border-radius: var(--r-md); overflow:hidden; margin-bottom:22px;
}
.dr-head{
  background: var(--surface-2); padding:10px 14px; font-size:12px;
  text-transform:uppercase; letter-spacing:.05em; color: var(--text-dim); font-weight:700;
}
.dr-row{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border-top:1px solid var(--border); }
.dr-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.dr-row.yes .dr-dot{ background: var(--success); }
.dr-row.no .dr-dot{ background: var(--danger); }
.dr-label{ font-size:14px; color: var(--text); font-weight:500; }
.dr-note{ font-size:12.5px; color: var(--text-dim); line-height:1.5; margin-top:2px; }
.dr-foot{
  padding:9px 14px; border-top:1px solid var(--border); font-family: var(--mono);
  font-size:11px; color: var(--text-dim);
}

.guide-item{ border-bottom:1px solid var(--border); }
.guide-head{
  width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  padding:15px 26px 15px 0; font-size:15px; color: var(--text); font-weight:500;
  font-family: var(--sans); position:relative;
}
.guide-head::after{
  content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color: var(--accent); font-size:18px; font-weight:400;
}
.guide-item.open .guide-head::after{ content:'\2013'; }
.guide-head:hover{ color: var(--accent); }
.guide-body{ display:none; padding:0 0 16px; }
.guide-item.open .guide-body{ display:block; }
.guide-body p{
  margin:0 0 10px; font-size:13.5px; line-height:1.65; color: var(--text-dim);
}
.guide-body p:last-child{ margin-bottom:0; }


/* ===== Marked spots ===== */
.mark-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface); color:var(--text);
  font:inherit; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, transform .08s;
  white-space:nowrap;
}
.mark-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.mark-btn:active:not(:disabled){ transform:scale(0.95); }
.mark-btn:disabled{ opacity:.35; cursor:default; }
.mark-btn .ic{ width:17px; height:17px; }

.marks-panel{
  margin-top:14px; padding:14px;
  border:1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
}
.marks-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:2px; font-size:.95rem;
}
.marks-list{ list-style:none; margin:0; padding:0; }
.mark-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; margin-bottom:6px;
  border:1px solid var(--border); border-radius:9px;
  background: var(--surface);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.mark-item:hover{ border-color:var(--accent); }
.mark-done{ opacity:.45; }
.mark-done .mark-context{ text-decoration:line-through; }
.mark-body{ flex:1; min-width:0; display:flex; align-items:baseline; gap:9px; }
.mark-time{
  font-variant-numeric:tabular-nums; font-size:.85rem;
  color:var(--accent); font-weight:600; flex-shrink:0;
}
.mark-context{
  color:var(--text-dim); font-size:.9rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mark-tag{
  flex-shrink:0; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px;
  border:1px solid var(--border); color:var(--text-dim);
}
.mark-auto .mark-time{ color:var(--text-dim); }
.mark-tick, .mark-del{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0;
  border:1px solid var(--border); border-radius:7px;
  background:transparent; color:var(--text-dim);
  cursor:pointer; font-size:1.05rem; line-height:1;
}
.mark-tick .ic{ width:15px; height:15px; }
.mark-tick:hover{ color:var(--accent); border-color:var(--accent); }
.mark-del:hover{ color: var(--danger); border-color: var(--danger); }
.mark-done .mark-tick{ color:var(--accent); border-color:var(--accent); }

/* The spot you jumped to, so your eye lands in the right place. */
.mark-flash{
  border-radius:3px;
  background: var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-soft);
  animation:markFade 2.6s ease-out forwards;
}
@keyframes markFade{
  0%{ background: var(--accent-soft); box-shadow:0 0 0 3px var(--accent-soft); }
  70%{ background: var(--accent-soft); box-shadow:0 0 0 3px var(--accent-soft); }
  100%{ background:transparent; box-shadow:0 0 0 3px transparent; }
}

@media (max-width:640px){
  .mark-btn span{ display:none; }
  .mark-btn{ padding:11px 13px; }
  .mark-context{ font-size:.85rem; }
}

/* ===== Export options ===== */
.export-options{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px;
  margin-top:12px; padding:12px 14px;
  border:1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.export-options-label{
  font-size:.82rem; letter-spacing:.02em;
  color:var(--text-dim); font-weight:600;
}
.export-options .switch-inline{ margin:0; }
@media (max-width:640px){
  .export-options{ gap:8px 14px; }
  .export-options-label{ width:100%; }
  .wrap{ padding: 24px 16px 70px; }
  .card{ padding:18px; border-radius: var(--r-md); }
}