/* ── THE SELLER SITE'S OWN STYLES (sellers.ftkfoods.com — marketplace batch 4B) ──────────────────────────────────────
   On top of the shop's style.css (copied in at build time: the tokens, the Lato faces, the resets). Every class here is
   sl-* so nothing in the 7,000-line shop sheet is overridden by accident. The screens are the ones in
   docs/prototypes/batch-4b-screens.html: one column, phone first (the prototype's 400 px phone), the gold brand band,
   48 px buttons and fields, radius 6 / 8 / 999, the shop's colours (orange fill with --ink text 5.82:1; --orange-ink
   links 4.99:1; --amber-ink notes 4.53:1 on #FFF4DB; --danger 6.54:1; --paid-green 5.37:1). No inline styles: the
   site's CSP allows none. EVERY RULE IS PREFIXED body.sl-body (fix round 2): the shop sheet styles plain elements under
   body:not(.admin-body) — main's 720px and 24px padding, the footer's surface grey, placeholders — and that prefix outranks
   a lone class, so the seller sheet's own rules carry the body class and always win. */
body.sl-body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--ftk-font); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-text-size-adjust: 100%; }
/* fix round 3 (item 2): these four were written "body.sl-body .sl-body …" — nothing but <body> carries sl-body, so they never
   matched and the signed-out screens showed the browser's own (blue) focus ring; now live, scoped to the signed-out shell */
body.sl-body #sl-shell *, body.sl-body #sl-shell *::before, body.sl-body #sl-shell *::after { box-sizing: border-box; }
body.sl-body #sl-shell h1, body.sl-body #sl-shell h2, body.sl-body #sl-shell h3, body.sl-body #sl-shell p { margin: 0; }
body.sl-body #sl-shell button, body.sl-body #sl-shell input, body.sl-body #sl-shell select, body.sl-body #sl-shell textarea { font: inherit; color: inherit; }
body.sl-body #sl-shell :focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
body.sl-body .sl-muted { color: var(--ink-2); }
body.sl-body .sl-num { font-variant-numeric: tabular-nums; }
body.sl-body .sl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the brand band */
body.sl-body .sl-bar { background: var(--gold); color: var(--gold-ink); min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px)); }
body.sl-body .sl-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
body.sl-body .sl-logo { width: 32px; height: 32px; border-radius: 50%; display: block; }
body.sl-body .sl-word { font-weight: 900; font-size: 17px; }
body.sl-body .sl-word small { font-weight: 700; font-size: 13px; margin-left: 4px; }
body.sl-body .sl-hello { margin-left: auto; font-size: 13px; font-weight: 700; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sl-body .sl-hello[hidden] { display: none; }

/* the column */
body.sl-body .sl-main { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px)); min-height: calc(100vh - 56px - 60px); }
body.sl-body .sl-scr { padding: 24px 0 32px; display: grid; gap: 24px; }
body.sl-body .sl-foot { border-top: 1px solid var(--divider); padding: 14px 16px 18px; font-size: 13px; color: var(--ink-2); text-align: center; background: var(--page); }
body.sl-body .sl-foot a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
html:has(> body.sl-body) { background: var(--page); }   /* the shop sheet paints html grey; this page is white to the bottom */
body.sl-body .sl-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body.sl-body .sl-h1 { font-size: var(--fs-title); font-weight: 700; line-height: var(--lh-head); text-wrap: balance; }
body.sl-body .sl-lead { color: var(--ink-2); margin-top: 4px; }
body.sl-body .sl-lead strong { color: var(--ink); }
body.sl-body .sl-lbl { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 8px; }
body.sl-body .sl-fine { font-size: 13px; color: var(--ink-2); }
body.sl-body .sl-center { text-align: center; }
body.sl-body .sl-p14 { font-size: 14px; }
body.sl-body .sl-stack { display: grid; gap: 10px; }
body.sl-body .sl-back { font-size: 14px; font-weight: 700; color: var(--orange-ink); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }

/* the steps bar */
body.sl-body .sl-steps { display: grid; gap: 8px; }
body.sl-body .sl-steps-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
body.sl-body .sl-steps-bar span { height: 4px; border-radius: 999px; background: var(--divider); }
body.sl-body .sl-steps-bar span.on { background: var(--ink); }
body.sl-body .sl-steps-txt { font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* buttons and links */
body.sl-body .sl-btn { min-height: 48px; padding: 0 20px; border-radius: var(--r-btn); font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
body.sl-body .sl-btn-primary { background: var(--orange); color: var(--ink); }
body.sl-body .sl-btn-primary:hover, body.sl-body .sl-btn-primary:active { background: var(--orange-dark); color: #000; }
body.sl-body .sl-btn-secondary { background: var(--page); color: var(--ink); border-color: var(--control-edge); }
body.sl-body .sl-btn-secondary:hover { background: var(--surface); }
body.sl-body .sl-btn-danger { background: var(--page); color: var(--danger); border-color: var(--danger); }
body.sl-body .sl-btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
body.sl-body .sl-btn:disabled, body.sl-body .sl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
body.sl-body .sl-full { width: 100%; }
body.sl-body .sl-link { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 700; font-size: inherit; }
body.sl-body .sl-link-sm { font-size: 14px; }
body.sl-body .sl-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
body.sl-body .sl-btn-row.sl-center { justify-content: center; }

/* pills and notes */
body.sl-body .sl-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 12px; white-space: nowrap; }
body.sl-body .sl-p-green { background: var(--paid-green-bg); color: var(--paid-green); }
body.sl-body .sl-p-amber { background: #FFF4DB; color: var(--amber-ink); }
body.sl-body .sl-p-neutral { background: #EEEDEA; color: #55544F; }
body.sl-body .sl-p-danger { background: #FBEAE8; color: var(--danger); }
body.sl-body .sl-note { border-radius: var(--r-card); padding: 12px 14px; font-size: 14px; display: grid; gap: 4px; }
body.sl-body .sl-note strong { display: block; }
body.sl-body .sl-note-amber { background: #FFF4DB; color: var(--amber-ink); }
body.sl-body .sl-note-green { background: var(--paid-green-bg); color: var(--paid-green); }
body.sl-body .sl-note-danger { background: #FBEAE8; color: var(--danger); }
body.sl-body .sl-note-neutral { background: var(--surface); border: 1px solid var(--divider); }
body.sl-body .sl-note-empty { text-align: center; padding: 24px 16px; }
body.sl-body .sl-note-empty strong { font-size: 16px; }
body.sl-body .sl-err { color: var(--danger); font-size: 14px; font-weight: 700; margin: 0; }
body.sl-body .sl-ok { color: var(--paid-green); font-size: 14px; font-weight: 700; }

/* fields */
body.sl-body .sl-f { display: grid; gap: 6px; align-content: start; }
body.sl-body .sl-f label, body.sl-body .sl-f .sl-fl { font-size: 14px; font-weight: 700; }
body.sl-body .sl-f .sl-hint { font-size: 13px; color: var(--ink-2); }
body.sl-body .sl-f .sl-err { font-size: 13px; }
body.sl-body .sl-input { min-height: 48px; border: 1px solid var(--control-edge); border-radius: var(--r-card); padding: 0 12px; background: var(--page); width: 100%; min-width: 0; }
body.sl-body textarea.sl-input { padding: 10px 12px; min-height: 110px; resize: vertical; }
body.sl-body select.sl-input { padding-right: 8px; }
body.sl-body .sl-input[aria-invalid="true"] { border-color: var(--danger); }
body.sl-body .sl-form { display: grid; gap: 16px; }
body.sl-body .sl-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; font-weight: 400; }
body.sl-body .sl-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--orange-ink); }
body.sl-body .sl-check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 4px; }
body.sl-body .sl-counter { font-size: 12px; color: var(--ink-2); text-align: right; }
body.sl-body .sl-code { letter-spacing: .3em; font-size: 20px; font-weight: 700; text-align: center; }

/* two-step */
body.sl-body .sl-opt { display: grid; gap: 4px; text-align: left; border: 1px solid var(--control-edge); border-radius: var(--r-card); padding: 14px; background: var(--page); cursor: pointer; width: 100%; }
body.sl-body .sl-opt strong { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
body.sl-body .sl-opt span { font-size: 13px; color: var(--ink-2); }
body.sl-body .sl-opt:hover { background: var(--surface); }
body.sl-body .sl-secret { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); padding: 14px; display: grid; gap: 10px; justify-items: center; text-align: center; }
body.sl-body .sl-secret img { width: 160px; height: 160px; border-radius: 6px; background: var(--page); display: block; }
body.sl-body .sl-secret code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 15px; letter-spacing: .06em; overflow-wrap: anywhere; }
body.sl-body .sl-secret p { font-size: 14px; }

/* the bank check's answer */
body.sl-body .sl-result { border: 1px solid var(--ink); border-radius: var(--r-card); padding: 14px; display: grid; gap: 10px; }
body.sl-body .sl-result .sl-lbl { margin: 0; }
body.sl-body .sl-bank-name { font-size: 18px; font-weight: 900; letter-spacing: .02em; overflow-wrap: anywhere; }

/* the check-and-send summary, and the account rows */
body.sl-body .sl-sum { border-bottom: 1px solid var(--divider); padding: 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
body.sl-body .sl-sum .sl-lbl { margin: 0; grid-column: 1 / -1; }
body.sl-body .sl-sum p { font-size: 15px; overflow-wrap: anywhere; }
body.sl-body .sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--divider); }
body.sl-body .sl-row .sl-k { font-size: 13px; color: var(--ink-2); font-weight: 700; }
body.sl-body .sl-row .sl-v { font-weight: 700; overflow-wrap: anywhere; }
body.sl-body .sl-row .sl-s { font-size: 13px; color: var(--ink-2); }
body.sl-body .sl-row .sl-pill { margin-top: 6px; }
body.sl-body .sl-panel { background: var(--surface); border-radius: var(--r-card); padding: 14px; display: grid; gap: 12px; margin: 8px 0; }
body.sl-body .sl-panel > strong { font-size: 15px; }
body.sl-body .sl-list { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
body.sl-body .sl-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.sl-body .sl-keys li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }

/* my products */
body.sl-body .sl-prod { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--divider); }
body.sl-body .sl-th { width: 56px; height: 56px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--divider); display: grid; place-items: center; font-weight: 900; font-size: 13px; color: var(--ink-2); overflow: hidden; }
body.sl-body .sl-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sl-body .sl-prod-name { font-weight: 700; overflow-wrap: anywhere; }
body.sl-body .sl-prod-meta { font-size: 13px; color: var(--ink-2); }
body.sl-body .sl-prod-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
body.sl-body .sl-prod-reason { font-size: 13px; color: var(--amber-ink); background: #FFF4DB; border-radius: 6px; padding: 8px 10px; margin-top: 8px; }
body.sl-body .sl-prod .sl-btn-row { margin-top: 8px; }

/* the product form */
body.sl-body .sl-size-card { border: 1px solid var(--divider); border-radius: var(--r-card); padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
body.sl-body .sl-size-card .sl-f label { font-size: 13px; }
body.sl-body .sl-size-card .sl-size-x { grid-column: 1 / -1; justify-self: end; font-size: 14px; }
body.sl-body .sl-photos { display: flex; flex-wrap: wrap; gap: 10px; }
body.sl-body .sl-ph { width: 84px; display: grid; gap: 4px; }
body.sl-body .sl-ph-img { position: relative; width: 84px; height: 84px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--divider); background: var(--surface); }
body.sl-body .sl-ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sl-body .sl-ph-img button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--ink); color: var(--page); font-weight: 900; cursor: pointer; line-height: 1; padding: 0; }
body.sl-body .sl-ph-dim { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
body.sl-body .sl-ph-warn { font-size: 11px; font-weight: 700; color: var(--amber-ink); }
body.sl-body .sl-ph-busy { display: grid; place-items: center; font-size: 11px; color: var(--ink-2); }

/* the toast */
body.sl-body .sl-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--page); padding: 12px 16px; border-radius: var(--r-card); font-size: 14px; font-weight: 700; max-width: calc(100% - 32px); z-index: 20; }
body.sl-body .sl-toast[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .sl-toast { animation: sl-up .18s ease-out; } @keyframes sl-up { from { transform: translate(-50%, 8px); opacity: 0; } } }

