/* IBM Plex, served from Trackr itself (static/fonts, SIL OFL: OFL-IBMPlex.txt), Latin only. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexMono-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-400i.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/IBMPlexMono-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/IBMPlexSans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ================================================================
   design tokens
   ================================================================ */
:root{
  /* "Ledger": near-black, neutral surfaces with hairline rules, and one
     accent used only where it means something (the current page, the main
     action, focus). Status colors carry the rest: grey ordered, blue
     shipped, green delivered, red cancelled, amber partial. */
  --bg:#09090B; --bg-2:#0D0D10; --card:#111114; --card-2:#17171B; --card-3:#222228;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --text:#EDEDEF; --text-2:#A3A3AC; --text-3:#6E6E78;
  --accent:#8B7CFF; --accent-2:#7C6DF2; --accent-ink:#FFFFFF; --accent-soft:rgba(139,124,255,.14);
  --glow:transparent; --glow-2:transparent;
  --grad:var(--accent);
  --grad-btn:var(--accent);
  --ord:#8B8B96; --ship:#5B9CF6; --deliv:#3DD68C; --canc:#F2555A; --partial:#F5B83D;
  --pos:#3DD68C; --neg:#F2555A;
  --shadow:none;
  --shadow-pop:0 24px 64px -16px rgba(0,0,0,.7), 0 0 0 1px var(--line-2);
  --r-lg:10px; --r:8px; --r-sm:6px;
  --side:232px;
  --f-display:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* legacy names still used by the success-card and older panels */
  --ink:var(--text); --ink-soft:var(--text-2); --ink-faint:var(--text-3);
  --paper:var(--bg-2); --surface:var(--card); --rule:var(--line-2);
  --live:var(--deliv); --dead:var(--canc);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F6F6F4; --bg-2:#EFEFEC; --card:#FFFFFF; --card-2:#F8F8F6; --card-3:#ECECE8;
  --line:rgba(10,10,15,.08); --line-2:rgba(10,10,15,.14);
  --text:#0B0B0F; --text-2:#4B4B55; --text-3:#8A8A94;
  --accent:#5B45F5; --accent-2:#4F3DE0; --accent-ink:#FFFFFF; --accent-soft:rgba(91,69,245,.09);
  --glow:transparent; --glow-2:transparent; --grad:var(--accent); --grad-btn:var(--accent);
  --ord:#8B8B96; --ship:#2563EB; --deliv:#0E9F6E; --canc:#DC2626; --partial:#C77700;
  --pos:#0E8A5F; --neg:#C81E1E;
  --shadow:none;
  --shadow-pop:0 24px 64px -20px rgba(10,10,15,.28), 0 0 0 1px var(--line-2);
  color-scheme:light;
}

/* ================================================================
   base
   ================================================================ */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:14.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:.9em;letter-spacing:0}
h1,h2,h3{margin:0;letter-spacing:-.02em;font-family:var(--f-display)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
::selection{background:var(--accent-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:15px;height:15px}
svg.i.lg{width:22px;height:22px}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{width:32px;height:32px;flex:none}
.brand h1{font-weight:800;font-size:20px;letter-spacing:-.03em}
.m-bg{fill:var(--text)} .m-line{fill:var(--bg)} .m-partial{fill:var(--accent)}

/* ================================================================
   app shell: sidebar (desktop) / top bar + tab bar (phone)
   ================================================================ */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:20px 14px 16px;
  background:color-mix(in srgb,var(--bg-2) 82%,transparent);border-right:1px solid var(--line);
  backdrop-filter:blur(12px);overflow-y:auto;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.side .brand{padding:2px 8px 6px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .grp{font-family:var(--f-mono);font-size:11.5px;font-weight:500;text-transform:none;color:var(--text-3);
  padding:14px 12px 6px}
.nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;
  border-radius:var(--r);padding:9px 12px;color:var(--text-2);cursor:pointer;font-weight:500;min-height:40px;
  transition:background .15s,color .15s}
.nav button:hover{background:var(--card-2);color:var(--text)}
.nav button[aria-current="page"]{background:var(--card-2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.nav button[aria-current="page"] svg{color:var(--accent)}
.nav button .lbl{flex:1;min-width:0}
.badge{font-size:11px;font-weight:700;min-width:20px;padding:1px 7px;border-radius:999px;
  background:var(--partial);color:#1A1204;text-align:center;line-height:18px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line);font-size:13.5px;min-width:0}
.who img{width:30px;height:30px;border-radius:50%;flex:none}
.who .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.side-links{display:flex;gap:10px;padding:0 10px;font-size:12px;color:var(--text-3)}
.side-links a{color:var(--text-3);text-decoration:none}
.side-links a:hover{color:var(--text)}
.side-links .app-ver{margin-left:auto;font-family:var(--f-mono);font-size:11px;opacity:.8}
.sheet-ver{margin:10px 0 0;text-align:center;font-family:var(--f-mono);font-size:11px;color:var(--text-3)}
.iconbtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);color:var(--text-2);cursor:pointer;flex:none;transition:background .15s,color .15s}
.iconbtn:hover{color:var(--text);background:var(--card-2)}

main{min-width:0;padding:28px clamp(16px,3vw,40px) 96px}
.wrap{max-width:1640px;margin:0 auto}
.topbar,.tabbar,.fab{display:none}

/* icon rail on small laptops/tablets */
@media (max-width:1180px) and (min-width:861px){
  :root{--side:76px}
  .side{padding:18px 10px;align-items:center}
  .side .brand h1,.nav .grp,.nav button .lbl,.who .nm,.side-links{display:none}
  .nav button{justify-content:center;padding:10px;width:48px;position:relative}
  .nav .badge{position:absolute;top:2px;right:0;min-width:16px;padding:0 4px;font-size:11px;line-height:16px}
  .who{padding:6px;justify-content:center;border:0;background:none;flex-direction:column;gap:8px}
  .side-foot{align-items:center;width:100%}
}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:30;
    padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:color-mix(in srgb,var(--bg) 80%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .topbar .brand h1{font-size:18px}
  .topbar img{width:30px;height:30px;border-radius:50%}
  main{padding:16px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--bg-2) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:var(--text-3);
    font-size:11px;font-weight:600;padding:6px 0;border-radius:var(--r);cursor:pointer;position:relative}
  .tabbar button[aria-current="page"]{color:var(--text)}
  .tabbar button[aria-current="page"] svg{color:var(--accent)}
  .tabbar .dotn{position:absolute;top:4px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--partial)}
  .fab{display:grid;place-items:center;position:fixed;right:14px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:35;
    width:42px;height:42px;border-radius:var(--r);border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;
    box-shadow:0 10px 24px -8px var(--accent)}
  .fab .i{width:18px;height:18px}
}

/* ---------- sheet (phone "More" menu) ---------- */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(3,5,8,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end}
.sheet{width:100%;background:var(--card);border-top-left-radius:22px;border-top-right-radius:22px;border:1px solid var(--line-2);
  padding:10px 12px calc(16px + env(safe-area-inset-bottom,0px));animation:up .22s ease-out}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:4px auto 12px}
.sheet .nav button{min-height:48px;font-size:15px}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* ================================================================
   page header + controls
   ================================================================ */
.view-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 18px;margin-bottom:22px}
.view-head h2{font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.035em}
.lede{color:var(--text-2);margin:6px 0 0;max-width:72ch;font-size:14px}
.head-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:860px){
  .view-head h2{font-size:24px} .view-head{margin-bottom:16px}
  .view-head>*{min-width:0;max-width:100%}
  .head-actions{width:100%}
  /* the top bar has Sync and the floating + button adds orders */
  .view-head .btn[data-action="sync"],.dash-actions [data-action="sync"],.dash-actions [data-action="add-order"]{display:none}
  #range-seg{flex:1 1 100%}
  .dash-actions{width:100%}
  .statement{max-width:none}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;padding:0 16px;
  min-height:40px;border-radius:var(--r);border:1px solid transparent;background:var(--accent);color:var(--accent-ink);
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .05s,background .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn.ghost{background:var(--card);border-color:var(--line-2);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:var(--card-2)}
.btn.small{min-height:34px;padding:0 12px;font-size:13px;border-radius:var(--r)}
.btn.danger{background:transparent;border-color:color-mix(in srgb,var(--neg) 45%,transparent);color:var(--neg);box-shadow:none}
.btn.danger:hover{background:color-mix(in srgb,var(--neg) 10%,transparent)}
.btn.discord{background:#5865F2;color:#fff}
.btn.err{color:var(--neg)}
.link{background:none;border:0;padding:0;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover{color:var(--text)}
.err{color:var(--neg)} .ok{color:var(--pos)} .fine{font-size:13px;color:var(--text-3)}

/* tabs read like ledger column heads: mono caps, the current one underlined in amber */
.seg{display:inline-flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%;border-bottom:1px solid var(--line)}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:none;color:var(--text-3);font-family:var(--f-mono);font-weight:500;font-size:12px;
  text-transform:none;padding:8px 10px 9px;cursor:pointer;white-space:nowrap;min-height:34px;box-shadow:inset 0 -2px 0 transparent;
  transition:color .15s,box-shadow .15s}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.inv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:4px 0 12px}
.inv-bar .search{flex:0 1 320px;min-width:0}
.seg .cnt{color:var(--text-3);margin-left:2px}
@media (max-width:640px){ .inv-bar .search{flex:1 1 100%} }

.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:0 12px;min-height:32px;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);border-radius:8px;cursor:pointer;
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.chip:hover{color:var(--text);border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--text)}
.chip:disabled{opacity:.5;cursor:default}
.chip .ct{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--text-3);background:var(--card-3);padding:0 6px;border-radius:5px;line-height:18px}
.chip[aria-pressed="true"] .ct{color:var(--text);background:color-mix(in srgb,var(--accent) 30%,transparent)}
.chip .sd{width:7px;height:7px;border-radius:50%}

select,.input{background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 11px;min-height:40px;min-width:0;
  color:var(--text)}
select:focus,.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search{display:flex;align-items:center;gap:9px;background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:0 12px;min-height:40px;color:var(--text-3);flex:1 1 280px;min-width:0}
.search input{border:0;background:none;outline:none;flex:1;min-width:0;padding:9px 0;color:var(--text)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.scroll-x{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;min-width:0}
.scroll-x::-webkit-scrollbar{display:none}
.tag{font-family:var(--f-mono);font-size:11.5px;font-weight:500;text-transform:none;color:var(--text-3)}

/* ================================================================
   cards + dashboard
   ================================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 0}
.card-h h3{font-size:15px;font-weight:600}
.card-b{padding:16px 18px 18px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(12,minmax(0,1fr));margin-bottom:14px}
.s12{grid-column:span 12}.s8{grid-column:span 8}.s6{grid-column:span 6}.s4{grid-column:span 4}.s3{grid-column:span 3}
@media (max-width:1180px){ .s8,.s4{grid-column:span 12} .s3{grid-column:span 6} }
@media (max-width:860px){ .s6{grid-column:span 12} .grid{gap:12px;margin-bottom:12px} }
@media (max-width:420px){ .s3{grid-column:span 12} }

/* ---- dashboard: the ledger ---- */
.dash-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 28px;margin-bottom:20px}
.kicker{font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kicker .bar{width:18px;height:5px;border-radius:3px;background:var(--accent)}
.statement{font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.12;letter-spacing:-.035em;margin-top:12px;max-width:36ch}
.statement .hl{color:var(--accent);font-weight:800;white-space:nowrap}
.statement .dim{color:var(--text-3)}
.statement-sub{margin:14px 0 0;color:var(--text-2);font-size:15px;max-width:74ch}
.statement-sub b{color:var(--text);font-weight:600;font-family:var(--f-mono);font-size:.95em}
.dash-top>div:first-child{flex:1 1 560px}
.dash-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.dash-controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:18px}
.dash-controls .row{gap:8px}
.lp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px 20px;min-width:0;position:relative}
.lp-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.lp-h h3{font-family:var(--f-mono);font-size:11.5px;font-weight:500;text-transform:none;color:var(--text-2)}
.lp-h .fine{font-family:var(--f-mono);font-size:11.5px}
.board{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(290px,1fr);gap:14px;margin-bottom:14px}
.board.two{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:1100px){ .board,.board.two{grid-template-columns:minmax(0,1fr)} }

/* headline numbers */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
@media (max-width:1100px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .tiles{gap:10px} }
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;min-width:0}
.tile .k{font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3)}
.tile .v{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.04em;line-height:1.1;margin-top:8px;white-space:nowrap}
.tile .v small{font-size:.55em;color:var(--text-3);font-weight:600;letter-spacing:0;margin-left:2px}
.tile .v.hl{color:var(--accent)} .tile .v.neg{color:var(--canc)}
.tile .s{font-size:12.5px;color:var(--text-3);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .meter{margin-top:12px}

/* four squares per order: 1 grey ordered, 2 blue shipped, 3 blue out for delivery,
   4 green delivered, 4 red cancelled */
.m4{display:inline-grid;grid-template-columns:repeat(4,12px);gap:3px;flex:none}
.m4 i{width:12px;height:12px;border-radius:3px;background:var(--card-3)}
.m4.big{grid-template-columns:repeat(4,16px);gap:4px}
.m4.big i{width:16px;height:16px;border-radius:4px}
.m4.ordered i:nth-child(-n+1){background:var(--ord)}
.m4.shipped i:nth-child(-n+2){background:var(--ship)}
.m4.out i:nth-child(-n+3){background:var(--ship)}
.m4.delivered i{background:var(--deliv)}
.m4.cancelled i{background:var(--canc)}

/* where your orders stand: one tile per stage, tap to filter the list */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:860px){ .stages{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stages button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card-2);cursor:pointer;color:inherit;min-width:0;transition:border-color .15s}
.stages button:hover{border-color:var(--line-2)}
.stages button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stages .n{font-family:var(--f-display);font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:1}
.stages .l{font-weight:600;font-size:14px}
.stages .m{font-size:12.5px;color:var(--text-3)}

/* kept spend over time */
.lchart{position:relative;height:220px}
.lchart svg{display:block;width:100%;height:100%;overflow:visible}
.laxis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--text-3);margin-top:10px;padding-left:52px}
.lchart .yl{position:absolute;left:0;font-family:var(--f-mono);font-size:11px;color:var(--text-3);transform:translateY(-50%)}
.ltip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--card-3);border:1px solid var(--line-2);border-radius:var(--r);
  padding:7px 10px;font-size:12px;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-pop);z-index:3;color:var(--text-2)}
.ltip b{display:block;font-family:var(--f-mono);font-weight:500;color:var(--text);font-size:12.5px}
.ltip .c{color:var(--canc)}

