*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:        #E63946;
  --red-dim:    #FDECED;
  --red-border: rgba(230,57,70,0.18);

  --ink:        #0A0F1E;
  --ink-mid:    #3D4A5C;
  --ink-soft:   #6B7A8D;
  --ink-faint:  #A4B0BE;

  --bg:         #FFFFFF;
  --bg-warm:    #F7F8FA;
  --bg-cool:    #EEF2F7;
  --border:     rgba(10,15,30,0.08);
  --border-mid: rgba(10,15,30,0.14);

  --pass:       #2A9D8F;
  --pass-dim:   #E8F5F3;
  --warn-dim:   #FEF6E4;
  --warn-text:  #8A5D09;

  /* Indigo primary accent — mirrors tokens.css so it resolves on the pre-auth pages
     (login/signup/reset) that load style.css WITHOUT tokens.css. Keep in sync with tokens.css. */
  --uv:         #6E60E8;
  --uv-2:       #5D4FD6;
  --uv-soft:    #EFECFE;

  /* Categorical — environment identity (admin dashboard). Fixed order, validated
     for CVD-safe separation via dataviz skill's validate_palette.js. */
  --env-production:     #2A5CDE;
  --env-production-dim: #EAF0FE;
  --env-testing:        #C2410C;
  --env-testing-dim:    #FBEDE4;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow: 0 4px 24px rgba(10,15,30,0.07), 0 1px 4px rgba(10,15,30,0.04);
  --shadow-lg: 0 12px 40px rgba(10,15,30,0.09), 0 2px 8px rgba(10,15,30,0.04);

  /* Type system — mirrors tokens.css so it resolves on the pre-auth pages (login/signup/
     reset) that load style.css WITHOUT tokens.css. One family app-wide: Inter for UI +
     display headings, JetBrains Mono for codes/eyebrows. Keep in sync with tokens.css. */
  --sans: 'IBM Plex Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Dark theme — this legacy palette predates tokens.css and every app page still styles
   its body content with it, so [data-theme="dark"] (set by the shell's theme toggle)
   must remap it too or dark mode only reaches the tokens.css chrome: dark backgrounds,
   light text, dims flipped to deep tints. Aligned with tokens.css's dark values. */
[data-theme="dark"] {
  --red:        #ED5A64;
  --red-dim:    #38161A;
  --red-border: rgba(237,90,100,0.35);

  --ink:        #E8EDF3;
  --ink-mid:    #B6C2D0;
  --ink-soft:   #8FA0B4;
  --ink-faint:  #5A6B80;

  --bg:         #0B1118;
  --bg-warm:    #121A25;
  --bg-cool:    #182334;
  --border:     rgba(232,237,243,0.10);
  --border-mid: rgba(232,237,243,0.18);

  --pass:       #33B39A;
  --pass-dim:   #10312B;
  --warn-dim:   #332810;
  --warn-text:  #D9A62E;

  --uv:         #7C6FF0;
  --uv-2:       #A99BF7;
  --uv-soft:    #1C1640;

  --env-production:     #6E96F5;
  --env-production-dim: #14233F;
  --env-testing:        #E8804A;
  --env-testing-dim:    #331B10;

  --shadow: 0 4px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.hidden { display: none !important; }
/* Auth gate: present in the initial HTML so nothing paints before the session check resolves. */
body.auth-gated { visibility: hidden; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.nav-logo {
  font-family: var(--mono);
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav-logo em { color: var(--uv-2); font-style: normal; }
.nav-links { display: flex; gap: 2px; list-style: none; align-items: center; flex-wrap: nowrap; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: 6px 9px; border-radius: var(--r-sm); transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-cool); }
.nav-links li[data-user-email] { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

.nav-drawer {
  display: none; position: fixed; inset: 58px 0 0 0;
  background: var(--bg); border-top: 1px solid var(--border);
  z-index: 199; padding: 20px 32px; flex-direction: column;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  font-size: 16px; font-weight: 500; color: var(--ink-mid);
  text-decoration: none; padding: 13px 0; border-bottom: 1px solid var(--border);
}
.nav-drawer a:last-child { border-bottom: none; }

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ── HERO ── */
.hero { padding: 72px 0 56px; border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--red-dim); border: 1px solid var(--red-border);
  border-radius: 20px; padding: 4px 13px 4px 8px; margin-bottom: 20px;
}
.hero-badge-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; }
.hero-badge-text { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--red); }

.hero-h1 {
  font-family: var(--display, 'Inter', sans-serif); font-weight: 800;
  font-size: 50px; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 18px;
}
.hero-h1 .accent { color: var(--red); }
.hero-lead { font-size: 17px; color: var(--ink-mid); line-height: 1.65; margin-bottom: 30px; max-width: 400px; }

.hero-stats { display: flex; align-items: center; gap: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat-n { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.hero-stat-l { font-size: 12px; color: var(--ink-soft); }
.stat-div { width: 1px; height: 26px; background: var(--border-mid); }

/* ── UPLOAD PANEL ── */
.panel-wrap {
  background: var(--bg); border: 1px solid var(--border-mid);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; position: sticky; top: 74px;
}

.upload-panel { padding: 12px; }
.upload-box {
  border: 2px dashed var(--border-mid); border-radius: var(--r-lg);
  padding: 18px 20px; text-align: left; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--bg-warm);
  display: flex; align-items: center; gap: 16px;
}
.upload-box .upload-copy { min-width: 0; }
.upload-box:hover, .upload-box.drag-over {
  border-color: var(--red); background: var(--red-dim);
}
.upload-badge {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--red-dim); display: grid; place-items: center;
}
.upload-main { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 3px; letter-spacing: -0.2px; }
.upload-hint { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.upload-link { color: var(--uv); font-weight: 600; }
.upload-box:hover .upload-link, .upload-box.drag-over .upload-link { color: var(--red); }
.upload-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; }

/* ── AI-analysis note ── */
.aipower { margin: 18px 2px 0; }
.aipower-head { display: flex; align-items: baseline; gap: 9px; }
.aipower-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; }
.aipower-note { font-size: 13px; color: var(--ink-faint); }

/* Primary CTA under the upload box */
.btn-scan {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 14px; padding: 15px; border: none; border-radius: 12px;
  background: var(--uv); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 14px var(--uv-glow); transition: background .15s;
}
.btn-scan:hover { background: var(--uv-2); }
.btn-scan:active { transform: translateY(1px); }


/* ── LOADING ── */
.loading-panel { padding: 52px 24px; text-align: center; }
.spinner {
  width: 40px; height: 40px; border: 3px solid var(--border-mid);
  border-top-color: var(--red); border-radius: 50%;
  animation: spin 0.75s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 15px; font-weight: 600; color: var(--ink); }
