/* ═══════════════════════════════════════════════════════════════
   Culture Cipher — the Culture Cave family look (2026-09-21).

   Same design system as the vendor dashboard: violet-white ground,
   Cinzel for the page title and the brand, Manrope for everything you
   read, IBM Plex Mono for codes and microlabels. Pill buttons, a violet
   gradient for the one primary action on a screen, cards on a soft
   ground, a 212px rail on desktop and a five-item bar on a phone.

   Layout of this file:
     1 tokens (light, dark, and the legacy names the older rules use)
     2 base and type
     3 shell: top bar, rail, bottom bar, main
     4 page header, cards, forms, buttons, chips
     5 the screens, in the order the app shows them
     6 overlays: order detail, modals, bulk bar, toast
     7 motion, focus, print
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. tokens ─────────────────────────────────────────────── */
:root{
  --ground:#FAF8FF; --surface:#FFFFFF; --well:#F3EEFB; --wash:#F1EAFE;
  --ink:#1B1430; --ink-2:#4E4568; --ink-mut:#6F6689;
  --line:#EAE4F6; --line-strong:#DCD3F0;
  --violet:#7C3AED; --violet-ink:#6D28D9;
  --ok:#12915E; --ok-wash:#E7F6EF;
  --warn:#B45309; --warn-wash:#FDF1E2;
  --bad:#B42318; --bad-wash:#FBEAEA;
  --grad:linear-gradient(135deg,#7C3AED,#C026D3);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.10),rgba(192,38,211,.08));
  --display:'Cinzel',Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:16px; --r-sm:12px;
  --shadow:0 6px 24px rgba(40,28,80,.07);
  --shadow-lg:0 24px 60px rgba(40,28,80,.18);
  --glow:0 8px 20px rgba(124,58,237,.28);
  --focus:0 0 0 3px rgba(124,58,237,.28);
  --t:.16s cubic-bezier(.2,.7,.2,1);
  --nav-h:64px; --rail:212px; --gut:30px; --top-h:60px;
  --nav-safe:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));

  /* the names the older component rules were written against */
  --paper:var(--ground); --card:var(--surface);
  --ink-3:var(--ink-mut); --line-2:var(--line);
  --band:#2A1B55; --band-2:#3B2578; --band-ink:#F1EBFF;
  --accent:var(--violet); --accent-soft:var(--wash);
  --green:var(--ok); --green-soft:var(--ok-wash);
  --danger:var(--bad); --danger-soft:var(--bad-wash);
}
:root[data-theme="dark"]{
  --ground:#12101B; --surface:#1A1626; --well:#221D33; --wash:#2A2144;
  --ink:#EEEAF7; --ink-2:#BDB4D2; --ink-mut:#8F87A8;
  --line:#2B2540; --line-strong:#3B3355;
  --violet:#A78BFA; --violet-ink:#C4B5FD;
  --ok:#5FD3A0; --ok-wash:#123127;
  --warn:#F5B04C; --warn-wash:#33230F;
  --bad:#F0705E; --bad-wash:#3A1A17;
  --grad-soft:linear-gradient(135deg,rgba(167,139,250,.16),rgba(232,121,249,.10));
  --shadow:0 6px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  --focus:0 0 0 3px rgba(167,139,250,.35);
  --band:#2A1B55; --band-2:#3B2578;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#12101B; --surface:#1A1626; --well:#221D33; --wash:#2A2144;
    --ink:#EEEAF7; --ink-2:#BDB4D2; --ink-mut:#8F87A8;
    --line:#2B2540; --line-strong:#3B3355;
    --violet:#A78BFA; --violet-ink:#C4B5FD;
    --ok:#5FD3A0; --ok-wash:#123127;
    --warn:#F5B04C; --warn-wash:#33230F;
    --bad:#F0705E; --bad-wash:#3A1A17;
    --grad-soft:linear-gradient(135deg,rgba(167,139,250,.16),rgba(232,121,249,.10));
    --shadow:0 6px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.6);
    --focus:0 0 0 3px rgba(167,139,250,.35);
  }
}

/* ── 2. base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
  min-height:100dvh; overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
h1{font-size:19px} h2{font-size:15.5px} h3{font-size:14px}
p{margin:0 0 10px}
a{color:inherit}
button{font:inherit; color:inherit}
.mono{font-family:var(--mono); font-variant-ligatures:none}
.muted{color:var(--ink-mut)}
.small{font-size:13px}
.muted.small,.small.muted{color:var(--ink-2)}
.kick{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut); font-weight:600}

/* ── 3. shell ──────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.topbar-in{display:flex; align-items:center; gap:12px; min-height:var(--top-h); padding:8px 16px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0; flex:1 1 auto}
.brandmark{
  width:38px; height:38px; flex:none; border-radius:12px; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:16px;
  box-shadow:0 8px 18px rgba(124,58,237,.32);
}
.brand-txt{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-name{font-family:var(--display); font-weight:700; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mut); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-crumb{display:none}
.top-act{display:flex; gap:8px; flex:none}
.icobtn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-2); position:relative;
}
.icobtn:hover{border-color:var(--violet); color:var(--violet)}
.icobtn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.icobtn .eye{width:9px; height:9px; border-radius:50%; background:var(--ink-mut); position:absolute; right:7px; bottom:7px; box-shadow:0 0 0 2px var(--surface); display:none}
.icobtn[aria-pressed="true"]{background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--glow)}
.icobtn[aria-pressed="true"] .eye{display:block; background:#fff}
.ghost-btn{display:none}

/* the rail: desktop only */
.rail{display:none}
.tabs{display:none}

/* the bottom bar: phone only */
.botbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; justify-content:space-around;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  height:var(--nav-safe);
}
.botbar a{
  flex:1; max-width:96px; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
  padding:6px 0; text-decoration:none; color:var(--ink-mut); font-size:10.5px; font-weight:700; letter-spacing:.02em; border-radius:12px;
}
.botbar svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.botbar a.on{color:var(--violet)}
.botbar a.on::before{content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:24px; height:3px; border-radius:0 0 3px 3px; background:var(--grad)}
.botbar .nb{position:absolute; top:2px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--grad); color:#fff; font:600 10.5px/18px var(--mono); text-align:center; box-shadow:0 0 0 2px var(--surface)}
.botbar .nb:empty{display:none}

main,main.wrap{max-width:1180px; margin:0 auto; padding:14px 16px calc(var(--nav-safe) + 28px)}
/* <main class="wrap">: the class carries no padding of its own, the element rules below own the gutters */
.wrap{max-width:none}
.view{animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.grid-2{display:grid; gap:16px}
@media (min-width:860px){ .grid-2{grid-template-columns:1fr 1fr; align-items:start} }
.grid-lab{display:grid; gap:16px}
@media (min-width:900px){ .grid-lab{grid-template-columns:minmax(0,1fr) minmax(320px,400px); align-items:start} }
.sticky{position:static}
@media (min-width:900px){ .sticky{position:sticky; top:calc(var(--top-h) + 16px)} }

@media (min-width:900px){
  .botbar{display:none}
  .rail{
    display:flex; flex-direction:column; gap:2px; position:fixed; left:0; top:0; bottom:0; z-index:65;
    width:var(--rail); padding:16px 12px 20px; overflow-y:auto; overscroll-behavior:contain;
    background:var(--surface); border-right:1px solid var(--line);
  }
  .rail::-webkit-scrollbar{width:8px} .rail::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:8px}
  .navbrand{display:flex; align-items:center; gap:10px; padding:6px 10px 18px; text-decoration:none; color:inherit}
  .navbrand .bm{width:32px; height:32px; border-radius:10px; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:12.5px; flex:none; box-shadow:0 6px 16px rgba(124,58,237,.32)}
  .navbrand .nb-t{font-family:var(--display); font-weight:700; letter-spacing:.08em; font-size:12.5px; text-transform:uppercase; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .navgrp{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mut); padding:14px 14px 6px; font-weight:600}
  .navgrp:first-of-type{padding-top:2px}
  .rail a[data-tab]{
    position:relative; display:flex; align-items:center; gap:12px; width:100%;
    padding:11px 14px; border-radius:12px; text-decoration:none; color:var(--ink-2); font-size:13.5px; font-weight:600; letter-spacing:.005em;
  }
  .rail a[data-tab] svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.78; flex:none}
  .rail a[data-tab]:hover{background:var(--well); color:var(--ink)}
  .rail a[data-tab]:hover svg{opacity:1}
  .rail a[data-tab].on{background:var(--wash); color:var(--violet-ink)}
  .rail a[data-tab].on svg{opacity:1}
  .rail a[data-tab].on::before{content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:19px; border-radius:0 3px 3px 0; background:var(--grad)}
  .rail .count{margin-left:auto; background:var(--well); color:var(--ink-2); border-radius:999px; padding:1px 8px; font-family:var(--mono); font-size:11px; font-weight:600}
  .rail a.on .count{background:var(--grad); color:#fff}
  .rail .count:empty{display:none}
  .rail-foot{margin-top:auto; padding:14px 6px 0; border-top:1px solid var(--line)}
  .rail-pr{display:flex; align-items:center; gap:9px; padding:8px 8px; border-radius:12px; font-size:12.5px; color:var(--ink-2); text-decoration:none}
  .rail-pr:hover{background:var(--well)}
  .rail-pr .pr-dot{width:9px; height:9px}
  .rail-pr b{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px}
  .rail-pr .k{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mut)}
  .topbar{padding-left:var(--rail)}
  .topbar-in{max-width:1180px; margin:0 auto; padding:10px var(--gut)}
  .brand{display:none}
  .top-crumb{display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mut); font-weight:600}
  .top-crumb b{color:var(--violet-ink); font-weight:600}
  .top-crumb .sep{opacity:.5}
  main,main.wrap{padding:22px var(--gut) 48px; padding-left:calc(var(--rail) + var(--gut)); max-width:none}
  main>*{max-width:1180px; margin-left:auto; margin-right:auto}
}

/* ── 4. page header, cards, forms, buttons, chips ─────────── */
.pgh{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:4px 2px 16px}
.pgh-t{min-width:0}
.pgh .kick{margin-bottom:5px}
.pgh h1{font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,4.2vw,1.7rem); letter-spacing:.02em; text-transform:uppercase; line-height:1.15}
.pgh-sub{color:var(--ink-mut); font-size:13.5px; margin:5px 0 0}
.pgh-act{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
@media (min-width:900px){ .pgh{margin:0 0 20px} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.card-h h1,.card-h h2{font-size:15px; font-weight:700; letter-spacing:-.005em}
.card-h-act{display:flex; gap:7px; flex-wrap:wrap}
.pad{padding:18px}
.prose{font-size:14px; color:var(--ink-2)}
.prose ul{margin:0; padding-left:19px}
.prose li{margin-bottom:7px}
.prose b{color:var(--ink)}

.fld{display:block; margin-bottom:13px}
.fld>span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:600; margin-bottom:6px}
.fld>span em{font-style:normal; font-family:var(--sans); font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-mut); font-size:12px}
.fld.inline{display:flex; align-items:center; gap:10px; margin:0}
.fld.inline>span{margin:0}
input[type=text],input[type=search],input[type=url],input[type=number],input[type=date],select,textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-strong); border-radius:12px;
  padding:11px 14px; -webkit-appearance:none; appearance:none; outline:none;
  transition:border-color var(--t), box-shadow var(--t), background-color var(--t);
}
input::placeholder,textarea::placeholder{color:var(--ink-mut); opacity:.75}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237C3AED' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px; padding-right:34px;
}
input:focus,select:focus,textarea:focus{border-color:var(--violet); background:var(--surface); box-shadow:var(--focus)}
textarea{resize:vertical; line-height:1.5}
.fld-row{display:grid; gap:11px; grid-template-columns:1fr 1fr}
@media (max-width:430px){ .fld-row{grid-template-columns:1fr} }
.mini{max-width:170px; font-size:13.5px; padding:8px 11px; padding-right:30px; min-height:38px; border-radius:10px}

.chk{display:flex; align-items:center; gap:10px; font-size:13.5px; cursor:pointer; padding:4px 0; color:var(--ink-2); min-height:36px}
.chk input{width:19px; height:19px; margin:0; accent-color:var(--violet); flex:none; border-radius:6px}
.chk span em{font-style:normal; color:var(--ink-mut); font-size:12px}
.chk-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 14px}
@media (max-width:430px){ .chk-grid{grid-template-columns:1fr} }
.fset{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px 10px; margin:0 0 13px; background:var(--surface)}
.fset legend{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut); padding:0 6px}
.type-fset{background:var(--ground)}
.type-note{font-size:12.5px; color:var(--ink-mut); margin:9px 0 10px; line-height:1.45}