/* retailer shelf */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shelf button{display:flex;flex-direction:column;gap:9px;align-items:flex-start;text-align:left;padding:14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card-2);cursor:pointer;color:inherit;min-width:0;transition:border-color .15s,transform .15s}
.shelf button:hover{border-color:var(--line-2);transform:translateY(-2px)}
.shelf button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.shelf .rav{width:38px;height:38px;border-radius:var(--r);font-size:13px}
.shelf .n{font-weight:600;font-size:13.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf .a{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.03em;line-height:1}
.shelf .m{font-family:var(--f-mono);font-size:11px;color:var(--text-3)}
.shelf .st{height:4px;width:100%;background:var(--card-3);border-radius:4px;overflow:hidden}
.shelf .st i{display:block;height:100%;background:var(--accent)}

.pbar{display:flex;height:6px;border-radius:6px;overflow:hidden;background:var(--card-3);gap:2px}
.pbar i{display:block;height:100%;border-radius:2px}
.pbar.big{height:10px;border-radius:8px}
.p-delivered{background:var(--deliv)} .p-shipped{background:var(--ship)}
.p-ordered{background:var(--ord)} .p-cancelled{background:var(--canc)}

.kpi{padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.kpi .top{display:flex;align-items:center;justify-content:space-between}
.kpi .k{font-family:var(--f-mono);font-size:11.5px;color:var(--text-3);font-weight:500;text-transform:none}
.kpi .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.kpi .v{font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.kpi .v small{font-size:.55em;color:var(--text-3);font-weight:600;letter-spacing:0}
.kpi .s{font-size:12.5px;color:var(--text-3);margin-top:-4px}
.kpi .spark{height:34px;display:flex;align-items:flex-end;gap:3px}
.kpi .spark i{flex:1;border-radius:2px;background:var(--accent);min-height:2px}
.kpi .spark i.z{background:var(--card-3)}
.tone-accent .ic{background:var(--accent-soft);color:var(--accent)}
.tone-ship .ic{background:color-mix(in srgb,var(--ship) 15%,transparent);color:var(--ship)}
.tone-deliv .ic{background:color-mix(in srgb,var(--deliv) 15%,transparent);color:var(--deliv)}
.tone-canc .ic{background:color-mix(in srgb,var(--canc) 15%,transparent);color:var(--canc)}
.tone-canc .v{color:var(--canc)}
.tone-pos .ic{background:color-mix(in srgb,var(--pos) 15%,transparent);color:var(--pos)}
.meter{height:6px;border-radius:6px;background:var(--card-3);overflow:hidden}
.meter i{display:block;height:100%;border-radius:6px}

.rav.logo,.thumb.logo{background:#fff;border:1px solid var(--line)}
.rav img{width:78%;height:78%;object-fit:contain}
.thumb.logo img{width:62%;height:62%;object-fit:contain}
.rav{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex:none;overflow:hidden;
  letter-spacing:-.02em}

.transit{display:flex;flex-direction:column;gap:2px}
.transit button{display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:var(--r);padding:8px;margin:0 -8px;
  text-align:left;cursor:pointer;color:inherit;min-width:0}
.transit button:hover{background:var(--card-2)}
.transit .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.transit .u{font-weight:600;color:var(--ship);display:flex;align-items:center;gap:6px;font-size:13px}
.thumb{width:38px;height:38px;border-radius:var(--r);object-fit:cover;flex:none;background:var(--card-3);display:grid;place-items:center;
  color:var(--text-3);font-size:12px;font-weight:700;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.sm{width:32px;height:32px;border-radius:var(--r)}
.thumb.lg{width:52px;height:52px;border-radius:var(--r)}

.filters-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-6px 0 18px}
.omit-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:280px;max-width:min(420px,80vw);max-height:280px;overflow:auto;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:8px;box-shadow:var(--shadow-pop)}
.omit-pop label{display:flex;gap:9px;align-items:flex-start;padding:7px 8px;border-radius:var(--r);cursor:pointer;font-size:13px;color:var(--text-2)}
.omit-pop label:hover{background:var(--card-2);color:var(--text)}

/* ================================================================
   orders table (one DOM: table on desktop, cards on phone)
   ================================================================ */
.orders-card{overflow:visible}
.otools{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.otools .line{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.otools .grp{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.otools .grp.grow{flex:1 1 360px}
.otools .search{flex:none}
.ohead,.orow>summary{display:grid;align-items:center;gap:12px;
  grid-template-columns:minmax(220px,2.6fr) minmax(118px,1fr) minmax(140px,1.15fr) 72px 104px minmax(112px,.9fr) minmax(128px,1fr) 36px 96px minmax(150px,1.2fr) 20px;
  padding:0 18px}
.oc-email{min-width:0;font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-eta{font-size:13px;color:var(--text-2);white-space:nowrap}
.oc-eta.done{color:var(--deliv)} .oc-eta.muted{color:var(--text-3)} .oc-eta.moved{color:var(--partial);font-weight:600}
.oc-ret{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;color:var(--text-2)}
.oc-ret span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-ret .rav{width:18px;height:18px;border-radius:5px;font-size:8.5px;flex:none}
.ohead span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ohead{font-family:var(--f-mono);font-size:11.5px;font-weight:500;text-transform:none;color:var(--text-3);height:40px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.ohead .r,.orow .r{text-align:right}
.orow{border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 var(--spine,transparent)}
.sp-ordered{--spine:var(--ord)} .sp-shipped{--spine:var(--ship)} .sp-delivered{--spine:var(--deliv)} .sp-cancelled{--spine:var(--canc)}
.orow:last-child{border-bottom:0}
.orow>summary{list-style:none;cursor:pointer;min-height:64px;padding-top:10px;padding-bottom:10px;transition:background .12s}
.orow>summary::-webkit-details-marker{display:none}
.orow>summary:hover,.orow[open]>summary{background:var(--card-2)}
.oc-prod{display:flex;align-items:center;gap:12px;min-width:0}
.oc-prod .t{min-width:0}
.oc-prod .nm{font-weight:600;font-family:var(--f-display);font-size:15px;letter-spacing:-.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.oc-prod .more{font-size:12px;color:var(--text-3)}
.oc-ord{min-width:0}
.oc-ord .no{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.oc-ord .rt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-top:2px}
.oc-ord .rt .rav{width:16px;height:16px;border-radius:5px;font-size:8.5px}
.oc-date{color:var(--text-2);font-size:13px;white-space:nowrap}
.oc-stat{display:flex;flex-direction:column;gap:6px;min-width:0}
.spill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap}
.spill .d{width:7px;height:7px;border-radius:2px;background:currentColor}
.spill .cut{color:var(--canc);font-weight:500}
.oc-m{display:flex;align-items:center;gap:10px;min-width:0}
.st-placed{color:var(--ord)} .st-partially_shipped,.st-shipped{color:var(--ship)} .st-delivered{color:var(--deliv)}
.st-partially_cancelled{color:var(--partial)} .st-cancelled{color:var(--canc)} .st-unknown{color:var(--text-3)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-width:150px}
.steps i{height:4px;border-radius:4px;background:var(--card-3)}
.steps.s1 i:nth-child(-n+1),.steps.s2 i:nth-child(-n+2),.steps.s3 i:nth-child(-n+3){background:currentColor}
.oc-qty{font-weight:600}
.oc-amt{font-family:var(--f-mono);font-weight:500}
.oc-amt .x{display:block;color:var(--canc);font-size:11.5px;font-weight:500}
.oc-ship{min-width:0;font-size:13px;color:var(--text-2)}
.oc-ship .a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-ship .a b{color:var(--text);font-weight:600}
.oc-ship .e{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{color:var(--text-3);transition:transform .2s}
.orow[open] .chev{transform:rotate(180deg)}
.flag{font-size:11px;font-weight:600;color:var(--partial);border:1px dashed currentColor;padding:0 7px;border-radius:999px;margin-left:6px;vertical-align:1px}
.mtag{font-size:11.5px;font-weight:700;text-transform:none;color:var(--accent);background:var(--accent-soft);
  padding:1px 7px;border-radius:6px;margin-left:6px;vertical-align:1px}
.odetail{padding:6px 18px 18px;background:var(--card-2);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px}
.odetail .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 14px}
.odetail .box.meta{padding:14px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.odetail .box.meta .k{font-size:11px;font-weight:600;text-transform:none;color:var(--text-3)}
.odetail .box.meta .vv{color:var(--text);word-break:break-word}
.irow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.irow:last-child{border-bottom:0}
.irow .t{flex:1;min-width:0}
.irow .nm{font-weight:500}
.irow .note{font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.irow .note a{color:var(--ship)}
.irow .am{font-weight:600;white-space:nowrap}
.irow.cancelled .nm,.irow.cancelled .am{text-decoration:line-through;text-decoration-color:var(--canc);color:var(--text-3)}
.omore{display:flex;justify-content:center;padding:14px}
.showing{font-size:12.5px;color:var(--text-3)}
.empty{padding:36px 20px;text-align:center;color:var(--text-2)}
.empty .ei{width:48px;height:48px;border-radius:var(--r-lg);background:var(--card-2);display:grid;place-items:center;margin:0 auto 12px;color:var(--text-3)}

@media (max-width:1640px){
  .ohead,.orow>summary{grid-template-columns:minmax(200px,2.6fr) minmax(112px,1fr) minmax(130px,1.1fr) 70px 100px minmax(104px,.9fr) minmax(124px,1fr) 34px 92px 20px}
  .oc-ship,.ohead .h-ship{display:none}
}
@media (max-width:1460px){   /* below this the 10-column row needs more room than the card has */
  .ohead,.orow>summary{grid-template-columns:minmax(200px,3fr) minmax(130px,1.2fr) 70px 100px minmax(124px,1fr) 34px 92px 20px}
  .oc-email,.ohead .h-email,.oc-ret,.ohead .h-ret{display:none}
  .oc-ord .rt{display:flex}
}
@media (max-width:980px){
  .ohead{display:none}
  .orow>summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"prod amt" "stat stat" "ord date";
    gap:10px 12px;padding:14px 16px}
  .oc-prod{grid-area:prod} .oc-amt{grid-area:amt} .oc-stat{grid-area:stat;flex-direction:row;align-items:center;justify-content:space-between}
  .oc-ord{grid-area:ord;display:flex;align-items:center;gap:8px;min-width:0}
  .oc-ord .rt{margin:0}
  .oc-date{grid-area:date;text-align:right;font-size:12.5px;color:var(--text-3)}
  .oc-qty,.chev,.oc-eta{display:none}
  .odetail{grid-template-columns:1fr;padding:4px 12px 14px}
  .otools{padding:14px}
}

/* ================================================================
   inventory
   ================================================================ */
.ihead,.iprod{display:grid;align-items:center;gap:14px;padding:0 18px;
  grid-template-columns:minmax(170px,2.6fr) 56px 56px minmax(104px,1fr) 84px 88px 92px 158px}
.ihead{font-family:var(--f-mono);font-size:11.5px;font-weight:500;text-transform:none;color:var(--text-3);height:40px;border-bottom:1px solid var(--line)}
.ihead .r,.iprod .r{text-align:right}
.iprod{min-height:70px;padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.iprod:last-child{border-bottom:0}
.iprod:hover{background:var(--card-2)}
.iprod .p{display:flex;align-items:center;gap:12px;min-width:0}
.iprod .p .nm{font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.iprod .p .mt{font-size:12px;color:var(--text-3);display:flex;gap:8px;flex-wrap:wrap}
.iprod .v{font-weight:600}
.iprod .act{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.iprod .act .iconbtn{width:32px;height:32px}
.iprod .edited{font-size:11.5px;font-weight:700;text-transform:none;color:var(--accent);margin-left:6px}
.inv-hidden{padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)}
.inv-hidden summary{cursor:pointer;font-weight:600}
.inv-hidden .hrow{display:flex;align-items:center;gap:10px;padding:8px 0}
.inv-hidden .hrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iprod .left{display:flex;flex-direction:column;gap:6px}
.iprod .left .l{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-2)}
.iprod .left .l b{color:var(--text)}
.pnl-pos{color:var(--pos)} .pnl-neg{color:var(--neg)} .muted{color:var(--text-3)}
.lbl-m{display:none}
@media (max-width:1180px){
  .ihead{display:none}
  .iprod{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"p p p p" "a b c d" "e e f f";gap:12px 10px;padding:16px}
  .iprod .p{grid-area:p} .iprod .c1{grid-area:a} .iprod .c2{grid-area:b} .iprod .c4{grid-area:c} .iprod .c5{grid-area:d}
  .iprod .left{grid-area:e;align-self:center} .iprod .act{grid-area:f;text-align:right}
  .iprod .c6{display:none}
  .iprod .r{text-align:left}
  .lbl-m{display:block;font-size:11.5px;font-weight:600;text-transform:none;color:var(--text-3);margin-bottom:2px}
}
.sale{display:grid;grid-template-columns:92px minmax(0,1fr) auto auto 36px;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.sale:last-child{border-bottom:0}
.sale .d{font-size:12.5px;color:var(--text-3)}
.sale .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sale .sub{font-size:12px;color:var(--text-3)}
.sale .amt{text-align:right;font-weight:600}
.sale .amt small{display:block;font-size:12px;font-weight:600}
@media (max-width:640px){ .sale{grid-template-columns:minmax(0,1fr) auto 32px;padding:12px 14px} .sale .d{display:none} .sale .amt.rev{display:none} }
/* Sales › Where / who: one row per place, its sales underneath */
.where-g{border-bottom:1px solid var(--line)}
.where-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 18px;cursor:pointer;list-style:none}
.where-h::-webkit-details-marker{display:none}
.where-h .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where-h .nm::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;border-right:1.5px solid var(--text-3);
  border-bottom:1.5px solid var(--text-3);transform:rotate(-45deg);transition:transform .15s}
.where-g[open] .where-h .nm::before{transform:rotate(45deg)}
.where-h .sub{font-size:12px;color:var(--text-3);padding-left:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where-h .amt{text-align:right;font-weight:600}
.where-h .amt small{display:block;font-size:12px;font-weight:600}
.where-s{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 18px 8px 32px;font-size:13px;background:var(--card-2)}
.where-s .d,.where-s .sub{font-size:12px;color:var(--text-3)}
.where-s .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where-s .amt{text-align:right;font-weight:600}
@media (max-width:640px){ .where-h{padding:12px 14px} .where-s{grid-template-columns:minmax(0,1fr) auto;padding:8px 14px 8px 28px} .where-s .d,.where-s .sub{display:none} }

/* ================================================================
   modals / forms
   ================================================================ */
.modal{position:fixed;inset:0;background:rgba(3,5,8,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:70}
.modal-inner{background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-pop);
  max-width:680px;width:100%;max-height:min(92vh,960px);overflow:auto;padding:22px;animation:pop .18s ease-out}
.modal-inner.narrow{max-width:520px}
.modal-inner h3{font-size:20px;font-weight:700}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.modal-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.modal-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:flex-end}
.flex-canvas-wrap{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;display:flex;justify-content:center}
.flex-canvas-wrap canvas{width:100%;height:auto;max-width:640px;border-radius:var(--r);display:block}
.flex-canvas-wrap canvas.story{width:auto;max-width:100%;max-height:min(72vh,720px)}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){
  .modal{align-items:flex-end;padding:0}
  .modal-inner{border-radius:14px 14px 0 0;max-height:94vh;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:up .22s ease-out}
  .modal-actions .btn{flex:1}
}
.form{display:flex;flex-direction:column;gap:14px}
.form label,.fl{font-size:12.5px;font-weight:600;color:var(--text-2);display:flex;flex-direction:column;gap:6px}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,.fl input,.fl select{
  padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card-2);min-height:42px;color:var(--text);font-weight:400}
.form input:focus,.form select:focus,.fl input:focus,.fl select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid .full{grid-column:1/-1}
@media (max-width:520px){ .form-grid{grid-template-columns:1fr} }
.help{font-size:13px;color:var(--text-2);background:var(--card-2);padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);margin:0}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.items-ed{display:flex;flex-direction:column;gap:8px}
.items-ed .ir{display:grid;grid-template-columns:minmax(0,1fr) 76px 110px 36px;gap:8px;align-items:center}
.items-ed .ir input{padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card-2);min-height:40px;min-width:0;color:var(--text)}
.items-ed .ir input:focus{outline:none;border-color:var(--accent)}
.items-ed .hd{display:grid;grid-template-columns:minmax(0,1fr) 76px 110px 36px;gap:8px;font-size:11px;font-weight:600;text-transform:none;color:var(--text-3)}
@media (max-width:520px){
  .items-ed .hd{display:none}
  .items-ed .ir{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;padding:10px;border:1px solid var(--line);border-radius:var(--r)}
  .items-ed .ir input:first-child{grid-column:1/-1}
}
.sum{display:flex;flex-direction:column;gap:8px;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.sum .r{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text-2)}
.sum .r b{color:var(--text)}
.sum .r.tot{border-top:1px solid var(--line);padding-top:8px;font-size:15px;font-weight:600;color:var(--text)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper input{text-align:center;width:76px}
.stepper button{width:40px;height:42px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--card-2);cursor:pointer;font-size:18px;color:var(--text)}
.prodhead{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r-lg);background:var(--card-2);border:1px solid var(--line);margin-bottom:14px}
.prodhead .nm{font-weight:600}
.prodhead .mt{font-size:12.5px;color:var(--text-3)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .tr{width:40px;height:24px;border-radius:999px;background:var(--card-3);border:1px solid var(--line-2);position:relative;transition:background .2s;flex:none}
.switch .tr::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked+.tr{background:var(--grad);border-color:transparent}
.switch input:checked+.tr::after{transform:translateX(16px)}
.switch input:focus-visible+.tr{outline:2px solid var(--accent);outline-offset:2px}
.switch input:disabled+.tr{opacity:.5}

/* ================================================================
   secondary views (inboxes, settings, lists)
   ================================================================ */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
details.panel>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::after{content:"+";font-size:20px;color:var(--text-3);line-height:1}
details.panel[open]>summary::after{content:"–"}
.panel-t{font-weight:600;font-size:15px;margin:0 0 4px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:1100px){ .cols{grid-template-columns:minmax(0,1fr)} }
.cols>*{min-width:0}
/* Shipments on a phone: everything fits the screen width, nothing scrolls sideways. */
@media (max-width:640px){
  #trk-filter{display:flex;flex-wrap:nowrap;overflow-x:auto}
  #trk-filter button{padding-left:10px;padding-right:10px}
  #view-shipments .trk-picks{width:100%}
  #view-shipments .dest-pick{width:100%}
  #view-shipments .dest-pick select{max-width:none;flex:1}
  #view-shipments .view-head{flex-wrap:wrap;gap:10px}
  #view-shipments .pkg{padding:14px}
  #view-shipments .pkg .top{align-items:flex-start}
  #view-shipments .pkg .top .row{flex-wrap:wrap;row-gap:4px;min-width:0}
  #view-shipments .pkg .prod{align-items:flex-start}
  #view-shipments .pkg .prod .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;align-self:center}
  #view-shipments .pkg .foot{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;text-align:left}
  #view-shipments .pkg .foot .o{align-items:flex-start;line-height:1.5}
  #view-shipments .pkg .foot a{word-break:break-all}
  #view-shipments .pkg .last{overflow-wrap:anywhere}
  .tsteps-l{font-size:9.5px;letter-spacing:.02em}
  #view-shipments .mline{grid-template-columns:minmax(0,1fr)}
  #view-shipments .mline .spill{justify-self:start;margin-left:42px}
  #view-shipments .mline .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  #view-shipments .mline .mt{overflow-wrap:anywhere}
  #view-shipments .misc-sec{padding:14px}
}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.between{justify-content:space-between}
.box .addr{font-weight:600;word-break:break-all}
.box .prov{color:var(--text-3);font-size:12.5px}
.box .st{font-size:13.5px;color:var(--text-2);margin-top:10px}
.box .diag{font-size:13px;color:var(--text-3);margin-top:6px}
.box .actions{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.inbox-card{display:flex;flex-direction:column}
.inbox-top{display:flex;align-items:center;gap:12px}
.inbox-top .pv{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;background:var(--card-3);font-weight:800;font-size:13px;flex:none}
.livebox{margin-top:14px;padding:12px 14px;border-radius:var(--r-lg);background:var(--card-2);border:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.livebox .ls{font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:7px}
.ldot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-3)}
.ldot.on{background:var(--deliv);box-shadow:0 0 0 0 color-mix(in srgb,var(--deliv) 60%,transparent);animation:pulse 2s infinite}
.ldot.err{background:var(--canc)} .ldot.wait{background:var(--partial)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--deliv) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.infobar{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-lg);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:14px;font-size:13.5px;color:var(--text-2)}
.infobar svg{color:var(--accent);margin-top:1px}
.infobar b{color:var(--text)}
.syncnow{background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--r-lg);padding:14px 18px;margin-bottom:14px}
.syncnow h3{margin:0 0 8px;font-size:15px}
.syncrun{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.syncrun:last-child{border-bottom:0}
.syncrun .lbl{min-width:0}.syncrun .lbl .a{font-weight:600;word-break:break-all}
.syncrun .lbl .n{font-size:13px;color:var(--text-2)}
.spin{width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;
  display:inline-block;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.acct{display:grid;grid-template-columns:1fr auto;gap:4px 16px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:8px;cursor:pointer;color:inherit;transition:background .15s}
.acct:hover{background:var(--card-2)}
.acct .nm{font-weight:600;word-break:break-all}
.acct .amt{text-align:right;font-weight:600}
.acct .amt .x,.amt .x{display:block;color:var(--canc);font-size:12.5px;font-weight:500}
.acct .meta{grid-column:1/-1;font-size:13px;color:var(--text-3)}
.rv{border-bottom:1px solid var(--line);padding:12px 0}
.rv:last-child{border-bottom:0}
.rv .subj{font-weight:600}
.rv .from{font-size:13px;color:var(--text-3);word-break:break-all}
.set-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:900px){ .set-pair{grid-template-columns:minmax(0,1fr);gap:0} }
.misc-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.misc-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 6px 6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card-2);font-size:13px}
.misc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.misc-chip button{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:0;background:transparent;color:var(--text-3);cursor:pointer}
.misc-chip button:hover{color:var(--text);background:var(--card-3)}
.misc-sec{margin-top:18px;padding:14px 18px}
.misc-sec summary{cursor:pointer;font-weight:600;font-size:15px;padding:4px 0;list-style:none;display:flex;align-items:center;gap:10px}
.misc-sec summary::-webkit-details-marker{display:none}
.misc-sec summary .fine{font-weight:400}
.mline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.mline:last-child{border-bottom:0}
.mline .p{display:flex;align-items:center;gap:10px;min-width:0}
.mline .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mline .mt{font-size:12.5px;color:var(--text-3)}
.mline .mt a{color:var(--text-2)}
.rf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.rf:last-child{border-bottom:0}
.rf .p{display:flex;align-items:center;gap:12px;min-width:0}
.rf .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.rf .mt{font-size:12.5px;color:var(--text-3);display:flex;gap:4px 12px;flex-wrap:wrap;margin-top:2px}
.rf .mt b{color:var(--text-2);font-weight:600}
.rf-st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap;padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
.rf-st .d{width:7px;height:7px;border-radius:50%;background:currentColor}
@media (max-width:720px){ .rf{grid-template-columns:minmax(0,1fr);padding:14px 16px} .rf-st{justify-self:start;margin-left:56px} }
.rf-st.entered{color:var(--accent)} .rf-st.won{color:var(--deliv)} .rf-st.lost{color:var(--canc)} .rf-st.cancelled{color:var(--ord)}
.pre .head{display:flex;align-items:center;gap:10px;font-weight:600;flex-wrap:wrap}
.pre .facts{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:var(--text-2);margin-top:6px}
.pre .facts b{color:var(--text)}
.pre .ship{font-size:13px;color:var(--text-2);margin-top:8px}
.pre .ship b{color:var(--text)}
.pre .prods{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pre .prod{display:flex;align-items:center;gap:10px;min-width:0}
.pre .prod .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.pre .notice{font-size:12.5px;color:var(--text-3);margin-top:10px}
.banner{background:color-mix(in srgb,var(--partial) 9%,var(--card));border:1px solid color-mix(in srgb,var(--partial) 40%,transparent);border-radius:var(--r);padding:12px 16px;margin-bottom:18px;
  font-size:13.5px;color:var(--text-2)}
.status{font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap;border:1px solid currentColor;justify-self:end}
/* shipments list (details cards) */
.order{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.order>summary{list-style:none;cursor:pointer;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.order>summary::-webkit-details-marker{display:none}
.order>summary:hover{background:var(--card-2)}
.o-title{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0}
.o-ret{font-weight:600}
.o-num{color:var(--text-3);font-size:13px}
.o-items{color:var(--text-2);font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-money{text-align:right;font-weight:600}
.o-ship{grid-column:1/-1;font-size:13px;color:var(--text-2);display:flex;gap:6px;align-items:baseline;margin-top:2px}
.o-ship b{font-weight:600;color:var(--text)}
.o-ship svg{flex:none;transform:translateY(2px);color:var(--text-3)}
.items{border-top:1px solid var(--line);padding:4px 16px 12px}
.item{padding:9px 0}

/* ---------- shipments / live tracking ---------- */
.lv-label_created{color:var(--ord)} .lv-in_transit{color:var(--ship)} .lv-out_for_delivery{color:var(--accent)}
.lv-delivered{color:var(--deliv)} .lv-exception{color:var(--canc)} .lv-unknown{color:var(--text-3)}
.pkg{display:flex;flex-direction:column;gap:12px;margin-bottom:0}
.pkg .top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pkg .eta{font-size:12.5px;color:var(--text-2)} .pkg .eta b{color:var(--text)}
.pkg .prods{display:flex;flex-direction:column;gap:8px}
.pkg .prod{display:flex;align-items:center;gap:10px;min-width:0}
.pkg .prod .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.tsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tsteps i{height:5px;border-radius:5px;background:var(--card-3)}
.tsteps.n1 i:nth-child(-n+1),.tsteps.n2 i:nth-child(-n+2),.tsteps.n3 i:nth-child(-n+3),.tsteps.n4 i{background:currentColor}
.tsteps-l{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:11.5px;color:var(--text-3);font-weight:600;text-transform:none;margin-top:-6px}
.trk-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:14px}
.st-pick{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.st-pick select{min-height:30px;font-size:12.5px;padding:4px 8px;max-width:170px}
.trk-picks{display:flex;gap:8px 12px;flex-wrap:wrap;min-width:0}
.dest-pick{display:inline-flex;align-items:center;gap:8px;color:var(--text-3);min-width:0;max-width:100%}
.dest-pick select{min-height:36px;max-width:340px;min-width:0;font-size:13px}
.pkg .dest{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);background:var(--card-2);border:1px solid var(--line);font-size:13px;color:var(--text-2);min-width:0}
.pkg .dest .i{flex:none;margin-top:2px;color:var(--text-3)}
.pkg .dest .k{font-size:11.5px;font-weight:600;text-transform:none;color:var(--text-3)}
.pkg .dest b{color:var(--text);font-weight:600}
.pkg .dest .a{overflow-wrap:anywhere}
.pkg .last{font-size:13px;color:var(--text-2)}
.pkg .last b{color:var(--text)}
.pu-preparing{color:var(--ord)} .pu-transit{color:var(--ship)} .pu-ready{color:var(--accent)} .pu-done{color:var(--deliv)} .pu-cancelled{color:var(--canc)}
.pkg .last .when{color:var(--text-3)}
.pkg details summary{cursor:pointer;font-size:12.5px;color:var(--text-3);list-style:none}
.pkg details summary::-webkit-details-marker{display:none}
.scans{margin:8px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line-2);display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.scans .w{color:var(--text-3)}
.pkg .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-3)}
.pkg .foot .o{display:flex;align-items:center;gap:7px;min-width:0}
.pkg .foot a{color:var(--ship);font-weight:600;text-decoration:none}
.livenote{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);margin-top:2px}

/* ---------- signed-out screens ---------- */
.screen{position:relative;z-index:1;max-width:460px;margin:0 auto;padding:14vh 20px 60px}
.screen .card{padding:28px}
.screen .brand{margin-bottom:22px}
.screen h2{font-size:28px;margin:0 0 10px;line-height:1.15}
.screen p{color:var(--text-2);margin:0 0 18px}
.stack{display:flex;flex-direction:column;gap:12px;align-items:stretch}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;background:var(--card-3);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r);padding:10px 16px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow-pop);
  animation:up .2s ease-out;max-width:calc(100vw - 32px)}
