/* DESHENG Portal (得胜) UI V1.1
 * Tokens follow UI_STYLE_REFERENCE.md.
 *   [F] = reused from DAPENG_FOODS_ORDER/src/app/globals.css (web admin)
 *   [K] = reused from DAPENG_OS_MAINLINE customer MainActivity.java (vending kiosk palette)
 *   [S] = minimal supplement (not defined in either old project) or desktop-compact deviation
 */
:root {
  /* colour — vending palette [K] */
  --brand: #0F4F4A;          /* [K] brand / primary text on buttons */
  --brand-hover: #113A38;    /* [K] dark title teal */
  --accent: #0F8F8A;         /* [K] badges / category chips */
  --tint: #E8F3F2;           /* [K] soft brand background */
  --tint-2: #EEF7F6;         /* [K] */
  --line-brand: #D5E5E3;     /* [K] card stroke */
  --ink: #1F2937;            /* [K] body text */
  --ink-strong: #111827;     /* [K] */
  --muted: #6B7280;          /* [K] secondary text */
  --line: #E5E7EB;           /* [K] divider */
  --page: #F6F8F8;           /* [K] shell background */
  --surface: #FFFFFF;
  --surface-alt: #FAFCFC;    /* [K] item card */
  --warn-ink: #B45309; --warn-bg: #FEF3C7; --warn-line: #F59E0B;   /* [K] "unavailable" */
  --err-ink: #991B1B;  --err-bg: #FEF2F2;  --err-line: #FCA5A5;    /* [K] "sold out" */
  --ok-ink: #0F4F4A;   --ok-bg: #E8F3F2;   --ok-line: #B7D8D5;     /* [K] "available" */
  --neutral-ink: #374151; --neutral-bg: #F3F4F6;                   /* [K] */
  --focus: #ad7c21;          /* [F] focus ring */

  /* type — scale values used in [F] */
  --font: Arial, "PingFang SC", "PingFang TC", "Microsoft JhengHei", sans-serif; /* [F] */
  --fs-fine: 11px;   /* [F] .fine / .audit-list */
  --fs-small: 12px;  /* [F] labels, dl rows, record lists */
  --fs-body: 13px;   /* [F] .choice / .wholesale p — desktop admin body [S: 15px→13px] */
  --fs-lead: 15px;   /* [F] body base */
  --fs-h3: 17px;     /* [F] .admin-main h3 */
  --fs-h2: 18px;     /* [F] h2 */
  --fs-h1: 21px;     /* [K] Order Summary title 21sp */
  --fs-stat: 25px;   /* [F] .admin-stats strong */
  --lh: 1.5;         /* [S] [F] uses 1.65; tightened for tables */

  /* shape [F] */
  --r-control: 3px;  /* [F] inputs, buttons */
  --r-card: 4px;     /* [F] .form-card / .admin-stats */
  --r-nav: 6px;      /* [F] .admin-nav button */
  --r-pill: 20px;    /* [F] .pill */

  /* spacing — values used in [F]/[K] */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 28px; --s-7: 36px;

  /* layout [S] unless noted */
  --content-max: 1250px;    /* [F] .admin-main */
  --sidebar-w: 208px;       /* [S] */
  --topbar-h: 48px;         /* [S] */
  --control-h: 32px;        /* [S] desktop compact; [F] touch = 44px (restored for coarse pointers) */
  --input-h: 34px;          /* [S] desktop compact; [F] = 46px */
  --row-pad-y: 8px;         /* [S] table cell vertical padding (row ≈ 36px) */
  --row-pad-y-dense: 6px;   /* [S] Super Admin (row ≈ 32px) */
  --panel-max: 720px;       /* [F] .cart-preview */
  --login-max: 520px;       /* [F] .login */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh);
}
a { color: var(--brand); }
button, input, select, textarea { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;       /* [F] 3px ring (offset 4→2 [S]) */
}
button:disabled { opacity: .45; cursor: not-allowed; }          /* [F] */