.btn,.btn2{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:999px;
  min-height:42px; padding:9px 18px; white-space:nowrap; text-decoration:none;
}
.btn:hover,.btn2:hover{border-color:var(--violet); color:var(--violet-ink)}
.btn.sm,.btn2.sm{min-height:36px; padding:7px 14px; font-size:13px}
.btn.xs{min-height:32px; padding:5px 12px; font-size:12.5px}
.btn.big{min-height:50px; font-size:15.5px; padding:11px 24px}
.btn.full{width:100%}
.btn.primary{background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--glow)}
.btn.primary:hover{color:#fff; filter:brightness(1.06); box-shadow:0 10px 24px rgba(124,58,237,.36)}
.btn.danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,var(--line-strong))}
.btn.danger:hover{background:var(--bad-wash); border-color:var(--bad); color:var(--bad)}
.btn[disabled],.btn2[disabled]{opacity:.45; cursor:not-allowed; transform:none; filter:none}
.btn-row{display:flex; gap:9px; margin-top:4px}
.btn-row.stack{margin-top:9px}
.btn-row.wrapbtn{flex-wrap:wrap; margin-bottom:9px}
.btn-row .btn{flex:1}
.btn-row.stack .btn{flex:1}
.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer; flex:none;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:50%; color:var(--ink-2); font-size:13px;
}
.icon-btn:hover{border-color:var(--violet); color:var(--violet-ink)}
.icon-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none}
.icon-btn[data-act=label] svg path:first-child,.icon-btn[data-bact=label] svg path:first-child{fill:none}
.icon-btn[data-act=del]:hover,.icon-btn[data-bact=del]:hover{color:var(--bad); border-color:var(--bad)}
.icon-btn.on{background:var(--grad); border-color:transparent; color:#fff}
.icon-btn.xs{width:30px; height:30px; padding:0}
.icon-btn.xs svg{width:15px; height:15px}
.od-linkbtn{background:none; border:0; padding:0 2px; font:inherit; font-weight:600; color:var(--violet-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer; display:inline-flex; align-items:center; min-height:32px}
.od-linkbtn:hover{color:var(--ink)}

.seg{display:inline-flex; background:var(--well); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px}
.seg.wide{display:flex; width:100%}
.seg button{flex:1; font:inherit; font-size:13px; font-weight:700; cursor:pointer; background:transparent; color:var(--ink-mut); border:0; border-radius:999px; padding:7px 15px; min-height:34px; white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(40,28,80,.14)}
.seg.wide button.on{background:var(--grad); color:#fff; box-shadow:var(--glow)}
.seg.xs button{padding:4px 10px; font-size:12px; min-height:30px}

.tag,.pill,.count{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; border-radius:999px; padding:4px 9px; line-height:1.3; background:var(--well); color:var(--ink-2); border:0; display:inline-flex; align-items:center; gap:5px}
.tag.ok,.pill.ok{background:var(--ok-wash); color:var(--ok)}
.tag.warn{background:var(--warn-wash); color:var(--warn)}
.tag.bad{background:var(--bad-wash); color:var(--bad)}
.pill{background:var(--wash); color:var(--violet-ink)}
.tag.st-Incubating{background:var(--warn-wash); color:var(--warn)}
.tag.st-Ready{background:var(--ok-wash); color:var(--ok)}
.tag.st-Shipped{background:var(--well); color:var(--ink-2)}
.tag.st-Contaminated{background:var(--bad-wash); color:var(--bad)}
.tag.st-Retired{opacity:.7}
.chip{display:inline-flex; align-items:center; gap:6px; cursor:pointer; background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; padding:6px 13px; font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-2); min-height:34px}
.chip:hover{border-color:var(--violet); color:var(--violet-ink)}
.chip.on{background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--glow)}
.chip .x{opacity:.6; font-size:14px; line-height:1; padding:0 1px}
.chip .x:hover{opacity:1}
.hint{font-size:12.5px; color:var(--ink-mut); line-height:1.5; margin:11px 0 0}
.hint.warn{color:var(--warn)}
.hint b{color:var(--ink-2)}
.empty{padding:40px 20px; text-align:center; color:var(--ink-mut); font-size:14px}
.empty b{display:block; color:var(--ink); margin-bottom:5px; font-size:15px; font-weight:700}
.skel{background:linear-gradient(90deg,var(--well) 25%,var(--wash) 50%,var(--well) 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:12px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── 5. screens ────────────────────────────────────────────── */
/* generate */
.result-card{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.alias-box{background:var(--grad-soft); border:1px solid var(--line-strong); color:var(--ink); border-radius:var(--r-sm); padding:20px 18px; margin-bottom:14px}
.alias{font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:.01em; line-height:1.15}
@media (max-width:430px){ .alias{font-size:22px} }
.alias-code{font-family:var(--mono); font-size:15px; color:var(--violet-ink); font-weight:600; margin-top:8px; letter-spacing:.04em}
.alias-abbr{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mut); margin-top:6px}
.code-demo{font-size:12.5px; color:var(--ink-2); line-height:1.55; margin:2px 0 4px; background:var(--well); border-radius:10px; padding:9px 12px}
.code-demo .mono{color:var(--violet-ink); font-weight:600}
.alias-real{display:flex; align-items:baseline; gap:9px; margin-top:15px; padding-top:13px; border-top:1px solid var(--line-strong)}
.alias-real .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mut)}
.alias-real .v{font-size:15px; font-weight:600}
.how{margin:0; padding-left:20px; font-size:13.5px; color:var(--ink-2); line-height:1.6}
.how li{margin-bottom:8px}
.how b{color:var(--ink)}
.bulk-out{margin-top:13px; border-top:1px solid var(--line); padding-top:12px; max-height:280px; overflow:auto}
.setup-card{margin-bottom:16px; border-color:color-mix(in srgb,var(--violet) 40%,var(--line))}
.key-row{display:flex; gap:7px}
.key-row input{flex:1; min-width:0}

/* library */
.toolbar{display:flex; gap:9px; padding:12px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.search{flex:1; min-width:170px}
.search input{padding:9px 13px; font-size:15px}
.list{max-height:min(60vh,600px); overflow:auto}
.row{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); transition:background-color var(--t)}
.row:hover{background:var(--well)}
.row:last-child{border-bottom:0}
.row-main{flex:1; min-width:0}
.row-alias{font-weight:700; font-size:15px; letter-spacing:-.005em}
.row-sub{font-size:12.5px; color:var(--ink-mut); margin-top:4px; display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.row-sub .code{font-family:var(--mono); color:var(--violet-ink); font-weight:600}
.row-real{font-size:13px; color:var(--ink-2); margin-top:4px}
.row-act{display:flex; gap:6px; flex:none}
.row input[type=checkbox]{width:19px; height:19px; accent-color:var(--violet); flex:none}
.list-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; border-top:1px solid var(--line); font-size:12.5px; flex-wrap:wrap; color:var(--ink-mut)}
.list-foot .btn.primary{color:#fff}
.maskable.masked{color:transparent; background:currentColor; border-radius:4px; opacity:.22; cursor:pointer; user-select:none; display:inline-block; min-width:80px}

/* decode + recover */
.decode-card{margin-bottom:16px; border-color:color-mix(in srgb,var(--violet) 40%,var(--line))}
.dec-out{margin-top:14px; padding:14px; border-radius:var(--r-sm); background:var(--well); border:1px solid var(--line)}
.dec-out .dec-real{font-size:20px; font-weight:700; letter-spacing:-.01em}
.dec-out .dec-meta{font-size:13px; color:var(--ink-mut); margin-top:6px; display:flex; gap:12px; flex-wrap:wrap}
.dec-out.bad{border-color:var(--bad); background:var(--bad-wash); color:var(--bad); font-size:14px}
.recover{margin-top:15px; padding-top:14px; border-top:1px solid var(--line)}
.recover h2{font-size:15px; margin-bottom:8px}
.rec-explain{font-size:13.5px; color:var(--ink-2); line-height:1.55; margin-bottom:13px}
.rec-explain b{color:var(--ink); font-family:var(--mono); font-weight:600}
.rec-caveat{font-size:12.5px; color:var(--ink-mut); line-height:1.5; margin:12px 0 4px}
.rec-caveat.good{color:var(--ok); font-weight:600}
.rec-caveat.warn{color:var(--warn); font-weight:600}
.rec-results{margin-top:8px}
.rec-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.rec-row:last-child{border-bottom:0}
.rec-row .nm{flex:1; min-width:0; font-weight:600}
.rec-badge{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; flex:none}
.rec-badge.confirmed{background:var(--ok); color:#fff}
.rec-badge.likely{background:var(--warn-wash); color:var(--warn)}
.rec-badge.possible{background:var(--well); color:var(--ink-mut)}
.rec-restore{font-size:12px; padding:5px 10px}

/* labels */
.preview{
  background:repeating-conic-gradient(var(--well) 0 25%,var(--ground) 0 50%) 0 0/16px 16px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px; display:grid; place-items:center; min-height:150px; overflow:auto;
}
.preview canvas{max-width:100%; height:auto; background:#fff; display:block; box-shadow:0 2px 10px rgba(0,0,0,.18); image-rendering:pixelated; image-rendering:crisp-edges}
.qty-row{display:flex; align-items:center; gap:12px; margin-top:13px}
.qty-row input{width:84px}
.qr-note{font-size:12.5px; color:var(--ink-mut); line-height:1.5; margin:2px 0 8px}
.qr-note.good{color:var(--ok)}
.qr-note.warn{color:var(--bad)}
.qr-peek{font-size:11.5px; color:var(--ink-mut); background:var(--well); border-radius:10px; padding:8px 11px; margin-bottom:4px}
.qr-peek span{display:block; margin-bottom:3px; font-weight:600}
.qr-peek code{font-family:var(--mono); font-size:10.5px; word-break:break-all; color:var(--ink-2); line-height:1.4}
.queue{margin-top:16px; border-top:1px solid var(--line); padding-top:13px}
.queue-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:13.5px; font-weight:600}
.queue-act{display:flex; gap:6px}
.q-item{display:flex; align-items:center; gap:9px; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line)}
.q-item .q-n{font-family:var(--mono); color:var(--ink-mut); font-size:12px; flex:none}
.q-item .q-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.q-item .q-kind{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:999px; background:var(--well); color:var(--ink-mut); flex:none}
.q-item .q-kind.real{background:var(--bad-wash); color:var(--bad)}
.presets{display:flex; align-items:center; gap:8px; margin-bottom:13px; flex-wrap:wrap}
.preset-chips{display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0}
.preset-none{font-size:12.5px; color:var(--ink-mut); padding:6px 0}
.more{border:1px solid var(--line); border-radius:var(--r-sm); margin-top:4px; background:var(--ground)}
.more summary{font-size:13.5px; font-weight:700; color:var(--ink-2); cursor:pointer; padding:12px 14px; list-style:none; display:flex; align-items:center; gap:9px; min-height:44px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:""; width:7px; height:7px; border-right:2px solid var(--violet); border-bottom:2px solid var(--violet); transform:rotate(-45deg); transition:transform .18s; margin-left:2px}
.more[open] summary::before{transform:rotate(45deg)}
.more[open] summary{border-bottom:1px solid var(--line)}
.more-in{padding:13px 14px 4px}

/* printer */
.printer{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; margin-top:14px; background:var(--ground)}
.pr-head{display:flex; align-items:center; gap:10px}
.pr-dot{width:9px; height:9px; border-radius:50%; background:var(--ink-mut); flex:none; opacity:.45}
.pr-dot.on{background:var(--ok); opacity:1; box-shadow:0 0 0 3px var(--ok-wash)}
.pr-name{flex:1; min-width:0; font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pr-why{font-size:12.5px; color:var(--ink-mut); line-height:1.5; margin:9px 0 0}
.pr-setup{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.pr-setup .fld{margin-bottom:9px}
.pr-hint{font-size:12.5px; color:var(--ink-2); line-height:1.45; margin:0 0 8px}
.pr-hint.warn{color:var(--bad); font-weight:600}
.pr-adv{margin-top:4px}
.pr-adv summary{font-size:12.5px; font-weight:700; color:var(--ink-2); cursor:pointer; padding:6px 0; list-style:none; min-height:32px; display:flex; align-items:center}
.pr-adv summary::-webkit-details-marker{display:none}
.pr-adv summary::before{content:"+ "; color:var(--violet); font-weight:700; margin-right:4px}
.pr-adv[open] summary::before{content:"- "}
.pr-peek{font-size:10.5px; line-height:1.5; white-space:pre-wrap; word-break:break-all; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px; margin:8px 0 0; color:var(--ink-2); max-height:110px; overflow:auto; font-family:var(--mono)}
.pr-progress{height:6px; border-radius:99px; background:var(--well); overflow:hidden; margin-top:10px}
.pr-bar{height:100%; width:0; background:var(--grad); border-radius:99px; transition:width .12s linear}
.identify{margin-top:11px; padding:12px 14px; border-radius:var(--r-sm); background:var(--wash); border:1px solid var(--line-strong)}
.identify p{font-size:13px; line-height:1.55; color:var(--ink-2); margin:0 0 9px}
.identify p b{color:var(--ink)}
.id-choices > span{display:block; font-size:13px; font-weight:700; margin-bottom:8px}
.id-choices .btn-row{margin-bottom:7px}
.app-ver{margin-top:10px; font-size:11px; color:var(--ink-mut); letter-spacing:.06em; text-transform:uppercase}

/* orders */
.ord-list{max-height:none; display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px}
.ord-row{
  position:relative; display:flex; gap:12px; padding:13px 14px 13px 16px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
}
.ord-row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line-strong)}
.ord-row:hover{border-color:var(--line-strong); transform:translateY(-1px); box-shadow:var(--shadow)}
.ord-row.picked{background:var(--wash); border-color:color-mix(in srgb,var(--violet) 35%,var(--line))}
.ord-row.picked::before{background:var(--grad)}
.ord-row.printed{opacity:.62}
.ord-row.printed::before{background:var(--ok)}
.ord-row.removed{opacity:.45}
.ord-row .osel{width:20px; height:20px; margin-top:2px; accent-color:var(--violet); flex:none}
.ord-main{flex:1; min-width:0}
.ord-top{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.ord-cust{font-weight:700; font-size:15px; letter-spacing:-.005em}
.ord-ref{font-family:var(--mono); font-size:12.5px; color:var(--violet-ink); font-weight:600}
.ord-store{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mut)}
.ord-sub{font-size:12.5px; color:var(--ink-mut); margin-top:5px; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.ord-sub>span:first-child{font-family:var(--mono); font-size:11.5px}
.ord-sub .ord-status{font-size:12px; padding:3px 24px 3px 9px; height:auto; min-height:28px; line-height:1.3; border-color:var(--line-strong); color:var(--ink-2); max-width:180px; border-radius:999px; background-position:right 9px center}
.ord-lines{margin-top:9px; display:flex; flex-direction:column; gap:6px}
.ord-line{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(120px,200px); gap:8px; align-items:center; font-size:13px}
.ord-line b{font-family:var(--mono); color:var(--violet-ink); min-width:26px; font-weight:600}
.ord-line .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ord-line select.mini{font-size:12px; padding:4px 26px 4px 9px; min-width:0; min-height:32px}
.ord-line .ord-art{color:var(--violet-ink)}
.ord-artwrap{display:flex; gap:4px; align-items:center; min-width:0}
.ord-artwrap select{flex:1; min-width:0}
.ord-fx{color:var(--violet-ink)}
.ord-art.warn{color:var(--bad); border-color:var(--bad)}
.ord-act{display:grid; grid-template-columns:1fr 1fr; gap:6px; align-content:start; align-self:flex-start; flex:none}
.ord-act .icon-btn{width:34px; height:34px}
.ord-act .icon-btn.print{border-color:transparent; background:var(--grad); color:#fff; box-shadow:0 4px 10px rgba(124,58,237,.25)}
.ord-act .icon-btn.print:hover{filter:brightness(1.06)}
.ord-note{font-size:12.5px; color:var(--ink-2); background:var(--warn-wash); border-radius:10px; padding:7px 10px; margin-top:8px}
.ord-note.bad{background:var(--bad-wash); color:var(--bad)}
.ord-note.bad .od-linkbtn{color:var(--bad); min-height:0}
.slip-preview{margin-top:14px; padding:12px; background:var(--ground); border:1px solid var(--line); border-radius:var(--r-sm); display:flex; flex-direction:column; align-items:center; gap:8px}
.slip-preview canvas{max-width:100%; max-height:360px; height:auto; background:#fff; image-rendering:pixelated; box-shadow:0 1px 3px rgba(0,0,0,.2)}
@media (max-width:520px){
  .ord-list{padding:10px 10px 12px}
  .ord-line{grid-template-columns:auto minmax(0,1fr)}
  .ord-line .ord-artwrap{grid-column:1 / -1}
  .ord-line .nm{white-space:normal; line-height:1.35}
  .ord-row{gap:10px; padding:12px 12px 12px 14px}
}
#ordFilter{padding:2px 0}
.ord-filters{display:flex; gap:9px; padding:12px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center}

/* device chooser */
.dev-list{display:flex; flex-direction:column; gap:8px; margin:6px 0 12px}
.dev-item{display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--ground); cursor:pointer; text-align:left; font:inherit; color:inherit; width:100%; transition:border-color var(--t), background-color var(--t)}
.dev-item:hover{border-color:var(--violet); background:var(--well)}
.dev-item[disabled]{opacity:.5}
.dev-item.busy{border-color:var(--violet); background:var(--wash); opacity:1}
.dev-item.busy .kind::after{content:" · connecting"}
.dev-item b{font-size:14.5px; font-weight:700}
.dv-main{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; align-items:flex-start}
.dv-name{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.dv-main small{font-size:11px; color:var(--ink-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--mono)}
.dv-sig{font-family:var(--sans); font-weight:600}
.dv-sig.strong,.dv-sig.good{color:var(--ok)} .dv-sig.weak{color:var(--warn)} .dv-sig.faint{color:var(--bad)}
.dv-badge{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:2px 7px; white-space:nowrap}
.dv-badge.last{background:var(--wash); color:var(--violet-ink)}
.dv-badge.near{background:var(--ok-wash); color:var(--ok)}
.dv-note{font-size:11px; color:var(--bad); font-family:var(--sans)}
.dev-item .kind{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mut); flex:none}
.dev-item .kind.spp{color:var(--ok)}
.dev-empty{padding:18px; text-align:center; color:var(--ink-mut); font-size:13.5px; border:1.5px dashed var(--line-strong); border-radius:var(--r-sm)}

/* tune the print */
.fx-card{max-width:600px}
.fx-preview-wrap{margin:2px 0 14px}
.fx-preview{overflow-x:auto; overflow-y:hidden; background:repeating-conic-gradient(var(--well) 0 25%,var(--ground) 0 50%) 0 0/16px 16px; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; text-align:center}
.fx-preview canvas{image-rendering:pixelated; image-rendering:crisp-edges; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); display:inline-block; max-width:100%; height:auto}
.fx-preview-bar{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap}
.fx-sliders{display:flex; flex-direction:column; gap:10px; margin:4px 0 12px}
.fx-s{display:block}
.fx-l{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:3px}
.fx-l b{font-family:var(--mono); font-weight:600; color:var(--violet-ink)}
.fx-s input[type=range]{width:100%; margin:0; accent-color:var(--violet)}
.fx-row{display:grid; grid-template-columns:1fr 1fr; gap:11px}
@media (max-width:430px){ .fx-row{grid-template-columns:1fr} }
.fx-checks{display:flex; flex-wrap:wrap; gap:4px 18px; margin:2px 0 8px}

/* ── 6. overlays ───────────────────────────────────────────── */
.odwrap{position:fixed; inset:0; z-index:80; background:var(--ground); overflow:auto; animation:odin .18s ease}
@keyframes odin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
body.od-open{overflow:hidden}
.od{max-width:780px; margin:0 auto; padding:0 0 calc(var(--nav-safe) + 24px)}
.od-top{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px;
  background:color-mix(in srgb,var(--ground) 86%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
}
.od-hd{flex:1; min-width:0}
.od-hd h2{font-size:17px; font-family:var(--mono); letter-spacing:.02em; font-weight:600}
.od-sub{font-size:12px; color:var(--ink-mut); margin-top:4px; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.od-sub > .sep{display:inline-flex; align-items:center; gap:6px}
.od-sub > .sep + .sep::before{content:"\00b7"; opacity:.6}
.od-sub .tag{margin:0}
.od-body{padding:14px 14px 0; display:flex; flex-direction:column; gap:12px}
.od-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px}
.od-card h3{font-size:10.5px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut); margin-bottom:11px; font-weight:600}
.od-name{font-size:17px; font-weight:700; letter-spacing:-.01em}
.od-link{font-size:13.5px; color:var(--violet-ink); display:inline-block; margin-top:3px; font-weight:600}
.od-mono{font-family:var(--mono); font-size:13px; color:var(--ink-2); margin-top:3px}
.od-addr{margin:9px 0 10px; font-size:14px; line-height:1.6; color:var(--ink-2)}
.od-line{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px}
.od-line:last-child{border-bottom:0}
.od-line b{font-family:var(--mono); color:var(--violet-ink); font-weight:600}
.od-line em{font-style:normal; color:var(--ink-mut); font-size:12.5px}
.od-totals{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-strong); font-size:13px; color:var(--ink-mut)}
.od-totals b{font-family:var(--display); font-size:18px; color:var(--ink); font-weight:700}
.od-totals em{font-style:normal; font-size:11.5px; color:var(--ink-mut); font-weight:400}
.od-sts{display:flex; flex-wrap:wrap; gap:7px}
.od-st{font-size:13px; font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; padding:8px 15px; min-height:36px; cursor:pointer}
.od-st:hover{border-color:var(--violet); color:var(--violet-ink)}
.od-st.on{background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--glow)}
.od-warn{font-size:13px; line-height:1.55; background:var(--warn-wash); color:var(--ink-2); border-radius:10px; padding:9px 12px; margin-bottom:9px}
.od-warn.bad{background:var(--bad-wash); color:var(--bad)}
/* buying labels in bulk, and looking at them before they print */
.buy-card{max-width:620px}
.buy-row{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line)}
.buy-row:last-child{border-bottom:0}
.buy-row.off{opacity:.55}
.buy-main{flex:1; min-width:0}
.buy-top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.buy-top b{font-size:14.5px}
.buy-ref{font-family:var(--mono); font-size:11px; color:var(--violet-ink); letter-spacing:.03em}
.buy-sub{font-size:12.5px; color:var(--ink-mut); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.buy-svcrow{margin-top:7px}
.buy-svcrow .mini{width:100%; max-width:100%; font-size:12.5px; min-height:36px}
.buy-svc{font-size:12.5px; color:var(--ink-2); font-weight:600}
.buy-right{flex:none; text-align:right; min-width:74px; max-width:110px; padding-top:2px}
.buy-amt{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}
.buy-st{font-size:11.5px; font-family:var(--mono); letter-spacing:.04em; color:var(--ink-mut); text-transform:uppercase}
.buy-st.busy{color:var(--violet-ink)}
.buy-st.ok{color:var(--ok); text-transform:none; font-family:var(--sans); font-size:12.5px; font-weight:600}
.buy-st.bad{color:var(--bad); text-transform:none; font-family:var(--sans); font-size:12px; font-weight:600}
.buy-st.skip{text-transform:none; font-family:var(--sans); font-size:12px}
.buy-why{font-size:12.5px; line-height:1.5; margin-top:5px; color:var(--ink-mut)}
.buy-why.bad{color:var(--bad)}
.buy-why.ok{color:var(--ok)}
/* the footer is sticky INSIDE the scrolling card, so the last row needs room to clear it */
.buy-card .pad,.lab-card .pad{padding-bottom:104px}
.buy-foot{position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:13px 18px calc(13px + env(safe-area-inset-bottom))}
.buy-total{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px}
.buy-total span{font-size:13px; color:var(--ink-mut)}
.buy-total b{font-size:21px; font-weight:800; font-variant-numeric:tabular-nums}
.buy-foot .hint{margin:0 0 10px}

.lab-card{max-width:760px}
.lab-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:620px){ .lab-grid{grid-template-columns:1fr 1fr} }
.lab-item{margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--ground)}
.lab-shot{background:#fff; display:flex; align-items:center; justify-content:center; min-height:200px; padding:10px}
.lab-shot img{max-width:100%; max-height:52vh; width:auto; height:auto; display:block; image-rendering:crisp-edges}
.lab-load{font-size:12.5px; color:var(--ink-mut)}
.lab-load.bad{color:var(--bad); text-align:center; padding:0 14px; line-height:1.5}
.lab-item figcaption{padding:11px 13px 13px; border-top:1px solid var(--line)}
.lab-cap{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.lab-cap b{font-size:14px}
.lab-cap span{font-family:var(--mono); font-size:11px; color:var(--violet-ink)}
.lab-trk{font-size:11.5px; color:var(--ink-mut); margin:3px 0 9px}

/* the shipped-email receipt: what we told the customer and what became of it */
.od-receipt{margin:11px 0 3px; padding:11px 13px; border-radius:12px; background:var(--well); border:1px solid var(--line)}
.od-receipt.ok{background:var(--ok-wash); border-color:transparent}
.od-receipt.warn{background:var(--warn-wash); border-color:transparent}
.od-receipt.bad{background:var(--bad-wash); border-color:transparent}
.od-rcpt-top b{font-size:13.5px; font-weight:600; line-height:1.5; display:block}
.od-receipt.ok .od-rcpt-top b{color:var(--ok)}
.od-receipt.bad .od-rcpt-top b{color:var(--bad)}
.od-steps{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.od-step{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--surface); color:var(--ink-mut); opacity:.55}
.od-step.on{opacity:1; color:var(--ink-2); font-weight:600}
.od-step em{font-style:normal; text-transform:none; letter-spacing:0; opacity:.75; margin-left:3px}
.od-detail{margin-top:7px; font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--ink-mut); background:var(--surface); border-radius:8px; padding:7px 9px; word-break:break-word}
.od-ok{font-size:13px; line-height:1.55; background:var(--ok-wash); color:var(--ok); border-radius:10px; padding:9px 12px; margin-bottom:9px}
.od-ok b{font-weight:700}
#odAddrEdit .od-editor{margin-top:12px}
#odZipHint:empty{display:none}
.od-have{font-size:14px; font-weight:700; color:var(--ok); margin-bottom:10px}
.od-ship{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin-bottom:11px}
.od-shiprow{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13.5px}
.od-shiprow:last-child{border-bottom:0}
.od-shiprow span{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mut); width:56px; flex:none}
.od-shiprow b{flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis}
.od-none{color:var(--ink-mut); font-style:normal}
.od-rates{display:flex; flex-direction:column; gap:8px; margin-top:11px}
.od-rate{display:flex; align-items:center; gap:10px; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:11px 12px}
.od-rate.pref{border-color:var(--ok)}
.od-rl{flex:1; min-width:0; font-size:13.5px}
.od-rl .tag{margin-left:6px}
.od-days{font-family:var(--mono); font-size:11px; color:var(--ink-mut); margin-left:6px}
.od-amt{font-family:var(--display); font-weight:700; font-size:15px; flex:none}
.od-editor{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; margin-top:11px; background:var(--ground)}
.od-editor>b{display:block; font-size:13.5px; margin-bottom:9px}
.od-note{border-bottom:1px solid var(--line); padding:9px 0; font-size:14px; line-height:1.55}
.od-note:last-of-type{border-bottom:0}
.od-notemeta{font-family:var(--mono); font-size:10.5px; color:var(--ink-mut); margin-top:4px}
.od-noteadd{display:flex; gap:8px; align-items:flex-end; margin-top:10px}
.od-noteadd textarea{flex:1}
.od-printed{font-size:12.5px; color:var(--ink-mut); margin-top:9px}