@media (max-width:860px){ .toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- Addresses: what's sticking ---------- */
.jig{padding:22px 22px 24px;margin-bottom:16px;position:relative;overflow:hidden}
.jig-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 20px;margin-bottom:18px}
.jig-head h3{font-size:22px;font-weight:650;margin:4px 0 4px}
.jig-head .fine{margin:0;max-width:70ch}
.jig-scope{display:flex;flex-direction:column;gap:4px;min-width:0;flex:0 1 300px}
.jig-scope select{width:100%}
.jig-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:860px){ .jig-cols{grid-template-columns:minmax(0,1fr)} }
.jig-cols>div{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
.jig-col-t{font-family:var(--f-mono);font-size:11px;text-transform:none;color:var(--text-3);margin:0 0 10px}
.jig-col-t.pos{color:var(--pos)} .jig-col-t.neg{color:var(--neg)}
.jrec{padding:10px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;min-width:0}
.jrec:first-child{border-top:0;padding-top:0}
.jrec .fine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jrec-t{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.jrate{font-family:var(--f-mono);font-weight:600;font-size:15px;flex:none}
.jrate.pos,.jrule .pos{color:var(--pos)} .jrate.neg,.jrule .neg{color:var(--neg)}
.jig-tags{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.jtag{font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--accent-soft);
  color:var(--text);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);white-space:nowrap}
.jtag.plain{background:var(--card-3);border-color:var(--line-2);color:var(--text-2)}
.jbar{height:6px;border-radius:6px;background:var(--card-3);overflow:hidden}
.jbar i{display:block;height:100%;border-radius:6px;background:var(--text-3)}
.jbar i.pos{background:var(--pos)} .jbar i.neg{background:var(--neg)}
.jig-early{margin-top:12px;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.jig-early summary{cursor:pointer;color:var(--text-2);font-size:13px}
.jig-early[open] summary{margin-bottom:10px}
.jig-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.jfam{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
.jfam-t{font-weight:600;margin:0 0 10px;font-size:14px}
.jrule{display:flex;flex-direction:column;gap:5px;padding:7px 0;border-top:1px solid var(--line)}
.jrule:first-of-type{border-top:0;padding-top:0}
.jrule.early{opacity:.6}
.jrule-t{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.jrule-t .nm{min-width:0}
.jrule-t .num{font-family:var(--f-mono);font-weight:600;flex:none}
#addr-groups .jig-tags{margin-top:5px}
@media (max-width:640px){
  .jig{padding:16px 14px 18px}
  .jig-cols>div,.jfam{padding:12px}
  .jig-head h3{font-size:19px}
}
@media (max-width:480px){
  .tile{padding:16px}
}
/* checkbox + label rows inside forms sit on one line, left-aligned */
.form label.row{flex-direction:row;align-items:center;flex-wrap:nowrap;text-align:left;font-size:13.5px;color:var(--text)}
.form label.row.fine{font-weight:500;color:var(--text-2);align-items:flex-start}
.form label.row.fine input{margin-top:3px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;flex:none;margin:0}

/* big numbers: the original weights and spacing, digits all the same width */
.tile .v,.kpi .v,.stages .n,.statement,.jrate,.shelf .a{font-variant-numeric:tabular-nums}

.pretag{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;text-transform:none;
  padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--text);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);vertical-align:middle}
.rv-click{background:none;border:0;border-top:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;border-radius:8px}
.rv-click:hover{background:var(--hover,rgba(127,127,255,.06))}
.mv-open{font-size:12px;color:var(--accent);font-weight:600;margin-left:6px}
/* ---------- Sales & expenses ---------- */
.sales-cols{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.exp-form{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;padding:12px 16px}
@media (max-width:1100px){.exp-form{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) auto}.exp-form #exp-desc{grid-column:1/-1;grid-row:1}}
@media (max-width:640px){.exp-form{grid-template-columns:1fr 1fr}.exp-form #exp-add{grid-column:1/-1}}
.exp-form .input{min-width:0}
.exp-cats{display:flex;flex-direction:column;gap:8px;padding:4px 16px 12px}
.exp-cats:empty{display:none}
.exp-cat{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:13px}
.exp-cat .nm{color:var(--ink-2,var(--ink))}
.exp-cat .bar{grid-column:1/-1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.exp-cat .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2,var(--accent)))}
.sale.exp .amt{white-space:nowrap}

/* orders table: retailer and email have their own columns on wide screens */
@media (min-width:1321px){ .oc-ord .rt,.oc-ship .e{display:none} }
.sale.exp{grid-template-columns:62px minmax(0,1fr) auto auto}
.sale.exp>.row{justify-content:flex-end}
@media (max-width:640px){ .sale.exp{grid-template-columns:minmax(0,1fr) auto auto} }

/* ---------- ACO clients ---------- */
.aco-add{margin-bottom:14px}
.aco-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
@media (max-width:1100px){.aco-layout{grid-template-columns:minmax(0,1fr)}}
.aco-search{max-width:320px;flex:1;padding:0 10px}
.aco-search input{padding:7px 0;font-size:13px}
.acop{border:1px solid var(--line);border-radius:var(--r);background:var(--card-2);margin-bottom:10px;overflow:hidden;transition:border-color .15s}
.acop.open{border-color:var(--line-2)}
.acop-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:22px;align-items:center;width:100%;
  padding:12px 14px;background:none;border:0;color:inherit;text-align:left;cursor:pointer}
.acop-h:hover{background:var(--card-3)}
.acop-who{display:flex;align-items:center;gap:12px;min-width:0}
.aco-av{width:38px;height:38px;flex:none;border-radius:var(--r);display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.acop-nm{display:flex;flex-direction:column;min-width:0}
.acop-nm b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acop-nm .fine{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acop-stats{display:flex;gap:16px;flex-wrap:nowrap}
.acop-s{min-width:0}
.acop-s{display:flex;flex-direction:column;line-height:1.15}
.acop-s b{font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:-.02em}
.acop-s span{font-family:var(--f-mono);font-size:11px;text-transform:none;color:var(--text-3)}
.acop-s.ok b{color:var(--deliv)} .acop-s.bad b{color:var(--canc)}
.acop-r{display:flex;align-items:center;gap:12px}
.acop-r .fine{margin:0;white-space:nowrap}
.acop-rate{--p:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;font-weight:600;
  background:radial-gradient(closest-side,var(--card-2) 76%,transparent 78% 100%),conic-gradient(var(--deliv) calc(var(--p)*1%),color-mix(in srgb,var(--canc) 55%,var(--card-3)) 0)}
.acop-chev{transition:transform .2s;color:var(--text-3)}
.acop.open .acop-chev{transform:rotate(180deg)}
.acop-b{border-top:1px solid var(--line);padding:14px}
.acop-acts{gap:8px;flex-wrap:wrap;margin-bottom:14px}
.acop-cols{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}
@media (max-width:760px){.acop-cols{grid-template-columns:1fr}.acop-h{grid-template-columns:1fr}.acop-r{justify-content:space-between}}
.acop-info .tag,.acop-orders .tag{margin:0 0 6px}
.acop-info .tag:not(:first-child){margin-top:14px}
.acop-mono{font-family:var(--f-mono);font-size:12.5px;word-break:break-all;margin:0}
.acop-addr{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dotted var(--line-2)}
.acop-addr b{display:block;font-size:13px;font-weight:600}
.acop-addr span{font-size:12.5px;color:var(--text-2)}
.acop-addr .fine{margin:0;white-space:nowrap}
.aco-o{padding:10px 0;border-bottom:1px solid var(--line)}
.aco-o:last-child{border-bottom:0}
.aco-o.pick{cursor:pointer;border-radius:var(--r);padding:10px 8px;margin:0 -8px}
.aco-o.pick:hover{background:var(--card-2)}
.aco-o-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.aco-o-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.aco-o-l .fine{margin:0}
.aco-o-who{font-size:13.5px}
.aco-o-r{display:flex;align-items:center;gap:10px;white-space:nowrap}
.aco-st{font-family:var(--f-mono);font-size:11.5px;text-transform:none;font-weight:600;padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,currentColor 12%,transparent)}
.aco-o-items{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px}
.aco-it{font-size:12.5px;color:var(--text-2)}
.aco-it.cut{color:var(--text-3);text-decoration:line-through}
.aco-recent .card-b{padding-top:6px}

/* ---------- duplicate products ---------- */
.dupes{margin-bottom:14px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.dupe{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.dupe:first-child{border-top:0}
.dupe-pair{display:flex;align-items:center;gap:8px;min-width:0}
.dupe-p{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:8px 10px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--card-2);color:inherit;text-align:left;cursor:pointer}
.dupe-p.keep{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dupe-t{display:flex;flex-direction:column;min-width:0}
.dupe-t b{font-size:13px;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.dupe-t .fine{margin:0}
.dupe-eq{color:var(--text-3);font-weight:700}
.dupe-why{font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--accent);white-space:nowrap}
.dupe-acts{gap:6px;flex-wrap:nowrap}
@media (max-width:760px){.dupe{grid-template-columns:1fr}.dupe-pair{flex-direction:column;align-items:stretch}.dupe-eq{text-align:center}}
.ie-merge{display:flex;align-items:flex-end;gap:8px;padding-top:10px;border-top:1px dashed var(--line-2)}
.ie-merge label{flex:1;min-width:0}
.ie-merge select{width:100%}

/* ACO: people, date range, all orders */
.aco-rangebar{gap:10px 16px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.aco-rangebar .input[type=date]{min-height:34px;padding:5px 10px;font-size:13px}
.aco-kpi-link{cursor:pointer;transition:border-color .15s,transform .15s}
.aco-kpi-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.aco-kpi-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aco-viewall{color:var(--accent);margin-left:6px;letter-spacing:.06em}
.acog{border:1px solid var(--line);border-radius:var(--r);background:var(--card-2);margin-bottom:10px;overflow:hidden}
.acog.open{border-color:var(--line-2)}
.acog.open > .acog-h .acop-chev{transform:rotate(180deg)}
.acog-b{border-top:1px solid var(--line);padding:10px;background:color-mix(in srgb,var(--card) 60%,transparent)}
.acog-b .acop{margin-bottom:8px;background:var(--card)}
.acog-b .acop:last-child{margin-bottom:0}
.aco-orders{margin-bottom:14px}
.aco-orders-h{flex-wrap:wrap;gap:8px}
.aco-ofilters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:8px}
.aco-ofilters select{min-height:36px;font-size:13px;max-width:260px}
.aco-day{margin:14px 0 2px}
.aco-prices{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);margin-left:auto}
.aco-portal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px;margin-bottom:10px;border-radius:var(--r);
  border:1px dashed var(--line-2);background:var(--card)}
.aco-portal-i{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;font-size:13px}
.aco-portal-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3)}
.aco-portal-dot.on{background:var(--deliv);box-shadow:0 0 0 3px color-mix(in srgb,var(--deliv) 25%,transparent)}
.aco-portal-f{display:flex;gap:6px}
.aco-portal-f .input{width:190px;min-height:32px;padding:4px 10px;font-size:13px}
.aco-portal-a{gap:6px}

