/* Mobile-first admin shell. Spec §5–§6. Phone rules live here, not in pages. */
:root {
  --action: #635BFF; --action-strong: #4F46E5; --action-soft: #EEF0FF;
  --text: #0A0A0A; --text-2: #5B6170; --border: #E4E6EA; --line: #EEF0F2;
  --page: #F6F7F8; --surface: #FFFFFF; --danger: #C0342B; --success: #137333;
  --r-sm: 12px; --r: 14px; --r-lg: 16px;
  --tabbar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --rail-w: 232px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--action-strong); }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; font-size: 16px; color: inherit; }
button, a, input, select, textarea, [data-tap] { min-height: 48px; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.i { width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 20px; height: 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
.m-shell { min-height: 100dvh; }
.m-page { padding: calc(var(--safe-t) + 20px) 16px calc(var(--tabbar-h) + var(--safe-b) + 24px); max-width: 720px; margin: 0 auto; }
.m-page.full { padding: 0; max-width: none; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.m-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.m-sub { font-size: 14px; color: var(--text-2); }
.m-avatar { width: 48px; height: 48px; border-radius: 24px; background: var(--action); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; }

.m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 4px var(--safe-b); background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.m-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--text-2); font-size: 12px; font-weight: 500; min-height: var(--tabbar-h); }
.m-tab[aria-current="page"] { color: var(--action-strong); font-weight: 600; }
.m-tab-scan .m-scan-btn { width: 52px; height: 52px; margin-top: -22px; border-radius: 26px; background: var(--action); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(99, 91, 255, 0.35); }
.m-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--danger); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.m-badge[hidden] { display: none; }
.m-rail-brand { display: none; }
body.m-no-chrome .m-tabbar { display: none; }

@media (min-width: 1024px) {
  .m-tabbar { top: 0; right: auto; width: var(--rail-w); height: auto; padding: 24px 12px; border-top: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
  .m-rail-brand { display: block; padding: 0 12px 16px; font-weight: 700; font-size: 15px; }
  .m-tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: var(--r-sm); font-size: 15px; min-height: 48px; }
  .m-tab[aria-current="page"] { background: var(--action-soft); }
  .m-tab-scan .m-scan-btn { width: 24px; height: 24px; margin: 0; border-radius: 0; background: none; color: inherit; box-shadow: none; }
  .m-badge { position: static; margin-left: auto; }
  .m-shell { padding-left: var(--rail-w); }
  body.m-no-chrome .m-tabbar { display: flex; }
  .m-page { padding-bottom: 40px; }
}

/* ---------- components ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 30px; font-weight: 700; line-height: 1.1; }
.stat span, .muted { color: var(--text-2); font-size: 14px; }
.row-link { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; color: var(--text); min-height: 72px; }
.row-link .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 17px; font-weight: 600; }
.tile-ico { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--action-soft); color: var(--action-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.section-title { margin: 8px 0 4px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.list-group { padding: 0 16px; }
.list-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: 16px; }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.group-label { margin: 0 4px 6px; font-size: 14px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; text-decoration: none; }
.btn-primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn-block { width: 100%; }
.btn-danger-text { color: var(--danger); }
/* position: relative makes the row the containing block of the absolutely positioned .sr labels
   inside chips, so the row clips them; without it, an off-screen chip's label widens the page. */
.chips { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; min-height: 48px; min-width: 48px; padding: 0 16px; border-radius: 24px; border: 1px solid var(--border); background: var(--surface); font-size: 15px; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.dot { width: 10px; height: 10px; border-radius: 5px; background: var(--action); flex-shrink: 0; }
.empty { padding: 40px 16px; text-align: center; color: var(--text-2); }
.skeleton { background: linear-gradient(90deg, #eceef1, #f5f6f8, #eceef1); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: var(--r-lg); min-height: 72px; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; }
textarea.input { resize: vertical; }

/* ---------- toast and sheet ---------- */
.m-toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 60; margin: 0 auto; max-width: 480px; padding: 14px 16px; border-radius: var(--r); background: var(--text); color: #fff; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.m-toast.error { background: var(--danger); }
body.m-no-chrome .m-toast { bottom: calc(var(--safe-b) + 12px); }   /* no tab bar on full-screen pages */
@media (min-width: 1024px) { .m-toast, body.m-no-chrome .m-toast { left: calc(var(--rail-w) + 16px); bottom: 24px; } }   /* rail is on the left, nothing at the bottom */
.m-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 10, 0.4); }
.m-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 85dvh; overflow-y: auto; background: var(--surface); border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + var(--safe-b)); }
.m-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 12px; }
@media (min-width: 1024px) { .m-sheet { left: 50%; right: auto; width: 480px; transform: translateX(-50%); bottom: 24px; border-radius: 20px; } }