.modal{position:fixed; inset:0; z-index:90; background:rgba(27,20,48,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; padding:0}
.modal-card{background:var(--surface); border-radius:22px 22px 0 0; width:100%; max-width:560px; max-height:88dvh; overflow:auto; box-shadow:var(--shadow-lg); animation:up .28s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(48px); opacity:.4}to{transform:none; opacity:1}}
@media (min-width:640px){ .modal{align-items:center; padding:20px} .modal-card{border-radius:20px; animation:fade .18s ease} }

body:not(.on-orders) .bulkbar[data-for="orders"]{display:none !important}
body:not(.on-shipping) .bulkbar[data-for="shipping"]{display:none !important}
.bulkbar{position:fixed; left:0; right:0; z-index:75; bottom:calc(var(--nav-safe) + 8px); padding:0 10px; pointer-events:none; animation:bulkin .16s ease}
@media (min-width:900px){ .bulkbar{bottom:20px; padding:0 var(--gut); padding-left:calc(var(--rail) + var(--gut))} }
@keyframes bulkin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.bulkbar-in{
  pointer-events:auto; max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:999px;
  box-shadow:var(--shadow-lg); padding:9px 10px 9px 20px;
}
.bulk-n{font-weight:700; font-size:13.5px; white-space:nowrap; flex:none}
.bulk-clear-m{display:none}
.bulk-acts{display:flex; gap:7px; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1 1 auto; min-width:0}
.bulk-acts .mini{padding:7px 28px 7px 12px; font-size:12.5px; border-radius:999px; min-height:36px}
.bulkbar.busy .bulk-acts{opacity:.5; pointer-events:none}
.bulkbar.busy .bulk-acts #ordPrintAll{opacity:1; pointer-events:auto}
body.has-bulk #view-orders,body.has-bulk #view-shipping{padding-bottom:86px}
@media (max-width:640px){
  .bulkbar-in{border-radius:16px; padding:10px; gap:8px}
  .bulk-n{width:100%; display:flex; align-items:center; justify-content:space-between}
  .bulk-clear-m{display:inline-flex} #ordBulkClear{display:none}
  .bulk-acts{display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%}
  .bulk-acts #ordPrintAll{grid-column:1 / -1; min-height:42px; font-size:14px}
  .bulk-acts .btn{min-height:38px; font-size:13px; padding:6px 10px; white-space:normal; line-height:1.15}
  .bulk-acts .mini{grid-column:1 / -1; min-height:38px}
}