/* success card: dropdown filters */
.flex-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 10px}
.flex-dd{display:flex;flex-direction:column;gap:5px;min-width:0}
.flex-dd > span{font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3)}
.flex-dd select{width:100%;min-height:38px;font-size:13.5px}
.flex-dd[hidden]{display:none}
.flex-range input{min-height:38px;font-size:13.5px;min-width:0;flex:1}
.flex-bot-row .bot-logo{width:16px;height:16px;border-radius:4px;margin-right:6px;vertical-align:-3px}
.flex-bot-row{align-items:center;flex-wrap:wrap}
.flex-bot-row .fine{margin-right:2px}
@media (max-width:640px){.flex-filters{grid-template-columns:1fr 1fr}.flex-filters .flex-dd:last-child{grid-column:1/-1}}
.flex-colors-row{display:flex;align-items:center;gap:12px;margin:2px 0 8px;flex-wrap:wrap}
.flex-dd-l{font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3)}
.flex-colors{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flex-sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;padding:0;display:grid;place-items:center;
  color:#11131f;font-weight:700;font-size:16px;transition:transform .12s}
.flex-sw:hover{transform:scale(1.08)}
.flex-sw[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}
.flex-sw.custom{background:conic-gradient(#FF7A45,#FBBF24,#22C55E,#38BDF8,#A855F7,#F472B6,#FF7A45)!important;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.flex-sw-name{margin:0 0 0 4px}
.flex-custom-colors{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r)}
.flex-custom-colors[hidden]{display:none}
.flex-custom-colors .fine{margin:0}
.flex-cc{position:relative;display:inline-flex}
.flex-cc input[type=color]{width:42px;height:34px;padding:2px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card-2);cursor:pointer}
.flex-cc-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;border:0;background:var(--card-3);color:var(--text);
  font-size:12px;line-height:18px;padding:0;cursor:pointer}
.aco-prices[hidden]{display:none}
.ms-box{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card-2)}
.ms-box[hidden]{display:none}
.ms-btn{align-self:flex-start;background:#fff!important;color:#1f1f1f!important;border:1px solid #747775!important;box-shadow:none!important;gap:10px;font-family:Roboto,Arial,sans-serif}   /* Google and Microsoft sign-in buttons keep their own look (their branding rules) */

/* ACO: review list and client addresses */
.aco-review{margin-bottom:14px;border-color:color-mix(in srgb,var(--partial) 45%,var(--line))}
.aco-review-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-size:12px;
  background:color-mix(in srgb,var(--partial) 20%,transparent);color:var(--partial);margin-left:6px}
.aco-rv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.aco-rv:first-child{border-top:0}
.aco-rv-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.aco-rv-top .fine{margin:0}
.aco-rv-why{font-family:var(--f-mono);font-size:11px;text-transform:none;color:var(--partial);
  padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--partial) 14%,transparent)}
.aco-rv-ship{font-size:13px;color:var(--text);margin-top:3px}
.aco-rv-items{margin:3px 0 0}
.aco-rv-a{gap:6px;flex-wrap:nowrap}
@media (max-width:640px){.aco-rv{grid-template-columns:1fr}}
.aco-addr{padding:10px 12px;margin-bottom:10px;border-radius:var(--r);border:1px dashed var(--line-2);background:var(--card);display:flex;flex-direction:column;gap:8px}
.aco-addr-h{display:flex;flex-direction:column;gap:2px}
.aco-addr-h b{font-size:13px}
.aco-addr-h .fine{margin:0}
.aco-addr-chips{display:flex;flex-wrap:wrap;gap:6px}
.aco-addr-none{margin:0;color:var(--partial)}
.aco-addr-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;font-size:12.5px;
  background:color-mix(in srgb,var(--deliv) 14%,transparent);border:1px solid color-mix(in srgb,var(--deliv) 35%,transparent)}
.aco-addr-chip button{border:0;background:none;color:var(--text-2);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.aco-addr-sg{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;padding:6px 8px;border-radius:var(--r);
  background:var(--card-2)}
.aco-addr-sg .fine{margin:0}
.aco-addr-f{display:flex;gap:6px}
.aco-addr-f .input{flex:1;min-height:32px;padding:4px 10px;font-size:13px}
.aco-rv-a select{min-height:34px;font-size:13px;max-width:240px}
.aco-feed{margin-bottom:14px}
.aco-feed > summary{cursor:pointer;list-style:none;padding-bottom:16px}
.aco-feed > summary::-webkit-details-marker{display:none}
.aco-feed[hidden]{display:none}
.aco-feed-warn{color:var(--partial)}
.aco-feed-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.aco-feed-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13px}
.aco-feed-code code{font-family:var(--f-mono);padding:3px 8px;border-radius:8px;background:var(--card-3);font-size:13px}
.aco-feed-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.aco-feed-f .input{flex:1;min-width:150px;min-height:34px;font-size:13px}
.rf-pick{position:relative;cursor:pointer;padding-right:22px}
.rf-pick select{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;opacity:0;
  background:transparent;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;min-height:0;box-shadow:none;outline:none}
.rf-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.rf-pick::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.8;pointer-events:none}
.rf-pick select option{color:var(--text);background:var(--card)}
.aco-pings{margin:0 0 0 4px}.aco-pings.off{color:var(--partial)}
.aco-portal-i{flex-wrap:wrap}
/* ACO: move an email, repull its orders, add an email to a client */
.aco-tools{display:flex;flex-direction:column;gap:8px;margin:2px 0 12px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r)}
.aco-tool{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.aco-tool select.input,.aco-tool input.input{min-height:32px;font-size:13px;padding:5px 10px;width:auto;max-width:240px}
.aco-tool input.input{flex:1 1 200px}
.aco-repull-st{flex-basis:100%}
.aco-repull-st:empty{display:none}
.aco-addemail{margin-top:10px}
.aco-changes summary{cursor:pointer;list-style:none}
.aco-changes summary::-webkit-details-marker{display:none}
.aco-chg{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.aco-chg:first-child{border-top:0}
.aco-chg.undone{opacity:.55}
/* Discord settings: one webhook, a checkbox per kind of ping */
.wh-events{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r)}
.wh-ev{padding:10px 12px;border-top:1px solid var(--line)}
.wh-ev:first-child{border-top:0}
.wh-ev-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wh-ev-t{font-weight:600}
.wh-ev-d{margin:4px 0 0 26px}
.wh-other{background:none;border:0;padding:0;font-size:12px;color:var(--text-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.wh-other:hover{color:var(--accent)}
.wh-own{gap:8px;margin:8px 0 0 26px}
.wh-own .input{flex:1}
.wh-own[hidden]{display:none}
/* status dot (health check) */
.health-dot{width:26px;height:26px;border-radius:50%;border:0;background:transparent;display:inline-grid;place-items:center;cursor:pointer;padding:0}
.health-dot[hidden]{display:none}
.health-dot i{width:10px;height:10px;border-radius:50%;background:var(--text-3)}
.health-dot.ok i{background:var(--deliv);box-shadow:0 0 0 3px color-mix(in srgb,var(--deliv) 20%,transparent)}
.health-dot.warn i{background:var(--partial);box-shadow:0 0 0 3px color-mix(in srgb,var(--partial) 25%,transparent)}
.health-dot.err i{background:var(--canc);box-shadow:0 0 0 3px color-mix(in srgb,var(--canc) 25%,transparent);animation:hdot 1.6s ease-in-out infinite}
@keyframes hdot{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--canc) 10%,transparent)}}
@media (prefers-reduced-motion:reduce){.health-dot.err i{animation:none}}
.health-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.health-row.error{border-left-color:var(--canc)}
.health-row:first-child{border-top:0}
.health-row p{margin:4px 0 0}
.wh-ev label.wh-ev-d{display:block;font-weight:400;font-size:12.5px;color:var(--text-3)}
.wh-ev label.wh-ev-d.row{display:flex}
.form .wh-ev .wh-ev-d input.input,.form .wh-ev .wh-ev-d select.input{display:inline-block;width:auto;min-height:30px;height:30px;padding:3px 8px;margin:0 4px;font-size:13px}
/* checkout channels: where checkouts are copied */
.relay{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.relay[hidden]{display:none}
.relay-row{display:flex;flex-direction:column;gap:8px}
.relay-row[hidden]{display:none}
.relay-row p{margin:2px 0 0}
.relay-row .input{flex:1;min-height:36px;font-size:13px}
.relay #relay-save{align-self:flex-start}
.aco-feed-link{margin:4px 0 14px}
/* tabs inside Settings / Admin */
.vtabs{margin:0 0 16px;flex-wrap:wrap}
.tab-off{display:none!important}
@media (min-width:1000px){
  .wh-events{display:grid;grid-template-columns:1fr 1fr}
  .wh-ev{border-top:1px solid var(--line)}
  .wh-ev:nth-child(-n+2){border-top:0}
  .wh-ev:nth-child(odd){border-right:1px solid var(--line)}
  .wh-ev:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
  .relay-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
.relay-pair{display:flex;flex-direction:column;gap:12px}
@media (min-width:1000px){ .relay-pair{display:grid} }
/* ---------- installable app ---------- */
.install-btn{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:8px 10px;border-radius:var(--r);
  border:1px dashed var(--line);background:transparent;color:var(--text-2);font:inherit;font-size:12.5px;cursor:pointer}
.install-btn:hover{border-color:var(--accent);color:var(--text)}
a.install-btn{text-decoration:none}
.bot-btn{border-style:solid}
@media (max-width:1180px) and (min-width:861px){ .bot-btn{justify-content:center;width:48px;padding:10px} .bot-btn span{display:none} }
.whats-new{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.whats-new summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2)}
.whats-new ul{margin:8px 0 0;padding-left:18px;color:var(--text-2);font-size:13px;line-height:1.55}
.whats-new li{margin:3px 0}
/* ---------- Profiles tab ---------- */
.pf-tpl{min-width:170px;min-height:38px;font-size:13px}
.pf-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}.pf-topbar .pf-modes{margin:0}
/* Profiles › Expressions window: floats over the page, dragged by its title, resizable from its corner */
.xwin{position:fixed;z-index:60;left:24px;top:96px;width:min(360px,calc(100vw - 16px));height:min(460px,calc(100vh - 120px));min-width:260px;min-height:180px;
  max-width:calc(100vw - 16px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-2,var(--line));border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);resize:both;overflow:hidden}
.xwin[hidden]{display:none}
.xwin-h{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--line);cursor:grab;user-select:none;touch-action:none}
.xwin.dragging .xwin-h{cursor:grabbing}
.xwin-h .fine{margin-left:auto;font-size:11.5px}
.xwin-q{margin:10px 12px 6px;width:auto}
.xwin-list{flex:1;overflow:auto;padding:0 6px 10px}
.xwin-g{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:10px 8px 4px}
.xwin-i{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:3px;padding:7px 8px;border-radius:8px}
.xwin-i:hover{background:var(--card-2)}
.xwin-n{grid-column:1/-1;font-size:12.5px;color:var(--text-2)}
.xwin-c{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;padding:3px 8px;border-radius:6px;
  border:1px solid var(--line);background:var(--card-2);color:var(--text);cursor:copy}
