:root {
  color-scheme: light;
  --paper: #f4f1e9;
  --surface: #fbfaf6;
  --surface-2: #ece8de;
  --ink: #22211e;
  --muted: #66645e;
  --faint: #716e65;
  --line: #d1cdc2;
  --line-strong: #a8a397;
  --accent: #b83019;
  --accent-hover: #932510;
  --accent-soft: #f6e8e1;
  --accent-line: #e3b3a4;
  --warn: #8a5a00;
  --warn-soft: #f5ecd6;
  --warn-line: #dfc88f;
  --good: #276647;
  --good-soft: #e5efe7;
  --good-line: #a9c9b4;
  --focus: #b83019;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #191a18;
    --surface: #22231f;
    --surface-2: #2c2d28;
    --ink: #f1eee5;
    --muted: #b9b5aa;
    --faint: #9c988d;
    --line: #46473f;
    --line-strong: #717168;
    --accent: #f07a58;
    --accent-hover: #ff977a;
    --accent-soft: #3c2922;
    --accent-line: #7a4638;
    --warn: #e8bd6a;
    --warn-soft: #3a3120;
    --warn-line: #6a5524;
    --good: #a5d8b5;
    --good-soft: #263a2e;
    --good-line: #3f6a50;
    --focus: #ff9271;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191a18;
  --surface: #22231f;
  --surface-2: #2c2d28;
  --ink: #f1eee5;
  --muted: #b9b5aa;
  --faint: #9c988d;
  --line: #46473f;
  --line-strong: #717168;
  --accent: #f07a58;
  --accent-hover: #ff977a;
  --accent-soft: #3c2922;
  --accent-line: #7a4638;
  --warn: #e8bd6a;
  --warn-soft: #3a3120;
  --warn-line: #6a5524;
  --good: #a5d8b5;
  --good-soft: #263a2e;
  --good-line: #3f6a50;
  --focus: #ff9271;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { position: relative; margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; transition: background-color .25s, color .25s; }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ''; opacity: .19; background-image: url("../assets/noise.svg"); }
h1, h2, h3, h4, p, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { min-width: 0; border: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.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: fixed; z-index: 100; top: -70px; left: 16px; padding: 12px 18px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }
.micro, .eyebrow, .top-note, .findings-title, .verdict-kicker, .chip, .field-cat, .options legend {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .105em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 0 28px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; color: var(--accent); }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.brand-name span { color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.top-note { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.private-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.icon-button { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; transition: border-color .18s, background .18s; }
.icon-button:hover { border-color: var(--ink); background: var(--surface); }

/* Layout */
.app { flex: 1; display: block; }
.panel { padding: 24px 28px 28px; }
.results { display: flex; flex-direction: column; min-width: 0; }
.pane-scroll { padding: 0 28px 32px; }
@media (min-width: 900px) and (min-height: 520px) {
  body { height: 100vh; height: 100dvh; overflow: hidden; }
  .app { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 0; }
  .panel { overflow-y: auto; border-right: 1px solid var(--line); }
  .results { min-height: 0; }
  .pane-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-top: 18px; }
}

/* Panel: intro, drop zone, options */
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.eyebrow .rule { width: 24px; height: 2px; background: var(--accent); }
h1 { margin-top: 14px; font-family: var(--serif); font-size: clamp(44px, 5vw, 68px); font-weight: 400; letter-spacing: -.052em; line-height: .99; }
h1 em { color: var(--accent); font-weight: 400; }
.lead { max-width: 480px; margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 18px; border: 1px dashed var(--line-strong); background: var(--surface); text-align: center; cursor: pointer; transition: background-color .25s, border-color .25s, box-shadow .25s; }
.dropzone:hover, body.dragging .dropzone { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.drop-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--accent); }
.drop-title { font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; line-height: 1.2; }
.drop-sub { color: var(--muted); font-size: 13px; }
.dropzone .button { margin-top: 12px; }
.drop-formats { margin-top: 8px; color: var(--muted); }
.options { margin-top: 22px; }
.options legend { padding: 0 0 8px; color: var(--muted); }
.option { padding: 12px 0; border-top: 1px solid var(--line); }
.option label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.option-title { display: block; font-size: 13px; font-weight: 700; }
.option-desc { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.switch { position: relative; flex: none; width: 34px; height: 20px; margin-top: 1px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface-2); appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .2s, border-color .2s; }
.switch::after { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); content: ''; transition: transform .2s, background .2s; }
.switch:checked { border-color: var(--ink); background: var(--ink); }
.switch:checked::after { background: var(--paper); transform: translateX(14px); }
.quality { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-left: 46px; color: var(--muted); font: 11px var(--mono); }
.quality input { flex: 1; min-width: 80px; accent-color: var(--accent); }
.quality output { min-width: 38px; color: var(--ink); text-align: right; }
.side-note { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; transition: background-color .18s, color .18s, border-color .18s, transform .18s; }
.button:hover:not(:disabled) { border-color: var(--ink); background: var(--surface); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button.primary { border-color: #a92814; background: #a92814; color: #fff; }
.button.primary:hover:not(:disabled) { border-color: #81200f; background: #81200f; }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button.quiet { border-color: transparent; color: var(--muted); }
.button.quiet:hover:not(:disabled) { border-color: var(--line); color: var(--ink); }
.link-button { padding: 0; border: 0; background: none; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Results header and empty state */
.pane-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 24px 28px 0; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.pane-head h2 { margin-top: 6px; font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.file-count { margin-left: 8px; color: var(--faint); font: 12px var(--mono); letter-spacing: 0; vertical-align: middle; }
.batch-note { min-height: 20px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.empty { max-width: 640px; margin: 18px auto 0; }
.hero { padding-bottom: 26px; border-bottom: 1px solid var(--ink); }
.steps { margin-top: 4px; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-num { color: var(--accent); font: 400 30px/1 var(--serif); letter-spacing: -.04em; }
.step h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
.step p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.file-list { display: grid; gap: 14px; }

/* File card */
.file-card { border: 1px solid var(--line); border-left-width: 4px; background: var(--surface); }
.file-card.tone-high { border-left-color: var(--accent); }
.file-card.tone-medium { border-left-color: var(--warn); }
.file-card.tone-low { border-left-color: var(--line-strong); }
.file-card.tone-clean { border-left-color: var(--good); }
.card-main { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); }
.card-main:not(.has-findings) { grid-template-columns: minmax(0, 1fr); }
.card-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }
.card-findings { min-width: 0; padding: 16px; border-left: 1px solid var(--line); }
.card-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; }
.thumb { display: grid; place-items: center; overflow: hidden; width: 56px; height: 56px; border: 1px solid var(--line); background: var(--paper); color: var(--faint); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.file-meta { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 3px; color: var(--muted); font: 11px var(--mono); }
.file-meta span + span::before { margin-right: 10px; content: '/'; color: var(--line-strong); }
.size-change { color: var(--ink); font-weight: 700; }
.ai-tag { padding: 0 6px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.file-meta .ai-tag::before { display: none; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Verdict */
.verdict { display: flex; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface-2); }
.verdict > svg { margin-top: 1px; color: var(--muted); }
.verdict.high { border-color: var(--accent-line); background: var(--accent-soft); }
.verdict.high > svg, .verdict.high .verdict-kicker { color: var(--accent); }
.verdict.medium { border-color: var(--warn-line); background: var(--warn-soft); }
.verdict.medium > svg, .verdict.medium .verdict-kicker { color: var(--warn); }
.verdict.clean { border-color: var(--good-line); background: var(--good-soft); }
.verdict.clean > svg, .verdict.clean .verdict-kicker { color: var(--good); }
.verdict-body { min-width: 0; }
.verdict-kicker { color: var(--muted); }
.verdict-title { margin-top: 3px; font-family: var(--serif); font-size: 20px; letter-spacing: -.03em; line-height: 1.2; }
.verdict-detail { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.verdict-note { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.remaining { display: grid; gap: 2px; margin-top: 6px; font-size: 12px; }
.remaining span { font-family: var(--mono); }

/* Findings */
.findings-title { margin-bottom: 8px; color: var(--muted); }
.findings { border: 1px solid var(--line); background: var(--paper); }
.findings li { display: grid; grid-template-columns: 70px minmax(110px, .9fr) minmax(0, 1.4fr); align-items: baseline; gap: 4px 12px; padding: 6px 10px; font-size: 13px; }
.findings li + li { border-top: 1px solid var(--line); }
.field-name { font-weight: 700; }
.field-cat { margin-left: 6px; color: var(--faint); font-size: 9px; }
.field-value { font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.findings li.is-removed .field-name, .findings li.is-removed .field-value { color: var(--muted); text-decoration: line-through; }
.chip { display: inline-block; padding: 2px 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 9px; text-align: center; }
.chip.high { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.chip.medium, .chip.kept { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.chip.removed { border-color: var(--good-line); background: var(--good-soft); color: var(--good); }
.more { margin-top: 6px; }
.more summary { display: flex; align-items: center; min-height: 40px; color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.more[open] .findings { margin-top: 2px; }

/* Progress and errors */
.progress-text { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
progress { display: block; overflow: hidden; width: 100%; height: 4px; border: 0; background: var(--surface-2); appearance: none; -webkit-appearance: none; }
progress::-webkit-progress-bar { background: var(--surface-2); }
progress::-webkit-progress-value { background: var(--accent); transition: width .25s; }
progress::-moz-progress-bar { background: var(--accent); }
.notice.error { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.notice span { color: var(--ink); }

/* Toast and drag overlay */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: min(92vw, 520px); padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transform: translateX(-50%); }
.drag-overlay { position: fixed; inset: 12px; z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--accent); background: var(--paper); background: color-mix(in srgb, var(--paper) 93%, transparent); text-align: center; pointer-events: none; }
.drag-overlay strong { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.03em; }
.drag-overlay span { color: var(--muted); }
body.dragging .drag-overlay { display: flex; }

/* Reading content shown before any image is added */
.content section { padding: 26px 0; }
.content section + section { border-top: 1px solid var(--line); }
.content h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -.04em; line-height: 1.15; }
.reveal-list { display: grid; margin-top: 12px; }
.reveal-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.reveal-list dt { font-size: 14px; font-weight: 700; }
.reveal-list dd { margin: 0; color: var(--muted); font-size: 14px; }
.ai-note { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { color: var(--accent); content: '+'; font: 400 22px/1 var(--serif); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.noscript { padding: 14px 28px; border-bottom: 1px solid var(--accent-line); background: var(--accent-soft); font-size: 14px; }
.notfound { max-width: 560px; margin: 0 auto; padding: 72px 28px; }
.notfound h1 { font-size: clamp(40px, 8vw, 64px); }
.notfound p { margin-top: 16px; color: var(--muted); }
.notfound .button { margin-top: 24px; text-decoration: none; }

@media (max-width: 1100px) {
  .card-main, .card-main.has-findings { grid-template-columns: minmax(0, 1fr); }
  .card-findings { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 16px; }
  .top-note { display: none; }
  .panel { padding: 20px 16px 24px; }
  .pane-head { margin: 20px 16px 0; }
  .pane-scroll { padding: 14px 16px 28px; }
  .bulk { width: 100%; }
  .bulk .button { flex: 1 1 auto; }
  .findings li { grid-template-columns: auto minmax(0, 1fr); }
  .reveal-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .field-value { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}