/* ScentDay Admin. The identity (tokens, rail, phone bar, gate, wordmark + ADMIN tag, buttons, chips, scent chips) is
   the shared tool system from 01 Brand/tool-lockups (TOOL-DESIGN-SYSTEM.md), injected into the page at build time as
   <style id="sd-tool-system">. This file only lays the shell out and styles the Admin's own components, with the
   system's tokens: never a hex here (except the email preview's paper and Google's blue in the SERP preview). */
[hidden]{display:none!important}
*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--sd-sans); font-size:15px; line-height:1.5; margin:0}
.wrap{max-width:1180px; margin:0 0 0 244px; padding:26px 40px 64px}

/* ---- shell layout (colors come from the tool system) ---- */
.rail{position:fixed; top:0; bottom:0; left:0; width:244px; z-index:40; overflow-y:auto; background:var(--rail); color:var(--rail-ink);
  padding:24px 16px 20px; display:flex; flex-direction:column; gap:22px; border-right:1px solid var(--rail-line)}
.brand{display:flex; align-items:center; gap:10px; padding:0 8px; color:inherit; text-decoration:none}
.tabs{display:flex; flex-direction:column; gap:4px}
.tab{font:inherit; font-size:14.5px; font-weight:500; color:var(--rail-ink-2); height:46px; padding:0 12px; border-radius:10px; width:100%;
  display:flex; align-items:center; gap:12px; text-decoration:none; position:relative}
.tab svg{flex:none}
.tab .dot{width:8px; height:8px; border-radius:999px; flex:none; background:var(--dot)}
.tab:hover{background:var(--rail-hover); color:var(--rail-ink)}
.tab[aria-current="page"]{background:var(--rail-current); color:var(--rail-current-ink); font-weight:600}
.tab[aria-current="page"] .dot{box-shadow:0 0 0 2px var(--rail-current)}
.tabnum{font-size:11.5px; font-weight:600; margin-left:auto; background:var(--accent-fill); color:var(--on-accent); padding:1px 8px; border-radius:999px; font-variant-numeric:tabular-nums}
.tab .lbl-s{display:none}
.railfoot{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.crosslink{display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; border:1px solid var(--rail-line);
  color:var(--rail-ink-2); text-decoration:none; font-size:13px}
.crosslink b{display:block; font-weight:600; font-size:13.5px; color:var(--rail-ink)}
.crosslink i{display:block; font-style:normal; font-size:11.5px; color:var(--rail-ink-3)}
.crosslink .go{margin-left:auto; opacity:.7; flex:none}
.me{display:flex; align-items:center; gap:10px; padding:12px 10px 0; border-top:1px solid var(--rail-line); font-size:13.5px}
.me .link{margin-left:auto; color:var(--rail-ink-2)}
.av{width:30px; height:30px; border-radius:999px; background:var(--blush); color:var(--blush-ink); font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; font-size:12.5px; letter-spacing:.02em}
.pagehead{display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap; margin:0 0 20px}
.pagehead h1{margin:0; font-size:30px; font-weight:500; letter-spacing:-.02em; line-height:1.15}
.pagehead p{margin:0; font-size:14px; color:var(--ink-2); max-width:78ch}
.topbar{display:none}
@media (max-width:860px){
  .wrap{margin:0; padding:14px 16px calc(84px + env(safe-area-inset-bottom))}
  .topbar{display:flex; position:sticky; top:0; z-index:30; height:52px; align-items:center; gap:10px; padding:0 16px}
  .topbar .av{margin-left:auto; width:28px; height:28px; font-size:11.5px}
  .rail{top:auto; right:0; width:auto; height:calc(64px + env(safe-area-inset-bottom)); padding:0 2px env(safe-area-inset-bottom);
    flex-direction:row; gap:0; overflow:visible}
  .rail .brand, .railfoot{display:none}
  .tabs{flex-direction:row; width:100%; gap:0}
  .tab{flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:3px; height:64px; padding:0 1px; font-size:10.5px; white-space:nowrap}
  .tab .dot{display:none}
  .tab .lbl, .tab .lbl-s{overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .tab:has(.lbl-s) .lbl{display:none}   /* 8 tabs on a 360 px phone: the long labels get a short form */
  .tab .lbl-s{display:block}
  .tabnum{position:absolute; top:5px; left:calc(50% + 6px); margin:0; font-size:10px; padding:0 5px}
  .pagehead{margin:0 0 14px}
  .pagehead h1{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}   /* the page's h1 stays for screen readers; the top bar shows the title */
  .pagehead p{font-size:13px}
}
@media (max-width:400px){ .tab{font-size:10px; letter-spacing:-.1px} }
#gate{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto}
#gate .box{width:100%; max-width:380px; margin:auto 0}
#gate p{margin:0 0 20px; font-size:14px}
#gate label{display:block; font-size:11px; text-transform:uppercase; margin:0 0 6px}
#gate input{width:100%; font:inherit; font-size:15px; padding:12px 14px; margin-bottom:16px}
#gate input:focus{outline:none}
#gate button{width:100%; cursor:pointer; border:0}
#gate .err{font-size:13px; margin:0 0 12px; min-height:18px}
#gate .err:empty{margin:0; min-height:0}
@media (max-width:400px){ html body #gate h2{font-size:40px} }

/* ---- components ---- */
.link{appearance:none; border:0; background:none; padding:0; font:inherit; font-size:13px; color:var(--accent-ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.btn{appearance:none; font:inherit; font-size:14px; font-weight:600; line-height:1.2; border-radius:999px; padding:9px 18px; cursor:pointer; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); text-decoration:none; transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--btn); border-color:var(--btn); color:var(--btn-ink)}
.btn.primary:hover{background:var(--btn-hover); border-color:var(--btn-hover)}
.btn:disabled{opacity:.45; cursor:default}
.btn:disabled:hover{border-color:var(--line-2)} .btn.primary:disabled:hover{background:var(--btn); border-color:var(--btn)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 22px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); min-width:0}
.card .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.card .v{font-size:30px; font-weight:500; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; margin-top:2px}
.card .s{font-size:12.5px; color:var(--ink-2)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin:0 0 18px; overflow:hidden}
.panel > h2{font-size:15px; font-weight:600; margin:0; padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.panel > h2 .sp{flex:1}
.panel .pad{padding:16px 18px}
.empty{padding:30px 18px; color:var(--ink-2); font-size:14px; text-align:center}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 12px}
.search{flex:1 1 220px; min-width:0; font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface); border:1px solid var(--field); border-radius:999px; padding:9px 16px}
.search::placeholder{color:var(--ink-3)}
.search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.chip{appearance:none; font:inherit; font-size:13px; font-weight:500; border-radius:999px; padding:6px 13px; cursor:pointer; background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2)}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.tbl th{text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.row{cursor:pointer}
.tbl tr.row:hover td{background:var(--surface-2)}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.muted{color:var(--ink-2); font-size:13px}
.pill{display:inline-block; font-size:12px; font-weight:600; line-height:1.4; padding:2px 9px; border-radius:999px; background:var(--chip); color:var(--ink-2); white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)} .pill.bad{background:var(--risk-soft); color:var(--risk)}
.scroll{overflow-x:auto}
@media (max-width:860px){ .tbl .hide-sm{display:none} .tbl td,.tbl th{padding:10px 10px} }