/* ---------- conversation (inquiry) ---------- */
.convo { display: flex; flex-direction: column; height: var(--app-h, 100dvh); background: var(--page); }
.convo-head { background: var(--surface); border-bottom: 1px solid var(--border); padding: calc(var(--safe-t) + 4px) 8px 12px; }
.convo-bar { display: flex; align-items: center; gap: 4px; min-height: 52px; }
.icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text); border-radius: 24px; flex-shrink: 0; text-decoration: none; }
.icon-btn.accent { color: var(--action-strong); }
.convo-item { margin: 4px 12px 0; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-sm); background: var(--page); text-decoration: none; color: var(--text); }
.convo-item img, .convo-item .ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #E9E4DC; flex-shrink: 0; }
.convo-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: min(85%, 520px); padding: 12px 14px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; }
.bubble.me { align-self: flex-end; background: var(--action); color: #fff; border-radius: 16px 16px 4px 16px; }
.bubble.failed { background: #FDECEA; color: var(--danger); border: 1px solid #F5C2BE; }
.bubble-meta { font-size: 14px; color: var(--text-2); }
.bubble-meta.me { align-self: flex-end; }
.convo-note { align-self: center; font-size: 14px; color: var(--text-2); text-align: center; }
.convo-foot { background: var(--surface); border-top: 1px solid var(--border); padding: 10px 12px calc(10px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }
.compose { display: flex; gap: 8px; align-items: flex-end; }
.compose textarea { flex: 1; min-height: 48px; max-height: 160px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 24px; resize: none; font-size: 16px; line-height: 1.4; background: var(--surface); }
.send-btn { width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--action); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn:disabled { opacity: .5; }
@media (min-width: 1024px) { .convo { height: var(--app-h, 100dvh); } }

/* ================= step 2: items, item form, scan ================= */
[hidden] { display: none !important; }
.sheet-title { font-size: 20px; margin-bottom: 12px; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-link { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; padding: 0 8px; border: 0; background: none; color: var(--action-strong); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn-link.danger { color: var(--danger); }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 14px; border-radius: var(--r-sm); background: var(--action-soft); font-size: 15px; }
.fld-label { font-size: 14px; font-weight: 600; color: var(--text-2); }

/* ---------- items list ---------- */
/* Sticky header (title, +, search, chips): the page's top padding moves inside it, so when stuck it
   also covers the notch area and the list scrolls underneath. */
.items-top { position: sticky; top: 0; z-index: 5; margin: calc(-1 * (var(--safe-t) + 20px)) -16px 12px; padding: calc(var(--safe-t) + 20px) 16px 12px; background: var(--page); border-bottom: 1px solid var(--line); }
.items-top .m-head { margin-bottom: 12px; }
.round-btn { width: 48px; height: 48px; border-radius: 24px; background: var(--action); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; }
.search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--text); padding: 0; }
.search:focus-within { outline: 3px solid var(--action); outline-offset: 2px; }
.chip b { margin-left: 4px; font-weight: 600; }
.item-card { display: flex; gap: 14px; align-items: center; padding: 12px; text-decoration: none; color: var(--text); }
.thumb { width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; background: #E9E4DC; flex-shrink: 0; display: block; }
.item-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-title { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.item-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--text-2); }
.pill { padding: 2px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; background: #F1F2F4; color: #3F4450; }
.pill.ok { background: #E6F4EA; color: var(--success); }
.pill.warn { background: #FEF3C7; color: #92400E; }

/* ---------- item form: a column as tall as the visible viewport (--app-h, set by app.js), like the inquiry reply, so the keyboard pushes Save up ---------- */
.form-shell { display: flex; flex-direction: column; height: var(--app-h, 100dvh); margin: 0; background: var(--page); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 56px; padding: var(--safe-t) 8px 0; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bar h1 { font-size: 17px; font-weight: 600; text-align: center; flex: 1; min-width: 0; }
.bar-spacer { width: 48px; flex-shrink: 0; }
.form-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.form-inner { max-width: 720px; margin: 0 auto; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.form-foot { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 12px 16px calc(12px + var(--safe-b)); }
.form-foot .btn { display: flex; width: 100%; max-width: 688px; margin: 0 auto; }
.photos { position: relative; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.photos::-webkit-scrollbar { display: none; }
.photo { position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: var(--r); overflow: hidden; border: 0; padding: 0; background: #E9E4DC; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .cover { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 8px; background: rgba(10, 10, 10, 0.7); color: #fff; font-size: 14px; font-weight: 600; }
.photo.busy { display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); }
.photo-add { position: relative; width: 104px; height: 104px; flex-shrink: 0; border-radius: var(--r); border: 2px dashed #C9CDD4; background: var(--surface); color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; text-align: center; cursor: pointer; }
.photo-add:focus-within { outline: 3px solid var(--action); outline-offset: 2px; }
.fields, .sect { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0 16px; }
.fld { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fld > span:first-child { font-size: 14px; font-weight: 600; color: var(--text-2); }
.fld input, .fld select, .fld textarea { width: 100%; border: 0; outline: 0; padding: 0; background: transparent; font-size: 16px; color: var(--text); }
.fld select { min-height: 48px; }
.fld textarea { min-height: 96px; resize: vertical; }
/* The title: wraps and grows with its text (lib.fitOneLine), one row when short. */
.fld textarea.one-line { min-height: 48px; padding: 12px 0; line-height: 24px; resize: none; overflow: hidden; overflow-wrap: anywhere; }
.fld:focus-within { box-shadow: inset 0 -2px 0 var(--action); }
.fld.invalid > span:first-child, .fld-error { color: var(--danger); }
.fld-error { font-size: 14px; }
.money { display: flex; align-items: center; gap: 6px; }
.money b { font-weight: 400; color: var(--text-2); font-size: 16px; }
.money input { flex: 1; min-width: 0; }
.count { align-self: flex-end; font-size: 14px; color: var(--text-2); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 16px; }
.toggle input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 52px; height: 48px; margin: 0; border: 0; cursor: pointer; background: center / 52px 32px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='32'%3E%3Crect width='52' height='32' rx='16' fill='%23D5D8DE'/%3E%3Ccircle cx='16' cy='16' r='13' fill='white'/%3E%3C/svg%3E"); }
.toggle input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='32'%3E%3Crect width='52' height='32' rx='16' fill='%23635BFF'/%3E%3Ccircle cx='36' cy='16' r='13' fill='white'/%3E%3C/svg%3E"); }
.toggle input:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.fields > :last-child, .sect-body > :last-child { border-bottom: 0; }
.sect > summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.sect > summary::-webkit-details-marker { display: none; }
.sect > summary::after { content: ''; width: 10px; height: 10px; flex-shrink: 0; margin-right: 4px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); transition: transform 0.15s; }
.sect[open] > summary::after { transform: rotate(-135deg); }
.sect-body { padding-bottom: 12px; }
.status-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.status-card .btn-link { align-self: flex-start; padding: 0; }

/* ---------- rich text (Quill 2, loaded only when Description opens) ---------- */
.m-rich .ql-toolbar.ql-snow { display: flex; flex-wrap: wrap; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-sm) var(--r-sm) 0 0; font-family: inherit; }
.m-rich .ql-toolbar.ql-snow .ql-formats { display: flex; margin: 0; }
.m-rich .ql-toolbar.ql-snow button { width: 48px; height: 48px; padding: 12px; }
.m-rich .ql-toolbar.ql-snow .ql-picker { height: 48px; }
.m-rich .ql-toolbar.ql-snow .ql-picker-label { display: flex; align-items: center; }
.m-rich .ql-container.ql-snow { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); font-family: inherit; font-size: 16px; }
.m-rich .ql-editor { min-height: 160px; font-size: 16px; line-height: 1.5; }
.m-rich .ql-snow .ql-tooltip { z-index: 5; left: 8px !important; max-width: calc(100% - 16px); }
.m-rich .ql-snow .ql-tooltip input[type="text"] { font-size: 16px; height: 48px; width: 180px; }
/* The open header picker rows (~24px in Quill) and the tooltip's Edit/Save/Remove links (inline <a>,
   which the global a{min-height:48px} does not reach) are only visible after a tap, so no phone
   check measures them: they are sized here. */
.m-rich .ql-snow .ql-picker-item { display: flex; align-items: center; min-height: 48px; }
.m-rich .ql-snow .ql-tooltip a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; }

/* ---------- scan ---------- */
/* --app-h (set by app.js from visualViewport), like .form-shell: the keyboard pushes the typed-tag field and Move up. */
.scan { container: scan / size; display: flex; flex-direction: column; height: var(--app-h, 100dvh); background: #0A0A0A; color: #fff; }
.scan .bar { background: transparent; border-bottom: 0; }
.scan .bar h1, .scan .bar .icon-btn { color: #fff; }
.viewfinder { position: relative; flex: 1 1 auto; min-height: 180px; max-height: 360px; margin: 0 16px 12px; border-radius: 20px; background: #26282C; overflow: hidden; transition: box-shadow 0.15s; }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewfinder .frame { position: absolute; inset: 0; margin: auto; width: min(60%, 220px); aspect-ratio: 1; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 18px; pointer-events: none; }
.viewfinder .hint { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.viewfinder .start { position: absolute; inset: 0; margin: auto; width: 70%; height: 56px; }
.viewfinder.hit { box-shadow: inset 0 0 0 6px #22c55e; }
/* The basket's bottom padding lives on .basket-foot (always rendered), so the sticky footer sits
   flush at the bottom of the scrolling panel with no gap for rows to show through. */
.basket { flex: 0 1 auto; max-height: 58dvh; overflow-y: auto; background: var(--surface); color: var(--text); border-radius: 22px 22px 0 0; padding: 8px 16px 0; display: flex; flex-direction: column; gap: 10px; }
/* A focused typed-tag field scrolls into view above the sticky footer, not under it. */
.basket:has(.basket-foot:not(:empty)) { scroll-padding-bottom: 200px; }
.basket-foot { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px; padding: 12px 16px calc(16px + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.basket-foot:empty { padding-top: 0; border-top: 0; }
.basket-head { display: flex; justify-content: space-between; align-items: center; }
.basket-head b { font-size: 18px; }
.tag-row { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); }
.tag-row .grow { flex: 1; min-width: 0; font-size: 15px; color: #3F4450; }
.tag-row .bad { color: var(--danger); }
.tag-form { display: flex; gap: 8px; }
.tag-form .input { flex: 1; min-width: 0; text-transform: uppercase; }
/* Short column (keyboard up: about 330px on an iPhone SE; also landscape, small Androids, Safari with
   its toolbars). Nothing is hidden: the camera becomes a compact strip (at least 120px, with Start
   camera and the hint still inside it), the typed-tag field moves to the panel's top (order) and
   sticks there while the rows scroll, and the footer puts "Move to" and Move on one row (two when
   narrow) above the sold-piece note. Keyed to the column's height, not to focus: a focus-driven layout would move
   Move away between touch-down and touch-up. */
@container scan (max-height: 540px) {
  .scan .bar { min-height: 48px; }
  .viewfinder { flex: 1 1 120px; min-height: 120px; margin-bottom: 8px; border-radius: 14px; }
  .viewfinder .frame { width: auto; height: 76%; }
  .viewfinder .start { height: 48px; min-height: 48px; }
  .viewfinder .hint { bottom: 4px; }
  .basket { flex: 0 1 auto; max-height: none; gap: 6px; }
  .scan .basket:has(.basket-foot) { scroll-padding-bottom: 0; }   /* the field is pinned at the top here */
  .tag-form { order: -1; position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 4px 0; margin-top: -8px; }
  .basket-foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 6px; padding-bottom: calc(6px + var(--safe-b)); }
  .basket-foot .field { flex: 1 1 150px; min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
  .basket-foot .fld-label { flex-shrink: 0; }
  .basket-foot .field .input { flex: 1; min-width: 0; }
  .basket-foot [data-move] { flex: 1 0 auto; width: auto; min-height: 48px; padding: 0 14px; }
  .basket-foot .muted { order: 1; flex: 1 0 100%; line-height: 1.3; }
  .basket-foot > .btn:only-child { flex: 1 0 100%; min-height: 48px; }
  .basket-foot .foot-row, .basket-foot [data-open] { flex: 1 0 100%; min-height: 48px; }
}
.notice { font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: #FDECEA; color: var(--danger); }
.notice.wait { background: var(--action-soft); color: var(--text); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* A toast never catches taps: a top toast sits over the bar for up to 6s and must not block Back or Close. */
.m-toast { pointer-events: none; }
/* Toasts at the top where a bottom action must stay tappable (Scan, Edit item). */
body.m-toast-top .m-toast { top: calc(var(--safe-t) + 12px); bottom: auto; }
@media (min-width: 1024px) { body.m-toast-top .m-toast { top: 24px; bottom: auto; } }

/* ================= step 3: stock pages, sign-in, print tags, import ================= */
/* Stock pages reuse the item form's column (.form-shell, .bar, .form-body, .form-foot). */
.bar h1.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.bar .icon-btn.accent { color: var(--action-strong); }
.foot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 688px; margin: 0 auto; }
.form-foot .foot-row .btn { width: 100%; }
.form-foot > * + * { margin-top: 8px; }
.foot-note { max-width: 688px; margin-left: auto; margin-right: auto; text-align: center; font-size: 14px; color: var(--text-2); }
.center { align-self: center; }
.row-name { display: block; font-size: 16px; overflow-wrap: anywhere; }
.sub { display: block; font-size: 14px; color: var(--text-2); }
button.list-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
button.list-row.btn-danger-text { color: var(--danger); }   /* Sign out on More: beats the row's colour */
.list-row .count { font-size: 18px; font-weight: 700; min-width: 32px; text-align: right; }
.piece-row .mono { min-width: 88px; }
.where { display: inline-flex; align-items: center; gap: 4px; }
.where .i { width: 16px; height: 16px; }
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat3 .stat { padding: 12px; }
.stat3 .stat b { font-size: 24px; }
.item-head, .piece-head { display: flex; gap: 14px; align-items: center; padding: 12px; }
.item-head .thumb { width: 56px; height: 56px; }
.piece-head .thumb { width: 88px; height: 88px; }
.item-head .grow, .piece-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-link { display: inline-flex; align-items: center; min-width: 48px; font-size: 17px; font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.fld-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fld-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fld > label:first-child { font-size: 14px; font-weight: 600; color: var(--text-2); }
.history { margin: 0; padding: 0 0 4px; list-style: none; }
.history li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.history li:last-child { border-bottom: 0; }
.stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.stepper .input { width: 72px; text-align: center; padding: 0 8px; }
.stepper .icon-btn { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.skip-row { margin: 0 16px; border-top: 1px solid var(--line); border-bottom: 0; }
.place-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.sect > summary .sub { font-weight: 400; }

/* Add piece: which item */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r); background: #ECEDF0; }
.seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-sm); font-weight: 600; color: var(--text-2); cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--action); outline-offset: 2px; }
.pick { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.pick-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-row:last-child { border-bottom: 0; }
.pick-row .thumb { width: 44px; height: 44px; }
.pick-row .grow { flex: 1; min-width: 0; }
/* The radio covers the whole row (a 48px+ target); the circle is drawn by .radio. */
.pick-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick-row .radio { width: 24px; height: 24px; border-radius: 12px; border: 2px solid #C9CDD4; flex-shrink: 0; }
.pick-row:has(input:checked) .radio { border: 7px solid var(--action); }
.pick-row:has(input:focus-visible) { outline: 3px solid var(--action); outline-offset: 2px; }

/* sign in */
.login .login-inner { padding-top: calc(var(--safe-t) + 32px); }
.login h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.brand-tile { width: 56px; height: 56px; border-radius: 16px; background: var(--action); color: #fff; display: flex; align-items: center; justify-content: center; }
.pw-wrap { display: flex; align-items: center; gap: 4px; }
.pw-wrap input { flex: 1; min-width: 0; }
.right { display: flex; justify-content: flex-end; }
.fld input.code-input { font: 700 24px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.4em; }
.tenant-btn { width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; }

/* print tags */
.label-summary { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.sheet-mini { display: grid; grid-template-columns: repeat(3, 16px); grid-auto-rows: 6px; gap: 3px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; flex-shrink: 0; }
.sheet-mini span { border-radius: 2px; background: #EEF0F2; }
.sheet-mini .used { background: #C9CDD4; }
.sheet-mini .new { background: var(--action); }
.label-row { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--line); }
.label-row:last-child { border-bottom: 0; }
.label-row .qr { width: 48px; height: 48px; flex-shrink: 0; }
.label-row .qr svg { width: 100%; height: 100%; display: block; }
.label-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#m-print { display: none; }
/* Avery 5160 on US Letter: 3 × 10 labels of 2⅝" × 1". Twin of inventory.js .inv-sheet-page / .inv-label — change both.
   The 14pt tag and 7pt title are print sizes: the 14px rule is for the screen. */
.tag-page { width: 8.5in; height: 11in; padding: 0.5in 0.1875in 0; display: grid; grid-template-columns: repeat(3, 2.625in); column-gap: 0.125in; grid-auto-rows: 1in; box-sizing: border-box; background: #fff; }
.tag-page:not(:last-child) { break-after: page; page-break-after: always; }
.tag-label { width: 2.625in; height: 1in; display: flex; align-items: center; gap: 0.08in; padding: 0.06in 0.12in; overflow: hidden; box-sizing: border-box; color: #000; }
.tag-label svg { width: 0.85in; height: 0.85in; flex: none; }
.tag-label .t { font: 700 14pt ui-monospace, SFMono-Regular, Menlo, monospace; }
.tag-label .n { font-size: 7pt; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
@media print {
  @page { size: letter; margin: 0; }
  html, body { background: #fff !important; }
  body > :not(#m-print) { display: none !important; }
  #m-print { display: block; }
}

/* import */
.file-pick { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; cursor: pointer; color: var(--action-strong); }
.file-pick .grow { flex: 1; min-width: 0; color: var(--text); }
.file-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.file-pick:focus-within { outline: 3px solid var(--action); outline-offset: 2px; }
.csv-box { min-height: 160px; font: 16px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; }
.col-map { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.col-map:last-child { border-bottom: 0; }
.plain-list { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.notice.warn { background: #FEF3C7; color: #92400E; }
.ok-line { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.ok-line .i { color: var(--success); }

/* ---------- Quick add (step 3b), mockup "QuickAdd" ---------- */
.qa-lead { font-size: 16px; }
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qa-thumb { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 14px; }
.qa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qa-remove { position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; border: 0; border-radius: 24px; background: rgba(10, 10, 10, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.qa-add { grid-column: 1 / -1; min-height: 64px; border: 2px dashed #C9CDD4; border-radius: var(--r); background: var(--surface); color: var(--action-strong); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
.qa-add-main { min-height: 120px; flex-direction: column; gap: 6px; border-color: var(--action); background: var(--action-soft); }
.qa-add:focus-within { outline: 3px solid var(--action); outline-offset: 2px; }
/* A photo is in: photos and add buttons as one row of squares, so the search section follows on the first screen */
.qa-grid.has-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qa-grid.has-photos .qa-add { grid-column: auto; min-height: 0; aspect-ratio: 1; flex-direction: column; gap: 6px; padding: 4px; text-align: center; }
.qa-strip { display: flex; gap: 8px; overflow-x: auto; }
.qa-strip:empty { display: none; }
.qa-strip .qa-thumb { width: 64px; flex-shrink: 0; }
.qa-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qa-thinking { padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--action-soft); border-top-color: var(--action); animation: m-spin 0.9s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.qa-ghost { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.qa-ghost span { height: 14px; border-radius: 7px; background: var(--line); }
.qa-ghost .short { width: 60%; }
.ai-banner { justify-content: flex-start; padding: 12px 14px; color: var(--action-strong); font-weight: 600; }
.fld-head { display: flex; align-items: center; gap: 8px; }
.fld-head .ai-chip { align-self: center; }
.ai-chip { align-self: flex-start; font-size: 14px; font-weight: 700; line-height: 22px; padding: 0 8px; border-radius: 8px; color: var(--action-strong); background: var(--action-soft); }
.fld.ai-filled { box-shadow: inset 3px 0 0 var(--action); padding-left: 10px; }
.qa-desc { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.qa-desc.ai-filled { box-shadow: inset 3px 0 0 var(--action); }
.qa-price .money { border: 2px solid var(--action); border-radius: var(--r-sm); padding: 0 12px; min-height: 48px; }
.qa-price input::placeholder { color: var(--action-strong); opacity: 1; }

/* ================= step 4: Website and Account ================= */
.fld .hint, .wt-key { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.wt-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wt-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; font-size: 14px; color: var(--text-2); }
.photo-pick { position: relative; margin-top: 8px; }
.photo-pick.busy { opacity: .6; pointer-events: none; }
.sect > summary .muted { margin-left: auto; }
.notice.ok { background: #E6F4EA; color: var(--success); }
.card-pad { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card-pad h2 { font-size: 17px; }
.row-btn { width: 100%; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.btn-sm { min-height: 48px; padding: 0 14px; font-size: 15px; }
.danger-text { color: var(--danger); font-weight: 600; }
.html-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; min-height: 140px; }
.m-rich .ql-container.ql-snow.ql-disabled { border-top: 1px solid var(--border); border-radius: var(--r-sm); }   /* read-only: no toolbar above */

/* visitors */
.stat .trend { font-size: 14px; font-weight: 600; }
.stat .trend-up { color: var(--success); }  /* .stat, so it beats .stat span */
.stat .trend-down { color: var(--danger); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.bars span { flex: 1; min-width: 0; background: var(--action); border-radius: 3px 3px 0 0; }
.bars-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; color: var(--text-2); }
.rank-row { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank { width: 24px; flex-shrink: 0; text-align: right; font-size: 14px; color: var(--text-2); }
.rank-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rank-label { font-size: 15px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.meter { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--action); }
.stackbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); }
.stackbar > span { height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 5px; vertical-align: middle; }
.dev-0 { background: var(--action); } .dev-1 { background: #0E9F6E; } .dev-2 { background: #D97706; } .dev-3 { background: #9CA3AF; }

/* api keys, team, two-step sign-in */
.key-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.key-card.revoked { opacity: .55; }
.key-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.key-name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.key-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.member { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--line); }
.member:last-child { border-bottom: 0; }
.member .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member-name { font-weight: 600; overflow-wrap: anywhere; }
.member-mail { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.member-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; background: var(--action-soft); color: var(--action-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 12px; border-radius: var(--r-sm); background: var(--page); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; text-align: center; }
.tfa-qr { width: min(240px, 100%); margin: 0 auto; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); }
.tfa-qr svg { display: block; width: 100%; height: auto; }
.secret-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: 1px; overflow-wrap: anywhere; }
textarea.secret-key { resize: none; line-height: 1.5; }

/* plan */
.plan-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.plan-card.current { border: 2px solid var(--action); }
.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.plan-top .pill { flex-shrink: 0; white-space: nowrap; }
.plan-name { font-size: 18px; font-weight: 700; }
.plan-price b { font-size: 24px; }
.preview-frame { width: 100%; height: 60dvh; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
/* ---------- Find the original (plan 2026-10-01) ---------- */
.fo-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fo-card-head { display: flex; gap: 12px; align-items: flex-start; }
.fo-card-head > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fo-card-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--action-soft); color: var(--action-strong); }
.fo-card .btn-link { align-self: center; }
.fo-layer { position: fixed; inset: 0; z-index: 40; background: var(--page); }
.fo-lead { font-size: 16px; }
.fo-guess { align-self: flex-start; font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); overflow-wrap: anywhere; }
.fo-guess.fo-yours { background: var(--action-soft); border-color: #C7CBFF; }
.fo-note { font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.fo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-chips .fo-guess { margin: 0; max-width: 100%; }
.fo-card .fo-words { border-bottom: 0; padding-bottom: 0; }
.fo-match { gap: 12px; padding: 8px 0; min-height: 64px; }
.fo-match .i { flex-shrink: 0; color: var(--text-2); }
.fo-tile { flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; background: var(--line); color: var(--text-2); font-weight: 700; font-size: 18px; }
.fo-match-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fo-match-title { font-size: 16px; overflow-wrap: anywhere; }
.fo-match-host { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.fo-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.fo-paste-row { display: flex; align-items: center; gap: 8px; }
.fo-paste-row .fld { flex: 1; min-width: 0; border-bottom: 0; }
.fo-paste-row .btn { flex-shrink: 0; }
.fo-busy { padding: 32px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.fo-foot { display: flex; gap: 10px; max-width: 688px; margin: 0 auto; }
.fo-foot .btn { flex: 1; }
.fo-foot [hidden] { display: none; }
.fld-rich.ai-filled { box-shadow: inset 3px 0 0 var(--action); padding-left: 10px; }
.fld > span:first-child .ai-chip, summary .ai-chip { margin-left: 8px; }
/* Google Lens (owner 2026-10-01): one button, or a small photo button for each photo */
.fo-lens { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-lens-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 14px 4px 4px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; text-decoration: none; }
.fo-lens-btn img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }

/* ---------- Quick add: Search the internet (owner 2026-10-01) ---------- */
.qa-search { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.qa-search h2 { margin: 0; font-size: 18px; }
.qa-search .fld { border-bottom: 0; padding-bottom: 0; }
.qa-search .fld-error:not([hidden]) { display: block; margin-top: -4px; }
.qa-results { display: flex; flex-direction: column; gap: 10px; }
.qa-list { padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qa-empty { font-size: 16px; padding: 12px; border-radius: var(--r-sm); background: var(--page); border: 1px dashed var(--border); }
.qa-searching { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.qa-searching > span:last-child { display: flex; flex-direction: column; gap: 2px; }

/* ---------- AI page (Find the original spec §9) ---------- */
.ai-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ai-card .fld { border-bottom: 0; padding-bottom: 0; }
/* A text field drawn as dots: password managers leave it alone (no offer to save or fill her key). */
.ai-key-input { -webkit-text-security: disc; font-size: 16px; }
.ai-key-state { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.ai-key-state.ok { color: var(--success); }
.ai-key-state.bad { color: var(--danger); }

/* ---------- step 5: showroom pages ---------- */
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.row-btns > .btn { flex: 1 1 140px; }
/* .row-title exists (17px/600) and is used with .ellipsis in Inquiries: only these cards make it a flex row. */
.show-card .row-title, .tpl .row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.show-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
/* More's "Your showroom" card (mockup MoreShowroom): title and address, one status pill beside the title, and
   both buttons on one line at 375px. #show-card is More's own section: other .show-card cards keep wrapping buttons. */
.show-head { display: flex; flex-direction: column; gap: 2px; }
.show-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.show-top .pill { flex-shrink: 0; white-space: nowrap; }
.show-head .muted { overflow-wrap: anywhere; }
#show-card .row-btns { flex-wrap: nowrap; gap: 10px; margin-top: 4px; }
#show-card .row-btns > .btn, .tpl .row-btns > .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 6px; gap: 6px; border-radius: var(--r-sm); font-size: 15px; white-space: nowrap; }
/* Templates (mockup Templates): a 76px swatch beside the name, then Preview and the choice on one line at 375px
   (the same 48px buttons as More's card). The design in use has a 2px ring and a "Selected" button that is off. */
.tpl { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tpl-top { display: flex; gap: 14px; }
.tpl .swatch { width: 76px; height: 76px; flex-shrink: 0; display: flex; align-items: flex-end; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tpl .swatch > span { width: 36px; height: 6px; border-radius: 3px; }
.tpl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tpl-sel { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.tpl .row-btns { flex-wrap: nowrap; gap: 10px; margin-top: 0; }
.tpl .tpl-picked { border-color: var(--action); color: var(--action-strong); cursor: default; }
/* Radio and check rows: the control itself is a 48px target (phone rule), drawn with an SVG. */
.choice { display: flex; align-items: flex-start; gap: 8px; min-height: 52px; padding: 4px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 16px; }
.choice:last-child { border-bottom: 0; }
.choice .grow { flex: 1; min-width: 0; padding-top: 12px; }
.choice input, .sect-check { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 48px; height: 48px; margin: 0; border: 0; cursor: pointer; background: center / 24px 24px no-repeat; }
.choice input[type="radio"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='white' stroke='%239AA0AB' stroke-width='2'/%3E%3C/svg%3E"); }
.choice input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='white' stroke='%23635BFF' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='5' fill='%23635BFF'/%3E%3C/svg%3E"); }
.choice input[type="checkbox"], .sect-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' fill='white' stroke='%239AA0AB' stroke-width='2'/%3E%3C/svg%3E"); }
.choice input[type="checkbox"]:checked, .sect-check:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' fill='%23635BFF' stroke='%23635BFF' stroke-width='2'/%3E%3Cpath d='M7 12l3.5 3.5L17 9' fill='none' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E"); }
.choice input:disabled { opacity: 0.4; cursor: not-allowed; }
.choice input:focus-visible { outline: 3px solid var(--action); outline-offset: -4px; }
.choice input:checked + .grow .choice-name { font-weight: 600; }   /* Section styles: the chosen layout's name is bold */
.sect > summary .pill { margin-left: auto; }
/* Branding (mockup Branding). Colour: a 48px swatch, then the name over the hex field that saves. */
.fld .color-row { display: flex; align-items: center; gap: 12px; }
.fld .color-row input[type="color"] { width: 48px; height: 48px; flex: 0 0 48px; padding: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.fld .color-row label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fld .color-row label > span { font-size: 14px; font-weight: 600; color: var(--text-2); }
.fld .color-row label input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fld.invalid .color-row label > span { color: var(--danger); }
.grad-preview { height: 52px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; margin: 8px 0 12px; }
.card-note { margin: 8px 4px 0; }
.card-note + .btn { margin-top: 12px; }
/* A switch and what it opens (the gradient's direction, a tracker's ID): one row, with one line under both. */
.opt { border-bottom: 1px solid var(--line); }
.opt > .toggle { border-bottom: 0; }
.toggle:has(.muted) { padding: 8px 0; }   /* a switch with a line under its name: room above and below */
.opt-sub { padding-left: 16px; }
.opt-sub > :last-child { border-bottom: 0; }
/* Rows that belong together (the logo and its hint, width and height): one line under the group. */
.fld-group { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fld-group .fld { border-bottom: 0; }
.img-row { display: flex; align-items: center; gap: 12px; min-height: 72px; }
.img-row .grow { flex: 1; min-width: 0; }
.logo-box { width: 120px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--page); font-size: 14px; color: var(--text-2); }
.fav-box { width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--page); }
.logo-box img, .fav-box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.file-btn { position: relative; flex-shrink: 0; border-radius: var(--r-sm); white-space: nowrap; cursor: pointer; }
.file-btn:focus-within { outline: 3px solid var(--action); outline-offset: 2px; }
.file-btn.busy { color: var(--text-2); cursor: default; }
.icon-btn.danger { color: var(--danger); }
/* SEO (mockup Seo). A field's name and its counter on one line; a tracker's ID in a box under its switch. */
.form-body[inert] { opacity: 0.6; }   /* Branding, SEO: the form waits while Save is on its way */
.fld-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fld-top .count { flex-shrink: 0; font-weight: 500; }
.fld.tr-id { padding: 0 0 12px; border-bottom: 0; }
.fld.tr-id:focus-within { box-shadow: none; }
.fld.tr-id input { min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fld.tr-id input:focus { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.fld.tr-id.invalid input { border-color: var(--danger); }
/* Editable rows (value props, steps, timeline, FAQ). */
.rows { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.row-edit { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 12px 8px; }
.row-edit-head { display: flex; align-items: center; gap: 8px; }
.row-edit-head .grow { flex: 1; font-weight: 600; font-size: 15px; }
.row-edit .fld:last-child { border-bottom: 0; }
.icon-btn-pick { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border); border-radius: 24px; background: var(--page); font-size: 18px; color: var(--text); }
.icon-btn-pick img { width: 24px; height: 24px; object-fit: contain; }
/* Homepage (mockup Homepage). A card's "show on the homepage" box sits in its summary: .sect-check, drawn like a
   .choice checkbox and 48px to tap. The name and the line under it take the rest of the row, cut with … when long. */
.sect > summary > .grow { flex: 1; min-width: 0; }
.hp-block { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.img-thumb { width: 64px; height: 36px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: #E9E4DC; }
.img-add { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; color: var(--action-strong); font-weight: 600; cursor: pointer; }
.img-add:focus-within { outline: 3px solid var(--action); outline-offset: 2px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; max-height: 40dvh; overflow-y: auto; }
.icon-cell { min-width: 48px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 20px; color: var(--text); }
.icon-cell[hidden] { display: none; }
.icon-cell[aria-pressed="true"] { border-color: var(--action); background: var(--action-soft); }
/* Preview: full screen above everything, iframe fills it. */
.m-preview { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; height: var(--app-h, 100dvh); background: var(--surface); }
.m-preview-body { flex: 1; min-height: 0; }
.m-preview-body iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Key–value rows, usage bar, long monospace text. */
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 16px; }
.kv:last-child { border-bottom: 0; }
.kv b { font-weight: 600; }
.mono-break { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; font-size: 15px; }
.usage { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.usage > span { display: block; height: 100%; border-radius: 6px; background: var(--action); }
.usage.warn > span { background: #B45309; }
.usage.full > span { background: var(--danger); }
.steps { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.sect-body > p { font-size: 15px; margin: 8px 0; }
/* Cookie banner sample: not interactive, so its "buttons" are spans. */
.banner-mock { background: #1d1d1f; color: #fff; border-radius: var(--r-sm); padding: 14px; font-size: 14px; margin-top: 6px; }
.banner-mock .row-btns span { flex: 1 1 100px; text-align: center; background: #fff; color: #1d1d1f; border-radius: 6px; padding: 10px; font-weight: 600; }
.banner-mock .mock-link { margin-top: 10px; opacity: 0.85; text-decoration: underline; }
/* Legal pages (mockup Legal). A built-in page that does not exist yet is a row with its Create button. */
.legal-missing { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 8px 4px 16px; }
.legal-missing .grow { flex: 1; min-width: 0; }
.legal-missing .row-name { font-weight: 600; }
.legal-card > summary .pill { flex-shrink: 0; white-space: nowrap; }
.legal-del { gap: 6px; padding-left: 0; }
/* Domain (mockup Domain). The link and the domain are cards with their buttons inside; the DNS record is three rows,
   each a small label over its value, with Copy beside "Points to". */
.dm-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
/* A long host name or DNS value is one unbreakable word: it wraps instead of widening the page (no sideways scroll
   at 375px). The question before Remove carries the domain in a sheet title. */
.dm-page .notice, .dm-page .fld-error, .dm-page .muted, .dm-page .steps li, .dm-page .sect-body p { overflow-wrap: anywhere; }
.sheet-title { overflow-wrap: anywhere; }
.dm-card .btn { min-width: 0; }
.dm-card .btn .ellipsis { min-width: 0; }
.dm-card .row-btns { margin-top: 0; }
.dm-card .btn-sm { border-radius: var(--r-sm); }
.dm-dom { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.dm-dom .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dm-dom .row-name { font-weight: 600; }
.dm-ico { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--action-soft); color: var(--action-strong); }
/* Remove sits under a line at the card's lower edge (mockup). */
.dm-foot { border-top: 1px solid var(--line); margin-bottom: -10px; }
.dm-remove { gap: 6px; padding-left: 0; }
.dm-warn { margin-bottom: 8px; }
.stack > .dm-warn { margin-bottom: 0; }
.dm-full { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.dm-rec { padding: 4px 16px; }
.dm-rec .kv { min-height: 56px; padding: 4px 0; }
.dm-rec .kv .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-rec .kv .sub { font-weight: 600; }
.dm-rec .kv b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.dm-rec .btn-sm { flex-shrink: 0; border-radius: var(--r-sm); }
/* Storage (mockup Storage): the amount large, the bar under it (the action colour until it fills up), then the
   counts two by two. */
.st-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.st-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.st-top b { font-size: 30px; font-weight: 700; line-height: 1.1; }
.st-top span { font-size: 15px; color: var(--text-2); }
.pg-note { margin: 0 4px; }
/* Your data (mockup Backups): one card, a row per file, its download button at the row's end. Once the file is
   fetched, "Save file" takes a line of its own under the row. */
.dl-list { padding: 4px 16px; }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 76px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dl-row:last-child { border-bottom: 0; }
.dl-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-row .row-name { font-weight: 600; }
.dl-row .sub { overflow-wrap: anywhere; }
.dl-row .dl-ready { color: var(--success); font-weight: 600; }
.dl-row .icon-btn { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.dl-row .icon-btn:disabled { opacity: 0.5; cursor: default; }
.dl-row .icon-btn[aria-busy="true"] { opacity: 1; }
/* "Save file" on a line of its own; in the installed app "Download instead" sits beside it. */
.dl-actions { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; }
.dl-save { flex: 1; min-width: 0; min-height: 48px; border-radius: var(--r-sm); }
.dl-actions .btn-link { flex-shrink: 0; white-space: nowrap; }
.dl-save:disabled { opacity: 0.5; }
.spinner.sm { width: 20px; height: 20px; border-width: 2px; }
/* White label (mockup WhiteLabel): a switch she may not change is drawn faded. */
.wl-card .toggle input:disabled { opacity: 0.5; cursor: not-allowed; }
/* Single sign-on and Managed email (mockups Sso, ManagedEmail): what is true, said once, beside or under its icon. */
.hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px 12px 4px; }
.hero-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--action-soft); color: var(--action-strong); display: flex; align-items: center; justify-content: center; }
.hero-ico .i { width: 30px; height: 30px; }
.hero h2 { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.hero p { font-size: 15px; color: var(--text-2); }
.me-card { padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.me-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }