:root {
  --bg: #f7f4f5;           /* soft warm white */
  --surface: #ffffff;      /* card / paper */
  --surface-2: #f5eef1;
  --ink: #3a3537;          /* charcoal-grey text */
  --ink-soft: #6c6469;
  --muted: #a59ba1;        /* soft grey */
  --line: #efe8ec;
  --line-strong: #e3d9df;
  --accent: #f6b5d3;       /* brand pink */
  --accent-deep: #d4669e;  /* readable pink — links, hover, active text */
  --accent-soft: #fcecf3;  /* pale pink — badges, chips, active pill */
  --mark: #ef96c4;         /* wordmark "st" */
  --brand-grey: #7f7f7f;   /* brand grey — wordmark body, logo bg */
  --sidebar: #ffffff;      /* light sidebar */
  --sidebar-ink: #6c6469;
  --danger: #c0564b;
  --ok: #4a8f6b;
  --warn: #c98a2c;
  --focus-ring: 0 0 0 3px rgba(246,181,211,.40);
  --shadow: 0 1px 2px rgba(60,50,55,.05), 0 10px 30px rgba(60,50,55,.07);
  --shadow-lg: 0 24px 60px rgba(60,50,55,.16);
  --r: 14px;
  --r-sm: 9px;
  --serif: "Fraunces", "Noto Sans Thai", Georgia, serif;   /* Thai has no Fraunces glyphs: fall back to Noto Sans Thai, not the OS font */
  --round: "Fredoka", "Inter", sans-serif;
  --sans: "Inter", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale — calibrated to values already used in this file (18/22/26/40/48…)
     so adopting these in new CSS shifts nothing visually. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 26px; --s-7: 36px; --s-8: 48px;
  /* Type scale — six steps covering the sizes already hardcoded across the file. */
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px;
  --fs-md: 17px; --fs-lg: 22px; --fs-xl: 34px;
  /* Z-index scale — fixes real ordering bugs (toast at 9999 rendering over a modal
     at 100; a tooltip with no declared layer at all). */
  --z-sticky: 5; --z-nav: 40; --z-drawer: 60;
  --z-modal: 100; --z-tooltip: 300; --z-toast: 400;

  /* Content width — ONE value for every route. This used to be 1200px with wide-table
     routes opting into min(1720px,100%) via .content.is-wide, but on a wide monitor the
     1200px cap plus `margin:0 auto` left ~200px of dead space either side of the content
     (Home, Collection, etc.) while the opted-in routes (Create PO, PO History, Receiving)
     filled the screen properly — which is exactly the mismatch the user reported. The
     100% term means the content simply fills the space beside the sidebar until the
     screen gets genuinely huge, and the 1720px term stops line lengths running away on
     ultra-wide displays. */
  --content-max: min(1720px, 100%);
}
/* Inert hook for a future platform-wide dark theme — deliberately empty. Dark mode
   was removed from the Sale Analysis/Projects modules (see .sx-root below) rather
   than extended everywhere; if it's wanted later, values go here. */
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.2em; margin: 10px 0 0; font-size: 13px; }
.link { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.link:hover { color: var(--ink); }
.brand-mark { color: var(--accent-deep); }
/* brand wordmark (rounded, lowercase) */
.brand-text { font-family: var(--round); text-transform: lowercase; font-weight: 600; color: var(--brand-grey); letter-spacing: -.01em; }
.brand-text .wm-mark { color: var(--mark); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }

.demo-badge {
  position: fixed; bottom: 16px; right: 16px; z-index: 200; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-lg); opacity: .92;
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  padding: 11px 18px; border-radius: var(--r-sm); transition: all .16s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #a8483e; border-color: #a8483e; color: #fff; }
.btn-block { width: 100%; margin-top: 10px; }
.btn-sm { padding: 8px 13px; font-size: 12.5px; }
.btn-icon { padding: 9px; width: 36px; height: 36px; }
.skip-link { position: absolute; top: -50px; left: 12px; z-index: var(--z-toast); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
/* Sprite icons (index.html's <symbol> defs) — presentation attributes on the <symbol>
   itself don't apply through <use>'s shadow DOM, but CSS properties do, so fill/stroke
   live here rather than on the sprite markup. */
.ic { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn .ic, .btn-icon .ic { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- login ---------- */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-aside {
  background:
    radial-gradient(680px 460px at 20% 16%, #fbdcea 0%, transparent 62%),
    radial-gradient(620px 520px at 90% 94%, #f0e6eb 0%, transparent 58%), #f8eef3;
  color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; padding: 56px 60px;
}
.login-wordmark { font-size: 76px; line-height: 1; }
.login-wordmark .brand-text { font-weight: 600; }
.login-tag { color: var(--ink-soft); font-size: 14px; letter-spacing: .04em; margin: 18px 0 0; }
.login-card { align-self: center; width: 100%; max-width: 380px; margin: 0 auto; padding: 44px 44px; background: var(--surface); }
.login-screen > .login-card { box-shadow: none; border: none; background: transparent; }
.login-card h1 { margin: 0 0 4px; font-size: 30px; }
.login-card .muted { margin: 0 0 26px; font-size: 13px; }
.login-hint { margin-top: 20px; font-size: 12px; text-align: center; }

/* ---------- inputs ----------
   Layout (width/margin) lives in a zero-specificity :where() so every existing
   per-module override (.ws-table input, .pj-editable-table input, .tlv-toolbar
   select, …) keeps winning automatically — no call site needs to change. Only
   the shared "skin" (padding/border/font/colour) stays at normal specificity. */
:where(input, select) { width: 100%; margin-top: 7px; min-width: 0; }
:where(label) { display: block; font-weight: 600; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.label-plain { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--ink); }
input, select {
  padding: 11px 13px; font-family: var(--sans); font-size: 14px; font-weight: 500;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-transform: none; letter-spacing: normal;
}
/* Hide the browser's native number spinners (the up/down arrows that appear on hover in
   Create PO's Total to order / Actual ordered, and in every other numeric cell — they all
   have the identical behaviour). Purely visual: the fields stay type="number", so typing,
   min/max and every existing calculation and validation are unchanged. Removing them also
   takes away a real hazard in a PO worksheet — a stray click on an arrow silently changes
   an order quantity by one. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input::placeholder { color: #c3b8bf; }
input:focus, select:focus { outline: none; border-color: var(--accent-deep); box-shadow: var(--focus-ring); }
.search { max-width: 380px; margin: 0 0 22px; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* New-form opt-in wrapper (Phase 5 inline validation) — not backfilled onto
   existing markup, :where() above already fixed those. */
.form-field { margin-bottom: 14px; }
/* fieldError()'s fallback (no .form-field wrapper) marks the input's own parent, which
   varies across this app's existing markup (bare <label>, .picker-block, a plain row div
   around a <select> + button) — kept generic rather than enumerating every wrapper shape. */
.field-msg { color: var(--danger); font-size: var(--fs-sm); margin-top: 5px; display: block; text-transform: none; letter-spacing: normal; font-weight: 500; }
.is-invalid > input, .is-invalid > select, .is-invalid > .chip-pick { border-color: var(--danger); }
.is-invalid > .chip-pick { border-width: 1px; border-style: solid; border-radius: var(--r-sm); padding: 6px; }

/* ---------- app shell ---------- */
/* minmax(0, 1fr), NOT 1fr. A `1fr` track has an automatic minimum, so it refuses to shrink
   below its content's min-content width — any wide child (the Timeline's
   `.tlv-grid{min-width:max-content}`, or a `.dt` table's `--dt-min`) then inflates this
   track, widens .content past the viewport and scrolls the WHOLE PAGE sideways, dragging
   the header and toolbar off-screen with it. minmax(0,…) lets the track shrink so those
   children scroll inside their own `overflow:auto` box, which is what they were built to do.
   Measured on Timeline before/after: page scrollWidth 1572 -> 1397 at a 1397px viewport. */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--sidebar); color: var(--sidebar-ink); padding: 26px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 27px; padding: 2px 10px 26px; }
.logo .brand-text { font-weight: 600; }
.nav-drawer-close { display: none; }
/* ---- swap-in logo support: drop a logo.png in the project root ---- */
.brand-logo { display: none; }
.has-logo .brand-text { display: none; }
.has-logo .brand-logo { display: block; }
.logo .brand-logo { height: 30px; width: auto; }
.login-wordmark .brand-logo { height: 76px; width: auto; max-width: 100%; }
.po-doc-brand .brand-logo { height: 36px; width: auto; }
.nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: var(--r-sm); color: var(--sidebar-ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: all .15s; }
.nav-item .ic { width: 18px; text-align: center; opacity: .75; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-deep); }
.nav-item.active .ic { opacity: 1; color: var(--accent-deep); }
/* Groups (Products/Orders/Insights/Projects/Finance/Admin) mirror the permission matrix —
   a group with zero visible items gets .hidden (JS, refreshNavGroups()) rather than
   rendering an empty labelled section. */
.nav-group { margin-top: 14px; }
.nav-group-title { padding: 0 14px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.nav-group .nav-item { gap: 13px; }
/* Once so few tabs are visible that grouping adds no scanning value (≤5 total), the nav
   flattens back into a plain list — group titles disappear, spacing equalizes. */
.nav--flat .nav-group { margin-top: 0; }
.nav--flat .nav-group-title { display: none; }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }
.user-chip { font-size: 12px; color: var(--muted); margin-bottom: 10px; word-break: break-all; }
.mobile-topbar { display: none; }
.nav-scrim { display: none; }

.content { width: 100%; padding: 40px 48px 70px; max-width: var(--content-max); margin: 0 auto; }
.view { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0 0 6px; font-size: 34px; }
.page-head p { margin: 0; font-size: 14px; }
.section-title { font-size: 19px; margin: 36px 0 16px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 40px 0 16px; }
.section-head .section-title { margin: 0; }
.back-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13px; display: inline-block; margin-bottom: 18px; }
.back-link:hover { color: var(--accent-deep); }

/* ---------- home dashboard (Platform UX Phase 2) ---------- */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.home-card { grid-column: span 2; }
.home-card.span-half { grid-column: span 1; }
@media (max-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1fr); } .home-card.span-half { grid-column: span 1; } }
.home-card .card-title { font-family: var(--serif); font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-card .card-title .link { font-size: var(--fs-sm); font-weight: 600; }

.home-queue { display: flex; flex-direction: column; gap: 2px; }
.home-queue-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13.5px; transition: background .12s; }
.home-queue-row:hover { background: var(--surface-2); }
.home-queue-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--muted); }
.home-queue-dot.warn { background: var(--warn); }
.home-queue-dot.danger { background: var(--danger); }
.home-queue-row .home-queue-count { font-family: var(--serif); font-size: 15px; min-width: 22px; }
.home-queue-row .home-queue-label { flex: 1; color: var(--ink-soft); font-weight: 500; }
.home-queue-empty { color: var(--muted); font-size: 13.5px; padding: 6px 8px; }

.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.tile { background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s-4); text-decoration: none; color: var(--ink); display: block; transition: transform .12s, box-shadow .12s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile-num { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.tile-label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-top: 6px; display: block; }
.tile-delta { font-size: 11.5px; font-weight: 600; margin-top: 4px; }
.tile-delta.up { color: var(--ok); } .tile-delta.down { color: var(--danger); } .tile-delta.flat { color: var(--muted); }

.home-list { display: flex; flex-direction: column; gap: 10px; }
.home-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--ink); font-size: 13px; }
.home-list-row .hl-main { font-weight: 600; }
.home-list-row .hl-sub { color: var(--muted); font-size: 12px; }
.home-progress { width: 100%; height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.home-progress > span { display: block; height: 100%; background: var(--accent-deep); border-radius: 999px; }

.home-empty { text-align: center; padding: var(--s-6) var(--s-4); color: var(--muted); }
.home-empty .ic { width: 30px; height: 30px; opacity: .45; margin-bottom: 8px; }
.home-empty p { margin: 4px 0 0; font-size: 13px; }

/* ---------- stats (legacy — still used by non-Home stat rows if any) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; }
.stat-num { display: block; font-family: var(--serif); font-size: 38px; line-height: 1; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; display: block; }

/* ---------- workflow ---------- */
.workflow { display: flex; align-items: stretch; gap: 8px; }
.step-card { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; cursor: pointer; transition: all .18s; }
.step-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.step-no { font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--accent-deep); letter-spacing: .14em; margin-bottom: 14px; }
.step-card h3 { margin: 0 0 8px; font-size: 18px; }
.step-card p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.step-link { color: var(--accent-deep); font-weight: 700; font-size: 13px; }
.step-arrow { display: grid; place-items: center; color: var(--line-strong); font-size: 20px; }

/* ---------- cards / grids ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.col-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: all .18s; }
.col-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.col-card .thumb { aspect-ratio: 1/1; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); display: grid; place-items: center; color: var(--line-strong); font-size: 34px; overflow: hidden; }
.col-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.col-card .meta { padding: 16px 18px; }
.col-card .meta strong { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.col-card .meta .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-top: 10px; }

/* collection detail */
.collection-head { align-items: center; }
.collection-hero { display: flex; gap: 22px; align-items: center; }
.collection-hero-img { width: 96px; height: 96px; border-radius: var(--r-sm); object-fit: cover; background: var(--accent-soft); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.item-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; transition: all .15s; }
.item-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.item-card .item-top { display: flex; gap: 13px; align-items: center; margin-bottom: 12px; }
.item-card .item-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--accent-soft); flex: none; }
.item-card .item-title { font-family: var(--serif); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.item-card svg { width: 100%; }

/* ---------- form grid ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }

.pm-image-row { display: flex; align-items: center; gap: 12px; }
.pm-image-row input[type=file] { flex: 1; min-width: 0; }
.pm-image-preview { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); flex: 0 0 auto; }

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(27,24,21,.5); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: var(--z-modal); padding: 20px; }
.modal { background: var(--surface); border-radius: 18px; padding: 30px; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--shadow-lg); animation: pop .16s ease; border: 1px solid var(--line); }
.modal-wide { max-width: 760px; }
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-head h2 { margin: 0; font-size: 22px; }
.modal-close { border: none; background: var(--surface-2); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--muted); }
.modal-close:hover { background: var(--accent-soft); color: var(--accent-deep); }
/* ---------- command palette (Phase 6 speed layer) ---------- */
.cmdk-trigger { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 14px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; }
.cmdk-trigger:hover { border-color: var(--line-strong); color: var(--ink); }
.cmdk-trigger .cmdk-kbd { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; }
.cmdk-modal.modal-backdrop { align-items: flex-start; padding-top: 12vh; }
.modal.cmdk-modal { max-width: 600px; padding: 0; overflow: visible; }
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cmdk-input-row .ic { flex: none; color: var(--muted); }
.cmdk-input { border: none; padding: 0; margin: 0; font-size: 16px; box-shadow: none; }
.cmdk-input:focus { outline: none; box-shadow: none; }
.cmdk-input-row .modal-close { flex: none; width: 26px; height: 26px; font-size: 11px; }
.cmdk-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.cmdk-group-label { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer; color: var(--ink); }
.cmdk-item .ic { flex: none; color: var(--muted); opacity: .8; }
.cmdk-item-main { flex: 1; min-width: 0; }
.cmdk-item-title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item.active, .cmdk-item:hover { background: var(--accent-soft); }
.cmdk-item.active .cmdk-item-title, .cmdk-item:hover .cmdk-item-title { color: var(--accent-deep); }
.cmdk-empty { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.photo-lightbox-backdrop { background: rgba(10, 9, 8, .82); cursor: zoom-out; }
.photo-lightbox-img { max-width: min(90vw, 1100px); max-height: 90vh; object-fit: contain; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); cursor: default; }
.photo-lightbox-close { position: fixed; top: 20px; right: 20px; background: rgba(255,255,255,.12); color: #fff; }
.photo-lightbox-close:hover { background: rgba(255,255,255,.22); color: #fff; }
/* Every real content photo (collection/product/PO thumbnails, hero images, previews) gets a
   zoom-in cursor as a hint that clicking enlarges it — see the document-level click delegate
   in app.js. The brand logo is excluded there, not here, since exclusion needs JS anyway. */
.thumb img, .collection-hero-img, .pick-thumb img, .pst-id img, .sv-coll img, .imp-thumb img, .pm-image-preview {
  cursor: zoom-in;
}
.cr-hint { margin: -8px 0 14px; font-size: 12.5px; }
.cr-reasons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cr-reasons label, .cr-other-label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.cr-reasons input[type="checkbox"], .cr-other-label input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent-deep); transform: scale(1.15); }
.cr-other-label { margin-bottom: 8px; }
#cr-other-text { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 9px 11px; font-size: 13.5px; font-family: inherit; resize: vertical; }
#cr-other-text.hidden { display: none; }
.cr-error { color: var(--danger, #b3352c); font-size: 13px; margin: 0 0 10px; }
.cr-error.hidden { display: none; }
.cr-actions { display: flex; gap: 10px; justify-content: flex-end; }
.barcode-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 16px 18px; margin: 8px 0 16px; }
.barcode-box svg { max-width: 250px; height: 58px; }
code { background: var(--accent-soft); color: var(--accent-deep); padding: 3px 9px; border-radius: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .03em; font-family: "SF Mono", ui-monospace, monospace; }

/* ---------- PO builder ---------- */
.po-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.po-picker { padding: 18px; position: sticky; top: 24px; }
.po-picker-list { max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 9px; }
.pick-row { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; transition: all .14s; }
.pick-row:hover { border-color: var(--line-strong); }
.pick-row.on { border-color: var(--accent); background: var(--accent-soft); }
.pick-row .pr-main { flex: 1; min-width: 0; }
.pick-row .pr-main strong { font-size: 13px; display: block; }
.pick-row .pr-main span { font-size: 11px; color: var(--muted); }
.pick-row input[type="number"] { width: 58px; margin: 0; padding: 7px; }
.pick-row input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.po-fields { margin-bottom: 22px; }
.po-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 8px; }

/* PO printable document */
.po-document { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 36px; box-shadow: var(--shadow); }
.po-doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 18px; margin-bottom: 22px; }
.po-doc-brand { font-size: 27px; }
.po-doc-head .muted { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.po-doc-meta { text-align: right; font-size: 13px; line-height: 1.8; }
.po-doc-meta strong { color: var(--muted); font-weight: 600; margin-right: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 10px; border-bottom: 1px solid var(--line); }
.doc-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.doc-table td.empty { text-align: center; color: var(--muted); padding: 36px; font-style: italic; }
.doc-table .di { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--accent-soft); }
.doc-table svg { height: 32px; }
.po-doc-foot { display: flex; justify-content: flex-end; gap: 34px; font-family: var(--serif); font-weight: 700; padding-top: 18px; font-size: 16px; }

