/* ═══════════════════════════════════════════════════════════════════════════
   InvoiceOCR — design system

   Ink on warm paper, with petrol as the single accent. Hairline rules instead
   of shadows, small 4px corners, and monospaced numerals for every piece of
   financial data. Colour marks state and interaction — never decoration.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inter, self-hosted (see fonts/NOTICE.txt) ────────────────────────────── */
/* Variable weight axis 100–900, so every weight below is a real cut rather
   than a synthesised one. latin-ext carries the Slovak diacritics. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Warm neutral paper — deliberately not the default cool grey */
  --paper:      #f6f5f2;
  --surface:    #ffffff;
  --surface-2:  #f1efea;
  --surface-3:  #e7e4dd;

  --line:       #dedad2;
  --line-2:     #c5c0b5;
  --line-3:     #a8a296;

  --ink:        #16140f;
  --ink-2:      #55504a;
  --ink-3:      #756f66;

  /* Petrol — cool against the warm paper, and nowhere near the default
     indigo/violet that every generated UI reaches for. */
  --accent:     #17606b;
  --accent-h:   #0f464f;
  --on-accent:  #ffffff;
  --focus:      #17606b;

  /* State — muted and earthy, matched to the paper base */
  --ok:         #1d6647;
  --ok-bg:      #e6efe9;
  --review:     #8a5710;
  --review-bg:  #f7efe0;
  --danger:     #9c2f21;
  --danger-bg:  #f7e8e5;

  --r:          4px;      /* controls */
  --r-lg:       6px;      /* panels, stage */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono',
          Consolas, 'Liberation Mono', monospace;

  --t: 100ms linear;

  --header-h: 52px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #0c0c0b;
  --surface:    #131312;
  --surface-2:  #1a1a18;
  --surface-3:  #232320;

  --line:       #272724;
  --line-2:     #3a3a35;
  --line-3:     #56564f;

  --ink:        #f0eee9;
  --ink-2:      #b0aba1;
  --ink-3:      #8b857b;

  --accent:     #3ea7b5;
  --accent-h:   #57bcc8;
  --on-accent:  #04171b;
  --focus:      #3ea7b5;

  --ok:         #4cb587;
  --ok-bg:      #14231c;
  --review:     #d3a04a;
  --review-bg:  #262017;
  --danger:     #e07a68;
  --danger-bg:  #2a1a17;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* cv05 gives 'l' a tail so it cannot be mistaken for 1 or I */
  font-feature-settings: 'cv05' 1;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
svg { display: block; }