/* ---------------------------------------------------------------- preview banner [F] .preview-banner */
.sim-banner {
  background: var(--brand); color: #fff; display: flex; justify-content: center; align-items: center;
  gap: 9px; padding: 7px 16px; font-size: var(--fs-fine); letter-spacing: .06em; text-align: center;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #ecdc92; flex-shrink: 0; }  /* [F] */

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - 30px); }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.brand { padding: 0 var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.brand-name { font-size: var(--fs-lead); letter-spacing: .12em; color: var(--brand); font-weight: 700; }  /* [F] .brand letter-spacing */
.brand-portal { display: block; font-size: 10px; letter-spacing: .08em; color: var(--muted); margin-top: 3px; text-transform: uppercase; } /* [F] .brand small */
.current-machine { background: var(--tint); border: 1px solid var(--line-brand); border-radius: var(--r-card); padding: var(--s-2) var(--s-3); font-size: var(--fs-small); }
.current-machine strong { display: block; color: var(--brand); font-size: var(--fs-body); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav { display: flex; align-items: center; min-height: var(--control-h); padding: 0 var(--s-3); border-radius: var(--r-nav); color: var(--ink); text-decoration: none; font-size: var(--fs-body); }
.nav:hover { background: var(--tint-2); }
.nav.active { background: var(--brand); color: #fff; }       /* [F] .admin-nav [aria-current] */
.nav .en { color: var(--muted); font-size: var(--fs-fine); margin-left: 6px; }
.nav.active .en { color: rgba(255,255,255,.7); }
.user { margin-top: auto; padding: var(--s-3) var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.user .muted { font-size: var(--fs-fine); }

.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--s-5); background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .crumb { font-size: var(--fs-small); color: var(--muted); letter-spacing: .04em; }
.topbar .crumb b { color: var(--ink); font-weight: 600; }
.portal-chip { font-size: var(--fs-fine); letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-brand); color: var(--brand); background: var(--tint); }
main { width: 100%; max-width: var(--content-max); padding: var(--s-5); }
h1 { font-size: var(--fs-h1); font-weight: 600; margin: 0 0 var(--s-4); color: var(--ink-strong); letter-spacing: -.01em; }
h2 { font-size: var(--fs-h3); font-weight: 500; margin: var(--s-5) 0 var(--s-3); }      /* [F] .admin-main h3 17px/500 */
p { margin: 0 0 var(--s-3); }
.muted { color: var(--muted); }
.fine { font-size: var(--fs-fine); color: var(--muted); }

/* ---------------------------------------------------------------- buttons  (height [S], radius/colours [F]) */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-h); padding: 0 var(--s-3); border-radius: var(--r-control);
  border: 1px solid var(--line-brand); background: var(--surface); color: var(--brand);
  font-size: var(--fs-body); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button:hover, button:hover { background: var(--tint-2); }
.button.primary, button.primary, .button:not(.secondary):not(.danger) { background: var(--brand); border-color: var(--brand); color: #fff; }
.button.primary:hover, button.primary:hover { background: var(--brand-hover); }
button.danger { background: var(--err-ink); border-color: var(--err-ink); color: #fff; font-weight: 600; }
button.danger:hover { background: #7d291c; }                  /* [F] .payment-warning */
.btn-row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-top: var(--s-4); }
.text-link { font-size: var(--fs-small); }

/* ---------------------------------------------------------------- notices  [F] .notice structure, [K] colours */
.flash { border-left: 3px solid; padding: 10px var(--s-4); font-size: var(--fs-small); margin-bottom: var(--s-4); border-radius: 0 var(--r-control) var(--r-control) 0; }
.flash.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.flash.error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }
.flash a { color: inherit; font-weight: 600; }
.danger-note { background: var(--err-bg); border-left: 3px solid var(--err-line); color: var(--err-ink); padding: 10px var(--s-4); font-size: var(--fs-small); margin: var(--s-4) 0; }

/* ---------------------------------------------------------------- stat tiles  [F] .admin-stats */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 15px; }
.tile-num { font-size: var(--fs-stat); font-weight: 600; line-height: 1.2; color: var(--ink-strong); }
.tile-label { font-size: var(--fs-small); color: var(--muted); }
.tile.alert { background: var(--warn-bg); border-color: var(--warn-line); }
.tile.alert .tile-num { color: var(--warn-ink); }

/* ---------------------------------------------------------------- tables  [S] (no table in old projects; [F] record-list divider style) */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--fs-body); }
.table-wrap table { border: 0; }
th, td { text-align: left; padding: var(--row-pad-y) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
td.wrap, th.wrap { white-space: normal; }
th { background: var(--page); font-size: var(--fs-small); font-weight: 600; color: var(--muted); letter-spacing: .02em; position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-alt); }
tr.disabled td { color: #9ca3af; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
body.density-dense th, body.density-dense td { padding-top: var(--row-pad-y-dense); padding-bottom: var(--row-pad-y-dense); }
.table-note { font-size: var(--fs-fine); color: var(--muted); margin: var(--s-2) 0 0; }

/* ---------------------------------------------------------------- status badge  [F] .pill shape, [K] colours */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-fine); font-weight: 600; border: 1px solid; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.success { color: var(--ok-ink); background: var(--ok-bg); border-color: var(--ok-line); }
.badge.failed  { color: var(--err-ink); background: var(--err-bg); border-color: var(--err-line); }
.badge.unknown { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
.badge.pending { color: var(--neutral-ink); background: var(--neutral-bg); border-color: var(--line); }
.status-code { font-size: 10px; color: var(--muted); margin-left: 4px; font-family: ui-monospace, Menlo, monospace; }
.badge.lg { height: 26px; padding: 0 12px; font-size: var(--fs-small); }

/* ---------------------------------------------------------------- steps */
.steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); width: fit-content; overflow: hidden; }
.steps li { padding: 6px var(--s-4); font-size: var(--fs-small); color: var(--muted); border-right: 1px solid var(--line); }
.steps li:last-child { border-right: 0; }
.steps li.done { color: var(--brand); background: var(--tint-2); }
.steps li.active { color: #fff; background: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------- panels: confirm / result / login  [F] .form-card + .cart-preview width */
.confirm-card, .result-card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); max-width: var(--panel-max); margin-bottom: var(--s-4); }
.confirm-card h2, .result-card h2, .panel h2 { margin-top: 0; font-size: var(--fs-h3); }
.result-card { border-left: 4px solid var(--neutral-ink); }
.result-card.status-success { border-left-color: var(--accent); }
.result-card.status-failed  { border-left-color: var(--err-ink); }
.result-card.status-unknown { border-left-color: var(--warn-line); }
.result-status { margin-bottom: var(--s-3); }

/* key–value rows  [F] .business-card dl */
dl { margin: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); }
dt, dd { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); margin: 0; }
dt { color: var(--muted); }
dd { color: var(--ink); overflow-wrap: anywhere; }
dd.big { font-size: var(--fs-lead); font-weight: 700; color: var(--ink-strong); }

/* ---------------------------------------------------------------- forms  (height [S]; border/radius [F]) */
label { display: block; margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--ink); }
label.check { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-small); }
input[type=text], select { height: var(--input-h); border: 1px solid var(--line-brand); border-radius: var(--r-control); padding: 0 10px; background: var(--surface); color: var(--ink); font-size: var(--fs-body); }
input[type=text] { display: block; width: 100%; max-width: 480px; margin-top: 5px; }
input[type=radio], input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }  /* [F] 18px → 16px [S] */
.filters { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); align-items: center; }