/* At 960px a 256px static sidebar plus a wide .dt table is already broken — raised from
   920 to 1080 so the drawer takes over before that crush happens. Below this width the
   sidebar becomes a slide-in drawer (closed by default) instead of a squeezed static column,
   opened via the hamburger in .mobile-topbar. */
@media (max-width: 1080px) {
  /* minmax(0,…) here for the same reason as the desktop rule above — on a phone a wide
     table or the Gantt would otherwise stretch this single track past the viewport and
     scroll the whole page sideways, which is the harder failure to notice on mobile. */
  .app { grid-template-columns: minmax(0, 1fr); }
  .mobile-topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: var(--z-nav); background: var(--sidebar); border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .mobile-topbar .mobile-brand { font-size: 19px; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer); width: 280px; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-top .logo { padding: 2px 0 0; }
  .nav-drawer-close { display: block; }
  .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(27,24,21,.45); z-index: calc(var(--z-drawer) - 1); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .nav-scrim.show { opacity: 1; pointer-events: auto; }
  .content { padding: 22px 16px 60px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-head h1 { font-size: 24px; }
  .head-actions { flex-wrap: wrap; }
  .workflow { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); }
  .po-layout { grid-template-columns: 1fr; }
  .po-picker { position: static; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .modal { padding: 22px 18px; }
  .recv-editor-head, .recv-receipt-meta, .bcm-drill-controls { gap: 10px; }
}

/* ---------- wordmark in PO doc ---------- */
.po-doc-brand .brand-text { font-weight: 600; }

/* ---------- hints & pills ---------- */
.hint { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 6px; }
.codepill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.codepill strong { font-family: "SF Mono", ui-monospace, monospace; color: var(--accent-deep); letter-spacing: .02em; }
.card-pills { display: flex; gap: 8px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.card-pills .badge { margin-top: 0; }
.product-card .thumb { font-size: 30px; }
.cw-colour { color: var(--accent-deep); font-weight: 700; }
.mnfpill { font-weight: 700; }
.mnfpill.mnf-empty { color: var(--line-strong); border-style: dashed; }

/* MNF editor on the colourway detail page */
.mnf-edit { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.mnf-edit select { text-transform: none; letter-spacing: normal; font-weight: 600; padding: 6px 10px; border-radius: 999px; min-width: 140px; }

/* role-based UI */
.role-hidden { display: none !important; }

/* Users & roles */
.users-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.user-row { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.user-main { display: flex; flex-direction: column; gap: 3px; }
/* Account actions (reset password / delete) sit above the per-tab permission grid.
   Wraps so the pair never squeezes the email off the row on a narrow screen. */
.user-acct-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.user-acct-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.user-main strong { font-size: 15px; }
.user-main .badge { margin-top: 0; align-self: flex-start; }
.user-id { font-size: 11px; font-family: "SF Mono", ui-monospace, monospace; word-break: break-all; }
.role-chip { position: relative; cursor: pointer; user-select: none; margin: 0; display: inline-block; text-transform: none; width: fit-content; }
.role-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.role-chip span { display: inline-block; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: normal; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink-soft); transition: background .14s, border-color .14s, color .14s; }
.role-chip:hover span { border-color: var(--accent); color: var(--ink); }
.role-chip input:checked + span { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.role-chip.is-self { cursor: not-allowed; }
.role-chip.is-self span { opacity: .55; }
.role-chip.is-self:hover span { border-color: var(--line-strong); color: var(--ink-soft); }

/* Per-user permission matrix (Users page) — one row per tab, a None/View/Full
   button group, plus any independent extra sub-permission checkboxes. */
.perm-tab-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
/* three aligned columns on every row: page | None/View/Full | extra permissions */
.perm-tab-row { display: grid; grid-template-columns: minmax(170px, 230px) 196px minmax(0, 1fr); align-items: center; gap: 10px 20px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.perm-tab-row:last-child { border-bottom: none; }
.perm-tab-row:not(.perm-tab-head):hover { background: #fdf8fa; }
.perm-tab-head { padding-top: 10px; padding-bottom: 10px; background: var(--surface-2); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.perm-tab-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.perm-lvl-cell { display: flex; }
.perm-lvl-group { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.perm-lvl-btn { border: none; background: transparent; color: var(--ink-soft); font: 600 12px/1 var(--sans); width: 60px; padding: 7px 0; border-radius: 999px; cursor: pointer; transition: background .14s, color .14s, box-shadow .14s; }
.perm-lvl-btn:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.perm-lvl-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.perm-lvl-btn.on { background: var(--accent-deep); color: #fff; box-shadow: 0 1px 3px rgba(212,102,158,.35); }
.perm-lvl-btn[disabled] { opacity: .5; cursor: wait; }
.perm-extra-group { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.perm-extra-group:empty::before { content: "—"; color: var(--line-strong); }
/* extra permission = a pill toggle (the global label/input styles don't apply here) */
.perm-extra-chip { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px 7px 9px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-soft); cursor: pointer; user-select: none; max-width: 100%; transition: border-color .14s, background .14s, color .14s; }
.perm-extra-chip:hover { border-color: var(--accent); color: var(--ink); }
.perm-extra-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pec-box { flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; transition: background .14s, border-color .14s; }
.pec-box::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.pec-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; min-width: 0; }
.pec-txt small { font-size: 11px; font-weight: 500; color: var(--muted); }
.perm-extra-chip input:checked ~ .pec-box { background: var(--accent-deep); border-color: var(--accent-deep); }
.perm-extra-chip input:checked ~ .pec-box::after { opacity: 1; }
.perm-extra-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.perm-extra-chip input:focus-visible ~ .pec-box { box-shadow: var(--focus-ring); }
.perm-extra-chip input:disabled ~ .pec-box { opacity: .5; }
@media (max-width: 900px) {
  .perm-tab-row { grid-template-columns: minmax(0, 1fr) auto; }
  .perm-extra-group { grid-column: 1 / -1; }
  .perm-extra-group:empty { display: none; }
  .perm-tab-head span:last-child { display: none; }
}
@media (max-width: 520px) {
  .perm-tab-row { grid-template-columns: 1fr; padding: 12px 14px; }
  .perm-tab-head { display: none; }
}

/* PO history */
.pos-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.po-hist { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.po-hist-main { display: flex; flex-direction: column; gap: 4px; }
.po-hist-main strong { font-family: var(--serif); font-size: 16px; }
.po-hist-sub { font-size: 12px; }
.po-hist-pills { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.po-hist-pills .badge { margin-top: 0; }
.po-hist-act { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
/* Danger buttons on a page (Delete, Cancel voucher, Cancel receipt…) are a calm red outline. This rule used to
   override only the text colour of the solid red .btn-danger above, leaving dark-red text on a red fill. The final
   "yes, delete" button inside a confirm dialog stays solid red. */
.btn-danger { background: var(--surface); color: #a23232; border-color: #f0bcbc; }
.btn-danger:hover { background: #fdecec; border-color: #e79a9a; color: #8c2424; }
.btn-danger[disabled], .btn-danger[disabled]:hover { background: var(--surface); color: #c9a3a3; border-color: #f3dede; cursor: not-allowed; }
[data-cd-confirm].btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
[data-cd-confirm].btn-danger:hover { background: #a8483e; border-color: #a8483e; color: #fff; }

/* PO detail modal */
.pod-meta { font-size: 13px; margin: -6px 0 14px; }
.pod-lines { max-height: 56vh; overflow: auto; }
.pod-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pod-table th, .pod-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pod-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.pod-table .num { text-align: right; }
.pod-table code { font-size: 11px; }
.pod-table tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: none; }
.pod-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* PO single-MNF banner */
.po-mnf-banner { margin: 14px 0 4px; padding: 12px 16px; border-radius: var(--r-sm); font-size: 13px; border: 1px solid var(--line); }
.po-mnf-banner.hidden { display: none; }
.po-mnf-banner.ok { background: var(--accent-soft); border-color: var(--line-strong); color: var(--ink); }
.po-mnf-banner.warn { background: #fdecec; border-color: #f0bcbc; color: #a23232; }

/* ---------- product detail ---------- */
.pd-codes { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.pd-codes .badge { margin-top: 0; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.variant-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; transition: all .15s; }
.variant-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.vc-head { margin-bottom: 12px; }
.vc-title { font-family: var(--serif); font-weight: 600; font-size: 14px; }
.vc-lai { font-size: 11px; margin-top: 1px; }
.variant-card svg { width: 100%; }
.vc-sku { font-size: 10.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; word-break: break-word; }

/* ---------- chip pickers (add product) ---------- */
.picker-block { margin-bottom: 16px; }
.picker-label { font-weight: 600; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.chip-pick { display: flex; flex-wrap: wrap; gap: 7px; max-height: 132px; overflow: auto; padding: 2px; }
.chip { font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); padding: 7px 12px; border-radius: 999px; transition: all .13s; }
.chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- generation preview ---------- */
.gen-preview { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 18px 20px; margin: 6px 0 16px; }
.gp-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gp-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.gp-row .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; min-width: 132px; }
.gp-row .sku { font-size: 11.5px; color: var(--ink-soft); word-break: break-word; }
.gen-preview svg { max-width: 240px; height: 56px; flex: none; }

/* ---------- wide PO doc ---------- */
.doc-scroll { overflow-x: auto; }
.doc-table .td-name { font-weight: 600; }
.doc-table td code { font-size: 11px; letter-spacing: .02em; }

@media (max-width: 920px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .login-screen { grid-template-columns: 1fr; }
  .login-aside { padding: 40px 32px; min-height: 200px; }
  .login-wordmark { font-size: 40px; }
  .gen-preview { flex-direction: column; align-items: stretch; }
}

/* ---------- PO worksheet (size-split) ---------- */
.po-head-card { margin-bottom: 18px; }
.po-head-card .po-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
.po-addstyle { margin-bottom: 22px; }
.po-pick-head { margin-bottom: 14px; }
.po-pick-title { font-size: 18px; margin: 0 0 2px; }
.po-pick-sub { font-size: 13px; }
.po-pick-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.po-pick-bar .search { margin: 0; flex: 1; min-width: 220px; }
.po-collection-filter { width: auto; min-width: 200px; margin: 0; }
.po-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-height: 460px; overflow: auto; padding: 2px; }
.po-pick-empty { padding: 28px 4px; grid-column: 1 / -1; }
.pick-card { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 0; cursor: pointer; font-family: var(--sans); overflow: hidden; transition: all .15s; display: flex; flex-direction: column; }
.pick-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.pick-thumb { position: relative; aspect-ratio: 1/1; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); display: grid; place-items: center; color: var(--line-strong); font-size: 30px; overflow: hidden; }
.pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pick-add, .pick-added { position: absolute; bottom: 8px; right: 8px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; letter-spacing: .02em; }
.pick-add { background: var(--ink); color: #fff; opacity: 0; transform: translateY(4px); transition: all .15s; }
.pick-card:hover .pick-add { opacity: 1; transform: none; }
.pick-added { background: #e9f3ec; color: #3f7d52; }
.pick-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.pick-info strong { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); }
.pick-line { font-size: 12px; color: var(--ink-soft); }
.pick-line2 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.pick-line2 .badge { margin-top: 0; }
.pick-card.added { opacity: .6; cursor: default; }
.pick-card.added:hover { transform: none; box-shadow: none; border-color: var(--line); }
.po-empty { padding: 32px 0; }

.po-style { margin-bottom: 20px; padding: 0; overflow: hidden; }
.po-style-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pst-id { display: flex; align-items: center; gap: 13px; }
.pst-id img, .pst-noimg { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; background: var(--accent-soft); display: grid; place-items: center; color: var(--line-strong); flex: none; }
.pst-id strong { font-family: var(--serif); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.tag-new { background: #e9f3ec; color: #3f7d52; }
.tag-restock { background: var(--accent-soft); color: var(--accent-deep); }
.restock-select { width: auto; margin: 0 0 0 8px; padding: 3px 22px 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: none; border-radius: 999px; cursor: pointer; vertical-align: middle; }
.pst-total { display: flex; align-items: center; gap: 14px; }
.pst-total .inline { display: flex; flex-direction: column; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pst-total .inline input { width: 120px; margin-top: 5px; font-weight: 700; }
.iconbtn { border: 1px solid var(--line-strong); background: var(--surface); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 13px; flex: none; }
.iconbtn:hover { border-color: var(--danger); color: var(--danger); }

/* ===== Data table system (.dt) — shared layout mechanics for Order Status, Receiving,
   Reorder Alerts, Create PO worksheet, Sales Projection (see PM's own .pj-fixed-table for
   the same mechanism applied earlier). table-layout:fixed + <colgroup> is the only way to
   stop input[type=date]'s non-overridable ~110-140px intrinsic minimum from crushing text
   columns down to nothing under table-layout:auto — under fixed, the browser doesn't
   consult cell content at all, so column width is exactly what the <col> says. */
.dt-wrap, .po-style-scroll, .sx-table-wrap { overflow-x: auto; }
.dt { table-layout: fixed; min-width: var(--dt-min, 900px); }
.dt th, .dt td { overflow-wrap: break-word; }
.dt thead th { position: sticky; top: 0; background: var(--surface); z-index: var(--z-sticky); }
.dt th:first-child, .dt td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.dt thead th:first-child { z-index: calc(var(--z-sticky) + 1); }
.dt tfoot td:first-child { background: var(--surface); }
.dt col.c-date { width: 112px; }
.dt col.c-sel { width: 118px; }
.dt col.c-num { width: 76px; }
.dt col.c-qty { width: 88px; }
.dt col.c-code { width: 150px; }
.dt col.c-act { width: 64px; }
.dt col.c-thumb { width: 60px; }
.dt col.c-flex { width: auto; }
.dt-edit input, .dt-edit select, .dt-edit textarea { width: 100%; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; font: inherit; }
.dt-edit input:hover, .dt-edit select:hover, .dt-edit input:focus, .dt-edit select:focus { border-color: var(--line-strong); background: var(--surface-2); }
/* Card-per-row below 700px — the three views actually used on the warehouse floor
   (Order Status, Reorder Alerts, Receiving). Cells opt in via data-label; a cell with
   neither data-label nor .dt-card-title (row numbers, thumbnails) is dropped in card view
   rather than rendered as a bare unlabeled row. */
@media (max-width: 700px) {
  .dt-cards { min-width: 0; }
  .dt-cards thead, .dt-cards tfoot { display: none; }
  .dt-cards, .dt-cards tbody, .dt-cards tr { display: block; width: 100%; }
  .dt-cards tbody tr { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; padding: 4px 12px; background: var(--surface); position: static; }
  .dt-cards td { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3px 8px; text-align: right; padding: 6px 0; border-bottom: 1px solid var(--line); position: static; }
  .dt-cards tr td:last-child { border-bottom: none; }
  .dt-cards td[data-label]::before { content: attr(data-label); flex: 0 0 100%; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
  .dt-cards td.dt-card-title { display: block; text-align: left; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--line-strong); }
  .dt-cards td:not([data-label]):not(.dt-card-title) { display: none; }
}
/* Overrides .ws-table/.sx-table's white-space:nowrap on th (needs higher specificity than
   those single-class rules since .dt wrapping is the whole point of the fixed layout —
   headers should wrap onto 2 lines in a narrow column, not force it wide). */
.ws-table.dt th, .sx-table.dt th { white-space: normal; }

.po-style-scroll { overflow-x: auto; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ws-table th { text-align: left; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ws-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ws-table .ws-size { font-weight: 600; }
.ws-table code { font-size: 11px; background: none; color: var(--ink-soft); padding: 0; }
.ws-table input { width: 80px; margin: 0; padding: 7px 8px; }
.ws-pct { white-space: nowrap; }
.ws-pct input { width: 58px; }
.ws-pct span { color: var(--muted); margin-left: 3px; }
.ws-rm { white-space: nowrap; }
.ws-rm input.rm-reused { background: var(--accent-soft, #fde9f3); border-color: var(--accent, #f6b5d3); }
.ws-rm .rm-tag { margin-left: 5px; color: var(--accent-deep, #c2557f); font-size: 12px; cursor: help; }
.ws-table .oq { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink-soft); }
.ws-table .ws-sales { font-weight: 600; color: var(--ink-soft); text-align: center; }
.ws-table .ws-salespct { font-weight: 600; color: var(--accent-deep); text-align: center; white-space: nowrap; }
.ws-table .ws-notrecv { font-weight: 600; color: var(--muted); text-align: center; }
.ws-table tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: none; }
.ws-table .ws-proj { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink-soft); text-align: center; white-space: nowrap; }
.ws-table .ws-projpct { font-weight: 600; color: var(--accent-deep); text-align: center; white-space: nowrap; }
.po-sync-status { margin-top: 8px; font-size: 12px; }
.po-edit-banner { margin: 12px 0 2px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; background: var(--accent-soft, #fde9f3); border: 1px solid var(--accent, #f6b5d3); color: var(--ink); }
.po-edit-banner.hidden { display: none; }
.linkbtn { background: none; border: none; padding: 0; margin-left: 6px; color: var(--accent-deep, #c2557f); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ===== Goods Receiving ===== */
.recv-status-card { margin-bottom: 20px; }
.recv-rm-missing { border-color: var(--danger) !important; background: #fdecec; }
.recv-status-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.recv-status-bar .search { flex: 1; min-width: 220px; }
.recv-pending-only { margin: 0; white-space: nowrap; }
.po-hist.recv-sel { border-color: var(--accent, #f6b5d3); box-shadow: 0 0 0 2px var(--accent-soft, #fde9f3); }
.recv-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; vertical-align: middle; letter-spacing: .02em; }
.recv-badge.done { background: #e3f4ea; color: #1f7a45; }
.recv-badge.pending { background: #fdeede; color: #9a5a13; }
.recv-badge.open { background: var(--surface-2, #f1eee9); color: var(--muted); }
.recv-badge.cancelled { background: #fbe4e4; color: #a12f2f; }
.oos-summary { margin: 2px 0 12px; }
#oos-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#oos-table tr.oos-overdue td { background: #fbeaea; }
#oos-table .codepill { margin: 2px 4px 2px 0; }
.oos-thumb-cell { width: 44px; padding-right: 4px !important; }
.oos-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block; cursor: zoom-in; }
.oos-thumb-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--line-strong); font-size: 15px; cursor: default; }

/* ---- Sales Analysis (Hero Product dashboard) ---- */
.sa-status { margin: -6px 0 14px; }
.stat-link { cursor: pointer; }
.stat-link:hover .stat-num { color: var(--accent-deep); }
.sa-alerts-card { border-color: #f3c1c1; }
.sa-manual-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); color: var(--muted); padding: 2px 8px; border-radius: 20px; vertical-align: middle; margin-left: 6px; }
/* ---- Auto Reorder Alert System ---- */
.sa-reorder-card { border-color: #e8b4b4; }
.sa-reorder-card .po-pick-title { color: #a12f2f; }
.sa-ro-settings { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 12px 0 14px; padding: 10px 14px; background: var(--surface-2, #faf7f4); border-radius: var(--r-sm); }
.sa-ro-settings label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sa-ro-settings select, .sa-ro-settings input { margin: 0; padding: 7px 10px; width: auto; font-size: 13px; text-transform: none; letter-spacing: normal; font-weight: 500; }
.sa-ro-settings input { width: 76px; }
.sa-ro-total { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-left: auto; white-space: nowrap; }
#sa-reorder-table tr.sa-ro-critical td { background: #fdf3f3; }
#sa-reorder-table tr.sa-ro-warning td { background: #fdf8ec; }
.sa-badge.warn { background: #fdeede; color: #9a5a13; }
.sa-ro-ok { padding: 4px 0 2px; }
.sa-lead-lbl { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sa-lead-lbl select { margin: 0; padding: 6px 9px; width: auto; font-size: 12.5px; text-transform: none; letter-spacing: normal; font-weight: 500; }
.sa-alerts-card .po-pick-title { color: #a12f2f; }
#sa-alerts-table tr.sa-alert-row td { background: #fdf3f3; }
.sa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-chips .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.sa-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; vertical-align: middle; letter-spacing: .02em; white-space: nowrap; }
.sa-badge.hero   { background: #e3f4ea; color: #1f7a45; }
.sa-badge.fast   { background: #e3edfb; color: #1f4f9a; }
.sa-badge.normal { background: #fdf3d7; color: #8a6d1a; }
.sa-badge.slow   { background: #fbe4e4; color: #a12f2f; }
.sa-badge.disc   { background: var(--surface-2, #f1eee9); color: var(--muted); }
.sa-badge.new    { background: var(--accent-soft); color: var(--accent-deep); }
.sa-score { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sa-score-num { font-family: var(--serif); font-weight: 700; font-size: 15px; min-width: 26px; text-align: right; }
.sa-score-bar { width: 54px; height: 6px; border-radius: 4px; background: var(--surface-2, #f1eee9); overflow: hidden; }
.sa-score-fill { height: 100%; border-radius: 4px; }
.sa-score-fill.hero   { background: #2f9e5f; }
.sa-score-fill.fast   { background: #3d74d6; }
.sa-score-fill.normal { background: #d9a821; }
.sa-score-fill.slow   { background: #d65454; }
#sa-table tr.sa-prod { cursor: pointer; }
#sa-table tr.sa-prod:hover td { background: var(--accent-soft, #fde9f3); }
#sa-table tr.sa-prod.disc td { color: var(--muted); }
#sa-table tr.sa-detail > td { background: var(--surface-2, #faf7f4); padding: 14px 16px 16px; }
.sa-detail-head { display: flex; justify-content: flex-start; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sa-detail-action { font-size: 13px; }
.sa-sku-table { width: auto; max-width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sa-sku-table th { text-align: left; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.sa-sku-table td { padding: 5px 10px; border-bottom: 1px solid var(--line); }
.sa-sku-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sa-sku-table input.sa-min { width: 70px; margin: 0; padding: 5px 8px; }
.sa-sku-table tr.sa-low td { background: #fdf3f3; }
.sa-foot { margin: 12px 4px 0; font-size: 12px; line-height: 2; }
.sa-days { white-space: nowrap; }
.recv-editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.recv-editor-head h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; }
.recv-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.recv-locked-note { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; background: #e3f4ea; border: 1px solid #b6e0c6; color: #1f7a45; }
.recv-locked-note.hidden { display: none; }
.recv-locked-note.danger { background: #fbe4e4; border-color: #f0c2c2; color: #a12f2f; }
.recv-locked-note.warn { background: #fdf1de; border-color: #f3d9a6; color: #9a5a13; }
.recv-adj-list { margin-top: 6px; font-weight: 400; }
.recv-adj-row { padding: 2px 0; }
.recv-table th, .recv-table td { white-space: nowrap; }
.recv-table .recv-sub { font-size: 11px; font-weight: 400; }
.recv-table input[type=number] { width: 74px; }
.recv-table input[type=date] { width: 138px; }
.recv-table input[type=text] { width: 96px; }
.recv-var { font-family: var(--serif); font-weight: 700; font-size: 15px; text-align: center; }
.recv-var.over { color: #1f7a45; }
.recv-var.short { color: #b5462f; }
.recv-var.exact { color: var(--muted); }
.recv-stat { text-align: center; }
.ws-total td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: none; background: var(--surface-2); }
.ws-note { padding: 8px 20px 14px; font-size: 12px; color: var(--muted); min-height: 4px; }
.ws-note.warn { color: var(--danger); font-weight: 600; }

/* ---------- Excel import + collection export ---------- */
/* flex-shrink:0 + nowrap so a long intro paragraph beside these can't squeeze the
   buttons into a narrow column of wrapped words (the Users page did exactly that). */
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.head-actions .btn { white-space: nowrap; }
.chk { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 13px; color: var(--ink-soft); margin: 4px 0 14px; }
.chk input { width: auto; margin: 0; accent-color: var(--accent-deep); }
.imp-status { font-size: 13px; margin-bottom: 10px; min-height: 1em; }
.imp-status .warn { color: var(--danger); font-weight: 600; }
.imp-preview { max-height: 340px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.imp-row { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.imp-thumb { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--accent-soft); display: grid; place-items: center; color: var(--line-strong); flex: none; }
.imp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.imp-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imp-meta strong { font-family: var(--serif); font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.imp-meta > span { font-size: 11px; }
.imp-meta code { font-size: 11px; align-self: flex-start; }
.imp-warn { margin-top: 10px; font-size: 12px; color: var(--muted); }
.imp-warn summary { cursor: pointer; color: var(--danger); font-weight: 600; }
.imp-warn div { padding: 2px 0; }

/* ---------- Product Details panel ---------- */
.pd-details { margin-top: 24px; padding: 0; overflow: hidden; }
.pd-details-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pd-details-head h3 { margin: 0; font-family: var(--serif); font-size: 16px; font-weight: 600; }
.pd-section { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pd-section:last-child { border-bottom: none; }
.pd-section-title { margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pd-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.pd-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.pd-fields label input, .pd-fields label textarea, .pd-fields label select { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); resize: vertical; }
.pd-fields label input:focus, .pd-fields label textarea:focus, .pd-fields label select:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.pd-fields label input:disabled, .pd-fields label textarea:disabled, .pd-fields label select:disabled { opacity: .55; cursor: not-allowed; }
.pd-full { grid-column: 1 / -1; }
.pd-check { flex-direction: row !important; align-items: center; gap: 8px; cursor: pointer; text-transform: none !important; letter-spacing: normal !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink) !important; }
.pd-check input[type=checkbox] { width: auto; margin: 0; accent-color: var(--accent-deep); transform: scale(1.2); }
.pd-hidden { display: none !important; }
.pd-field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); display: block; margin-bottom: 8px; }

/* Fabric type — select + optional free-text below */
.pd-fabric-wrap { display: flex; flex-direction: column; gap: 6px; }
.pd-fabric-other { font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); }

/* Size measurement table */
.pd-size-wrap { display: flex; flex-direction: column; }
.size-msr-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.size-msr-table th { background: var(--surface-2); padding: 6px 8px; text-align: center; font-size: 11px; font-weight: 700; border: 1px solid var(--line); white-space: nowrap; }
.msr-unit { font-weight: 400; color: var(--muted); font-size: 10px; }
.size-msr-table td { border: 1px solid var(--line); padding: 2px 4px; }
.msr-size { font-weight: 700; text-align: center; background: var(--surface-2); color: var(--ink); min-width: 36px; }
.msr-input { width: 58px; text-align: center; border: none; background: transparent; padding: 4px 2px; font-size: 12px; color: var(--ink); }
.msr-input:focus { outline: 2px solid var(--accent); border-radius: 3px; background: var(--surface); }
.msr-input:disabled { opacity: .5; cursor: not-allowed; }

/* Exclusive platform compound group */
.pd-excl-group { display: flex; flex-direction: column; }
.pd-excl-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pd-excl-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.pd-excl-row label input, .pd-excl-row label select { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); }
#pd-exclusive-other { font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); align-self: flex-end; }

/* Care instruction — grouped chip panel */
.pd-care-wrap { display: flex; flex-direction: column; gap: 8px; }
.pd-care-count { font-size: 11px; font-weight: 400; color: var(--accent-deep); text-transform: none; letter-spacing: normal; }
.pd-care-groups { display: flex; flex-direction: column; gap: 10px; }
.care-group { display: flex; flex-direction: column; gap: 6px; }
.care-group-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.care-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.care-chip { position: relative; cursor: pointer; user-select: none; }
.care-chip input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.care-chip span { display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: normal; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink-soft); transition: background .1s, border-color .1s, color .1s; line-height: 1.5; }
.care-chip:hover span { border-color: var(--accent); color: var(--ink); }
.care-chip input:checked + span { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; font-weight: 600; }
.care-chip:has(input:disabled) { cursor: not-allowed; }
.care-chip:has(input:disabled) span { opacity: .45; }
.pd-care-other-input { font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); width: 100%; margin-top: 4px; }
.pd-care-other-input:focus { border-color: var(--accent); outline: none; }

/* Print barcode label modal */
#print-modal .modal { max-width: 480px; }
.print-modal-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.print-modal-row { display: flex; flex-wrap: wrap; gap: 12px; }
.print-modal-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.print-modal-row label input, .print-modal-row label select { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); }
.print-modal-row label input:focus, .print-modal-row label select:focus { border-color: var(--accent); outline: none; }
.print-modal-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
#print-sizes-wrap { display: flex; flex-direction: column; }

/* ===== Barcode Master ===== */
.bcm-note { margin-bottom: 16px; padding: 14px 18px; font-size: 13px; line-height: 1.6; }
.bcm-structure { margin-bottom: 16px; padding: 16px 18px; }
.bcm-structure h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 15px; }
.bcm-struct-row { display: flex; gap: 4px; align-items: stretch; }
.bcm-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; background: var(--surface-2, #f1eee9); border: 1px solid var(--line); border-radius: var(--r-sm); text-align: center; }
.bcm-seg-name { font-size: 12px; font-weight: 700; color: var(--ink); }
.bcm-seg-w { font-size: 10px; color: var(--muted); }
.bcm-struct-eg { margin-top: 10px; font-size: 12px; }
.bcm-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bcm-card { padding: 16px 18px; }
.bcm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bcm-card-head h3 { margin: 0; font-family: var(--serif); font-size: 16px; }
.bcm-cat-row { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.bcm-cat-select { flex: 1; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 13px; }
.bcm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bcm-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.bcm-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft, #f0ece6); }
.bcm-table tbody tr:last-child td { border-bottom: none; }
.bcm-code { font-family: var(--mono, monospace); font-weight: 700; color: var(--accent-deep, #c2557f); white-space: nowrap; }
.bcm-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bcm-add input { flex: 1; min-width: 90px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 13px; }
.bcm-add .bcm-code-in { flex: 0 0 80px; min-width: 70px; }
.bcm-next { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bcm-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.bcm-rule h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 15px; }
.bcm-rule p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

/* Activity Log */
.log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.log-filters select { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font-size: 13px; }
.log-filters .search { margin: 0; max-width: 260px; }
.log-count { margin-left: auto; font-size: 12px; }
.log-card { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.log-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.log-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft, #f0ece6); vertical-align: top; }
.log-table tbody tr:last-child td { border-bottom: none; }
.log-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.log-badge.log-create { background: #e5f3ea; color: #2f7a4d; }
.log-badge.log-update { background: #fdf1dc; color: #b3721c; }
.log-badge.log-delete { background: #fbe7e7; color: #b33a3a; }

/* Barcode Master — drill-down viewers */
.bcm-drill { grid-column: 1 / -1; }
.bcm-drill-hint { margin: 0 0 12px; font-size: 12px; }
.bcm-drill-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.bcm-drill-controls label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0; flex: 1; min-width: 180px; }
.bcm-drill-controls select { margin-top: 0; padding: 8px 10px; font-size: 13px; background: var(--bg); }
.bcm-next-line { margin-top: 10px; font-size: 12px; }
/* A code/sub-code collision is a data fault the user has to see, not a styling accident —
   tint the row and name the problem rather than quietly rendering one of the two records. */
.bcm-table tr.bcm-clash td { background: #fdf3f1; }
.bcm-warn { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--danger); white-space: nowrap; }
.bcm-warn-line { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  background: #fdf3f1; color: var(--danger); border: 1px solid rgba(190,74,60,.25); }
.bcm-scope-display { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex: 1; min-width: 180px; }
.bcm-scope-display strong { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--ink); padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-sm); }
.bcm-dup-group { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.bcm-dup-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.bcm-dup-name { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--accent-deep, #c2557f); }
.bcm-dup-lead { font-size: 13px; margin: 0 0 12px; }
.bcm-dup-actions { margin-top: 10px; }
.bcm-dup-bulk { margin: 0 0 18px; }
.bcm-table tr.bcm-dup-keep td { background: #f2faf5; }
.bcm-table tr.bcm-dup-drop td { background: #fdf3f1; }
.bcm-dup-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.bcm-dup-keep .bcm-dup-tag { color: #2c7a58; }
.bcm-dup-drop .bcm-dup-tag { color: #c0392b; }

/* Receiving — receipt history + new-receipt form */
#recv-history { margin: 4px 0 18px; }
.recv-hist-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.recv-hist-empty { font-size: 13px; margin: 4px 0 16px; }
.recv-receipt { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; background: var(--surface); }
.recv-receipt summary { cursor: pointer; padding: 10px 14px; font-size: 13px; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recv-receipt summary::-webkit-details-marker { display: none; }
.recv-receipt summary::before { content: "▸"; color: var(--muted); }
.recv-receipt[open] summary::before { content: "▾"; }
.recv-receipt-table { margin: 0 14px 12px; width: calc(100% - 28px); }
.recv-form-title { font-family: var(--serif); font-size: 16px; margin: 6px 0 12px; }
.recv-receipt-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 12px; }
.recv-receipt-meta label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 0; min-width: 180px; }
.recv-receipt-meta label input { margin-top: 0; padding: 8px 10px; font-size: 13px; }
.recv-form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: flex-end; }
#recv-form-wrap.hidden { display: none; }

/* Product detail — add size control */
.pd-size-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pd-size-add { display: flex; gap: 8px; align-items: center; }
.pd-size-add select { width: auto; min-width: 150px; margin: 0; padding: 7px 10px; font-size: 13px; }

/* Collection tab — product-level search results */
.card-grid.as-results { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.prod-result .meta strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.prod-result .meta .sub { margin-top: 5px; }
.prod-result-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Collection launch date (detail header) */
.cd-launch-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.cd-launch-label { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cd-launch-input { width: auto; margin: 0; padding: 6px 10px; font-size: 13px; }
.cd-launch-input:disabled { opacity: .6; }
.cd-launch-status { font-size: 12px; }

/* Product search result — detail lines (Colours / Sizes) */
.prod-result-detail { margin-top: 4px; }
.prod-result .pr-lbl { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 6px; }

/* Product Details — Fabric & Hardware detail box */
.pd-fabric-detail-lbl { margin-top: 10px; }
.pd-fabric-detail-lbl textarea { width: 100%; margin-top: 5px; padding: 8px 10px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); resize: vertical; line-height: 1.5; }

/* Add Product — colour chip search */
.chip-search { width: 100%; max-width: 320px; margin: 0 0 10px; padding: 8px 11px; font-size: 13px; }

/* ===== Stock Value ===== */
.sv-coll-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sv-coll { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s; }
.sv-coll img, .sv-coll-ph { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--line-strong); }
.sv-coll:hover { border-color: var(--accent); color: var(--ink); }
.sv-coll.on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.sv-card { padding: 20px 22px; }
.sv-card h2 { margin: 0 0 16px; font-family: var(--serif); font-size: 20px; display: flex; align-items: center; gap: 10px; }
.sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sv-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.sv-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sv-stat-num { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); }
.sv-stat.sv-even .sv-stat-num { color: #1f7a45; }
.sv-stat.sv-gap { background: #fdeede; border-color: #f2d3ae; }
.sv-stat.sv-gap .sv-stat-num { color: #9a5a13; }
.sv-table { width: 100%; }
.sv-table tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); background: var(--surface-2); }
.sv-note { font-size: 12px; margin: 12px 0 0; }

/* Collection header — grouped date fields styled like the Product Details card */
.cd-dates { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px 44px; margin: 14px 0 4px; align-items: flex-start; }
.cd-launch-status { flex-basis: 100%; }
.cd-hero-main { min-width: 0; }
.cd-name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cd-name-row h1 { margin: 0; }
.cd-name-row .badge { margin-top: 0; transform: translateY(-3px); }
.cd-name-input { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: 34px; margin: 0; padding: 0 4px; width: auto; min-width: 200px; }
#cd-name-edit-btn { align-self: center; }
#cd-name-edit-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.cd-release { font-size: 13px; }
.collection-hero { align-items: flex-start; }
.collection-head .head-actions { max-width: 420px; justify-content: flex-end; }
.cd-dates-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 7px; }
.cd-dates-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.cd-dates-fields label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.cd-dates-fields label input, .cd-dates-fields label select { margin: 0; width: auto; min-width: 175px; padding: 8px 11px; font-size: 13px; font-weight: 400; background: var(--surface-2); border-color: transparent; border-radius: var(--r-sm); }
.cd-dates-fields label input:focus, .cd-dates-fields label select:focus { background: var(--surface); border-color: var(--accent-deep); }
.cd-platform-other { width: auto; min-width: 175px; margin: 0; padding: 8px 11px; font-size: 13px; align-self: flex-end; }
.cd-dates-fields input:disabled, .cd-dates-fields select:disabled { opacity: .6; }

/* Size measurement — admin delete-size button */
.msr-del-cell { text-align: center; width: 34px; }
.msr-del { border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.msr-del:hover { background: #fdecec; color: #a23232; }

/* Stock Value — clickable PO number */
.sv-po-link { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sv-po-link:hover { color: var(--ink); }

/* ===== Sales Projections (admin) ===== */
.pj-editor { padding: 22px 24px; margin-top: 18px; }
.pj-top { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pj-top label, .pj-fields label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pj-top label input, .pj-top label select, .pj-fields label input { margin: 0; padding: 8px 11px; font-size: 13px; font-weight: 400; background: var(--surface-2); border-color: transparent; }
.pj-top label input:focus, .pj-top label select:focus, .pj-fields label input:focus { background: var(--surface); border-color: var(--accent-deep); }
.pj-top .pj-wide, .pj-fields .pj-wide { grid-column: span 2; }
.pj-top .pj-wide input { min-width: 260px; }
.pj-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; margin-bottom: 6px; }
.pj-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.pj-table th, .pj-table td { white-space: nowrap; }
.pj-table input, .pj-table select { margin: 0; padding: 6px 8px; font-size: 12.5px; }
.pj-table .pj-name-in { min-width: 160px; }
.pj-table select { max-width: 190px; }
.pj-table .pj-num { width: 84px; text-align: right; }
.pj-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pj-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pj-status { margin-top: 10px; font-size: 12.5px; min-height: 1.2em; }

/* Payment Voucher — reuses the projection editor's field styling */
.vc-editor { padding: 22px 24px; margin-top: 18px; }
.vc-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.vc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; margin-bottom: 6px; }
.vc-fields label { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* width:100%+min-width:0 stop a <select>'s long option text from forcing its grid
   track (and the whole row) wider than the viewport — that's what caused fields to
   look cut off / overlapping at the edge. margin-top:auto on the control (and on
   .vc-po-chips below) pins every field's input/select/chip-box to the BOTTOM of its
   label — since a grid row stretches every label to the row's tallest item, a field
   with a one-line hint (e.g. Voucher date) would otherwise pack its input higher up
   than a field with a two-line hint (e.g. Supplier), leaving inputs misaligned. */
.vc-fields label input, .vc-fields label select { width: 100%; min-width: 0; box-sizing: border-box; margin: auto 0 0; padding: 8px 11px; font-size: 13px; font-weight: 400; background: var(--surface-2); border-color: transparent; text-overflow: ellipsis; }
.vc-fields label input:focus, .vc-fields label select:focus { background: var(--surface); border-color: var(--accent-deep); }
.vc-fields label input:disabled { opacity: .6; cursor: not-allowed; }
.vc-fields .vc-wide { grid-column: span 2; min-width: 0; }
.vc-po-chips { min-height: 38px; margin-top: auto; }
.vc-po-hint { padding: 8px 2px; }
.vc-po-block { margin-bottom: 18px; }
.vc-po-block:last-child { margin-bottom: 0; }
.vc-po-block-head { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.vc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vc-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 5px 8px; border-bottom: 1px solid var(--line); }
.vc-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft, #f0ece6); vertical-align: middle; }
.vc-table td.num, .vc-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vc-po-table tfoot td { font-weight: 700; border-top: 1px solid var(--line); border-bottom: none; padding-top: 7px; }
.vc-payee-row { display: flex; gap: 8px; align-items: center; }
.vc-payee-row select { flex: 1; min-width: 0; }
.vc-payee-row .btn { flex: none; padding: 8px 12px; }
.vc-chip-locked { cursor: default; opacity: .85; }
.vc-evidence { margin: 4px 0 6px; }
.vc-evi-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vc-evi-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 10px; background: var(--surface-2); border-radius: var(--r-sm); }
.vc-evi-list li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-evi-empty { margin: 0 0 8px; }
.vc-evi-upload-btn { display: inline-block; cursor: pointer; }
.recv-receipt-evidence { margin: 10px 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft, #f0ece6); }
.recv-evi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.recv-cancel-receipt { margin-top: 8px; }
.recv-cancel-reason { font-size: 12.5px; margin: 4px 0 8px; }
.vc-totals { margin: 16px 0 4px; max-width: 420px; box-sizing: border-box; }
.vc-tot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 13px; }
.vc-tot-row span { flex: none; }
.vc-tot-row strong { font-variant-numeric: tabular-nums; text-align: right; word-break: break-word; }
.vc-rate { width: 56px; margin: 0 2px; padding: 3px 6px; font-size: 12px; text-align: right; }
.vc-tot-net { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; font-size: 15px; }
.vc-tot-net strong { color: var(--accent-deep, #c2557f); }
.vc-tot-words { text-align: right; font-size: 12px; margin-top: 4px; }
.vc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Size remap selector + edit-product modal */
.msr-remap { width: auto; min-width: 60px; margin: 0; padding: 4px 6px; font-size: 11.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.msr-remap:hover { color: var(--accent-deep); border-color: var(--accent); }
.ep-patterns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 18px; }
.ep-pattern-block label { margin-bottom: 8px; }
.ep-barcodes { max-height: 130px; overflow-y: auto; margin: 0 0 16px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-sm); }
.ep-bc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; }
.ep-bc-cw { color: var(--muted); }
.ep-bc-row code { font-size: 11.5px; color: var(--ink); }

/* ---- Toast notifications (non-blocking success confirmations) ---- */
.toast-root { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; max-width: min(360px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--ink); color: #fff; padding: 12px 14px 12px 16px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in .18s ease; max-height: 50vh; overflow-y: auto; }
.toast-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; min-width: 0; }
.toast-msg { white-space: pre-line; }
.toast-close { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 12px; padding: 2px 4px; flex-shrink: 0; }
.toast-close:hover { color: #fff; }
.toast-detail { margin-top: 4px; font-size: 12px; opacity: .85; }
.toast-detail summary { cursor: pointer; }
.toast-action { margin-top: 6px; background: rgba(255,255,255,.16); border: none; color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.toast-action:hover { background: rgba(255,255,255,.26); }
.toast.success { background: #2f7d52; }
.toast.error { background: #b23a3a; }
.toast.warn { background: #a9762c; }
.toast.info { background: #3567b0; }
.toast.leaving { animation: toast-out .16s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (max-width: 640px) { .toast-root { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* ---- States (Phase 5) — empty / error / loading collapsed to one visual family. The bug
   this fixes: a failed query and a genuinely-empty result used to render identically (both
   plain centered text), so a user had no way to tell "nothing here" from "the app is
   broken" — and only one of those has anything to retry. `.state` IS `.empty-state`
   (renderState() in app.js targets both classes so existing empty-state markup keeps
   working); `.state-error` adds the danger icon colour + Retry action. `.state-inline` is
   the compact variant for a zero/failed-row message inside a table (keeps `.sx-empty`
   working the same way). */
.empty-state, .state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; color: var(--muted); }
.empty-state-icon, .state-icon { font-size: 32px; opacity: .5; }
.empty-state-icon .ic, .state-icon .ic { width: 32px; height: 32px; }
.empty-state-title, .state-title { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.empty-state-hint, .state-hint { font-size: 13.5px; max-width: 380px; line-height: 1.6; }
.empty-state .btn, .state .btn { margin-top: 4px; }
.state-error .state-icon { color: var(--danger); opacity: 1; }
.state-error .state-title { color: var(--danger); }
.state-detail { max-width: 480px; font-size: 12px; color: var(--muted); }
.state-detail summary { cursor: pointer; font-weight: 600; }
.state-detail pre { white-space: pre-wrap; word-break: break-word; text-align: left; margin: 6px 0 0; font-family: "SF Mono", ui-monospace, monospace; }
.state-inline, .sx-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.state-inline.state-error, .sx-empty.state-error { color: var(--danger); }
.state-inline .btn-sm, .sx-empty .btn-sm { margin-left: 8px; }

/* ---- Loading skeletons (shimmering placeholder blocks while a tab's data loads) ---- */
.skel-row { height: 15px; border-radius: 5px; margin: 8px 0; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; }
.skel-card { height: 96px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; }
.skel-table td { padding: 10px 12px; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel-row, .skel-card, .toast { animation: none; } }

/* =====================================================================
   SALE ANALYSIS v2 — rebuilt module. .sx-root is a pure ALIAS layer onto the
   platform tokens (legacy compatibility shim — new CSS should use platform
   tokens directly, this never grows). Dark mode was removed: it only ever
   covered these two modules, leaving the rest of the app light, so a device
   set to dark got a dark Projects tab inside a white sidebar/shell. An unused
   `html[data-theme="dark"]` hook is left on :root above if it's ever wanted
   platform-wide. */
.sx-root {
  --sx-bg: var(--bg); --sx-surface: var(--surface); --sx-surface-2: var(--surface-2);
  --sx-ink: var(--ink); --sx-ink-soft: var(--ink-soft); --sx-muted: var(--muted);
  --sx-line: var(--line); --sx-line-strong: var(--line-strong);
  --sx-accent: var(--accent-deep); --sx-accent-soft: var(--accent-soft);
  --sx-good: var(--ok); --sx-warn: var(--warn); --sx-bad: var(--danger);
}
.sx-root { color: var(--sx-ink); }
.sx-root .muted { color: var(--sx-muted); }

/* Sticky filter bar */
.sx-filterbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px;
  background: var(--sx-bg); padding: 10px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--sx-line); }
.sx-filterbar select, .sx-filterbar input { background: var(--sx-surface); color: var(--sx-ink); border: 1px solid var(--sx-line-strong); }

/* Sub-tabs */
.sx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.sx-tab { border: 1.5px solid var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-ink-soft);
  border-radius: 999px; padding: 7px 16px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .14s; }
.sx-tab:hover { border-color: var(--sx-accent); color: var(--sx-ink); }
.sx-tab.on { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-panel { animation: sx-fade .15s ease; }
@keyframes sx-fade { from { opacity: 0; } to { opacity: 1; } }

/* KPI cards */
.sx-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.sx-kpi { background: var(--sx-surface); border: 1px solid var(--sx-line); border-radius: var(--r-sm); padding: 14px 16px; }
.sx-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-muted); margin-bottom: 6px; }
.sx-kpi-value { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--sx-ink); line-height: 1.15; }
.sx-kpi-delta { font-size: 12px; margin-top: 4px; font-weight: 600; }
.sx-kpi-delta.up { color: var(--sx-good); } .sx-kpi-delta.down { color: var(--sx-bad); } .sx-kpi-delta.flat { color: var(--sx-muted); }
.sx-kpi-note { font-size: 11px; color: var(--sx-muted); margin-top: 4px; }

/* Generic cards / sections */
.sx-card { background: var(--sx-surface); border: 1px solid var(--sx-line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; }
.sx-card-title { font-family: var(--serif); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.sx-card-sub { font-size: 12.5px; color: var(--sx-muted); margin: 0 0 14px; }
.sx-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.sx-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .sx-grid-2, .sx-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Chart canvas containers */
.sx-chart-wrap { position: relative; height: 280px; }
.sx-chart-wrap.short { height: 200px; }

/* Tables */
.sx-table-wrap { overflow-x: auto; }
.sx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sx-table th { text-align: left; color: var(--sx-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 12px; border-bottom: 1px solid var(--sx-line); white-space: nowrap; position: sticky; top: 0; background: var(--sx-surface); }
.sx-table td { padding: 7px 12px; border-bottom: 1px solid var(--sx-line); vertical-align: middle; }
.sx-table tbody tr { cursor: pointer; }
.sx-table tbody tr:hover { background: var(--sx-surface-2); }
.sx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sx-table tfoot td { font-weight: 700; border-top: 2px solid var(--sx-line-strong); border-bottom: none; }

/* Colourway photo + label. One photo represents a whole ลาย (all its sizes share it), so the
   thumbnail sits on the colourway row rather than being repeated per size. */
.sx-thumb-cell { width: 52px; padding-right: 0 !important; }
.sx-thumb { width: 44px; height: 56px; border-radius: 6px; object-fit: cover; display: block;
  background: var(--sx-surface-2); border: 1px solid var(--sx-line); }
.sx-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--sx-muted); font-size: 15px; }
.sx-cw-sub { font-size: 11.5px; color: var(--sx-muted); margin-top: 2px; }

/* Top movers — the Overview's visual "what's selling" strip. */
.sx-mover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.sx-mover-card { cursor: pointer; border: 1px solid var(--sx-line); border-radius: 10px; padding: 8px;
  background: var(--sx-surface); transition: border-color .14s, transform .14s; }
.sx-mover-card:hover { border-color: var(--sx-accent); transform: translateY(-2px); }
.sx-mover-card .sx-thumb { width: 100%; height: 148px; margin-bottom: 8px; }
.sx-mover-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sx-mover-sub { font-size: 11px; color: var(--sx-muted); margin-top: 1px; }
.sx-mover-stat { font-size: 11.5px; color: var(--sx-accent); font-weight: 600; margin-top: 4px; }

/* Lifecycle / status badges */
.sx-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.sx-badge.new { background: #e3edfb; color: #3567b0; }
.sx-badge.hero { background: var(--sx-accent-soft); color: var(--sx-accent); }
.sx-badge.fast { background: #e6f4ec; color: var(--sx-good); }
.sx-badge.normal { background: var(--sx-surface-2); color: var(--sx-ink-soft); }
.sx-badge.slow { background: #fbeee0; color: var(--sx-warn); }
.sx-badge.clearance { background: #f9e4e1; color: var(--sx-bad); }
.sx-badge.disc { background: var(--sx-surface-2); color: var(--sx-muted); }

/* Drill-down breadcrumb */
.sx-drill-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 12px; color: var(--sx-muted); }
.sx-drill-crumb button { background: none; border: none; color: var(--sx-accent); font-weight: 600; cursor: pointer; padding: 0; font: inherit; }

.sx-empty { padding: 40px 20px; text-align: center; color: var(--sx-muted); }

/* =====================================================================
   PROJECT MANAGEMENT — reuses .sx-* primitives (kpi cards, tabs, panels,
   tables, badges, charts) for visual consistency; .pj-* covers what's
   unique to this module: the project list, type picker, and task board. */
.pj-root { --sx-bg: var(--bg); --sx-surface: var(--surface); --sx-surface-2: var(--surface-2);
  --sx-ink: var(--ink); --sx-ink-soft: var(--ink-soft); --sx-muted: var(--muted);
  --sx-line: var(--line); --sx-line-strong: var(--line-strong);
  --sx-accent: var(--accent-deep); --sx-accent-soft: var(--accent-soft);
  --sx-good: var(--ok); --sx-warn: var(--warn); --sx-bad: var(--danger); color: var(--sx-ink); }
.pj-root .muted { color: var(--sx-muted); }
.pj-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.pj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pj-card { background: var(--sx-surface); border: 1px solid var(--sx-line); border-radius: var(--r); padding: 16px 18px; cursor: pointer; transition: border-color .14s, transform .1s; }
.pj-card:hover { border-color: var(--sx-accent); transform: translateY(-1px); }
.pj-card-type { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-accent); font-weight: 700; margin-bottom: 6px; }
.pj-card-name { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.pj-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--sx-muted); }
.pj-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 700px) { .pj-type-grid { grid-template-columns: 1fr; } }
.pj-type-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border: 1.5px solid var(--sx-line-strong); border-radius: var(--r-sm); background: var(--sx-surface); cursor: pointer; font: inherit; }
.pj-type-card:hover { border-color: var(--sx-accent); }
.pj-type-card.on { border-color: var(--sx-accent); background: var(--sx-accent-soft); }
.pj-type-card strong { font-family: var(--serif); font-size: 15px; }
.pj-type-card .muted { font-size: 12px; line-height: 1.4; }
/* Hotfix (Phase 0 of the platform UX plan; full .dt table system lands in Phase 3):
   under table-layout:auto a width:100% text input contributes ~0 to a column's
   intrinsic size while input[type=date] has a non-overridable ~110-140px floor, so
   date columns always win and text columns collapse to their <th> width ("De…").
   table-layout:fixed with an explicit <colgroup> stops the browser consulting cell
   contents at all — columns are exactly what the colgroup says, always. */
.pj-fixed-table { table-layout: fixed; }
.pj-fixed-table th, .pj-fixed-table td { overflow-wrap: break-word; }
.pj-editable-table input, .pj-editable-table select, .pj-editable-table textarea { width: 100%; border: 1px solid transparent; background: transparent; color: var(--sx-ink); padding: 4px 6px; border-radius: 6px; font: inherit; }
/* Working tab's Task Name — a plain <input> clips overflow text with no visual cue at all
   (no ellipsis, just silently cut off, e.g. "Send KOLs Menu to KOLs (for Ch..."); a
   textarea wraps instead, so a long task name is actually readable without opening it. */
.pj-task-name { resize: none; line-height: 1.35; }
.pj-editable-table input:hover, .pj-editable-table select:hover, .pj-editable-table textarea:hover,
.pj-editable-table input:focus, .pj-editable-table select:focus, .pj-editable-table textarea:focus { border-color: var(--sx-line-strong); background: var(--sx-surface-2); }
.pj-editable-table tbody tr:hover { background: transparent; } /* override sx-table's row hover — inputs already show focus */
/* nowrap: the Add sub-task control's label is the two glyphs "＋↳". In a narrow actions
   column they wrapped onto separate lines and read as TWO buttons doing the same thing,
   which is exactly how the user reported it. They are one control. */
.pj-row-del { background: none; border: none; color: var(--sx-muted); cursor: pointer; font-size: 15px; padding: 2px 6px; white-space: nowrap; }
/* Two controls only, and each is ONE glyph: ＋ adds a sub-task, ✕ deletes the row.
   The add button previously read "＋↳" — two characters that looked like two separate
   buttons doing the same job, which is how it kept being reported. */
.pj-row-sub { font-weight: 600; }
.pj-row-sub:hover { color: var(--sx-accent, var(--accent-deep)); }
/* Actions stay on one line beside each other rather than stacking. */
.pj-row-acts { white-space: nowrap; text-align: right; }
/* Done: a real, green, easy-to-hit checkbox — the single "this task is finished" control. */
.pj-done-cell { text-align: center; }
.pj-done { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; }
.pj-done input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--ok); margin: 0; }
/* A finished row recedes, so the eye lands on what is still outstanding. */
tr.pj-task-done > td { background: rgba(74, 143, 107, .07); }
tr.pj-task-done .pj-task-name { color: var(--sx-muted); text-decoration: line-through; text-decoration-color: rgba(74,143,107,.6); }
.pj-row-del:hover { color: var(--sx-bad); }
.pj-status-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pj-status-chip.not_started, .pj-status-chip.pending { background: var(--sx-surface-2); color: var(--sx-muted); }
.pj-status-chip.in_progress { background: #fbeee0; color: var(--sx-warn); }
.pj-status-chip.complete, .pj-status-chip.done { background: #e6f4ec; color: var(--sx-good); }
.pj-section-title { font-family: var(--serif); font-size: 15px; font-weight: 600; margin: 20px 0 10px; }
.pj-section-title:first-child { margin-top: 0; }
.pj-checklist-row td { background: var(--sx-surface-2); }
.pj-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pj-cal-head { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-muted); text-align: center; padding-bottom: 4px; }
.pj-cal-cell { min-height: 64px; border: 1px solid var(--sx-line); border-radius: 6px; padding: 4px; font-size: 11px; }
.pj-cal-cell.empty { border-color: transparent; }
.pj-cal-day { font-weight: 700; font-size: 11px; color: var(--sx-muted); }

/* ---- My Tasks (cross-project) ---------------------------------------------
   Two views share one visual language: the due-date chip and the status colour
   mean the same thing in the Focus list and on the Board. */

/* Lens strip — the four numbers worth knowing before reading any row. Each is a
   toggle filter, so the count and the way to act on it are the same control. */
.mt-lenses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 820px) { .mt-lenses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt-lens { text-align: left; font: inherit; color: var(--sx-ink); cursor: pointer;
  background: var(--sx-surface); border: 1.5px solid var(--sx-line); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color .14s, background .14s; }
.mt-lens:hover { border-color: var(--sx-line-strong); }
.mt-lens.on { border-color: var(--sx-accent); background: var(--sx-accent-soft); }
.mt-lens-num { display: block; font-family: var(--serif); font-size: 28px; line-height: 1; }
.mt-lens-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sx-muted); margin-top: 6px; }
.mt-lens.tone-late .mt-lens-num { color: var(--sx-bad); }
.mt-lens.tone-today .mt-lens-num { color: var(--sx-warn); }
.mt-lens.tone-review .mt-lens-num { color: #3567b0; }
/* An empty count shouldn't shout — zero overdue is good news, not a data point. */
.mt-lens.zero .mt-lens-num { color: var(--sx-muted); opacity: .5; }

/* Focus view — grouped by when, not by status. */
.mt-group { margin-bottom: 22px; }
.mt-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-family: var(--serif); font-size: 15px; font-weight: 600; }
.mt-group-count { font-size: 12px; color: var(--sx-muted); font-weight: 700; }
.mt-group-rule { flex: 1; height: 1px; background: var(--sx-line); }
.mt-group-hint { font-size: 12px; color: var(--sx-muted); margin: -2px 0 8px; }
.mt-group-overdue .mt-group-head { color: var(--sx-bad); }
.mt-rows { display: flex; flex-direction: column; gap: 6px; }
/* Status lives in the left edge: present at a glance, never competing with the task name. */
.mt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--sx-surface); border: 1px solid var(--sx-line); border-left: 3px solid var(--sx-line-strong);
  border-radius: var(--r-sm); padding: 10px 14px; transition: border-color .14s; }
.mt-row:hover { border-color: var(--sx-line-strong); }
.mt-row.st-in_progress { border-left-color: var(--sx-warn); }
.mt-row.st-pending_approval { border-left-color: #3567b0; }
.mt-row.st-complete { border-left-color: var(--sx-good); }
.mt-row-main { flex: 1; min-width: 220px; }
.mt-row-name { font-weight: 600; font-size: 13.5px; color: var(--sx-ink); text-decoration: none; }
.mt-row-name:hover { color: var(--sx-accent); }
.mt-row.st-complete .mt-row-name { color: var(--sx-muted); text-decoration: line-through; text-decoration-color: rgba(74,143,107,.6); }
.mt-row-sub { font-size: 11.5px; color: var(--sx-muted); margin-top: 3px; }
.mt-row-proj { color: var(--sx-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.mt-prio { margin-left: 8px; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; }
.mt-prio.urgent { background: #f9e4e1; color: var(--sx-bad); }
.mt-prio.high { background: #fbeee0; color: var(--sx-warn); }
.mt-row-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-row-acts .btn { padding: 4px 10px; font-size: 11.5px; white-space: nowrap; }

/* Due chip — relative wording ("4 days late") carries the urgency; the exact date is the tooltip. */
.mt-due { font-size: 11.5px; font-weight: 700; white-space: nowrap; padding: 3px 10px; border-radius: 999px; }
.mt-due.late { background: #f9e4e1; color: var(--sx-bad); }
.mt-due.today { background: #fbeee0; color: var(--sx-warn); }
.mt-due.soon { background: var(--sx-surface-2); color: var(--sx-ink-soft); }
.mt-due.later, .mt-due.none { color: var(--sx-muted); padding-left: 0; padding-right: 0; }
.mt-due.done { background: #e6f4ec; color: var(--sx-good); }

/* Finished work: reachable, not resident. */
.mt-done { border-top: 1px solid var(--sx-line); padding-top: 14px; margin-top: 4px; }
.mt-done > summary { cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.mt-done > summary::marker { color: var(--sx-muted); }
.mt-done[open] > summary { margin-bottom: 12px; }

/* Board view — the status kanban, kept for scanning a whole team at a glance. */
.mt-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .mt-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mt-board { grid-template-columns: minmax(0, 1fr); } }
.mt-col-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.mt-col-count { font-size: 12px; color: var(--sx-muted); font-weight: 700; }
.mt-col-body { display: flex; flex-direction: column; gap: 8px; }
.mt-card { background: var(--sx-surface); border: 1px solid var(--sx-line); border-radius: var(--r-sm); padding: 12px 14px; }
.mt-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.mt-card-project { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--sx-accent); font-weight: 700; }
.mt-card-name { display: block; font-weight: 600; font-size: 13.5px; color: var(--sx-ink); text-decoration: none; margin-bottom: 6px; }
.mt-card-name:hover { color: var(--sx-accent); }
.mt-card-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mt-card-acts .btn { padding: 4px 10px; font-size: 11.5px; }

/* ---- Budget Production: payment select tinted by value (the select IS the badge) ---- */
.pj-editable-table select.pj-pay-paid { background: #e6f4ec; color: var(--sx-good); border-color: var(--sx-good); }
.pj-editable-table select.pj-pay-partial { background: #fbeee0; color: var(--sx-warn); border-color: var(--sx-warn); }
.pj-editable-table select.pj-pay-unpaid { background: var(--sx-surface-2); color: var(--sx-ink-soft); }

/* ---- Cross-project Timeline (Gantt) ---- */
.tlv-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.tlv-toolbar select { width: auto; min-width: 120px; max-width: 190px; background: var(--sx-surface); color: var(--sx-ink); border: 1px solid var(--sx-line-strong); border-radius: 8px; padding: 6px 10px; }
.tlv-wrap { overflow: auto; border: 1px solid var(--sx-line); border-radius: 10px; background: var(--sx-surface); max-height: calc(100vh - 250px); position: relative; }
.tlv-grid { display: grid; min-width: max-content; position: relative; }
.tlv-cell-head { font-size: 10px; text-align: center; color: var(--sx-muted); border-left: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); padding: 2px 1px; background: var(--sx-surface); position: sticky; z-index: 3; white-space: nowrap; overflow: hidden; }
.tlv-cell-head.tier1 { top: 0; font-weight: 700; color: var(--sx-ink-soft); cursor: pointer; }
.tlv-cell-head.tier2 { top: 19px; font-weight: 600; cursor: pointer; }
.tlv-cell-head.tier3 { top: 38px; }
.tlv-sticky-col { position: sticky; left: 0; z-index: 4; background: var(--sx-surface); border-right: 2px solid var(--sx-line-strong); border-bottom: 1px solid var(--sx-line); padding: 3px 10px; font-size: 12px; min-width: 210px; max-width: 210px; overflow: hidden; line-height: 1.3; }
.tlv-sticky-col.head { z-index: 5; position: sticky; top: 0; }
.tlv-row-track { position: relative; border-bottom: 1px solid var(--sx-line); background-image: linear-gradient(to right, var(--sx-line) 1px, transparent 1px); }
.tlv-name { font-weight: 600; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tlv-name .tlv-chev { display: inline-block; width: 13px; color: var(--sx-muted); }
.tlv-sub { font-size: 11px; color: var(--sx-muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tlv-indent-1 { padding-left: 24px; }
.tlv-indent-2 { padding-left: 40px; font-weight: 400; }
.tlv-bar { position: absolute; top: 11px; height: 15px; border-radius: 4px; cursor: pointer; min-width: 4px; }
.tlv-bar .tlv-cap { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.tlv-bar.clip-left { clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%); border-radius: 0 4px 4px 0; }
.tlv-bar.clip-right { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); border-radius: 4px 0 0 4px; }
.tlv-bar.fast { background: rgba(74, 143, 107, .3); } .tlv-bar.fast .tlv-cap { background: var(--sx-good); }
.tlv-bar.hero { background: var(--sx-accent-soft); } .tlv-bar.hero .tlv-cap { background: var(--sx-accent); }
.tlv-bar.new { background: rgba(53, 103, 176, .25); } .tlv-bar.new .tlv-cap { background: #3567b0; }
.tlv-bar.clearance { background: rgba(192, 86, 75, .3); } .tlv-bar.clearance .tlv-cap { background: var(--sx-bad); }
.tlv-diamond { position: absolute; top: 13px; width: 11px; height: 11px; background: var(--sx-accent); transform: rotate(45deg); cursor: pointer; border-radius: 2px; }
.tlv-diamond-label { position: absolute; top: 12px; font-size: 10px; color: var(--sx-ink-soft); white-space: nowrap; pointer-events: none; }
.tlv-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sx-bad); opacity: .65; z-index: 2; pointer-events: none; }
.tlv-undated { display: inline-block; background: var(--sx-surface-2); color: var(--sx-muted); border-radius: 999px; padding: 0 8px; font-size: 10px; font-weight: 700; cursor: pointer; }
.tlv-tooltip { position: fixed; z-index: var(--z-tooltip); background: var(--sx-ink); color: var(--sx-bg); border-radius: 8px; padding: 8px 12px; font-size: 12px; max-width: 280px; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.tlv-tooltip .muted2 { opacity: .7; font-size: 11px; }
.tlv-empty-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6; pointer-events: none; }
.tlv-empty-overlay > div { pointer-events: auto; background: var(--sx-surface); border: 1px solid var(--sx-line-strong); border-radius: 12px; padding: 20px 28px; max-width: 420px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.12); }


/* ---- KOL Seeding product picker ---------------------------------------------------- */
.modal-wide { max-width: 900px; width: 92vw; }
.pp-body { max-height: 58vh; overflow: auto; padding-right: 4px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
/* The tile is the control: a big tap target with the photo doing the identifying, since
   picking a garment by name alone is exactly what this feature exists to avoid. */
.pp-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  text-align: left; font-family: var(--sans); transition: border-color .12s, box-shadow .12s; }
/* The photo/name area is the toggle; sizes sit below so picking a size never un-picks
   the garment by accident. */
.pp-tile-main { display: flex; flex-direction: column; gap: 6px; padding: 0; cursor: pointer;
  background: none; border: none; text-align: left; font-family: var(--sans); }
/* Sizes come from the Product Master, so only sizes that exist can be chosen. */
.pp-sizes { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); align-items: center; }
.pp-size { font-family: var(--sans); font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 3px 8px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line-strong); color: var(--ink-soft); }
.pp-size:hover { border-color: var(--accent); color: var(--accent-deep); }
.pp-size.on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.pp-tile:hover { border-color: var(--accent); }
.pp-tile.on { border-color: var(--accent-deep); box-shadow: var(--focus-ring); background: var(--accent-soft); }
.pp-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; color: var(--muted); font-size: 22px; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.pp-price { font-size: 12px; color: var(--ink-soft); }
/* Selected tiles carry a tick so the state survives a colour-blind reading of the border. */
.pp-tile.on .pp-label::after { content: " ✓"; color: var(--accent-deep); }
.pj-pick-btn { white-space: nowrap; }

/* Import preview — rows rejected by a validation rule (canonical product mapping, or a
   sub-code already owned by a different ลาย). Listed individually so the source sheet can be
   corrected; the valid rows still import. */
.imp-rejects { border: 1px solid var(--danger, #c0564b); border-radius: var(--r-sm, 8px);
  background: color-mix(in srgb, var(--danger, #c0564b) 7%, transparent);
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.imp-rejects ul { margin: 6px 0 0; padding-left: 18px; }
.imp-rejects li { margin: 3px 0; line-height: 1.45; }

/* Move-colourway modal — read-only list of the barcodes that will travel, so the person can see
   exactly what moves (and that the numbers are unchanged) before confirming. */
.mcw-barcodes { border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 8px 10px;
  max-height: 210px; overflow-y: auto; }
.mcw-bc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 3px 0; font-size: 12.5px; }
.mcw-bc-row span { color: var(--muted); }
.mcw-bc-row code { font-weight: 600; letter-spacing: .02em; }

/* ===================== Merchandiser Tracking ===========================
   22 spreadsheet columns cannot fit a screen as a table, and forcing them
   to made the page scroll sideways -- so the row carries only what you scan
   for (who, which factory, how far along, what is outstanding) and the full
   date set lives in a panel you open per product. Nothing scrolls
   horizontally at any width. */
/* Every control shares one height so the label-less Clear button lines up with the
   inputs instead of sitting a few pixels low -- flex-end alone cannot do it, because
   the button's box and the inputs' boxes were different heights. */
.trk-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 12px 14px; margin-bottom: 12px; --trk-ctl-h: 32px; }
/* margin-bottom:0 is load-bearing. The global :where(label) rule gives every label
   14px of bottom margin, and align-items:end aligns MARGIN boxes -- so the labels' inputs
   sat 14px above the alignment line while the margin-less Clear button sat on it, which is
   what made the button look dropped. :where() has zero specificity, so this rule wins the
   properties it names but inherits the ones it does not. */
.trk-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
  color: var(--muted); margin-bottom: 0; }
.trk-filters select, .trk-filters input, .trk-filters .btn {
  height: var(--trk-ctl-h); box-sizing: border-box; font-size: 12.5px; padding: 0 10px;
  line-height: calc(var(--trk-ctl-h) - 2px); }
.trk-filters select, .trk-filters input { min-width: 140px; max-width: 200px; }
.trk-filters .btn { align-self: end; padding: 0 14px; }

.trk-warn { background: #fdf3d6; border: 1px solid #e6cf8a; color: #6b4e0e; border-radius: var(--r-sm, 8px);
  padding: 10px 14px; font-size: 12.5px; margin-bottom: 12px; }
.trk-warn code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; }

.trk-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.trk-stat { background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  padding: 8px 14px; display: flex; flex-direction: column; min-width: 92px; }
.trk-stat strong { font-size: 19px; line-height: 1.15; }
.trk-stat span { font-size: 11px; color: var(--muted); }
.trk-stat-ok strong { color: #2e7d32; }

.trk-list { display: flex; flex-direction: column; gap: 8px; }
.trk-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r-sm, 10px);
  overflow: hidden; transition: border-color .12s ease; }
.trk-card:hover { border-color: color-mix(in srgb, var(--muted) 35%, transparent); }
.trk-card-open { border-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.trk-card-done { border-left: 3px solid #4c9a52; }

/* Grid, not a table: it reflows instead of overflowing. */
.trk-head { display: grid; gap: 12px; align-items: center; padding: 10px 14px;
  grid-template-columns: minmax(210px, 1.6fr) minmax(150px, 1fr) minmax(180px, 1.3fr) auto; }
.trk-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trk-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; flex: none; }
.trk-thumb-empty { display: grid; place-items: center; background: rgba(0,0,0,.04);
  color: color-mix(in srgb, var(--muted) 45%, transparent); font-size: 13px; }
.trk-names { min-width: 0; }
.trk-prod { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-code { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 12px; }
.trk-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trk-statwrap { min-width: 0; }
.trk-status { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; background: #ececf0; color: #3a3a44; }
.trk-s0 { background: transparent; color: color-mix(in srgb, var(--muted) 60%, transparent); font-weight: 400; padding-left: 0; }
.trk-s1, .trk-s2, .trk-s3, .trk-s4, .trk-s5    { background: #fdeecf; color: #7a5312; }
.trk-s6, .trk-s7                               { background: #e6e2fb; color: #40358f; }
.trk-s8, .trk-s9, .trk-s10, .trk-s11, .trk-s12 { background: #dbe8fb; color: #1c3f70; }
.trk-s13 { background: #d7f0d9; color: #1f5c25; }
.trk-bar { height: 3px; border-radius: 2px; background: rgba(0,0,0,.07); margin-top: 6px; max-width: 150px; overflow: hidden; }
.trk-bar i { display: block; height: 100%; border-radius: 2px; background: currentColor; opacity: .4; }
.trk-auto { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  background: rgba(0,0,0,.05); border-radius: 3px; padding: 1px 4px; margin-left: 5px; vertical-align: middle; }

.trk-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; align-items: center; min-width: 0; }
.trk-po { font-variant-numeric: tabular-nums; color: var(--muted); }
.trk-next { font-size: 10.5px; color: #7a5312; background: #fdeecf; border-radius: 99px; padding: 1px 7px; }
.trk-none { color: color-mix(in srgb, var(--muted) 45%, transparent); font-style: normal; }
.trk-act { display: flex; gap: 6px; justify-self: end; }

/* Two groups, not three: the only distinction that matters is who owns a field -- the same
   yellow/blue split as the source spreadsheet. Grouping by ownership retires the per-field
   dot, which forced you to decode every row one at a time. */
.trk-detail { border-top: 1px solid var(--line); padding: 14px; background: rgba(0,0,0,.012);
  display: flex; flex-direction: column; gap: 14px; }
.trk-grp { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
.trk-grp-live { background: rgba(111, 154, 214, .05); border-color: rgba(111, 154, 214, .28); }
.trk-grp h4 { margin: 0 0 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.trk-ro { text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 10px;
  color: #40699f; background: rgba(111, 154, 214, .16); border-radius: 99px; padding: 1px 7px; }

/* Label above value, both left-aligned: the old label-left / value-right split stranded a
   dash mid-row and wrapped longer labels. auto-fit wraps instead of overflowing. */
.trk-fields { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.trk-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trk-f span { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.trk-f strong { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trk-f-empty strong { color: color-mix(in srgb, var(--muted) 40%, transparent); font-weight: 400; }

/* PO numbers are a set, not a sentence -- one chip each, wrapping across the full width
   rather than crushed into a third of it. */
.trk-pos { margin-top: 11px; padding-top: 10px; border-top: 1px dashed rgba(111, 154, 214, .3); }
.trk-pos-lbl { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.trk-pos-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.trk-po-chip { font-size: 11.5px; font-variant-numeric: tabular-nums; background: var(--card, #fff);
  border: 1px solid rgba(111, 154, 214, .4); color: #2c5182; border-radius: 5px; padding: 2px 7px; }
.trk-grp-note { background: #fffdf5; border-color: #ecdfae; }
.trk-note { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }

.trk-live { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.trk-live-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.trk-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.trk-live-grid span { display: block; font-size: 10.5px; color: var(--muted); }
.trk-live-grid strong { font-size: 12.5px; }
.trk-live-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 860px) {
  .trk-head { grid-template-columns: 1fr; gap: 8px; }
  .trk-act { justify-self: start; }
  .trk-bar { max-width: none; }
}

/* Pipeline strip — the 13 stages with a live count each, doubling as the main filter.
   Counts are of the whole catalogue (minus collection/merchandiser/MNF/search), not of
   what is currently on screen, so a stage never reads zero merely because you filtered
   it away. Stages with nothing in them are dimmed and unclickable. */
.trk-pipe { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin-bottom: 14px; }
.trk-pipe-div { width: 1px; background: var(--line); margin: 2px 4px; }
.trk-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .12s ease, background .12s ease; }
.trk-chip strong { font-size: 15px; line-height: 1.1; }
.trk-chip span { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.trk-chip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.trk-chip:disabled { opacity: .38; cursor: default; }
.trk-chip-on { border-color: #3a3a44; background: #3a3a44; }
.trk-chip-on strong, .trk-chip-on span { color: #fff; }
.trk-chip-all strong { color: #1c3f70; }
.trk-chip-late { border-color: #e6b4b4; }
.trk-chip-late strong { color: #a33a3a; }
.trk-chip-late.trk-chip-on { background: #a33a3a; border-color: #a33a3a; }
.trk-chip-s13 strong { color: #2e7d32; }
.trk-chip-ns strong { color: color-mix(in srgb, var(--muted) 70%, transparent); }

.trk-card-late { border-left: 3px solid #c96a6a; }
.trk-late { font-size: 10.5px; color: #a33a3a; background: #f7e3e3; border-radius: 99px; padding: 1px 7px; font-weight: 600; }
.trk-toggle-lbl { flex-direction: row !important; align-items: center; gap: 6px !important;
  font-size: 11.5px; color: var(--muted); height: var(--trk-ctl-h); cursor: pointer; }
.trk-toggle-lbl input { width: auto; min-width: 0; height: auto; }

/* The row itself opens its dates, so there is one button (Edit) rather than two. */
.trk-head { cursor: pointer; }
.trk-head:focus-visible { outline: 2px solid #6f9ad6; outline-offset: -2px; border-radius: 8px; }
.trk-caret { color: var(--muted); font-size: 14px; line-height: 1; transition: transform .15s ease;
  display: inline-block; }
.trk-card-open .trk-caret { transform: rotate(180deg); }

/* Note — its own block below the field grid, not a cell inside it. As a grid item it had to
   share a 190px column track, which is why it sat beside its label looking like an
   afterthought. The app's base control rule is `input, select` and never covered textarea,
   so it also needs its box styled explicitly to match the fields above it. */
.trk-note-block { margin-top: 6px; }
.trk-note-block label { display: block; font-weight: 600; font-size: 12px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.trk-note-block textarea {
  display: block; width: 100%; box-sizing: border-box; padding: 11px 13px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.55;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); resize: vertical; min-height: 76px;
}
.trk-note-block textarea::placeholder { color: var(--muted); opacity: .7; font-weight: 400; }
.trk-note-block textarea:focus { border-color: var(--accent); outline: none; }

/* The date a row shows follows its status: a due date while the order is live, the actual
   receive date once it has landed. Green reads as settled, neutral as still owed. */
.trk-date { font-size: 11px; font-variant-numeric: tabular-nums; border-radius: 99px;
  padding: 1px 8px; background: rgba(0,0,0,.05); color: var(--muted); }
.trk-date-got { background: #d7f0d9; color: #1f5c25; font-weight: 600; }

/* A tracking row is one PRODUCT; the Collection page lists one card per COLOURWAY and calls
   them products. Showing the colourway count here reconciles "6 products" there with 2 rows
   here without anyone having to work it out. */
.trk-cw-count { font-size: 10px; font-weight: 500; color: var(--muted); background: rgba(0,0,0,.05);
  border-radius: 99px; padding: 1px 7px; margin-left: 7px; vertical-align: middle; white-space: nowrap; }

/* A tracking row is now one colourway, so the colour is part of its identity, not a detail. */
.trk-colour { color: var(--accent, #b4527a); font-weight: 600; }

/* PO History multi-select — bulk PDF/Excel export of several purchase orders at once. */
.pos-bulk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin: 12px 0; }
.pos-bulk-all { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px;
  font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--ink); cursor: pointer; }
.pos-bulk-all input { width: auto; margin: 0; cursor: pointer; }
#pos-bulk-count { font-size: 12.5px; }
.pos-bulk-act { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.pos-bulk-act .btn:disabled { opacity: .45; cursor: default; }

.po-hist { position: relative; }
/* .po-hist is justify-content:space-between, which was fine with two children (details
   left, buttons right). Adding the checkbox made three, so the free space was shared
   BETWEEN all three and shoved the PO details into the middle of the card. Letting the
   details absorb the free space instead puts them back beside their checkbox, with the
   buttons still pushed to the right edge. */
.po-hist-main { flex: 1; min-width: 0; }
/* Negative margin tightens only the checkbox-to-details gap; the card's 16px gap still
   applies between the details and the action buttons. */
.po-hist-pick { display: flex; align-items: center; margin: 0 -6px 0 0; }
.po-hist-pick input { width: auto; margin: 0; cursor: pointer; }
.po-hist-sel { border-color: var(--accent, #b4527a); background: rgba(180, 82, 122, .04); }

/* Payment Voucher — goods-receipt reconciliation (receipt trail, delivery evidence,
   price variance) so finance can verify a payment against its proof of delivery. */
.vc-variance-note { background: #fdf3d6; border: 1px solid #e6cf8a; color: #6b4e0e;
  border-radius: var(--r-sm, 8px); padding: 9px 13px; font-size: 12.5px; margin-bottom: 10px; }
.vc-checked { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vc-checked-state { font-size: 12.5px; }
.vc-checked-yes { color: #1f5c25; font-weight: 700; }

.vc-recon { margin: 8px 0 4px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  background: rgba(0, 0, 0, .012); }
.vc-recon > summary { cursor: pointer; padding: 8px 12px; display: flex; gap: 10px;
  align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.vc-recon-title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.vc-recon-sum { color: var(--muted); }
.vc-recon-diff { color: #a33a3a; font-weight: 600; }
.vc-recon-warn { margin: 0 12px 8px; font-size: 12px; color: #6b4e0e;
  background: #fdf3d6; border-radius: 6px; padding: 7px 10px; }
.vc-recon-table { margin: 0 12px 12px; width: calc(100% - 24px); font-size: 12px; }
.vc-rc-cancelled td { opacity: .55; }
.vc-evi-chip { display: inline-block; font-size: 11.5px; background: var(--surface, #fff);
  border: 1px solid rgba(111, 154, 214, .45); color: #2c5182; border-radius: 5px;
  padding: 1px 7px; margin: 1px 2px 1px 0; text-decoration: none; }
.vc-evi-chip:hover { border-color: #2c5182; }
.vc-evi-none { font-size: 11.5px; color: #a33a3a; }
.vc-var { white-space: nowrap; }
.vc-var s { color: var(--muted); font-weight: 400; margin-right: 3px; }
.vc-var-row { background: rgba(253, 243, 214, .5); }

/* PO History search — which lines inside a PO matched, so finding the PO also shows where
   in it the product sits. */
.po-hits { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; }
.po-hits-lbl { font-size: 11px; font-weight: 600; color: var(--accent, #b4527a); margin-right: 2px; }
.po-hit { font-size: 11px; background: rgba(180, 82, 122, .07); border: 1px solid rgba(180, 82, 122, .22);
  border-radius: 5px; padding: 1px 7px; color: var(--ink); }
.po-hit strong { font-variant-numeric: tabular-nums; }
.po-hit-more { background: transparent; color: var(--muted); }
#pos-search { max-width: 560px; }

/* ---------- Payment Voucher: type selector, cargo bank details, cargo manager ---------- */
.vc-type-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.vc-type-btns { display: flex; gap: 8px; }
.vc-type-btn { font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); padding: 9px 18px; border-radius: 999px; transition: all .13s; }
.vc-type-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.vc-type-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vc-type-btn:disabled { opacity: .45; cursor: not-allowed; }
.vc-cargo-bank { font-size: 12.5px; line-height: 1.6; padding: 8px 0; }
.cargo-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-height: 260px; overflow-y: auto; }
.cargo-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; }
.cargo-item-main strong { font-size: 13.5px; }
.cargo-item-main .muted { font-size: 12px; }
.cargo-item-act { display: flex; gap: 6px; flex: none; }
#cargo-modal .modal { max-width: 620px; }

/* ---------- Payment Voucher › Paid orders report ---------- */
.vc-tabs { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.vc-tab { font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; border: 0; background: transparent; color: var(--muted); padding: 9px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vc-tab:hover { color: var(--ink); }
.vc-tab.on { color: var(--ink); border-bottom-color: var(--accent-deep); }
.vcp-intro { font-size: 12.5px; margin: 0 0 12px; }
.vcp-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 14px 16px; margin-bottom: 14px; }
.vcp-filters label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.vcp-filters select, .vcp-filters input { min-width: 170px; margin: 0; padding: 8px 11px; font-size: 13px; font-weight: 400; background: var(--surface-2); border-color: transparent; }
.vcp-filters .vcp-search { flex: 1; min-width: 220px; }
.vcp-filters .vcp-search input { width: 100%; box-sizing: border-box; }
.vcp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.vcp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; }
.vcp-card .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.vcp-card .v { font-family: var(--serif); font-size: 21px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.vcp-card .s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.vcp-tbl td.con, .vcp-tbl th.con { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vcp-tbl th { white-space: nowrap; }
.vcp-tbl .vcp-neg { color: #c0392b; font-weight: 600; }
.vcp-tbl tr.vcp-tot td { font-weight: 700; background: var(--surface-2); }
.vcp-tbl tr.vcp-cnt td { font-style: italic; color: var(--muted); }
.vcp-tbl tr.vcp-grp-first td { border-top: 2px solid var(--line-strong); }
.vcp-tbl .vcp-vn { font-size: 11.5px; color: var(--muted); }
.vcp-tbl tr.vcp-st-paid td:first-child { box-shadow: inset 3px 0 0 #6cc08b; }
.vcp-tbl tr.vcp-st-deposit td:first-child { box-shadow: inset 3px 0 0 #e0a84a; }
.vcp-tbl tr.vcp-st-unpaid td:first-child { box-shadow: inset 3px 0 0 #e08a8a; }
.vcp-tbl th, .vcp-tbl td { padding: 6px 7px; font-size: 12px; white-space: nowrap; }
.vcp-tbl td.vcp-prod { white-space: normal; min-width: 250px; font-size: 11.5px; }
.vcp-tbl td code { font-size: 11px; }

/* ---------- Order Status › shipping status by PO ---------- */
.oos-ship-filter { min-width: 190px; }
.oos-ship { margin: 10px 0 4px; }
.oos-ship-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.oos-ship-head .muted { font-size: 12px; }
.oos-ship-list { border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 300px; overflow-y: auto; }
.oos-ship-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft, #f0ece6); }
.oos-ship-row:last-child { border-bottom: 0; }
.oos-ship-po { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.oos-ship-po .muted, .oos-ship-when { font-size: 12px; }
.oos-ship-ctl { display: flex; align-items: center; gap: 10px; }
.oos-ship-ctl select { min-width: 200px; margin: 0; padding: 6px 10px; font-size: 13px; }

/* ---------- PO line thumbnails + PO links ---------- */
.po-thumb { width: 36px; height: 36px; border-radius: 7px; object-fit: cover; vertical-align: middle; margin-right: 9px; cursor: zoom-in; flex: none; }
.po-thumb-empty { display: inline-grid; place-items: center; background: var(--surface-2); color: var(--line-strong); font-size: 14px; cursor: default; }
.po-cellflex { display: flex; align-items: center; gap: 0; min-width: 0; }
a.po-link { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--accent-deep); }
a.po-link:hover { color: var(--accent-deep); border-bottom-style: solid; }
.oos-ship-po a.po-link { font-size: 14px; }
.cargo-incomplete { color: #c0392b; font-size: 12px; font-weight: 600; }
/* Transfer fee = amount + currency on one line. These have to out-rank ".vc-fields label input/select"
   (width:100%; margin:auto 0 0), which is what squeezed the amount to a sliver and blew the
   currency select up to full width. */
.vc-fields label .vc-fee-row { display: flex; gap: 8px; align-items: center; margin: auto 0 0; }
.vc-fields label .vc-fee-row input, .vc-fields label .vc-fee-row select { height: 34px; box-sizing: border-box; } /* same height as the neighbouring fields */
.vc-fields label .vc-fee-row input { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
/* Wide enough for "THB"/"CNY" plus the arrow even where the native arrow is bigger (Safari): the
   text-overflow:ellipsis inherited from the other fields was truncating it to "T…". */
.vc-fields label .vc-fee-row select { flex: 0 0 112px; width: 112px; min-width: 0; margin: 0; padding: 0 34px 0 12px; line-height: 1.2; text-overflow: clip; }
#vc-po-items { overflow-x: auto; } /* the wide PO items table scrolls inside its own box instead of widening the whole page on a phone */
.vc-po-why { flex-basis: 100%; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #fdf1de; border: 1px solid #f3d9a6; color: #7a4a10; font-size: 12.5px; line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; }
.vc-po-why ul { margin: 4px 0 0 16px; padding: 0; }
.vc-po-why li { margin: 2px 0; }

/* ---- Payment Voucher: tabs with counts, editor as its own screen, typed PO entry ---- */
.vc-tab-n { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.vc-tab.on .vc-tab-n { background: var(--accent-soft, #fbe4ef); color: var(--accent-deep); }
.vc-tab-intro { margin: 0 0 12px; font-size: 13px; }
.vc-search { display: block; width: 100%; max-width: 420px; box-sizing: border-box; margin: 0 0 14px; padding: 9px 12px; font-size: 13px; }
.vc-row-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vc-editor-top { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vc-editor-title { font-family: var(--serif); font-size: 18px; font-weight: 600; }
#view-voucher.vc-editing #vc-browse, #view-voucher.vc-editing .head-actions { display: none; }
.vc-fields label .vc-po-entry { display: flex; gap: 8px; align-items: stretch; margin-top: auto; }
.vc-fields label .vc-po-entry input { flex: 1 1 auto; width: auto; margin: 0; text-transform: none; letter-spacing: 0; }
.vc-fields label .vc-po-entry .btn { flex: 0 0 auto; white-space: nowrap; }
.vc-po-msg:empty { display: none; }
.vc-po-msg { margin: 8px 0 0; }
.vc-po-err { padding: 8px 12px; border-radius: 8px; background: #fdecec; border: 1px solid #f1c3c3; color: #8a2020; font-size: 12.5px; line-height: 1.5; }
.vc-po-selected { margin-top: 10px; }
.vc-chip-sel { display: inline-flex; align-items: center; gap: 4px; }
.vc-chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px 0 6px; opacity: .65; }
.vc-chip-x:hover { opacity: 1; }

/* ---- MNF master tab + the MNF block on a voucher ---- */
.mnf-form { margin-bottom: 14px; }
.mnf-tbl td { vertical-align: top; }
.mnf-tbl .mnf-acct { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mnf-tbl .mnf-act { white-space: nowrap; text-align: right; }
.vc-mnf-row { margin: 0 0 8px; line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; }
.vc-mnf-miss { padding: 6px 10px; border-radius: 8px; background: #fdf1de; border: 1px solid #f3d9a6; color: #7a4a10; font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.mnf-form > .vc-section-title:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* ---- Operation Count ---- */
#view-count.vc-editing #cnt-browse, #view-count.vc-editing .head-actions { display: none; }
.cnt-head-actions { margin: 4px 0 6px; }
.cnt-import-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.cnt-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }
.cnt-summary:empty { display: none; }
.cnt-stat { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; min-width: 120px; }
.cnt-stat b { display: block; font-family: var(--serif); font-size: 20px; }
.cnt-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cnt-stat.ok b { color: #2e7d5b; } .cnt-stat.short b { color: #a33a3a; } .cnt-stat.over b { color: #b7791f; }
.cnt-po { margin: 16px 0 8px; }
.cnt-po-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.cnt-table input[type=number] { width: 84px; padding: 6px 8px; font-size: 14px; text-align: right; }
.cnt-table input.cnt-rm { width: 76px; }
.cnt-table input.cnt-note { width: 140px; padding: 6px 8px; }
.cnt-table tr.cnt-flag td { background: #fdf1de; }
.cnt-res { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cnt-res.match { background: #e3f3ea; color: #2e7d5b; } .cnt-res.surplus { background: #fbf0dc; color: #b7791f; } .cnt-res.shortage { background: #fbe6e3; color: #a33a3a; }
.cnt-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cnt-decision select { padding: 6px 8px; }
.cnt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cnt-hist-row { font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line-soft, #f0ece6); }
@media (max-width: 720px) { .cnt-table input[type=number] { width: 70px; } .cnt-table input.cnt-note { width: 100px; } }

.cnt-import-row .btn { height: 36px; display: inline-flex; align-items: center; justify-content: center; margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }

.rma-lines{margin:6px 0 10px;max-height:46vh;overflow:auto}.rma-lines input[data-rma]{width:96px;text-align:right}.rma-all{margin:8px 0;font-size:13px;display:flex;gap:8px;align-items:center}
.recv-adjust-rm{margin-left:8px}

.cnt-sku{font-size:12px;color:#555;min-width:200px;max-width:340px}
.cnt-foot td{font-weight:600;background:#faf5f8;border-top:2px solid #f0d3e2}
.cnt-linetot{white-space:nowrap}
.cnt-packtotal{display:flex;gap:28px;flex-wrap:wrap;align-items:baseline;margin:14px 0 4px;padding:12px 16px;border-radius:12px;background:#fce8f1;color:#7a1d52;font-size:14px}
.cnt-packtotal span:first-child{font-weight:700;margin-right:auto}

.imp-mnfwarn{margin:12px 0;padding:10px 14px;border-radius:10px;background:#fbf0dc;color:#8a5a12;font-size:12.5px;line-height:1.5}.imp-mnfwarn div{margin-top:4px;font-weight:600}

.po-mnf-banner.info{background:#eef4fb;color:#27547a;border-color:#cfe0f1}.mnf-usual{color:#8a8a8f;font-weight:500;font-size:.92em}

#view-count.vc-editing #cnt-browse{display:none}

.app-version{margin-top:8px;font-size:11px;letter-spacing:.04em;color:#8a8a8f}
.login-version{text-align:center;margin-top:14px}
.new-version-banner{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:9999;display:flex;gap:12px;align-items:center;padding:10px 16px;border-radius:12px;background:#2b2b30;color:#fff;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.new-version-banner.hidden{display:none}

.sys-health{margin:0 0 18px;padding:16px 18px}.sys-health .sh-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.sh-row{margin:10px 0}.sh-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.sh-bar{height:9px;border-radius:6px;background:#efe7ec;overflow:hidden}.sh-bar i{display:block;height:100%;border-radius:6px}
.sh-ok{color:#1f7a4d}.sh-warn{color:#b7791f}.sh-bad{color:#b42318}.sh-bar i.sh-ok{background:#5fb98a}.sh-bar i.sh-warn{background:#e0a93c}.sh-bar i.sh-bad{background:#d9534f}
.sh-note{font-size:12px;margin-top:4px}.sh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0 6px;font-size:13px}
.sh-tips{background:#fbf0dc;color:#8a5a12;border-radius:10px;padding:10px 12px;font-size:12.5px;margin-top:10px}

/* ---- Stock Management › Sync to Platform ---- */
.sync-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:4px 0 16px;font-size:12.5px}
.sync-seg{display:inline-flex;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px}
.sync-seg-btn{border:0;background:transparent;font:600 13px/1 var(--sans);color:var(--ink-soft);padding:8px 14px;border-radius:999px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.sync-seg-btn span{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);border-radius:999px;padding:2px 7px}
.sync-seg-btn.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(60,50,55,.12)}
.sync-seg-btn.on span{background:var(--accent-soft);color:var(--accent-deep)}
.sync-row{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(220px,1fr) auto auto;gap:22px;align-items:center;padding:16px 20px;margin-bottom:12px}
.sync-title{font-family:var(--serif);font-size:18px;font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sync-sub{font-size:12.5px;margin-top:4px}
.sync-assign{display:flex;flex-direction:column;gap:5px}
.sync-cap{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sync-select{appearance:none;-webkit-appearance:none;margin:0;width:100%;padding:9px 38px 9px 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d4669e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center;border:1px solid var(--line-strong);cursor:pointer}
.sync-select:hover{border-color:var(--accent)}
.sync-chips{display:flex;gap:8px;flex-wrap:wrap}
.sync-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font:600 13px/1 var(--sans);color:var(--ink-soft);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.sync-chip:hover:not(:disabled){border-color:var(--accent);box-shadow:var(--focus-ring)}
.sync-chip:disabled{cursor:not-allowed;opacity:.55}
.sync-logo{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.sync-logo svg{width:14px;height:14px}
.sc-tiktok .sync-logo{background:#000}
.sc-lazada .sync-logo{background:linear-gradient(135deg,#f0258a 0%,#ff6c00 55%,#0f146d 100%)}
.sc-shopee .sync-logo{background:#ee4d2d}
.sync-tick{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:10px;color:#fff;margin-left:2px}
.sync-chip.on{background:#eef7f1;border-color:#9fd1b4;color:#1f5e41}
.sync-chip.on .sync-tick{background:var(--ok);border-color:var(--ok)}
.sync-view{white-space:nowrap}
.sync-title .recv-badge{font-family:var(--sans)}
@media(max-width:1100px){.sync-row{grid-template-columns:1fr auto;gap:14px 18px}.sync-assign{grid-column:1/-1}.sync-chips{grid-column:1}.sync-view{grid-column:2;justify-self:end}}
@media(max-width:640px){.sync-row{grid-template-columns:1fr}.sync-chips,.sync-view{grid-column:1}.sync-view{justify-self:stretch}}

.sync-prog{cursor:default}
.sync-count{font:700 12px/1 var(--sans);color:var(--ink-soft);margin-left:2px}
.sync-chip.on .sync-count{color:#1f5e41}
.cnt-table .sync-chips{flex-wrap:nowrap;gap:6px}
.cnt-table .sync-name{display:none}.cnt-table .sync-chip{padding:3px 8px 3px 3px}

/* ================= Help & Manual ================= */
.help-link{margin-left:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);font:600 12.5px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s,box-shadow .15s}
.help-link .ic{width:15px;height:15px}
.help-link:hover{border-color:var(--accent);color:var(--accent-deep);box-shadow:var(--focus-ring)}
.help-head{margin-bottom:22px}
.help-bar{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.help-search{position:relative;flex:1;display:flex;align-items:center;max-width:760px;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.help-search:focus-within{border-color:var(--accent);box-shadow:var(--shadow),var(--focus-ring)}
.help-search>.ic{position:absolute;left:18px;width:20px;height:20px;color:var(--accent-deep)}
.help-search input{flex:1;border:0;background:transparent;padding:17px 56px 17px 50px;font:500 16px/1.2 var(--sans);color:var(--ink);outline:none;min-width:0}
.help-search input::-webkit-search-cancel-button{cursor:pointer}
.help-kbd{position:absolute;right:16px;font:600 12px/1 var(--sans);color:var(--muted);border:1px solid var(--line-strong);border-radius:6px;padding:4px 8px;background:var(--surface-2)}
.help-search:focus-within .help-kbd{display:none}
.help-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start}
.help-toc{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.help-toc button,.help-toc a{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;font:500 13px/1.35 var(--sans);color:var(--ink-soft)}
.help-toc button:hover,.help-toc a:hover{background:var(--surface-2);color:var(--ink)}
.help-toc button:focus-visible,.help-toc a:focus-visible{box-shadow:var(--focus-ring)}
.help-toc-home{font-weight:600!important;color:var(--ink)!important;margin-bottom:4px}
.help-toc-home .ic{width:16px;height:16px;color:var(--accent-deep)}
.help-toc-home.on,.help-toc-ch.on>button{background:var(--accent-soft)!important;color:var(--accent-deep)!important;font-weight:600}
.help-toc-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font:700 11px/1 var(--sans);color:var(--ink-soft)}
.help-toc-ch.on .help-toc-n{background:var(--accent);color:#fff}
.help-toc-topics{margin:2px 0 8px 22px;padding-left:10px;border-left:2px solid var(--accent-soft)}
.help-toc-topics a{padding:6px 8px!important;font-size:12.5px!important}
.help-main{min-width:0}
.help-h2{font:600 20px/1.2 var(--serif);margin:30px 0 14px;color:var(--ink)}
.help-h2 .muted{font:400 13px var(--sans)}
.help-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.help-qcard,.help-chcard,.help-result{all:unset;box-sizing:border-box;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .15s,border-color .15s,box-shadow .15s}
.help-qcard:hover,.help-chcard:hover,.help-result:hover{border-color:var(--accent);transform:translateY(-1px)}
.help-qcard:focus-visible,.help-chcard:focus-visible,.help-result:focus-visible{box-shadow:var(--shadow),var(--focus-ring)}
.help-qcard{display:flex;flex-direction:column;gap:6px;padding:18px 20px}
.help-qcard b{font:600 17px/1.2 var(--serif);color:var(--ink)}
.help-qcard>span:last-child{font-size:13px;color:var(--ink-soft);line-height:1.45}
.help-qic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);margin-bottom:6px}
.help-qic .ic{width:19px;height:19px}
.help-chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.help-chgrid.dim .help-chcard{opacity:.7}
.help-chcard{display:flex;align-items:center;gap:14px;padding:14px 16px}
.help-chnum{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent) 0%,var(--mark) 100%);color:#fff;font:600 17px/1 var(--serif)}
.help-chnum.lg{width:56px;height:56px;font-size:24px}
.help-chtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.help-chtxt b{font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.help-chtxt span{font-size:12px;color:var(--muted)}
.help-chhead{padding:24px 26px;margin-bottom:18px}
.help-chhead-top{display:flex;align-items:center;gap:16px}
.help-chhead-top>div{flex:1;min-width:0}
.help-chhead h2{font:600 28px/1.15 var(--serif);margin:2px 0 0}
.help-eyebrow{font:600 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.help-intro{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:18px;margin:20px 0 4px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.help-cap{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.help-learn ul{margin:0;padding-left:18px}
.help-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.help-jump a{padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);font:500 12.5px/1.2 var(--sans);text-decoration:none}
.help-jump a:hover{background:var(--accent-soft);color:var(--accent-deep)}
.help-topic{padding:22px 26px;margin-bottom:16px;scroll-margin-top:72px;transition:box-shadow .4s,border-color .4s}
.help-topic.flash{border-color:var(--accent);box-shadow:var(--shadow),0 0 0 4px rgba(246,181,211,.45)}
.help-topic h3{font:600 20px/1.3 var(--serif);margin:0 0 16px;color:var(--ink)}
.help-new{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font:700 11px/1.2 var(--sans)}
.help-topic>*+*{margin-top:14px}
.help-pair{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start}
.help-pair .help-steps{margin:0}
.help-fig{margin:0}
.help-zoom{all:unset;cursor:zoom-in;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 1px 2px rgba(60,50,55,.06)}
.help-zoom:focus-visible{box-shadow:var(--focus-ring)}
.help-zoom img{display:block;width:100%;height:auto;background:var(--surface-2)}
.help-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.help-steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink)}
.help-num{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:#e0483e;color:#fff;font:700 12px/1 var(--sans);box-shadow:0 1px 3px rgba(224,72,62,.35)}
.help-steps b{color:var(--ink)}
.help-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.help-card{padding:13px 15px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.45}
.help-card b{font-weight:600;color:var(--ink)}
.help-card span{color:var(--ink-soft)}
.help-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.help-table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.45}
.help-table th{text-align:left;background:var(--surface-2);font:600 11.5px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);padding:10px 14px}
.help-table td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink)}
.help-table td:first-child{font-weight:600}
.help-tip{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-radius:12px;background:#fff8ec;border:1px solid #f3dfb8;color:#6e5021;font-size:13.5px;line-height:1.5}
.help-tip .ic{flex:none;width:17px;height:17px;margin-top:1px;color:var(--warn)}
.help-p{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
.help-barcode{display:flex;flex-wrap:wrap;gap:6px}
.hb-seg{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 12px;border-radius:12px;background:var(--accent-soft);min-width:64px}
.hb-seg code{font:700 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent-deep);letter-spacing:.05em}
.hb-seg b{font-size:12.5px;color:var(--ink)}
.hb-seg span{font-size:11px;color:var(--muted)}
.help-pager{display:flex;justify-content:space-between;gap:12px;margin:22px 0 8px}
.help-rescount{font-size:14px;color:var(--ink-soft);margin:2px 0 14px}
.help-result{display:flex;flex-direction:column;gap:5px;width:100%;padding:15px 18px;margin-bottom:10px}
.help-result b{font:600 16px/1.3 var(--serif);color:var(--ink)}
.help-snip{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.help-main mark{background:#ffe2ef;color:inherit;border-radius:3px;padding:0 2px}
.help-lightbox{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(30,24,27,.82);display:grid;place-items:center;padding:28px;cursor:zoom-out}
.help-lightbox.hidden{display:none}
.help-lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:var(--shadow-lg);background:#fff}
.help-lb-close{all:unset;cursor:pointer;position:fixed;top:18px;right:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.help-lb-close .ic{width:20px;height:20px}
@media(max-width:1100px){.help-intro{grid-template-columns:1fr 1fr}.help-learn{grid-column:1/-1}.help-pair{grid-template-columns:1fr}}
@media(max-width:900px){.help-layout{grid-template-columns:1fr}.help-toc{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;padding:6px}.help-toc>*{flex:none;width:auto!important}.help-toc-ch>button{width:auto!important;white-space:nowrap}.help-toc-topics{display:none}.help-quick{grid-template-columns:1fr}}
@media(max-width:640px){.help-intro{grid-template-columns:1fr}.help-chhead-top{flex-wrap:wrap}.help-chhead h2{font-size:23px}.help-topic,.help-chhead{padding:18px 16px}.help-link{display:none}.help-search input{font-size:15px}}
.help-lang{flex:none;display:inline-flex;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.help-lang button{all:unset;cursor:pointer;min-width:44px;text-align:center;padding:9px 14px;border-radius:999px;font:600 13px/1 var(--sans);color:var(--ink-soft);transition:background .15s,color .15s}
.help-lang button:hover{color:var(--ink)}
.help-lang button.on{background:var(--accent-soft);color:var(--accent-deep)}
.help-lang button:focus-visible{box-shadow:var(--focus-ring)}
@media(max-width:640px){.help-bar{flex-wrap:wrap}.help-lang{order:-1;margin-left:auto}}

/* ================= Defect Report ================= */
.df-filters select, .df-filters input { min-width: 140px; }
.df-sub { font-size: 11.5px; margin-top: 2px; }
.df-table td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.df-row { cursor: pointer; transition: background .12s; }
.df-table td:nth-child(1), .df-table td:nth-child(2), .df-table td:nth-child(7), .df-table td:nth-child(10) { white-space: nowrap; }
.df-row:hover { background: #fdf6f9; }
.df-prod { display: flex; flex-direction: column; gap: 2px; min-width: 220px; max-width: 340px; }
.df-bc { font-size: 11px; color: var(--accent-deep); background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; width: fit-content; }
.df-unlinked { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); }
.df-what { max-width: 260px; }
.df-tag { display: inline-block; margin: 1px 2px 1px 0; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.df-tag.wrong { background: #eef0f6; color: #4a5576; }
.df-note { font-size: 12.5px; margin: -2px 0 14px; }
.df-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.df-stat { padding: 18px 20px; min-width: 0; }
.df-span, .df-stat-grid > .df-stat:nth-child(n+4) { grid-column: 1 / -1; }
.df-stat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.df-stat-head h3 { margin: 0; font: 600 17px/1.2 var(--serif); }
.df-stat-head .muted { font-size: 12px; }
.df-chart { position: relative; height: 240px; }
.df-rate { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.df-rate-bar { width: 70px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.df-rate-bar i { display: block; height: 100%; border-radius: 99px; background: #9fd1b4; }
.df-rate-bar i.mid { background: #f3c27a; }
.df-rate-bar i.hi { background: #e0796f; }
.df-rate b { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
/* editor */
.df-editor { padding: 24px 26px; }
.df-ed-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.df-ed-top h2 { margin: 0; font: 600 24px/1.2 var(--serif); }
.df-type-row { margin-bottom: 18px; }
.df-type-row .muted { font-weight: 500; margin-left: 4px; }
.df-type-row .vc-type-btn.on .muted { color: rgba(255,255,255,.75); }
.df-ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.df-sec { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: var(--surface); min-width: 0; }
.df-sec h3 { margin: 0 0 12px; font: 600 15px/1.2 var(--serif); }
.df-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; }
.df-fields label { margin: 0; }
.df-check-inline { align-self: end; padding-bottom: 8px; }
.df-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.df-link { margin-top: 12px; }
.df-linkcard { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #fdf8fa; border: 1px solid var(--line); }
.df-linkcard img, .df-noimg { flex: none; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.df-linkgrid { flex: 1; min-width: 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px 16px; font-size: 13.5px; }
.df-sku { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.df-posel { grid-column: 1 / -1; }
.df-posel select { max-width: 560px; margin-top: 4px; padding: 7px 10px; font-size: 13px; }
.df-files { margin-bottom: 10px; }
.df-upload { cursor: pointer; margin: 0; text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 600; color: var(--ink); width: fit-content; }
@media (max-width: 1000px) { .df-stat-grid, .df-ed-grid { grid-template-columns: 1fr; } .df-stat-grid > .df-stat { grid-column: auto; } .df-linkgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .df-editor { padding: 16px; } .df-linkgrid { grid-template-columns: 1fr; } }
.vcp-act { white-space: nowrap; }
.vcp-fs { display: inline-flex; gap: 6px; }
.vcp-act .muted { font-size: 12px; }

/* ================= Tax Invoice ================= */
.tx-warn { border-color: #f3c27a; background: #fffaf0; }
.tx-late { color: #b0601a; font-weight: 600; }
.tx-kv { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.tx-kv span { color: var(--muted); font-size: 12px; font-weight: 600; }
.tx-kv b { font-weight: 500; color: var(--ink); word-break: break-word; }
.df-sec > .btn-sm { margin-top: 12px; }
.tx-files { margin-top: 14px; }
.tx-kv .iconbtn { width: 28px; height: 28px; font-size: 12px; }
.tx-kv .iconbtn:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---- Defect Report: resolution actions + polish ---- */
.df-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.df-sec-head h3 { margin: 0; }
.dfa { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface); }
.dfa-requested { border-color: #f1d3a8; background: #fffbf4; }
.dfa-approved { border-color: var(--accent); background: #fff8fb; }
.dfa-done { background: #f6fbf8; border-color: #cfe7d8; }
.dfa-rejected, .dfa-cancelled { opacity: .72; }
.dfa-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dfa-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); font: 700 15px/1 var(--sans); }
.dfa-title { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 160px; }
.dfa-title b { font-size: 14.5px; }
.dfa-title .muted { font-size: 12.5px; }
.dfa-amt { font: 600 18px/1 var(--serif); font-variant-numeric: tabular-nums; }
.recv-badge.approved { background: var(--accent-soft); color: var(--accent-deep); }
.dfa-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; padding: 0; counter-reset: s; }
.dfa-steps li { position: relative; padding: 9px 11px 9px 34px; border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.dfa-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 10px; top: 9px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--sans); background: var(--line-strong); color: #fff; }
.dfa-steps li b { color: var(--ink-soft); font-size: 12.5px; }
.dfa-steps li.on { background: #eaf6ef; } .dfa-steps li.on::before { content: "✓"; background: var(--ok); }
.dfa-steps li.now { background: #fff3e2; box-shadow: inset 0 0 0 1px #f1d3a8; } .dfa-steps li.now::before { background: var(--warn); }
.dfa-steps li.no { background: #fbe9e7; } .dfa-steps li.no::before { content: "✕"; background: var(--danger); }
.dfa-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin-top: 10px; font-size: 13.5px; }
.dfa-proof { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.dfa-files { margin-top: 10px; }
.dfa-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.dfa-note { flex: 1; min-width: 200px; margin: 0; padding: 8px 11px; font-size: 13px; }
.dfa-cancel { margin-left: auto; }
.dfa-new { margin-top: 4px; }
.dfa-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dfa-opt { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 13px; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: 13.5px; color: var(--ink); transition: border-color .15s, background .15s; }
.dfa-opt:hover { border-color: var(--accent); }
.dfa-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dfa-opt .dfa-ic { width: 28px; height: 28px; font-size: 13px; margin-bottom: 2px; }
.dfa-opt .muted { font-size: 12px; font-weight: 400; }
.dfa-opt:has(input:checked) { border-color: var(--accent-deep); background: var(--accent-soft); }
.dfa-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.df-table th { white-space: nowrap; }
.df-filters label { min-width: 0; }
@media (max-width: 700px) { .dfa-steps { grid-template-columns: 1fr; } }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-deep); color: #fff; font: 700 11px/20px var(--sans); text-align: center; box-shadow: 0 1px 3px rgba(212,102,158,.4); }

/* ================= Inbox (bell) ================= */
.sidebar-top { gap: 8px; }
.sidebar-top .logo { margin-right: auto; }
.nt-bell { position: relative; flex: none; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s; }
.nt-bell .ic { width: 18px; height: 18px; }
.nt-bell:hover { border-color: var(--accent); color: var(--accent-deep); }
.nt-bell:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nt-bell.has-new .ic { color: var(--accent-deep); animation: nt-ring 1.6s ease 1; transform-origin: 50% 10%; }
@keyframes nt-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.nt-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent-deep); color: #fff; font: 700 10.5px/19px var(--sans); text-align: center; border: 2px solid var(--surface); }
.nt-bell-m { margin-left: auto; }
.nt-panel { position: fixed; z-index: var(--z-modal); top: 14px; left: 268px; width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - 28px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); animation: pop .16s ease; }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.nt-head b { display: block; font: 600 19px/1.2 var(--serif); }
.nt-head .muted { font-size: 12.5px; }
.nt-list { overflow-y: auto; padding: 6px 8px 10px; }
.nt-group { padding: 12px 10px 6px; font: 700 10.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.nt-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 10px 10px 14px; border-radius: 11px; text-decoration: none; color: var(--ink); transition: background .12s; }
.nt-item:hover { background: var(--surface-2); }
.nt-item.unseen::before { content: ""; position: absolute; left: 4px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); }
.nt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-main b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.nt-main .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-when { font-size: 11.5px; white-space: nowrap; padding-top: 2px; }
.nt-tone { font: 700 10.5px/1 var(--sans); padding: 5px 7px; border-radius: 999px; white-space: nowrap; margin-top: 1px; }
.nt-new { background: var(--accent-soft); color: var(--accent-deep); }
.nt-approve { background: #fdeede; color: #9a5a13; }
.nt-todo { background: #e8f0fb; color: #2f5d9a; }
.nt-info { background: var(--surface-2); color: var(--ink-soft); }
.nt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px; }
.nt-empty-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #e3f4ea; color: var(--ok); font-size: 20px; margin-bottom: 4px; }
.nt-empty .muted { font-size: 12.5px; max-width: 260px; }
@media (max-width: 900px) { .nt-panel { left: 12px; right: 12px; top: 62px; width: auto; } }

/* ================= Low Star Report ================= */
.ls-stars { color: #f0a63a; letter-spacing: 1px; white-space: nowrap; font-size: 14px; }
.ls-stars i { font-style: normal; color: var(--line-strong); }
.ls-quote { font-style: italic; margin-top: 4px; white-space: normal; }
.ls-rate { display: flex; align-items: center; gap: 4px; }
.ls-star { border: 0; background: none; padding: 0 2px; font-size: 28px; line-height: 1; color: var(--line-strong); cursor: pointer; transition: color .12s, transform .12s; }
.ls-star.on { color: #f0a63a; }
.ls-star:hover:not(:disabled) { transform: scale(1.12); }
.ls-star:disabled { cursor: default; }
.ls-rate .muted { margin-left: 8px; font-size: 13px; }
.ls-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls-dec { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #fff8fb; border: 1px solid var(--accent); margin-bottom: 12px; font-size: 13.5px; }
.ls-dec.done { background: #f6fbf8; border-color: #cfe7d8; }
.ls-dec b { font-size: 14px; }
.lsd-defect p { margin: 0 0 10px; }
@media (max-width: 700px) { .ls-pick { grid-template-columns: 1fr; } }

/* ================= GUIDED TOURS · MISSIONS · PRACTICE MODE (tours.js) ================= */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tour-root{position:fixed;inset:0;z-index:calc(var(--z-toast) - 10);pointer-events:none}
.tour-shade{position:fixed;background:rgba(43,32,38,.52);pointer-events:auto;transition:all .22s ease}
.tour-root.busy .tour-shade{cursor:progress}
.tour-root.busy .tour-bubble{opacity:0;pointer-events:none}
.tour-ring{position:fixed;border-radius:12px;box-shadow:0 0 0 3px var(--accent),0 0 0 9px rgba(246,181,211,.35);transition:all .22s ease;pointer-events:none;animation:tourGlow 1.8s ease-in-out infinite}
@keyframes tourGlow{50%{box-shadow:0 0 0 3px var(--accent-deep),0 0 0 13px rgba(246,181,211,.18)}}
.tour-bubble{position:fixed;width:min(360px,calc(100vw - 24px));background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px 16px 14px;pointer-events:auto;outline:none;border:1px solid var(--line);transition:left .22s ease,top .22s ease,opacity .15s}
.tour-bubble.center{left:50%!important;top:50%!important;transform:translate(-50%,-50%)}
.tour-bubble.dock{width:calc(100vw - 24px)}
.tour-bubble.nudge{animation:tourNudge .35s ease}
@keyframes tourNudge{25%{translate:-5px 0}75%{translate:5px 0}}
.tour-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tour-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);font-size:13px;font-weight:700;flex:none}
.tour-name{font-size:12.5px;font-weight:600;color:var(--ink-soft);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tour-mode{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.tour-mode.practice{background:#e3f4ea;color:var(--ok)}
.tour-lang,.tour-x{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);padding:4px 7px;border-radius:7px}
.tour-lang:hover,.tour-x:hover{background:var(--surface-2);color:var(--ink)}
.tour-lang:focus-visible,.tour-x:focus-visible{box-shadow:var(--focus-ring)}
.tour-bar{height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.tour-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));border-radius:4px;transition:width .3s ease}
.tour-count{font-size:11.5px;color:var(--muted);margin:8px 0 2px}
.tour-bubble h3{font-family:var(--serif);font-size:18px;font-weight:600;margin:0 0 4px;color:var(--ink)}
.tour-bubble p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.tour-hint{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--accent-deep)!important}
.tour-pulse{width:9px;height:9px;border-radius:50%;background:var(--accent-deep);flex:none;animation:tourPulse 1.2s ease-out infinite}
@keyframes tourPulse{0%{box-shadow:0 0 0 0 rgba(212,102,158,.55)}100%{box-shadow:0 0 0 10px rgba(212,102,158,0)}}
.tour-note{font-size:12.5px!important;background:#fff8e6;border-radius:10px;padding:8px 10px;color:#7a5a12!important}
.tour-act{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.tour-act>:last-child{margin-left:auto}
.tour-offer{position:fixed;right:20px;bottom:20px;z-index:calc(var(--z-toast) - 20);width:min(380px,calc(100vw - 32px));display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px 12px 12px 14px;animation:tourIn .3s ease both}
@keyframes tourIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tour-offer-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);font-weight:700;flex:none}
.tour-offer-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tour-offer-b b{font-size:14px;line-height:1.4}
.tour-offer-b>span{font-size:12.5px;color:var(--muted)}
.tour-offer-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tour-offer-never{all:unset;cursor:pointer;font-size:11.5px;color:var(--muted);margin-top:6px;text-decoration:underline;text-underline-offset:2px}
.tour-offer-never:focus-visible{box-shadow:var(--focus-ring)}
.tour-missions{padding:18px 20px;margin-bottom:18px}
.tm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tm-head h2{font-family:var(--serif);font-size:19px;margin:0 0 2px}
.tm-head .muted{font-size:13px}
.tm-bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin:12px 0 6px}
.tm-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));border-radius:6px;transition:width .5s ease}
.tm-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 18px}
.tm-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.tm-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none;transition:all .25s}
.tm-list li.ok .tm-check{background:var(--ok);border-color:var(--ok)}
.tm-list li.ok .tm-t{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.tm-t{flex:1;min-width:0}
.tm-go{flex:none;padding:3px 9px!important;font-size:12px!important}
.tm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;font-size:13px}
.tm-foot .chk{margin-right:auto}
.tour-help,.tour-practice{padding:20px;margin-bottom:16px}
.tour-help h2,.tour-practice h2{font-family:var(--serif);font-size:20px;margin:0 0 4px}
.tour-help-head p,.tour-practice p{margin:0;font-size:14px}
.tour-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:16px}
.tour-card{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface)}
.tour-card-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);font-weight:700;flex:none}
.tour-card-b{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px}
.tour-card-b b{font-size:14.5px}
.tour-card-b .muted{font-size:12.5px}
.tour-seen{color:var(--ok);font-weight:600}
.tour-card-act{display:flex;gap:6px;width:100%;justify-content:flex-end}
.tour-practice{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,var(--accent-soft),var(--surface) 70%)}
.tour-practice.on{background:linear-gradient(120deg,#e3f4ea,var(--surface) 70%)}
.tour-practice>div{flex:1;min-width:240px}
.help-toc-play{display:inline-grid;place-items:center;width:18px;font-size:11px;color:var(--accent-deep)}
.help-chhead-act{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.help-quick{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.page-help{margin-left:auto;align-self:flex-end;display:flex;gap:8px;align-items:center}
.page-help .help-link{margin:0;align-self:auto}
.help-link.tour-link{cursor:pointer;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.help-link.tour-link:hover{background:var(--accent);color:#fff}
.help-link.tour-link:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media(max-width:640px){.page-help .help-link.tour-link{display:inline-flex}}
.practice-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:calc(var(--z-toast) - 30);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;background:#2b2026;color:#fff;box-shadow:var(--shadow-lg);font-size:13px;white-space:nowrap;max-width:calc(100vw - 24px)}
.practice-bar .practice-sub{color:#d9c9d1;overflow:hidden;text-overflow:ellipsis}
.practice-bar .btn{background:#fff;color:#2b2026;border-color:#fff}
.practice-dot{width:9px;height:9px;border-radius:50%;background:#7ddba4;box-shadow:0 0 0 4px rgba(125,219,164,.25);flex:none}
@media (max-width:640px){
  .practice-bar .practice-sub{display:none}
  .tour-offer{right:12px;left:12px;bottom:72px;width:auto}
  .tm-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tour-ring,.tour-pulse,.tour-offer,.tour-bubble.nudge{animation:none}
  .tour-shade,.tour-ring,.tour-bubble{transition:none}
}