/* content editor */
.subtabs{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px}
.field{margin:0 0 14px}
.field label{display:flex; justify-content:space-between; gap:10px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 5px}
.field label .cnt{letter-spacing:0; text-transform:none; font-weight:500}
.field label .cnt.over{color:var(--risk)}
.field input, .field textarea{width:100%; font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface); border:1px solid var(--field); border-radius:var(--radius); padding:9px 12px}
.field textarea{min-height:76px; resize:vertical}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field .def{font-size:12.5px; color:var(--ink-3); margin-top:4px}
.changed input, .changed textarea{border-color:var(--warn); background:var(--warn-soft)}
.serp{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--paper); margin:0 0 14px; font-family:Arial,sans-serif; max-width:640px}
.serp .u{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.serp .t{font-size:19px; color:#1a0dab; line-height:1.3; margin:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .serp .t{color:#8ab4f8} }
:root[data-theme="dark"] .serp .t{color:#8ab4f8}
.serp .d{font-size:14px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pagecard{border-top:1px solid var(--line); padding:16px 18px}
.pagecard:first-child{border-top:0}
.pagecard h3{font-size:14px; margin:0 0 10px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.imgrow{display:grid; grid-template-columns:96px 1fr; gap:14px; padding:14px 18px; border-top:1px solid var(--line); align-items:start}
.imgrow:first-child{border-top:0}
.imgrow img{width:96px; height:96px; object-fit:cover; border-radius:10px; background:var(--surface-2)}
.savebar{position:sticky; bottom:0; z-index:20; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 16px; margin:0 -16px;
  background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -10px 24px -18px var(--scrim)}
.savebar .msg{flex:1; font-size:13.5px; color:var(--ink-2); min-width:180px}
@media (max-width:860px){ .savebar{bottom:calc(64px + env(safe-area-inset-bottom))} }
.blocked{background:var(--risk-soft); color:var(--risk); border-radius:10px; padding:10px 12px; font-size:13.5px; margin:0 0 12px}

/* drawer */
.drawer{position:fixed; inset:0; z-index:80; background:var(--scrim); display:flex; justify-content:flex-end}
.drawer-box{width:min(560px,100%); height:100%; overflow-y:auto; background:var(--paper); padding:22px 22px 40px; position:relative; box-shadow:-18px 0 40px -24px var(--scrim); border-left:1px solid var(--line)}
.drawer h2{font-size:24px; margin:0 44px 6px 0; font-weight:500; letter-spacing:-.02em; line-height:1.2}
.drawer h3{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:24px 0 8px}
.x{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); font:400 20px/1 var(--sd-sans); cursor:pointer; color:var(--ink)}
.x:hover{border-color:var(--ink)}
.kv{display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:14px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
.timeline{list-style:none; margin:0; padding:0; font-size:13.5px}
.timeline li{padding:8px 0 8px 16px; border-left:2px solid var(--line-2); position:relative}
.timeline li::before{content:""; position:absolute; left:-5px; top:14px; width:8px; height:8px; border-radius:999px; background:var(--ink-3)}
#toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:120; background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px; font-size:14px; box-shadow:var(--shadow); max-width:calc(100% - 32px); font-weight:500}
@media (max-width:860px){ #toast{bottom:calc(76px + env(safe-area-inset-bottom))} }
.status-list{list-style:none; margin:0; padding:0}
.status-list li{display:flex; gap:12px; padding:12px 18px; border-top:1px solid var(--line); align-items:baseline; flex-wrap:wrap}
.status-list li:first-child{border-top:0}
.status-list b{min-width:150px; font-weight:600}
.status-list .muted{flex:1 1 240px}

/* ---- order system: holds, actions, timeline + notes, inventory ---- */
.show-sm{display:none}
@media (max-width:860px){ .tbl .show-sm{display:block; margin-top:4px} }
.hold-why{font-size:12.5px; color:var(--risk); margin-top:2px}
.chip.alert{box-shadow:inset 0 0 0 1px var(--risk); color:var(--risk)}
.chip.alert[aria-pressed="true"]{background:var(--risk); border-color:var(--risk); color:var(--paper); box-shadow:none}
.callout{border-radius:12px; padding:11px 14px; font-size:13.5px; margin:14px 0 0; background:var(--surface-2); color:var(--ink)}
.callout.bad{background:var(--risk-soft)} .callout.warn{background:var(--warn-soft)} .callout.ok{background:var(--ok-soft)}
.callout b{font-weight:600}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.btn.danger{background:var(--risk); border-color:var(--risk); color:var(--paper)}
.btn.danger:hover{filter:brightness(1.08)}
.btn.danger:disabled:hover{border-color:var(--risk); filter:none}
.conn-note{font-size:13px; color:var(--ink-2); margin:10px 0 0}
.reasonbox{display:block; width:100%; margin:10px 0 0; font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:9px 12px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.noteform{display:flex; gap:8px; align-items:flex-end; margin:0 0 12px}
.noteform textarea{flex:1; min-width:0; font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:9px 12px; resize:vertical; min-height:44px}
.noteform textarea:focus, .reasonbox:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.timeline li div{color:var(--ink-2); margin-top:2px; overflow-wrap:anywhere}
.timeline li.is-note{border-left-color:var(--warn)}
.timeline li.is-note::before{background:var(--warn)}
.timeline li.is-alert::before{background:var(--risk)}

.stock{display:flex; flex-direction:column}
.srow{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) auto auto; gap:10px 16px; align-items:center; padding:14px 18px; border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.sname{min-width:0} .sname b{display:block; font-weight:600} .sname .muted{font-size:12.5px; overflow-wrap:anywhere}
.sqty{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.sqty .big{font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; min-width:1.6em}
.sqty .muted{font-size:12px}
.sadj{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); overflow:hidden}
.stepper button{appearance:none; border:0; background:none; font:inherit; font-size:18px; width:38px; height:38px; cursor:pointer; color:var(--ink)}
.stepper button:hover{background:var(--surface-2)}
.stepper input{width:58px; height:38px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; font-size:15px; text-align:center; -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.sadj .to{min-width:42px; font-variant-numeric:tabular-nums}
.sadj .reason{width:200px; font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:8px 14px}
.sadj .reason:focus, .stepper input:focus{outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.lowform{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.lowform input{width:90px; font:inherit; font-size:15px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:8px 10px}
.lowform .muted{flex-basis:100%}
@media (max-width:1180px){ .srow{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name qty" "adj adj" "hist hist"} .sname{grid-area:name} .sqty{grid-area:qty; justify-content:flex-end} .sadj{grid-area:adj} .srow .hist{grid-area:hist; justify-self:start} }
@media (max-width:860px){ .panel > h2 .hide-sm{display:none} .cards.tight{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} .cards.tight .card{padding:12px} .cards.tight .v{font-size:22px} .cards.tight .s{font-size:11.5px; line-height:1.35} }
@media (max-width:520px){ .srow{grid-template-columns:minmax(0,1fr); grid-template-areas:"name" "qty" "adj" "hist"} .sqty{justify-content:flex-start} .sadj .reason{flex:1 1 100%; width:auto; order:3} .sadj .btn{order:4; flex:1 1 100%} .srow{padding:14px} .noteform{flex-direction:column; align-items:stretch} }

/* refund by line + privacy requests (10-09) */
.refundform{display:grid; gap:10px; margin:14px 0 0; padding:14px; border-radius:12px; background:var(--risk-soft)}
.refundform .tbl{background:var(--surface); border-radius:10px}
.refundform select{font:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--ink)}
.refundform .reasonbox{margin:0}
.refundform p{margin:0}
.chk{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer; margin-top:8px}
.chk input{width:17px; height:17px; accent-color:var(--accent); flex:none}
.refundform td .chk{margin:0}

/* ---- Email (10-09): flows, templates, campaigns, segments, log, suppressions, import ---- */
a.chip{text-decoration:none; display:inline-block}
.subtabs .chip{white-space:nowrap}
.mailnote{margin:0 0 14px}
code{font:12.5px/1.4 var(--sd-mono); background:var(--surface-2); padding:1px 5px; border-radius:6px; overflow-wrap:anywhere}
.flow{padding:14px 18px; border-top:1px solid var(--line)}
.flow:first-of-type{border-top:0}
.fhead{display:flex; gap:10px 16px; align-items:flex-start; flex-wrap:wrap}
.ftitle{flex:1 1 260px; min-width:0}
.ftitle b{font-weight:600; margin-right:4px}
.fstat{font-size:13px; color:var(--ink-2); white-space:nowrap; padding-top:2px}
.fstat b{color:var(--ink); font-size:15px}
.switch{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; font-weight:600}
.switch input{appearance:none; width:40px; height:24px; border-radius:999px; background:var(--line-2); position:relative; cursor:pointer; margin:0; transition:background .15s}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px; background:var(--surface); transition:transform .15s; box-shadow:0 1px 2px var(--scrim)}
.switch input:checked{background:var(--ok)}
.switch input:checked::after{transform:translateX(16px)}
.switch input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.steps{list-style:none; margin:10px 0 0; padding:0; counter-reset:st}
.steps li{display:flex; gap:6px 14px; align-items:center; flex-wrap:wrap; padding:8px 0 8px 30px; position:relative; border-top:1px dashed var(--line); font-size:14px}
.steps li::before{counter-increment:st; content:counter(st); position:absolute; left:0; top:9px; width:20px; height:20px; border-radius:999px; background:var(--chip); color:var(--ink-2); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
.steps .sname{flex:1 1 240px; min-width:0; overflow-wrap:anywhere}
.delay{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2)}
.delay input{width:72px; font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:8px; padding:6px 8px}
.delay select, .pick, .blk select, .rule select{font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:6px 8px; max-width:100%; min-width:0}
.fnote{margin:6px 0 0; font-size:12.5px}
.seg{display:inline-flex; gap:4px; margin-left:auto}
.toolbar .pick{flex:1 1 260px; min-width:0; border-radius:999px; padding:9px 14px}
.egrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; align-items:start}
.ecol{min-width:0}
.mailprev{position:sticky; top:16px}
.mailprev > h2{flex-wrap:wrap}
.prevsub{padding:10px 18px 0; overflow-wrap:anywhere}
.mailframe{margin:12px auto 16px; max-width:100%; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#f7f2ec}
.mailframe[data-w="desktop"]{width:640px} .mailframe[data-w="phone"]{width:375px}
.mailframe iframe{display:block; width:100%; height:480px; border:0; background:#f7f2ec}
.mailprev .mailframe{margin-left:16px; margin-right:16px; max-width:calc(100% - 32px)}
@media (min-width:1181px){ .mailprev .mailframe[data-w="desktop"]{width:auto} }
.testform, .supform{display:flex; gap:8px; flex-wrap:wrap}
.testform input, .supform input{flex:1 1 200px; min-width:0; font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:9px 14px}
.testform input:focus, .supform input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.crumb{margin:0 0 12px}
.blk{padding:12px 18px; border-top:1px solid var(--line); display:grid; gap:8px}
.blk:first-child{border-top:0}
.bhead{display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.bhead .sp{flex:1}
.ib{appearance:none; width:30px; height:30px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; font-size:15px; line-height:1}
.ib:disabled{opacity:.35; cursor:default}
.blk input, .blk textarea, .rule input{width:100%; min-width:0; font:inherit; font-size:14.5px; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:10px; padding:8px 11px}
.blk textarea{min-height:92px; resize:vertical}
.blk input:focus, .blk textarea:focus, .rule input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.blk input:disabled, .blk textarea:disabled, .blk select:disabled{opacity:.7}
.two{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8px}
.imgpick{display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; align-items:start}
.imgpick > div{display:grid; gap:8px; min-width:0}
.imgpick img, .noimg{width:72px; height:72px; border-radius:8px; object-fit:cover; background:var(--surface-2); display:block}
.addrow{display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2)}
.sendrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0 6px}
.sendrow input{font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:8px 12px; min-width:0; max-width:100%}
.rules{display:grid; gap:8px; margin:0 0 10px}
.rule{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 30px; gap:6px; align-items:center}
.rule select{width:100%}
.rulelist{margin:6px 0 14px; padding-left:20px; color:var(--ink-2); font-size:14px}
.rulelist li{margin:3px 0}
.filepick{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.filepick .btn{display:inline-block}
.nowrap{white-space:nowrap}
.wrapcell{overflow-wrap:anywhere; min-width:0}
.wrapcell b{font-weight:500}
@media (max-width:520px){ .tbl.stack thead{display:none} .tbl.stack tr{display:block; padding:8px 0; border-bottom:1px solid var(--line)} .tbl.stack tr:last-child{border-bottom:0} .tbl.stack td{display:block; border:0; padding:3px 14px} }
.pad.muted, p.pad{padding:10px 18px; margin:0}
@media (max-width:1180px){ .egrid{grid-template-columns:minmax(0,1fr)} .mailprev{position:static} }
@media (max-width:860px){ .seg{margin-left:0} .mailprev .mailframe{margin-left:10px; margin-right:10px; max-width:calc(100% - 20px)} .flow{padding:12px 14px} .blk{padding:12px 14px} }
@media (max-width:520px){ .rule{grid-template-columns:minmax(0,1fr) 30px} .rule > :nth-child(2), .rule > :nth-child(3){grid-column:1} .rule .ib{grid-row:1; grid-column:2} .two{grid-template-columns:minmax(0,1fr)} .steps li{padding-left:28px} .sendrow > *{flex:1 1 auto} .sendrow .or{display:none} }

/* ---- accounts (10-09): the sign-in door, the testing banner, Staff, Your account ---- */
.me .who{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.me .who b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.me .who i{font-style:normal; font-size:11.5px; color:var(--rail-ink-3)}
.modebar{display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin:0 0 18px; padding:8px 14px; border-radius:var(--radius); background:var(--warn-soft); color:var(--ink-2); font-size:13.5px}
.modebar .pill{background:var(--surface)}
html body #gate .ghelp{font-size:12.5px; margin:-8px 0 16px; color:var(--ink-3)}
html body #gate .gnote{font-size:12.5px; margin:0 0 16px; padding:10px 12px; border-radius:10px; background:var(--accent-soft); color:var(--ink)}
#gate .galt{margin-top:14px; text-align:center}
html body #gate button.glink{width:auto; background:none; color:var(--accent-ink); padding:6px 4px; font:500 13.5px/1.3 var(--sd-sans); letter-spacing:0; text-transform:none; text-decoration:underline; text-underline-offset:3px; border-radius:6px}
html body #gate button.glink:hover{color:var(--ink); background:none}
#gate button:disabled{opacity:.6; cursor:default}
.btn.sm{padding:6px 12px; font-size:13px}
.rowacts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.tbl.staff td{vertical-align:middle}
.rolepick{min-width:112px}
.invite{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 18px; border-top:1px solid var(--line); background:var(--surface-2)}
.invite b{flex-basis:100%; font-weight:600; font-size:14px}
.invite input{flex:1 1 200px; min-width:0; font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:9px 14px}
.invite input:focus, .limits input:focus, .pwform input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
#staffconfirm .callout{margin:0; border-radius:0}
.limits p{margin:0 0 10px}
.limrow{display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap}
.limrow label{font-size:13.5px; font-weight:600; min-width:62px}
.limpair{display:inline-flex; align-items:center; gap:8px}
.dollar{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:10px; background:var(--paper); padding-left:10px}
.dollar span{color:var(--ink-3)}
.dollar input{width:96px; font:inherit; font-size:14.5px; color:var(--ink); background:none; border:0; padding:8px 10px 8px 4px}
.pwform{display:flex; gap:8px; flex-wrap:wrap}
.pwform input{flex:1 1 200px; min-width:0; font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:9px 14px}
.pwform p{flex-basis:100%; margin:0}
.mfasteps{margin:0; padding-left:20px; display:grid; gap:14px}
.qr{margin:10px 0; width:184px; max-width:100%; background:#FFFFFF; border-radius:10px; padding:6px}
.qr svg{display:block; width:100%; height:auto}
code.key{font-size:13.5px; letter-spacing:.04em}
.kv.pad{padding:16px 18px; margin:0}
@media (max-width:860px){ .modebar{margin:0 0 12px; font-size:12.5px; padding:8px 12px} }
@media (max-width:520px){ .tbl.staff td{padding:4px 14px} .tbl.staff tr{padding:10px 0} .rowacts{justify-content:flex-start; margin-top:4px} .rolepick{width:100%}
  .limpair{flex:1 1 100%} .limrow .dollar{flex:1 1 auto} .limrow .dollar input{width:100%} .tbl.staff td[data-l]::before{content:attr(data-l) ": "; color:var(--ink-3); font-size:12.5px} .limrow .btn{flex:1 1 100%} .invite .pick{flex:1 1 100%} .invite .btn{flex:1 1 100%} .kv{grid-template-columns:100px 1fr} }
/* reviews (Content → Reviews) */
.chipnum{display:inline-block; margin-left:6px; font-size:11px; font-weight:600; background:var(--accent-fill); color:var(--on-accent); padding:0 6px; border-radius:999px}
.chipnum[hidden]{display:none}
.rstars{color:var(--ink); letter-spacing:1px; white-space:nowrap; font-size:13px}
.rstars i{font-style:normal; color:var(--line)}
.rvtbl .rvt{margin-top:4px; color:var(--ink-2); font-size:13.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.rvfull{display:grid; gap:6px}
.rvfull p{margin:0; line-height:1.55; overflow-wrap:anywhere}
.rvphotos{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.rvphotos figure{margin:0; display:grid; gap:6px}
.rvphotos img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; background:var(--chip)}
.rvphotos figcaption{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px}
.rvph-acts{display:flex; gap:6px; flex-wrap:wrap}
.rvph-acts .btn{padding:5px 10px; font-size:12px}
.callout .btn{margin-left:6px}
.savebar[hidden]{display:none}
@media (max-width:860px){ .tbl.rvtbl td.hide-sm, .tbl.rvtbl th.hide-sm{display:none} }

/* ---- reports + sales tax (Reports tab). Theme tokens only, so the tool-lockups restyle is a token swap. ---- */
.rbar .pick{flex:0 1 auto; border-radius:999px; padding:8px 14px}
.rdates{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.rdates .pick{border-radius:10px; padding:6px 10px}
.stamp{margin:0 0 12px; font-size:13.5px}
.rnote{margin:0 0 14px}
.rfoot{margin:-6px 0 18px}
.rh{font-size:19px; font-weight:500; letter-spacing:-.01em; margin:28px 0 4px}
.emptystate{text-align:center; padding:34px 22px; color:var(--ink-2)}
.emptystate svg{color:var(--ink-3)}
.emptystate h2{font-size:17px; font-weight:600; color:var(--ink); margin:10px 0 4px; padding:0; border:0; display:block}
.emptystate p{max-width:520px; margin:0 auto 12px; font-size:14px}
.emptystate ul{display:inline-block; text-align:left; margin:0 auto; padding-left:18px; font-size:13.5px}
.emptystate .btn{margin-top:6px}
.emptystate.inpanel{padding:26px 18px}
.legend{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--ink-2)}
.legend .lg{display:inline-block; width:10px; height:10px; border-radius:3px; margin-left:6px}
.lg.one, .rchart .one, .splitbar .one{background:var(--s1); fill:var(--s1)}
.lg.sub, .rchart .sub, .splitbar .sub{background:var(--s2); fill:var(--s2)}
.rchart{width:100%; height:200px; display:block}
.rchart .grid{stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke}
.rchart .ax{fill:var(--ink-3); font-size:11px}
.splitbar{display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--chip); margin:0 18px}
.fin{list-style:none; margin:0; padding:0}
.fin li{display:flex; gap:14px; justify-content:space-between; align-items:baseline; padding:12px 18px; border-top:1px solid var(--line)}
.fin li:first-child{border-top:0}
.fin li.tot{background:var(--surface-2)}
.fin .fl{display:flex; flex-direction:column; min-width:0}
.fin .fl b{font-weight:600}
.fin .fv{display:flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums; white-space:nowrap}
.fin li.tot .fv b{font-size:17px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card .v.big{font-size:36px}
.cardact{margin-top:10px}
.totrow td{background:var(--surface-2)}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.04em}
.help{margin:0 0 18px}
.help > summary{cursor:pointer; padding:14px 18px; list-style-position:inside}
.help .pad p{margin:0 0 10px; font-size:14px}
.help .pad p:last-child{margin:0}
.remind{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; font-weight:500}
.remind input{width:58px; font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:8px; padding:4px 8px}
.calgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0}
.calm{padding:12px 18px; border-top:1px solid var(--line); border-right:1px solid var(--line)}
.calm ul{list-style:none; margin:6px 0 0; padding:0; font-size:13.5px}
.calm li{display:flex; align-items:baseline; gap:8px; padding:2px 0}
.calm .cd{display:inline-block; min-width:26px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.calm li.late .cd{color:var(--risk)}
.meter-cell{min-width:120px}
.meter{position:relative; height:8px; border-radius:999px; background:var(--chip); overflow:hidden; margin-top:6px}
.meter span{display:block; height:100%; background:var(--ok); border-radius:999px}
.meter.near span{background:var(--warn)} .meter.over span{background:var(--risk)}
.meter i{position:absolute; top:0; bottom:0; width:2px; background:var(--surface)}
.chanform{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:10px; align-items:end; padding:14px 18px 0}
.chanform .field{margin:0}
.chanform .pick{width:100%; padding:9px 10px; border-radius:10px}
.chanform .btn{margin-bottom:1px}
.regform .pick{width:100%; padding:9px 12px; border-radius:10px}
.srcs{margin:0; padding-left:18px; font-size:14px}
.srcs li{margin:3px 0; overflow-wrap:anywhere}
.tbl.rtbl td{vertical-align:middle}
@media (max-width:1180px){ .chanform{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){ .rbar .seg{margin-left:0} .fin li{padding:11px 14px} .card .v.big{font-size:30px} }
@media (max-width:520px){ .chanform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .chanform .btn{grid-column:1 / -1} .fin li{flex-wrap:wrap} .fin .fv{align-items:flex-start} .rbar .pick{flex:1 1 100%} .meter-cell{min-width:80px} .calgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .calm{padding:10px 14px} }
.tbl th.num{text-align:right}
.regs .btn, .rtbl .rowacts .btn{white-space:nowrap}
.legend{white-space:nowrap}
@media (max-width:520px){ .cards.rcards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px} .rcards .card{padding:12px} .rcards .card .v{font-size:22px} .rcards .card .s{font-size:11.5px} .panel > h2 .legend{font-size:11px} }

/* ---- scent chips in names (orders, inventory, reports, content): the system's .sd-scent, a touch denser in rows ---- */
.scentname{display:inline-flex; align-items:center; gap:4px 7px; flex-wrap:wrap; vertical-align:middle}
.screst{font-weight:500}
.tbl .sd-scent, .sname .sd-scent, .drawer .muted .sd-scent{padding:2px 10px 2px 6px; font-size:12.5px; font-weight:500}
.panel > h2 .sd-scent{font-size:14px; font-weight:600}

/* ---- Products · Discounts (10-10). Tokens only. ---- */
.prod > h2 .pill{margin-left:auto}
.pfields{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px 16px; align-items:end}
.pnote{margin:0; padding:0 18px 14px; font-size:12.5px}
.pfields .pnote{grid-column:1/-1; padding:0}
.pfoot{margin:4px 2px 18px}
.vlist{border-top:1px solid var(--line)}
.vrow{display:grid; grid-template-columns:minmax(170px,1.3fr) repeat(6,minmax(0,1fr)) minmax(0,.9fr) auto; gap:10px 12px; align-items:end; padding:12px 18px; border-top:1px solid var(--line)}
.vrow:first-child{border-top:0}
.vrow-b{grid-template-columns:minmax(170px,1.3fr) repeat(4,minmax(0,1fr))}
.vname{display:flex; flex-direction:column; gap:4px; min-width:0; align-self:center}
.vname .muted{font-size:12.5px; font-variant-numeric:tabular-nums}
.was{color:var(--warn); white-space:nowrap}
.vf{display:flex; flex-direction:column; gap:5px; min-width:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.vf input, .vf select{width:100%; min-width:0; font:inherit; font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); background:var(--surface); border:1px solid var(--field); border-radius:10px; padding:8px 10px; font-variant-numeric:tabular-nums}
.vf input::placeholder{color:var(--ink-3)}
.vf input:focus, .vf select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.vf input:disabled, .vf select:disabled{background:var(--surface-2); color:var(--ink-2); cursor:not-allowed}
.vf.changed input, .vf.changed select{border-color:var(--warn); background:var(--warn-soft)}
.vf-na .muted{font-size:14px; letter-spacing:0; text-transform:none; font-weight:400; padding:8px 0}
.money{position:relative; display:block}
.money::before{content:"$"; position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:14px; font-weight:400; letter-spacing:0; pointer-events:none}
.money input{padding-left:21px}
.subsw .switch{min-height:38px; letter-spacing:0; text-transform:none; color:var(--ink); font-size:13.5px}
.vf .switch input, .vf.changed .switch input{width:40px; height:24px; flex:none; padding:0; border:0; border-radius:999px; background:var(--line-2); box-shadow:none}
.vf .switch input:checked{background:var(--ok)}
.vf.changed .switch span{color:var(--warn)}
#psub > .callout{margin:0 0 12px}
.vimg{white-space:nowrap; align-self:end; padding:8px 14px}
.dotmark{display:inline-block; width:7px; height:7px; border-radius:999px; background:var(--warn); vertical-align:middle; margin-left:2px}
@media (max-width:1180px){ .vrow{grid-template-columns:repeat(4,minmax(0,1fr))} .vrow .vname{grid-column:1/-1} .vrow-b{grid-template-columns:repeat(4,minmax(0,1fr))} .vimg{justify-self:start} }
@media (max-width:640px){ .vrow, .vrow-b{grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px 14px} .vimg{grid-column:1/-1; justify-self:stretch} .pfields{grid-template-columns:repeat(2,minmax(0,1fr))} .vsku{grid-column:1/-1} }
.imgorder{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.imgorder li{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px 8px}
.imgorder img, .imgadd img{width:56px; height:56px; object-fit:cover; border-radius:8px; background:var(--surface-2); display:block}
.fname{font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.iacts{display:flex; gap:4px}
.imgpool{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px}
.imgadd{appearance:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border:1px dashed var(--line-2); border-radius:12px; background:var(--surface); color:var(--ink-2); font:inherit; font-size:12px; cursor:pointer; min-width:0; overflow-wrap:anywhere}
.imgadd img{width:100%; height:auto; aspect-ratio:1}
.imgadd:hover:not(:disabled){border-color:var(--ink); color:var(--ink)}
.dcode{font:600 13px/1.3 var(--sd-mono); letter-spacing:.04em; background:var(--surface-2); padding:2px 7px; border-radius:6px}
.dcode.big{font-size:20px; padding:3px 10px}
.dtbl td > div .pill{margin-top:4px}
.dempty{display:flex; flex-direction:column; align-items:center; gap:4px; padding:36px 22px}
.dempty p{margin:0; max-width:46ch}
.dempty .dhead{font:400 34px/1.2 var(--sd-hand); color:var(--accent); margin-bottom:6px}
.dempty .btn{margin-top:14px}
.dcall{margin:0 0 14px}
.dform{margin-top:16px}
.dgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px}
.dseg{margin-left:0}
.dradio{display:flex; flex-wrap:wrap; gap:4px 16px}
.dradio .chk{margin-top:2px}
.upper{text-transform:uppercase; letter-spacing:.06em}
@media (max-width:520px){ .dgrid{grid-template-columns:minmax(0,1fr)} }
.vname .sd-scent{align-self:flex-start}

/* ---- batch 3 (10 Oct): order list filters + preview + pages, subscriptions, customer detail, address form, Home inbox ---- */
.ochips{margin-top:-2px}
.chip.mine{border-style:dashed}
.otbl td{overflow-wrap:break-word}
/* phone: a long email wraps instead of widening the table, so the Total column stays in view (11 Oct QA: clipped at 360) */
.otbl th.num,.otbl td.num{white-space:nowrap}
@media (max-width:520px){ .otbl .cem{overflow-wrap:anywhere} .otbl td,.otbl th{padding-left:7px; padding-right:7px} .otbl .xcol{width:30px} }
#snote .conn-note{margin:0 0 12px}
.ofpanel > h2 .link{font-weight:500}
.ofgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.ofsave{display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line)}
.ofsave .reasonbox{margin:0; flex:1 1 220px; width:auto; min-width:0}
.xcol{width:34px; padding-right:0 !important}
.xbtn{appearance:none; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); border-radius:8px; width:26px; height:26px; font-size:12px; line-height:1; cursor:pointer; padding:0}
.xbtn:hover{border-color:var(--ink); color:var(--ink)}
.tbl tr.prev td{background:var(--surface-2); cursor:default}
.oprev{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr) auto; gap:10px 18px; align-items:start; font-size:13px}
.oprev .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 4px}
.oprev-go{align-self:center}
.pager{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--line)}
.pager .sp{flex:1}
.pager .btn{padding:7px 14px; font-size:13px}
.pausebox{display:inline-flex; gap:6px; align-items:center}
.refundform.neutral{background:var(--surface-2)}
.addrgrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px}
.shipform{display:grid; gap:12px}
.shipaddr{border:0; margin:0; padding:0; min-width:0; display:grid; gap:10px}
.shipaddr[hidden]{display:none}
.shipaddr legend{font-weight:600; font-size:14px; padding:0; margin:0 0 8px; color:var(--ink)}
.shipform .chk{margin-top:0}
.shipform p{margin:0}
.shipform .actions{align-items:center; margin-top:0}
.addrextra{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.addrextra.one{grid-template-columns:minmax(0,320px)}
@media (max-width:520px){ .addrextra, .addrextra.one{grid-template-columns:minmax(0,1fr)} }
.addrgrid .vf:nth-child(1), .addrgrid .vf:nth-child(2), .addrgrid .vf:nth-child(3){grid-column:span 3}
.addrgrid .vf:nth-child(4){grid-column:span 3} .addrgrid .vf:nth-child(5){grid-column:span 1} .addrgrid .vf:nth-child(6){grid-column:span 2}
.vf input.up{text-transform:uppercase}
.cstats{margin:14px 0 4px}
.card .v.sm{font-size:17px; line-height:1.5}
.inbox li{padding:0}
.inbox .inrow{display:flex; gap:12px; align-items:center; padding:12px 18px; color:inherit; text-decoration:none; width:100%}
.inbox .inrow:hover{background:var(--surface-2)}
.inbox .intext{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.inbox .intext b{min-width:0}
.inbox .intext .muted{flex:none}
.inbox .ingo{white-space:nowrap}
.inn{flex:none; min-width:30px; height:30px; padding:0 8px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; background:var(--chip); color:var(--ink-2)}
.inn.bad{background:var(--risk-soft); color:var(--risk)} .inn.warn{background:var(--warn-soft); color:var(--warn)}
.inn.dot{min-width:30px; background:transparent; position:relative}
.inn.dot::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.lvl-bad .inn.dot::after{background:var(--risk)} .lvl-warn .inn.dot::after{background:var(--warn)}
.allclear{padding:16px 18px !important}
@media (max-width:860px){ .cards.home4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} .cards.home4 .card{padding:12px 14px} .cards.home4 .v{font-size:24px} }
@media (max-width:1100px){ .ofgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .oprev{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .oprev-go{grid-column:1 / -1; align-self:start} }
@media (max-width:860px){ .xcol{width:30px} .pager .muted:first-child{flex:1 1 100%} .pager .sp{display:none} }
@media (max-width:520px){ .otbl .cem, .otbl .hold-why{display:none} .ofgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .oprev{grid-template-columns:minmax(0,1fr)} .addrgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .addrgrid .vf:nth-child(n){grid-column:span 2} .addrgrid .vf:nth-child(5), .addrgrid .vf:nth-child(6){grid-column:span 1} .inbox .inrow{align-items:flex-start; flex-wrap:wrap; padding:12px 14px} .inbox .intext{flex:1 1 calc(100% - 50px)} .inbox .ingo{margin-left:42px} }

/* ---- Qlean → ScentDay (Email → Import / Qlean move, Customers → Qlean subscribers) ---- */
.ql-gate{margin:0 0 16px}
.ql-check{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 16px}
.ql-check li{display:flex; gap:8px; align-items:baseline; font-size:13.5px; min-width:0}
.ql-check li span{font-weight:700; width:1em; flex:none; text-align:center}
.ql-check li.ok span{color:var(--ok)} .ql-check li.no span{color:var(--risk)}
.ql-actions{display:flex; flex-wrap:wrap; gap:12px 24px; margin:6px 0 4px}
.ql-store{display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0}
.ql-store b{font-size:13.5px; margin-right:4px}
.ql-prods{border:0; margin:0 0 12px; padding:0; display:grid; gap:6px; min-width:0}
.ql-opt{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; min-width:0}
.ql-opt input{width:16px; height:16px; accent-color:var(--ink); flex:none}
.ql-row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:0 0 10px}
.ql-row .vf{display:grid; gap:5px; flex:1 1 200px; min-width:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.ql-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.ql-subj{margin:0 0 10px; font-size:14px; overflow-wrap:anywhere}
.ql-test{margin-top:14px}
@media (max-width:560px){ .ql-store .btn, .ql-btns .btn{flex:1 1 auto} }
.ql-sm{margin-top:6px} .ql-act{margin-top:6px}

/* batch 4: returns, jobs, redirects, order emails */
.refundform.calm{background:var(--surface-2)}
.refundform select.reasonbox{appearance:auto}
.retgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.retgrid .vf select{padding:8px 10px}
.status-list.rets li{padding:8px 0; align-items:center}
.status-list.rets .muted{flex:1 1 200px}
.status-list.jobs .jobrow{flex-wrap:nowrap; align-items:flex-start; justify-content:space-between}
.jobmain{min-width:0; flex:1 1 auto}
.status-list.jobs .rowacts{flex:none; flex-wrap:nowrap}
.jobmain .muted{display:block; margin-top:3px}
.status-list.jobs b{min-width:0}
.joberr{margin-top:6px; font:12.5px/1.45 var(--sd-mono); color:var(--risk); background:var(--risk-soft); border-radius:8px; padding:6px 9px; overflow-wrap:anywhere}
.jobsdone > summary{cursor:pointer; padding:14px 18px; font-size:15px; font-weight:600; list-style:none; display:flex; gap:10px; align-items:center}
.jobsdone > summary::-webkit-details-marker{display:none}
.jobsdone > summary::before{content:"▸"; color:var(--ink-3)} .jobsdone[open] > summary::before{content:"▾"}
.jobsdone[open] > summary{border-bottom:1px solid var(--line)}
.jobres{border-top:1px solid var(--line)}
.redform{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) auto; gap:10px; align-items:end}
.bulk{border-top:1px solid var(--line)}
.bulk > summary{cursor:pointer; padding:12px 18px; font-size:13.5px; font-weight:600; color:var(--accent-ink)}
.bulk textarea{font:13px/1.5 var(--sd-mono); resize:vertical}
.bulkres li{padding:8px 0}
.redtbl td code{font-size:12.5px}
.alertpick{display:flex; flex-wrap:wrap; gap:6px 18px}
.alertpick .chk{margin-top:0}
.pick.alertpick-s{max-width:170px}
@media (max-width:860px){ .redform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .redform .btn{justify-self:start} }
@media (max-width:520px){ .redform, .retgrid{grid-template-columns:minmax(0,1fr)} .status-list.jobs .jobrow{flex-wrap:wrap} .status-list.jobs .rowacts{justify-content:flex-start} .pick.alertpick-s{max-width:none; width:100%} }

/* Batch 5: shareable code links, creator code batches, cohorts */
.dcopy{margin-top:6px}
.dlink{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 6px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; min-width:0}
.dlink .mono{font-size:12.5px; overflow-wrap:anywhere; min-width:0; flex:1 1 200px}
.bcodes td{vertical-align:middle}
.bcodes .rowacts{justify-content:flex-end}
.cohort td.heat{background:color-mix(in srgb, var(--s1) calc(var(--v) * 0.4%), transparent); font-variant-numeric:tabular-nums}
.cohort td.heat.na{background:transparent}
.cohort th, .cohort td{white-space:nowrap}
.bcodes .dcode, .dtbl .dcode{white-space:nowrap}
@media (max-width:860px){ .tbl .show-sm.inl{display:inline; margin:0} }

.rowlink{all:unset; box-sizing:border-box; cursor:pointer; font-weight:600; color:var(--ink); border-radius:4px; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; max-width:100%; overflow-wrap:anywhere}
.rowlink:hover{text-decoration-color:currentColor}
.rowlink:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}
tr.row:focus-visible{outline:2px solid var(--accent-ink); outline-offset:-2px}
.scroll:focus-visible{outline:2px solid var(--accent-ink); outline-offset:-2px}
/* WCAG AA on the warning pill: the shared tool token (--warn #8a6420) is 4.45:1 on its own soft fill; this is 5.06:1.
   Admin only (the Lab and Metrics keep the shared value). Dark mode has its own, higher-specificity block in tool-tokens.css. */
html:root:root{--warn:#7F5C1D}
/* Customers view chips: counts stay on the chip's line; on a phone the four chips wrap as a row of their own */
.toolbar .seg.cviews{margin-left:0; flex-wrap:wrap; gap:8px; background:none; border:0; padding:0; box-shadow:none}
.toolbar .seg.cviews .chip{white-space:nowrap}

/* ---- batch 6: history + restore, costs, margins, renewal forecast ---- */
.histbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px; font-size:13.5px}
.hist{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
.hv{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface)}
.hvh{font-size:14px} .hvh .muted{font-size:12.5px; margin-top:2px}
.hdiff{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px}
.hdiff .hl{font-size:13px; font-weight:600; overflow-wrap:anywhere}
.hrow{display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; font-size:13px; margin-top:3px; align-items:baseline}
.hk{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.hval{min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; color:var(--ink-2)} .hval.now{color:var(--ink)}
.hact{margin-top:12px} .hact .callout{margin:0}
#histmsg:not(:empty){margin:12px 0 0}
.costlist .crow{padding:14px 18px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr); gap:10px 18px; align-items:end}
.costlist .crow:first-child{border-top:0}
.cnow{margin-top:6px; font-size:14px}
.costform{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px; align-items:end}
.costform .btn{margin-bottom:1px}
.chist{grid-column:1 / -1; font-size:13.5px} .chist summary{cursor:pointer; color:var(--ink-2); padding:4px 0}
.chist .tbl{margin-top:6px}
.rsec{display:flex; align-items:center; gap:10px; margin:22px 0 0; font-size:16px}
.tbl .small, .small{font-size:12px}
.fcnote{margin:0; padding-bottom:0} .fcards{padding-bottom:0}
@media (max-width:860px){ .costlist .crow{grid-template-columns:minmax(0,1fr); padding:14px} }
@media (max-width:520px){ .costform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .costform .btn{grid-column:1 / -1} .hrow{grid-template-columns:minmax(0,1fr)} .hk{display:block} }
/* Settings → Retention (retention Phase 1): one row per value, its "pending Milo's decision" state beside it */
.retset{display:grid}
.rsrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:10px 22px; padding:14px 18px; border-top:1px solid var(--line); align-items:start}
.rslab p{margin:4px 0 0; font-size:13px; line-height:1.45}
.rsval{display:grid; gap:8px; justify-items:start}
.rsin{display:inline-flex; align-items:center; min-width:150px; gap:6px; border:1px solid var(--field); border-radius:10px; background:var(--surface); padding:0 10px}
.rsin input{border:0; background:transparent; font:inherit; font-size:15px; width:90px; padding:8px 0; color:var(--ink); font-variant-numeric:tabular-nums}
.rsin input:focus{outline:none}
.rsin:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.rsin i{font-style:normal; color:var(--ink-3); font-size:13.5px}
.rsin input:disabled{color:var(--ink-2)}
.rsdec{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px}
.rsdec .chk{margin-top:0}
.retset .actions.pad{padding:14px 18px; border-top:1px solid var(--line)}
.rtbar{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between}
.rtbar .chiprow{display:flex; flex-wrap:wrap; gap:6px}
@media (max-width:640px){ .rsrow{grid-template-columns:1fr; padding:14px} .rtbar .pick{width:100%} }

/* batch 7: the FDA deadline pill wraps under the status on phones */
.aedl{margin-top:4px}.aedl .pill{white-space:normal}
.moform .mocharge{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:6px 0;display:grid;gap:6px}.moform .mocharge legend{padding:0 6px;font-weight:600}

/* ---- Orders P2 (site/orders-p2.js): tags, bulk bar, drawer tags + lifetime stats, Abandoned, slips + evidence pack (print) ---- */
.ckcol{width:38px; padding-right:0 !important}
.ckcol input, .p2vis input{width:18px; height:18px; margin:0; accent-color:var(--ink); cursor:pointer}
.ckcol input:focus-visible, .p2vis input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.p2tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.pill.p2tag{background:var(--surface-2); color:var(--ink); border:1px solid var(--line-2); font-weight:500; display:inline-flex; align-items:center; gap:2px}
.p2bulk{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; padding:10px 14px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow); position:sticky; top:8px; z-index:15}
.p2bulk > b{font-weight:600; margin-right:4px}
.p2tagset{display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center}
.p2tagin{font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:7px 12px; width:150px; min-width:0}
.p2tagin:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.p2full{flex:1 1 100%}
.p2full .callout{margin:4px 0 0}
#p2res .callout{margin:0 0 12px}
.p2out{margin:6px 0 4px; padding-left:18px}
.p2out li{margin:2px 0}
.p2dtags{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:14px 0 0}
.p2dtags .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-right:4px}
.p2x{appearance:none; border:0; background:none; font:inherit; font-size:15px; line-height:1; padding:0 2px 0 4px; cursor:pointer; color:var(--ink-2)}
.p2x:hover{color:var(--risk)} .p2x:focus-visible{outline:2px solid var(--accent); border-radius:4px}
.p2tagform{display:inline-flex; gap:6px; align-items:center}
.p2vis{display:flex; align-items:flex-start; margin:-4px 0 12px}
.p2life{margin-top:10px}
.p2pages{margin-top:16px}
.p2slip{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:0 0 16px; font-size:14px}
.p2slip-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.p2logo{height:26px; width:auto; display:block}
.p2brand{font-size:20px; font-weight:600; letter-spacing:-.01em}
.p2slip-no{text-align:right; display:grid}
.p2slip-no span{color:var(--ink-2); font-size:13px}
.p2slip-addr{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:14px; overflow-wrap:anywhere}
.p2slip-addr .k, .p2ev .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.p2slip-items tfoot td{border-bottom:0; padding-top:6px; padding-bottom:6px}
.p2slip-ret, .p2slip-note{margin:12px 0 0; font-size:13px; color:var(--ink-2)}
.p2list{margin:0; padding-left:18px; font-size:13.5px} .p2list li{margin:3px 0; overflow-wrap:anywhere}
.abtbl .cem{overflow-wrap:anywhere}
@media (max-width:520px){ .p2bulk{position:static} .p2tagin{flex:1 1 120px} .p2slip{padding:14px} .abtbl td, .abtbl th{padding:10px 8px} }
@media print{
  body.p2print .rail, body.p2print .topbar, body.p2print main.wrap, body.p2print #toast, body.p2print #gate, body.p2print .p2noprint, body.p2print #dr-close{display:none !important}
  body.p2print, body.p2print #drawer{background:none}
  body.p2print #drawer{position:static; display:block}
  body.p2print .drawer-box{width:auto; height:auto; overflow:visible; box-shadow:none; border:0; padding:0; background:none}
  body.p2print .p2slip{border:0; border-radius:0; padding:0; margin:0; break-after:page; page-break-after:always}
  body.p2print .p2slip:last-child{break-after:auto; page-break-after:auto}
  body.p2print .tbl th{background:none}
  body.p2print a{color:inherit}
}
/* ---- p2-c (11 Oct): order drawer parcels (each shipment + its tracking scans), policy versions, checkout marketing box. Tokens only. ---- */
.fu-count{font-weight:400; font-size:13px}
.fu-parcels{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:10px}
.fu-parcels > li{border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:grid; gap:4px; min-width:0; overflow-wrap:anywhere}
.fu-parcels > li.is-void{opacity:.72}
.fu-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.fu-items{font-size:14px}
.fu-scans summary{cursor:pointer; font-size:13.5px; color:var(--ink-3)}
.fu-scans summary:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:4px}
.fu-scans ul{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; font-size:13.5px}
/* ---- P2 catalog (site/catalog.js): Products tools, launch / box size / HS code per variant, CSV import, bulk edit ---- */
.cattools{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.vmore{grid-column:1/-1; border-top:1px dashed var(--line); padding-top:8px}
.vmore summary{cursor:pointer; font-size:13px; color:var(--ink-2); display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:4px 0}
.vmore summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.vmore-in{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px 12px; align-items:end; padding:8px 0 4px}
.vmore-in .pnote{grid-column:1/-1; margin:0}
.vf .up, .vorig input{text-transform:uppercase}
.cattbl td{vertical-align:top; font-size:13.5px}
.cattbl tr.bad td{background:var(--risk-soft)}
.caterr{color:var(--risk); font-weight:600; margin-top:2px}
.bulkform{display:grid; gap:12px}
.bkpick{border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:grid; gap:10px; max-height:300px; overflow:auto}
.bkpick legend{padding:0 6px; font-weight:600}
.bkgroup{display:grid; gap:4px}
.bkgroup .chk:not(:first-child){padding-left:24px}
.bkrow{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; gap:10px; align-items:end}
@media (max-width:640px){ .bkrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .bkrow .chk{grid-column:1/-1} .vmore-in{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ---- P2 f2 (site/ops-p2.js): purchase orders, ShipStation compare, discount report, delivery, win-back ---- */
.poin{display:block}
.potbl td{vertical-align:top}
.podone summary{cursor:pointer; color:var(--ink-2); padding:6px 0}
.poform .poline{display:grid; grid-template-columns:minmax(0,1fr) 110px 120px auto; gap:8px 10px; align-items:end; margin:6px 0}
.poform .poline .link{margin-bottom:10px}
.porecv{display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:10px; align-items:center}
@media (max-width:640px){ .poform .poline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .poform .poline .vf:first-child{grid-column:1 / -1} .porecv{grid-template-columns:minmax(0,1fr) 90px} }
.wbwin{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:8px 0 0; font-size:14px}
.wbwin input{width:84px; font:inherit; padding:6px 8px; border:1px solid var(--field); border-radius:10px; background:var(--surface); color:var(--ink)}
.wbscan{margin-top:8px} .wbscan p{margin:6px 0}
.wbruns{margin:4px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.wbmore summary{cursor:pointer; color:var(--ink-2); font-size:13.5px}

/* ---- P2 f2: Email → Delivery ---- */
.dlvdays{max-width:200px}
.dlvtbl td:first-child{word-break:break-word}
/* ---- P2 f1: customer tags, possible duplicates, merge, CSV; subscription address / date / send now / one-off items (site/cust-p2.js) ---- */
.toolbar #ctag{flex:0 1 200px; border-radius:999px; padding:9px 14px}
.cp2-tools{display:inline-flex; gap:8px; flex-wrap:wrap}
.cp2-tags{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0}
.cp2-tags .k{font-size:13px; color:var(--ink-3); margin-right:4px}
.cp2-group{margin:0 0 12px}
.cp2-group .pad{display:grid; gap:10px}
.cp2-person{padding:8px 0; border-top:1px solid var(--line); min-width:0; overflow-wrap:anywhere}
.cp2-group .actions .btn{max-width:100%; overflow-wrap:anywhere; white-space:normal; text-align:left}
.cp2-moves{margin:8px 0; padding-left:18px; display:grid; gap:4px}
.cp2-subrow{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin:0 0 10px}
.cp2-subrow .vf{flex:1 1 220px; min-width:0}
.cp2-subrow .cp2-qty{flex:0 0 84px}
.cp2-subrow input[type=date], .cp2-subrow select{width:100%; min-width:0}
@media (max-width:520px){ .toolbar #ctag{flex:1 1 100%} .cp2-tools{width:100%} .cp2-tools .btn{flex:1 1 auto} .cp2-subrow .btn{flex:1 1 100%} }
#cp2-mgo{display:grid; gap:10px; margin-top:12px}
#cp2-mgo .actions{margin:0}
/* ---- P2 group e: Content → Site blocks and Signup popup (site/site-blocks.js) ---------------------------------------- */
.sb-intro{margin:14px 0}
.sb-intro code,.sb-hint code{font-size:12.5px;background:var(--surface-2);border-radius:6px;padding:1px 5px}
.sb-where{margin:0 0 6px}
.sb-lines{border:0;padding:0;margin:12px 0 0;display:grid;gap:6px;min-width:0}
.sb-lines legend{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:0;margin:0 0 6px}
.sb-line{width:100%;min-width:0;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:10px;padding:8px 10px}
.sb-line:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:12px 0 0}
.sb-grid .vf textarea,.sb-pop .vf textarea{text-transform:none;letter-spacing:0;font-weight:400}
.sb-hint{display:block;font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-3);margin:2px 0 0}
.sb-preview{margin:12px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.sb-def{margin:4px 0 0;font-size:12.5px;overflow-wrap:anywhere}
.sb-pop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:14px}
.sb-pop .vf{margin-top:12px}
.sb-card{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:20px 18px 14px}
.sb-card-x{position:absolute;top:8px;right:12px;font-size:20px;color:var(--ink-3)}
.sb-card-h{display:block;font-size:18px;margin:0 28px 6px 0;overflow-wrap:anywhere}
.sb-card-b{margin:0 0 4px;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.sb-card-f{display:flex;gap:6px;margin:10px 0 6px}
.sb-card-in{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:999px;padding:7px 12px;font-size:13px;color:var(--ink-3);background:var(--surface)}
.sb-card-btn{border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;background:var(--ink);color:var(--surface);overflow-wrap:anywhere}
.sb-card-n{margin:0;font-size:11.5px;color:var(--ink-3)}
@media (max-width:900px){ .sb-pop{grid-template-columns:1fr} }
.sb-root > .chk,.sb-root .pad > .chk{margin:0 0 12px}
/* ---- P2 d (11 Oct): Content → Articles, Content → SEO health, the SEO block (site/articles.js). Tokens only. ---- */
.seoline{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:-6px 0 14px; font-size:12.5px; color:var(--ink-2)}
.seoline code, .seonote code{font-family:var(--sd-mono); font-size:12px; background:var(--chip); padding:1px 6px; border-radius:6px}
.seotype{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-3)}
.seolen{display:inline-flex; align-items:center; gap:6px}
.seocount{font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; font-weight:500}
.seonote{padding:12px 18px 0; margin:0}
.artbar{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.artbar .sp, .artbh .sp{flex:1}
.artgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:18px; align-items:start}
.artmain, .artside{min-width:0}
.artrow{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.artrow > .grow{flex:1 1 200px; min-width:0}
.artrow > .vf{flex:0 1 200px}
.slugrow{display:flex; align-items:center; gap:4px; min-width:0}
.slugrow .muted{white-space:nowrap}
.slugrow input{flex:1; min-width:0}
.artblocks{list-style:none; margin:0; padding:0}
.artblock{border-top:1px solid var(--line); padding:14px 18px}
.artblock:first-child{border-top:0}
.artbh{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px; font-size:13.5px}
.artblock .field:last-child{margin-bottom:0}
.artadd{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; border-top:1px solid var(--line)}
.artadd .vf{flex:0 1 220px}
.artthumb{width:64px; height:64px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line); flex:none; background:var(--surface-2)}
.artstatus{border:0; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:2px}
.artsched{margin-top:12px}
.artside .serp{margin-bottom:10px}
.artside .seoline{margin:0 0 14px}
.artsave .msg b{font-weight:600}
.arttbl .artopen{font-size:14px; font-weight:600; text-align:left}
.arttbl .muted{font-size:12.5px; overflow-wrap:anywhere}
.seochecks{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.seolist{list-style:none; margin:0; padding:0}
.seopage{border-top:1px solid var(--line); padding:14px 18px}
.seoph{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.seoph b{overflow-wrap:anywhere}
.seometa{display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0 2px; font-size:13px; color:var(--ink-2)}
.seometa span{display:inline-flex; align-items:center; gap:6px}
.seot{overflow-wrap:anywhere; margin:0 0 6px}
.seoissues{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2)}
.seoissues li{overflow-wrap:anywhere}
.seoissues b{color:var(--ink); font-weight:600}
@media (max-width:1100px){ .artgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .artblock, .seopage{padding:12px 14px} .artrow > .vf, .artadd .vf{flex:1 1 100%} .artadd .btn{flex:1 1 100%} .slugrow{flex-wrap:wrap} .slugrow input{flex:1 1 100%} }