/* ---------------------------------------------------------------- login  [F] .login width */
.login-page { background: var(--page); }
.login-card { max-width: var(--login-max); margin: 72px auto; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--r-card); padding: var(--s-6); }
.login-card h1 { margin-bottom: var(--s-2); }
.login-user { display: flex; gap: var(--s-2); align-items: center; padding: 10px var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); margin: var(--s-2) 0; font-size: var(--fs-body); }
.login-user:has(input:checked) { border-color: var(--brand); background: var(--tint-2); }  /* [F] .choice:has(:checked) */
.login-card button { margin-top: var(--s-3); min-width: 120px; }

/* ---------------------------------------------------------------- DESHENG branding / footer [S] */
.brand { position: relative; }
.brand-cn { font-size: var(--fs-body); letter-spacing: .08em; font-weight: 600; margin-left: 4px; }
.app-footer { margin-top: auto; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-fine); color: var(--muted); background: var(--surface); }
.sim-note { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: var(--r-control); padding: 8px 12px; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--s-4); }
.plain-list { margin: 0 0 var(--s-3); padding-left: 20px; font-size: var(--fs-small); }
.plain-list li { margin: 4px 0; }
label.field { display: block; }
label.field input { margin-top: 5px; }
.cell-label { display: block; margin: 0; font-size: inherit; color: inherit; cursor: pointer; }
tr.pick { cursor: pointer; }
.machine-chip { font-size: var(--fs-fine); font-weight: 700; color: var(--brand); border: 1px solid var(--line-brand); background: var(--surface); border-radius: var(--r-pill); padding: 3px 10px; margin-left: auto; }
.machine-chip + .portal-chip { margin-left: 0; }
.topbar .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .portal-chip { margin-left: auto; flex-shrink: 0; }

/* mobile-only helpers are hidden on desktop */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.icon-btn, .drawer-overlay, .mobile-only { display: none; }
.icon-btn { align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-nav); font-size: 20px; line-height: 1; color: var(--brand); cursor: pointer; margin: 0; flex-shrink: 0; }
.icon-btn:hover { background: var(--tint-2); }
.icon-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- responsive
 * desktop (>900px): unchanged V1.1 layout, tested at 1280 / 1366 / 1440
 * ≤1100px  [S] tiles 3 columns
 * ≤900px   [S] drawer navigation, sticky top bar, secondary table columns hidden (.hm)
 * ≤640px   [S] phone: 16px text / inputs, 44px touch targets, list tables become cards (.rt)
 * [F] 760px remains the old project's breakpoint and is documented, not reused 1:1.
 */
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: min(84vw, 300px);
    transform: translateX(-104%); transition: transform .2s ease; overflow-y: auto;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .25);
  }
  .nav-toggle:checked ~ .shell .sidebar { transform: none; }
  .nav-toggle:checked ~ .shell .drawer-overlay { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(17, 24, 39, .45); margin: 0; }
  .menu-btn { display: inline-flex; }
  .drawer-close { display: inline-flex; position: absolute; top: -6px; right: -4px; }
  .nav { min-height: 44px; }
  .topbar { position: sticky; top: 0; z-index: 20; height: 56px; padding: 0 12px 0 6px; gap: 8px; }
  .hm { display: none; }
  main { padding: var(--s-4); }
}

