@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/montserrat-600.woff2?v=uj8hdp) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/montserrat-600.woff2?v=uj8hdp) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/source-sans-3-400.woff2?v=g1p126) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/source-sans-3-400.woff2?v=g1p126) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  /* --blue is the ACCENT: links, active nav, headings, icon strokes. It moves
     with the theme and goes lighter in dark mode.
     --brand-fill is the SOLID: anything with white text sitting on it. It must
     stay dark enough for that text in both themes, so the two cannot be one
     token - lightening the accent for dark mode would put white on pale blue. */
  --blue: #006898;
  --brand-fill: #006898;
  --blue-deep: #00537A;
  --blue-tint: #E8F4F9;
  --tint-line: #CFE4EF;
  --cyan: #00B0D8;
  /* Same split as --blue / --brand-fill. --green is the accent (savings figures,
     the live-stock tick); --green-fill is the solid behind white button text,
     and is darker because #469C15 under white is 3.9:1 and the dark theme's
     lighter green was 2.7:1 - both short of the 4.5:1 small text needs. */
  --green: #469C15;
  --green-fill: #357A0F;
  --red: #C4211F;
  --amber: #B26A00;
  --ground: #DCE5EC;
  --surface: #FFFFFF;
  --surface-2: #F7FBFD;
  --ink: #13242E;
  --muted: #5D7284;
  --line: #DBE7EE;
  --line-strong: #BFD2DE;
  --ok-bg: #E6F3DE; --ok-ink: #35750F;
  --low-bg: #FBEFD9; --low-ink: #8A5200;
  --out-bg: #EDF1F4; --out-ink: #77879A;
  --shadow: 0 1px 2px rgba(0,60,90,.07), 0 12px 28px -20px rgba(0,60,90,.45);

  /* Page container width. Both .wrap and .megawrap read this, so the page and
     the mega menu can never drift to different widths. */
  --page: 96rem;

  /* Corner rounding, in one place on purpose. Every boxed surface on every page
     reads from --radius, so the whole site retunes by changing this one number.
     --radius-sm is for controls sitting inside a rounded box, which need a
     tighter curve or they read as bulging out of it; --radius-lg is the hero,
     which the concept mockup gives a deliberately larger curve. */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  /* System monospace. IBM Plex Mono was dropped: it appeared only on SKUs and
     figures, where the platform face is near-indistinguishable, and it cost
     14.7KB and a request on every first visit. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- dark theme ----------
   Only the palette changes; not one layout rule is duplicated. The switch sets
   data-theme on <html>, and "no choice yet" follows the operating system.
   Solid brand fills stay dark (see --brand-fill) so the white text on them is
   unchanged, while the accent lightens to stay readable on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --blue: #5CBFEA; --brand-fill: #0E4A69; --blue-deep: #0A2E42;
    --blue-tint: #12303F; --tint-line: #1E4257; --cyan: #35C9EC;
    --green: #57B22B; --green-fill: #357A0F; --red: #E4635F; --amber: #D99425;
    --ground: #0B1620; --surface: #132330; --surface-2: #182C3A;
    --ink: #E7EFF5; --muted: #93A9B9; --line: #22394A; --line-strong: #34505F;
    --ok-bg: #14301A; --ok-ink: #8FD86A;
    --low-bg: #33280F; --low-ink: #E0B45C;
    --out-bg: #1E2A33; --out-ink: #8FA3B3;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 28px -20px rgba(0,0,0,.9); }
}
:root[data-theme="dark"] { color-scheme: dark;
  --blue: #5CBFEA; --brand-fill: #0E4A69; --blue-deep: #0A2E42;
  --blue-tint: #12303F; --tint-line: #1E4257; --cyan: #35C9EC;
  --green: #57B22B; --green-fill: #357A0F; --red: #E4635F; --amber: #D99425;
  --ground: #0B1620; --surface: #132330; --surface-2: #182C3A;
  --ink: #E7EFF5; --muted: #93A9B9; --line: #22394A; --line-strong: #34505F;
  --ok-bg: #14301A; --ok-ink: #8FD86A;
  --low-bg: #33280F; --low-ink: #E0B45C;
  --out-bg: #1E2A33; --out-ink: #8FA3B3;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 28px -20px rgba(0,0,0,.9); }


* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
/* Desktop pages that earn the width: the map and the matrix, the pack grid. */
main .wrap.wide { max-width: 80%; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }

/* ---- chrome ---- */
.utility { background: var(--brand-fill); color: #fff; }
.utility .wrap { display: flex; align-items: center; gap: 1rem; min-height: 2.6rem; font-family: var(--display); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; overflow-x: auto; }
.utility a { color: #fff; text-decoration: none; opacity: .9; white-space: nowrap; }
.utility a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: .35em; }
.utility .who { margin-left: auto; opacity: .85; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: .82rem; font-weight: 400; white-space: nowrap; }
.utility button.link { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; opacity: .9; padding: 0; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
.themeswitch { background: none; border: 0; padding: .3rem; cursor: pointer; color: #fff; opacity: .85; display: inline-flex; border-radius: var(--radius-sm); }
.themeswitch svg { display: block; }
.themeswitch .ico-sun { display: none; }
:root[data-theme="dark"] .themeswitch .ico-moon { display: none; }
:root[data-theme="dark"] .themeswitch .ico-sun { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themeswitch .ico-moon { display: none; } :root:not([data-theme="light"]) .themeswitch .ico-sun { display: block; } }
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); }
.brand img { height: 1.8rem; width: auto; display: block; }
.brand .app { font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: .02em; padding-left: .8rem; border-left: 1px solid var(--line-strong); line-height: 1; }
.brand .app small { display: block; font-family: var(--mono); font-weight: 500; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.masthead .push { margin-left: auto; display: flex; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.live { color: var(--ok-ink); background: var(--ok-bg); border-color: transparent; }
.chip .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.2rem 0 2.5rem; color: var(--muted); font-size: .82rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: .4rem 2rem; }

/* ---- page ---- */
main { padding: 1.2rem 0 2rem; }
h1 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin: 0 0 .6rem; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.hint { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }
.k { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; }
.big { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.05; letter-spacing: -.01em; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.panel + .panel { margin-top: .9rem; }
.msg { margin-top: .6rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: .95rem; }
.msg.ok { background: var(--ok-bg); color: var(--ok-ink); }
.msg.bad { background: #FBE3E2; color: var(--red); }
:root[data-theme="dark"] .msg.bad { background: #3A1A1A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.bad { background: #3A1A1A; } }

/* ---- scan box ---- */
.scan { display: flex; gap: .5rem; align-items: stretch; }
.scan input { flex: 1; min-width: 0; font-size: 1.25rem; padding: .85rem 1rem; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.scan input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3.1rem; padding: .6rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--blue); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-blue { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.btn-green { background: var(--green-fill); border-color: var(--green-fill); color: #fff; }
.btn-sm { min-height: 2.3rem; padding: .3rem .8rem; font-size: .92rem; }
.btn svg { width: 1.2rem; height: 1.2rem; }

/* ---- tiles on the home screen ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin: 1rem 0; }
.tile { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; min-height: 6.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.tile:hover { border-color: var(--blue); }
.tile b { font-family: var(--display); font-size: 1.05rem; }
.tile span { color: var(--muted); font-size: .88rem; }
.tile.soon { opacity: .55; pointer-events: none; }

/* ---- lists and tables ---- */
.rows { display: flex; flex-direction: column; gap: .5rem; }
.row { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.row:hover { border-color: var(--blue); }
.row .name { grid-column: 1; grid-row: 1; font-weight: 600; font-family: var(--mono); font-size: 1.05rem; }
.row .sub { color: var(--muted); font-size: .86rem; grid-column: 1; grid-row: 2; }
.row .n { grid-column: 2; grid-row: 1 / span 2; font-family: var(--display); font-weight: 700; font-size: 1.25rem; text-align: right; font-variant-numeric: tabular-nums; align-self: center; }
.row .n small { display: block; font-family: var(--mono); font-weight: 500; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.row.empty { opacity: .6; }
.row .acts { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.filter { display: flex; gap: .5rem; margin: .8rem 0; }
.filter input { flex: 1; min-width: 0; padding: .6rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 1rem; }
.pill { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.pill.on { background: var(--blue-tint); border-color: var(--tint-line); color: var(--blue); }
button.pill { cursor: pointer; font: inherit; font-family: var(--mono); font-size: .68rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: .8rem 0; }
.facts div { background: var(--surface); padding: .7rem .9rem; }
.facts .v { font-family: var(--display); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.warn { background: var(--low-bg); color: var(--low-ink); border-radius: var(--radius-sm); padding: .6rem .9rem; font-size: .92rem; margin: .6rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .5rem .6rem; border-bottom: 1px solid var(--line-strong); }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.status { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; }
.status.posted { background: var(--ok-bg); color: var(--ok-ink); }
.status.failed { background: #FBE3E2; color: var(--red); }
.status.pending { background: var(--low-bg); color: var(--low-ink); }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.field label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select { font-size: 1.15rem; padding: .7rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.stepper { display: flex; gap: .5rem; align-items: stretch; }
.stepper input { flex: 1; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.8rem; }
.stepper .btn { min-width: 3.4rem; font-size: 1.4rem; }
.narrow { max-width: 26rem; margin: 2rem auto; }
.login h1 { margin-bottom: .3rem; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; }
.keypad .btn { min-height: 3.6rem; font-size: 1.4rem; font-family: var(--display); }
.pinbox { font-size: 2rem; letter-spacing: .4em; text-align: center; }
.err { background: #FBE3E2; color: var(--red); padding: .6rem .9rem; border-radius: var(--radius-sm); margin-bottom: .8rem; }

/* ---- camera overlay ---- */
.cam { position: fixed; inset: 0; background: #000; z-index: 50; display: flex; flex-direction: column; }
.cam video { flex: 1; width: 100%; object-fit: cover; }
.cam .btn { margin: .8rem; }

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .masthead .wrap { min-height: 3.2rem; }
  .brand img { height: 1.5rem; }
  .row .n { font-size: 1.15rem; }
  footer { display: none; }
}

.pl { display: flex; flex-direction: column; gap: .55rem; }
.pl .ln { display: grid; grid-template-columns: 5.4rem 1fr auto; gap: .1rem .9rem; align-items: center; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pl .ln .bin { grid-row: 1 / span 2; grid-column: 1; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.pl .ln .bin small { display: block; font-family: var(--mono); font-weight: 400; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.pl .ln .sku { grid-column: 2; grid-row: 1; font-family: var(--mono); font-weight: 600; }
.pl .ln .nm { grid-column: 2; grid-row: 2; color: var(--muted); font-size: .86rem; }
.pl .ln .q { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: .3rem; }
.pl .ln .q b { font-family: var(--display); font-size: 1.3rem; min-width: 3.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.pl .ln .q b small { font-size: .8rem; color: var(--muted); font-weight: 400; }
.pl .ln .q .btn { min-height: 2.4rem; min-width: 2.4rem; padding: 0; }
.pl .ln.done { border-color: var(--green); background: var(--ok-bg); }
.pl .ln.done .bin, .pl .ln.done .sku { color: var(--ok-ink); }
.pl .ln.short { border-color: var(--amber); }
.pl .ln.here { box-shadow: 0 0 0 3px var(--blue-tint); border-color: var(--blue); }
.pl .ln.nobin .bin { color: var(--red); }
.progress { display: flex; align-items: center; gap: .8rem; margin: .6rem 0 1rem; }
.progress .bar { flex: 1; height: .6rem; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--green-fill); width: 0; transition: width .2s; }
.progress b { font-family: var(--display); white-space: nowrap; }
.orders .row .n { font-size: 1rem; }
.stick { position: sticky; bottom: 0; background: var(--ground); padding: .7rem 0 .9rem; display: flex; gap: .6rem; }
.stick .btn { flex: 1; }

.grid { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.grid th { position: sticky; top: 0; background: var(--surface-2); }
.grid td, .grid th { padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.grid td.wrap { white-space: normal; }
.grid tr:hover td { background: var(--surface-2); }
.grid a.ord { font-family: var(--mono); font-weight: 600; text-decoration: none; }
.tag { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 4px; background: var(--blue-tint); color: var(--blue); margin-right: .25rem; }
.tag.hold { background: #FBE3E2; color: var(--red); }
.tag.prio { background: var(--low-bg); color: var(--low-ink); }
.st { display: inline-block; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--out-bg); color: var(--out-ink); }
.st.picking { background: var(--low-bg); color: var(--low-ink); }
.st.picked { background: var(--ok-bg); color: var(--ok-ink); }
.st.packed, .st.shipped { background: var(--blue-tint); color: var(--blue); }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.tabs a { font-family: var(--display); font-weight: 600; font-size: .85rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; color: var(--ink); }
.tabs a[aria-current] { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.bench { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 60rem) { .bench { grid-template-columns: 1fr; } }
.addr { white-space: pre-line; font-size: .95rem; }
.pk { display: grid; grid-template-columns: 3.5rem 1.6fr 1fr 1fr 1fr 1fr 2.4rem; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.grid td.age.warn-age { color: var(--low-ink); font-weight: 600; } .grid td.age.late { color: var(--red); font-weight: 600; }
.grid .tagdot { display: inline-block; width: .55rem; height: 1rem; border-radius: 2px; margin-right: 2px; vertical-align: middle; }
.grid td.chk { width: 1.5rem; }
.bulk { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.bulk .msg { margin: 0; }
.verify { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
.verify input { padding: .6rem .7rem; font-size: 1.05rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--mono); }
.lines td.v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lines tr.vok td { background: var(--ok-bg); }
.manual { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem .6rem; margin: .4rem 0 .6rem; }
.manual label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.manual input, .manual select { width: 100%; padding: .4rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .93rem; }
.pk select { width: 100%; padding: .4rem .3rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .88rem; }
.addr-check { font-size: .85rem; margin-top: .5rem; padding: .5rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.addr-check.bad { background: #FBE3E2; }
.addr-check.good { background: var(--ok-bg); }
.addr-edit input { width: 100%; margin-bottom: .3rem; padding: .35rem .45rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .9rem; }
.tagpick { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .5rem; }
.tagpick label { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.tagpick label i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.meta input[type=date], .meta input[type=text] { width: 100%; padding: .4rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .93rem; }
.pk input { width: 100%; padding: .45rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; }
.pk .lbl { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rates { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.rate { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .8rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.rate:hover { border-color: var(--blue); }
.rate.on { border-color: var(--green); box-shadow: 0 0 0 2px var(--ok-bg); }
.rate.best .c::after { content: "Best"; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; background: var(--ok-bg); color: var(--ok-ink); padding: .12rem .4rem; border-radius: 999px; margin-left: .5rem; vertical-align: middle; }
.rate .src { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-left: .4rem; }
.cfg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; align-items: end; margin: .4rem 0 .6rem; }
.cfg label { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.cfg select, .cfg input[type=number] { width: 100%; padding: .45rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.cfg .chk { display: flex; gap: .4rem; align-items: center; font-size: .92rem; padding-bottom: .4rem; }
.cfg .chk label { display: inline; font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.rate .c { font-family: var(--display); font-weight: 700; }
.rate .s { color: var(--muted); font-size: .88rem; grid-column: 2; }
.rate .p { grid-column: 3; grid-row: 1 / span 2; font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-align: right; font-variant-numeric: tabular-nums; }
.rate .p small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.ship { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-top: .5rem; }
.ship .trk { font-family: var(--mono); font-weight: 600; }
.ship.voided { opacity: .55; text-decoration: line-through; }
.meta textarea { width: 100%; min-height: 4.5rem; padding: .5rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: .93rem; }
.meta .chk { display: flex; gap: 1rem; margin: .5rem 0; font-size: .95rem; }
.lines td.q input { width: 4.5rem; text-align: right; padding: .3rem .4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
@media print { .utility, .masthead, footer, .noprint { display: none !important; } body { background: #fff; color: #000; } .panel { box-shadow: none; border: 0; } }

.rl { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.rl .rline { display: grid; grid-template-columns: minmax(0, 1.3fr) 5.5rem minmax(9rem, 1fr); gap: .5rem .8rem; align-items: start; padding: .8rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rl .rline .sku { font-family: var(--mono); font-weight: 600; }
.rl .rline .nm { color: var(--muted); font-size: .86rem; display: block; }
.rl .rline .open { font-family: var(--mono); font-size: .8rem; color: var(--muted); display: block; margin-top: .2rem; }
.rl .rline input { width: 100%; padding: .55rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 1.05rem; }
.rl .rline input[data-qty] { text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.rl .rline .lotrow { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rl .rline .lotrow label, .rl .rline .binlbl { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .2rem; }
.rl .rline .binmsg { grid-column: 3; font-size: .8rem; }
.rl .rline.done { border-color: var(--green); background: var(--ok-bg); }
@media (max-width: 40rem) { .rl .rline { grid-template-columns: 1fr 5rem; } .rl .rline .binbox { grid-column: 1 / -1; } .rl .rline .binmsg { grid-column: 1 / -1; } }

.set table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.set th, .set td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.set th { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.set input[type=text], .set input[type=number], .set select { width: 100%; padding: .35rem .45rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .9rem; }
.set input[type=number] { width: 4.5rem; }
.set input[type=color] { width: 2.4rem; height: 1.8rem; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: none; }
.set tr.off { opacity: .55; }
.set .row-msg { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.set details { margin-top: .6rem; }
.set details summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: .9rem; }
.sf { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .4rem .6rem; margin: .5rem 0; }
.sf label { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }

.pshell { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
.ptop { background: var(--brand-fill); color: #fff; padding: .7rem 0; }
.ptop .pshell { display: flex; align-items: center; gap: 1rem; font-family: var(--display); font-weight: 600; }
.ptop a { color: #fff; text-decoration: none; opacity: .9; }
.ptop .who { margin-left: auto; font-family: var(--body); font-weight: 400; font-size: .9rem; opacity: .9; }
.pmain { padding: 1.2rem 0 3rem; }

.mapwrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow); }
.mapwrap svg { display: block; width: 100%; height: auto; }
.map-strip { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.map-strip .pill { cursor: pointer; }
.map-strip .sep { width: 1px; height: 1.6rem; background: var(--line); margin: 0 .3rem; }
.map-strip input[type=search] { flex: 1; min-width: 12rem; padding: .5rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; }
.legend { display: flex; gap: .3rem .9rem; flex-wrap: wrap; font-size: .8rem; margin: .1rem 0 .4rem; color: var(--muted); min-height: 1.2rem; }
.legend span i, .legend .lg i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -.1rem; margin-right: .3rem; border: 1px solid rgba(0,0,0,.15); }
.legend .lg { font: inherit; font-size: .8rem; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 999px; padding: .1rem .5rem .1rem .35rem; cursor: pointer; }
.legend .lg:hover { border-color: var(--line-strong); color: var(--ink); }
.legend .lg.on { background: var(--blue-tint); border-color: var(--tint-line); color: var(--blue); font-weight: 600; }
.legend .lg small { opacity: .7; font-size: .7rem; }
svg .bay { stroke: var(--line-strong); stroke-width: 1; cursor: pointer; transition: opacity .15s; }
svg .bay.dim { opacity: .18; }
svg .bay.hit { stroke: var(--red); stroke-width: 3; }
svg .bay.sel { stroke: var(--blue); stroke-width: 3; }
svg .lbl { font-family: var(--display); font-weight: 700; fill: var(--ink); pointer-events: none; }
svg .lbl.small { font-weight: 600; fill: var(--muted); }
svg .room { fill: var(--surface-2); stroke: var(--line-strong); }
svg .wall { stroke: var(--muted); stroke-width: 1.2; stroke-linecap: square; }
svg .lvl { font-family: var(--mono); font-size: 7px; fill: var(--muted); pointer-events: none; }
.tip { position: fixed; z-index: 30; pointer-events: none; background: var(--ink); color: var(--surface); padding: .45rem .65rem; border-radius: var(--radius-sm); font-size: .82rem; max-width: 18rem; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.tip b { display: block; font-family: var(--display); font-size: .95rem; }
.tip .c { opacity: .85; }
.baypanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(28rem, 100vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(0,0,0,.18); z-index: 40; overflow-y: auto; padding: 1rem 1.1rem 2rem; }
.baypanel .close { float: right; }
.baypanel h2 { margin: .2rem 0 .1rem; font-family: var(--display); }
.rack { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.shelf { border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); padding: .45rem .6rem; }
.shelf.empty { border-style: dashed; opacity: .7; }
.shelf .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.shelf .k a { color: var(--blue); text-decoration: none; }
.shelf .it { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; font-size: .88rem; padding: .2rem 0; border-top: 1px solid var(--line); }
.shelf .it:first-of-type { border-top: 0; }
.shelf .it .sku { font-family: var(--mono); font-weight: 600; }
.shelf .it .nm { color: var(--muted); font-size: .8rem; grid-column: 1; }
.shelf .it .q { font-variant-numeric: tabular-nums; text-align: right; }
.shelf .it .lot { font-size: .75rem; color: var(--muted); grid-column: 1 / -1; }
.shelf .it .lot.soon { color: var(--red); }
.shelf .it .cls { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: -.02rem; }
.baystats { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-top: .3rem; }
@media (max-width: 40rem) { .baypanel { width: 100vw; } }
.zone { margin-top: 1.4rem; }
.zone h2 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 .5rem; }
.zone h2 small { font-weight: 400; font-size: .8rem; margin-left: .5rem; }
.matrix { display: flex; flex-direction: column; gap: .3rem; padding-bottom: .3rem; }
.zone .matrix:has(.brow:not(.lv)) { flex-direction: row; flex-wrap: wrap; }
.brow { display: flex; gap: .3rem; align-items: stretch; }
.brow.lv { display: grid; gap: .3rem; }
.brow[hidden], .zone[hidden] { display: none; }
.brow .bay { flex: 0 0 3.4rem; font-family: var(--display); font-weight: 700; display: flex; align-items: center; color: var(--muted); }
.bcell { flex: 0 0 auto; min-width: 5.6rem; min-height: 2.6rem; display: flex; flex-direction: column; justify-content: center; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--ink); transition: opacity .15s; }
.bcell.dim { opacity: .2; }
.bcell.hit { outline: 2px solid var(--red); outline-offset: -2px; }
.bcell.painted .bc { color: rgba(255,255,255,.85); } .bcell.painted { color: #fff; }
/* A painted cell's ink follows the paint, not the theme: dark text on a light swatch in either mode. */
.bcell.painted.light { color: #13242E; } .bcell.painted.light .bc { color: #5D7284; }
.bcell:hover { border-color: var(--blue); }
.bcell .bn { font-family: var(--mono); font-size: .8rem; font-weight: 600; }
.bcell .bc { font-family: var(--display); font-size: .78rem; color: var(--muted); }
.bcell.o0 { background: #E6F1F7; } .bcell.o1 { background: #BFD9EA; } .bcell.o2 { background: #8FBEDA; } .bcell.o3 { background: #5C9FC5; color: #fff; } .bcell.o4 { background: #2F7DAA; color: #fff; }
.bcell.o3 .bc, .bcell.o4 .bc { color: rgba(255,255,255,.85); }
.bcell.gap { border-style: dashed; background: transparent; opacity: .45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bcell.o0 { background: #17384D; } :root:not([data-theme="light"]) .bcell.o1 { background: #1E4D68; } :root:not([data-theme="light"]) .bcell.o2 { background: #276587; } }
:root[data-theme="dark"] .bcell.o0 { background: #17384D; } :root[data-theme="dark"] .bcell.o1 { background: #1E4D68; } :root[data-theme="dark"] .bcell.o2 { background: #276587; }