:root {
  /* Dark theme (default) */
  --bg: #0f1318;
  --bg-2: #171c23;
  --surface: #181d24;
  --bg-hi: #1c222b;
  --page-bg: url("/img/bg-dark.webp");
  --page-scrim: rgba(13, 16, 21, 0.62);
  --ink: #e6e9ee;
  --muted: #9aa3b2;
  --faint: #6b7482;
  --line: #2a313b;
  --line-hover: #3a434f;
  --field: #11161d;
  --field-focus: #141a22;
  --hover: rgba(255, 255, 255, 0.06);
  --skip-bg: #232932;
  --code-ink: #c5ccd6;
  --brand: #1ba98f;
  --brand-600: #19987f;
  --brand-700: #7fd8c6;
  --brand-tint: #122a26;
  --accent: #e0964b;
  --ok: #4ade80;
  --ok-bg: #102a1b;
  --ok-border: #1d4a32;
  --bad: #fb9b6a;
  --bad-bg: #2a1710;
  --bad-border: #4a2a1a;
  --ring: rgba(27, 169, 143, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --card-border: rgba(255, 255, 255, 0.16);
  --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.62);
  --biz-overlay: rgba(15, 19, 24, 0.58);
  --biz-overlay-hover: rgba(15, 19, 24, 0.42);
  --biz-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  --radius: 16px;
  --radius-sm: 11px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f6f4ef;
  --bg-2: #efece4;
  --surface: #ffffff;
  --bg-hi: #ffffff;
  --page-bg: url("/img/bg-light.webp");
  --page-scrim: rgba(246, 244, 239, 0.66);
  --ink: #1b2430;
  --muted: #4d586a;
  --faint: #97a0ae;
  --line: #e7e2d8;
  --line-hover: #d8d2c6;
  --field: #fcfbf9;
  --field-focus: #ffffff;
  --hover: rgba(0, 0, 0, 0.03);
  --skip-bg: #e9e6df;
  --code-ink: #2a3340;
  --brand: #0f8a76;
  --brand-600: #0c7363;
  --brand-700: #0a5c4f;
  --brand-tint: #e6f4f0;
  --accent: #e0964b;
  --ok: #15803d;
  --ok-bg: #eaf6ee;
  --ok-border: #c9e7d2;
  --bad: #c2410c;
  --bad-bg: #fcf0e8;
  --bad-border: #f3d6c4;
  --ring: rgba(15, 138, 118, 0.22);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --card-border: rgba(20, 30, 40, 0.22);
  --card-shadow: 0 4px 16px rgba(20, 30, 40, 0.16);
  --card-shadow-hover: 0 12px 30px rgba(20, 30, 40, 0.24);
  --biz-overlay: rgba(255, 255, 255, 0.72);
  --biz-overlay-hover: rgba(255, 255, 255, 0.58);
  --biz-text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(var(--page-scrim), var(--page-scrim)), var(--page-bg) center / cover fixed no-repeat, var(--bg);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  max-width: 880px; /* aligns the brand with the centred flow stages */
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; cursor: pointer; border-radius: 10px; }
.brand:hover { opacity: 0.85; }
.brand:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.logo { display: inline-flex; filter: drop-shadow(0 4px 10px rgba(12, 107, 122, 0.25)); }
.wordmark { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.tag {
  font-size: 12.5px; font-weight: 600; color: var(--brand-700);
  background: var(--brand-tint); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
}
.tag.acct { background: var(--bg-2); color: var(--muted); } /* who's signed in (not a button) */

/* Layout */
.app { max-width: 1080px; margin: 0 auto; padding: 18px 22px 80px; }
/* Single-column flows sit in a centred, comfortable column; results overrides wider below. */
.stage { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; max-width: 880px; margin: 0 auto; }
#results { max-width: 1080px; } /* the files + viewer grid earns the full shell width */
.hidden { display: none !important; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Start stage */
.hero { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 22px 0 10px; }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 26px; max-width: 760px; }
.biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.biz {
  --biz-img: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 20px; cursor: pointer; min-height: 132px;
  background-color: var(--surface);
  background-image: linear-gradient(var(--biz-overlay), var(--biz-overlay)), var(--biz-img);
  background-size: cover; background-position: center;
  border: 1.5px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--card-shadow); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background-image 0.2s;
  color: var(--ink);
}
.biz:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); border-color: var(--brand); background-image: linear-gradient(var(--biz-overlay-hover), var(--biz-overlay-hover)), var(--biz-img); }
.biz.selected { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.biz-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px;
  background: var(--brand-tint); color: var(--brand-600);
}
.biz.selected .biz-icon { background: var(--brand); color: #fff; }
.biz-name { font-weight: 650; font-size: 17px; text-shadow: var(--biz-text-shadow); }
.biz-sub { color: var(--muted); font-size: 13.5px; text-shadow: var(--biz-text-shadow); }

/* Buttons */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600; padding: 10px 18px; border-radius: 11px; cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(12, 115, 99, 0.28); }
.btn.primary:hover { background: var(--brand-600); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--hover); box-shadow: none; }
.btn.lg { width: 100%; padding: 14px; font-size: 16px; }
.start-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.demo-btn { color: var(--muted); font-weight: 600; padding: 8px 14px; }
.demo-btn:hover { color: var(--ink); background: var(--hover); box-shadow: none; }
.btn.tiny { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }

/* Progress */
.progress { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #2bb39a); transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Chat */
.chat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; min-height: 180px;
}
.transcript { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 11px 15px; border-radius: 15px; font-size: 15.3px; animation: pop 0.28s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }
.msg.bot { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 5px; color: var(--ink); }
.msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 4px 12px rgba(12, 115, 99, 0.22); }
.msg.user.skip { background: var(--skip-bg); color: var(--faint); box-shadow: none; }
.msg.user.editable { cursor: pointer; }
.msg.user.editable:hover, .msg.user.editable:focus-visible { box-shadow: 0 0 0 2px var(--ring); outline: none; }
.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; }
.typing { display: flex; gap: 5px; padding: 12px 4px 2px; }
.typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite both; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Review-before-generate */
.review { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 10px 16px 14px; }
.review-head { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 10px 0 6px; }
.review-head.sub { border-top: 1px solid var(--line); margin-top: 6px; }
.rev-row { padding: 12px 2px; border-top: 1px solid var(--line); border-radius: 8px; }
.rev-row.flash { animation: flash 1.4s ease; } /* demo: highlight a just-edited/filled row */
@keyframes flash { 0%, 30% { background: var(--brand-tint); } 100% { background: transparent; } }
.rev-row:first-of-type { border-top: none; }
.rev-head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.rev-q { color: var(--muted); font-size: 13px; line-height: 1.45; flex: 1; min-width: 0; }
.rev-head .btn { flex: none; align-self: flex-start; }
.rev-a { display: block; margin-top: 6px; max-width: 820px; font-weight: 600; font-size: 15px; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.rev-a.skip { color: var(--muted); font-weight: 500; }
/* Readable rendering of structured values (no raw JSON) */
.rv-block { display: grid; gap: 6px; font-weight: 500; }
.rv-line { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }
.rv-line > .rv-k { color: var(--muted); font-weight: 600; white-space: nowrap; }
.rv-sec { margin: 2px 0; }
.rv-sec > .rv-sec-h { font-weight: 700; }
.rv-item { display: flex; gap: 8px; padding-left: 10px; }
.rv-item .rv-price { color: var(--muted); font-weight: 600; white-space: nowrap; }
.rv-item .rv-desc { color: var(--muted); font-weight: 400; }
.rv-faq { margin: 2px 0; }
.rv-faq > .rv-q-text { font-weight: 600; }
.rv-faq > .rv-a-text { color: var(--muted); font-weight: 400; }
.rv-quote { font-style: italic; }
.rv-by { color: var(--muted); font-weight: 600; font-style: normal; }
.rev-ai { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--brand-700); background: var(--brand-tint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; }
.rev-need { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); }
.rev-user { color: var(--muted); background: var(--skip-bg); border-color: var(--line); } /* owner-added (was empty) */
.rev-edit { color: var(--accent); background: var(--bad-bg); border-color: var(--bad-border); } /* AI-found, then edited */
/* Legend explaining the provenance badges */
.review-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--muted); padding: 2px 0 10px; }
.review-legend .rev-ai { margin-left: 0; }
.review-legend .legend-empty { color: var(--faint); }
.review-sources { font-size: 13px; color: var(--muted); padding: 8px 0 2px; }
.review-sources a { color: var(--brand); text-decoration: none; }
.review-sources .src-item { display: block; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Identify form */
/* Identify is a short form - keep it a centred column instead of stranded left in the wide shell. */
#identify { max-width: 600px; margin: 0 auto; }
.ident-form { display: flex; flex-direction: column; gap: 14px; }
.ident-row { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ident-row input { font-weight: 400; }
.ident-opt { font-weight: 400; color: var(--faint); }

/* Composer */
.composer { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.input-area .hint { color: var(--faint); font-size: 13.5px; margin: 0 0 10px; }
input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="number"], input[type="time"], textarea, select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--line); border-radius: var(--radius-sm); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="time"]:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); background: var(--field-focus); }