/* No border-radius override here — the outline follows each element's own
   corner radius, which is the point of rounding them. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

::selection { background: var(--ink); color: var(--surface); }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 4px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 999;
  transform: translateY(-200%);
  padding: 9px 14px;
  background: var(--ink); color: var(--surface);
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: transform var(--t);
}
.skip-link:focus { transform: translateY(0); }

.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--mono); font-size: 10px; line-height: 1;
  color: var(--ink-3);
}

/* Uppercase micro-label — the workhorse of this design */
.eyebrow {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-header__inner {
  height: 100%;
  padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--r);
  background: var(--accent);
}
.brand-mark svg { width: 13px; height: 13px; stroke: var(--on-accent); }
.brand-text {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-text strong { font-weight: 600; color: var(--ink-2); }

.header-actions { display: flex; align-items: center; gap: 0; }
.header-sep { width: 1px; height: 20px; background: var(--line); margin: 0 10px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.status-dot {
  width: 6px; height: 6px; flex-shrink: 0;
  border-radius: 1px;
  background: var(--line-3);
  transition: background var(--t);
}
.status-dot.is-ok    { background: var(--ok); }
.status-dot.is-error { background: var(--danger); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--ink-2);
  transition: color var(--t), background var(--t);
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn--text {
  width: auto; padding: 0 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .05em;
}

.icon-sun  { display: none; }
:root[data-theme="dark"] .icon-sun  { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* Determinate-looking progress rail */
.topbar-progress {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 70;
  height: 2px; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity var(--t);
}
.topbar-progress.is-active { opacity: 1; }
.topbar-progress::after {
  content: '';
  position: absolute; inset: 0;
  width: 28%;
  background: var(--accent);
  animation: rail 1.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes rail {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  width: 100%;
  padding: 12px 14px 20px;
  display: grid;
  /* Split is user-adjustable via the drag handle and persisted; the default
     leaves the 12-column line-items table enough room to avoid scrolling. */
  grid-template-columns: minmax(320px, var(--split, 47%)) 14px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

/* ── Splitter ─────────────────────────────────────────────────────────────── */
.splitter {
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  touch-action: none;
}
.splitter::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; margin-left: -.5px;
  background: var(--line);
  transition: background var(--t), width var(--t), margin var(--t);
}
.splitter:hover::after,
.splitter:focus-visible::after,
.splitter.is-active::after {
  width: 3px; margin-left: -1.5px;
  background: var(--accent);
}
.splitter:focus-visible { outline: none; }

/* ── Panels ───────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.panel--source {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  display: flex; flex-direction: column;
}
/* Only once a document is loaded does the panel claim the full viewport —
   an empty dropzone stretched to full height is just a lot of nothing. */
.panel--source.has-doc { height: calc(100vh - var(--header-h) - 28px); }
.panel--source.is-dragover { border-color: var(--accent); }

.panel--results { container-type: inline-size; }

.panel-head {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
}
.panel-head__title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.panel-head__title svg { width: 13px; height: 13px; stroke: var(--ink-3); }
.panel-head__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.panel-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}

.panel-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;
}

/* ── Tags (square, not pills) ─────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .01em;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip svg { width: 11px; height: 11px; }
.chip--review  { color: var(--review); border-color: currentColor; background: var(--review-bg); }
.chip--success { color: var(--ok);     border-color: currentColor; background: var(--ok-bg); }
.chip--danger  { color: var(--danger); border-color: currentColor; background: var(--danger-bg); }
.chip--button  { cursor: pointer; }
.chip--button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn--primary {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 550;
}
.btn--primary:hover:not(:disabled) { background: var(--accent-h); border-color: var(--accent-h); }

.btn--ghost { color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--line-3); }

.btn--subtle { border-color: transparent; color: var(--ink-2); }
.btn--subtle:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }

.btn--sm { height: 30px; padding: 0 10px; font-size: 13px; gap: 5px; }
.btn--sm svg { width: 13px; height: 13px; }
.btn--icon { width: 30px; padding: 0; }
.btn--block { width: 100%; height: 44px; font-size: 15px; font-weight: 600; }

.btn__spinner {
  width: 13px; height: 13px; flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  opacity: .7;
}
@keyframes spin { to { transform: rotate(360deg); } }

.foot-hint {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; color: var(--ink-3);
}

/* ── Dropzone ─────────────────────────────────────────────────────────────── */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 210px; padding: 26px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  text-align: center; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--accent); background: var(--surface-2); }
.dropzone__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color var(--t);
}
.dropzone__icon svg { width: 17px; height: 17px; stroke: var(--ink-3); }
.dropzone:hover .dropzone__icon { border-color: var(--accent); }
.dropzone:hover .dropzone__icon svg { stroke: var(--accent); }
.dropzone__title { font-size: 16px; font-weight: 650; }
.dropzone__sub   { font-size: 14px; color: var(--ink-2); }
.dropzone__link  { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.format-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 18px; }
.format-chip {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-3);
}
.dropzone__note {
  margin-top: 12px; max-width: 320px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}

/* ── Document preview ─────────────────────────────────────────────────────── */
.preview { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }

.preview__stage {
  position: relative;
  flex: 1;
  width: 100%; min-height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
}