@media (max-width: 640px) {
  :root {
    --fs-body: 16px;    /* [S] phone body — not the desktop 13px */
    --fs-small: 14px;   /* [S] phone secondary */
    --fs-fine: 12px;    /* [S] phone fine print */
    --fs-h1: 20px;      /* [S] */
    --fs-h3: 17px;
    --fs-stat: 22px;    /* [S] */
    --control-h: 44px;  /* [S] touch target ≥ 44×44 */
    --input-h: 44px;    /* [S] */
  }
  body { font-size: var(--fs-body); }
  .sim-banner { padding: 6px 10px; font-size: 11px; letter-spacing: .02em; }
  .banner-long { display: none; }
  .crumb-brand, .crumb-page, .crumb-machine { display: none; }
  .crumb { font-size: 15px; color: var(--ink); font-weight: 600; }
  .topbar .portal-chip { display: none; }
  .machine-chip { font-size: 13px; padding: 4px 10px; }
  main { padding: 14px 12px calc(40px + env(safe-area-inset-bottom)); }
  h1 { margin-bottom: 12px; }
  h2 { margin-top: 20px; }
  p, .muted { overflow-wrap: anywhere; }
  .app-footer { padding: 12px; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 10px 12px; }

  .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .steps li { padding: 8px 4px; text-align: center; font-size: 13px; }

  .button, button { min-height: 44px; padding: 0 16px; font-size: 16px; }
  .btn-row { gap: 10px; }
  .btn-row > .button, .btn-row > button { flex: 1 1 140px; }
  .confirm-actions { flex-direction: column; align-items: stretch; }
  .btn-row.confirm-actions > .button, .btn-row.confirm-actions > button { flex: 0 0 auto; width: 100%; min-height: 48px; }  /* column: no 140px flex-basis */

  label.field, label { font-size: 14px; }
  input[type=text], select { font-size: 16px; height: 44px; max-width: none; width: 100%; }  /* 16px: iOS does not zoom */
  label.check { min-height: 44px; font-size: 15px; align-items: flex-start; padding-top: 10px; }
  input[type=radio], input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
  .filters { flex-wrap: wrap; }
  .filters select { flex: 1 1 150px; width: auto; }
  .filters button { flex: 0 0 auto; }

  .confirm-card, .result-card, .panel { padding: 16px; }
  dl { grid-template-columns: minmax(0, 1fr); }
  dt { border-bottom: 0; padding: 8px 0 0; font-size: 13px; }
  dd { padding: 2px 0 8px; font-size: 16px; }
  dd.big { font-size: 18px; }
  .login-card { margin: 20px 12px; padding: 20px 16px; }
  .login-user { min-height: 48px; }

  /* list tables -> cards (.rt). Report tables keep scrolling inside .table-wrap only. */
  .rt-wrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  table.rt, .rt tbody, .rt tr, .rt td { display: block; width: auto; }
  .rt thead { display: none; }
  .rt tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
           padding: 10px 14px; margin-bottom: 10px; }
  .rt td { border: 0; padding: 4px 0; white-space: normal; text-align: left; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
  .rt td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
  .rt td[data-label=""]::before, .rt td.card-title::before { display: none; }
  .rt td.card-title { grid-column: 1 / -1; font-size: 17px; font-weight: 700; color: var(--ink-strong); padding-right: 44px; }
  .rt td.card-title.num::before { display: inline; content: "货道 "; font-size: 14px; color: var(--muted); font-weight: 400; }
  .rt td.card-main { grid-column: 1 / -1; font-weight: 600; }
  .rt td.reason, .rt td.actions { grid-column: 1 / -1; }
  .rt td.actions .button, .rt td.actions button, .rt td.actions form { width: 100%; }
  .rt td.hm, .rt th.hm { display: none; }
  .rt td.mobile-only { display: block; }
  .rt tbody tr:hover td { background: transparent; }
  .rt tr.disabled { background: var(--page); }
  .rt tr.disabled td { color: #6b7280; }
  .rt .status-code { display: none; }
  /* lane picker: radio in the top-right corner, whole card tappable via <label> cells */
  .rt td.pick-cell { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; }
  .rt td.pick-cell::before { display: none; }
  .rt tr.pick td.card-title { padding-right: 0; margin-right: 52px; }  /* keep clear of the radio */
  .rt tr.pick:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--tint); background: var(--tint-2); }
}
@media (max-width: 359px) { .tiles { grid-template-columns: minmax(0, 1fr); } .rt tr { grid-template-columns: minmax(0, 1fr); } }
/* phones in landscape: keep the sticky bar short */
@media (max-height: 480px) and (orientation: landscape) { .topbar { height: 48px; } .sim-banner { padding: 4px 10px; } }
/* touch devices keep ≥44px targets even on wide screens (tablets) — [F] 44 / 46px */
@media (pointer: coarse) {
  :root { --control-h: 44px; --input-h: 46px; }
  .nav { min-height: 44px; }
}

/* ---------------------------------------------------------------- Operator Assistant: Current Outlet bar [S] (Round 2) */
.outlet-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
              padding: 8px var(--s-5); background: var(--tint); border-bottom: 1px solid var(--line-brand); font-size: var(--fs-body); }
.outlet-current b { color: var(--brand); font-size: var(--fs-lead); }
.outlet-no { color: var(--muted); }
.outlet-change { min-height: var(--control-h); }
input[type=password] { display: block; width: 100%; max-width: 480px; margin-top: 5px; height: var(--input-h);
  border: 1px solid var(--line-brand); border-radius: var(--r-control); padding: 0 10px; background: var(--surface);
  color: var(--ink); font-size: var(--fs-body); }
.login-card label.field { margin-top: 12px; }
@media (max-width: 900px) { .outlet-bar { padding: 8px 12px; position: sticky; top: 56px; z-index: 19; } }
@media (max-width: 640px) {
  .outlet-bar { gap: 8px; }
  .outlet-current { flex: 1 1 100%; }
  .outlet-change { flex: 1 1 100%; width: 100%; }
  input[type=password] { font-size: 16px; height: 44px; max-width: none; }
}

/* Round 3: Edit Lane form */
.lane-form label.field { margin-top: var(--s-4); }
.lane-form label.field select { display: block; width: 100%; max-width: 480px; margin-top: 5px; }
.lane-form .fine { margin: 4px 0 0; }
.flash.success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }

/* Edit Lane sliders: the number is always visible next to the label; only the slider is submitted */
.slider-field { margin-top: var(--s-4); max-width: 480px; }
.slider-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.slider-head label { min-width: 0; }
.slider-value { flex-shrink: 0; white-space: nowrap; font-weight: 700; font-size: var(--fs-lead); font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.slider-value.over, .slider-value.over .slider-num { color: var(--err-ink); }
.slider-num { width: 3.2em; height: 30px; padding: 0 4px; text-align: right; font: inherit; color: inherit;
  border: 1px solid var(--line-brand); border-radius: var(--r-control); background: var(--surface); -moz-appearance: textfield; }
.slider-num::-webkit-outer-spin-button, .slider-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slider-field input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px;
  margin: 4px 0 0; background: transparent; cursor: pointer; }
.slider-field input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line-brand); }
.slider-field input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-brand); }
.slider-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px;
  border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--brand); }
.slider-field input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand);
  border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--brand); }
.slider-field input[type=range]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.slider-scale { display: flex; justify-content: space-between; font-size: var(--fs-fine); color: var(--muted); }
#lane-save:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px), (pointer: coarse) {
  .slider-field { max-width: none; }
  .slider-value { font-size: 20px; }
  .slider-num { height: 40px; width: 3em; font-size: 20px; }     /* ≥16px: iOS does not zoom */
  .slider-field input[type=range] { height: 48px; touch-action: pan-y; }   /* large touch target */
  .slider-field input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
  .slider-field input[type=range]::-webkit-slider-thumb { width: 32px; height: 32px; margin-top: -12px; }
  .slider-field input[type=range]::-moz-range-thumb { width: 28px; height: 28px; }
}