/* Photos field */
.photos { display: flex; flex-direction: column; gap: 12px; }
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.photo-row .ph-alt { flex: 1 1 100%; }
.photo-row .ph-url { flex: 1 1 220px; width: auto; }
.photo-row .ph-or { color: var(--faint); font-size: 13px; }
.photo-row .ph-upload { cursor: pointer; flex: none; }
.photo-row .ph-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.photo-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.add-photo { align-self: flex-start; margin-top: 4px; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Chips (multi-select) + segmented (yes/no) */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--field); color: var(--ink); font-size: 14.5px; font-weight: 550; transition: all 0.12s;
}
.chip:hover span { border-color: var(--line-hover); }
.chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 3px 9px rgba(12, 115, 99, 0.22); }
.chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--ring); }
.segmented { display: inline-flex; background: var(--bg-2); border-radius: 999px; padding: 4px; gap: 4px; }
.segmented button { border: none; background: transparent; padding: 9px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted); cursor: pointer; }
.segmented button.on { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); }

/* Structured editors (hours / menu / FAQs / reviews / rooms / geo) - never raw JSON */
.struct-edit { display: flex; flex-direction: column; gap: 10px; }
.struct-edit input[type="text"], .struct-edit input[type="url"], .struct-edit input[type="time"], .struct-edit input[type="number"], .struct-edit textarea, .struct-edit select { width: 100%; }
.struct-edit textarea { min-height: 60px; }
.se-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; position: relative; }
.se-card-head { display: flex; align-items: center; gap: 10px; }
.se-card-head .se-grow { flex: 1; }
.se-grid { display: grid; gap: 8px; }
.se-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.se-grid.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
.se-field { display: flex; flex-direction: column; gap: 4px; }
.se-field > label { font-size: 12px; font-weight: 600; color: var(--muted); }
.se-list { display: flex; flex-direction: column; gap: 10px; }
.se-items { display: flex; flex-direction: column; gap: 8px; }
.se-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.se-row .grow { flex: 1 1 150px; width: auto; }
.se-row .narrow { flex: 0 1 110px; width: auto; }
.se-add { align-self: flex-start; }
.se-del { flex: none; padding: 6px 10px; }
.btn.tiny.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
/* Opening-hours editor */
.hours-edit { display: flex; flex-direction: column; gap: 8px; }
.hr-day { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.hr-day:first-child { border-top: none; }
.hr-day > .hr-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; user-select: none; padding-top: 6px; }
.hr-ivs { display: flex; flex-direction: column; gap: 6px; }
.hr-iv { display: flex; align-items: center; gap: 10px; }
/* Time inputs grow to share the row so the editor fills the column instead of leaving dead space. */
.hr-iv input[type="time"] { width: auto; flex: 1 1 0; min-width: 120px; }
.hr-iv .hr-sep { flex: none; color: var(--faint); }
.hr-iv .se-del { flex: none; margin-left: 4px; }
.hr-closed { color: var(--faint); font-size: 13.5px; padding-top: 6px; }
@media (max-width: 640px) { .se-grid.cols-2, .se-grid.cols-3 { grid-template-columns: 1fr; } .hr-day { grid-template-columns: 1fr; } }

