@charset "utf-8";
/* =====================================================================
   STOCK REQUEST — design system v3
   Colour · Motion · Mobile-first
   ---------------------------------------------------------------------
   Self-hosted IBM Plex. No Google Fonts call.
   ===================================================================== */
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/ibm-plex-sans-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ================================================================ TOKENS */
:root {
  /* brand — indigo into violet, used on every primary surface */
  --b1:#6366f1; --b2:#8b5cf6; --b3:#a855f7;
  --brand: linear-gradient(135deg, var(--b1), var(--b2) 55%, var(--b3));
  --brand-soft: linear-gradient(135deg, rgba(99,102,241,.13), rgba(168,85,247,.13));

  /* surfaces */
  --canvas:#f5f6fb;
  --surface:#ffffff;
  --surface-2:#fafaff;
  --surface-3:#f0f1f8;
  --overlay:rgba(24,20,50,.5);

  --line:#e5e6f0;
  --line-2:#eeeff6;
  --line-3:#d2d4e4;

  --ink:#16162a;
  --ink-2:#3f4160;
  --muted:#71748f;
  --muted-2:#9a9cb4;
  --on-brand:#ffffff;

  --focus:#6366f1;
  --focus-ring:rgba(99,102,241,.28);

  /* the two currencies — the numbers people actually stare at */
  --cny:#e11d48;  --cny-bg:#ffe9ef;
  --dh:#059669;   --dh-bg:#e3f7ef;

  /* domain accents */
  --carton:#f59e0b;   --carton-bg:#fff5e2;
  --ship:#0891b2;     --ship-bg:#e2f6fb;
  --stamp:#dc2626;

  /* state */
  --st-pending:#f59e0b;   --st-pending-bg:#fff4e0;  --st-pending-ink:#92600a;
  --st-ordered:#3b82f6;   --st-ordered-bg:#e6f0ff;  --st-ordered-ink:#1d4fa8;
  --st-received:#10b981;  --st-received-bg:#e2f7f0; --st-received-ink:#07684b;
  --st-preparing:#64748b; --st-preparing-bg:#eef0f4;--st-preparing-ink:#42505f;
  --st-shipped:#8b5cf6;   --st-shipped-bg:#f0e9ff;  --st-shipped-ink:#5b32b8;
  --st-delivered:#10b981; --st-delivered-bg:#e2f7f0;--st-delivered-ink:#07684b;

  /* transitaire colour wheel — each forwarder keeps one hue everywhere */
  --t0:#6366f1; --t1:#0891b2; --t2:#f59e0b; --t3:#ec4899;
  --t4:#10b981; --t5:#8b5cf6; --t6:#ef4444; --t7:#14b8a6;

  /* label stock */
  --kraft:#e9e0cb; --kraft-2:#ded2b6; --kraft-line:#c2b189; --kraft-ink:#37301d;

  --r-sm:6px; --r:9px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  --sh-1: 0 1px 2px rgba(30,28,70,.06);
  --sh-2: 0 2px 8px rgba(30,28,70,.07), 0 1px 3px rgba(30,28,70,.05);
  --sh-3: 0 10px 28px rgba(30,28,70,.12), 0 3px 10px rgba(30,28,70,.07);
  --sh-4: 0 24px 60px rgba(30,28,70,.22), 0 6px 18px rgba(30,28,70,.12);
  --sh-brand: 0 4px 14px rgba(99,102,241,.32);

  --ease: cubic-bezier(.22,.68,.24,1);
  --spring: cubic-bezier(.34,1.4,.5,1);
  --dur:.16s; --dur-2:.28s;

  --font:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:"IBM Plex Sans Condensed", var(--font);
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --header-h:56px;
  --tabbar-h:0px;
  --max:1760px;

  --caret:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371748f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- dark ---- */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --canvas:#0c0c16; --surface:#15162447; --surface:#151624; --surface-2:#1b1c2e; --surface-3:#232538;
  --overlay:rgba(0,0,0,.66);
  --line:#2a2c42; --line-2:#22243a; --line-3:#3c3f5c;
  --ink:#eceefb; --ink-2:#bcbfd8; --muted:#8b8fac; --muted-2:#6a6d88;
  --focus:#818cf8; --focus-ring:rgba(129,140,248,.3);
  --cny:#fb7185; --cny-bg:#3a1520;
  --dh:#34d399;  --dh-bg:#0d3527;
  --carton:#fbbf24; --carton-bg:#3a2c0c;
  --ship:#22d3ee;   --ship-bg:#0b303a;
  --stamp:#f87171;
  --st-pending:#fbbf24;   --st-pending-bg:#382a0c;  --st-pending-ink:#fcd97e;
  --st-ordered:#60a5fa;   --st-ordered-bg:#152742;  --st-ordered-ink:#a8ccfb;
  --st-received:#34d399;  --st-received-bg:#0d3527; --st-received-ink:#8ce7c4;
  --st-preparing:#94a3b8; --st-preparing-bg:#242836;--st-preparing-ink:#c3cbd8;
  --st-shipped:#a78bfa;   --st-shipped-bg:#2a1f4d;  --st-shipped-ink:#cdbcfd;
  --st-delivered:#34d399; --st-delivered-bg:#0d3527;--st-delivered-ink:#8ce7c4;
  --kraft:#312a1e; --kraft-2:#272117; --kraft-line:#54492f; --kraft-ink:#dccdaa;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 2px 8px rgba(0,0,0,.5);
  --sh-3:0 10px 28px rgba(0,0,0,.6);
  --sh-4:0 24px 60px rgba(0,0,0,.75);
  --caret:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8fac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:#0c0c16; --surface:#151624; --surface-2:#1b1c2e; --surface-3:#232538;
  --overlay:rgba(0,0,0,.66);
  --line:#2a2c42; --line-2:#22243a; --line-3:#3c3f5c;
  --ink:#eceefb; --ink-2:#bcbfd8; --muted:#8b8fac; --muted-2:#6a6d88;
  --focus:#818cf8; --focus-ring:rgba(129,140,248,.3);
  --cny:#fb7185; --cny-bg:#3a1520;
  --dh:#34d399;  --dh-bg:#0d3527;
  --carton:#fbbf24; --carton-bg:#3a2c0c;
  --ship:#22d3ee;   --ship-bg:#0b303a;
  --stamp:#f87171;
  --st-pending:#fbbf24;   --st-pending-bg:#382a0c;  --st-pending-ink:#fcd97e;
  --st-ordered:#60a5fa;   --st-ordered-bg:#152742;  --st-ordered-ink:#a8ccfb;
  --st-received:#34d399;  --st-received-bg:#0d3527; --st-received-ink:#8ce7c4;
  --st-preparing:#94a3b8; --st-preparing-bg:#242836;--st-preparing-ink:#c3cbd8;
  --st-shipped:#a78bfa;   --st-shipped-bg:#2a1f4d;  --st-shipped-ink:#cdbcfd;
  --st-delivered:#34d399; --st-delivered-bg:#0d3527;--st-delivered-ink:#8ce7c4;
  --kraft:#312a1e; --kraft-2:#272117; --kraft-line:#54492f; --kraft-ink:#dccdaa;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 2px 8px rgba(0,0,0,.5);
  --sh-3:0 10px 28px rgba(0,0,0,.6);
  --sh-4:0 24px 60px rgba(0,0,0,.75);
  --caret:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8fac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ================================================================= BASE */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font);
  font-size:13px; line-height:1.5;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
/* soft colour wash behind everything — the page is not flat white */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 420px at 8% -6%,  rgba(99,102,241,.16), transparent 62%),
    radial-gradient(680px 400px at 96% 2%,  rgba(168,85,247,.13), transparent 60%),
    radial-gradient(720px 460px at 50% 104%, rgba(8,145,178,.10), transparent 62%);
}
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-.014em; }
a { color:inherit; }
button,input,select,textarea { font:inherit; color:inherit; }
button { font-family:var(--font); }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm); }