.loading-sub { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ── ERROR PANEL ── */
.error-panel {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px; margin: 8px;
  background: var(--red-dim); border: 1px solid var(--red-border);
  border-radius: var(--r-md);
}
.error-msg { font-size: 14px; color: var(--ink); margin-bottom: 6px; line-height: 1.5; }

/* ── RESULTS PANEL ── */
.results-panel { padding: 0; }

.verdict-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.verdict-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.verdict-info { flex: 1; min-width: 0; }
.verdict-label { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; font-size: 1.4rem; line-height: 1.1; }
.verdict-score { font-size: 12px; color: var(--ink-soft); font-family: var(--mono); margin-top: 2px; }

.verdict-trusted .verdict-label { color: var(--pass); }
.verdict-review  .verdict-label { color: var(--warn-text); }
.verdict-reject  .verdict-label { color: var(--red); }

.reset-link { flex-shrink: 0; }

.res-section { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.res-section:last-child { border-bottom: none; }
.res-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 10px;
}

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-item { display: flex; flex-direction: column; gap: 1px; }
.info-item-full { grid-column: 1 / -1; }
.info-key { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.info-val { font-size: 13px; color: var(--ink); word-break: break-all; }
.hash { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

.font-list { display: flex; flex-wrap: wrap; gap: 6px; }
.font-tag {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mid);
  background: var(--bg-cool); border: 1px solid var(--border-mid);
  border-radius: var(--r-sm); padding: 2px 8px;
}

.signal {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.signal:last-child { border-bottom: none; }
.signal-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.signal-badge.critical { background: #2d0a0a; color: #ff6b6b; }
.signal-badge.high   { background: var(--red-dim); color: var(--red); }
.signal-badge.medium { background: var(--warn-dim); color: var(--warn-text); }
.signal-badge.low    { background: #EBF3FF; color: #1D64C8; }
.signal-badge.info   { background: var(--bg-cool); color: var(--ink-soft); }
.signal-detail { font-size: 13px; color: var(--ink-mid); line-height: 1.45; }
.signal-layer { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }

/* ── DOCUMENT PREVIEW ── */
[hidden] { display: none !important; }   /* author display:flex must never resurrect hidden UI */
.doc-preview { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-warm); overflow: hidden; }
.dp-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.dp-pagenav, .dp-zoomnav { display: flex; align-items: center; gap: 6px; }
.dp-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--border-mid); background: var(--bg); border-radius: var(--r-sm);
  color: var(--ink-mid); font-size: 15px; line-height: 1; cursor: pointer;
}
.dp-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.dp-btn:disabled { opacity: 0.35; cursor: default; }
.dp-page-info, .dp-zoom-info {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); min-width: 44px; text-align: center;
}
.dp-canvas-wrap {
  max-height: 640px; overflow: auto; display: flex; align-items: flex-start; justify-content: center;
  justify-content: safe center;   /* overflowing zoomed pages keep their left edge reachable */
  padding: 14px; background: var(--bg-cool);
}
.dp-canvas, .dp-img { display: block; background: #fff; box-shadow: 0 1px 6px rgba(10,15,30,0.12); max-width: 100%; }
/* zoom > 100%: the page must PAN inside the wrap, not be squashed to fit —
   max-width:100% against an explicit height distorts the aspect ratio */
.dp-canvas.zoomed { max-width: none; }
.dp-img { height: auto; }
.dp-placeholder {
  padding: 30px 16px; text-align: center; color: var(--ink-faint); font-size: 13px; width: 100%;
}
.dp-unavailable { padding: 20px; text-align: center; }
.dp-unavailable p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 12px; }
.dp-unavailable p:last-of-type { margin-bottom: 14px; }
.dp-verify-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.dp-verify-error { color: var(--red); font-size: 12.5px; margin-top: 10px; }
.no-signals { font-size: 13px; color: var(--pass); }

/* ── VERDICT META ROW ── */
.verdict-meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--bg-warm);
}

/* Threat level badge */
.threat-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase; white-space: nowrap;
}
.threat-clean    { background: var(--pass-dim); color: var(--pass); }
.threat-elevated { background: var(--warn-dim); color: var(--warn-text); }
.threat-high     { background: var(--red-dim); color: var(--red); }
.threat-critical { background: #2d0a0a; color: #ff6b6b; }

/* Document type chip */
.doctype-chip {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase; white-space: nowrap;
  background: #EBF3FF; color: #1D64C8;
}

/* Confidence chip */
.confidence-chip {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase; white-space: nowrap;
}
.conf-high   { background: var(--pass-dim); color: var(--pass); }
.conf-medium { background: var(--bg-cool); color: var(--ink-soft); }
.conf-low    { background: var(--warn-dim); color: var(--warn-text); }

/* ── BUTTONS ── */
.link-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--red); text-decoration: underline; padding: 0;
}
.link-btn:hover { color: #cc2f3b; }

/* ── TRUST BAR ── */
.trust-bar { background: var(--bg-cool); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; }
.trust-item { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.trust-check { color: var(--pass); }

/* ── SECTIONS ── */
/* Legacy marketing section spacing. In-app (`body.dz-app`) the `.section` class is reused as a
   bordered card by tokens.css / report.css, so this 84px block padding must NOT reach it — it
   was leaking large empty vertical gaps into the detailed report and the scan-history panel.
   Scope it to marketing (non-app) pages only. */
body:not(.dz-app) .section { padding: 84px 0; }
.section-alt { background: var(--bg-warm); }
.sec-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--uv); margin-bottom: 10px;
}
.sec-title {
  font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px;
}
.sec-sub { font-size: 17px; color: var(--ink-soft); line-height: 1.65; max-width: 480px; }
.sec-hdr { margin-bottom: 48px; }
.sec-hdr-c { text-align: center; }
.sec-hdr-c .sec-sub { margin: 0 auto; }

/* ── HOW IT WORKS ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border-radius: var(--r-lg); overflow: hidden; }
.step { background: var(--bg); padding: 30px 24px; }
.step-n {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ink-faint); letter-spacing: 1px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.step-n::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.step-icon { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--bg-cool); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.step-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ── FEATURES ── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; transition: box-shadow 0.2s, transform 0.2s;
}
.feat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.feat-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.feat-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--bg-cool); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feat-layer {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--red); background: var(--red-dim); padding: 2px 7px;
  border-radius: 4px; border: 1px solid var(--red-border);
}
.feat-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.feat-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.feat-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.feat-tag {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-soft); background: var(--bg-cool); border-radius: 4px; padding: 2px 7px;
}

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.faq-q { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.4; }
.faq-a { font-size: 13px; color: var(--ink-soft); line-height: 1.65; }

/* ── DOCUMENTS (history) ── */
.sec-hdr:has(#clearHistoryBtn) { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.history-clear-btn {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--ink-soft); background: var(--bg); border: 1px solid var(--border-mid);
  border-radius: var(--r-sm); padding: 7px 14px; cursor: pointer; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.history-clear-btn:hover { color: var(--red); border-color: var(--red-border); background: var(--red-dim); }
.empty-history { font-size: 14px; color: var(--ink-soft); padding: 16px 20px; }
.dz-doc-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dz-doc-info { min-width: 0; flex: 1; }
/* File-type badge — colored, monospace abbreviation (PDF / DOC / XLS …) so the row's format
   reads at a glance. Colors come from tokens.css semantic vars; abbreviation disambiguates
   types that share a family. */
.dz-ftype {
  width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
.ft-pdf     { background: var(--bad-soft);  color: var(--bad); }
.ft-word    { background: var(--uv-soft);   color: var(--uv); }
.ft-sheet   { background: var(--ok-soft);   color: var(--ok); }
.ft-slides  { background: var(--hot-soft);  color: var(--hot); }
.ft-email   { background: var(--warn-soft); color: var(--warn); }
.ft-archive { background: var(--low-soft);  color: var(--low); }
.ft-image, .ft-other { background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }

/* history loading skeleton */
.dz-skel { display: inline-block; border-radius: 5px; background: var(--panel-2); position: relative; overflow: hidden; vertical-align: middle; }
.dz-skel-ico { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.dz-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(127,138,160,.16), transparent); transform: translateX(-100%); animation: dzskel 1.3s infinite; }
.dz-skel-row td { cursor: default; }
@keyframes dzskel { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .dz-skel::after { animation: none; } }
.dz-doc-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
@media (max-width: 640px) { .dz-doc-name, .dz-doc-hash { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.dz-doc-hash { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.dz-doc-del {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; min-width: 40px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--ink-faint); cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.dz-doc-del:hover { color: var(--red); background: var(--red-dim); border-color: var(--red-border); }
.dz-review-state { font-size: 12px; color: var(--ink-soft); }
.dz-review-state.is-pending { color: var(--warn-text); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════════
   DOCUMENTS PAGE — two-column workspace: scan history (left) + upload/live-scanner
   rail (right). Replaces the old centered upload card + inline results panel: an
   upload now streams into the history as a live "Analyzing…" row and flashes its
   verdict colour the moment it lands.
   ══════════════════════════════════════════════════════════════════════════════ */
.dz-docs-top { padding-top: 4px; }
.dz-docs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 26px; align-items: start; }
.dz-docs-main { min-width: 0; }
.dz-docs-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 74px; }

/* history header */
/* Header row now only carries the "Clear all" action (the Scan-history title/sub were
   removed — the page's "Documents" h1 already names the workspace). Right-aligned, and it
   collapses to nothing when the button is hidden so there's no empty gap above the list. */
.dz-hist-head { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.dz-hist-head:not(:has(.history-clear-btn:not(.hidden))) { margin-bottom: 0; }

/* rail card wrapper */
.dz-rail-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; padding: 10px; }
.dz-handoff { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin: 6px 6px 2px; font-size: 13px; color: var(--ink-2); }

/* rail upload box: vertical + indigo accent (the app's primary), not the marketing red */
.dz-docs-rail .upload-box { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 18px; }
.dz-docs-rail .upload-badge { background: var(--uv-soft); }
.dz-docs-rail .upload-box:hover, .dz-docs-rail .upload-box.drag-over { border-color: var(--uv); background: var(--uv-soft); }
.dz-docs-rail .upload-box:hover .upload-link, .dz-docs-rail .upload-box.drag-over .upload-link { color: var(--uv); }
.dz-docs-rail .upload-copy { min-width: 0; }

/* ── LIVE SCANNER (X-ray sweep while a document is analyzed) ── */
.scanner-panel { padding: 20px 16px 22px; text-align: center; }
.scanner-stage { margin: 4px auto 18px; }
.scan-doc {
  position: relative; width: 116px; height: 148px; margin: 0 auto; padding: 22px 16px;
  border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden;
}
.scan-ln { display: block; height: 7px; border-radius: 3px; background: var(--line); margin-bottom: 12px; }
.scan-ln.short { width: 55%; }
.scan-corner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--uv); opacity: .85; }
.scan-corner.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.scan-corner.tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.scan-corner.bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.scan-corner.br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
.scan-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--uv);
  box-shadow: 0 0 13px 4px var(--uv-glow), 0 0 3px 1px var(--uv);
  animation: dzScanBeam 1.9s ease-in-out infinite;
}
@keyframes dzScanBeam { 0% { top: 4%; } 50% { top: 94%; } 100% { top: 4%; } }
.scanner-title { font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.scanner-file { font-size: 12px; color: var(--ink-2); margin-top: 6px; word-break: break-all; line-height: 1.4; }
.scanner-status { font-size: 12.5px; color: var(--uv); margin-top: 12px; min-height: 18px; animation: dzStatusPulse 1.4s ease-in-out infinite; }
@keyframes dzStatusPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.scanner-queue { font-size: 11px; color: var(--ink-3); margin-top: 9px; }

/* ── PROCESSED confirmation ── */
.done-panel { padding: 30px 18px; text-align: center; }
.done-check { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; animation: dzPop .34s ease; }
@keyframes dzPop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.done-title { font-family: var(--display); font-weight: 800; font-size: 15.5px; color: var(--ink); }
.done-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }

/* ── PENDING "Analyzing…" history row ── */
.dz-row-processing { animation: dzRowPulse 1.6s ease-in-out infinite; }
.dz-row-processing td { cursor: default; }
@keyframes dzRowPulse { 0%, 100% { background: var(--panel); } 50% { background: var(--uv-soft); } }
.ft-scan { background: var(--uv-soft); color: var(--uv); }
.dz-scan-dot { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--uv); border-top-color: transparent; animation: spin .8s linear infinite; }
.dz-analyzing { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--uv); background: var(--uv-soft); padding: 3px 10px; border-radius: 6px; }
.dz-scan-fill { width: 35%; background: var(--uv); animation: dzScanFill 1.2s ease-in-out infinite; }
@keyframes dzScanFill { 0% { transform: translateX(-25%); } 100% { transform: translateX(230%); } }

/* ── VERDICT FLASH: a freshly-landed row glows its verdict colour for ~10s, then fades.
   Green = all clear, yellow = needs a human, red = strong fraud signal. ── */
.dz-flash-ok  { animation: dzFlashOk  10s ease-out both; }
.dz-flash-warn { animation: dzFlashWarn 10s ease-out both; }
.dz-flash-bad { animation: dzFlashBad 10s ease-out both; }
@keyframes dzFlashOk   { 0%,60% { background: var(--ok-soft);   box-shadow: inset 3px 0 0 0 var(--ok); }   100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; } }
@keyframes dzFlashWarn { 0%,60% { background: var(--warn-soft); box-shadow: inset 3px 0 0 0 var(--warn); } 100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; } }
@keyframes dzFlashBad  { 0%,60% { background: var(--bad-soft);  box-shadow: inset 3px 0 0 0 var(--bad); }  100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .scan-beam, .dz-row-processing, .dz-scan-dot, .dz-scan-fill, .scanner-status, .done-check { animation: none; }
  .dz-flash-ok, .dz-flash-warn, .dz-flash-bad { animation-duration: 10s; }
}

/* ── TAGS: chips on rows, active-filter pill, and the rail's tag filter list ── */
.dz-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dz-row-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--uv); background: var(--uv-soft); border: 1px solid transparent; border-radius: 5px; padding: 1px 7px; cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-row-tag:hover { border-color: var(--uv); }
.dz-row-tag-more { font-family: var(--mono); font-size: 10px; color: var(--ink-3); align-self: center; padding: 0 2px; }

.dz-tag-active { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dz-tag-active-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dz-tag-active-name { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--uv); background: var(--uv-soft); padding: 3px 10px; border-radius: 6px; }
.dz-tag-active-x { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.dz-tag-active-x:hover { color: var(--ink); background: var(--panel-2); }

/* ── INTAKE SOURCES tile (rail): pipelines + live connected / auto-scan status ── */
.dz-rail-pipes { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.dz-rail-pipes-hd { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.dz-rail-pipes-body { display: flex; flex-direction: column; gap: 1px; }
.dz-pipe { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; color: var(--ink); text-decoration: none; }
a.dz-pipe { cursor: pointer; transition: background .12s; }
a.dz-pipe:hover { background: var(--panel-2); }
.dz-pipe-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--panel-2); color: var(--ink-3); }
.dz-pipe-ic svg { width: 15px; height: 15px; }
.dz-pipe-name { font-size: 13px; font-weight: 500; flex: none; }
.dz-pipe-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.dz-pipe-badge { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); white-space: nowrap; }
.dz-pipe-badge.is-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.dz-pipe-skel { font-size: 12px; color: var(--ink-3); padding: 6px 2px; }