/* Results */
.banner { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 600; margin-bottom: 16px; }
.banner.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); }
.banner.bad { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); }
.banner .sub { font-weight: 500; color: var(--muted); font-size: 14px; }
.topnav { display: flex; align-items: center; gap: 10px; }
a.tag { text-decoration: none; }
a.tag:hover, button.tag:hover { background: var(--hover); }
button.tag { cursor: pointer; font-family: inherit; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.results-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.site-preview { width: 100%; height: 480px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 16px; }
.results { display: grid; grid-template-columns: 248px 1fr; gap: 16px; align-items: start; }
/* File list: a sticky sidebar that follows the page scroll; only scrolls itself if the list is huge. */
.files { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 10px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.files-group { padding: 10px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13.6px; color: var(--ink); transition: background 0.12s; }
.file:hover { background: var(--bg); }
.file.active { background: var(--brand-tint); color: var(--brand-700); font-weight: 600; }
.file .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.file.active .dot { background: var(--brand); }
.viewer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--field); }
.viewer-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-actions { display: flex; gap: 6px; flex: none; }
/* Viewer grows to the full file - no inner scrollbar; the page itself scrolls. */
.preview { margin: 0; padding: 16px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.6px; line-height: 1.55; color: var(--code-ink); }
/* File-preview syntax highlighting - token colours, tuned for each theme's preview background. */
:root { --tk-key: #7fd8c6; --tk-str: #9bd17f; --tk-num: #e0964b; --tk-lit: #c08bdd; --tk-mut: #8a93a2; --tk-head: #8fe0cf; }
:root[data-theme="light"] { --tk-key: #0a7d6b; --tk-str: #2f7d1f; --tk-num: #b5651d; --tk-lit: #8a3fb0; --tk-mut: #6b7482; --tk-head: #0a5c4f; }
.preview .tk-key { color: var(--tk-key); }
.preview .tk-str, .preview .tk-link { color: var(--tk-str); }
.preview .tk-num { color: var(--tk-num); }
.preview .tk-lit { color: var(--tk-lit); }
.preview .tk-mut { color: var(--tk-mut); }
.preview .tk-head { color: var(--tk-head); font-weight: 700; }
.preview .tk-bold { color: var(--code-ink); font-weight: 700; }
.preview .tk-code { color: var(--tk-num); }
#restartBtn { margin-top: 18px; }

@media (max-width: 620px) {
  .biz-grid { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; }
  .files { position: static; max-height: 280px; } /* stacked layout: a short scrollable list above the viewer */
}

/* Themed scrollbars - replace the chunky OS default on dark/light surfaces */
* { scrollbar-width: thin; scrollbar-color: var(--line-hover) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-hover); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Visitor QA (quality check) */
.qa-panel { margin: 14px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.qa-err { margin: 0; color: var(--bad); }
.qa-loading { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); }
.qa-spin { flex: none; width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: qa-spin .8s linear infinite; }
.qa-bar { position: relative; height: 3px; max-width: 240px; margin-top: 12px; border-radius: 3px; background: var(--line); overflow: hidden; }
.qa-bar::before { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 3px; background: var(--brand); animation: qa-slide 1.15s ease-in-out infinite; }
@keyframes qa-spin { to { transform: rotate(360deg); } }
@keyframes qa-slide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .qa-spin { animation: none; } .qa-bar::before { animation: none; left: 0; width: 100%; opacity: .4; } }
.qa-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qa-score { font-weight: 700; }
.qa-lead { font-size: 13px; margin: 4px 0 12px; }
.qa-list { display: flex; flex-direction: column; gap: 8px; }
.qa-q { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.qa-q.qa-ok { border-left-color: var(--ok); }
.qa-q.qa-mid { border-left-color: var(--accent); }
.qa-q.qa-bad { border-left-color: var(--bad); }
.qa-qhead { display: flex; align-items: baseline; gap: 10px; }
.qa-v { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.qa-ok .qa-v { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border); }
.qa-mid .qa-v { color: var(--accent); background: var(--bad-bg); border: 1px solid var(--bad-border); }
.qa-bad .qa-v { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-border); }
.qa-qtext { font-weight: 600; }
.qa-a { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.qa-sugg { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.qa-sugg h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.qa-s { margin-bottom: 10px; font-size: 14px; }
.qa-s > div { color: var(--muted); font-size: 13.5px; }
.qa-s-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-field { font-size: 11px; font-weight: 600; color: var(--brand-700); background: var(--brand-tint); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.qa-apply-one { margin-left: auto; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-700); background: var(--brand-tint); border: 1px solid var(--line); border-radius: 7px; padding: 2px 10px; cursor: pointer; }
.qa-apply-one:hover { border-color: var(--brand); color: var(--brand); }
.qa-sugg .btn { margin-top: 6px; }
.qa-allgood { color: var(--ok); font-weight: 600; margin: 14px 0 0; }
/* Flagged review rows from a quality check: a subtle accent stripe + a contained "Improve" callout. */
.rev-row.rev-suggested { border-left: 3px solid var(--accent); border-radius: 4px 8px 8px 4px; padding-left: 12px; }
.rev-suggest { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; padding: 8px 12px; background: var(--bad-bg); border: 1px solid var(--bad-border); border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.rev-suggest-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; }

/* QA suggestions that don't map to a review field row */
.qa-other { background: var(--bad-bg); border: 1px solid var(--bad-border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 14px; }
.qa-other-h { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.qa-o-item { margin-bottom: 8px; font-size: 14px; }
.qa-o-item:last-child { margin-bottom: 0; }
.qa-o-text { color: var(--muted); font-size: 13.5px; }