.preview__viewport {
  position: absolute; inset: 0;
  display: flex;
  overflow: auto;
  padding: 8px;
  overscroll-behavior: contain;
}
.preview__viewport.is-grabbing { cursor: grabbing; user-select: none; }
.preview__viewport.is-pannable { cursor: grab; }

.preview__canvas,
.preview__viewport img {
  margin: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--line-2);
}
.preview__viewport img { max-width: none; height: auto; }

.preview__stage iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: #fff;
}

.preview__fallback {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px; text-align: center;
  font-size: 12px; color: var(--ink-3);
}
.preview__fallback svg { width: 30px; height: 30px; stroke: var(--line-2); }

/* Zoom bar */
.preview__tools {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  opacity: .5;
  transition: opacity var(--t);
}
.preview__stage:hover .preview__tools,
.preview__tools:focus-within { opacity: 1; }

.preview__tool {
  display: grid; place-items: center;
  width: 27px; height: 27px;
  border-radius: 3px;
  color: var(--ink-2);
  transition: color var(--t), background var(--t);
}
.preview__tool:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
.preview__tool:disabled { opacity: .35; cursor: not-allowed; }
.preview__tool.is-active { color: var(--on-accent); background: var(--accent); }
.preview__tool svg { width: 14px; height: 14px; }

.preview__zoomlabel {
  min-width: 50px; height: 27px; padding: 0 6px;
  border-radius: 3px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-2);
  transition: color var(--t), background var(--t);
}
.preview__zoomlabel:hover { color: var(--ink); background: var(--surface-2); }
.preview__tooldiv { width: 1px; height: 15px; background: var(--line); margin: 0 3px; }

.preview__bar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.preview__counter {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-2);
  min-width: 58px; text-align: center;
}
.preview__name {
  margin-left: auto; max-width: 60%;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Thumbnails */
.thumbs {
  list-style: none; display: flex; gap: 6px;
  overflow-x: auto; padding-bottom: 4px;
  flex-shrink: 0;
}
.thumbs li { position: relative; flex: 0 0 auto; }
.thumb {
  display: grid; place-items: center;
  width: 40px; height: 52px; overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t), outline-color var(--t);
  outline: 2px solid transparent; outline-offset: -1px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 15px; height: 15px; stroke: var(--ink-3); }
.thumb:hover { border-color: var(--line-3); }
.thumb.is-active { border-color: var(--accent); outline-color: var(--accent); }
.thumb__remove {
  position: absolute; top: -4px; right: -4px;
  display: none; place-items: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2);
}
.thumb__remove svg { width: 8px; height: 8px; }
.thumbs li:hover .thumb__remove { display: grid; }
.thumb__remove:hover { color: var(--danger); border-color: var(--danger); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: var(--r);
  font-size: 13.5px; line-height: 1.55;
  background: var(--surface);
}
.alert svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.alert strong { font-weight: 650; }
.alert ul { margin: 4px 0 0; padding-left: 15px; display: flex; flex-direction: column; gap: 2px; }
.alert code { font-family: var(--mono); font-size: 11px; }
.alert__body { min-width: 0; color: var(--ink); }

.alert--error { border-left-color: var(--danger); background: var(--danger-bg); }
.alert--error svg, .alert--error .alert__body { color: var(--danger); }
.alert--warn  { border-left-color: var(--review); background: var(--review-bg); }
.alert--warn  svg { stroke: var(--review); }
.alert--info  { border-left-color: var(--ink); background: var(--surface-2); }
.alert--info  svg { stroke: var(--ink-2); }