.dz-rail-tags { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; }
.dz-rail-tags-hd { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.dz-rail-tags-body { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-rail-tag { font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-rail-tag:hover { border-color: var(--uv); color: var(--uv); }
.dz-rail-tag.active { background: var(--uv); border-color: var(--uv); color: #fff; }
.dz-rail-tags-hint { font-size: 11px; color: var(--ink-3); margin-top: 11px; line-height: 1.5; }

/* ── SECONDARY FILTER ROW: source + type dropdowns + column picker ── */
.dz-toolbar-2 { margin-top: -4px; }
.dz-select {
  font: inherit; font-size: 13px; color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 30px 0 12px; min-height: 40px;
  cursor: pointer; appearance: none; -webkit-appearance: none; max-width: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f8aa0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.dz-select:hover { border-color: var(--border-mid); }
.dz-select:focus { outline: none; border-color: var(--uv); }

.dz-colmenu { position: relative; margin-left: auto; }
.dz-colbtn {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0 13px; min-height: 40px; cursor: pointer; transition: border-color .15s, color .15s;
}
.dz-colbtn:hover { border-color: var(--uv); color: var(--uv); }
.dz-colbtn svg { flex: none; }
.dz-colpop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 190px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 8px; display: flex; flex-direction: column; gap: 1px;
}
.dz-colpop-hd { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 5px 8px 7px; }
.dz-colopt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.dz-colopt:hover { background: var(--panel-2); }
.dz-colopt input { accent-color: var(--uv); width: 15px; height: 15px; cursor: pointer; }
.dz-col-reset { margin-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); background: none; border: none; border-top: 1px solid var(--line-2); padding: 9px 8px 4px; text-align: left; cursor: pointer; }
.dz-col-reset:hover { color: var(--uv); }

/* ── SORTABLE HEADERS ── */
.dz-table thead th.dz-th { cursor: pointer; user-select: none; transition: color .15s; }
.dz-table thead th.dz-th:hover { color: var(--ink-2); }
.dz-table thead th.dz-th.is-sorted { color: var(--uv); }
.dz-table thead th.dz-th-actions { cursor: default; }
.dz-sort-caret { font-size: 8px; margin-left: 5px; vertical-align: middle; }

/* ── DOCUMENT TYPE + SOURCE cells ── */
.dz-type-chip { font-size: 12px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; white-space: nowrap; display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.dz-src { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 9px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; }
.dz-src-upload { background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }
.dz-src-api { background: var(--uv-soft); color: var(--uv); }
.dz-src-dropbox { background: var(--hot-soft); color: var(--hot); }
.dz-src-gdrive { background: var(--ok-soft); color: var(--ok); }
.dz-muted { color: var(--ink-faint); }
.dz-pending-cell { display: flex; align-items: center; gap: 12px; }

/* ── REVIEW cell: state + inline approve / reject / escalate ── */
.dz-review-cell { display: flex; align-items: center; gap: 8px; }
.dz-rv-actions { display: inline-flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.dz-hist-row:hover .dz-rv-actions, .dz-rv-actions:focus-within { opacity: 1; }
.dz-rv {
  width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px; line-height: 1;
  border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-3);
  cursor: pointer; transition: .12s;
}
.dz-rv-ok:hover  { color: var(--ok);  border-color: var(--ok);  background: var(--ok-soft); }
.dz-rv-bad:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.dz-rv-esc:hover { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
@media (hover: none) { .dz-rv-actions { opacity: 1; } }

/* ── DOCUMENTS PAGE responsive: single column, upload rail first ── */
@media (max-width: 980px) {
  .dz-docs-grid { grid-template-columns: 1fr; gap: 22px; }
  .dz-docs-rail { position: static; order: -1; }
}
@media (max-width: 640px) {
  .dz-docs-rail .upload-box { padding: 30px 16px; }
}

/* ── FOOTER ── */
.footer { background: var(--ink); padding: 40px 0 24px; }
.footer-inner { margin-bottom: 28px; }
.footer-logo { font-family: var(--mono); font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.footer-logo em { color: var(--uv-2); font-style: normal; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,0.4); max-width: 320px; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 18px; }
.footer-copy { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.2); }

/* ── SETTINGS ── */
.settings-section { padding: 48px 0 90px; }
.settings-head { margin-bottom: 34px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.settings-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; }
.settings-card-hd {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.settings-kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; font-size: 14px; }
.settings-kv dt { color: var(--ink-soft); white-space: nowrap; }
.settings-kv dd { color: var(--ink); font-family: var(--mono); font-size: 13px; text-align: right; word-break: break-word; }
.settings-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: center; }
.settings-stat-n { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; font-size: 30px; color: var(--ink); }
.settings-stat-lab { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.settings-verdicts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.settings-badge { font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-radius: 20px; }
.settings-badge.v-trusted { background: var(--pass-dim); color: var(--pass); }
.settings-badge.v-review { background: var(--warn-dim); color: var(--warn-text); }
.settings-badge.v-reject { background: var(--red-dim); color: var(--red); }
.settings-badge.v-unknown { background: var(--bg-cool); color: var(--ink-soft); }
.settings-badge.v-yes { background: var(--pass-dim); color: var(--pass); }
.settings-badge.v-no { background: var(--warn-dim); color: var(--warn-text); }
.settings-full { grid-column: 1 / -1; }
.settings-profile-hd { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; }
.settings-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--red-dim); color: var(--red);
  font-family: var(--display); font-weight: 700; font-size: 24px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; border: 1px solid var(--red-border);
}
.settings-profile-name { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-size: 22px; color: var(--ink); }
.settings-profile-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.settings-kv dd.settings-copy-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.settings-copy-btn {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border-mid); background: var(--bg); color: var(--ink-mid); cursor: pointer; flex-shrink: 0;
}
.settings-copy-btn:hover { border-color: var(--red); color: var(--red); }

/* ── DANGER ZONE / DELETE-ACCOUNT MODAL ── */
.settings-danger { border-color: var(--red-border); }
.settings-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,15,30,0.5); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.settings-modal {
  background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 26px 28px; width: 100%; max-width: 420px;
}

/* ── AUTH FORMS ── */
.auth-section { padding: 64px 0 90px; min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--uv); text-align: center; }
.auth-title { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; font-size: 30px; text-align: center; margin: 10px 0 8px; }
.auth-sub { text-align: center; color: var(--ink-soft); font-size: 14.5px; margin-bottom: 30px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--ink-mid); }
.form-input {
  font-family: var(--sans); font-size: 16px; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-mid); background: var(--bg); color: var(--ink); outline: none;
  transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--uv); }
/* Primary button — indigo (--uv), the app's one primary-action colour. This rule sits in
   style.css (loaded after tokens.css) so it must NOT reintroduce the old marketing red, or it
   silently overrides tokens.css's .btn-primary on every in-app page. */