.toast{
  position:fixed; left:50%; bottom:calc(var(--nav-safe) + 14px); transform:translate(-50%,14px);
  background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); line-height:1.35;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:95; max-width:calc(100% - 28px); text-align:center;
}
:root[data-theme="dark"] .toast{background:var(--surface); color:var(--ink); border:1px solid var(--line-strong)}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast.bad{background:var(--bad); color:#fff}
@media (min-width:900px){ .toast{bottom:22px; left:calc(50% + var(--rail) / 2)} }
body.has-bulk .toast{bottom:auto; top:calc(env(safe-area-inset-top) + var(--top-h) + 12px); transform:translate(-50%,-10px)}
body.has-bulk .toast.on{transform:translate(-50%,0)}

/* ── 7. motion, focus, print ───────────────────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:none; box-shadow:var(--focus)}
.btn,.btn2,.icon-btn,.icobtn,.seg button,.chip,.dev-item,.botbar a,.rail a,.od-linkbtn,.od-st,.mini,.fx-s input[type=range]{
  transition:background-color var(--t),border-color var(--t),color var(--t),transform var(--t),box-shadow var(--t),opacity var(--t),filter var(--t)}
.btn:active,.btn2:active,.icon-btn:active,.icobtn:active,.seg button:active,.chip:active,.dev-item:active,.botbar a:active,.od-st:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none !important; animation:none !important} html{scroll-behavior:auto} }
@media print{ .topbar,.botbar,.rail,.toast,.bulkbar{display:none !important} body{background:#fff} main{padding:0} }

/* ── shipping ── */
.ship-row.shipped{opacity:.62}
.ship-row.shipped::before{background:var(--ok)}
.ship-addr{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:var(--ink-2); min-width:0}
.ship-addr-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); font-size:12.5px}
.ord-line.one{grid-template-columns:auto minmax(0,1fr)}
.seg .n{font-family:var(--mono); font-size:10.5px; opacity:.7; margin-left:2px}
.seg .n:empty{display:none}
.ship-since{display:flex; align-items:center; gap:8px}
.ship-since .mini{max-width:160px; padding-right:11px; font-size:13px}
@media (max-width:520px){ .ship-addr-t{white-space:normal; line-height:1.4} }

/* ═══ Label library (2026-09-21): artwork + microscopy tabs on the Labels tab ═══ */
#labLibCard{margin-bottom:16px}
#labLibCard .lib-qty{max-width:150px; margin:10px 0 2px}
#libHint{margin:10px 0 0}
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-top:12px}
.lib-it{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.lib-img{background:#fff; padding:9px; display:flex; align-items:center; justify-content:center; min-height:104px}
.lib-img img{max-width:100%; max-height:150px; width:auto; height:auto; display:block; image-rendering:auto}
.lib-it figcaption{padding:9px 11px 11px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:3px; flex:1}
.lib-nm{font-weight:700; font-size:13.5px; line-height:1.3}
.lib-mt{font-family:var(--mono); font-size:10.5px; color:var(--ink-2)}
.lib-act{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px}
.lib-empty{color:var(--ink-2); font-size:13.5px; margin:14px 0 4px}
@media (max-width:520px){
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .lib-img img{max-height:112px}
  .lib-act .btn{flex:1}
}
/* the Via row: the select names the provider, the bold slot just says whose choice it is */
.od-shiprow.via b{font-weight:500; font-size:12.5px}
.od-shiprow.via .mini{flex:none; max-width:150px; min-height:34px; font-size:13px}

/* ── 8. v53: the printer from anywhere ───────────────────────────
   One sheet (#prSheet) owns connecting and setting up the printer. It opens from
   the chip in the top bar, from a status row on each printing screen, and on its
   own when Print is pressed with nothing connected. */
.prchip{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px 0 11px; flex:none;
  border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--violet-ink);
  font:700 12.5px/1 var(--sans); cursor:pointer; max-width:150px; transition:border-color var(--t), background-color var(--t);
}
.prchip:hover{border-color:var(--violet)}
.prchip .pr-dot{display:none}
.prchip-ic{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}
.prchip-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prchip.on{color:var(--ink); border-color:color-mix(in srgb,var(--ok) 40%,var(--line-strong)); background:var(--ok-wash)}
.prchip.on .pr-dot{display:block}
.prchip.on .prchip-ic{display:none}

.prrow{
  display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; margin:0;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ground);
  font:inherit; color:inherit; text-align:left; cursor:pointer; transition:border-color var(--t);
}
.prrow:hover{border-color:var(--violet)}
.prrow-t{flex:1; min-width:0; font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prrow-a{flex:none; font-size:12.5px; font-weight:700; color:var(--violet-ink)}
.prrow.on .pr-dot{background:var(--ok); opacity:1; box-shadow:0 0 0 3px var(--ok-wash)}
.printer .prrow{border:0; padding:0; background:none}
.printer .prrow + .pr-progress{margin-top:12px}

@media (min-width:900px){
  .rail-pr{background:none; border:0; width:100%; text-align:left; font:inherit; cursor:pointer}
}
.pr-card{max-width:520px}
.pr-card .card-h h2{display:flex; align-items:center; gap:9px}
.pr-sheet-box{margin-top:0}
.pr-then{margin:0 0 12px; padding:11px 13px; border-radius:var(--r-sm); background:var(--wash); color:var(--violet-ink); font-size:13.5px; font-weight:700; line-height:1.45}
.pr-sheet-acts{margin-top:12px}

.set-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px 0 14px; margin-bottom:14px; border-bottom:1px solid var(--line)}
.set-row b{display:block; font-size:14px}
.set-row em{display:block; font-style:normal; font-size:12.5px; color:var(--ink-mut); margin-top:2px}

/* ── 9. v53: compact view header ─────────────────────────────
   One line: title and a short live summary on the left, tools on the right.
   Replaces the kicker + serif title + subline stack that took a third of a
   phone screen before the first order. */
.vhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 2px 14px}
.vhead-t{min-width:0}
.vhead h1{font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:.03em; text-transform:uppercase; line-height:1.1}
.vhead-sub{color:var(--ink-mut); font-size:13px; margin:4px 0 0; line-height:1.35}
.vhead-act{display:flex; gap:8px; align-items:center; flex:none}
.since-chip{position:relative; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font:700 12.5px/1 var(--sans); color:var(--ink-2); cursor:pointer; white-space:nowrap; overflow:hidden}
.since-chip:hover{border-color:var(--violet)}
.since-chip svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.since-chip input{position:absolute; inset:0; opacity:0; width:100%; height:100%; min-height:0; cursor:pointer; border:0; padding:0; margin:0}
.icobtn.spin svg{animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 10. v53: Shipping, a dispatch queue ────────────────────── */
.stages{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:0 0 12px; padding:5px; background:var(--well); border:1px solid var(--line); border-radius:18px}
.stages button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:58px; padding:7px 4px; border:0; border-radius:13px; background:transparent; font:inherit; color:var(--ink-mut); cursor:pointer; transition:background-color var(--t), box-shadow var(--t)}
.stages .n{font:800 20px/1 var(--sans); color:var(--ink-mut); font-variant-numeric:tabular-nums}
.stages button.has .n{color:var(--ink-2)}
.stages span{font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap}
.stages button.on{background:var(--surface); color:var(--ink); box-shadow:0 2px 10px rgba(40,28,80,.13)}
.stages button.on .n{color:var(--violet-ink)}
.stages.searching button{opacity:.55}