/* ── States ───────────────────────────────────────────────────────────────── */
.state {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 40px;
  max-width: 520px;
}
.state__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.state__icon svg { width: 17px; height: 17px; stroke: var(--ink-3); }
.state__title { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.state__text  { font-size: 14.5px; color: var(--ink-2); margin-top: 7px; line-height: 1.6; }

.steps {
  list-style: none;
  margin-top: 28px; width: 100%;
  border-top: 1px solid var(--line);
}
.step {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
.step__num {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-3);
  flex-shrink: 0;
}

/* Skeleton — flat blocks, no gradient sweep */
.skeleton { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.sk-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.sk {
  background: var(--surface-2);
  animation: fade 1.3s ease-in-out infinite;
}
.sk--tile  { height: 52px; }
.sk--line  { height: 10px; }
.sk--line.w60 { width: 60%; }
.sk--line.w40 { width: 40%; }
.sk--line.w80 { width: 80%; }
.sk--block { height: 110px; }
@keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.loading-head {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px; color: var(--ink-2);
}
.loading-head__timer {
  margin-left: auto;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}

/* ── Result header ────────────────────────────────────────────────────────── */
.result-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  height: 38px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.result-head__title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.result-head__meta { display: flex; align-items: center; gap: 5px; margin-left: auto; }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 12px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.stat:last-child { border-right: none; }
.stat__label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.stat__label svg { width: 11px; height: 11px; }
.stat__value {
  display: block;
  font-family: var(--mono);
  font-size: 24px; font-weight: 550; letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}
.stat__value small { font-size: 13px; color: var(--ink-3); margin-left: 1px; }
.stat__meter {
  height: 2px; margin-top: 8px;
  background: var(--surface-3);
  overflow: hidden;
}
.stat__meter-fill { height: 100%; background: var(--accent); transition: width 400ms linear; }
.stat__meter-fill.is-high { background: var(--ok); }
.stat__meter-fill.is-mid  { background: var(--review); }
.stat__meter-fill.is-low  { background: var(--danger); }
.stat--flag .stat__value { color: var(--review); }

/* ── Document switcher (one upload holding several invoices) ──────────────── */
.docbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.docbar__label {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.docbar__label svg { width: 12px; height: 12px; }
.docbar__tabs {
  display: flex; gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.doctab {
  position: relative;
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 13.5px; color: var(--ink-2);
  white-space: nowrap;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.doctab:hover { border-color: var(--line-3); color: var(--ink); }
.doctab.is-active {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 550;
}
.doctab__meta {
  font-family: var(--mono); font-size: 11.5px;
  opacity: .75;
}
/* A document with a blocking validation error carries a marker stripe */
.doctab.has-flag { border-left: 2px solid var(--danger); }
.doctab.has-flag.is-active { border-left-color: var(--danger); }

/* ── Banners ──────────────────────────────────────────────────────────────── */
.banners { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 0; }
.banners:empty { display: none; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  padding: 0 16px;
}
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 14px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--t);
}
.tab:first-child { padding-left: 0; }
.tab svg { width: 13px; height: 13px; }
.tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: transparent;
}
.tab:first-child::after { left: 0; }
.tab:hover { color: var(--ink-2); }
.tab.is-active { color: var(--accent); font-weight: 600; }
.tab.is-active::after { height: 2px; background: var(--accent); }
.tab__badge {
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--review);
  font-family: var(--mono); font-size: 11px;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 5px;
  height: 44px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.toolbar__label {
  margin-left: auto;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
}

/* ── Invoice form ─────────────────────────────────────────────────────────── */
.fsection { border-bottom: 1px solid var(--line); }
.fsection:last-child { border-bottom: none; }

.fsection__head {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.fsection__head svg { width: 12px; height: 12px; stroke: var(--ink-3); }
.fsection__title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.fsection__meta { margin-left: auto; }

/* Gap-based grid. An earlier version painted the grid background as a hairline
   and let each field cover its own cell — but any row that did not fill all
   6 columns left the raw background showing as a grey block. */
.fgrid {
  --cols: 6;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 11px 14px;
  padding: 13px 16px 15px;
}
.field { grid-column: span 2; min-width: 0; }
.field--wide { grid-column: span 3; }
.field--full { grid-column: 1 / -1; }

.field__label {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-2);
}
.field__input {
  width: 100%; height: 34px; padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 14.5px; color: var(--ink);
  outline: none;
  transition: border-color var(--t), background var(--t);
}
.field__input.mono { font-size: 13.5px; letter-spacing: -.01em; }
.field__input::placeholder { color: var(--ink-3); font-family: var(--font); font-style: italic; }
.field__input:hover { border-color: var(--line-2); }
.field__input:focus { border-color: var(--accent); background: var(--surface); }
.field--empty .field__input { background: var(--surface-2); }

.field__flag {
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--review);
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
}
/* Flagged fields are marked on the control + badge, not by tinting the cell —
   a cell tint needs cell padding, which is what produced the grey-block bug. */
.field--review .field__input {
  border-color: var(--review);
  background: var(--review-bg);
}
.field.is-highlighted .field__input { animation: flash 1.2s steps(1) 3; }
@keyframes flash {
  0%, 50% { border-color: var(--accent); }
  51%,100% { border-color: var(--line); }
}

/* Balance check */
.balance {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px; padding: 10px 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 13.5px;
}
.balance svg { width: 13px; height: 13px; flex-shrink: 0; }
.balance--ok  { color: var(--ok); }
.balance--bad { color: var(--danger); background: var(--danger-bg); }
.balance__math { margin-left: auto; font-family: var(--mono); font-size: 13px; }

/* ── Items table ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.itable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.itable th {
  padding: 7px 14px;
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.itable td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.itable tbody tr:hover { background: var(--surface-2); }
.itable .idx  { width: 1%; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.itable .num  { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.itable .desc { min-width: 0; }
.itable tfoot td {
  padding: 9px 14px;
  font-weight: 650;
  background: var(--surface-2);
  border-bottom: none;
}

/* ── Editable line items — a spreadsheet, not a form ──────────────────────── */
.itable--edit { table-layout: fixed; width: 100%; }
/* Proportional tracks summing to 100%: the table always fits the panel exactly,
   at any splitter position, so no horizontal scrollbar can appear. */
.itable--edit th:nth-child(1),  .itable--edit td:nth-child(1)  { width: 3%; }
.itable--edit th:nth-child(2),  .itable--edit td:nth-child(2)  { width: 7%; }
.itable--edit th:nth-child(3),  .itable--edit td:nth-child(3)  { width: 18%; }
.itable--edit th:nth-child(4),  .itable--edit td:nth-child(4)  { width: 8.5%; }
.itable--edit th:nth-child(5),  .itable--edit td:nth-child(5)  { width: 5%; }
.itable--edit th:nth-child(6),  .itable--edit td:nth-child(6)  { width: 9.5%; }
.itable--edit th:nth-child(7),  .itable--edit td:nth-child(7)  { width: 10%; }
.itable--edit th:nth-child(8),  .itable--edit td:nth-child(8)  { width: 7%; }
.itable--edit th:nth-child(9),  .itable--edit td:nth-child(9)  { width: 6.5%; }
.itable--edit th:nth-child(10), .itable--edit td:nth-child(10) { width: 11%; }
.itable--edit th:nth-child(11), .itable--edit td:nth-child(11) { width: 10.5%; }
.itable--edit th:nth-child(12), .itable--edit td:nth-child(12) { width: 4%; }
.itable--edit th { overflow: hidden; text-overflow: ellipsis; padding-left: 8px; padding-right: 8px; }
.itable--edit td { padding: 0; }
.itable--edit td.idx,
.itable--edit td.act,
.itable--edit td.lt { padding: 6px 8px; }
.itable--edit th.act, .itable--edit td.act { width: 1%; }
.itable--edit td.lt {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
  color: var(--ink); font-weight: 550;
}

/* Cells read as text until you touch them — then they behave like inputs */
.cell {
  width: 100%; min-width: 0; height: 36px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--t), background var(--t);
}
.cell.num, .cell.mono {
  font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cell.num { text-align: right; }
.cell:hover  { border-color: var(--line-2); }
.cell:focus  { border-color: var(--accent); background: var(--surface); position: relative; z-index: 1; }
.cell::placeholder { color: var(--ink-3); }

.cell--sel {
  appearance: none; -webkit-appearance: none;
  padding-right: 18px; min-width: 74px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 11px) 13px, calc(100% - 7px) 13px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.rowdel {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 3px;
  border: 1px solid transparent;
  color: var(--ink-3);
  font-size: 15px; line-height: 1;
  opacity: 0;
  transition: opacity var(--t), color var(--t), border-color var(--t);
}
.itable--edit tr:hover .rowdel { opacity: 1; }
.rowdel:hover, .rowdel:focus-visible {
  opacity: 1; color: var(--danger); border-color: var(--danger);
}

/* Totals recap in the table foot */
.recap td { background: var(--surface-2); }
.recap td:first-child {
  text-align: right;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
}
.recap td.num { font-family: var(--mono); font-weight: 550; color: var(--ink); }
.recap--gross td { border-top: 1px solid var(--line-2); }
.recap--gross td:first-child { color: var(--ink-2); }
.recap--gross td.num { font-size: 15px; font-weight: 700; }
.recap--warn td {
  background: var(--danger-bg);
  color: var(--danger);
  text-align: right;
  text-transform: none; letter-spacing: 0; font-size: 11.5px;
}
.recap--warn td.num { color: var(--danger); }

.itable__actions {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.itable__add {
  padding: 4px 9px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-2);
  transition: border-color var(--t), color var(--t);
}
.itable__add:hover { border-color: var(--accent); color: var(--accent); }
.itable__hint { font-size: 12.5px; color: var(--ink-3); }

/* ── Form actions ─────────────────────────────────────────────────────────── */
.form-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.form-actions__hint { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

/* ── Code ─────────────────────────────────────────────────────────────────── */
.code {
  margin: 0; padding: 14px 16px;
  max-height: min(72vh, 760px); overflow: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: var(--ink); background: var(--surface);
  white-space: pre;
  tab-size: 2;
}
.code--wrap { white-space: pre-wrap; word-break: break-word; }
.code .tok-key   { color: var(--accent); font-weight: 600; }
.code .tok-str   { color: var(--ok); }
.code .tok-num   { color: var(--review); }
.code .tok-bool  { color: var(--danger); }
.code .tok-null  { color: var(--ink-3); }
.code .tok-punct { color: var(--ink-3); }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 800;
  display: flex; flex-direction: column-reverse; gap: 6px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  min-width: 200px; max-width: 360px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 13.5px; color: var(--ink);
  pointer-events: auto;
  animation: toast-in 140ms ease-out;
}
.toast.is-leaving { animation: toast-out 120ms ease-in forwards; }
.toast svg { width: 14px; height: 14px; flex-shrink: 0; }
.toast--ok   svg { stroke: var(--ok); }
.toast--err  { border-color: var(--danger); }
.toast--err  svg { stroke: var(--danger); }
.toast--info svg { stroke: var(--ink-2); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(6px); } }
@keyframes toast-out { to   { opacity: 0; } }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; }
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,9,.88);
}
.lightbox__content { position: relative; display: grid; place-items: center; }
.lightbox__canvas,
.lightbox__img {
  background: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
.lightbox__img { max-width: 94vw; max-height: 92vh; object-fit: contain; }
.lightbox__frame {
  width: min(94vw, 92vh * 0.8); height: 92vh;
  border: 0; background: #fff;
}
.lightbox__caption {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--r);
  background: rgba(0,0,0,.7);
  color: rgba(255,255,255,.85);
  font-family: var(--mono); font-size: 12px;
  pointer-events: none;
  max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lightbox__close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: #fff;
  transition: background var(--t);
}
.lightbox__close:hover { background: rgba(255,255,255,.16); }
.lightbox__close svg { width: 15px; height: 15px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@container (max-width: 900px) {
  .fgrid { --cols: 4; }
  .field--wide { grid-column: span 4; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@container (max-width: 560px) {
  .fgrid { --cols: 2; }
  .field, .field--wide { grid-column: span 2; }
}

@media (max-width: 1080px) {
  .app-main { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .splitter { display: none; }
  .panel--source, .panel--source.has-doc { position: static; height: auto; }
  .panel-body { overflow: visible; }
  .preview__stage { height: 60vh; min-height: 400px; }
  .dropzone { flex: none; min-height: 280px; }
}

@media (max-width: 640px) {
  .status-pill span:not(.status-dot) { display: none; }
  .status-pill { padding: 0 8px; }
  .app-main { padding: 10px; gap: 10px; }
  .result-head, .toolbar, .fsection__head, .form-actions, .tabs { padding-left: 12px; padding-right: 12px; }
  .stat { padding: 10px 12px; }
  .state { padding: 28px 20px; }
  .toasts { right: 10px; left: 10px; bottom: 10px; }
  .toast { max-width: none; }
}

/* ── Motion ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .app-header, .panel--source, .tabs, .toolbar, .form-actions,
  .toasts, .topbar-progress, .lightbox { display: none !important; }
  body { background: #fff; }
  .app-main { display: block; padding: 0; max-width: none; }
  .panel { border: none; }
  .fsection { break-inside: avoid; }
}

/* ── Login ────────────────────────────────────────────────────────────────── */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.auth { width: 100%; max-width: 380px; }

.auth__card {
  display: flex; flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.auth__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }

.auth__title { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.auth__sub   { margin-top: 5px; font-size: 14px; color: var(--ink-2); }

.auth__field { margin-top: 16px; }
.auth__field .field__input { height: 40px; font-size: 15px; }

.auth__pw { position: relative; }
.auth__pw .field__input { padding-right: 40px; }
.auth__reveal {
  position: absolute; top: 0; right: 0;
  display: grid; place-items: center;
  width: 38px; height: 40px;
  color: var(--ink-3);
  transition: color var(--t);
}
.auth__reveal:hover, .auth__reveal.is-on { color: var(--accent); }
.auth__reveal svg { width: 16px; height: 16px; }

.auth__remember {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px;
  font-size: 14px; color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.auth__remember input {
  width: 17px; height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth__card .alert { margin-top: 16px; }
.auth__card .btn--block { margin-top: 20px; }

.auth__foot {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3); text-align: center;
}

/* ── Signed-in user, in the app header ────────────────────────────────────── */
.userbox { display: flex; align-items: center; gap: 8px; }
.userbox__name {
  font-size: 13px; color: var(--ink-2);
  max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) { .userbox__name { display: none; } }

/* ── Batch queue ───────────────────────────────────────────────────────────
   One row per dropped invoice, so a stack can be clicked through while the
   rest are still being scanned. Status lives on the row itself — a queue that
   hides its progress just looks stuck. */
.filebar { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.filebar__list { display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow-y: auto; }
.filebar__progress { font-size: 11px; color: var(--text-3); padding-left: 2px; }

.filetab {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 9px; font: inherit; font-size: 12px; text-align: left;
  color: var(--text-2); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.filetab:hover { background: var(--surface-2); border-color: var(--border); }
.filetab.is-active { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--text); font-weight: 600; }
.filetab:disabled { cursor: default; opacity: .75; }
.filetab__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filetab__meta { flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-3); }
.filetab.is-active .filetab__meta { color: var(--text-2); }

/* Status dot: queued, scanning, done, failed. */
.filetab__dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.filetab--working .filetab__dot { background: var(--accent); animation: filepulse 1s ease-in-out infinite; }
.filetab--done    .filetab__dot { background: var(--success); }
.filetab--error   .filetab__dot { background: var(--danger); }
@keyframes filepulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Queue controls: stop a running scan, mark one reviewed and move on. */
.filebar__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filebar__progress { flex: 1; min-width: 120px; }
.filebar__btn {
  padding: 4px 9px; font: inherit; font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-ring); border-radius: var(--r-sm); cursor: pointer;
}
.filebar__btn:hover { background: var(--surface); border-color: var(--accent); }
.filebar__btn--stop { color: var(--danger); background: var(--danger-soft); border-color: var(--border); }

/* Per-row remove, revealed on hover like the line-item delete. */
.filetab__del {
  flex-shrink: 0; width: 18px; height: 18px; line-height: 1;
  font-size: 13px; color: var(--text-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.filetab:hover .filetab__del, .filetab__del:focus-visible { opacity: 1; }
.filetab__del:hover { color: var(--danger); background: var(--danger-soft); }

/* A reviewed row recedes — the eye should land on what still needs checking. */
.filetab--reviewed .filetab__name { text-decoration: line-through; opacity: .55; }
.filetab--reviewed .filetab__dot  { background: var(--success); opacity: .5; }

/* ── Scan history ─────────────────────────────────────────────────────────── */
.hist { position: fixed; inset: 0; z-index: 850; display: grid; place-items: center; }
.hist__backdrop { position: absolute; inset: 0; background: rgba(10,10,9,.6); }

.hist__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(920px, 94vw);
  height: min(760px, 88vh);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.hist__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.hist__title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.hist__head .icon-btn { margin-left: auto; }

/* Summary strip */
.hist__stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
}
.hist__stats:empty { display: none; }
.hist__stat { padding: 10px 16px; border-right: 1px solid var(--line); }
.hist__stat:last-child { border-right: none; }
.hist__statv {
  display: block;
  font-family: var(--mono); font-size: 17px; font-weight: 550;
  color: var(--ink);
}
.hist__stat.is-bad .hist__statv { color: var(--danger); }
.hist__statl {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}

.hist__tools {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.hist__search { position: relative; flex: 1; display: flex; align-items: center; }
.hist__search svg {
  position: absolute; left: 9px;
  width: 14px; height: 14px; stroke: var(--ink-3); pointer-events: none;
}
.hist__search input {
  width: 100%; height: 34px; padding: 0 10px 0 30px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  font-size: 14px; color: var(--ink);
  outline: none;
}
.hist__search input:focus { border-color: var(--accent); }
.hist__search input::-webkit-search-cancel-button { cursor: pointer; }

.hist__filters { display: flex; gap: 2px; flex-shrink: 0; }
.hist__filter {
  height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  font-size: 13px; color: var(--ink-2);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.hist__filter:hover { color: var(--ink); border-color: var(--line-3); }
.hist__filter.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-weight: 550;
}

.hist__list { flex: 1; min-height: 0; overflow-y: auto; }

.hist__day {
  position: sticky; top: 0; z-index: 1;
  padding: 7px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}

.hist__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t);
}
.hist__row:hover { background: var(--surface-2); }
.hist__row.is-failed { border-left: 2px solid var(--danger); }

.hist__time {
  flex-shrink: 0; width: 44px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
}
.hist__body { flex: 1; min-width: 0; }
.hist__name {
  display: block;
  font-size: 14.5px; font-weight: 550; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist__meta {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist__row.is-failed .hist__meta { color: var(--danger); }
.hist__money {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hist__del {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: var(--r);
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--t), color var(--t), border-color var(--t);
}
.hist__row:hover .hist__del { opacity: 1; }
.hist__del:hover { color: var(--danger); border-color: var(--danger); }
.hist__del svg { width: 14px; height: 14px; }

.hist__empty { padding: 48px 16px; text-align: center; font-size: 14px; color: var(--ink-3); }

.hist__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  flex-shrink: 0;
}
.hist__note { font-size: 12px; color: var(--ink-3); margin-left: auto; }

/* Badge shown in the results header while a stored scan is on screen */
.hist-badge { color: var(--accent); border-color: currentColor; }

@media (max-width: 640px) {
  .hist__stats { grid-template-columns: repeat(3, 1fr); }
  .hist__stat:nth-child(n+4) { border-top: 1px solid var(--line); }
  .hist__tools { flex-wrap: wrap; }
  .hist__money { display: none; }
}