.btn-primary {
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: #fff;
  background: var(--uv); border: none; border-radius: var(--r-md); padding: 12px 20px;
  cursor: pointer; transition: filter 0.15s, background 0.15s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-error {
  font-size: 13.5px; color: var(--red); background: var(--red-dim); border: 1px solid var(--red-border);
  border-radius: var(--r-md); padding: 10px 13px; display: none;
}
.auth-error.show { display: block; }
.auth-success {
  font-size: 13.5px; color: var(--pass); background: var(--pass-dim); border-radius: var(--r-md);
  padding: 10px 13px; display: none;
}
.auth-success.show { display: block; }
.auth-alt { text-align: center; margin-top: 22px; font-size: 14px; color: var(--ink-soft); }
.auth-alt a { color: var(--uv); font-weight: 600; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .panel-wrap { position: static; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero { padding: 44px 0 40px; }
  .hero-h1 { font-size: 36px; }
  .hero-stats { gap: 14px; flex-wrap: wrap; }
  /* Marketing-only (see the desktop rule above) — must not reach in-app .section cards. */
  body:not(.dz-app) .section { padding: 56px 0; }
  .sec-title { font-size: 27px; }
  .sec-hdr { margin-bottom: 32px; }
  .steps { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 20px; }
  .info-grid { grid-template-columns: 1fr; }
  .upload-box { padding: 36px 16px; }
  /* Verdict row: label + two action links don't fit on one line on narrow phones */
  .verdict-row { flex-wrap: wrap; row-gap: 6px; }
  .trust-inner { gap: 12px 24px; }
  .settings-stat-grid { gap: 8px; }
}
/* Long filenames must truncate, not push the badges off-screen */
.history-row > div:first-child { min-width: 0; flex: 1; }
.history-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Touch devices: comfortable tap targets for the small icon buttons and drawer links.
   Compact desktop controls (.acct-btn 32px / key actions 28px) get bumped to the 40px
   canon minimum only where there's no mouse — desktop density is unchanged. */
@media (pointer: coarse) {
  .history-delete-btn { width: 40px; height: 40px; }
  .nav-drawer { overflow-y: auto; }
  .nav-drawer a { padding: 15px 0; }
  .link-btn { padding: 6px 0; }
  .acct-btn, .acct-key-actions .acct-btn { height: 40px; }
  .acct-select { height: 40px; font-size: 16px; }
}

/* ── Annotated document viewer (preview.js v2) ─────────────────────────────
   Append to style.css (or link separately). Uses the existing token set:
   --red / --red-dim / --warn-text / --warn-dim / --pass / --pass-dim / --ink*. */

.dp-stage { position: relative; display: inline-block; touch-action: pan-x pan-y; }
/* stacking: page canvas (auto) < heat layer (1) < flag overlay (2) < X-Ray lens canvas (3) */
.dp-overlay { position: absolute; inset: 0 auto auto 0; pointer-events: none; z-index: 2; }

/* evidence heat layer (report.case_file.heatmap) — translucent severity-tinted
   regions under the flag marks; the preview's default "where to look" surface */
.dp-heatlayer { position: absolute; inset: 0 auto auto 0; pointer-events: none; z-index: 1; }
/* spotlight: dimming canvas punched through at the evidence regions */
.dp-spotlayer { position: absolute; inset: 0 auto auto 0; pointer-events: none; z-index: 1; }
/* per-page origin chip — the provenance page class ("digital text" / "scan + overlay") */
.dp-origin {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--border-mid);
  border-radius: 99px; padding: 3px 10px; white-space: nowrap; cursor: help;
}
.dp-origin[data-cls="image_plus_overlay"] { color: var(--red); border-color: var(--red); background: var(--red-dim); }
.dp-origin[data-cls="image_only"], .dp-origin[data-cls="image_plus_ocr"] { color: var(--warn-text, #8A5D09); border-color: #C98A0B; }
/* page strip: thumbnail rail with per-page evidence badges */
.dp-pagestrip {
  display: flex; gap: 8px; align-items: flex-end; overflow-x: auto; padding: 8px 10px;
  border-bottom: 1px solid var(--border); background: var(--bg); scrollbar-width: thin;
}
.dp-pagethumb {
  position: relative; flex: none; border: 2px solid var(--border-mid); border-radius: 4px;
  background: var(--bg-cool); padding: 0; cursor: pointer; min-width: 44px; min-height: 56px;
}
.dp-pagethumb:hover { border-color: var(--ink-soft); }
.dp-pagethumb.cur { border-color: var(--uv, #7C6FF0); box-shadow: 0 0 0 2px var(--uv-soft, rgba(124,111,240,0.25)); }
.dp-thumb-canvas { display: block; min-width: 40px; min-height: 50px; }
.dp-thumb-canvas canvas { display: block; width: 56px; height: auto; border-radius: 2px; }
.dp-thumb-no {
  position: absolute; left: 3px; bottom: 3px; font-family: var(--mono); font-size: 9px;
  color: #fff; background: rgba(10,11,20,0.72); border-radius: 3px; padding: 0 4px;
}
.dp-thumb-badge {
  position: absolute; right: -5px; top: -6px; font-family: var(--mono); font-size: 9px;
  font-weight: 700; color: #fff; border-radius: 99px; padding: 1px 5px; min-width: 16px;
}
.dp-thumb-badge.crit { background: var(--red); }
.dp-thumb-badge.warn { background: #C98A0B; }
.dp-thumb-badge.note { background: var(--ink-soft); }
.dp-strip-more { flex: none; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); padding-bottom: 6px; }
.dp-heat-cell { position: absolute; border-radius: 4px; pointer-events: auto; border: 0; padding: 0; }
button.dp-heat-cell { appearance: none; font: inherit; }
.dp-heat-cell.crit { background: radial-gradient(ellipse at center, rgba(230,57,70,.42), rgba(230,57,70,.10)); outline: 1px solid rgba(230,57,70,.55); }
.dp-heat-cell.high { background: radial-gradient(ellipse at center, rgba(230,57,70,.32), rgba(230,57,70,.06)); outline: 1px solid rgba(230,57,70,.4); }
.dp-heat-cell.med  { background: radial-gradient(ellipse at center, rgba(201,138,11,.30), rgba(201,138,11,.06)); outline: 1px solid rgba(201,138,11,.4); }
.dp-heat-cell.low  { background: radial-gradient(ellipse at center, rgba(164,176,190,.26), rgba(164,176,190,.05)); outline: 1px solid rgba(164,176,190,.35); }
.dp-heat-cell.linked { cursor: pointer; }
.dp-heat-cell.linked:hover { outline-width: 2px; box-shadow: 0 0 0 3px rgba(230,57,70,0.18); }
.dp-heat-cell.pulse { animation: dp-heat-pulse 1.1s ease-in-out 3; z-index: 3; }
/* deep-snapshot popover: before/after/diff crops on the page */
.dp-pop-snaps { width: min(340px, 92%); }
.dp-snap-row { display: flex; gap: 6px; margin-top: 8px; }
.dp-snap { flex: 1 1 0; min-width: 0; margin: 0; }
.dp-snap img { display: block; width: 100%; height: auto; border: 1px solid var(--border-mid); border-radius: 4px; background: #fff; }
.dp-snap figcaption { font-family: var(--mono); font-size: 9px; color: var(--ink-soft); margin-top: 3px; text-align: center; }
.dp-snap-caveat { font-size: 10.5px; color: var(--ink-faint); line-height: 1.4; margin-top: 6px; }
@keyframes dp-heat-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(230,57,70,.45); } 50% { box-shadow: 0 0 0 10px rgba(230,57,70,0); } }
@media (prefers-reduced-motion: reduce) { .dp-heat-cell.pulse { animation: none; } }
.dp-hotnav { display: inline-flex; align-items: center; gap: 4px; }
.dp-hot-lab { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.dp-btn.dp-hot { font-family: var(--mono); font-size: 10.5px; color: var(--red); }

/* markers drawn over located evidence text */
.dp-mark {
  position: absolute; pointer-events: auto; cursor: pointer;
  border: 2px solid; border-radius: 4px; background: transparent;
  padding: 0; transition: box-shadow 0.15s;
}
.dp-mark-crit  { border-color: var(--red);        background: rgba(230, 57, 70, 0.13); }
.dp-mark-high  { border-color: var(--hot, #E68A3D); background: rgba(230, 138, 61, 0.13); }
.dp-mark-warn  { border-color: #C98A0B;           background: rgba(201, 138, 11, 0.13); }
.dp-mark-note  { border-color: var(--ink-faint);  background: rgba(164, 176, 190, 0.14); }
.dp-mark-field { border-color: var(--pass);       background: rgba(42, 157, 143, 0.12); border-style: dashed; }
/* AI reasoning layer: the model's quoted evidence, anchored server-side — visually
   distinct (violet, dashed) so machine reasoning never masquerades as engine evidence */
.dp-mark-ai { border-color: var(--uv, #7C6FF0) !important; border-style: dashed; background: rgba(124, 111, 240, 0.10); }
.dp-mark-ai > .dp-mark-tag { background: var(--uv, #7C6FF0) !important; }
.dp-mark-page.dp-mark-ai { color: var(--uv, #7C6FF0); background: var(--uv-soft, rgba(124,111,240,.12)); }
.dp-btn.dp-layer.dp-layer-ai.on { border-color: var(--uv, #7C6FF0); color: var(--uv, #7C6FF0); background: var(--uv-soft, rgba(124,111,240,.12)); }
/* invisible-ink reveal riding a mark: the hidden text, readable at its exact spot */
.dp-mark-reveal {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: max-content; max-width: 260px; overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: #C1121F;
  background: rgba(255,255,255,0.93); border: 1px solid rgba(193,18,31,0.5);
  border-radius: 3px; padding: 1px 6px; pointer-events: none; z-index: 1;
}
.dp-mark-crit  { animation: dp-blink 1.6s infinite; }
@keyframes dp-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(230, 57, 70, 0); } }
@media (prefers-reduced-motion: reduce) { .dp-mark-crit { animation: none; } }
.dp-mark.sel { animation: none; box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.22), var(--shadow-lg); z-index: 4; }
.dp-mark-field.sel { box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.22), var(--shadow-lg); }

/* page-level marker: the finding is on this page but its evidence isn't
   text-locatable (paraphrased quote, scan, image-level finding) — a pinned
   pill in the corner instead of a vanished flag */
.dp-mark-page {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--bg); box-shadow: var(--shadow); z-index: 3;
}
.dp-mark-page.dp-mark-crit { color: var(--red); background: var(--red-dim); animation: none; }
.dp-mark-page.dp-mark-high { color: var(--hot, #E68A3D); background: var(--hot-soft, rgba(230,138,61,.14)); }
.dp-mark-page.dp-mark-warn { color: #8A5D09; background: var(--warn-dim); }
.dp-mark-page.dp-mark-note { color: var(--ink-soft); background: var(--bg-cool); }

/* F-01 · CODE tag on the first rect of a marker */
.dp-mark-tag {
  position: absolute; top: -15px; left: -2px; white-space: nowrap;
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.05em; color: #fff; padding: 1px 6px; border-radius: 4px;
  background: var(--red); pointer-events: none;
}
.dp-mark-tag.alt { top: auto; bottom: -15px; }        /* de-collide stacked tags */
.dp-mark-high  > .dp-mark-tag { background: var(--hot, #E68A3D); }
.dp-mark-warn  > .dp-mark-tag { background: #C98A0B; }
.dp-mark-note  > .dp-mark-tag { background: var(--ink-soft); }
.dp-mark-field > .dp-mark-tag { background: var(--pass); }

/* popover with the finding's message / detail / source */
.dp-pop {
  position: absolute; z-index: 6; width: min(280px, 88%);
  background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 11px 12px; pointer-events: auto;
  text-align: left; font-size: 12.5px; line-height: 1.45;
}
.dp-pop-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.dp-pop-id {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: #fff; padding: 1px 7px; border-radius: 4px; letter-spacing: 0.05em;
}
.dp-pop-id.crit { background: var(--red); }
.dp-pop-id.high { background: var(--hot, #E68A3D); }
.dp-pop-id.warn { background: #C98A0B; }
.dp-pop-id.note { background: var(--ink-soft); }
.dp-pop-id.field { background: var(--pass); }
.dp-pop-src { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); }
.dp-pop-msg { font-weight: 600; color: var(--ink); }
.dp-pop-detail {
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-mid);
  word-break: break-word;
}
.dp-pop-x {
  position: absolute; top: 6px; right: 7px; border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 12px; line-height: 1; padding: 3px 5px;
}
.dp-pop-x:hover { color: var(--ink); }

/* ── Findings panel — the workbench sidebar beside the page (modeled on the
   standalone X-Ray engine's finding list + detail inspector). Every forensic
   finding is listed; located ones jump to their mark, document-level ones sit
   under their own divider so nothing is ever dropped. ── */
.dp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.dp-findings-panel { width: 280px; }
.dp-findings-panel {
  display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border);
  background: var(--bg); max-height: 640px;
}
.dpf-hd {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--bg-warm);
}
.dpf-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.dpf-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink); background: var(--bg-cool); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; }
.dpf-tally { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dpf-list { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }
.dpf-item {
  display: block; width: 100%; text-align: left; margin: 0 0 5px; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--ink); cursor: pointer; font: inherit;
}
.dpf-item:hover { background: var(--bg-warm); border-color: var(--border-mid); }
.dpf-item.sel { background: var(--uv-soft); border-color: var(--uv); box-shadow: inset 3px 0 var(--uv); }
.dpf-top { display: flex; align-items: center; gap: 7px; }
.dpf-sev { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.dpf-sev-critical { color: var(--red); }
.dpf-sev-high { color: var(--hot); }
.dpf-sev-medium { color: var(--warn-text); }
.dpf-sev-low, .dpf-sev-info { color: var(--ink-faint); }
.dpf-id { font-family: var(--mono); font-size: 9px; color: var(--ink-faint); }
.dpf-page { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--ink-soft); }
.dpf-item strong { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.dpf-divider {
  margin: 10px 2px 6px; padding-top: 8px; border-top: 1px dashed var(--border-mid);
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* Detail inspector — the selected finding in full, pinned under the list. */
.dpf-detail { border-top: 1px solid var(--border); background: var(--bg-warm); padding: 11px 12px; max-height: 200px; overflow-y: auto; }
.dpf-detail-hd { display: flex; align-items: center; gap: 8px; }
.dpf-detail-id { font-family: var(--mono); font-size: 9.5px; color: var(--ink-soft); }
.dpf-detail-where { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); }
.dpf-copylink { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 12px; padding: 0 2px; }
.dpf-copylink:hover { color: var(--ink); }
.dpf-detail-msg { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.dpf-detail-txt { margin-top: 5px; font-size: 11.5px; color: var(--ink-mid); line-height: 1.5; overflow-wrap: anywhere; }
.dpf-detail-meta { margin-top: 7px; font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); overflow-wrap: anywhere; }
/* Collapse toggle: desktop keeps the panel open beside the page; on narrow screens
   (where the panel stacks under the document) the findings list folds behind its
   header so the page keeps the screen. */
.dpf-collapse {
  display: none; border: none; background: none; color: var(--ink-soft);
  font-size: 12px; cursor: pointer; padding: 2px 6px; margin-left: 4px;
}
@media (max-width: 860px) {
  .dp-body { grid-template-columns: 1fr; }
  .dp-findings-panel { width: auto; border-left: none; border-top: 1px solid var(--border); max-height: 320px; }
  .dpf-collapse { display: inline-flex; }
  .dp-findings-panel.collapsed .dpf-list,
  .dp-findings-panel.collapsed .dpf-detail { display: none; }
  .dp-findings-panel.collapsed { max-height: none; }
  .dp-xray-hint { flex-basis: 100%; min-width: 0; }
}
/* Touch ergonomics: comfortable hit targets for every preview control */
@media (pointer: coarse) {
  .dp-btn { min-width: 34px; min-height: 34px; }
  .dp-btn.dp-layer, .dp-btn.dp-xray-toggle { min-width: 0; }
  .dp-xray-chip, .dp-xray-mode, .dp-xray-region, .dp-xray-font { min-height: 32px; }
  .dp-pagethumb { min-width: 52px; }
}

/* layer toggles in the toolbar */
.dp-layernav { display: flex; gap: 6px; margin-left: auto; }
/* narrow screens: the chips fold behind one "Layers" disclosure so the toolbar
   stays one row on a phone */
.dp-btn.dp-layers-toggle {
  display: none; width: auto; padding: 0 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
@media (max-width: 640px) {
  .dp-btn.dp-layers-toggle { display: inline-flex; }
  .dp-layernav .dp-layer { display: none; }
  .dp-layernav.open .dp-layer { display: inline-flex; }
  /* the reviewer-tool buttons fold behind the same disclosure (the toolnav
     sits right after the layernav in the toolbar) — one row of chrome, total */
  .dp-toolnav .dp-btn { display: none; }
  .dp-layernav.open + .dp-toolnav .dp-btn { display: inline-flex; }
  .dp-btn.dp-expand { display: none; }   /* pinch covers it on touch */
}
/* expand: lift the preview's height cap for dense documents */
.dp-btn.dp-expand.on { border-color: var(--uv, #7C6FF0); color: var(--uv, #7C6FF0); background: var(--uv-soft, rgba(124,111,240,.12)); }
.doc-preview.dp-expanded .dp-canvas-wrap { max-height: 86vh; }
.doc-preview.dp-expanded .dp-findings-panel { max-height: 86vh; }

/* reviewer tools: loupe / note / export */
.dp-toolnav { display: flex; align-items: center; gap: 6px; }
.dp-btn.dp-loupe.on, .dp-btn.dp-note.on { border-color: var(--uv, #7C6FF0); color: var(--uv, #7C6FF0); background: var(--uv-soft, rgba(124,111,240,.12)); }
.dp-loupe-lens { position: absolute; z-index: 7; pointer-events: none; filter: drop-shadow(0 4px 14px rgba(10,15,30,0.35)); }
.dp-stage.dp-noting { cursor: crosshair; touch-action: none; }
.dp-stage.dp-louping { touch-action: none; }   /* the loupe owns touch drags while active */
.dp-notelayer { position: absolute; inset: 0 auto auto 0; pointer-events: none; z-index: 1; }
.dp-note-box {
  position: absolute; pointer-events: auto; cursor: pointer; padding: 0;
  border: 1.6px dashed #0E7490; border-radius: 4px; background: rgba(14,116,144,0.08);
}
.dp-note-box::after {
  content: "✎"; position: absolute; right: -9px; top: -11px; font-size: 11px;
  background: #0E7490; color: #fff; border-radius: 99px; width: 17px; height: 17px;
  display: grid; place-items: center;
}
.dp-note-band { position: absolute; z-index: 6; pointer-events: none; border: 1.5px dashed #0E7490; background: rgba(14,116,144,0.10); border-radius: 3px; }
.dp-pop-id.note { background: #0E7490; }
.dp-note-form textarea {
  width: 100%; margin-top: 8px; font: inherit; font-size: 12.5px; padding: 7px 9px;
  border: 1px solid var(--border-mid); border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  resize: vertical;
}
.dp-note-actions { display: flex; justify-content: flex-end; margin-top: 7px; }
.dp-note-del { margin-top: 8px; font-size: 11.5px; color: var(--red); }
.dp-snap-zoom { display: inline-block; margin-top: 8px; font-size: 11.5px; }

/* before/after compare lightbox */
.dp-lightbox {
  position: fixed; inset: 0; z-index: 240; background: rgba(6,8,16,0.82);
  display: grid; place-items: center; padding: 18px;
}
.dp-lb-panel {
  width: min(760px, 96vw); max-height: 92vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 14px;
}
.dp-lb-hd { display: flex; align-items: baseline; gap: 10px; }
.dp-lb-hd strong { font-size: 14px; color: var(--ink); }
.dp-lb-caveat { flex: 1; font-size: 11px; color: var(--ink-faint); }
.dp-lb-x { border: none; background: none; color: var(--ink-soft); font-size: 15px; cursor: pointer; }
.dp-lb-x:hover { color: var(--ink); }
.dp-lb-stage { position: relative; margin-top: 10px; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.dp-lb-stage img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.dp-lb-b { position: absolute; inset: 0; }
.dp-lb-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.dp-lb-wipe { width: 100%; accent-color: var(--uv, #7C6FF0); }
.dp-lb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-lb-chip {
  border: 1px solid var(--border-mid); background: var(--bg); color: var(--ink-mid);
  border-radius: 99px; padding: 3px 12px; font-family: var(--mono); font-size: 10.5px; cursor: pointer;
}
.dp-lb-chip.on { border-color: var(--uv, #7C6FF0); color: var(--uv, #7C6FF0); background: var(--uv-soft, rgba(124,111,240,.12)); }
.dp-btn.dp-layer {
  width: auto; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.dp-btn.dp-layer.on { border-color: var(--red); color: var(--red); background: var(--red-dim); }
.dp-btn.dp-layer .dp-layer-n {
  font-family: var(--mono); font-size: 9.5px;
  border: 1px solid currentColor; border-radius: 99px; padding: 0 5px; opacity: 0.8;
}

/* ============ Account settings rebuild (tabbed page) ============ */
.acct-tabs { display: flex; gap: 4px; margin-bottom: 30px; border-bottom: 1px solid var(--border-mid); overflow-x: auto; }
.acct-tab {
  font-size: 13.5px; padding: 9px 14px; color: var(--ink-soft); cursor: pointer;
  border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; font-weight: 500;
}
.acct-tab:hover { color: var(--ink); }
.acct-tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--uv); }
.acct-panel { display: none; }
.acct-panel.active { display: block; }

.acct-h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.acct-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.acct-divider { border-top: 1px solid var(--border); margin: 28px 0; }

.acct-trust {
  background: var(--pass-dim); border: 1px solid rgba(42,157,143,0.35);
  border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 28px;
  display: flex; gap: 12px; align-items: flex-start;
}
.acct-trust svg { flex-shrink: 0; margin-top: 2px; }
.acct-trust-title { display: block; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.acct-trust-body { font-size: 13px; color: var(--ink-mid); line-height: 1.6; }

.acct-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
@media (max-width: 560px) { .acct-grid2 { grid-template-columns: 1fr; } }
.acct-choice {
  background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--r-md);
  padding: 16px 18px; cursor: pointer; position: relative; text-align: left; font: inherit; color: inherit;
}
.acct-choice:hover { border-color: var(--ink-faint); }
.acct-choice.selected { border: 2px solid var(--pass); padding: 15px 17px; }
.acct-choice-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; min-height: 22px; }
.acct-badge { background: var(--pass-dim); color: var(--pass); font-size: 11px; padding: 3px 9px; border-radius: 6px; font-weight: 600; }
.acct-choice-title { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.acct-choice-desc { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.acct-frow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; }
.acct-frow + .acct-frow { border-top: 1px solid var(--border); }
.acct-frow-title { font-weight: 600; font-size: 13.5px; margin: 0 0 3px; color: var(--ink); }
.acct-frow-desc { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.acct-frow-icon { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); }

.acct-toggle { position: relative; display: inline-block; width: 40px; height: 24px; flex-shrink: 0; }
.acct-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.acct-toggle .track { position: absolute; inset: 0; background: var(--ink-faint); border-radius: 24px; transition: .15s; }
.acct-toggle .thumb { position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.acct-toggle input:checked + .track { background: var(--pass); }
.acct-toggle input:checked ~ .thumb { transform: translateX(16px); }
.acct-toggle input:focus-visible + .track { outline: 2px solid var(--pass); outline-offset: 2px; }
.acct-toggle.sm { width: 34px; height: 20px; }
.acct-toggle.sm .thumb { height: 14px; width: 14px; }
.acct-toggle.sm input:checked ~ .thumb { transform: translateX(14px); }

.acct-source-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 14px; margin-bottom: 8px;
}
.acct-source-left { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); }

.acct-btn {
  height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--r-sm);
  border: 1px solid var(--border-mid); background: var(--bg); color: var(--ink);
  cursor: pointer; font-weight: 500; font-family: inherit;
}
.acct-btn:hover { background: var(--bg-warm); }
.acct-btn:disabled { opacity: .5; cursor: default; }
.acct-btn:disabled:hover { background: var(--bg); }
.acct-btn.danger { border-color: rgba(230,57,70,0.4); color: var(--red); }
.acct-btn.danger:hover { background: var(--red-dim); }
.acct-btn.danger.solid { background: var(--red); color: #fff; border-color: var(--red); }

.acct-slider-wrap { margin-bottom: 22px; }
.acct-slider-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.acct-slider-head .lab { color: var(--ink-soft); }
.acct-slider-head .val { font-weight: 600; color: var(--ink); }
.acct-slider-wrap input[type=range] { width: 100%; accent-color: var(--pass); }
.acct-slider-labels { display: flex; justify-content: space-between; margin-top: 4px; }
.acct-slider-labels span { font-size: 11px; color: var(--ink-faint); }

.acct-select {
  width: 100%; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border-mid);
  padding: 0 10px; font-size: 13.5px; background: var(--bg); color: var(--ink); font-family: inherit;
}

.acct-footnote {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint);
}
.acct-footnote.saved { color: var(--pass); }

.acct-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .acct-plans { grid-template-columns: 1fr; } }
.acct-plan { background: var(--bg); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: 16px; position: relative; }
.acct-plan.current { border: 2px solid var(--pass); padding: 15px; }
.acct-plan-name { font-weight: 600; font-size: 14px; margin: 0 0 2px; }
.acct-plan-price { font-size: 20px; font-weight: 600; margin: 6px 0 2px; }
.acct-plan-price small { font-size: 12px; font-weight: 400; color: var(--ink-faint); }
.acct-plan-feat { font-size: 12px; color: var(--ink-soft); margin: 10px 0 14px; line-height: 1.7; padding-left: 0; list-style: none; }
.acct-plan-feat li { display: flex; gap: 6px; align-items: flex-start; }
.acct-plan-feat li::before { content: "\2713"; color: var(--pass); font-weight: 700; flex-shrink: 0; }
.acct-plan .acct-btn, .acct-plan .btn-primary { width: 100%; }

.acct-usage-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 8px; }
.acct-usage-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.acct-usage-head .label { font-size: 13px; color: var(--ink-soft); }
.acct-usage-head .count { font-size: 13.5px; font-weight: 600; }
.acct-usage-note { font-size: 12px; color: var(--ink-faint); margin: 10px 0 0; }

.acct-key-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: 1px dashed var(--border-mid); border-radius: var(--r-sm);
  padding: 12px 14px; margin-bottom: 8px;
}
.acct-key-name { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; }
.acct-key-value { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-key-meta { font-size: 11.5px; color: var(--ink-faint); margin: 3px 0 0; }
.acct-key-actions { display: flex; gap: 6px; flex-shrink: 0; }
.acct-key-actions .acct-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.acct-pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.acct-pill.soon { background: var(--bg-cool); color: var(--ink-soft); }

.acct-danger-zone { border: 1px solid var(--red-border); border-radius: var(--r-md); overflow: hidden; margin-top: 8px; }
.acct-danger-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--bg); flex-wrap: wrap; }
.acct-danger-row + .acct-danger-row { border-top: 1px solid var(--red-border); }
.acct-danger-title { font-weight: 600; font-size: 13.5px; margin: 0 0 3px; }
.acct-danger-desc { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.6; max-width: 480px; }

.acct-soon-note { font-size: 12px; color: var(--ink-faint); }
.acct-narrow { max-width: 720px; }

/* ── DOCUMENT X-RAY (static/xray.js) — forensic lens over the document preview ──
   Scanner-green accent scoped to the preview; the control bar is a dark "console"
   in BOTH themes (matches the sidebar), so only the accent needs a dark remap. */
.doc-preview { --xr: #16A34A; --xr-glow: rgba(22,163,74,0.45); --xr-veil: rgba(34,197,94,0.16); }
[data-theme="dark"] .doc-preview { --xr: #22C55E; --xr-glow: rgba(34,197,94,0.5); --xr-veil: rgba(34,197,94,0.2); }

.dp-xraynav { display: flex; align-items: center; margin-left: auto; }
.dp-btn.dp-xray-toggle {
  width: auto; padding: 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 5px;
}
.dp-btn.dp-xray-toggle:hover:not(:disabled) { border-color: var(--xr); color: var(--xr); }
.dp-btn.dp-xray-toggle.on { border-color: var(--xr); color: #fff; background: var(--xr); }

/* control bar: layer chips + live hint + (fonts) legend */
.dp-xray-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: #0D1520; color: #B9C5D3;
}
.dp-xray-title { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--xr); flex: none; }
.dp-xray-layers { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-xray-chip {
  border: 1px solid rgba(255,255,255,0.16); background: transparent; color: #B9C5D3;
  border-radius: 99px; padding: 3px 12px; min-height: 26px; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
}
.dp-xray-chip:hover { border-color: var(--xr); color: #fff; }
.dp-xray-chip.on { background: var(--xr); border-color: var(--xr); color: #fff; }
.dp-xray-hint { flex: 1 1 220px; min-width: 180px; font-size: 11px; line-height: 1.45; color: #8FA0B4; }

/* fonts-layer legend — one chip per embedded font, click to isolate; ⚠ = outlier */
.dp-xray-legend { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.dp-xray-font {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #C7D2DE;
  border-radius: 6px; padding: 3px 9px; font-family: var(--mono); font-size: 10.5px; cursor: pointer;
}
.dp-xray-font i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dp-xray-font em { font-style: normal; color: #7A8AA0; }
.dp-xray-font:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.dp-xray-font.solo { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }
.dp-xray-font.outlier { border-color: #E5484D; color: #FBD5D7; }
.dp-xray-font.outlier em { color: #E5989D; }
.dp-xray-legend-note { font-family: var(--mono); font-size: 10.5px; color: #8FA0B4; }

/* reveal-mode toggle (sweep / full) + opacity blend slider */
.dp-xray-modes { display: inline-flex; align-items: center; gap: 6px; }
.dp-xray-mode {
  border: 1px solid rgba(255,255,255,0.16); background: transparent; color: #B9C5D3;
  border-radius: 6px; padding: 3px 10px; min-height: 24px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.dp-xray-mode:hover { border-color: var(--xr); color: #fff; }
.dp-xray-mode.on { background: var(--xr); border-color: var(--xr); color: #fff; }
.dp-xray-opacity { width: 76px; accent-color: var(--xr); }

/* region chips: one per localized region of the active server layer */
.dp-xray-region {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(255,138,61,0.5); background: rgba(255,138,61,0.08); color: #FFC9A3;
  border-radius: 6px; padding: 3px 9px; font-family: var(--mono); font-size: 10.5px; cursor: pointer;
}
.dp-xray-region:hover { border-color: #FF8A3D; color: #fff; }
.dp-xray-region.focus { background: #FF8A3D; border-color: #FF8A3D; color: #1A0E04; font-weight: 700; }
.dp-xray-close {
  margin-left: auto; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #B9C5D3;
  border-radius: 6px; min-width: 26px; min-height: 24px; cursor: pointer; font-size: 12px;
}
.dp-xray-close:hover { border-color: #fff; color: #fff; }

/* the lens canvas: sits over the page canvas, clipped by the scan line (clip-path is
   set inline by xray.js); the line itself is the draggable slider */
.dp-xray-canvas { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; box-shadow: 0 1px 6px rgba(10,15,30,0.12); }
.dp-stage.dp-xray-on { cursor: ns-resize; touch-action: none; }
.dp-xray-line { position: absolute; left: -10px; right: -10px; height: 0; z-index: 6; cursor: ns-resize; }
.dp-xray-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px;
  background: var(--xr); border-radius: 2px;
  box-shadow: 0 0 10px 1px var(--xr-glow), 0 0 26px 4px var(--xr-glow);
}
/* soft green veil fading up from the line into the revealed layer — the "scanned" glow */
.dp-xray-line::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 46px;
  pointer-events: none; background: linear-gradient(to top, var(--xr-veil), transparent);
}
.dp-xray-grip {
  position: absolute; right: -4px; top: -11px; width: 22px; height: 22px;
  display: grid; place-items: center; background: var(--xr); color: #fff;
  border-radius: 6px; font-size: 12px; box-shadow: 0 2px 8px var(--xr-glow);
}
.dp-xray-line-tag {
  position: absolute; left: 6px; top: -22px; font-family: var(--mono); font-size: 9.5px;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--xr); padding: 2px 8px; border-radius: 4px 4px 4px 0;
}
.dp-xray-line:focus-visible { outline: none; }
.dp-xray-line:focus-visible::before { box-shadow: 0 0 0 2px #fff, 0 0 12px 2px var(--xr-glow); }
@media (prefers-reduced-motion: reduce) { .dp-xray-line::after { display: none; } }
@media print { .dp-xraynav, .dp-xray-bar, .dp-xray-canvas, .dp-xray-line, .dp-pagestrip, .dp-spotlayer, .dp-loupe-lens, .dp-note-band, .dp-toolnav { display: none !important; } }