/* ═══ THE SELLER CENTER (batch 4B rebuild) — on top of the console's own sheet (client/style.css under body.admin-body).
   Everything the console already draws (header, tabs, stat cards, panels, tables, pills, modals, the photo row) is the
   console's rule, untouched; only what the console does not have is here, under body.admin-body.sc-body so the shop sheet
   is never touched. Classes are sc-*. ═══ */
body.admin-body.sc-body #sl-shell[hidden], body.admin-body.sc-body #sc-root[hidden] { display: none; }
body.admin-body.sc-body .sc-biz { font-size: var(--fs-meta); font-weight: 700; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
body.admin-body.sc-body .sc-who-name { font-size: var(--fs-meta); color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
body.admin-body.sc-body .sc-biz::after { content: "·"; margin-left: var(--s2); color: var(--gold-ink); }
/* item 1: a person with no valid name yet — "Add your name" in the band (a link to the Account tab's Name row) and in rows */
body.admin-body.sc-body .sc-who-add { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
body.admin-body.sc-body .sc-add-name { color: var(--amber-ink); font-weight: 700; }
/* item 6: the in-row Delete confirm (the staff tab's own shape, the console's Delete / Cancel) */
body.admin-body.sc-body .sc-del-confirm { flex-wrap: wrap; width: 100%; gap: 8px; }
body.admin-body.sc-body .sc-del-confirm .sc-confirm-q { flex: 1 1 100%; color: #B3261E; }
body.admin-body.sc-body .apc-actions .btn-del, body.admin-body.sc-body .inv-row-actions .btn-del { cursor: pointer; }
body.admin-body.sc-body .sc-notice { margin: 0 0 16px; }
body.admin-body.sc-body .sc-suspended { margin: 0 0 16px; font-weight: 400; }
body.admin-body.sc-body .sc-foot { margin: 32px 0 0; padding: 16px 0 24px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--ink-2); text-align: center; }
body.admin-body.sc-body .inv-head-actions .admin-updated { margin-left: 8px; }   /* the console's Updated — · Refresh widget inside the head's actions row (item 12) */
body.admin-body.sc-body .admin-section > .admin-empty { margin: 24px 0; }
/* the Center's focus ring (the console's sheet has only per-control rings) */
body.admin-body.sc-body :focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
body.admin-body.sc-body .sc-stats-five { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
body.admin-body.sc-body .admin-stat-card.is-attn { border-color: var(--amber-ink); background: #FFF4DB; }
body.admin-body.sc-body .admin-stat-card.is-attn .admin-stat-icon { background: #FBE2B4; color: var(--amber-ink); }
body.admin-body.sc-body .admin-stat-card[data-nav="on"] { cursor: pointer; }
body.admin-body.sc-body .sc-empty { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 28px 16px; color: var(--ink-2); font-size: 14px; }
body.admin-body.sc-body .sc-empty b { color: var(--ink); font-size: 16px; }
body.admin-body.sc-body .sc-attn { display: grid; }
body.admin-body.sc-body .sc-attn-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--divider); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
body.admin-body.sc-body .sc-attn-row:last-child { border-bottom: 0; }
body.admin-body.sc-body .sc-attn-row img, body.admin-body.sc-body .sc-attn-ic { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface); display: grid; place-items: center; color: var(--ink-2); }
body.admin-body.sc-body .sc-attn-ic svg { width: 22px; height: 22px; }
body.admin-body.sc-body .sc-attn-t { display: grid; min-width: 0; }
body.admin-body.sc-body .sc-attn-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin-body.sc-body .sc-attn-t span { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin-body.sc-body .sc-table td { vertical-align: middle; }
body.admin-body.sc-body .sc-count { margin: 0 0 10px; font-size: 13px; }
body.admin-body.sc-body .sc-noimg { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 900; color: var(--ink-2); background: var(--surface); }
body.admin-body.sc-body .inv-thumb.sc-noimg { width: 56px; height: 56px; border-radius: 8px; font-size: 13px; }
body.admin-body.sc-body .stock-badge.sc-grey { background: #EEEDEA; color: #55544F; }
body.admin-body.sc-body .apc-image .ftk-pill { position: absolute; left: 10px; bottom: 10px; }
body.admin-body.sc-body .sc-reason { margin: 6px 0 0; font-size: 13px; color: var(--amber-ink); background: #FFF4DB; border-radius: 6px; padding: 6px 8px; }
body.admin-body.sc-body .sc-held { margin: 6px 0 0; font-size: 13px; color: var(--amber-ink); }
body.admin-body.sc-body td .sc-held { margin: 4px 0 0; }
/* a long state ("On sale · change in review") in the table's Status cell wraps instead of pushing a 320 px screen sideways */
body.admin-body.sc-body .admin-table td .stock-badge { white-space: normal; max-width: 100%; }
body.admin-body.sc-body .sc-flash { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
body.admin-body.sc-body .sc-mb { margin-bottom: 24px; }
/* the pop-up card, top-right (the console's own corner) */
body.admin-body.sc-body .sc-card { position: fixed; top: 90px; right: 16px; z-index: 1200; display: flex; gap: 10px; align-items: flex-start; width: min(380px, calc(100vw - 32px)); min-width: min(300px, calc(100vw - 32px)); max-width: min(380px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--divider); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); cursor: pointer; }
body.admin-body.sc-body .sc-card[hidden] { display: none; }
body.admin-body.sc-body .sc-card-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--orange); }
/* fix round 5 (item 8): the card had no width of its own — a fixed box shrink-wraps, and with `b { display: block }` it
   collapsed to the title's width while the line below broke one word per line down the page. Now the card is 300–380 px
   (edge to edge on a phone), the body may shrink (min-width: 0) and the text wraps inside it. */
body.admin-body.sc-body .sc-card-body { flex: 1 1 auto; min-width: 0; }
body.admin-body.sc-body .sc-card-title { display: block; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-card-line { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-card-line[hidden] { display: none; }
/* fields: the error under the field, red edge; the same words as the console */
body.admin-body.sc-body .form-group.is-invalid .admin-input { border-color: #B3261E; }
body.admin-body.sc-body .sc-err { margin: 4px 0 0; color: #B3261E; font-size: 13px; font-weight: 700; }
body.admin-body.sc-body .sc-err[hidden] { display: none; }
body.admin-body.sc-body .sc-counter { text-align: right; display: block; }
body.admin-body.sc-body .sc-fix { margin: 0 0 16px; font-weight: 400; }
body.admin-body.sc-body .sc-fix b { display: block; }
body.admin-body.sc-body .sc-live-note { margin: 0 0 16px; }
body.admin-body.sc-body .sc-modal-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
body.admin-body.sc-body .sc-foot-note { flex: 1 1 280px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
body.admin-body.sc-body .sc-foot-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
body.admin-body.sc-body .sc-modal-sm { max-width: 520px; }
body.admin-body.sc-body .sc-photos-group.is-invalid .pm-photos { outline: 2px solid #B3261E; outline-offset: 4px; border-radius: 8px; }
/* staff */
body.admin-body.sc-body .sc-person { display: flex; gap: 10px; align-items: center; min-width: 0; }
body.admin-body.sc-body .sc-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-weight: 900; font-size: 13px; }
body.admin-body.sc-body .sc-av.is-grey { background: #EEEDEA; color: #55544F; }
body.admin-body.sc-body .sc-sub { font-size: 12px; margin-top: 4px; }
body.admin-body.sc-body .sc-confirm { align-items: center; }
body.admin-body.sc-body .sc-confirm-q { font-weight: 700; font-size: 13px; }
body.admin-body.sc-body .sc-matrix td:not(:first-child), body.admin-body.sc-body .sc-matrix th:not(:first-child) { text-align: center; }
body.admin-body.sc-body .sc-m-yes { color: var(--paid-green); font-weight: 900; }
body.admin-body.sc-body .sc-m-view { color: var(--amber-ink); font-weight: 700; font-size: 12px; }
body.admin-body.sc-body .sc-m-no { color: var(--ink-2); }
body.admin-body.sc-body .sc-log { display: grid; }
body.admin-body.sc-body .sc-log-li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
body.admin-body.sc-body .sc-log-li:last-child { border-bottom: 0; }
body.admin-body.sc-body .sc-log-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
body.admin-body.sc-body .sc-log-li.is-refused .sc-log-what { color: var(--ink-2); }
body.admin-body.sc-body .sc-more { margin-top: 12px; }
body.admin-body.sc-body .sc-roles { display: grid; gap: 8px; }
body.admin-body.sc-body .sc-rcard { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--control-edge); border-radius: 8px; cursor: pointer; font-weight: 400; }
body.admin-body.sc-body .sc-rcard:has(input:checked) { border-color: var(--orange-ink); background: rgba(224, 123, 31, .06); }
body.admin-body.sc-body .sc-rcard input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange-ink); }
body.admin-body.sc-body .sc-rcard b { display: block; font-size: 14px; }
body.admin-body.sc-body .sc-rcard span { font-size: 13px; color: var(--ink-2); }
body.admin-body.sc-body .sc-safe { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface); font-size: 13px; line-height: 1.45; }
body.admin-body.sc-body .sc-safe b { display: block; }
/* account */
body.admin-body.sc-body .sc-account-grid { align-items: start; }
body.admin-body.sc-body .set-row-value { margin: 2px 0 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-panel-form { display: grid; gap: 12px; padding: 14px; margin: 0 0 8px; border-radius: 8px; background: var(--surface); }
body.admin-body.sc-body .sc-session-note { margin: 12px 0 0; }
body.admin-body.sc-body .sc-devices { display: grid; gap: 10px; }
body.admin-body.sc-body .sc-device { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
body.admin-body.sc-body .sc-device > div { display: grid; min-width: 0; }
body.admin-body.sc-body .sc-device span { font-size: 13px; }
body.admin-body.sc-body .sc-keys { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
body.admin-body.sc-body .sc-keys li { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
body.admin-body.sc-body .sc-secret { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 14px; border-radius: 8px; background: #fff; border: 1px solid var(--divider); }
body.admin-body.sc-body .sc-secret img { width: 160px; height: 160px; }
body.admin-body.sc-body .sc-secret code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; }
/* bulk upload */
body.admin-body.sc-body .sc-bulk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
body.admin-body.sc-body .sc-bulk-panel { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 20px; }
body.admin-body.sc-body .sc-bulk-panel h3 { margin: 0; font-size: 16px; }
body.admin-body.sc-body .sc-bulk-panel .pm-help { margin: 0 0 6px; }
body.admin-body.sc-body .sc-step { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-weight: 900; font-size: 13px; }
body.admin-body.sc-body .sc-drop { display: grid; gap: 4px; justify-items: center; width: 100%; min-height: 96px; padding: 16px; border: 2px dashed var(--control-edge); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
body.admin-body.sc-body .sc-drop.is-over { border-color: var(--orange-ink); background: rgba(224, 123, 31, .06); }
body.admin-body.sc-body .sc-drop b.muted { font-weight: 400; font-size: 13px; }
body.admin-body.sc-body .sc-folder { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
body.admin-body.sc-body .sc-bulk-table td { vertical-align: top; }
body.admin-body.sc-body .sc-bulk-why { margin-top: 4px; font-size: 13px; color: #B3261E; }
body.admin-body.sc-body .sc-bulk-photos { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
body.admin-body.sc-body .sc-bulk-photos img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
@media (max-width: 900px) { body.admin-body.sc-body .sc-bulk-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    body.admin-body.sc-body .sc-log-li { grid-template-columns: 1fr; gap: 2px; }
    body.admin-body.sc-body .sc-modal-foot { justify-content: flex-end; }
}


/* ═══ FIX ROUND 5 — the name menu, the Notifications screen, the approved PHONE layout (docs/prototypes/batch-4b-seller-phone-approved.html) ═══
   Built from the FTK tokens and the console's components: the prototype gives the order, the spacing and the words. */
/* the top band of the page: the console's sticky clip (6 px of page colour above the header) — the active tab's orange underline
   can never show through under the header once the tab row has scrolled away (item 9) */
body.admin-body.sc-body .sc-topclip { position: sticky; top: 0; height: 6px; margin-bottom: -6px; background: #f6f7f9; z-index: 1001; }
/* the name button (items 1, 2, 6): 44 px tall, gold-ink outline, the first name over the role, a small arrow; the first name is cut with … past 110 px */
body.admin-body.sc-body .sc-me-wrap { position: relative; display: flex; align-items: center; }
body.admin-body.sc-body .sc-me { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; height: 44px; padding: 4px 10px 4px 12px; border: 1.5px solid var(--gold-ink); border-radius: 10px; background: transparent; color: var(--gold-ink); cursor: pointer; text-align: left; font: inherit; }
body.admin-body.sc-body .sc-me:hover { background: rgba(58, 46, 16, .06); }
body.admin-body.sc-body .sc-me[aria-expanded="true"] { background: rgba(58, 46, 16, .1); }
body.admin-body.sc-body .sc-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
body.admin-body.sc-body .sc-me-name { display: block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--gold-ink); }
body.admin-body.sc-body .sc-me-add { font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
body.admin-body.sc-body .sc-me-role { display: block; font-size: 11px; font-weight: 600; color: var(--gold-ink); opacity: .85; }
body.admin-body.sc-body .sc-me-chev { width: 16px; height: 16px; flex: none; }
/* the menu: 240 px, right-aligned under the button */
body.admin-body.sc-body .sc-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; padding: 6px 0; background: #fff; border: 1px solid var(--divider); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); z-index: 1300; }
body.admin-body.sc-body .sc-menu[hidden] { display: none; }
body.admin-body.sc-body .sc-menu-head { padding: 10px 14px 12px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
body.admin-body.sc-body .sc-menu-head b { display: block; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-menu-head span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-menu-add { color: var(--gold-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
body.admin-body.sc-body .sc-menu [role="menuitem"] { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
body.admin-body.sc-body .sc-menu [role="menuitem"]:hover { background: var(--surface); }
body.admin-body.sc-body .sc-menu [role="menuitem"]:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: -3px; }
body.admin-body.sc-body .sc-menu-out { color: #B3261E !important; }
/* the unread count — ONLY here (item 2): an orange pill on the Notifications row */
body.admin-body.sc-body .sc-npill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--orange); color: var(--ink); font-size: 12px; font-weight: 800; }
body.admin-body.sc-body .sc-npill[hidden] { display: none; }
/* the Mac keeps Sound and Notifications; a phone does not (item 3) */
body.admin-body.sc-body .sc-phone-only { display: none; }
/* the phone's action row and the back link live under the tab strip; on the Mac they are not drawn */
body.admin-body.sc-body .sc-actionrow { display: none; }
body.admin-body.sc-body .sc-back { display: inline-block; margin: 0 0 12px; font-weight: 700; color: var(--gold-ink); text-decoration: none; }
body.admin-body.sc-body .sc-back[hidden] { display: none; }
/* every CSV / download control looks like Refresh — a link styled as the button, no underline, the same box (item 7) */
body.admin-body.sc-body a.btn-export { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
body.admin-body.sc-body a.btn-export:hover, body.admin-body.sc-body a.btn-export:focus { text-decoration: none; }
/* the compact order rows (phone) and the table (Mac) */
body.admin-body.sc-body .sc-olist { display: none; }
body.admin-body.sc-body .sc-orow { display: block; padding: 12px 14px; border-top: 1px solid var(--divider); color: inherit; }
body.admin-body.sc-body .sc-orow:first-child { border-top: 0; }
body.admin-body.sc-body .sc-orow[data-sc-open] { cursor: pointer; }
body.admin-body.sc-body .sc-orow[data-sc-open]:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: -3px; }
body.admin-body.sc-body .sc-orow-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
body.admin-body.sc-body .sc-orow-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
body.admin-body.sc-body .sc-orow-what { min-width: 0; overflow-wrap: anywhere; }
/* the Notifications screen (item 4) */
body.admin-body.sc-body .sc-nt-h { margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
body.admin-body.sc-body .sc-nt-list { background: #fff; border: 1px solid var(--divider); border-radius: 12px; overflow: hidden; }
body.admin-body.sc-body .sc-nt-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--divider); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
body.admin-body.sc-body .sc-nt-row:first-child { border-top: 0; }
body.admin-body.sc-body .sc-nt-row:hover { background: var(--surface); }
body.admin-body.sc-body .sc-nt-row:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: -3px; }
body.admin-body.sc-body .sc-nt-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--divider); background: var(--surface); color: var(--ink-2); }
body.admin-body.sc-body .sc-nt-ic svg { width: 20px; height: 20px; }
body.admin-body.sc-body .sc-nt-ic--order { background: var(--orange-tint); border-color: #F5D9BF; color: var(--orange-ink); }
body.admin-body.sc-body .sc-nt-ic--low { background: #FFF4DB; border-color: #F9E8B7; color: var(--amber-ink); }
body.admin-body.sc-body .sc-nt-ic--out { background: #FDECEA; border-color: #F5C6C1; color: #B3261E; }
body.admin-body.sc-body .sc-nt-ic--ok { background: #E9F5EC; border-color: #C9E6D0; color: #1F7A3F; }
body.admin-body.sc-body .sc-nt-ic--account { background: var(--surface); border-color: var(--divider); color: var(--ink-2); }
body.admin-body.sc-body .sc-nt-text { min-width: 0; }
body.admin-body.sc-body .sc-nt-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-nt-dot { display: none; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--orange); vertical-align: middle; }
body.admin-body.sc-body .sc-nt-row.is-unread .sc-nt-dot { display: inline-block; }
body.admin-body.sc-body .sc-nt-line { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-nt-time { font-size: 12px; color: var(--ink-2); white-space: nowrap; padding-top: 2px; }
/* iPhone Safari zooms into a box whose text is under 16 px (item 5): every box on the signed-out screens is 16 px */
body.sl-body #sl-shell .sl-input, body.sl-body #sl-shell select.sl-input, body.sl-body #sl-shell textarea.sl-input { font-size: 16px; }   /* outranks the shell's font: inherit reset (an id selector) */

@media (max-width: 639px) {
  /* ── the header (item 3): row 1 = logo, FTK Foods, SELLER, the name button; row 2 = the search box ── */
  body.admin-body.sc-body .sc-mac-only { display: none; }
  body.admin-body.sc-body .sc-phone-only { display: flex; }
  body.admin-body.sc-body .admin-nav-row-main { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; }
  body.admin-body.sc-body .admin-nav-row-main > .nav-brand { order: 0; min-width: 0; flex: 0 1 auto; }   /* the console's phone rule orders the brand after the buttons; here the brand leads and the name button sits at the right */
  body.admin-body.sc-body .admin-nav-right { display: flex; order: 1; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
  body.admin-body.sc-body .sc-menu { max-width: calc(100vw - 32px); }
  body.admin-body.sc-body .sc-menu { right: 0; }
  /* the card bottom of the screen, 16 px from each side, above the safe area (item 8) */
  body.admin-body.sc-body .sc-card { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; width: auto; min-width: 0; max-width: none; }
  /* ONE action row directly under the tab strip: the tab's CSV on the left, Updated … WAT then Refresh on the right */
  body.admin-body.sc-body .sc-actionrow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
  body.admin-body.sc-body .sc-actionrow[hidden] { display: none; }
  body.admin-body.sc-body .sc-ar-l, body.admin-body.sc-body .sc-ar-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
  body.admin-body.sc-body .sc-ar-r { margin-left: auto; }
  body.admin-body.sc-body .sc-ar-r .admin-updated { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; }
  body.admin-body.sc-body .sc-ar-r .admin-updated-time { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  body.admin-body.sc-body .sc-ar-r .admin-updated-refresh { flex: 0 0 auto; }
  body.admin-body.sc-body .sc-ar-l .btn-export, body.admin-body.sc-body .sc-ar-r .admin-updated-refresh { min-height: 40px; }
  /* the title row: the title on the left, the tab's main button on the right; the Mac head's CSV and Updated are the action row's now */
  body.admin-body.sc-body .admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
  body.admin-body.sc-body .admin-head > div:first-child { min-width: 0; }
  body.admin-body.sc-body .admin-head h1 { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
  body.admin-body.sc-body .inv-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  body.admin-body.sc-body .inv-head-actions .admin-updated, body.admin-body.sc-body .inv-head-actions a.btn-export[data-sc-csv], body.admin-body.sc-body .inv-head-actions .admin-count { display: none; }
  body.admin-body.sc-body .inv-head-actions .btn-add-product { white-space: nowrap; min-height: 44px; }
  /* summary cards 2 per row, 12 px padding, 10 px gap; a lone last card spans the row; product cards 2 per row */
  body.admin-body.sc-body .analytics-grid, body.admin-body.sc-body .inv-summary, body.admin-body.sc-body .sc-stats, body.admin-body.sc-body .sc-stats-five { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.admin-body.sc-body .admin-stat-card { padding: 12px; min-width: 0; }
  body.admin-body.sc-body .admin-stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.admin-body.sc-body .admin-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.admin-body.sc-body .admin-product-card { min-width: 0; }
  /* a card half the width: its buttons sit in two columns (the prototype's "+ Stock | − Stock" then "Edit | Archive"), never cut off */
  body.admin-body.sc-body .admin-product-card .stock-controls, body.admin-body.sc-body .admin-product-card .apc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body.admin-body.sc-body .admin-product-card .stock-controls > *, body.admin-body.sc-body .admin-product-card .apc-actions > * { min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.admin-body.sc-body .admin-product-card .apc-actions .sc-del-confirm { grid-column: 1 / -1; }
  body.admin-body.sc-body .admin-product-card .apc-body { min-width: 0; }
  body.admin-body.sc-body .admin-product-card h3 { overflow-wrap: anywhere; }
  /* filter pills in one sideways-scrolling line */
  body.admin-body.sc-body .filter-pills { display: flex; flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }   /* a flex item scrolls inside itself only when it may shrink (min-width: 0) — otherwise the toolbar grew to the pills' full width and the page scrolled sideways */
  body.admin-body.sc-body .filter-pills::-webkit-scrollbar { display: none; }
  body.admin-body.sc-body .filter-pill { flex: 0 0 auto; white-space: nowrap; }
  /* orders as compact rows; the table stays for the Mac */
  body.admin-body.sc-body .sc-olist { display: block; }
  body.admin-body.sc-body .sc-otable { display: none; }
  body.admin-body.sc-body .sc-nt-row { padding: 12px; gap: 10px; }
}
@media (max-width: 360px) {
  /* the words go, the logo stays, so the name button never leaves the screen; the "Updated" text goes, Refresh stays */
  body.admin-body.sc-body .nav-wordmark { display: none; }
  body.admin-body.sc-body .sc-ar-r .admin-updated-time { display: none; }
  body.admin-body.sc-body .sc-me-name { max-width: 90px; }
}

/* ═══ FIX ROUND 6 — tablet (640–899 px; iPad portrait is 768 and 820). The owner's rule: a tablet keeps the Mac-style header —
   Sound on/off and Notifications on/off visible, the name menu at the right — and the action rows follow the phone order wherever
   the Mac head would wrap. Measured before the fix: between 640 and 799 the console's phone-header rules (client/style.css
   @media (max-width: 799.98px): the main row wraps, .admin-nav-right is display: contents, the brand has order 1, Logout order 2,
   the buttons order 4) applied to this site, whose header has no Logout and whose name-menu wrapper has no order — so the name
   button landed FIRST, before the logo, and its right-aligned 240 px menu hung off the left edge of the screen; the Products and
   Staff heads (title + CSV + "Updated … WAT" + Refresh + the main button) wrapped onto two rows at 768 and 820; three product
   cards per row clipped the "Fix and resend · Archive · Delete" row. ═══ */
@media (min-width: 640px) and (max-width: 799.98px) {
  /* the header: ONE row — the brand first (it may shrink), then Sound · Notifications · the name button at the right; the search
     keeps its own second row (the console's rule below 800) */
  body.admin-body.sc-body .admin-nav-row-main { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; column-gap: 10px; row-gap: 0; }
  body.admin-body.sc-body .admin-nav-row-main > .nav-brand { order: 0; flex: 0 1 auto; min-width: 0; }
  body.admin-body.sc-body .admin-nav-right { display: flex; order: 1; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
  body.admin-body.sc-body .admin-nav-right > .admin-nav-btn { order: 0; min-height: 44px; }   /* the console's phone rule gave these order 4, which would have put them after the name button */
  body.admin-body.sc-body .sc-me-wrap { order: 1; justify-content: flex-end; }
  body.admin-body.sc-body .sc-menu { right: 0; left: auto; max-width: calc(100vw - 32px); }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  /* the phone's action rows (the round-5 rules under 640 px, repeated here for the tablet): ONE row under the tab strip — the
     tab's CSV on the left, "Updated … WAT" then Refresh on the right — and the title row keeps the tab's main button at the right;
     the Mac head's CSV, Updated and count are hidden (they are this row's now). paintActionRow draws the row on every width. */
  body.admin-body.sc-body .sc-actionrow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
  body.admin-body.sc-body .sc-actionrow[hidden] { display: none; }
  body.admin-body.sc-body .sc-ar-l, body.admin-body.sc-body .sc-ar-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
  body.admin-body.sc-body .sc-ar-r { margin-left: auto; }
  body.admin-body.sc-body .sc-ar-r .admin-updated { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; }
  body.admin-body.sc-body .sc-ar-r .admin-updated-time { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  body.admin-body.sc-body .sc-ar-r .admin-updated-refresh { flex: 0 0 auto; }
  body.admin-body.sc-body .sc-ar-l .btn-export, body.admin-body.sc-body .sc-ar-r .admin-updated-refresh { min-height: 40px; }
  body.admin-body.sc-body .admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
  body.admin-body.sc-body .admin-head > div:first-child { min-width: 0; }
  body.admin-body.sc-body .inv-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  body.admin-body.sc-body .inv-head-actions .admin-updated, body.admin-body.sc-body .inv-head-actions a.btn-export[data-sc-csv], body.admin-body.sc-body .inv-head-actions .admin-count { display: none; }
  body.admin-body.sc-body .inv-head-actions .btn-add-product { white-space: nowrap; min-height: 44px; }
  /* product cards 2 per row (three were cramped: a card's third button was cut off at 768 and 820); the stat cards keep the console's
     own auto-fit (3 per row at 768) */
  body.admin-body.sc-body .admin-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin-body.sc-body .admin-product-card { min-width: 0; }
}

/* ── fix round 6, items 1 and 4: the menu's "business name needs fixing" line; the Notifications screen's foot — "Show more"
   (the console's Refresh look, 44 px tall, full width on a phone), "Loading…" while a page loads, "You’re all caught up" at
   the end, the Center's error card over the button when a page fails ─────────────────────────────────────────────────── */
body.admin-body.sc-body .sc-menu-fix { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--amber-ink); overflow-wrap: anywhere; }
body.admin-body.sc-body .sc-nt-foot { display: grid; gap: 10px; justify-items: center; margin: 14px 0 0; }
body.admin-body.sc-body .sc-nt-foot .cat-msg-box { width: 100%; box-sizing: border-box; margin: 0; }
body.admin-body.sc-body .sc-nt-more { min-height: 44px; padding: 0 22px; font-size: 14px; }
body.admin-body.sc-body .sc-nt-more[disabled] { opacity: .6; cursor: default; }
body.admin-body.sc-body .sc-nt-end { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); }
@media (max-width: 639px) {
  body.admin-body.sc-body .sc-nt-more { width: 100%; }
}

/* ── fix round 6, items 6d and 7a: the Devices card (the shop's client/account-sessions.js markup, the same values as
   client/style.css's body:not(.admin-body) .sess-* rules, scoped to the seller site's body) and the "Confirm it's you"
   dialog (the invite modal's classes; every box 16 px — the iPhone zoom rule). ── */
body.admin-body.sc-body .sess-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--s4); }
body.admin-body.sc-body .sess-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  border: 1px solid var(--divider); border-radius: 8px; padding: 12px 14px; background: #fff; }
body.admin-body.sc-body .sess-card-main { min-width: 0; }
body.admin-body.sc-body .sess-card-line1 { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
body.admin-body.sc-body .sess-devlabel { font-size: 15px; font-weight: 700; color: var(--ink); }
body.admin-body.sc-body .sess-tag { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; background: var(--paid-green-bg); color: var(--paid-green); }
body.admin-body.sc-body .sess-card-line2 { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
body.admin-body.sc-body .sess-signout { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--divider);
  border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
body.admin-body.sc-body .sess-signout:hover { background: var(--surface); border-color: var(--danger); color: var(--danger); }
body.admin-body.sc-body .sess-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
body.admin-body.sc-body .sess-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border-radius: 8px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; border: 1px solid var(--control-edge); background: #fff; color: var(--ink); }
body.admin-body.sc-body .sess-btn-white { background: #fff; color: var(--ink); border-color: var(--control-edge); }
body.admin-body.sc-body .sess-btn-white:hover { background: var(--surface); }
body.admin-body.sc-body .sess-btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }         /* Sign out all others */
body.admin-body.sc-body .sess-btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }   /* Confirm */
body.admin-body.sc-body .sess-btn[hidden] { display: none; }   /* the display above would otherwise beat the UA [hidden] rule */
body.admin-body.sc-body .sess-msg { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
body.admin-body.sc-body .sess-msg:empty { display: none; margin: 0; }   /* no leftover message / empty space */
body.admin-body.sc-body .sess-msg.is-error { color: #B3261E; }
/* the dialog: the invite modal's card; its boxes 16 px so an iPhone never zooms */
body.admin-body.sc-body #sc-confirm .admin-input, body.admin-body.sc-body #sc-confirm input { font-size: 16px; }
body.admin-body.sc-body #sc-confirm .sc-confirm-alt { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
body.admin-body.sc-body #sc-confirm .sc-confirm-alt .mn-link { font-size: 14px; }
body.admin-body.sc-body #sc-confirm .acsp-errorbox { margin: 0 0 12px; }