.shp-tools{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line)}
.shp-tools .search{flex:1; min-width:0}
.shp-tools .search input{height:40px; border-radius:999px; padding:0 15px; font-size:14.5px}
.selall{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 13px 0 11px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font:700 13px/1 var(--sans); color:var(--ink-2); cursor:pointer; flex:none}
.selall .box{width:18px; height:18px; border-radius:5px; border:1.8px solid var(--ink-mut); display:grid; place-items:center; transition:background-color var(--t)}
.selall[aria-pressed="true"] .box{background:var(--violet); border-color:var(--violet)}
.selall[aria-pressed="true"] .box::after{content:""; width:9px; height:5px; border:2px solid #fff; border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg)}
.selall.some .box{border-color:var(--violet)}
.selall.some .box::after{content:""; width:8px; height:2px; background:var(--violet); border-radius:2px}

.shp-list{display:flex; flex-direction:column}
.shp-row{position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px 11px 14px; border-bottom:1px solid var(--line); background:var(--surface); cursor:pointer; transition:background-color var(--t)}
.shp-row:last-child{border-bottom:0}
.shp-row:hover{background:var(--ground)}
.shp-row.picked{background:var(--wash)}
.shp-row.picked::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad)}
.shp-row .osel{width:21px; height:21px; accent-color:var(--violet); flex:none; margin:0; cursor:pointer}
.shp-main{flex:1; min-width:0}
.shp-l1{display:flex; align-items:center; gap:8px; min-width:0}
.shp-name{font-weight:700; font-size:15px; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shp-l2{font-size:12.5px; color:var(--ink-mut); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shp-flags{display:flex; gap:5px; flex-wrap:wrap; margin-top:7px}
.flag{font:600 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:4px 7px; border-radius:999px; background:var(--well); color:var(--ink-2); border:0; white-space:nowrap}
button.flag{cursor:pointer}
.flag.bad{background:var(--bad-wash); color:var(--bad)}
.flag.warn,.flag.note{background:var(--warn-wash); color:var(--warn)}
.flag.ok{background:var(--ok-wash); color:var(--ok)}
.flag.intl{background:var(--wash); color:var(--violet-ink)}
.flag.stage-need{background:var(--warn-wash); color:var(--warn)}
.flag.stage-ready{background:var(--wash); color:var(--violet-ink)}
.flag.stage-shipped{background:var(--ok-wash); color:var(--ok)}
.shp-act{display:flex; align-items:center; gap:6px; flex:none}
.shp-act .btn{min-height:38px; padding:6px 15px; font-size:13.5px}
.shp-act .icon-btn{width:38px; height:38px}
.shp-sent{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--ok); padding:0 4px}
.shp-sent svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.shp-row.st-shipped .shp-name{color:var(--ink-2)}
.shp-foot{padding:11px 14px; font-size:12.5px; color:var(--ink-mut); border-top:1px solid var(--line); line-height:1.5}
.shp-list .empty{padding:36px 20px}

/* the shipping bulk bar: the next step up front, everything else under More */
.sbulk .bulkbar-in{display:block; border-radius:18px; padding:11px 12px 12px}
.sbulk .bulk-n{width:auto; flex:1; display:block; min-width:0; overflow:hidden; text-overflow:ellipsis}
.sbulk-top{display:flex; align-items:center; gap:16px; padding:0 4px 9px}
.sbulk-link{background:none; border:0; font:700 13px/1 var(--sans); color:var(--violet-ink); cursor:pointer; padding:6px 0; white-space:nowrap}
.sbulk-link[hidden]{display:none}
.sbulk-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sbulk-acts .btn{min-height:46px; font-size:14px; white-space:normal; line-height:1.15; padding:6px 10px}
.sbulk-acts .btn:only-child{grid-column:1 / -1}
.sbulk.busy .sbulk-acts{opacity:.5; pointer-events:none}
.sbulk-menu{pointer-events:auto; max-width:560px; margin:0 auto 8px; background:var(--surface); border:1px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; animation:bulkin .14s ease}
.sbulk-menu[hidden]{display:none}
.sbulk-menu button{background:none; border:0; text-align:left; font:600 14.5px/1.2 var(--sans); color:var(--ink); padding:14px; border-radius:11px; cursor:pointer}
.sbulk-menu button:hover{background:var(--well)}
body.has-bulk #view-shipping{padding-bottom:140px}
@media (min-width:900px){
  .sbulk .bulkbar-in{display:flex; align-items:center; gap:14px; border-radius:999px; padding:9px 10px 9px 22px}
  .sbulk-top{padding:0; flex:1}
  .sbulk-acts{display:flex; gap:8px}
  .sbulk-acts .btn{min-height:40px; white-space:nowrap}
  .sbulk-menu{max-width:320px; margin-right:max(0px, calc((100% - 1180px) / 2))}
  body.has-bulk #view-shipping{padding-bottom:90px}
}
/* row actions are tonal: the gradient belongs to the ONE main action on screen (the bulk bar) */
.shp-act .btn.primary{background:var(--wash); color:var(--violet-ink); border-color:transparent; box-shadow:none}
.shp-act .btn.primary:hover{background:color-mix(in srgb,var(--violet) 16%,var(--wash)); filter:none}
/* the sheet: status line, then one big button */
.pr-sheet-box .pr-head{flex-wrap:wrap}
.pr-sheet-box #prConnect{flex:1 0 100%; order:3; min-height:48px; font-size:15px; margin-top:12px}
.pr-sheet-box #prConnect:not(.primary){min-height:40px; font-size:13.5px}

/* ── 11. v53: Orders, tightened ─────────────────────────────── */
.vhead-sync{color:var(--ink-mut)}
.ord-tools{padding:12px 12px 0}
.ord-tools .stages{margin-bottom:0}
.stages.four{grid-template-columns:repeat(4,1fr)}
.stages.four span{font-size:11px}
.ord-tools .shp-tools{padding:10px 0 12px; border-bottom:0}
.shp-tools .mini.days{flex:none; width:auto; min-height:40px; height:40px; padding:0 30px 0 13px; border-radius:999px; font-size:13.5px}
.ord-list{padding:4px 12px 12px; gap:8px}
.ord-row{padding:11px 11px 11px 14px; gap:11px; border-radius:14px}
.ord-row .osel{margin-top:1px; width:21px; height:21px}
.ord-cust{font-size:15px}
.ord-meta{font-size:12.5px; color:var(--ink-mut); margin-top:3px; line-height:1.4}
.ord-flags{display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-top:7px}
.ord-flags .ord-status{font-size:12px; padding:3px 24px 3px 10px; height:28px; min-height:28px; line-height:1.2; border-color:var(--line-strong); color:var(--ink-2); max-width:170px; border-radius:999px; background-position:right 9px center}
.ord-lines{margin-top:8px; gap:5px}
.ord-line{font-size:13px}
.ord-act{grid-template-columns:36px 36px; gap:6px}
.ord-act .ord-print{grid-column:1 / -1; min-height:36px; padding:4px 10px; font-size:13px; background:var(--wash); color:var(--violet-ink); border-color:transparent; box-shadow:none}
.ord-act .ord-print:hover{background:color-mix(in srgb,var(--violet) 16%,var(--wash))}
.ord-act .icon-btn{width:36px; height:36px}
.ord-row.picked::before{background:var(--grad)}
/* Orders row as a grid: tick | who + when | Print, then the items across the full width */
.ord-row{display:grid; grid-template-columns:21px minmax(0,1fr) auto; grid-template-areas:"sel head act" ". body body"; column-gap:11px; row-gap:0; align-items:start}
.ord-row .osel{grid-area:sel; margin-top:2px}
.ord-head{grid-area:head; min-width:0}
.ord-act{grid-area:act; display:flex; grid-template-columns:none}
.ord-act .ord-print{min-width:72px}
.ord-body{grid-area:body; min-width:0}
.ord-row .ord-top{flex-wrap:nowrap}
.ord-row .ord-cust{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
@media (max-width:520px){ .ord-row{padding:11px 11px 12px 13px} .ord-line .nm{white-space:normal} }
/* a select inside the More menu */
.sbulk-sel{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 14px; font:600 14.5px/1.2 var(--sans); color:var(--ink)}
.sbulk-sel select{width:auto; min-height:40px; border-radius:999px; padding:0 30px 0 13px; font-size:13.5px}
/* printing: Stop must stay pressable while the rest of the bar rests */
.sbulk.busy .sbulk-acts #ordPrintAll{opacity:1; pointer-events:auto}
body.has-bulk #view-orders{padding-bottom:140px}
@media (min-width:900px){ body.has-bulk #view-orders{padding-bottom:90px} }
/* a tonal button on a selected (tinted) row needs a white ground or it vanishes */
.ord-row.picked .ord-print,.shp-row.picked .shp-act .btn.primary{background:var(--surface)}
.ord-row.picked .ord-print:hover,.shp-row.picked .shp-act .btn.primary:hover{background:var(--surface); border-color:var(--violet)}

/* ── 12. v53: small fixes across the app ─────────────────────── */
/* a row of three buttons wraps instead of running off the edge of a phone */
.btn-row.stack{flex-wrap:wrap}
.btn-row.stack .btn{flex:1 1 auto}
/* the older page headers match the compact one on a phone: no kicker, smaller title */
@media (max-width:640px){
  .pgh{margin:2px 2px 14px; align-items:center}
  .pgh .kick{display:none}
  .pgh h1{font-size:1.3rem; letter-spacing:.03em}
  .pgh-sub{font-size:13px; margin-top:4px}
}

/* 13. how the parcel reaches the carrier (v58) */
.od-rl .od-hand{margin-left:6px}
.od-hnote{font-size:12px; line-height:1.4; color:var(--ink-2); margin-top:4px}
.od-rate.hand-unmarked{border-color:var(--warn-wash)}

/* ═══════════ 13. Payments (v60): paid or not, at a glance ═══════════ */
body:not(.on-payments) .bulkbar[data-for="payments"]{display:none !important}
body.has-bulk #view-payments{padding-bottom:110px}

/* the pill: on every order row, the order screen and the Payments list.
   The row's left edge stays the PRINT state (green = printed); payment has its own words. */
.paypill{display:inline-flex; align-items:center; gap:4px; font:800 11px/1 var(--sans); letter-spacing:.02em; padding:5px 9px; border-radius:999px; white-space:nowrap; vertical-align:middle}
.paypill.sm{font-size:10.5px; padding:4px 8px}
.paypill.paid{background:var(--ok-wash); color:var(--ok); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 32%,transparent)}
.paypill.unpaid{background:var(--warn-wash); color:var(--warn); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 38%,transparent)}
.ord-flags .paypill{margin-right:2px}
.flag.info{background:var(--wash); color:var(--violet-ink)}

/* the two money tiles are the tabs */
.money-tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 12px}
.money-tile{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; padding:14px 16px; border-radius:18px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:transform var(--t), box-shadow var(--t), background-color var(--t)}
.money-tile:hover{transform:translateY(-1px)}
.money-tile .mt-k{font:800 11px/1.2 var(--sans); letter-spacing:.07em; text-transform:uppercase}
.money-tile .mt-v{font:800 27px/1.05 var(--sans); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.money-tile .mt-s{font-size:12.5px; color:var(--ink-mut)}
.money-tile.owed .mt-k{color:var(--warn)}
.money-tile.paid .mt-k{color:var(--ok)}
.money-tile.on.owed{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 45%,transparent); box-shadow:0 6px 20px color-mix(in srgb,var(--warn) 16%,transparent)}
.money-tile.on.paid{background:var(--ok-wash); border-color:color-mix(in srgb,var(--ok) 45%,transparent); box-shadow:0 6px 20px color-mix(in srgb,var(--ok) 16%,transparent)}
.money-tile:not(.on) .mt-v{color:var(--ink-2)}
@media (max-width:420px){ .money-tile{padding:12px 13px} .money-tile .mt-v{font-size:22px} .money-tile .mt-k{font-size:10.5px} }

