/* 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{display:none}
  .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"]{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(5,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(3,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(3,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}
#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}
.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} }