/* Fonts (LAB-532): self-hosted, so no third-party request (privacy box) and the CSP stays 'self'. OFL: assets/fonts/OFL.txt */
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("assets/fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }

/* Tokens (LAB-532): from Site Checker's styles.css (dark) + a matching light set. */
:root {
  --bg: #F6F7FA; --panel: #FFFFFF; --panel-2: #F3F5F9; --ink: #0F1424; --text: #3C4357; --muted: #5B6378;
  --line: rgba(15,23,42,.12); --line-soft: rgba(15,23,42,.08); --line-strong: rgba(15,23,42,.24);
  --accent: #1F6AAE; --accent-fill: #1F6AAE; --glow: rgba(70,138,193,.10);
  --pass: #0F7A55; --pass-bg: rgba(16,150,100,.07); --pass-line: rgba(16,150,100,.30);
  --warn-bg: #fff4d6; --warn: #8a5a00; --err-bg: #fde8e8; --err: #a32020; --ok: #1d7a3a;
  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0A0B0F; --panel: #11131A; --panel-2: #181B25; --ink: #F4F6FB; --text: #B0B7C9; --muted: #8A92A6;
    --line: rgba(255,255,255,.10); --line-soft: rgba(255,255,255,.06); --line-strong: rgba(255,255,255,.20);
    --accent: #65A2D0; --accent-fill: #1F6AAE; --glow: rgba(70,138,193,.12);
    --pass: #34D399; --pass-bg: rgba(52,211,153,.06); --pass-line: rgba(52,211,153,.28);
    --warn-bg: #3a2f10; --warn: #f0c45a; --err-bg: #3d1a1a; --err: #ff9b9b; --ok: #6fd28f; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* layout rules (display:grid) must never un-hide an element */
body { margin: 0; font: 15px/1.5 var(--font-body); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 620px at 72% -12%, var(--glow), transparent 60%), var(--bg); }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: .9em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.2px; } h1 { margin: 0; } h2 { margin: 0 0 12px; font-size: 18px; }
.tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: var(--warn-bg); color: var(--warn); padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.devbar { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.devbar label { display: flex; flex-direction: column; gap: 2px; }
.devbar input, .devbar select { width: 300px; }
/* ---------------------------------------------------------------- header + hero (LAB-532) */
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 22px 0; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 34px; height: 34px; display: block; }
.titles { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.2px; color: var(--ink); }
.brand-by { font-size: 12.5px; color: var(--muted); }
.head-link { font-size: 13px; color: var(--text); text-decoration: none; }
.head-link:hover { color: var(--accent); }
.app-head .devbar { flex-basis: 100%; }
.hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; margin-bottom: 28px; }
.hero-text { flex: 999 1 460px; min-width: 0; max-width: 620px; }
.hero h1 { font-weight: 700; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.1; letter-spacing: -.6px; margin: 0 0 14px; color: var(--ink); }
.hero p { margin: 0; font-size: 16.5px; color: var(--text); }
.hero p code { font-size: 14px; }
.hero-art { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.art-receipt { width: 132px; background: #FBF8F1; color: #2B2B2B; padding: 14px 12px 18px; border-radius: 3px; transform: rotate(-4deg);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); font: 9px/1.55 var(--mono); }
.ar-name { text-align: center; font-weight: 600; font-size: 10px; margin-bottom: 6px; }
.ar-row, .ae-row { display: flex; justify-content: space-between; gap: 6px; }
.ar-total { font-weight: 600; }
.ar-rule { border-top: 1px dashed #999; margin: 6px 0 4px; }
.ar-barcode { margin-top: 8px; height: 14px; background: repeating-linear-gradient(90deg, #2B2B2B 0 1px, transparent 1px 3px, #2B2B2B 3px 5px, transparent 5px 6px); }
.art-arrow { flex: none; color: var(--accent); }
.art-email { width: 170px; background: #fff; color: #1E2230; border-radius: 10px; overflow: hidden; box-shadow: 0 22px 50px -20px rgba(70,138,193,.55); font-size: 10px; line-height: 1.5; }
.ae-head { background: #1F6AAE; color: #fff; padding: 10px 12px; font-weight: 600; font-size: 11px; }
.ae-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ae-total { font-weight: 600; }
.ae-rule { border-top: 1px solid #E4E7EE; margin: 4px 0; }
.ae-btn { margin-top: 6px; background: #EEF3FA; color: #1F6AAE; text-align: center; border-radius: 5px; padding: 4px 0; font-weight: 600; }

main { max-width: 1080px; margin: 0 auto; padding: 0 22px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.step { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-fill); color: #fff; font-size: 12px; margin-right: 6px; font-family: var(--font-body); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 34px 20px; text-align: center; cursor: pointer; color: var(--muted); }
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--accent); outline: none; }
.drop:focus-visible { box-shadow: 0 0 0 3px rgba(101,162,208,.2); }
.drop-icon { color: var(--accent); }
.drop-title { font-size: 16px; font-weight: 500; color: var(--ink); }
.drop-note { font-size: 12.5px; color: var(--muted); }
.btn-primary, button.primary { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: #fff;
  border: 1px solid rgba(101,162,208,.35); border-radius: 10px; padding: 12px 22px; background: linear-gradient(135deg, #1F6AAE 0%, #0D4578 100%);
  box-shadow: 0 8px 30px -12px rgba(70,138,193,.55); transition: filter .16s, transform .16s; }
.drop:hover .btn-primary, button.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.privacy { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--pass-line); background: var(--pass-bg); font-size: 13.5px; color: var(--text); }
.privacy svg { flex: none; margin-top: 2px; color: var(--pass); }
.privacy strong { color: var(--pass); font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.spacer { flex: 1; }
button, input, select { font: inherit; color: inherit; }
button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 7px 13px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: wait; }
input, select { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 6px 9px; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(101,162,208,.15); }
.muted { color: var(--muted); font-size: 13px; }
.status { font-size: 13px; color: var(--muted); }
.status.err { color: var(--err); } .status.ok { color: var(--ok); }
.correct { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .correct { grid-template-columns: 1fr; } }
.photo { margin: 0; position: sticky; top: 12px; }
.photo img { width: 100%; display: block; border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; max-height: 80vh; object-fit: contain; }
.photo figcaption { margin-top: 6px; text-align: center; }
.loupe { position: absolute; width: 260px; height: 180px; border: 2px solid var(--accent); border-radius: 10px; pointer-events: none; display: none;
  background-repeat: no-repeat; background-color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.35); z-index: 5; }
.upload-ready { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-top: 14px; align-items: start; }
@media (max-width: 600px) { .upload-ready { grid-template-columns: 1fr; } }
.thumb { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.thumb img { width: 100%; max-height: 300px; object-fit: contain; display: block; transition: opacity .15s; }
.hint { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.upload-side .row:first-of-type { margin-top: 0; }
.form fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.form legend { font-weight: 600; margin-bottom: 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.f input, .f select { font-size: 14px; color: var(--ink); }
.low input, input.low { background: var(--warn-bg); border-color: var(--warn); }
table.items { width: 100%; border-collapse: collapse; font-size: 14px; }
table.items th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 4px; }
table.items td { padding: 2px 4px; }
table.items input { width: 100%; }
table.items td.num input { text-align: right; }
table.items .x { padding: 2px 8px; }
.notice { padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; font-size: 13px; }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.err { background: var(--err-bg); color: var(--err); }
.seg button { border-radius: 0; margin-left: -1px; } .seg button:first-child { border-radius: 6px 0 0 6px; } .seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); }
.frame-wrap { margin-top: 12px; background: repeating-conic-gradient(var(--bg) 0 25%, var(--panel) 0 50%) 0 0/20px 20px; border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; justify-content: center; }
#preview { width: 640px; max-width: 100%; height: 600px; min-height: 300px; border: 0; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.15); transition: width .2s; }
.json, .meta pre { white-space: pre-wrap; word-break: break-word; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: auto; font-size: 12px; max-height: 480px; }
.meta { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* crop dialog */
.cropper { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: grid; place-items: center; z-index: 50; padding: 16px; }
.cropper[hidden] { display: none; }
.cropper-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; max-width: 96vw; }
.cropper-box p { margin: 0 0 10px; }
.crop-stage { position: relative; display: inline-block; overflow: hidden; /* keeps the dimming inside the photo, buttons stay bright */ cursor: crosshair; touch-action: none; user-select: none; line-height: 0; }
.crop-stage img { max-height: 74vh; max-width: 90vw; display: block; pointer-events: none; }
.crop-rect { position: absolute; border: 2px dashed #fff; outline: 1px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0,0,0,.5); pointer-events: none; }
/* Grab handles: visual only — hits are worked out in JS with a generous touch radius.
   Sat just inside the box so they stay visible when the box fills the photo (the stage clips overflow). */
.crop-rect .hd { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.crop-rect .nw { left: -4px; top: -4px; } .crop-rect .ne { right: -4px; top: -4px; }
.crop-rect .sw { left: -4px; bottom: -4px; } .crop-rect .se { right: -4px; bottom: -4px; }
.crop-rect .n, .crop-rect .s { left: calc(50% - 9px); width: 18px; height: 10px; border-radius: 6px; }
.crop-rect .w, .crop-rect .e { top: calc(50% - 9px); width: 10px; height: 18px; border-radius: 6px; }
.crop-rect .n { top: -4px; } .crop-rect .s { bottom: -4px; } .crop-rect .w { left: -4px; } .crop-rect .e { right: -4px; }
@media (pointer: coarse) { .crop-rect .nw, .crop-rect .ne, .crop-rect .sw, .crop-rect .se { width: 24px; height: 24px; } }

.notice .suggest { display: block; margin-top: 6px; }
.notice button.fix { margin-left: 4px; padding: 3px 10px; font-size: 13px; border-color: currentColor; background: transparent; color: inherit; font-weight: 600; }

.tpl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-right: 8px; }
.tpl select { font-weight: 600; color: var(--ink); }

.keep { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin: 4px 0 10px; }
.notice.info { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
button.stop { border-color: var(--err); color: var(--err); font-weight: 600; }

/* Phones — kept at the END so it overrides the base .photo rules above. */
@media (max-width: 800px) {
  /* Stacked layout (phones): the photo must scroll away with the page — sticky made it sit on top of the form fields. */
  .photo { position: static; }
  .photo img { max-height: 50vh; }
  .photo figcaption { display: none; } /* the hover loupe needs a mouse */
}

/* Phones: line items as cards — the item name gets the full width (it was squeezed to one letter). */
@media (max-width: 600px) {
  table.items thead { display: none; }
  table.items, table.items tbody { display: block; }
  table.items tr { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 4px 8px; align-items: end;
    padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.items td { display: block; padding: 0; }
  table.items td:first-child { grid-column: 1 / -1; }
  table.items td.num::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
}

/* Paper copy progress (LAB-482) */
.paper-progress { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.paper-progress[hidden] { display: none; }
.paper-progress .secs { font-variant-numeric: tabular-nums; }
.spinner { flex: none; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rr-spin .8s linear infinite; }
@keyframes rr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { display: none; } }

/* .eml export (LAB-462) */
.attach { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }

/* Send to my inbox (LAB-478) */
.send-row { margin-top: 8px; }
.send-row input[type=email] { flex: 1 1 220px; min-width: 0; max-width: 320px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 10px; font-size: 16px; }
.send-row input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.send-status { font-size: 13px; color: var(--muted); flex-basis: 100%; }
.send-status:empty { display: none; }
.send-status.ok { color: var(--ok); } .send-status.err { color: var(--err); }

/* Dark preview (LAB-324): the frame itself goes dark too, so the email isn't judged against a white box */
#preview.dark { background: #121212; }

/* ---------------------------------------------------------------- sample receipts (LAB-325) */
.samples { margin-top: 14px; }
.samples-h { margin: 0 0 8px; font-size: 14px; }
.samples-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.sample { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 10px; min-height: 44px; }
.sample strong { font-size: 14px; }
.sample span { font-size: 12px; color: var(--muted); }
.sample.busy { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- how this works (LAB-325; panel since LAB-532) */
.how { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.how > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.how > summary::-webkit-details-marker { display: none; }
.how-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--accent); transition: transform .16s; }
.how:not([open]) .how-caret { transform: rotate(-90deg); }
.how h2 { margin: 0; font-size: 19px; color: var(--ink); }
.how-toggle { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(101,162,208,.4); border-radius: 999px; padding: 1px 9px; }
.how-toggle::before { content: "Hide"; }
.how:not([open]) .how-toggle::before { content: "Show"; }
.how-lede { margin: 0; color: var(--text); font-size: 15px; max-width: 60ch; }
.how-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; font-size: 12.5px; color: var(--muted); }
.how-stats li { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; }
.how-stats b { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .how-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.how-beats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.beat { position: relative; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.beat h3 { margin: 0; font-size: 16px; line-height: 1.3; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.beat h3 svg { flex: none; color: var(--accent); }
.beat p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.beat code { font: 13px/1 var(--mono); background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.chips { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--bg); }
.snippet { margin: auto 0 0; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: 12px/1.5 var(--mono); overflow-x: auto; color: var(--ink); }
.snippet code { background: none; padding: 0; font: inherit; }
.how-foot { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- JSON inspector (LAB-323) */
.json-inspector { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 10px 12px; }
.jv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jv-bar button { font-size: 13px; padding: 4px 10px; }
.jv-state { margin: 10px 0 6px; font-size: 13px; padding: 6px 10px; border-radius: 6px; }
.jv-state.good { color: var(--ok); background: transparent; padding-left: 0; }
.jv-state.bad { color: var(--err); background: var(--err-bg); }
.jv-state.info { color: var(--muted); padding-left: 0; }
.jv-state ul { margin: 4px 0 0; padding-left: 18px; }
.jv-tree { font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 520px; overflow: auto; overflow-wrap: anywhere; }
.jv-kids { padding-left: 18px; border-left: 1px dashed var(--line); margin-left: 5px; }
.jv-sum { cursor: pointer; list-style: none; border-radius: 4px; }
.jv-sum::-webkit-details-marker { display: none; }
.jv-sum::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); transition: transform .12s; }
details[open] > .jv-sum::before { transform: rotate(90deg); }
.jv-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jv-row { padding-left: 1em; }
.jv-key { color: var(--ink); font-weight: 600; }
.jv-colon, .jv-brace { color: var(--muted); }
.jv-str { color: #1d7a3a; } .jv-num { color: #2f5bd3; } .jv-bool { color: #8a3ab9; } .jv-null { color: var(--muted); font-style: italic; }
@media (prefers-color-scheme: dark) { .jv-str { color: #8fd6a4; } .jv-num { color: #9db4ff; } .jv-bool { color: #d4a2f0; } }
.jv-low { background: var(--warn-bg); outline: 1px solid var(--warn); border-radius: 3px; padding: 0 2px; }
.jv-flag { margin-left: 8px; font: 600 10px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); background: var(--warn-bg); padding: 2px 5px; border-radius: 3px; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .jv-sum::before { transition: none; } }

/* Invite list (LAB-326): when sending is refused, the .eml download is the way to see it in a mail app */
button.nudge { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) { button.nudge { transition: box-shadow .2s; } }

/* Request access (LAB-504) */
.request-row { margin-top: 8px; }
.request-row input[type=text] { flex: 1 1 220px; min-width: 0; max-width: 320px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 10px; font-size: 16px; }
/* Not a receipt (LAB-529) */
.not-receipt { margin-top: 12px; }
.not-receipt p { margin: 6px 0 10px; }
.not-receipt .row { margin: 0; }
.not-receipt button { border-color: currentColor; background: transparent; color: inherit; }
/* Footer (LAB-531, Site Checker style since LAB-532) */
.foot { max-width: 1080px; margin: 0 auto; padding: 8px 22px 48px; text-align: center; font-size: 12.5px; color: var(--muted); }
.foot #version { font-variant-numeric: tabular-nums; }
/* Launch (LAB-326): the SEO phrase sits in the h1 next to the brand, quieter than the name. */