.sprite { display:none; }
svg.i { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
svg.i.sm { width:14px; height:14px; }
.mono,.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mlab { display:none; }
[hidden] { display:none !important; }

/* scroll progress — a gradient hairline that tracks the ledger */
#progress {
  position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:var(--brand); border-radius:0 2px 2px 0;
  box-shadow:0 0 8px rgba(99,102,241,.6);
  transition:width .1s linear;
}

/* ============================================================== HEADER */
header {
  position:sticky; top:0; z-index:40;
  height:var(--header-h);
  display:flex; align-items:center; gap:9px;
  padding:0 14px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(1.7) blur(14px);
  -webkit-backdrop-filter:saturate(1.7) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
header.scrolled { box-shadow:0 4px 20px rgba(30,28,70,.09); background:color-mix(in srgb, var(--surface) 93%, transparent); }

.brand { display:flex; align-items:center; gap:9px; padding-right:2px; }
.brand .logo {
  width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--brand); color:#fff;
  box-shadow:var(--sh-brand);
  transition:transform var(--dur-2) var(--spring);
}
.brand .logo:hover { transform:rotate(-8deg) scale(1.06); }
.brand .logo svg.i { width:17px; height:17px; stroke-width:1.9; }
.brand .full {
  font-family:var(--cond); font-weight:700; font-size:13.5px;
  letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
  background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.seg { display:flex; gap:2px; padding:3px; background:var(--surface-3); border-radius:var(--r); }
.seg-btn {
  display:flex; align-items:center; gap:6px;
  padding:6px 11px; border:0; border-radius:7px;
  background:transparent; color:var(--muted);
  font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.seg-btn:hover { color:var(--ink); }
.seg-btn:active { transform:scale(.96); }
.seg-btn.active { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); font-weight:600; }
.seg-btn.active svg.i { color:var(--b1); }
.seg-badge {
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill);
  display:inline-grid; place-items:center;
  background:var(--surface-3); color:var(--muted);
  transition:background var(--dur), color var(--dur);
}
.seg-btn.active .seg-badge { background:var(--brand); color:#fff; }

.hspacer { flex:1; }

.sel,.sb-sel {
  appearance:none; -webkit-appearance:none;
  padding:7px 28px 7px 11px; max-width:240px;
  border:1px solid var(--line); border-radius:var(--r);
  background-color:var(--surface);
  background-image:var(--caret); background-repeat:no-repeat; background-position:right 9px center;
  color:var(--ink); font-size:12.5px; font-weight:500; cursor:pointer; text-overflow:ellipsis;
  transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.sel:hover,.sb-sel:hover { border-color:var(--b1); }
.sel:focus-visible,.sb-sel:focus-visible { border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }

.rate-box {
  display:flex; align-items:center; gap:5px;
  padding:5px 9px 5px 11px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(135deg, var(--cny-bg), var(--dh-bg));
  white-space:nowrap;
}
.rate-box > span { font-family:var(--mono); font-size:11.5px; font-weight:600; }
.rate-box > span:first-child { color:var(--cny); }
.rate-box > span:last-child { color:var(--dh); }
.rate-box input {
  width:62px; padding:2px 5px; border:0; border-radius:5px;
  background:rgba(255,255,255,.65); text-align:right;
  font-family:var(--mono); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
:root[data-theme="dark"] .rate-box input { background:rgba(0,0,0,.28); }
.rate-box input::-webkit-outer-spin-button,.rate-box input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.rate-box input[type=number] { -moz-appearance:textfield; }

.userchip { display:flex; align-items:center; gap:8px; }
.userchip .uname { font-size:12.5px; font-weight:600; white-space:nowrap; }
.userchip .urole {
  font-family:var(--cond); font-size:10px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--r-sm);
  background:var(--brand-soft); color:var(--b1);
}
:root[data-theme="dark"] .userchip .urole { color:#a5b4fc; }
.userchip a,.icon-btn {
  width:32px; height:32px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  border:1px solid transparent; background:transparent;
  color:var(--muted); cursor:pointer; text-decoration:none;
  transition:background var(--dur), color var(--dur), transform var(--dur);
}
.userchip a:hover,.icon-btn:hover { background:var(--surface-3); color:var(--b1); }
.userchip a:active,.icon-btn:active { transform:scale(.92); }
.backlink { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--muted); text-decoration:none; }
.backlink:hover { color:var(--b1); }
#menuBtn { display:none; }

/* ============================================================== LAYOUT */
.wrap,.cwrap,.subhead,.toolbar,.admin-wrap { max-width:var(--max); margin-inline:auto; }
.subhead,.toolbar { padding-inline:18px; }
.wrap,.cwrap { padding:0 18px; }

[hidden] { display:none !important; }
body.app { height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
body.app > #viewProducts, body.app > #viewCartons { flex:1; min-height:0; display:flex; flex-direction:column; }
/* min-width:0 on every one of these: a flex item defaults to min-width:auto, so
   a wide table would refuse to shrink and would push the whole page sideways
   instead of scrolling inside its own container (bites hardest around 1024px). */
/* width:100% + min-width:0 on all three. Without it a wide table wins the
   cross-axis sizing fight and drags the whole page sideways instead of
   scrolling inside its own container — which is what happens at ~1024px,
   where the ledger is wider than the screen. */
body.app .wrap { flex:1; min-height:0; min-width:0; width:100%; display:flex; flex-direction:column; padding-bottom:16px; }
body.app .card { flex:1; min-height:0; min-width:0; width:100%; display:flex; flex-direction:column; }
body.app .scroll { flex:1; min-height:0; min-width:0; width:100%; overflow:auto; scroll-behavior:smooth; }
body.app .cwrap { flex:1; min-height:0; min-width:0; width:100%; overflow-y:auto; padding-bottom:40px; scroll-behavior:smooth; }

.subhead { display:flex; align-items:center; gap:12px; padding-top:20px; }
.subhead h1 { font-size:20px; letter-spacing:-.022em; }
.subhead .meta { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.subhead .meta i { font-style:normal; color:var(--muted-2); }

.toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.toolbar .spacer { flex:1; }

/* ============================================================= BUTTONS */
.btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 13px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--ink);
  font-size:12.5px; font-weight:500; white-space:nowrap; cursor:pointer;
  box-shadow:var(--sh-1);
  transition:background var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur), color var(--dur);
}
.btn:hover { border-color:var(--b1); color:var(--b1); transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn:hover svg.i { color:var(--b1); }
.btn:active { transform:translateY(0) scale(.97); }
.btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; }
.btn svg.i { color:var(--muted); transition:color var(--dur); }

.btn-primary,.btn-add {
  background:var(--brand); border-color:transparent; color:#fff;
  font-weight:600; box-shadow:var(--sh-brand);
}
.btn-primary:hover,.btn-add:hover { color:#fff; filter:brightness(1.08); box-shadow:0 6px 20px rgba(99,102,241,.42); }
.btn-primary svg.i,.btn-add svg.i,.btn-primary:hover svg.i,.btn-add:hover svg.i { color:#fff; }
.btn-danger { color:var(--stamp); border-color:color-mix(in srgb, var(--stamp) 30%, var(--line)); }
.btn-danger:hover { background:color-mix(in srgb, var(--stamp) 10%, var(--surface)); border-color:var(--stamp); color:var(--stamp); }
.btn-danger svg.i,.btn-danger:hover svg.i { color:currentColor; }
.btn-ghost { border-color:transparent; background:transparent; box-shadow:none; }
.btn-ghost:hover { background:var(--surface-3); border-color:transparent; }
.btn.icon-only { width:34px; padding:0; }
.btn-sm { height:30px; padding:0 10px; font-size:12px; }
.btn-sm.icon-only { width:30px; }
.btn-sm svg.i { width:14px; height:14px; }

/* tap ripple */
.ripple { position:absolute; border-radius:50%; transform:scale(0); background:currentColor; opacity:.22; pointer-events:none; animation:ripple .55s var(--ease); }
@keyframes ripple { to { transform:scale(2.6); opacity:0; } }

.bgroup { display:inline-flex; }
.bgroup .btn { border-radius:0; margin-left:-1px; box-shadow:none; }
.bgroup .btn:first-child { border-radius:var(--r) 0 0 var(--r); margin-left:0; }
.bgroup .btn:last-child { border-radius:0 var(--r) var(--r) 0; }
.bgroup .btn:hover { z-index:1; transform:none; }

/* =============================================================== SEARCH */
.search {
  position:relative; display:flex; align-items:center;
  height:34px; min-width:230px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sh-1);
  transition:border-color var(--dur), box-shadow var(--dur);
}
.search:focus-within { border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); }
.search > svg.i { margin-left:10px; color:var(--muted-2); transition:color var(--dur); }
.search:focus-within > svg.i { color:var(--b1); }
.search input { flex:1; min-width:0; border:0; background:transparent; padding:0 8px; font-size:12.5px; }
.search input::placeholder { color:var(--muted-2); }
.search .clear {
  display:none; margin-right:7px; width:20px; height:20px; border:0; border-radius:var(--r-pill);
  background:var(--surface-3); color:var(--muted); cursor:pointer; place-items:center;
}
.search .clear:hover { background:var(--stamp); color:#fff; }
.search.has .clear { display:grid; }

/* filter pills — each carries its own state colour */
.filters { display:flex; align-items:center; gap:6px; }
.fpill {
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--muted);
  font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.fpill:hover { transform:translateY(-1px); box-shadow:var(--sh-1); }
.fpill:active { transform:scale(.95); }
.fpill .dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.fpill .n { font-family:var(--mono); font-size:10.5px; font-weight:600; opacity:.7; }
.f-pending  .dot { background:var(--st-pending); }
.f-ordered  .dot { background:var(--st-ordered); }
.f-received .dot { background:var(--st-received); }
.f-unpacked .dot { background:var(--carton); }
.f-pending.on  { background:var(--st-pending-bg);  border-color:var(--st-pending);  color:var(--st-pending-ink);  font-weight:600; }
.f-ordered.on  { background:var(--st-ordered-bg);  border-color:var(--st-ordered);  color:var(--st-ordered-ink);  font-weight:600; }
.f-received.on { background:var(--st-received-bg); border-color:var(--st-received); color:var(--st-received-ink); font-weight:600; }
.f-unpacked.on { background:var(--carton-bg);      border-color:var(--carton);      color:#92600a;                font-weight:600; }
:root[data-theme="dark"] .f-unpacked.on { color:var(--carton); }

/* ================================================================ TABLE */
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.scroll { overflow-x:auto; overscroll-behavior:contain; }
table { width:100%; border-collapse:separate; border-spacing:0; }

thead th {
  position:sticky; top:0; z-index:10;
  padding:11px 12px;
  text-align:left; white-space:nowrap;
  background:color-mix(in srgb, var(--surface-2) 94%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  font-family:var(--cond); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
thead th.r { text-align:right; }
thead th.sortable { cursor:pointer; user-select:none; transition:color var(--dur); }
thead th.sortable:hover { color:var(--b1); }
thead th .sortmark { display:inline-block; width:10px; margin-left:3px; opacity:0; color:var(--b1); }
thead th.sorted { color:var(--b1); }
thead th.sorted .sortmark { opacity:1; }

tbody td {
  padding:9px 12px;
  border-bottom:1px solid var(--line-2);
  vertical-align:middle;
  background:transparent;
}
tbody tr { transition:background var(--dur) var(--ease); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:color-mix(in srgb, var(--b1) 4%, var(--surface)); }
td.r { text-align:right; }

/* a status rail down the left of every row: colour you can scan */
.col-num { width:44px; position:relative; }
.col-num::before {
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0;
  background:var(--rail, transparent);
  transition:width var(--dur) var(--ease);
}
tr:hover .col-num::before { width:5px; }
tr.s-pending  { --rail:var(--st-pending); }
tr.s-ordered  { --rail:var(--st-ordered); }
tr.s-received { --rail:var(--st-received); }
.rownum { font-family:var(--mono); font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums; }

.cell-in {
  width:100%; padding:6px 8px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent; color:var(--ink);
  font-size:12.5px; font-family:inherit;
  transition:background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.cell-in::placeholder { color:var(--muted-2); }
.cell-in:hover:not(:disabled) { background:var(--surface-3); }
.cell-in:focus { background:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
textarea.cell-in { resize:none; overflow:hidden; line-height:1.45; }

.col-prod { min-width:270px; }
.prod-cell { display:flex; flex-direction:column; gap:1px; }
.variant-in { font-weight:600; }
.link-cell { display:flex; align-items:center; gap:2px; }
.link-cell .cell-in { font-family:var(--mono); font-size:11px; color:var(--muted); padding-block:3px; }
.link-cell .cell-in:focus { color:var(--ink); }
.link-open {
  width:24px; height:24px; border-radius:var(--r-sm);
  display:grid; place-items:center; flex:0 0 auto;
  color:var(--muted-2); text-decoration:none;
  transition:color var(--dur), background var(--dur), transform var(--dur);
}
.link-open:hover { color:var(--b1); background:var(--brand-soft); transform:translate(1px,-1px); }
.link-open.off { opacity:0; pointer-events:none; }
.link-print { display:none; }

.col-img { width:62px; }
.imgbox {
  position:relative; width:46px; height:46px;
  border-radius:var(--r); overflow:hidden;
  border:1.5px dashed var(--line-3);
  background:var(--surface-3);
  display:grid; place-items:center;
  transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--spring);
}
.imgbox.has { border-style:solid; border-color:var(--line); background:var(--surface); }
.imgbox:not(.ro):hover { border-color:var(--b1); }
.imgbox.sel { border-color:var(--focus); border-style:solid; box-shadow:0 0 0 3px var(--focus-ring); }
.imgbox.drag { border-color:var(--b1); background:var(--brand-soft); transform:scale(1.1); }
.imgbox img { width:100%; height:100%; object-fit:cover; display:block; }
.imgbox .imglink { display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.imgbox.has:hover .imglink { filter:brightness(.94); }
.imgbox .ph { display:grid; place-items:center; color:var(--muted-2); }
.imgbox .ph svg.i { width:16px; height:16px; }
.imgbox .rm,.imgbox .pick {
  position:absolute; top:2px; width:18px; height:18px;
  border:0; padding:0; border-radius:var(--r-sm); cursor:pointer;
  display:grid; place-items:center;
  background:rgba(22,22,42,.82); color:#fff;
  opacity:0; transition:opacity var(--dur);
}
.imgbox .rm { right:2px; }
.imgbox .rm:hover { background:var(--stamp); }
.imgbox .pick { left:2px; }
.imgbox .pick:hover { background:var(--b1); }
.imgbox .rm svg.i,.imgbox .pick svg.i { width:11px; height:11px; stroke-width:2.4; }
.imgbox:hover .rm,.imgbox:hover .pick { opacity:1; }
.imgbox .pickbtn { position:absolute; inset:0; border:0; background:transparent; cursor:pointer; }

/* money */
.col-unit,.col-total { width:116px; }
.money { display:flex; flex-direction:column; align-items:flex-end; line-height:1.32; }
.money .m-cny { font-family:var(--mono); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--cny); }
.money .m-dh  { font-family:var(--mono); font-size:10.5px; font-variant-numeric:tabular-nums; color:var(--dh); font-weight:500; }
.money.strong .m-cny { font-size:14px; font-weight:700; }
.money.strong .m-dh { font-size:11px; }
.price-in,.qty-in { text-align:right; font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; font-size:12.5px; }
.price-in { color:var(--cny); }
.col-qty { width:80px; }
.price-in::-webkit-outer-spin-button,.price-in::-webkit-inner-spin-button,
.qty-in::-webkit-outer-spin-button,.qty-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.price-in[type=number],.qty-in[type=number] { -moz-appearance:textfield; }
.bump { animation:bump .4s var(--spring); }
@keyframes bump { 0%{transform:none} 30%{transform:translateY(-3px) scale(1.06)} 100%{transform:none} }

/* colis + weight */
.col-colis { width:140px; }
.colis-cell { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.kind-sel {
  appearance:none; -webkit-appearance:none;
  padding:4px 9px; border-radius:var(--r-pill); border:1px solid transparent;
  font-family:var(--cond); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; width:max-content;
  transition:transform var(--dur);
}
.kind-sel:hover { transform:scale(1.05); }
.k-ordinaire { background:var(--st-preparing-bg); color:var(--st-preparing-ink); }
.k-sensible  { background:color-mix(in srgb, var(--stamp) 14%, transparent); color:var(--stamp); border-color:color-mix(in srgb, var(--stamp) 30%, transparent); }
.wt-in {
  width:100%; padding:3px 7px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  transition:background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.wt-in::placeholder { color:var(--muted-2); }
.wt-in:hover:not(:disabled) { background:var(--surface-3); }
.wt-in:focus { background:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }

/* transitaire — every forwarder owns a hue */
.col-ship { width:200px; }
.ship-cell { display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.ship-chips { display:flex; align-items:flex-start; gap:5px; flex-wrap:wrap; }
.ship-assign {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border:1px dashed var(--line-3); border-radius:var(--r-pill);
  background:transparent; color:var(--muted); font-size:11.5px; cursor:pointer;
  transition:border-color var(--dur), color var(--dur), background var(--dur);
}
.ship-assign:hover { border-color:var(--b1); color:var(--b1); background:var(--brand-soft); }
.chip {
  display:inline-flex; align-items:stretch; overflow:hidden;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--tc, var(--b1)) 13%, transparent);
  color:var(--tc, var(--b1));
  border:1px solid color-mix(in srgb, var(--tc, var(--b1)) 26%, transparent);
  transition:box-shadow var(--dur);
}
.chip:hover { box-shadow:var(--sh-1); }
.chip svg.i { width:12px; height:12px; }
/* the transitaire name — clicking it opens the picker to reassign */
.chip-name {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border:0; background:transparent; color:inherit;
  font:inherit; font-size:11px; font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background var(--dur);
}
button.chip-name:hover { background:color-mix(in srgb, var(--tc, var(--b1)) 12%, transparent); }
/* the copy button — copies THIS transitaire's address for THIS product */
.chip-copy {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; border:0; cursor:pointer;
  border-left:1px solid color-mix(in srgb, var(--tc, var(--b1)) 28%, transparent);
  background:color-mix(in srgb, var(--tc, var(--b1)) 6%, transparent);
  color:inherit; opacity:.8;
  transition:background var(--dur), opacity var(--dur), transform var(--dur);
}
.chip-copy svg.i { width:12px; height:12px; }
.chip-copy:hover { background:color-mix(in srgb, var(--tc, var(--b1)) 22%, transparent); opacity:1; }
.chip-copy:active { transform:scale(.88); }
.chip-copy.done { background:var(--st-received); color:#fff; opacity:1; }
.chip-copy:disabled { opacity:.32; cursor:not-allowed; }
.t-c0{--tc:var(--t0)} .t-c1{--tc:var(--t1)} .t-c2{--tc:var(--t2)} .t-c3{--tc:var(--t3)}
.t-c4{--tc:var(--t4)} .t-c5{--tc:var(--t5)} .t-c6{--tc:var(--t6)} .t-c7{--tc:var(--t7)}
.ship-none { color:var(--muted-2); }

.packed { display:flex; align-items:center; gap:7px; width:100%; }
.packed .bar { flex:1; max-width:82px; height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.packed .bar > i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--carton), #fbbf24); transition:width .5s var(--spring); }
.packed .lab { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--muted); white-space:nowrap; }
.packed.ok .bar > i { background:linear-gradient(90deg, var(--st-received), #34d399); }
.packed.ok .lab { color:var(--st-received); }
.packed.none .lab { color:var(--muted-2); font-weight:400; }

/* status */
.col-status { width:132px; }
.status-sel {
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center;
  padding:5px 11px 5px 22px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:700; cursor:pointer;
  width:max-content; min-width:96px;
  background-repeat:no-repeat; background-position:left 8px center; background-size:8px 8px;
  transition:transform var(--dur), box-shadow var(--dur), filter var(--dur);
}
.status-sel:hover { transform:translateY(-1px); box-shadow:var(--sh-1); }
.status-sel:disabled { cursor:default; }
.st-pending   { background-color:var(--st-pending-bg);   color:var(--st-pending-ink);   border-color:color-mix(in srgb, var(--st-pending) 30%, transparent);   background-image:radial-gradient(circle,var(--st-pending) 0 50%,transparent 50%); }
.st-ordered   { background-color:var(--st-ordered-bg);   color:var(--st-ordered-ink);   border-color:color-mix(in srgb, var(--st-ordered) 30%, transparent);   background-image:radial-gradient(circle,var(--st-ordered) 0 50%,transparent 50%); }
.st-received  { background-color:var(--st-received-bg);  color:var(--st-received-ink);  border-color:color-mix(in srgb, var(--st-received) 30%, transparent);  background-image:radial-gradient(circle,var(--st-received) 0 50%,transparent 50%); }
.st-preparing { background-color:var(--st-preparing-bg); color:var(--st-preparing-ink); border-color:color-mix(in srgb, var(--st-preparing) 30%, transparent); background-image:radial-gradient(circle,var(--st-preparing) 0 50%,transparent 50%); }
.st-shipped   { background-color:var(--st-shipped-bg);   color:var(--st-shipped-ink);   border-color:color-mix(in srgb, var(--st-shipped) 30%, transparent);   background-image:radial-gradient(circle,var(--st-shipped) 0 50%,transparent 50%); }
.st-delivered { background-color:var(--st-delivered-bg); color:var(--st-delivered-ink); border-color:color-mix(in srgb, var(--st-delivered) 30%, transparent); background-image:radial-gradient(circle,var(--st-delivered) 0 50%,transparent 50%); }
span.status-sel { cursor:default; }
/* pending quietly pulses — it is the thing waiting on you */
.st-pending:not(:disabled) { animation:pulseWait 2.6s var(--ease) infinite; }
@keyframes pulseWait {
  0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,0); }
  50%     { box-shadow:0 0 0 4px rgba(245,158,11,.14); }
}

/* row actions */
.col-act { width:126px; }
.acts { display:flex; align-items:center; gap:2px; justify-content:flex-end; }
.iact {
  position:relative;
  width:28px; height:28px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  border:1px solid transparent; background:transparent;
  color:var(--muted); cursor:pointer;
  opacity:0;
  transition:opacity var(--dur), background var(--dur), color var(--dur), transform var(--dur);
}
tr:hover .iact,.iact:focus-visible,.iact.mark { opacity:1; }
/* carton cards aren't table rows, so there's no row-hover to reveal the action
   buttons — the delete button must be visible on its own. */
.cc-head .iact { opacity:1; }
.cc-head .iact.del { color:var(--muted); }
.cc-head .iact.del:hover { color:var(--stamp); }
.iact:hover { background:var(--brand-soft); color:var(--b1); transform:translateY(-1px); }
.iact:active { transform:scale(.9); }
.iact.del:hover { background:color-mix(in srgb,var(--stamp) 12%,transparent); color:var(--stamp); }
.iact .badge {
  position:absolute; top:-3px; right:-3px;
  min-width:15px; height:15px; padding:0 3px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--brand); color:#fff;
  font-family:var(--mono); font-size:9px; font-weight:700;
  border:1.5px solid var(--surface);
}
body.is-sorted .iact[data-act="up"], body.is-sorted .iact[data-act="down"] { display:none; }

/* =============================================================== TOTALS */
.totbar {
  z-index:30; max-width:var(--max); margin:14px auto 0;
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px);
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.totbar .t { display:flex; flex-direction:column; justify-content:center; gap:2px; padding:11px 20px; border-right:1px solid var(--line-2); }
.totbar .t:last-child { border-right:0; }
.totbar .lab { font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.totbar .val { font-family:var(--mono); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.totbar .cny .val { color:var(--cny); }
.totbar .grand {
  margin-left:auto; border-right:0; padding-inline:26px;
  background:var(--brand); position:relative; overflow:hidden;
}
/* a slow sheen across the grand total */
.totbar .grand::after {
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation:sheen 5s var(--ease) infinite;
}
@keyframes sheen { 0%{left:-60%} 55%,100%{left:130%} }
.totbar .grand .lab { color:rgba(255,255,255,.72); }
.totbar .grand .val { color:#fff; font-size:23px; letter-spacing:-.025em; }

/* ================================================================ EMPTY */
.empty { display:grid; place-items:center; gap:10px; padding:60px 20px; text-align:center; }
.empty .big {
  width:52px; height:52px; border-radius:var(--r-lg);
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--b1);
  animation:float 3.4s var(--ease) infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.empty .big svg.i { width:24px; height:24px; }
.empty .etitle { font-size:15px; font-weight:600; }
.empty .esub { font-size:12.5px; color:var(--muted); max-width:360px; }
.empty .btn { margin-top:4px; }

/* ============================================================== CARTONS */
.cgroup { margin-top:24px; }
.cgroup-head { display:flex; align-items:baseline; gap:10px; padding-bottom:10px; margin-bottom:14px; border-bottom:2px solid var(--line); }
.cgroup-head h2 {
  display:flex; align-items:center; gap:8px;
  font-family:var(--cond); font-size:14px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--tc, var(--b1));
}
.cgroup-head .cg-stats { font-family:var(--mono); font-size:11px; color:var(--muted); }
.cgroup-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:16px; }

.ccard {
  display:flex; flex-direction:column; gap:12px;
  padding:15px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  border-top:3px solid var(--tc, var(--carton));
  transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur);
}
.ccard:hover { box-shadow:var(--sh-3); transform:translateY(-3px); }
.cc-head { display:flex; align-items:center; gap:8px; }
.cc-ico {
  width:30px; height:30px; border-radius:var(--r-sm);
  display:grid; place-items:center; flex:0 0 auto;
  background:var(--carton-bg); color:var(--carton);
}
.cc-name {
  flex:1; min-width:0; padding:4px 7px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent; font-size:13.5px; font-weight:700;
  transition:background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.cc-name:hover:not(:disabled) { background:var(--surface-3); }
.cc-name:focus { background:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }

.cc-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.cc-fields label { display:flex; flex-direction:column; gap:4px; }
.cc-fields label > span { font-family:var(--cond); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cc-fields input,.cc-fields select {
  width:100%; padding:7px 9px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); font-size:12px;
  transition:border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.cc-fields input { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.cc-fields select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:24px; background-image:var(--caret); background-repeat:no-repeat; background-position:right 7px center; }
.cc-fields input:focus,.cc-fields select:focus { background:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.cc-fields select.k-sensible { color:var(--stamp); font-weight:700; }

.cc-items { display:flex; flex-direction:column; gap:6px; }
.cc-empty { padding:16px; text-align:center; border:1.5px dashed var(--line-3); border-radius:var(--r); color:var(--muted-2); font-size:12px; }
.citem {
  display:flex; align-items:center; gap:9px;
  padding:6px 7px; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line-2);
  transition:border-color var(--dur), background var(--dur), transform var(--dur);
}
.citem:hover { border-color:var(--b1); background:var(--brand-soft); transform:translateX(2px); }
.ci-img { width:36px; height:36px; flex:0 0 auto; border-radius:var(--r-sm); object-fit:cover; border:1px solid var(--line); background:var(--surface-3); display:grid; place-items:center; color:var(--muted-2); }
.ci-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.ci-info b { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-info small { font-family:var(--mono); font-size:10px; color:var(--muted); }
.ci-qty {
  width:62px; padding:5px 7px; text-align:right;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface);
  font-family:var(--mono); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}
.ci-qty:focus { border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.ci-rm { width:26px; height:26px; flex:0 0 auto; border-radius:var(--r-sm); display:grid; place-items:center; border:1px solid transparent; background:transparent; color:var(--muted-2); cursor:pointer; transition:color var(--dur), background var(--dur); }
.ci-rm:hover { color:var(--stamp); background:color-mix(in srgb,var(--stamp) 12%,transparent); }

.cc-add select {
  width:100%; padding:8px 10px;
  border:1.5px dashed var(--line-3); border-radius:var(--r);
  background:transparent; color:var(--muted); font-size:12px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  transition:border-color var(--dur), color var(--dur), background var(--dur);
}
.cc-add select:hover { border-color:var(--b1); color:var(--b1); background:var(--brand-soft); }
.cc-foot { display:flex; align-items:center; gap:6px; padding-top:11px; border-top:1px solid var(--line-2); }
.cc-tot { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted); }

/* ============================================= SIGNATURE: shipping label */
.mk-preview {
  position:relative;
  min-width:0; overflow-wrap:anywhere;
  font-family:var(--mono); color:var(--kraft-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, color-mix(in srgb,var(--kraft-line) 24%,transparent) 21px 22px),
    linear-gradient(180deg, var(--kraft), var(--kraft-2));
  border:1px solid var(--kraft-line); border-radius:4px;
  padding:14px 16px;
  font-size:11px; line-height:1.9; letter-spacing:.015em;
  white-space:pre-wrap; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), var(--sh-1);
}
.mk-preview::before {
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background-image:radial-gradient(circle at 4px 0, transparent 0 3px, var(--kraft-line) 3px 3.7px, transparent 3.7px);
  background-size:9px 6px; opacity:.6;
}
.mk-preview::after {
  content:"SENSIBLE"; position:absolute; right:-18px; bottom:12px;
  transform:rotate(-13deg);
  font-family:var(--cond); font-size:15px; font-weight:700; letter-spacing:.18em;
  color:var(--stamp); border:2.5px solid var(--stamp); border-radius:3px;
  padding:3px 24px 3px 10px;
  opacity:0; transition:opacity var(--dur-2);
}
.mk-preview.sensible::after { opacity:.55; }
.cc-mark { font-size:10px; line-height:1.75; padding:12px 14px; }
.cc-mark::after { font-size:13px; right:-16px; bottom:9px; padding:2px 20px 2px 8px; }

/* ================================================================ MODAL */
.modal {
  position:fixed; inset:0; z-index:90;
  display:none; align-items:center; justify-content:center;
  padding:24px; background:var(--overlay);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal.open { display:flex; animation:fade .18s var(--ease); }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal-card {
  display:flex; flex-direction:column;
  width:min(920px,100%); max-height:86vh;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-4);
  overflow:hidden;
  animation:pop .3s var(--spring);
}
@keyframes pop { from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }
.modal-head { display:flex; align-items:center; gap:9px; padding:15px 17px; border-bottom:1px solid var(--line); background:var(--brand-soft); }
.mh-title { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; }
.mh-title svg.i { color:var(--b1); }
.mh-x { margin-left:auto; width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; transition:background var(--dur), color var(--dur), transform var(--dur); }
.mh-x:hover { background:var(--stamp); color:#fff; transform:rotate(90deg); }
.modal-body { padding:17px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.modal-foot { display:flex; align-items:center; gap:8px; padding:13px 17px; border-top:1px solid var(--line); background:var(--surface-2); }

.mk-item { padding:15px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); display:flex; flex-direction:column; gap:12px; border-left:3px solid var(--tc, var(--b1)); }
.mk-toprow { display:flex; }
.mk-label-in { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-size:13.5px; font-weight:700; }
.mk-label-in:focus { border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.mk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mk-field { display:flex; flex-direction:column; gap:4px; }
.mk-field.full { grid-column:1/-1; }
.mk-field label { font-family:var(--cond); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.mk-field input,.mk-field textarea { width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:12px; }
.mk-field textarea { min-height:68px; resize:vertical; font-family:var(--mono); font-size:11.5px; line-height:1.6; }
.mk-field input:focus,.mk-field textarea:focus { border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.mk-actions { display:flex; align-items:center; gap:6px; }

/* popover */
.pop { position:fixed; z-index:80; display:none; width:300px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-4); overflow:hidden; }
.pop.open { display:block; animation:pop .22s var(--spring); }
.pop-head { padding:10px 13px; border-bottom:1px solid var(--line-2); background:var(--brand-soft); font-family:var(--cond); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--b1); }
.pop-body { max-height:270px; overflow-y:auto; padding:6px; }
.pop-row { display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-sm); transition:background var(--dur); }
.pop-row:hover { background:var(--surface-2); }
.pr-chk { width:17px; height:17px; accent-color:var(--b1); cursor:pointer; flex:0 0 auto; }
.pr-lab { flex:1; min-width:0; display:flex; flex-direction:column; font-size:12.5px; font-weight:600; cursor:pointer; }
.pr-lab small { font-family:var(--mono); font-size:10px; color:var(--muted); font-weight:400; }
.pr-copy { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--muted); font-size:11px; cursor:pointer; transition:color var(--dur), border-color var(--dur); }
.pr-copy:hover { color:var(--b1); border-color:var(--b1); }
.pop-empty { padding:24px 12px; text-align:center; color:var(--muted-2); font-size:12px; }
.pop-foot { display:flex; gap:6px; padding:10px; border-top:1px solid var(--line-2); background:var(--surface-2); }
.pop-foot .btn { flex:1; }

/* ==================================================== LIGHTBOX + TOAST */
.lb { position:fixed; inset:0; z-index:95; display:none; place-items:center; padding:40px; background:var(--overlay); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.lb.open { display:grid; animation:fade .18s var(--ease); }
.lb img { max-width:90vw; max-height:86vh; border-radius:var(--r-lg); box-shadow:var(--sh-4); animation:pop .32s var(--spring); }
.lb .x { position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:var(--r); display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.14); color:#fff; cursor:pointer; transition:background var(--dur), transform var(--dur); }
.lb .x:hover { background:var(--stamp); transform:rotate(90deg); }

.toast {
  position:fixed; left:50%; bottom:24px; z-index:100;
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:var(--r);
  background:var(--brand); color:#fff;
  font-size:12.5px; font-weight:600;
  box-shadow:var(--sh-4);
  transform:translate(-50%,24px) scale(.94); opacity:0; pointer-events:none;
  transition:transform .32s var(--spring), opacity .22s var(--ease);
}
.toast.show { transform:translate(-50%,0) scale(1); opacity:1; pointer-events:auto; }
.toast.bad { background:linear-gradient(135deg,#dc2626,#f43f5e); }
.toast button { border:0; border-radius:var(--r-sm); padding:4px 9px; background:rgba(255,255,255,.22); color:inherit; font-size:12px; font-weight:600; cursor:pointer; }

/* ================================================================= AUTH */
.auth-bg { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.auth-card {
  width:min(400px,100%); padding:32px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-4);
  animation:pop .45s var(--spring);
}
.auth-logo { width:46px; height:46px; border-radius:var(--r); display:grid; place-items:center; margin-bottom:18px; background:var(--brand); color:#fff; box-shadow:var(--sh-brand); }
.auth-logo svg.i { width:23px; height:23px; }
.auth-card h1 { font-size:21px; letter-spacing:-.024em; }
.auth-sub { margin:6px 0 22px; font-size:13px; color:var(--muted); }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-form label { display:flex; flex-direction:column; gap:6px; }
.auth-form label > span { font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.auth-form input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); font-size:15px; transition:border-color var(--dur), box-shadow var(--dur), background var(--dur); }
.auth-form input:focus { background:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.auth-form .btn { height:44px; margin-top:6px; font-size:14px; }

.note { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; margin-bottom:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); color:var(--ink-2); font-size:12.5px; line-height:1.5; }
.note svg.i { margin-top:1px; }
.note.ok   { background:var(--st-received-bg); border-color:color-mix(in srgb,var(--st-received) 34%,transparent); color:var(--st-received-ink); }
.note.bad  { background:color-mix(in srgb,var(--stamp) 10%,transparent); border-color:color-mix(in srgb,var(--stamp) 32%,transparent); color:var(--stamp); }
.note.warn { background:var(--st-pending-bg); border-color:color-mix(in srgb,var(--st-pending) 34%,transparent); color:var(--st-pending-ink); }
.note code { font-family:var(--mono); font-size:11.5px; padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.08); }

/* ================================================================ ADMIN */
.admin-wrap { padding:24px 18px 80px; display:flex; flex-direction:column; gap:18px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.panel-head { display:flex; align-items:center; gap:9px; padding:14px 17px; border-bottom:1px solid var(--line); background:var(--brand-soft); }
.panel-head h2 { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; }
.panel-head h2 svg.i { color:var(--b1); }
.panel-head .spacer { flex:1; }
.panel-body { padding:17px; }

.utable { width:100%; }
.utable th { position:static; padding:8px 11px; text-align:left; font-family:var(--cond); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); background:transparent; }
.utable td { padding:9px 11px; border-bottom:1px solid var(--line-2); font-size:12.5px; background:transparent; }
.utable tr:last-child td { border-bottom:0; }
.utable tr:hover td { background:var(--surface-2); }
.utable input[type=text],.utable input:not([type]),.utable select { padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); font-size:12.5px; }
.utable input:focus,.utable select:focus { background:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.utable input[type=checkbox] { width:17px; height:17px; accent-color:var(--b1); }

.form-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.form-row label { display:flex; flex-direction:column; gap:5px; }
.form-row label > span { font-family:var(--cond); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.form-row input,.form-row select { padding:8px 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); font-size:12.5px; }
.form-row input:focus,.form-row select:focus { background:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }

.matrix { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); -webkit-overflow-scrolling:touch; }
.matrix table { width:100%; min-width:520px; }
.matrix th,.matrix td { padding:8px 11px; border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2); }
.matrix th { position:static; background:var(--surface-2); text-align:center; }
.matrix th:first-child,.matrix td:first-child { text-align:left; font-size:12.5px; }
.matrix td { text-align:center; background:transparent; }
.matrix tr:last-child td { border-bottom:0; }
.matrix th:last-child,.matrix td:last-child { border-right:0; }
.matrix input[type=checkbox] { width:17px; height:17px; accent-color:var(--b1); cursor:pointer; }
.rolehdr { display:flex; align-items:center; gap:5px; justify-content:center; }
.rolehdr input { width:106px; padding:5px 7px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:12px; font-weight:600; }

/* ======================================================== MOBILE EXTRAS */
/* drawer, bottom tab bar and FAB: hidden on desktop, essential on a phone */
.scrim {
  position:fixed; inset:0; z-index:70;
  background:var(--overlay);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-2) var(--ease);
}
.scrim.open { opacity:1; pointer-events:auto; }

/* The closed drawer sits off-screen to the right. Left alone that widens the
   layout viewport — Chrome then zooms the whole page out on a phone — so it
   lives inside a viewport-sized host that clips it. */
.drawer-host {
  position:fixed; inset:0; z-index:75;
  overflow:hidden; pointer-events:none;
}
.drawer {
  position:absolute; top:0; right:0; bottom:0;
  pointer-events:auto;
  width:min(320px,86vw);
  display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--line);
  box-shadow:var(--sh-4);
  transform:translateX(102%);
  transition:transform .32s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer.open { transform:none; }
.drawer-head { display:flex; align-items:center; gap:9px; padding:15px 16px; border-bottom:1px solid var(--line); background:var(--brand-soft); }
.drawer-head .who { display:flex; flex-direction:column; }
.drawer-head .who b { font-size:13.5px; }
.drawer-head .who span { font-size:11px; color:var(--muted); }
.drawer-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:18px; }
.dsec { display:flex; flex-direction:column; gap:8px; }
.dsec > .cap { font-family:var(--cond); font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.dsec .btn { width:100%; justify-content:flex-start; height:44px; }
.dsec .bgroup { display:flex; flex-wrap:wrap; gap:8px; }
.dsec .bgroup .btn { flex:1 1 calc(50% - 4px); border-radius:var(--r); margin-left:0; box-shadow:var(--sh-1); }
.drawer .rate-box { width:100%; justify-content:center; height:44px; }
.drawer .rate-box input { font-size:16px; }
.drawer .sel,.drawer .sb-sel { width:100%; max-width:none; height:44px; font-size:15px; }

.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none; align-items:stretch;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(1.7) blur(16px); -webkit-backdrop-filter:saturate(1.7) blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:58px; border:0; background:transparent; color:var(--muted);
  font-size:10.5px; font-weight:600; cursor:pointer; position:relative;
  transition:color var(--dur);
}
.tabbar button svg.i { width:21px; height:21px; }
.tabbar button.active { color:var(--b1); }
.tabbar button.active::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34px; height:3px; border-radius:0 0 3px 3px; background:var(--brand);
}
.tabbar .tb-badge {
  position:absolute; top:6px; left:calc(50% + 8px);
  min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--brand); color:#fff;
  font-family:var(--mono); font-size:9px; font-weight:700;
}

.fab {
  position:fixed; right:16px; z-index:55;
  bottom:calc(74px + env(safe-area-inset-bottom));
  display:none; align-items:center; justify-content:center;
  width:56px; height:56px; border:0; border-radius:18px;
  background:var(--brand); color:#fff;
  box-shadow:0 8px 24px rgba(99,102,241,.45);
  cursor:pointer;
  transition:transform var(--dur) var(--spring), box-shadow var(--dur);
}
.fab svg.i { width:24px; height:24px; stroke-width:2.2; }
.fab:active { transform:scale(.9); }

/* ================================================== MOBILE — the real work */
@media (max-width: 900px) {
  :root { --header-h:56px; --tabbar-h:58px; }

  /* --- header: logo, order, menu. Everything else moves to the drawer --- */
  header { padding:0 12px; gap:8px; }
  .brand .full { display:none; }
  #viewTabs, .rate-box, .userchip, #newOrder, #renameOrder, #delOrder, #themeBtn { display:none !important; }
  #orderSel { flex:1; max-width:none; height:38px; font-size:15px; }
  #menuBtn { display:grid; }
  .hspacer { display:none; }

  /* --- context strip --- */
  .subhead { padding:12px 14px 0; gap:9px; }
  .subhead h1 { font-size:17px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .subhead .meta { display:none; }

  /* --- toolbar: search full width, filters scroll sideways --- */
  .toolbar { padding:10px 14px; gap:8px; max-width:100%; }
  .subhead, .toolbar, .wrap, .cwrap, header { min-width:0; }
  #addRow, #addCarton, .toolbar .bgroup, #manageMarks, #assignAll, #markSel,
  #manifestPrint, #cartonCsv, .toolbar .spacer { display:none !important; }
  /* Both take a full row. min-width:0 is essential: a flex item defaults to
     min-width:auto and would refuse to shrink below the width of its four
     pills, forcing the whole page wider than the phone. */
  .search { flex:1 1 100%; width:100%; min-width:0; height:40px; }
  .search input { font-size:16px; }          /* 16px stops iOS zooming on focus */
  .filters {
    flex:1 1 100%; width:100%; min-width:0;
    overflow-x:auto; gap:7px;
    padding-bottom:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .filters::-webkit-scrollbar { display:none; }
  .fpill { height:34px; padding:0 13px; flex:0 0 auto; font-size:12.5px; }

  /* --- the table becomes a list of cards --- */
  .wrap { padding:0 14px; }
  body.app .wrap { padding-bottom:8px; }
  .card { background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible; }
  body.app .scroll { overflow-y:auto; overflow-x:hidden; padding-bottom:8px; }
  table,tbody,tr,td { display:block; width:100%; }
  thead { display:none; }

  tbody tr {
    display:grid;
    grid-template-columns:54px 1fr 1fr 1fr;
    grid-template-areas:
      "img   prod  prod  prod"
      "img   stat  colis colis"
      "unit  unit  qty   total"
      "ship  ship  ship  ship"
      "acts  acts  acts  acts";
    gap:9px 10px;
    align-items:center;
    margin-bottom:11px; padding:13px;
    background:var(--surface);
    border:1px solid var(--line);
    border-left:4px solid var(--rail, var(--line-3));
    border-radius:var(--r-lg);
    box-shadow:var(--sh-2);
  }
  tbody tr:hover td,tbody tr:hover { background:var(--surface); }
  tbody td { padding:0; border:0; background:transparent; }

  .col-num { display:none; }
  .col-img   { grid-area:img; }
  .col-prod  { grid-area:prod; min-width:0; }
  .col-status{ grid-area:stat; }
  .col-colis { grid-area:colis; }
  .col-unit  { grid-area:unit; }
  .col-qty   { grid-area:qty; }
  .col-total { grid-area:total; }
  .col-ship  { grid-area:ship; }
  .col-act   { grid-area:acts; }
  .col-unit,.col-qty,.col-total,.col-colis,.col-ship,.col-status,.col-act { width:auto; }

  .imgbox { width:54px; height:54px; }
  .imgbox .rm,.imgbox .pick { opacity:1; }    /* no hover on a touchscreen */
  .variant-in { font-size:14px; font-weight:600; }
  .link-cell .cell-in { font-size:11px; }
  /* iOS zooms the whole page if a focused input is under 16px. Selects are
     exempt (they open a picker, not a keyboard), so pills can stay small. */
  .cell-in,.wt-in,.variant-in,.link-cell .cell-in,.price-in,.qty-in,
  .ci-qty,.cc-name,.cc-fields input,.mk-field input,.mk-field textarea,.mk-label-in { font-size:16px; }

  /* money band: three labelled stats, mono, aligned */
  .mlab {
    display:block;
    font-family:var(--cond); font-size:9px; font-weight:700;
    letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
    margin-bottom:2px;
  }
  .col-unit,.col-qty,.col-total { padding:8px 9px !important; background:var(--surface-2); border-radius:var(--r-sm); text-align:left !important; }
  .col-total { background:var(--brand-soft); }
  .price-in,.qty-in { text-align:left; padding:0; background:transparent !important; }
  .price-in:focus,.qty-in:focus { box-shadow:none; border-color:transparent; }
  .money { align-items:flex-start; }
  .money.strong .m-cny { font-size:15px; }
  .money.strong .m-dh { font-size:11.5px; }
  .col-unit .money .m-dh { font-size:11px; }

  .status-sel { min-width:0; width:100%; justify-content:center; height:34px; font-size:12px; }
  .colis-cell { flex-direction:row; align-items:center; gap:7px; }
  .kind-sel { height:30px; }
  .wt-in { flex:1; min-width:0; background:var(--surface-2); }

  .ship-cell { flex-direction:row; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .packed { width:auto; flex:1; min-width:110px; }
  .packed .bar { max-width:none; height:6px; }
  /* the chips carry a copy button, so give both parts a finger-sized target */
  .ship-cell .ship-chips { width:100%; }
  .ship-cell .chip { flex:1 1 100%; }
  .chip-name { padding:9px 12px; font-size:12.5px; flex:1; min-width:0; }
  .chip-name svg.i { width:14px; height:14px; }
  .chip-copy { width:46px; }
  .chip-copy svg.i { width:15px; height:15px; }

  /* actions are always visible: there is no hover on a phone */
  .col-act { border-top:1px solid var(--line-2); padding-top:9px !important; }
  .acts { justify-content:space-between; gap:4px; }
  .iact { opacity:1; width:40px; height:40px; border:1px solid var(--line); background:var(--surface-2); }

  /* --- totals: three small stats, then the grand total on its own line --- */
  .totbar { margin:0 14px 10px; border-radius:var(--r-lg); flex-wrap:wrap; }
  .totbar .t { flex:1 1 0; min-width:0; padding:8px 10px; }
  .totbar .t:not(.grand) .val { font-size:12.5px; }
  .totbar .grand {
    flex:1 0 100%; margin-left:0; padding:10px 16px;
    border-top:1px solid rgba(255,255,255,.18);
    flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px;
  }
  .totbar .grand .val { font-size:21px; }

  /* --- cartons --- */
  .cwrap { padding:0 14px; }
  /* minmax(0,1fr), not 1fr: a grid item defaults to min-width:auto and would
     refuse to shrink below its content, pushing the page sideways. */
  .cgroup-cards { grid-template-columns:minmax(0,1fr); gap:12px; }
  .ccard, .cc-items, .citem, .ci-info { min-width:0; }
  .cgroup { margin-top:18px; }
  .cc-fields input,.cc-fields select,.ci-qty { font-size:16px; }
  .ci-rm,.cc-fields select { min-height:40px; }
  .cc-foot .btn { flex:1; }

  /* --- modals become bottom sheets --- */
  .modal { padding:0; align-items:flex-end; }
  .modal-card { width:100%; max-height:92dvh; border-radius:var(--r-xl) var(--r-xl) 0 0; animation:sheet .34s var(--ease); }
  @keyframes sheet { from{transform:translateY(100%)} to{transform:none} }
  .modal-head { padding:16px; position:relative; }
  .modal-head::before {
    content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:3px; background:var(--line-3);
  }
  .modal-body { padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
  .modal-foot { padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex:1; height:44px; }
  .mk-grid { grid-template-columns:1fr; }
  .mk-field input,.mk-field textarea,.mk-label-in { font-size:16px; }
  .mk-actions .btn { flex:1; }

  /* --- the transitaire popover becomes a bottom sheet too --- */
  .pop {
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .pop.open { animation:sheet .3s var(--ease); }
  .pop-head { padding:16px 14px 10px; position:relative; }
  .pop-head::before { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:38px; height:4px; border-radius:3px; background:var(--line-3); }
  .pop-body { max-height:44dvh; }
  .pop-row { padding:12px 10px; }
  .pr-chk { width:22px; height:22px; }
  .pop-foot .btn { height:44px; }

  /* --- chrome --- */
  .tabbar { display:flex; }
  .fab { display:flex; }
  body.app { padding-bottom:0; }
  body.app > #viewProducts, body.app > #viewCartons { padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .toast { bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); left:14px; right:14px; transform:translateY(24px); width:auto; }
  .toast.show { transform:none; }

  /* --- admin --- */
  .admin-wrap { padding:16px 14px 60px; }
  .panel-body { padding:14px; }
  .form-row { flex-direction:column; align-items:stretch; }
  .form-row label,.form-row .btn { width:100%; }
  .form-row input,.form-row select { font-size:16px; }
  .utable { display:block; }
  .utable thead { display:none; }
  .utable tbody,.utable tr,.utable td { display:block; width:100%; }
  .utable tr { margin-bottom:10px; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); }
  .utable td { padding:6px 0; border:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .utable td::before { content:attr(data-l); font-family:var(--cond); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .utable input,.utable select { font-size:16px; flex:1; min-width:0; }
  .auth-card { padding:24px; }
}

/* very small phones */
@media (max-width: 380px) {
  tbody tr { grid-template-columns:48px 1fr 1fr 1fr; padding:11px; gap:8px; }
  .imgbox { width:48px; height:48px; }
  .fpill { padding:0 10px; }
  .totbar .grand .val { font-size:16px; }
  .iact { width:36px; height:36px; }
}

/* ============================================================== MOTION */
html.js .reveal { opacity:0; transform:translateY(14px); }
html.js .reveal.in { opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
tbody tr { animation:rowIn .34s var(--ease) both; }
@keyframes rowIn { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.ccard { animation:cardIn .4s var(--ease) both; }
@keyframes cardIn { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html.js .reveal { opacity:1; transform:none; }
  body.app .scroll,body.app .cwrap { scroll-behavior:auto; }
}

/* =============================================================== PRINT */
#printDoc { display:none; }
@media print {
  @page { size:A4; margin:12mm; }
  body { background:#fff; color:#000; font-size:10pt; }
  body::before { display:none; }
  header,.toolbar,.subhead,.totbar,.wrap,.cwrap,.modal,.pop,.lb,.toast,
  .tabbar,.fab,.drawer,.scrim,#progress,#viewProducts,#viewCartons { display:none !important; }
  #printDoc { display:block !important; }
  body.app { height:auto; overflow:visible; display:block; }

  .pdoc-head { border-bottom:2px solid #000; padding-bottom:8pt; margin-bottom:12pt; }
  .pdoc-title { font-family:var(--cond); font-size:9pt; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .pdoc-order { font-size:19pt; font-weight:600; letter-spacing:-.02em; margin-top:2pt; }
  .pdoc-meta { font-family:var(--mono); font-size:8.5pt; color:#555; margin-top:3pt; }

  .pcard { display:flex; gap:9pt; padding:7pt 0; border-bottom:.5pt solid #ccc; break-inside:avoid; }
  .pc-imgwrap { width:46pt; height:46pt; flex:0 0 auto; border:.5pt solid #ccc; border-radius:3pt; overflow:hidden; display:grid; place-items:center; }
  .pc-imgwrap img { width:100%; height:100%; object-fit:cover; }
  .pc-noimg { font-size:6.5pt; color:#999; }
  .pc-body { flex:1; min-width:0; }
  .pc-top { display:flex; align-items:baseline; gap:6pt; }
  .pc-num { font-family:var(--mono); font-size:8pt; color:#888; }
  .pc-variant { font-size:11pt; font-weight:600; }
  .pc-tag { font-family:var(--cond); font-size:7pt; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:1pt 4pt; border:.5pt solid #999; border-radius:2pt; }
  .pc-tag.sensible { border-color:#dc2626; color:#dc2626; }
  .pc-link { font-family:var(--mono); font-size:7.5pt; color:#555; text-decoration:none; }
  .pc-ship { font-family:var(--mono); font-size:8pt; color:#333; margin-top:2pt; }
  .pc-grid { display:flex; flex-wrap:wrap; gap:4pt 14pt; margin-top:4pt; }
  .pc-grid > div { display:flex; gap:4pt; align-items:baseline; }
  .pc-lab { font-family:var(--cond); font-size:7pt; letter-spacing:.08em; text-transform:uppercase; color:#888; }
  .pc-val { font-family:var(--mono); font-size:9pt; font-weight:600; }
  .pc-val.cny { color:#be123c; }
  .pc-val.dh { color:#047857; }
  .pc-dim { color:#999; }

  .pdoc-sum { margin-top:12pt; border:1pt solid #000; border-radius:3pt; padding:9pt 12pt; break-inside:avoid; }
  .psum-row { display:flex; justify-content:space-between; padding:2.5pt 0; font-size:9.5pt; }
  .psum-row b { font-family:var(--mono); font-variant-numeric:tabular-nums; }
  .psum-row b.cny { color:#be123c; }
  .psum-grand { display:flex; justify-content:space-between; align-items:baseline; margin-top:5pt; padding-top:7pt; border-top:1pt solid #000; }
  .psum-grand span { font-family:var(--cond); font-size:10pt; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .psum-grand b { font-family:var(--mono); font-size:17pt; font-variant-numeric:tabular-nums; }

  .plabel { position:relative; width:100%; padding:14pt 16pt; break-inside:avoid; border:1.5pt solid #000; border-radius:3pt; background:#fff; color:#000; }
  .plabel.sensible::after {
    content:"COLIS SENSIBLE"; position:absolute; right:10pt; top:14pt; transform:rotate(-11deg);
    font-family:var(--cond); font-size:13pt; font-weight:700; letter-spacing:.16em;
    color:#dc2626; border:2pt solid #dc2626; border-radius:2pt; padding:2pt 8pt;
  }
  .pl-mark { font-family:var(--mono); font-size:13pt; line-height:1.9; white-space:pre-wrap; font-weight:500; }
  .pl-name { font-family:var(--cond); font-size:9pt; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:10pt; padding-top:7pt; border-top:.5pt dashed #999; }
  .pl-items { font-family:var(--mono); font-size:9pt; line-height:1.6; margin-top:5pt; color:#333; }

  .man-h { font-family:var(--cond); font-size:11pt; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:12pt 0 5pt; }
  table.man { width:100%; border-collapse:collapse; break-inside:avoid; }
  table.man th { position:static; background:#f2f2f2; color:#000; font-family:var(--cond); font-size:7.5pt; letter-spacing:.08em; text-transform:uppercase; border:.5pt solid #bbb; padding:4pt 5pt; text-align:left; }
  table.man td { border:.5pt solid #ddd; padding:4pt 5pt; font-size:8.5pt; }
}