/* Round 3.1: config version / sync strip, mapping chip */
.config-strip { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-small); color: var(--muted); margin: 0 0 var(--s-3); }
.config-strip b { color: var(--ink-strong); }
.lane-meta { margin: 0 0 var(--s-2); }
.skip-card { border-color: var(--warn-line); background: var(--warn-bg); }
.skip-card h2 { color: var(--warn-ink); }
.sync-panel dl { margin: 0; }

/* Round 3.1: human-readable audit log (cards, never wider than the screen) */
.audit-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.audit-entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.audit-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-3); margin-bottom: var(--s-1); }
.audit-time { color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.audit-action { font-weight: 700; color: var(--ink-strong); }
.audit-entry dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s-3); margin: var(--s-1) 0 0; font-size: var(--fs-small); }
.audit-entry dt { color: var(--muted); }
.audit-entry dd { margin: 0; min-width: 0; }
.audit-changes { border-top: 1px dashed var(--line); padding-top: var(--s-1); }
.audit-changes .from { color: var(--muted); }
.audit-changes .arrow { color: var(--muted); padding: 0 2px; }
.audit-changes .to { font-weight: 600; color: var(--ink-strong); }
details.tech { margin-top: var(--s-2); font-size: var(--fs-fine); }
details.tech summary { cursor: pointer; color: var(--muted); }
details.tech pre { margin: var(--s-1) 0 0; padding: var(--s-2); background: var(--bg, #F7F8F8); border: 1px solid var(--line); border-radius: var(--r-control);
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; overflow-x: hidden; }
@media (max-width: 640px) {
  .audit-entry dl { grid-template-columns: minmax(0, 1fr); }
  .audit-entry dt { margin-top: 4px; }
  details.tech summary { min-height: 44px; display: flex; align-items: center; }
}

/* Round 3.2: machine layout / zones */
.layout-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-small); }
.layout-strip .layout-name { margin-right: var(--s-2); }
.zone-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.zone-chip.cold { background: #EAF2FB; border-color: #B9D2EE; color: #1E4E86; }
.zone-chip.warm { background: #FDF0E6; border-color: #F2C9A5; color: #8A3F0C; }
.zone-hint { margin: 4px 0 0; font-weight: 600; min-height: 1.4em; color: var(--ink-strong); }
.layout-choice { border: 0; padding: 0; margin: 0; }
.layout-choice legend { font-weight: 600; margin-bottom: 6px; }
.layout-option { display: flex; gap: var(--s-2); align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-control);
  margin-bottom: 6px; max-width: 480px; cursor: pointer; }
.layout-option > span { display: flex; flex-direction: column; min-width: 0; }
.zone-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); max-width: 480px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.zone-row > div { display: flex; flex-direction: column; min-width: 0; }
.zone-row select { width: 9em; flex-shrink: 0; }
@media (max-width: 640px) {
  .layout-option { min-height: 44px; }
  .zone-row select { width: 8em; }
}

/* ---------------------------------------------------------------- Super Admin = Navy (Operator Assistant stays Teal)
   Colour only: same layout, sizes and spacing. Page background stays light. */