.xwin-c:hover{border-color:var(--accent)}
.xwin-e{font-size:11.5px;padding:3px 8px;border-radius:6px;border:0;background:none;color:var(--text-3);cursor:copy}
.xwin-e:hover{color:var(--text)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.pf-n{font-size:11px;opacity:.75;margin-left:2px}
.pf-cards-act{gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pf-drop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px;margin:10px 0;border:1.5px dashed var(--line);border-radius:var(--r);transition:border-color .15s,background .15s}
.pf-drop.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pf-import-sum{font-weight:600;margin:10px 0 4px}
.pf-import-act{gap:6px;align-self:end}
.pf-vault-s{margin:4px 0 8px}.pf-vault-s.ok{color:var(--pos)}
.pf-vault-f{gap:6px}.pf-vault-f .input{flex:1 1 180px;min-width:0}
.pf-saved-bar{gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.pf-saved-t td:first-child,.pf-saved-t th:first-child{width:28px}
.pf-card-ok{color:var(--pos)}.pf-card-miss{opacity:.6}
.pf-exp{display:flex;align-items:center;gap:6px}.pf-exp select{min-height:38px;font-size:13px;min-width:120px}
.pf-range{align-self:end;margin:0 0 9px;overflow-wrap:anywhere}
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
.pf-build .panel,.pf-side .panel{margin-bottom:12px}
.pf-side{position:sticky;top:16px}
.pf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.pf-f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--text-2);margin-top:10px}
.pf-row .pf-f{margin-top:0}
.pf-f .input{min-height:36px;font-size:13px;font-weight:400;padding:7px 10px;width:100%}
.pf-f textarea.input{resize:vertical;font-family:var(--f-mono);font-size:12.5px}
.pf-mono{font-family:var(--f-mono)}
.pf-lock{font-weight:500;color:var(--deliv);font-size:11.5px;margin-left:6px}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pf-chips.sm .chip{font-size:11.5px;padding:4px 9px;min-height:0}
.pf-seg{margin-top:12px}
.pf-check{gap:8px;margin-top:8px}
.pf-jig-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.pf-jig-h .btn{margin-left:auto}
.pf-jig-r{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;align-items:start;padding:6px 0;border-top:1px solid var(--line)}
.pf-jig-r:first-child{border-top:0}
.pf-jig-k{font-size:12px;color:var(--text-3);padding-top:12px}
.pf-jig-r .pf-chips{margin-top:6px}
.pf-table-w{overflow:auto;margin-top:10px;border:1px solid var(--line);border-radius:var(--r);max-height:420px}
.pf-table{width:100%;border-collapse:collapse;font-size:12px}
.pf-table th{position:sticky;top:0;background:var(--card-2);text-align:left;font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3);padding:7px 8px;font-weight:500}
.pf-table td{padding:6px 8px;border-top:1px solid var(--line);white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.pf-table td:first-child{color:var(--text-3)}
.pf-w{margin:6px 0 0;color:var(--partial)}
.pf-help summary{cursor:pointer;list-style:none;margin:0}
.pf-help summary::-webkit-details-marker{display:none}
.pf-help-g{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:10px}
.pf-x{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:10px}
.pf-x-list{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;min-width:0}
.pf-x-search{margin:8px;width:auto}
.pf-x-tree{max-height:260px;overflow-y:auto;padding:0 6px 6px}
.pf-x-g summary{cursor:pointer;font-size:12.5px;font-weight:600;padding:5px 4px;color:var(--text-2)}
.pf-x-i{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;font-size:12.5px;padding:5px 8px 5px 20px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-x-i:hover{background:var(--accent-soft)}
.pf-x-i[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.pf-x-foot{display:flex;align-items:center;gap:6px;border:0;border-top:1px solid var(--line-2);background:none;color:var(--pos);font:inherit;font-size:12.5px;padding:8px 10px;cursor:pointer;text-align:left}
.pf-x-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.pf-x-t{font-weight:600;margin:0}
.pf-x-d{margin:-6px 0 0}
.pf-x-l{font-size:12px;margin:0 0 4px;color:var(--text-3)}
.pf-x-row{display:flex;gap:6px;align-items:center}
.pf-x-row .input{flex:1;min-width:0}
.pf-x-btn{flex:none}
.pf-help-r{display:flex;flex-direction:column;gap:1px;padding:4px 0}
.pf-help-r code{font-family:var(--f-mono);font-size:12px;color:var(--accent);cursor:pointer;width:max-content}
.pf-help-r .fine{font-size:11.5px}
@media (max-width:1000px){ .pf-grid{grid-template-columns:minmax(0,1fr)} .pf-side{position:static} }
@media (max-width:640px){ .pf-row{grid-template-columns:minmax(0,1fr)} .pf-help-g{grid-template-columns:1fr} .pf-jig-r{grid-template-columns:minmax(0,1fr)} .pf-jig-k{padding-top:0} }

/* ---------- addresses ranked + one address up close ---------- */
.addr-pad{padding:18px 18px 16px}
.addr-rank-mob{display:none;font-size:12.5px;color:var(--text-3)}
.addr-rank-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.addr-sort{flex:none}
.addr-rank-list{display:flex;flex-direction:column;margin-top:14px}
.addr-rank-r{display:grid;grid-template-columns:28px minmax(0,1fr) 62px 56px 50px 64px 112px;align-items:center;gap:10px;width:100%;
  text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 8px;color:inherit;font:inherit;cursor:pointer}
.addr-rank-r:hover{background:var(--accent-soft)}
.addr-rank-r.near{background:color-mix(in srgb,var(--neg) 7%,transparent)}
.addr-rank-hd{cursor:default;border-top:0;padding-top:0;font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3)}
.addr-rank-hd:hover{background:none}
.addr-rank-hd span:nth-child(n+3){text-align:right}
.addr-rank-n{font-family:var(--f-mono);color:var(--text-3);font-size:13px;text-align:center}
.addr-rank-m{min-width:0;display:flex;flex-direction:column;gap:6px}
.addr-rank-t{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:600}
.addr-rank-t>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.addr-rank-t .ad-pill{flex:none}
.addr-rank-bar{display:flex;height:5px;border-radius:5px;background:var(--card-3);overflow:hidden}
.addr-rank-bar i{display:block;height:100%;background:var(--pos)} .addr-rank-bar i.neg{background:var(--neg)}
.addr-rank-c{text-align:right;font-size:13.5px}
.addr-rank-v{text-align:right}
#addr-rank-more{margin-top:10px}
@media (max-width:760px){
  .addr-rank-r{grid-template-columns:22px minmax(0,1fr) auto;row-gap:6px}
  .addr-rank-hd{display:none}
  .addr-rank-m{grid-column:2 / 4}
  .addr-rank-c{display:none}
  .addr-rank-mob{display:block}
  .addr-rank-r>b.addr-rank-c{display:block;grid-column:2;text-align:left}
  .addr-rank-v{grid-column:3}
}
:is(#view-addresses,#addr-modal,#addr-saved-modal) .pos{color:var(--pos)} :is(#view-addresses,#addr-modal,#addr-saved-modal) .neg{color:var(--neg)} :is(#view-addresses,#addr-modal,#addr-saved-modal) .mid{color:var(--partial)}
.ad-pill.dim{color:var(--text-3)}
.addr-tabs .badge{position:static;margin-left:6px;background:var(--neg);color:#fff;font-size:11.5px;padding:1px 6px;border-radius:999px}
.addr-g{padding:0;margin-bottom:8px}
.addr-g-s{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.addr-g-s::-webkit-details-marker{display:none}
.addr-g-n{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.addr-g-n b{overflow-wrap:anywhere}
.addr-g-tags{display:flex;gap:6px;flex-wrap:wrap}
.addr-g-st{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.addr-g-st b{font-size:17px}
.addr-g-near{border-color:color-mix(in srgb,var(--neg) 45%,var(--line-2))}
.addr-g-b{padding:0 16px 14px;display:flex;flex-direction:column;gap:6px}
.addr-v{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;background:var(--paper);border-radius:var(--r);font-size:13.5px}
.addr-v>div>div:first-child{overflow-wrap:anywhere}
.addr-q{flex:1;max-width:420px}
.addr-wrong-r{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--paper);margin-top:8px;border:1px solid var(--line-2)}
.addr-wrong-r.bad{border-color:color-mix(in srgb,var(--neg) 55%,transparent);background:color-mix(in srgb,var(--neg) 9%,var(--paper))}
.addr-wrong-r b{overflow-wrap:anywhere}
.addr-wrong-a{display:flex;gap:6px;flex:none}
.addr-wrong-sum{color:var(--neg);margin:0 0 4px}
@media (max-width:640px){ .addr-wrong-r{flex-direction:column;align-items:flex-start} }
.addr-base{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);background:var(--paper);margin-top:6px}
.addr-bases{margin-top:16px}
.addr-add{gap:10px}
.addr-add-row{display:grid;grid-template-columns:2fr 1fr;gap:10px}
@media (max-width:640px){ .addr-add-row{grid-template-columns:1fr} }
.jig-rules-box{margin-top:18px}
.jig-rules-box summary{cursor:pointer}
.addr-hidden-box{margin-top:14px}
.addr-hidden-box summary{cursor:pointer}
button.acct.addr-open{width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer}
button.acct.addr-open .nm{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.ad-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--r-lg);margin:14px 0 6px;
  background:color-mix(in srgb,currentColor 10%,transparent);border:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.ad-hero .fine{color:var(--text-2);margin:2px 0 0}
.ad-hero .tag{margin:0}
.ad-verdict{font-size:22px;font-weight:700;margin:2px 0 0}
.ad-big{display:flex;flex-direction:column;align-items:flex-end}
.ad-big b{font-size:34px;line-height:1}
.ad-sec{margin-top:18px}
.ad-sec-t{font-weight:600;margin:0 0 2px}
.ad-sec-s{margin:0 0 8px}
.ad-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r);background:var(--paper);margin-top:6px}
.ad-row-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-row-l b{overflow-wrap:anywhere}
.ad-row-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.ad-pill{font-family:var(--f-mono);font-size:11.5px;text-transform:none;font-weight:600;padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,currentColor 12%,transparent)}
.ad-hist{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:12.5px}
.ad-h b{font-weight:600}
.ad-o{padding:10px 12px;border-radius:var(--r);background:var(--paper);margin-top:6px;display:flex;flex-direction:column;gap:3px}
.ad-o-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ad-o-amt{margin-left:auto;font-weight:600}
.ad-o-amt .x{color:var(--neg);font-weight:500}
.ad-o-addr,.ad-o-items{overflow-wrap:anywhere}
@media (max-width:640px){ .ad-hero{flex-direction:column;align-items:flex-start} .ad-big{align-items:flex-start} }

/* ---------- Settings > Appearance ---------- */
.appear-l{font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3);margin:18px 0 8px}
.appear-sw{display:flex;flex-wrap:wrap;gap:8px}
.appear-s{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--card-2);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.appear-s[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.appear-dot{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.appear-color{width:22px;height:22px;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.appear-color::-webkit-color-swatch-wrapper{padding:0}
.appear-color::-webkit-color-swatch{border:0;border-radius:50%}
.appear-color::-moz-color-swatch{border:0;border-radius:50%}

/* ---------- compact display ---------- */
html.compact{--r-lg:14px;--r:11px;--r-sm:8px}
html.compact main{padding-top:18px}
html.compact .view-head{margin-bottom:14px;gap:10px 14px}
html.compact .view-head h2{font-size:26px}
html.compact .lede{font-size:13px;margin-top:4px}
html.compact .grid{gap:10px;margin-bottom:10px}
html.compact .panel{padding:13px 14px;margin-bottom:10px}
html.compact .card-h{padding:12px 14px 0}
html.compact .card-b{padding:10px 14px 12px}
html.compact .kpi{padding:13px;gap:6px}
html.compact .kpi .v{font-size:24px}
html.compact .kpi .spark{height:24px}
html.compact .orow>summary{min-height:50px;padding-top:6px;padding-bottom:6px}
html.compact .vtabs{margin-bottom:10px}
html.compact .btn{padding-top:7px;padding-bottom:7px}
html.compact .addr-rank-r{padding:7px 8px}
html.compact .addr-g-s{padding:10px 14px}
html.compact .ad-row,html.compact .ad-o,html.compact .addr-v,html.compact .addr-base,html.compact .addr-wrong-r{padding:7px 10px;margin-top:4px}
html.compact .jig{padding:16px}
html.compact .jrec{padding:8px 10px}
html.compact .aco-o{padding-top:8px;padding-bottom:8px}
html.compact .item{padding-top:8px;padding-bottom:8px}
html.compact .nav button{padding-top:6px;padding-bottom:6px;min-height:34px}
html.compact body{font-size:14px}

.trk-whose{margin-bottom:12px}
.aco-pill{color:var(--accent);font-size:11px}

/* ---------- ACO tabs + billing ---------- */
.aco-tabs .badge,.addr-tabs .badge{position:static;margin-left:6px;font-size:11.5px;padding:1px 6px;border-radius:999px}
.aco-tabs .badge{background:var(--accent);color:var(--accent-ink)}
#aco-review-badge{background:var(--partial);color:#111}
.aco-bill-k{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0 16px}
.aco-bill-k .tile{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.aco-bill-k .k{font-family:var(--f-mono);font-size:11.5px;text-transform:none;color:var(--text-3)}
.aco-bill-k b{font-size:22px}
.aco-bill-r{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:14px;margin-top:10px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.aco-bill-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.aco-bill-bal{display:flex;flex-direction:column;align-items:flex-end}
.aco-bill-bal b{font-size:20px}
.aco-bill-bal b.neg{color:var(--neg)} .aco-bill-bal b.pos{color:var(--pos)}
.aco-bill-s{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.aco-bill-s>div{display:flex;flex-direction:column;gap:2px}
.aco-fee,.aco-pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aco-fee .input{width:auto;min-width:0}
.aco-fee input{max-width:110px}
.aco-fee .neg{color:var(--neg)}
.aco-pay input[type=number]{max-width:140px}
.aco-pay input:not([type]){flex:1;min-width:140px}
.aco-pay-h summary{cursor:pointer}
.aco-pay-r{display:flex;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.aco-pay-r .link{margin-left:auto}
@media (max-width:760px){ .aco-bill-s{grid-template-columns:repeat(2,minmax(0,1fr))} .aco-bill-k{grid-template-columns:1fr} }

/* ================================================================
   Ledger: the finish. Flat surfaces and hairline rules, tight corners,
   one typeface family (IBM Plex) with mono for figures and codes, and
   labels in plain case. The accent marks the current page, the main
   action and focus -- nothing else is decorated.
   ================================================================ */
body{font-size:14px;letter-spacing:-.003em;font-feature-settings:"ss02" 1}
h1,h2,h3{letter-spacing:-.022em;font-weight:600}
.num,.kpi .v,.tile .v,.stages .n,.shelf .a,.addr-rank-c,.jrate{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* surfaces */
.card,.panel,.tile,.lp,.who,.kpi{background:var(--card);border:1px solid var(--line);box-shadow:none}
.card::after,.panel::after{display:none}
.panel{border-radius:var(--r-lg)}

/* labels: plain case, quiet -- not mono caps */
.tag,.kpi .k,.tile .k,.nav .grp,.kicker,.appear-l,.addr-rank-hd,.aco-bill-k .k,.jig-col-t,.jfam-t,.pf-x-l{
  font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text-3)}
.nav .grp{font-size:11.5px;padding:16px 12px 4px;color:var(--text-3)}
.kicker .bar{display:none}
.jig-col-t.pos{color:var(--pos)} .jig-col-t.neg{color:var(--neg)}

/* page head */
.view-head{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.view-head h2{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--text)}
.lede{font-size:13.5px;color:var(--text-2);max-width:78ch}
@media (max-width:860px){ .view-head h2{font-size:22px} .view-head{padding-bottom:14px;margin-bottom:14px} }

/* sidebar: flat, a 2px accent tick on the current page */
.side{background:var(--bg);border-right:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;gap:10px}
.nav{gap:1px}
.nav button{border-radius:6px;padding:7px 10px;min-height:34px;font-size:13.5px;color:var(--text-2);position:relative}
.nav button svg.i{width:16px;height:16px;stroke-width:1.7}
.nav button:hover{background:var(--card-2);color:var(--text)}
.nav button[aria-current="page"]{background:var(--card-2);color:var(--text);box-shadow:none}
.nav button[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--accent)}
.nav button[aria-current="page"] svg{color:var(--text)}
.who{border-radius:var(--r);padding:8px 10px}
.brand h1{font-weight:600;font-size:18px;letter-spacing:-.03em}

/* buttons: solid accent for the main action, outlined for the rest */
.btn{border-radius:6px;font-weight:500;min-height:36px;padding:0 14px;box-shadow:none;letter-spacing:0}
.btn:not(.ghost):not(.danger):not(.discord){background:var(--accent);color:var(--accent-ink);box-shadow:none}
.btn:not(.ghost):not(.danger):not(.discord):hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--text);backdrop-filter:none}
.btn.ghost:hover{background:var(--card-2);border-color:var(--line-2)}
.btn.small{min-height:30px;padding:0 10px;font-size:12.5px;border-radius:6px}
.iconbtn{border-radius:6px;background:transparent;border-color:var(--line-2)}
.chip{border-radius:6px;min-height:30px;font-size:12.5px;background:transparent;border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--card-2);border-color:var(--text-3);color:var(--text)}
.badge{background:var(--accent);color:var(--accent-ink);border-radius:4px;font-weight:600}
.fab{background:var(--accent)!important;box-shadow:0 8px 24px -10px rgba(0,0,0,.6)!important}

/* tabs: plain case with an underline, no fill */
.seg{gap:2px;border-bottom:1px solid var(--line)}
.seg button{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;padding:7px 10px 9px;color:var(--text-3)}
.seg button[aria-pressed="true"]{background:none;color:var(--text);box-shadow:inset 0 -2px 0 var(--text)}
.vtabs{margin-bottom:18px}

/* fields */
select,.input,.search{border-radius:6px;background:var(--card);border-color:var(--line-2);min-height:36px}
.search:focus-within,.input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}
.switch input:checked+.tr{background:var(--accent)}

/* figures */
.kpi{padding:16px 16px 14px;gap:8px;border-radius:var(--r-lg)}
.kpi:hover{transform:none;box-shadow:none;border-color:var(--line-2)}
.kpi .ic{display:none}
.kpi .v{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--text);
  font-family:var(--f-body);font-size:28px;font-weight:600;letter-spacing:-.035em}
.kpi .v small{font-weight:500}
.tone-canc .v{color:var(--canc)}
.kpi .s{font-size:12.5px;margin-top:-2px}
.tile .v.hl,.statement .hl{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--text)}
.statement{font-weight:500;letter-spacing:-.035em;font-size:clamp(22px,2.3vw,32px);color:var(--text-2)}
.statement .hl{font-weight:600;color:var(--text)}
.stages button,.shelf button{border-radius:var(--r);box-shadow:none}
.stages button[aria-pressed="true"],.shelf button[aria-pressed="true"]{border-color:var(--text-3);box-shadow:inset 0 0 0 1px var(--text-3)}
.stages .n{font-family:var(--f-body);font-weight:600;font-size:30px;letter-spacing:-.04em}
.shelf .a{font-family:var(--f-body);font-weight:600}
.shelf button:hover{transform:none}

/* tables and lists */
.orow>summary:hover,.orow[open]>summary{background:var(--card-2)}
.ohead,.ihead{background:var(--card)}
.ad-pill,.aco-st{border-radius:4px;letter-spacing:.02em}
.jtag{border-radius:4px}

/* dialogs */
.modal{background:rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none}
.modal-inner{border-radius:var(--r);box-shadow:var(--shadow-pop);background:var(--card)}
.sheet-bg{backdrop-filter:none}

/* motion: quick and small */
@media (prefers-reduced-motion:no-preference){
  [data-view-panel]:not([hidden]){animation:fadein .16s ease-out}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
}
/* the rest of the old mono-caps labels: section heads, table heads, small captions */
.lp-h h3,.ohead,.ihead,.acop-s span,.flex-dd > span,.flex-dd-l,.pf-table th,.dupe-why,.aco-rv-why,.addr-rank-hd{
  font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:500}
.lp-h h3{font-size:13px;color:var(--text)}
.lp-h .fine{font-family:var(--f-body);font-size:12.5px}
.ohead,.ihead,.pf-table th,.addr-rank-hd{font-size:12px;color:var(--text-3)}
.acop-s span{font-size:11px}
/* status pills: small, sentence case, square-ish */
.ad-pill,.aco-st{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:500;padding:2px 7px;border-radius:4px}
.lp{border-radius:var(--r-lg)}
.tsteps-l,.pkg .dest .k{text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px}
.pkg .dest{border-radius:var(--r)}
.infobar{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);color:var(--text-2)}
.infobar>svg{color:var(--accent)}
.nav button{font-weight:450}
.nav button[aria-current="page"]{font-weight:550}