.pchips{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px}
.pchips[hidden]{display:none}
.pchip{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:8px 12px; font:700 12.5px/1 var(--sans); cursor:pointer}
.pchip b{margin-left:3px; color:var(--ink-mut); font-variant-numeric:tabular-nums}
.pchip.on{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.pchip.on b{color:inherit; opacity:.8}

/* rows */
.pay-row{position:relative; display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--line); background:var(--surface); cursor:pointer; transition:background-color var(--t)}
.pay-row:last-child{border-bottom:0}
.pay-row:hover{background:var(--ground)}
.pay-row::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0}
.pay-row.is-unpaid::before{background:var(--warn)}
.pay-row.is-paid::before{background:var(--ok)}
.pay-row.picked{background:var(--wash)}
.pay-row .osel{width:21px; height:21px; accent-color:var(--violet); flex:none; margin:0; cursor:pointer}
.pay-main{flex:1; min-width:0}
.pay-l1{display:flex; align-items:center; gap:6px; min-width:0}
.pay-name{font-weight:700; font-size:15px; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pay-l2{margin-top:2px; font-size:12.5px; color:var(--ink-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pay-flags{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
.pay-side{display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none}
.pay-amt{font:800 17px/1 var(--sans); font-variant-numeric:tabular-nums}
.is-unpaid .pay-amt{color:var(--warn)}
.is-paid .pay-amt{color:var(--ok)}
.pay-side .btn{min-height:36px; padding:6px 14px; font-size:13px; background:var(--wash); color:var(--violet-ink); border-color:transparent; box-shadow:none}
.pay-row.picked .pay-side .btn{background:var(--surface)}

/* the composer */
.pay-card{width:min(760px,100%)}
.pay-pad{display:flex; flex-direction:column; gap:10px}
.pay-to{padding:10px 12px; border-radius:12px; background:var(--well); border:1px solid var(--line)}
.pto-l1{display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0}
.pto-who{font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pto-who .muted{font-weight:500; margin-left:4px}
.pto-l2{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:5px; font-size:13px}
.pto-amt{font:800 16px/1 var(--sans); font-variant-numeric:tabular-nums}
.pto-ref{font:700 12px/1 var(--mono); letter-spacing:.05em; padding:4px 7px; border-radius:6px; background:var(--ink); color:var(--surface)}
.pto-pager{display:flex; align-items:center; gap:2px; flex:none; font-size:12.5px; color:var(--ink-mut)}
.pto-pager .icon-btn{width:32px; height:32px}
.pseg-row{display:flex; gap:6px; flex-wrap:wrap}
.pseg{flex:1 1 auto; min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink-2); font:700 12.5px/1.15 var(--sans); white-space:nowrap; cursor:pointer}
.pseg.on{background:var(--wash); border-color:var(--violet); color:var(--violet-ink)}
.pay-opts{display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:10px; align-items:start}
.pay-opts .fld{margin:0}
.pay-opts textarea{min-height:42px; resize:vertical}
@media (max-width:560px){ .pay-opts{grid-template-columns:1fr} }
.pay-prev{position:relative; height:min(56vh,560px); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#f4f2f8}
.pay-prev iframe{display:block; width:100%; height:100%; border:0; background:#f4f2f8}
.pay-busy{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; font-weight:700; color:var(--ink-2); background:color-mix(in srgb,var(--surface) 82%,transparent)}
.pay-busy[hidden]{display:none}
.pay-result{padding:10px 12px; border-radius:12px; background:var(--well); font-size:13.5px}
.pay-result ul{margin:6px 0 0; padding-left:18px}

/* the order screen */
.od-paybox{padding:12px 14px; border-radius:14px; border:1px solid var(--line)}
.od-paybox.unpaid{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.od-paybox.paid{background:var(--ok-wash); border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.odp-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.odp-amt{font:800 21px/1 var(--sans); font-variant-numeric:tabular-nums}
.odp-line{margin-top:7px; font-size:13.5px; line-height:1.45; color:var(--ink-2)}
.od-paybox .od-steps{margin-top:8px}
.od-paybox .btn-row{margin-top:10px}

/* ═══════════ 14. Link a computer, install the app (v61) ═══════════ */
.link-in{margin:0 0 6px}
.link-row{display:flex; gap:8px; margin-top:10px}
.link-row .input{flex:1; min-width:0; font:800 19px/1 var(--mono); letter-spacing:.16em; text-align:center; text-transform:uppercase}
.link-row .btn{flex:none}
.or{display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--ink-mut); font-size:12px}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--line)}
.link-out{margin:6px 0 12px; padding:16px 14px; border-radius:14px; background:var(--well); border:1px dashed var(--line-strong); text-align:center}
.link-big{font:800 32px/1.1 var(--mono); letter-spacing:.16em; color:var(--ink)}
.link-big.gone{opacity:.35; text-decoration:line-through}
@media (max-width:420px){ .link-row{flex-direction:column} .link-big{font-size:26px} }

/* ═══════════════════════════════════════════════════════════════════════════
   15. CULTURE CIPHER 3.0 (2026-09-24) - production polish.
   One Actions sheet for any set of orders, a sticky next-step bar on the order
   screen, one chip style, compact order rows, tighter phone chrome, drawn icons.
   Additive: everything above still applies; these rules refine it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* icons inside buttons, everywhere */
.btn,.btn2{display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn svg,.btn2 svg,.od-rcpt-top svg.i{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.od-rcpt-top svg.i{width:16px; height:16px; margin-right:6px; vertical-align:-3px}

/* ── one chip style: sentence case, readable, the same height as the pay pill ── */
.flag{display:inline-block; font:650 11.5px/1.15 var(--sans); letter-spacing:0; text-transform:none; padding:5px 9px; border-radius:999px; vertical-align:middle}
.flag::first-letter{text-transform:uppercase}
.flag.mono{font-family:var(--mono); font-size:11px; letter-spacing:.03em}
.paypill,.paypill.sm{font:750 11.5px/1.15 var(--sans); padding:5px 9px}
.tag{font:650 11.5px/1.15 var(--sans); letter-spacing:0; text-transform:none; border-radius:999px}

/* ── the bulk bars: primary, secondary, and a real More button ── */
.sbulk-acts{display:flex; gap:8px; align-items:stretch}
.sbulk-dyn{display:contents}
.sbulk-acts .btn{flex:1 1 0; min-width:0}
.sbulk-acts .more-btn,.more-btn{flex:0 0 auto !important; padding:0 14px; gap:6px; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong)}
.more-btn svg{width:18px; height:18px; fill:currentColor !important; stroke:none !important}
.sbulk-acts .more-btn span{font-weight:700}
@media (max-width:380px){ .sbulk-acts .more-btn span{display:none} .sbulk-acts .more-btn{padding:0 12px} }

/* ── the Actions sheet ── */
.act-card{width:min(560px,100%); padding:0; overflow:hidden; display:flex; flex-direction:column; max-height:min(86vh,760px)}
.act-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 12px; border-bottom:1px solid var(--line)}
.act-hd{min-width:0}
.act-hd h2{font-size:18px; font-weight:800; letter-spacing:-.01em; margin:0; line-height:1.2}
.act-hd p{margin:3px 0 0; font-size:13px; color:var(--ink-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.act-body{overflow:auto; padding:6px 10px calc(14px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch}
.act-sec{padding:8px 0 4px}
.act-sec + .act-sec{border-top:1px solid var(--line)}
.act-k{font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut); padding:8px 8px 6px}
.act-item{display:flex; align-items:center; gap:12px; width:100%; padding:10px 8px; border:0; border-radius:14px; background:transparent; font:inherit; color:var(--ink); text-align:left; cursor:pointer; transition:background-color var(--t), transform var(--t)}
.act-item:hover{background:var(--well)}
.act-item:active{transform:scale(.985)}
.act-item[disabled]{opacity:.42; cursor:default}
.act-item[disabled]:hover{background:transparent}
.act-ic{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--wash); color:var(--violet-ink)}
.act-ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.act-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.act-t b{font-size:15px; font-weight:750; letter-spacing:-.005em}
.act-t em{font-style:normal; font-size:12.5px; line-height:1.35; color:var(--ink-mut)}
.act-go{flex:none; color:var(--ink-mut)}
.act-go svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.act-item.danger .act-ic{background:var(--bad-wash); color:var(--bad)}
.act-item.danger b{color:var(--bad)}

/* ── the order screen: next step + More, always in reach ── */
.od{padding-bottom:0}
.od-actbar{position:sticky; bottom:0; z-index:6; display:flex; gap:8px; margin-top:14px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground) 88%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
.od-actbar:empty{display:none}
.od-actbar .btn{min-height:48px; font-size:15px}
.od-actbar .btn.primary{flex:1; min-width:0}
.od-actbar .btn.primary span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (min-width:780px){ .od-actbar{border-radius:18px 18px 0 0; border:1px solid var(--line); border-bottom:0} }

/* ── order rows: the same information, far less height ── */
.ord-list{gap:8px}
.ord-row{padding:12px 12px 12px 15px}
.ord-lines{margin-top:8px; gap:4px}
.ord-line{grid-template-columns:auto minmax(0,1fr) auto; gap:6px 8px; font-size:13px}
.ord-line .nm{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35}
.ord-line .ord-artwrap{grid-column:auto; justify-content:flex-end}
.ord-line select.mini.ord-art{min-height:28px; height:28px; font-size:11.5px; padding:0 22px 0 9px; border-radius:999px; max-width:136px; background-color:var(--well); border-color:transparent; color:var(--violet-ink); background-position:right 7px center}
.ord-line select.mini.ord-art.warn{background-color:var(--warn-wash); color:var(--warn); border-color:transparent}
.ord-line .ord-fx{width:28px; height:28px}
.ord-note{padding:6px 10px; margin-top:7px; font-size:12.5px}
@media (max-width:520px){
  .ord-line{grid-template-columns:auto minmax(0,1fr) auto}
  .ord-line .ord-artwrap{grid-column:auto}
  .ord-line select.mini.ord-art{max-width:118px}
}

/* ── tighter phone chrome: content starts sooner ── */
@media (max-width:899px){
  :root{--top-h:54px}
  .topbar-in{padding:6px 14px; gap:10px}
  .brandmark{width:34px; height:34px; border-radius:11px; font-size:15px}
  .brand-name{font-size:12.5px}
  .brand-sub{font-size:10px; margin-top:2px}
  .icobtn{width:36px; height:36px}
  .vhead{margin:0 2px 10px}
  .vhead h1{font-size:1.18rem}
  .vhead-sub{font-size:12.5px; margin-top:3px}
  .stages{padding:4px; gap:4px; border-radius:16px}
  .stages button{min-height:50px; padding:6px 4px; border-radius:12px}
  .stages .n{font-size:18px}
  .ord-tools{padding:10px 10px 0}
  .shp-tools{padding:9px 10px}
  .shp-tools .search input,.selall,.shp-tools .mini.days{height:38px; min-height:38px}
  .money-tile{padding:12px 14px}
}

/* ── the printer chip says what it is ── */
.prchip{gap:7px}

/* 3.0: label library cards - one wide Print, two small icon buttons */
.lib-act{display:flex !important; gap:6px; align-items:center; flex-wrap:nowrap}
.lib-act .lib-print{flex:1; min-width:0}
.lib-act .lib-ib{width:34px; height:34px; flex:none}
.lib-act .lib-ib svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
/* 3.0: the payment email footer - two full buttons, Send the bigger */
.pay-foot{display:flex; gap:10px}
.pay-foot .btn,.pay-foot .btn2{flex:1; min-height:48px}
.pay-foot #paySend{flex:2}
/* 3.0: an empty list says so with a mark, not just words */
.empty::before{content:""; display:block; width:46px; height:46px; margin:0 auto 12px; border-radius:15px;
  background:var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.3l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E") center/24px no-repeat}
/* 3.0: the store filter (only when a key works more than one store) - it had no styling at all */
.statchips{display:flex; gap:6px; overflow-x:auto; padding:12px 12px 0; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.statchips::-webkit-scrollbar{display:none}
.statchips[hidden]{display:none}
.statchips button{flex:none; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:8px 12px; font:700 12.5px/1 var(--sans); white-space:nowrap; cursor:pointer; transition:background-color var(--t), color var(--t)}
.statchips button b{margin-left:3px; color:var(--ink-mut); font-variant-numeric:tabular-nums}
.statchips button.on{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.statchips button.on b{color:inherit; opacity:.75}
.ord-note{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* ── Label library tabs (2026-09-27) ────────────────────────────────────────
   Three tabs stopped fitting one phone row: 120 + 114 + 126 px of nowrap
   buttons overflowed a 390 px viewport and clipped "Black Forest" clean off
   the right edge, so the tab was there but unreachable. Tightened padding and
   type buy enough back for all three on one row, and wrap is left on as the
   safety net for anything narrower. Scoped to #libTabs on purpose - .seg.wide
   is every other tab row in the app. */
#libTabs{flex-wrap:wrap; border-radius:18px}
/* the UI face has a narrow space glyph, so "Black Forest" reads as one word at this
   size - the same problem the strain names had on the labels themselves */
#libTabs button{min-width:0; word-spacing:.14em}
@media (max-width:560px){
  #libTabs{gap:3px}
  /* no negative tracking here: it collapses the space in "Black Forest" */
  #libTabs button{flex:1 1 auto; padding:7px 9px; font-size:12px}
  #libTabs .n{margin-left:3px}
}
@media (max-width:340px){
  #libTabs button{flex:1 1 calc(50% - 3px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. v68 (2026-09-29) - Move to top, and Looks paid.
   A pinned order sorts first in every to-do list until it ships. An unpaid
   order whose customer's exact name has paid (but could not be matched)
   says so and offers Mark paid; bank money no order claimed is listed.
   ═══════════════════════════════════════════════════════════════════════════ */
/* violet-ink on surface reads in both themes (light: deep violet + white; dark: pale violet + near black) */
.flag.top{display:inline-flex; align-items:center; gap:4px; background:var(--violet-ink); color:var(--surface)}
.flag.top svg{width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ord-row.pinned,.shp-row.pinned,.pay-row.pinned{background:color-mix(in srgb,var(--violet) 6%,var(--surface))}
.ord-row.pinned:hover,.shp-row.pinned:hover,.pay-row.pinned:hover{background:color-mix(in srgb,var(--violet) 10%,var(--surface))}
.ord-row.pinned.picked,.shp-row.pinned.picked,.pay-row.pinned.picked{background:var(--wash)}
#odSub .flag.top{vertical-align:middle}

.flag.looks{background:var(--ok-wash); color:var(--ok); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 38%,transparent); white-space:normal; line-height:1.3}
.pay-row.looks::before{background:linear-gradient(var(--warn) 50%,var(--ok) 50%)}
.pay-side .btn.okb{background:var(--ok-wash); color:var(--ok)}
.pay-side .btn.okb:hover{background:color-mix(in srgb,var(--ok) 18%,var(--ok-wash)); border-color:transparent}
.pay-row.picked .pay-side .btn.okb{background:var(--surface)}

.od-looks{margin-top:9px; padding:10px 12px; border-radius:12px; background:var(--ok-wash); color:var(--ink); font-size:13.5px; line-height:1.45; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
.od-looks b{display:block; color:var(--ok); margin-bottom:2px}

.pay-looks{display:flex; flex-direction:column; gap:6px; margin:0 0 12px; padding:12px 14px; border-radius:14px; background:var(--ok-wash); font-size:13.5px; line-height:1.45; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
.pay-looks b{color:var(--ok); font-size:14px}
.pay-looks .btn-row{margin-top:4px}

.pay-unmatched{margin:0 0 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.pay-unmatched[hidden]{display:none}
.pu-head{display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.pu-head:hover{background:var(--ground)}
.pu-head svg{width:18px; height:18px; flex:none; margin-left:auto; fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t)}
.pu-head[aria-expanded="true"] svg{transform:rotate(180deg)}
.pu-t{display:flex; flex-direction:column; gap:3px; min-width:0}
.pu-t b{font-size:14px}
.pu-t em{font-style:normal; font-size:12.5px; color:var(--ink-2)}
.pu-list{border-top:1px solid var(--line)}
.pu-row{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:10px 14px; border-bottom:1px solid var(--line)}
.pu-who{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pu-amt{font-size:14px}
.pu-meta{grid-column:1 / -1; font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.pu-foot{padding:10px 14px; font-size:12.5px; color:var(--ink-2); line-height:1.45}

/* ══════════ 16. POSTAGE BALANCE + TOP-UP (v69) ══════════
   The one ShipStation balance every carrier draws on: a chip on the Shipping header, a card in
   Settings, and a two-tap sheet (amount, then confirm) that adds funds. */
.bal-chip{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font:700 12.5px/1 var(--sans); color:var(--ink); cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums}
.bal-chip[hidden]{display:none}
.bal-chip:hover{border-color:var(--violet)}
.bal-chip svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; color:var(--ink-2)}
.bal-chip.low{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 45%,transparent); color:var(--warn)}
.bal-chip.low svg{color:var(--warn)}
.bal-amt{font-size:20px; font-variant-numeric:tabular-nums}
.bal-amt.low{color:var(--warn)}
.tu-card{width:min(460px,100%)}
.tu-bal{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:var(--ground); margin-bottom:10px}
.tu-bal span{font-size:13px; color:var(--ink-2)}
.tu-bal b{font-size:22px; font-variant-numeric:tabular-nums}
.tu-bal b.low{color:var(--warn)}
.tu-for{font-size:13px; color:var(--ink-2); margin:0 0 12px; line-height:1.45}
.tu-amts{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:6px 0 10px}
.tu-amt{height:48px; border-radius:14px; border:1px solid var(--line-strong); background:var(--surface); font:800 16px/1 var(--sans); color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums}
.tu-amt:hover{border-color:var(--violet)}
.tu-amt.on{border-color:var(--violet); background:color-mix(in srgb,var(--violet) 12%,var(--surface)); color:var(--violet-ink); box-shadow:inset 0 0 0 1px var(--violet)}
.tu-other{margin-bottom:8px}
.tu-after{font-size:13px; color:var(--ink-2); margin:2px 0 12px}
.tu-after[hidden],.tu-msg[hidden]{display:none}
.tu-msg{padding:10px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; margin:0 0 12px}
.tu-msg.bad{background:var(--bad-wash); color:var(--bad)}
.tu-msg.warn{background:var(--warn-wash); color:var(--ink)}
.tu-msg.warn b{display:block; color:var(--warn); margin-bottom:3px}
.tu-confirm{display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:14px; background:var(--ground); margin-bottom:12px; line-height:1.45}
.tu-confirm b{font-size:17px}
.tu-confirm span{font-size:13.5px; color:var(--ink-2)}
.tu-btns{justify-content:flex-end}
.tu-done{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:10px 0 16px}
.tu-done svg{width:52px; height:52px; fill:none; stroke:var(--ok); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tu-done b{font-size:18px}
.tu-done span{font-size:14px; color:var(--ink-2)}
.tu-list{margin-top:12px; border-top:1px solid var(--line)}
.tu-list-h{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-weight:700; padding:10px 0 4px}
.tu-row{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; font-variant-numeric:tabular-nums}
.tu-row b{color:var(--ok)}
.tu-row.off b{color:var(--ink-2); text-decoration:line-through}
#tuSupport{width:100%; resize:vertical; font:13px/1.45 var(--sans)}
@media (max-width:420px){ .vhead-act .since-chip span{display:none} .vhead-act .since-chip{padding:0 11px} }

/* ═══ 16. CLAUDE (v70, 2026-09-30) ═══════════════════════════════════════════════════
   The assistant sheet (js/assist-ui.js). Taller than the other sheets: a log that scrolls
   and a composer pinned to the bottom. Same chrome as 3.0: violet, Cinzel title, pill
   buttons, drawn icons, mono kicker only on the confirm card. */
.ai-btn{color:var(--violet-ink)}
.ai-btn svg{stroke-width:1.7}
.od-ai{color:var(--violet-ink)}
.ai-modal .ai-sheet-card{display:flex; flex-direction:column; height:88dvh; max-height:88dvh; overflow:hidden}
@media (min-width:640px){ .ai-modal .ai-sheet-card{height:min(760px, 88dvh)} }
.ai-head{display:flex; align-items:center; gap:9px; padding:13px 14px 11px 18px; border-bottom:1px solid var(--line); flex:none}
.ai-hd{flex:1; min-width:0}
.ai-hd h2{font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px}
.ai-hd h2 svg{width:18px; height:18px; fill:none; stroke:var(--violet); stroke-width:1.7; stroke-linejoin:round}
.ai-hd p{font-size:12px; color:var(--ink-mut); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ai-log{flex:1; overflow-y:auto; padding:14px 14px 10px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.ai-msg{max-width:88%; font-size:14.5px; line-height:1.5; border-radius:16px; padding:10px 13px; overflow-wrap:anywhere}
.ai-msg.you{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:6px}
.ai-msg.claude{align-self:flex-start; background:var(--well); color:var(--ink); border-bottom-left-radius:6px}
.ai-msg.claude p{margin:0 0 6px}
.ai-msg.claude p:last-child{margin-bottom:0}
.ai-msg.claude ul{margin:4px 0 6px; padding-left:18px}
.ai-msg.claude li{margin:2px 0}
.ai-msg.claude b{font-weight:700}
.ai-ref{color:var(--violet-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px}
/* Discreet mode blurs Claude's words the way it hides strain names elsewhere: tap to show */
.ai-msg.maskable.masked{color:var(--ink); background:var(--well); opacity:1; filter:blur(5px); min-width:0; display:block; user-select:none}
.ai-st{align-self:flex-start; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-mut); padding:0 4px}
.ai-spin{width:12px; height:12px; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--violet); animation:aispin .8s linear infinite; flex:none}
.ai-st.done .ai-spin{animation:none; border-color:var(--ok); background:var(--ok); transform:scale(.55)}
@keyframes aispin{to{transform:rotate(360deg)}}
.ai-think{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:var(--well); border-radius:16px; border-bottom-left-radius:6px}
.ai-think i{width:6px; height:6px; border-radius:50%; background:var(--violet); opacity:.35; animation:aidot 1.1s infinite ease-in-out}
.ai-think i:nth-child(2){animation-delay:.15s}
.ai-think i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,80%,100%{opacity:.25; transform:none}40%{opacity:1; transform:translateY(-3px)}}
.ai-err{align-self:stretch; font-size:13px; color:var(--bad); background:var(--bad-wash); border-radius:12px; padding:9px 12px}
.ai-note{align-self:stretch; font-size:12.5px; color:var(--ink-mut)}
.ai-card{align-self:stretch; border:1px solid color-mix(in srgb,var(--violet) 40%,var(--line-strong)); background:var(--surface); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow)}
.ai-card-h{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-ink)}
.ai-card-h svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round}
.ai-card-s{font-weight:700; font-size:14.5px; margin:6px 0 9px}
.ai-steps{list-style:none; padding:0; margin:0 0 11px; display:flex; flex-direction:column; gap:8px}
.ai-steps li{display:grid; grid-template-columns:20px 1fr; column-gap:9px; font-size:13.5px; line-height:1.45}
.ai-mark{width:20px; height:20px; border-radius:50%; background:var(--wash); display:grid; place-items:center; margin-top:1px}
.ai-mark svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.ai-steps li.ok .ai-mark{background:var(--ok-wash); color:var(--ok)}
.ai-steps li.bad .ai-mark{background:var(--bad-wash); color:var(--bad)}
.ai-step-d{grid-column:2; font-size:12px; color:var(--ink-mut)}
.ai-step-d:empty{display:none}
.ai-steps li.bad .ai-step-d{color:var(--bad)}
.ai-card-b{margin-top:0}
.ai-card-b .btn,.ai-card-b .btn2{flex:1}
.ai-card-n{font-size:12px; color:var(--ink-mut); margin-top:8px}
.ai-card.cancelled{opacity:.72}
.ai-card.cancelled .ai-step-t{text-decoration:line-through; text-decoration-color:var(--ink-mut)}
.ai-empty{margin:auto 0; text-align:center; padding:10px 8px}
.ai-hello{width:52px; height:52px; border-radius:16px; margin:0 auto 12px; display:grid; place-items:center; background:var(--grad); box-shadow:var(--glow)}
.ai-hello svg{width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linejoin:round}
.ai-empty h3{font-family:var(--display); font-size:18px; letter-spacing:.06em; margin-bottom:6px}
.ai-empty p{font-size:13.5px; color:var(--ink-2); line-height:1.5; max-width:380px; margin:0 auto}
.ai-sugs{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:14px 0 12px}
.ai-sug{font:600 13px/1.2 var(--sans); padding:8px 13px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
.ai-sug:hover{border-color:var(--violet); color:var(--violet-ink)}
.ai-empty .ai-fine{font-size:11.5px; color:var(--ink-mut)}
.ai-foot{border-top:1px solid var(--line); padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:var(--surface); flex:none}
.ai-ctx{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--violet-ink); background:var(--wash); border-radius:999px; padding:3px 4px 3px 11px; margin-bottom:7px; max-width:100%}
.ai-ctx span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ai-ctx-x{width:22px; height:22px; border:0; border-radius:50%; background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer; flex:none}
.ai-ctx-x svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.ai-inrow{display:flex; align-items:flex-end; gap:8px}
.ai-inrow textarea{flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:1.4; min-height:44px; max-height:140px; padding:10px 15px; border-radius:22px; border:1px solid var(--line-strong); background:var(--ground); color:var(--ink); outline:none}
.ai-inrow textarea:focus{border-color:var(--violet); box-shadow:var(--focus)}
.ai-send{width:44px; height:44px; flex:none; border-radius:50%; border:0; background:var(--grad); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:var(--glow)}
.ai-send svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.ai-send[disabled]{opacity:.45; box-shadow:none; cursor:default}
.ai-meta{min-height:0; font-size:11px; color:var(--ink-mut); text-align:right}
.ai-meta:not(:empty){margin-top:5px}
/* The Claude button costs the brand name ~40px on a phone: tighter gaps get it back at
   390px; at 380px and under the printer chip goes icon-only (its dot still says connected). */
@media (max-width:420px){ .top-act{gap:6px} }
@media (max-width:380px){ .prchip-t{display:none} .prchip{padding:0 11px} }
.ai-card-n .ai-spin{display:inline-block; vertical-align:-2px; margin-right:6px}

/* ═══════════════════════════════════════════════════════════════════════════
   17. Label library - Date on label (v72, 2026-09-30). Copies and the date sit
   on one row; the date field only shows on the Native LC tab. `.fld.inline` is
   display:flex, which would beat the hidden attribute, hence the explicit rule.
   ═══════════════════════════════════════════════════════════════════════════ */
#labLibCard .lib-opts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin:10px 0 2px}
#labLibCard .lib-opts .lib-qty{margin:0}
#labLibCard .lib-date{max-width:260px}
#labLibCard .lib-date input{min-width:150px}
#labLibCard .lib-date[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════════════════
   18. Label library - Tick on label (v73, 2026-09-30). Four toggles for the
   stage boxes on the native labels, on the same options row as Copies and
   the date. A pressed toggle is violet-ink on surface, the app's own "on"
   pair that reads in both themes. Hidden off the Native LC tab.
   ═══════════════════════════════════════════════════════════════════════════ */
#labLibCard .lib-stage{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
#labLibCard .lib-stage-l{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
#labLibCard .lib-stage[hidden]{display:none !important}
#libStages button{flex:0 0 auto}
#libStages button.on{background:var(--violet-ink); color:var(--surface); box-shadow:none}

/* ═══════════════════════════════════════════════════════════════════════════
   19. Label library - SKU on label (v74, 2026-10-05). The microscopy solution
   label's SKU is typed here and stamped into its SKU box at print time. The
   field shows on the Microscopy tab only; the recent SKUs beside it are the
   same toggle style as the stage ticks, one tap to refill the field.
   ═══════════════════════════════════════════════════════════════════════════ */
#labLibCard .lib-sku{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap}
#labLibCard .lib-sku[hidden]{display:none !important}
#libSku{width:170px; font-family:var(--mono); font-weight:600; letter-spacing:.08em; text-transform:uppercase}
#libSku::placeholder{font-family:var(--sans); font-weight:400; letter-spacing:0; text-transform:none}
#libSkuRecent:empty{display:none}
#libSkuRecent button{flex:0 0 auto; font-family:var(--mono); letter-spacing:.06em}
#libSkuRecent button.on{background:var(--violet-ink); color:var(--surface); box-shadow:none}

/* v77: what a bought label cost, beside the tracking number on the order screen */
.od-cost{font-weight:600; color:var(--ink); white-space:nowrap}

/* ── library categories (2026-10-19): AC / BF / Q shelves + Old labels ── */
.cat-pick{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; padding-bottom:0}
.cat-pick .cat-lbl{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.cat-pick .cat-lbl em{display:block; font-style:normal; font-family:var(--sans); font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-mut); font-size:12px; margin-top:2px}
.cat-pick .seg button{min-width:54px}
.lib-cats{padding-bottom:0}
.lib-cats .seg button{padding:7px 8px}
.tag.cat{background:var(--wash); color:var(--violet-ink)}
.move-sel{display:inline-flex; gap:7px; align-items:center}
.move-sel .mini{max-width:130px}

/* ── library bulk bar (2026-10-19): print / queue / move the ticked rows ── */
body:not(.on-library) .bulkbar[data-for="library"]{display:none !important}
body.has-bulk #view-library{padding-bottom:170px}
.lib-acts .move-sel{display:flex; gap:6px; align-items:stretch; min-width:0}
.lib-acts .move-sel .mini{flex:1 1 auto; max-width:none; min-height:46px}
.lib-acts .move-sel .btn{flex:none}
.lib-acts .move-sel:last-child{grid-column:1 / -1}
.lib-acts #printSelected{grid-column:1 / -1}
@media (min-width:900px){
  .lib-acts #printSelected,.lib-acts .move-sel:last-child{grid-column:auto}
  .lib-acts .move-sel .mini{min-height:40px; max-width:150px}
  body.has-bulk #view-library{padding-bottom:110px}
}

/* ── quantity stepper (2026-10-19): library rows + label cards ── */
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); overflow:hidden; vertical-align:middle; flex:none}
.qty-b{width:32px; height:30px; border:0; background:transparent; font:700 17px/1 var(--sans); color:var(--violet-ink); cursor:pointer; display:grid; place-items:center}
.qty-b:hover{background:var(--well)}
.qty-b:active{transform:scale(.95)}
.qty-n{min-width:26px; text-align:center; font:700 13px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums}
.row-sub .qty{margin-left:2px}
.lib-qrow{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:9px; margin-top:auto}
.lib-qrow>span{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.lib-qrow+.lib-act{margin-top:0; padding-top:7px}

/* ═══════════════════════════════════════════════════════════════
   8. polish layer (2026-10-19)
   One place for the pass that tightened the whole app: type scale,
   rhythm, the nav, button hierarchy, rows you can tap, forms that
   do not sprawl. Tokens only, so dark mode follows for free.
   ═══════════════════════════════════════════════════════════════ */

/* ── shell ── */
.topbar-in{gap:10px}
.brandmark{width:36px; height:36px; border-radius:11px; font-size:15px}
.brand-name{font-size:13.5px; letter-spacing:.09em}
@media (max-width:600px){
  .brand-sub{display:none}
  .brand-name{font-size:14px}
}
.botbar a{gap:4px; padding:6px 0 5px; font-size:11px; font-weight:700; letter-spacing:.01em; max-width:84px}
.botbar svg{width:23px; height:23px; stroke-width:1.75; position:relative; z-index:1}
.botbar a.on{color:var(--violet-ink)}
.botbar a.on::before{top:3px; width:48px; height:30px; border-radius:999px; background:var(--wash); box-shadow:none}
.botbar a.on span:not(.nb){color:var(--violet-ink)}
.rail a[data-tab]{font-size:14.5px; font-weight:600}
.rail a[data-tab].on{font-weight:700}

/* ── page header ── */
.pgh{margin:6px 2px 18px; gap:12px 14px}
.pgh h1{letter-spacing:.035em}
.pgh-sub{font-size:13.5px; line-height:1.45; max-width:62ch}
@media (min-width:900px){ .pgh{margin:2px 0 22px} .pgh h1{font-size:1.75rem} }

/* ── cards ── */
.card{box-shadow:0 4px 18px rgba(40,28,80,.055)}
.card-h{padding:14px 18px 13px}
.card-h h1,.card-h h2{font-size:16px; letter-spacing:-.012em}
@media (max-width:480px){ .pad{padding:16px} .card-h{padding:13px 16px 12px} .toolbar{padding:11px 16px} }

/* folding card: a details element wearing the card header */
details.fold>summary{list-style:none; cursor:pointer; user-select:none; -webkit-user-select:none; flex-wrap:nowrap}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:""; width:9px; height:9px; border-right:2px solid var(--violet); border-bottom:2px solid var(--violet); transform:rotate(45deg); margin:0 4px 4px auto; flex:none; transition:transform .18s}
details.fold[open]>summary::after{transform:rotate(-135deg); margin-bottom:-4px}
details.fold:not([open])>summary{border-bottom:0}
details.fold>summary:hover h2{color:var(--violet-ink)}
.fold-t{min-width:0}
.fold-sub{font-size:12.5px; color:var(--ink-mut); margin-top:3px; line-height:1.4}
details.fold[open] .fold-sub{display:none}

/* ── forms ── */
.fld{margin-bottom:14px}
.fld>span{font-size:10.5px; letter-spacing:.12em; font-weight:700; margin-bottom:7px}
.fld>span em{font-size:12px}
input[type=text],input[type=search],input[type=url],input[type=number],input[type=date],select,textarea{border-radius:12px; padding:11px 14px}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--violet) 45%,var(--line-strong))}
.fset{background:var(--ground); padding:12px 14px 11px}
#batForm .fld-row{grid-template-columns:1fr 1fr; gap:10px}
.chk input{width:20px; height:20px}

/* ── buttons: one primary per row, the rest step back ── */
.btn-row .btn.primary{flex:1.6}
.btn-row .btn:not(.primary){flex:1}
@media (min-width:900px){
  .btn-row:not(.stack):not(.wrapbtn) .btn{flex:0 1 auto; min-width:150px}
  .btn-row:not(.stack):not(.wrapbtn) .btn.primary{min-width:190px}
}
.btn.sm{font-weight:700}

/* ── library ── */
.row{padding:12px 16px; cursor:pointer}
.row:hover{background:color-mix(in srgb,var(--well) 60%,transparent)}
.row.is-sel{background:var(--wash)}
.row.is-sel:hover{background:color-mix(in srgb,var(--wash) 80%,var(--surface))}
.row .sel{width:20px; height:20px; margin:0; accent-color:var(--violet); cursor:pointer; flex:none}
.row-act .icon-btn{width:34px; height:34px}
.row-alias{font-size:15.5px}
.row-sub{margin-top:5px}
.row-real{margin-top:5px; font-size:12.5px}
.lib-cats{padding:14px 16px 0}
@media (max-width:600px){
  .toolbar{gap:8px}
  .toolbar .search{flex:1 1 100%}
  .toolbar .mini{flex:1 1 40%; max-width:none}
  .list-foot{padding:11px 16px}
}
.list-foot #libFootHint{font-size:12.5px}

/* ── labels: the library card ── */
@media (max-width:600px){
  #libTabs{display:grid; grid-template-columns:1fr 1fr; border-radius:18px; gap:3px}
  #libTabs button{border-radius:13px; min-height:38px}
}
#libGrid .lib-empty{grid-column:1 / -1; max-width:52ch}
#labLibCard .lib-qty{display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-width:none; margin:0}
#labLibCard .lib-qty>span{white-space:nowrap}
#labLibCard .lib-qty>span em{margin-left:6px}
#labLibCard .lib-qty input{width:96px}
#labLibCard .lib-opts{gap:10px 22px; margin:12px 0 4px}

/* ── motion ── */
.row,.btn,.icon-btn,.seg button,.botbar a{transition:background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t)}

/* ── polish pass 2 ── */
.brand-name{font-size:13px; letter-spacing:.07em}
@media (max-width:600px){ .brand-name{font-size:13px} }
.row-sub .qty{margin-left:auto}
@media (min-width:900px){
  .row{padding:10px 16px}
  .row-act .icon-btn{width:32px; height:32px}
  .row-act .icon-btn svg{width:15px; height:15px}
}
@media (min-width:900px){ .brand-name{font-size:12.5px; letter-spacing:.06em} }
/* ── polish pass 3 ── */
@media (max-width:600px){
  #view-library .card-h .btn.sm,#view-batches .card-h .btn.sm{min-height:32px; padding:5px 11px; font-size:12.5px}
  #view-library .card-h{flex-wrap:nowrap}
  #view-library .card-h .card-h-act{flex:none}
}