body.portal-super-admin {
  --brand: #0B1F3A;          /* primary navy: buttons, active menu, banner, headings accents */
  --brand-hover: #07152A;
  --accent: #1E4E8C;         /* secondary blue */
  --tint: #E8EEF7;
  --tint-2: #F0F4FA;
  --line-brand: #C7D4E8;
  --ok-ink: #1E4E8C; --ok-bg: #E8EEF7; --ok-line: #B6C8E4;
  --page: #F5F7FA;
}
body.portal-super-admin .sidebar { background: var(--brand); border-right-color: var(--brand); color: #DCE4F0; }
body.portal-super-admin .brand { border-bottom-color: rgba(255,255,255,.14); }
body.portal-super-admin .brand-name { color: #fff; }
body.portal-super-admin .brand-portal { color: #9FB3D1; }
body.portal-super-admin .sidebar .nav { color: #DCE4F0; }
body.portal-super-admin .sidebar .nav:hover { background: rgba(255,255,255,.08); }
body.portal-super-admin .sidebar .nav.active { background: var(--accent); color: #fff; }
body.portal-super-admin .sidebar .nav .en { color: #9FB3D1; }
body.portal-super-admin .sidebar .nav.active .en { color: rgba(255,255,255,.8); }
body.portal-super-admin .user { border-top-color: rgba(255,255,255,.14); color: #DCE4F0; }
body.portal-super-admin .user .muted { color: #9FB3D1; }
body.portal-super-admin .user .text-link { color: #fff; }
body.portal-super-admin .sidebar .icon-btn { color: #fff; }
body.portal-super-admin .topbar { box-shadow: inset 0 3px 0 var(--accent); }
body.portal-super-admin .portal-chip { background: var(--brand); border-color: var(--brand); color: #fff; }
body.portal-super-admin.login-page .brand-name { color: var(--brand); }

/* Global Products */
.product-thumb { display: inline-flex; align-items: center; justify-content: center; object-fit: cover; border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface-alt); color: var(--muted); vertical-align: middle; }
.thumb-cell { width: 56px; }
.inline-form { display: inline; margin: 0; }
.filter-row { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.filter-row .button { min-height: 28px; padding: 0 10px; font-size: var(--fs-small); }
.danger-link { color: var(--err-ink); border-color: var(--err-line); }
.product-form label.field { margin-top: var(--s-3); }
.product-form input[type=file] { display: block; margin-top: 5px; max-width: 100%; font-size: var(--fs-small); }
.current-image { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
@media (max-width: 640px) {
  .filter-row { margin-left: 0; }
  .product-form input[type=file] { font-size: 16px; }
}
.badge.read-only { background: var(--neutral-bg); color: var(--neutral-ink); border-color: var(--line); margin-left: 4px; }
body.portal-super-admin .badge.read-only { background: var(--brand); color: #fff; border-color: var(--brand); }
.machine-id-preview { font-weight: 700; font-size: var(--fs-lead); background: var(--tint-2) !important; color: var(--brand); max-width: 200px !important; }

/* Finance (Super Admin): compact back-office, numbers right-aligned */
.fin-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 var(--s-3); }
.fin-tabs a { padding: 8px 12px; color: var(--muted); text-decoration: none; font-size: var(--fs-body); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fin-tabs a.active { color: var(--brand); border-bottom-color: var(--accent); font-weight: 600; }
.fin-filters { flex-wrap: wrap; gap: 6px; align-items: center; }
.fin-filters select { max-width: 240px; }
.fin-date { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--muted); }
.fin-date input { height: var(--input-h); border: 1px solid var(--line-brand); border-radius: var(--r-control); padding: 0 6px; font: inherit; }
.fin-h { font-size: var(--fs-body); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: var(--s-4) 0 var(--s-2); }
.fin-range { font-size: var(--fs-small); color: var(--muted); margin: var(--s-2) 0; }
.fin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-2); }
.fin-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 12px; display: flex; flex-direction: column; min-width: 0; }
.fin-stat.alert { border-color: var(--warn-line); background: var(--warn-bg); }
.fin-label { font-size: var(--fs-fine); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fin-value { font-size: 18px; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.fin-health-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-health { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  text-decoration: none; color: var(--ink); font-size: var(--fs-small); }
.fin-health b { font-variant-numeric: tabular-nums; }
.fin-health.paid_vend_unknown b, .fin-health.paid_vend_failed b, .fin-health.payment_failed b { color: var(--err-ink); }
.fin-table td.num, .fin-table th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-table td.mono { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-small); }
.fin-table td.nowrap { white-space: nowrap; }
.fin-table tfoot th { border-top: 2px solid var(--line); text-align: left; }
.fin-table tfoot th.num { text-align: right; }
@media (max-width: 640px) {
  .fin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-filters select, .fin-date { flex: 1 1 140px; max-width: none; }
}

/* ================================================================ MOBILE-FIRST pass (360 / 390 / 430)
   Desktop layout unchanged; everything below only applies to phones / touch. */
.sheet-toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.sheet-open { display: none; }
.access-search { display: block; width: 100%; max-width: 480px; height: var(--input-h); margin: 0 0 8px; padding: 0 10px;
  border: 1px solid var(--line-brand); border-radius: var(--r-control); font: inherit; }
.fin-details summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.fin-details dl { margin-top: 6px; }

@media (max-width: 640px) {
  /* portal identity always readable in the top bar: "DESHENG · Super Admin" / "DESHENG · Operator Assistant" */
  .crumb-brand { display: inline; }
  .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar { justify-content: flex-start; }
  .topbar .machine-chip { margin-left: auto; flex-shrink: 0; }

  /* filter chips and small filter buttons: full touch height */
  .filter-row { width: 100%; }
  .filter-row .button { min-height: 44px; flex: 1 1 0; font-size: 15px; }

  /* Finance filters: a "Filters · …" button opens a single-column sheet */
  .sheet-open { display: flex; width: 100%; justify-content: flex-start; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-toggle:not(:checked) ~ .fin-filters { display: none; }
  .fin-filters { flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; }
  .fin-filters select, .fin-filters .fin-date, .fin-filters button, .fin-filters .button { width: 100%; max-width: none; min-width: 0; flex: 0 0 auto; }
  .fin-date { justify-content: space-between; }
  .fin-date input { flex: 1; min-width: 0; height: 44px; font-size: 16px; }
  .fin-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fin-tabs a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .fin-value { font-size: 17px; text-align: left; }
  /* finance rows: short card, "Details" opens the rest */
  .rt td.fin-more { display: none; }
  .rt td.fin-detail-cell { grid-column: 1 / -1; }
  .fin-details summary { min-height: 44px; display: flex; align-items: center; }

  /* Products / Lanes cards: zone + mapping side by side, Edit Lane full width */
  .lane-cards td[data-label="Zone"], .lane-cards td[data-label="Mapping"] { font-size: 14px; }

  /* Manage Access: one tappable row per machine */
  .access-form .layout-option { min-height: 48px; align-items: center; max-width: none; }
  .access-search { font-size: 16px; height: 44px; max-width: none; }

  /* sticky Save / Confirm areas: stay reachable at the bottom while scrolling long forms */
  .lane-form > .btn-row, .product-form > .btn-row, .access-form > .btn-row, #setup-form > .btn-row, #vend-form .confirm-actions,
  form[action="/vend/confirm"] > .btn-row {
    position: sticky; bottom: 0; z-index: 5; background: var(--surface); margin: 12px -16px -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(17, 24, 39, .06);
  }
  form[action="/vend/confirm"] > .btn-row { margin: 12px -12px 0; }
  /* single-column forms */
  .zone-row { flex-wrap: wrap; }
  .zone-row select { width: 100%; }
  .layout-option { max-width: none; }
}
.lan-banner { background: #7C2D12; color: #fff; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; }

/* Mobile Review Round 2: zone filter, add modes, setup required */
.zone-filter { display: flex; gap: 6px; margin: 0 0 12px; }
.zf-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border: 2px solid var(--line-brand); border-radius: var(--r-control); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; }
.zf-btn .zf-count { font-weight: 400; font-size: var(--fs-small); color: var(--muted); }
.zf-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.zf-btn.active .zf-count { color: rgba(255, 255, 255, .85); }
.zf-btn.cold:not(.active) { border-color: #B9D2EE; color: #1E4E86; }
.zf-btn.warm:not(.active) { border-color: #F2C9A5; color: #8A3F0C; }
.zf-btn.cold.active { background: #1E4E86; border-color: #1E4E86; }
.zf-btn.warm.active { background: #8A3F0C; border-color: #8A3F0C; }
.badge.setup-required { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); font-weight: 700; }
.setup-card { border: 1px solid var(--warn-line); border-left: 4px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-ink);
  border-radius: var(--r-card); padding: 12px 16px; margin: 0 0 12px; }
.setup-card h2 { margin: 0 0 4px; font-size: var(--fs-h3); color: var(--warn-ink); }
.setup-card p { margin: 0; }
.setup-cta { min-height: 28px; padding: 0 10px; font-size: var(--fs-small); }
.mode-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.mode-switch { display: flex; gap: 0; margin: 4px 0 8px; max-width: 480px; }
.mode-switch label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 40px; border: 2px solid var(--line-brand);
  cursor: pointer; font-weight: 600; background: var(--surface); }
.mode-switch label:first-child { border-radius: var(--r-control) 0 0 var(--r-control); }
.mode-switch label:last-child { border-radius: 0 var(--r-control) var(--r-control) 0; border-left: 0; }
#mode-single:checked ~ .mode-switch label[for=mode-single], #mode-batch:checked ~ .mode-switch label[for=mode-batch] { background: var(--brand); border-color: var(--brand); color: #fff; }
#mode-single:focus-visible ~ .mode-switch label[for=mode-single], #mode-batch:focus-visible ~ .mode-switch label[for=mode-batch] { outline: 3px solid var(--focus); }
#mode-single:checked ~ .batch-fields, #mode-batch:checked ~ .single-fields { display: none; }
.range-row { display: flex; gap: 10px; max-width: 480px; }
.range-row label.field { flex: 1 1 0; min-width: 0; }
.action-bar { flex-wrap: wrap; }
.action-bar .form-error { flex: 1 1 100%; margin: 0 0 4px; }
@media (max-width: 640px) {
  .zf-btn, .mode-switch label { min-height: 48px; font-size: 16px; }
  .setup-cta { min-height: 44px; width: 100%; margin-top: 6px; }
}

/* Round 3: product search, optimized images */
.product-search { display: flex; gap: 6px; max-width: 640px; margin: 0 0 8px; }
.product-search input[type=search] { flex: 1 1 auto; min-width: 0; height: var(--input-h); padding: 0 10px; border: 1px solid var(--line-brand);
  border-radius: var(--r-control); font: inherit; }
.search-result { margin: 0 0 8px; }
.product-thumb { object-fit: contain; background: var(--surface-alt); }
.lane-product { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lane-product-name { min-width: 0; overflow-wrap: anywhere; }
.lane-product .product-thumb { flex-shrink: 0; }
.product-picker { display: flex; align-items: flex-end; gap: 10px; max-width: 480px; }
.product-picker label.field { flex: 1 1 auto; min-width: 0; }
.product-picker-preview { flex-shrink: 0; padding-bottom: 2px; }
.image-preview { display: block; max-width: 160px; max-height: 160px; width: auto; height: auto; margin-top: 8px; border: 1px solid var(--line);
  border-radius: var(--r-control); object-fit: contain; }
.current-image img { max-width: 96px; height: auto; }
@media (max-width: 640px) {
  .product-search { max-width: none; }
  .product-search input[type=search] { height: 48px; font-size: 16px; }
  .product-search button, .product-search .button { min-height: 48px; flex: 0 0 auto; }
  .image-preview { max-width: 100%; }
}

/* Round 4: language switch */
.lang-form { margin-top: 10px; }
.lang-label { display: block; font-size: var(--fs-fine); color: var(--muted); margin-bottom: 4px; }
.lang-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.lang-btn { min-height: 32px; padding: 0 8px; font-size: var(--fs-small); background: transparent; border: 1px solid var(--line); color: inherit; border-radius: var(--r-control); }
.lang-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
body.portal-super-admin .sidebar .lang-btn { border-color: rgba(255,255,255,.25); }
body.portal-super-admin .sidebar .lang-btn.active { background: var(--accent); border-color: var(--accent); }
.login-lang { display: flex; justify-content: flex-end; gap: 4px; margin: -8px 0 8px; }
.lang-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: var(--r-control); text-decoration: none; font-weight: 600; }
.lang-link.active { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 640px), (pointer: coarse) {
  .lang-btn, .lang-link { min-height: 44px; font-size: 15px; }
  .lang-btn { flex: 1 1 0; }
}

/* Checkpoint 2B: Platform read-only Customer Products filters */
.filters input[type=search] { flex: 1 1 160px; min-width: 0; height: var(--input-h); padding: 0 10px; border: 1px solid var(--line-brand);
  border-radius: var(--r-control); font: inherit; }
@media (max-width: 640px) {
  .filters select, .filters input[type=search] { min-width: 0; max-width: 100%; }
  .filters input[type=search] { height: 48px; font-size: 16px; }
  .filters button { min-height: 48px; }
}

/* Checkpoint 3: Lane Card quick Quantity / Capacity control (touch targets ≥ 44px) */
.quick-cell .qc-text { display: block; }
.quick-form { margin: 6px 0 0; }
.quick-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; justify-content: flex-end; }
.quick-label { font-size: 12px; color: var(--muted, #667); min-width: 0; margin-right: auto; }
.qbtn { min-width: 44px; min-height: 44px; padding: 0 10px; font-size: 18px; line-height: 1; }
.qbtn.qset, .qbtn.qfill { font-size: 14px; }
.qty-wheel { width: auto; min-width: 64px; height: 44px; font-size: 16px; }
.quick-val { min-width: 28px; text-align: center; font-size: 16px; }
.quick-form button[disabled] { opacity: .35; }
@media (min-width: 900px) { .quick-row { justify-content: flex-start; } .quick-label { margin-right: 4px; } }
@media (max-width: 640px) {
  .quick-cell { text-align: left; }
  .quick-row { justify-content: flex-start; }
  .quick-label { flex: 0 0 100%; margin: 0; }
  .js .qbtn.qset { display: none; }
}

/* Checkpoint 4: System Guide / context help */
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 8px;
  border-radius: 50%; border: 1px solid var(--line-brand); font-size: 16px; font-weight: 700; text-decoration: none; vertical-align: middle; }
.help-cat { margin: 0 0 12px; }
.help-cat h2 { font-size: 16px; margin: 16px 0 6px; }
.help-cat .plain-list li, .help-results li { padding: 6px 0; }
.help-cat a, .help-results a { display: inline-block; min-height: 32px; padding: 6px 0; }
.help-article p { line-height: 1.6; max-width: 70ch; }
@media (max-width: 640px) { .help-link { width: 40px; height: 40px; } .help-article p { font-size: 16px; } }
/* Checkpoint 4: long BM / 中文 status words wrap inside badges instead of widening the page */
@media (max-width: 640px) {
  .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; height: auto; min-height: 20px; }
}

/* Checkpoint 5: analytics bars (pure CSS, no chart library) */
.bar { display: inline-block; vertical-align: middle; width: 120px; max-width: 45%; height: 10px; border-radius: 5px; background: var(--surface-alt, #eef2f1); overflow: hidden; margin-right: 6px; }
.bar > span { display: block; height: 100%; background: var(--brand, #0F4F4A); }
.analytics-switch { margin: 0 0 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .bar { width: 40%; } .analytics-switch .button { min-height: 44px; } }

/* Final consolidation: Dashboard performance cards */
.perf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 16px; }
.perf-card { border: 1px solid var(--line, #dde3e2); border-radius: var(--r-card, 4px); padding: 12px 14px; background: var(--surface, #fff); min-width: 0; }
.perf-title { font-weight: 700; margin-bottom: 6px; }
.perf-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.perf-dl dt { color: var(--muted, #667); } .perf-dl dd { margin: 0; overflow-wrap: anywhere; }
.perf-num { font-weight: 700; }
.perf-range { margin-top: 8px; font-size: 13px; color: var(--muted, #667); }
@media (max-width: 640px) { .perf-cards { grid-template-columns: 1fr; } }

/* Final consolidation: Lane Card bottom sheet with Quantity + Capacity wheels */
.qc-sheet { margin: 2px 0 4px; }
.qc-open { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line-brand, #b9cfcb); border-radius: var(--r-control, 3px); }
.qc-open::-webkit-details-marker { display: none; }
.qc-open b { font-size: 18px; }
.qc-label { font-size: 12px; color: var(--muted, #667); }
.qc-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--line, #dde3e2); border-radius: var(--r-card, 4px); background: var(--surface, #fff); }
.qc-title { font-weight: 700; margin-bottom: 8px; }
.qc-wheels { display: flex; gap: 12px; }
.qc-wheel { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; }
.qc-wheel select { width: 100%; height: 48px; font-size: 18px; }
.qc-panel .btn-row button { min-height: 48px; width: 100%; }
@media (max-width: 640px) {
  .qc-sheet[open] .qc-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,.18); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-width: 100vw; box-sizing: border-box; }
}

/* Password visibility toggle: eye button inside the right edge of every password field */
.pw-wrap { position: relative; display: block; width: 100%; max-width: 100%; }
.pw-wrap input { width: 100%; box-sizing: border-box; padding-right: 52px; min-height: 44px; }
.pw-wrap .pw-eye, .login-card .pw-wrap .pw-eye { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted, #667); display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--r-control, 3px); box-shadow: none; }
.pw-eye:hover { color: var(--brand, #0F4F4A); background: transparent; }
.pw-eye:focus-visible { outline: 2px solid var(--brand, #0F4F4A); outline-offset: -2px; }
.pw-eye .pw-eye-hide { display: none; }
.pw-eye.is-shown .pw-eye-show { display: none; }
.pw-eye.is-shown .pw-eye-hide { display: block; }
.pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; }

/* ---------------------------------------------------------------- Unified login = neutral DESHENG (no area colour yet)
   Colour only. After login: Platform Admin = Navy (body.portal-super-admin), Business Portal = Teal (default). */
body.portal-neutral {
  --brand: #2F3A4A;
  --brand-hover: #1F2733;
  --accent: #4B5A6E;
  --tint: #EEF1F4;
  --tint-2: #F4F6F8;
  --line-brand: #CBD2DB;
  --page: #F4F5F7;
}
body.portal-neutral.login-page .brand-name { color: var(--brand); }
body.portal-neutral.login-page .brand-portal .brand-cn { font-weight: 600; }