/* ---------- the gate (sign-in): slogan, login key, a slow live background ---------- */
.gate-waves{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.screen.gate{z-index:1;padding-top:16vh}
.gate-card{position:relative;z-index:1;background:color-mix(in srgb,var(--card) 88%,transparent)}
.gate-slogan{font-size:34px!important;letter-spacing:-.04em;font-weight:600;margin-bottom:8px!important}
.gate-key summary{cursor:pointer;color:var(--text-2);font-size:13px;list-style:none;text-align:center}
.gate-key summary::-webkit-details-marker{display:none}
.gate-key summary:hover{color:var(--text)}
.gate-key[open] summary{margin-bottom:10px}
.gate-key-f{display:flex;gap:8px}
.gate-key-f .input{flex:1;font-family:var(--f-mono);font-size:13px;letter-spacing:.02em}

/* sidebar footer: picture (or initials), name, status, theme -- one tidy row */
.who{gap:9px}
.who img,.who .av-init{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover}
.av-init{display:inline-grid;place-items:center;background:var(--card-3);color:var(--text-2);font-size:11px;font-weight:600}
.topbar .av-init{width:30px;height:30px;border-radius:50%}
.side-links{align-items:center;white-space:nowrap}
.side-links .app-ver{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* a new deploy is out: one small bar to reload */
.update-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 16px;border-radius:var(--r);background:var(--card-2);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);font-size:13.5px}
@media (max-width:860px){ .update-bar{bottom:calc(92px + env(safe-area-inset-bottom,0px))} }

/* ---------- audit pass: Vercel's Web Interface Guidelines + one control scale ---------- */
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:8px 14px;border-radius:var(--r);background:var(--accent);color:var(--accent-ink);
  font-weight:500;text-decoration:none;transition:top .12s}
.skip:focus{top:12px}
main:focus{outline:none}
button,a,summary,label,select,input,[role="button"]{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}
@media (pointer:fine){ html{overscroll-behavior:none} }
.modal,.modal-inner,.sheet,.omit-pop{overscroll-behavior:contain}
h1,h2,h3,.statement,.gate-slogan{text-wrap:balance}
.lede,.fine,.help,.empty,p{text-wrap:pretty}
.kpi .v,.stages .n,.oc-amt,.oc-qty,.oc-date,.oc-eta,.shelf .a,td,.mono,.badge{font-variant-numeric:tabular-nums}
select option{background:var(--card);color:var(--text)}

/* one height for every control: 36px (32 compact), 6px corners */
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,.fl input,.fl select,.items-ed .ir input{
  min-height:36px;padding:7px 11px;border-radius:var(--r-sm);background:var(--card)}
.form textarea{min-height:72px}
.form input:focus,.form select:focus,.form textarea:focus,.fl input:focus,.fl select:focus,.items-ed .ir input:focus{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
select,.input{padding:7px 11px}
#s-qty{min-height:36px!important}
.form label,.fl{font-weight:500;font-size:12.5px}
.items-ed .hd,.odetail .box.meta .k{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:500;font-size:12px}
.mtag{text-transform:none;letter-spacing:0;font-weight:600;font-size:11px;border-radius:4px}
.iconbtn{width:34px;height:34px}
.help{border-radius:var(--r)}
.modal-inner{border-radius:var(--r-lg)}
html.compact .form input:not([type=checkbox]):not([type=radio]),html.compact .form select,html.compact .fl input,
html.compact .fl select,html.compact .items-ed .ir input,html.compact select,html.compact .input,html.compact .btn{min-height:32px}

/* orders: a denser ledger -- one line per order, smaller pictures, amounts that read at a glance */
.orow>summary{min-height:52px;padding-top:7px;padding-bottom:7px}
html.compact .orow>summary{min-height:42px;padding-top:4px;padding-bottom:4px}
.oc-prod{gap:10px}
.oc-prod .thumb{width:32px;height:32px;border-radius:var(--r-sm)}
.oc-prod .nm{font-family:var(--f-body);font-size:13.5px;font-weight:550;letter-spacing:-.005em;-webkit-line-clamp:1}
.oc-amt{font-size:13px}
.oc-amt.gone{color:var(--text-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--canc) 70%,transparent)}
.orow{box-shadow:inset 2px 0 0 var(--spine,transparent)}

/* shipments: flatter package cards -- no box inside the box, quieter steps */
.pkg{gap:10px}
.pkg .dest{background:none;border:0;padding:0;border-radius:0;gap:8px}
.pkg .dest .k{display:none}
.tsteps{gap:3px}
.tsteps i{height:3px;border-radius:2px}
.tsteps-l{font-size:11px;font-weight:400;margin-top:-4px}
.pkg .foot{padding-top:10px}

/* Inboxes › Clean up › Suggestions */
.cl-h{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:16px 0 6px}
.cl-s{border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin-bottom:8px;background:var(--card-2)}
.cl-s-top{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.cl-s > .cl-pick{padding-left:26px}
.cl-pick,.form .cl-pick{display:flex;flex-direction:row;align-items:flex-start;gap:10px;padding:6px 0;cursor:pointer;min-width:0;flex:1;font-weight:500}
.cl-pick input{margin-top:3px;flex:none}
.cl-pick input:disabled + .cl-pick-t{opacity:.55}
.cl-pick-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.cl-pick-t > span:first-child{overflow-wrap:anywhere;color:var(--text);font-size:13.5px}
.cl-pick-t .fine{font-weight:500}
.cl-view{flex:none;font-size:12.5px;margin-top:6px}

/* ---------- Sales › eBay ---------- */
.eb-empty{padding:18px;max-width:640px}
.eb-empty .eb-lead{margin:0 0 8px;font-size:14px;line-height:1.5}
.eb-empty .fine{margin:0 0 6px}
.eb-admin{font-family:var(--mono,ui-monospace,monospace);font-size:12px}
.eb-accts{display:flex;flex-direction:column}
.eb-acct{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.eb-acct .nm{font-weight:600}
.eb-acct .sub{font-size:12px;color:var(--text-3)}
.eb-acct .sub.err{color:var(--canc,#e5484d)}
.eb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.eb-stat{background:var(--card);padding:14px 18px;min-width:0}
.eb-stat .k{font-size:12px;color:var(--text-3)}
.eb-stat .v{font-size:20px;font-weight:650;margin-top:2px}
.eb-stat .s{font-size:12px;color:var(--text-3);margin-top:2px}
@media (max-width:640px){ .eb-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .eb-stat{padding:12px 14px} }
.eb-sec{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.eb-sec:last-child{border-bottom:0}
.eb-sec h4{margin:0;font-size:13px}
.eb-sec>.fine{margin:0}
.eb-match{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.eb-match .nm{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eb-match .sub{font-size:12px;color:var(--text-3)}
.eb-act{gap:6px;flex-wrap:nowrap}
.eb-act select{max-width:260px;min-width:0}
@media (max-width:760px){ .eb-match{grid-template-columns:minmax(0,1fr)} .eb-act select{flex:1;max-width:none} }
.eb-months{display:flex;gap:6px;align-items:stretch;height:140px}
.eb-m{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.eb-m .bars{flex:1 1 auto;min-height:0;width:100%;max-width:34px;position:relative}
.eb-m .bars i{position:absolute;left:0;right:0;bottom:0;border-radius:4px 4px 0 0}
.eb-m .bars .g{background:color-mix(in srgb,var(--accent) 28%,transparent)}
.eb-m .bars .n{background:var(--accent);left:22%;right:22%}
.eb-m span{font-size:11px;color:var(--text-3)}
.eb-legend{margin:0}