/* LUXIAOJUN Warehouse
   Same language as the approved LIFT Club design: Sofia Sans for reading,
   its extra condensed cut for titles, codes and counts. Brand red is the only
   accent. Chalk grey bands hold summaries, firm content sits in ruled rows,
   and the plate colours mark status. Sized for an iPad and a scan gun. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --red: #C20000;
  --red-deep: #970000;
  --ink: #171717;
  --body: #34373A;
  --muted: #5E625F;
  --chalk: #EEF0EE;
  --chalk-2: #E2E5E2;
  --line: #D3D7D4;
  --line-soft: #E6E9E6;
  --bg: #FFFFFF;
  --ok: #1E7A3C;
  --ok-bg: #E4F1E8;
  --warn: #F2B705;
  --warn-ink: #6B5200;
  --warn-bg: #FDF4D3;
  --crit-bg: #FBE7E7;
  --focus: #1B4DB3;
  --f-body: 'Sofia Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Sofia Sans Extra Condensed', 'Sofia Sans', 'Arial Narrow', sans-serif;
  --r: 6px;
  --rail: 96px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
html, body { height: 100%; }
body {
  font-family: var(--f-body); font-size: 16px; line-height: 1.45;
  background: var(--bg); color: var(--body); overscroll-behavior: none;
}
h1, h2, h3, h4 { color: var(--ink); line-height: 1.1; }
h2 { font-family: var(--f-display); font-size: 36px; font-weight: 800; letter-spacing: .005em; }
h3 { font-family: var(--f-body); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
h4 { font-family: var(--f-body); font-size: 16px; font-weight: 700; margin: 14px 0 6px; }
a { color: var(--red); text-decoration: none; }
b, strong { color: var(--ink); font-weight: 700; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
.ic { flex: none; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input, textarea, select {
  font-family: inherit; font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r); padding: 11px 12px;
  width: 100%; background: #fff; min-height: 48px;
}
textarea { min-height: 88px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(27, 77, 179, .25); }
input::placeholder, textarea::placeholder { color: #8A8E8B; }
label { display: block; font-size: 15px; color: var(--ink); font-weight: 600; margin: 12px 0 6px; }

/* frame: bottom bar on phones, side rail from 768px */
#app { display: flex; flex-direction: column; height: 100dvh; }
#main {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(18px + var(--safe-top)) 18px 32px;
  width: 100%;
}
#main > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
body.has-fab #main { padding-bottom: 104px; }

/* splash and PIN gate */
#splash { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70dvh; gap: 16px; text-align: center; }
.logo-img { height: 34px; max-width: 86vw; object-fit: contain; display: block; }
#splash .logo-img { height: 40px; }
.page-head .logo-img { height: 28px; }
.spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#pin-input { min-height: 56px; }

/* page head */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 2px solid var(--ink);
}
.head-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumb { color: var(--muted); font-weight: 700; }

/* segmented control */
.seg-group { display: inline-flex; background: var(--chalk); border-radius: var(--r); padding: 3px; gap: 2px; }
.seg {
  border: 0; background: transparent; padding: 0 16px; min-height: 42px; border-radius: 4px;
  color: var(--body); font-weight: 600; font-size: 15px; transition: background-color .15s, color .15s;
}
.seg:hover { color: var(--ink); }
.seg.active { background: var(--ink); color: #fff; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; border-radius: var(--r); padding: 0 18px; min-height: 48px;
  font-weight: 700; font-size: 16px; line-height: 1.1; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn-primary:active { background: #7A0000; }
.btn-primary:disabled { background: #E3B3B3; border-color: #E3B3B3; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:disabled { color: #9A9E9B; border-color: var(--line-soft); cursor: not-allowed; }
.btn-danger-ghost { background: #fff; color: var(--red); border-color: #E7B8B8; }
.btn-danger-ghost:hover { border-color: var(--red); }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); background: #fff; border-radius: var(--r);
  width: 44px; height: 44px; color: var(--body); flex: none; transition: border-color .15s, color .15s;
}
.btn-icon:hover { border-color: var(--ink); color: var(--ink); }
.row-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-gap.wrap { flex-wrap: wrap; }

/* summary band: big condensed numbers on chalk, ruled apart */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--chalk); margin-bottom: 22px; border-radius: var(--r); overflow: hidden;
}
.stat { padding: 18px 20px 16px; border-left: 1px solid var(--chalk-2); }
.stat:first-child { border-left: 0; }
.stat-n { font-family: var(--f-display); font-size: 44px; font-weight: 800; line-height: .9; color: var(--ink); }
.stat-l { font-size: 15px; margin-top: 6px; color: var(--muted); }

/* sections: ruled, not boxed */
.card { background: #fff; border-top: 2px solid var(--ink); padding: 16px 0 6px; margin-bottom: 22px; }
.card > h3:first-child { font-family: var(--f-display); font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.card > summary h3, .card > summary h4 { font-family: var(--f-display); font-size: 26px; font-weight: 800; }
/* a section right under the page head shares its rule */
.page-head + .card, .page-head + .two-col > .card { border-top-color: transparent; padding-top: 0; }

/* The store theme's CSS collapses elements inside <details>; undo that for the
   app's own dropdowns (screen only, so label printing still hides the app). */
@media screen {
  #app details, #app details * { visibility: visible !important; }
}

/* collapsible section */
details.collapse > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; min-height: 44px;
}
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary h3 { margin-bottom: 0; }
.collapse-arrow { color: var(--muted); transition: transform .2s; flex: none; display: inline-flex; }
details.collapse[open] .collapse-arrow { transform: rotate(180deg); }
details.collapse[open] > summary { margin-bottom: 10px; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.center-col { display: flex; flex-direction: column; align-items: center; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 14px; font-weight: 700; color: var(--muted); padding: 8px 10px; border-bottom: 1.5px solid var(--ink); }
td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink); vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
tr.warn td { background: var(--warn-bg); }
tr.warn td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
tr.crit td { background: var(--crit-bg); }
tr.crit td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.table-scroll { overflow-x: auto; }

/* tiles (pallets, racks) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pallet-card, .rack-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  width: 100%; min-height: 104px; padding: 14px 16px 14px 18px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
  position: relative; transition: border-color .15s, background-color .15s;
}
.pallet-card::before, .rack-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--ink); border-radius: var(--r) 0 0 var(--r);
}
.pallet-card::before { background: var(--red); }
.pallet-card:hover, .rack-card:hover { border-color: var(--ink); }
.pallet-card:active, .rack-card:active { background: var(--chalk); }
.rack-card.empty { background: var(--chalk); border-color: var(--chalk); }
.rack-card.empty::before { background: var(--line); }
.rack-card.empty .pc-code { color: var(--muted); }
.pc-code { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--ink); }
.pc-name { color: var(--body); font-size: 15px; }
.pc-meta { display: flex; flex-direction: column; font-size: 15px; line-height: 1.3; margin-top: auto; padding-top: 8px; color: var(--muted); }
.pc-meta b { font-size: 17px; }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-on_pallet { background: var(--warn-bg); color: var(--warn-ink); }
.chip-on_pallet::before { background: var(--warn); }
.chip-unpacked { background: var(--ok-bg); color: var(--ok); }
.chip-shipped { background: var(--chalk); color: var(--muted); }

/* pallet detail */
.pd-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.qr-slot svg { display: block; }
.qr-med svg { width: 118px; height: 118px; }
.qr-big svg { width: 200px; height: 200px; }
.box-row {
  border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer; transition: border-color .15s;
}
.box-row:hover { border-color: var(--ink); }
.box-items { font-size: 15px; margin-top: 6px; color: var(--body); }
.box-photo { max-width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.label-text { background: var(--chalk); border-radius: var(--r); padding: 12px; white-space: pre-wrap; font-size: 15px; color: var(--ink); }

/* box form */
.bf-photo { margin-bottom: 6px; }
.photo-btn { display: inline-flex; align-items: center; gap: 8px; }
#bf-preview img { max-width: 100%; max-height: 220px; border-radius: var(--r); margin-top: 8px; }
.bf-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bf-item-name { flex: 1; color: var(--ink); font-size: 15px; }
.bf-qty { width: 80px; text-align: center; }

/* variant picker */
.vpick { position: relative; margin: 8px 0; }
.vpick-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r);
  max-height: 280px; overflow-y: auto;
}
.vpick-item { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 15px; cursor: pointer; }
.vpick-item:hover, .vpick-item:active { background: var(--chalk); }
.hidden { display: none !important; }

/* stepper */
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.step-btn { width: 44px; height: 44px; border-radius: var(--r); border: 1.5px solid var(--line); background: #fff; font-size: 22px; color: var(--ink); }
.step-val { min-width: 32px; text-align: center; font-weight: 700; color: var(--ink); font-size: 18px; }

/* count mode */
.count-status {
  background: var(--chalk); border-radius: var(--r); padding: 16px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; border-left: 5px solid var(--line);
}
.count-status.armed { background: var(--ok-bg); border-left-color: var(--ok); }
.cs-rack { font-size: 18px; color: var(--ink); }
.count-help { margin: 12px 0 18px 22px; line-height: 1.9; color: var(--body); }
.count-target { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.count-target .hint { font-size: 15px; }

/* the attempt board: one loud element, the live tally */
.board {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'where where' 'n l' 'n last';
  column-gap: 22px; align-items: end;
  background: var(--chalk); border-left: 6px solid var(--red); border-radius: var(--r);
  padding: 16px 22px 18px; margin-bottom: 18px;
}
.board-where { grid-area: where; font-size: 17px; color: var(--body); margin-bottom: 2px; }
.board-n {
  grid-area: n; font-family: var(--f-display); font-weight: 800; font-size: 148px; line-height: .8;
  color: var(--ink); font-variant-numeric: tabular-nums; padding-top: 10px;
}
.board-n.bump { animation: bump .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes bump { 0% { color: var(--red); transform: scale(1.08); } 100% { color: var(--ink); transform: none; } }
.board-l { grid-area: l; font-family: var(--f-display); font-size: 30px; font-weight: 700; color: var(--ink); align-self: end; }
.board-last { grid-area: last; font-size: 15px; color: var(--muted); padding-bottom: 6px; max-width: 60ch; }
.board-last b { font-weight: 600; }
@media (max-width: 640px) {
  .board { grid-template-columns: 1fr; grid-template-areas: 'where' 'n' 'l' 'last'; padding: 14px 16px 16px; }
  .board-n { font-size: 112px; }
  .board-l { font-size: 26px; margin-top: 4px; }
}

/* layout editor */
.ly-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
.ly-zoom { display: inline-flex; gap: 8px; align-items: center; }
.ly-scroll { overflow: auto; border: 1.5px solid var(--line); border-radius: var(--r); background: #FAFBFA; }
.ly-canvas {
  position: relative; width: 1200px; height: 800px; transform-origin: 0 0;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 50px 50px;
}
.ly-item {
  position: absolute; border-radius: 4px; padding: 6px 8px; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.ly-pallet { background: var(--warn-bg); border: 2px solid var(--warn); }
.ly-rack { background: #fff; border: 2px solid var(--ink); }
.ly-rack.warn { background: var(--warn-bg); border-color: var(--warn); }
.ly-rack.crit { background: var(--crit-bg); border-color: var(--red); }
.ly-code { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--ink); }
.ly-meta { font-size: 12px; color: var(--muted); }
.ly-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); opacity: 0; }
.ly-tray { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tray-item { border: 1.5px dashed var(--muted); background: #fff; border-radius: var(--r); padding: 8px 12px; font-weight: 700; color: var(--ink); }
.ly-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 14px; flex-wrap: wrap; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.lg-pallet { background: var(--warn-bg); border: 1.5px solid var(--warn); }
.lg-rack { background: #fff; border: 1.5px solid var(--ink); }
.lg-warn { background: var(--warn-bg); border: 1.5px solid var(--warn); }
.lg-crit { background: var(--crit-bg); border: 1.5px solid var(--red); }
.ly-canvas.editing .ly-resize { opacity: .85; }

/* products: category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cat-tile {
  border: 1.5px solid var(--line); background: #fff; border-radius: var(--r);
  padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 176px; justify-content: center; transition: border-color .15s;
}
.cat-tile:hover { border-color: var(--ink); }
.cat-tile:active { background: var(--chalk); }
.cat-tile img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r); background: var(--chalk); }
.cat-name { font-family: var(--f-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--ink); }
.cat-count { font-size: 15px; color: var(--muted); }

/* products: list */
.prod-tools { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.search { max-width: 460px; }
.check { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; color: var(--ink); font-weight: 500; margin: 4px 0; min-height: 44px; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--red); flex: none; }
details.prod { border: 1.5px solid var(--line); border-radius: var(--r); margin-bottom: 8px; background: #fff; }
details.prod[open] { border-color: var(--ink); }
details.prod summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; min-height: 64px; }
details.prod summary::-webkit-details-marker { display: none; }
.prod-img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--chalk); flex: none; }
.prod-img-empty { display: inline-block; }
.prod-title { flex: 1; color: var(--ink); font-weight: 600; font-size: 15px; }
.prod-nums { font-size: 14px; color: var(--muted); text-align: right; flex: none; }
details.prod > .table-scroll { padding: 0 14px 12px; }

/* labels view */
.label-checks { max-height: 320px; overflow-y: auto; margin-bottom: 12px; display: flex; flex-direction: column; }

/* activity */
.act-row { display: flex; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; flex-wrap: wrap; }
.act-kind { font-weight: 700; color: var(--ink); flex: none; }
.act-what { flex: 1; min-width: 140px; color: var(--body); }
.act-item { color: var(--muted); }
.act-qty { flex: none; min-width: 3ch; text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.act-when { color: var(--muted); font-size: 14px; flex: none; font-variant-numeric: tabular-nums; }

/* navigation */
#tabs { display: flex; background: #fff; border-top: 1px solid var(--line); padding-bottom: var(--safe-bot); flex: none; }
.tab {
  flex: 1; border: 0; background: none; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 60px; padding: 8px 2px 6px; color: var(--muted); font-size: 13px; font-weight: 600;
  transition: color .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--red); }
.tab.active::after { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; background: var(--red); }
.tab-extra { display: none; }

@media (min-width: 768px) {
  #app { flex-direction: row; }
  #tabs {
    order: -1; flex-direction: column; justify-content: flex-start; gap: 4px;
    width: var(--rail); border-top: 0; border-right: 1px solid var(--line);
    padding: calc(14px + var(--safe-top)) 8px 14px;
  }
  .tab { flex: none; min-height: 72px; border-radius: var(--r); }
  .tab:hover { background: var(--chalk); }
  .tab.active { background: var(--chalk); }
  .tab.active::after { top: 18%; bottom: 18%; left: -8px; right: auto; width: 4px; height: auto; }
  .tab-extra { display: flex; }
  .tab-more { display: none; }
  #main { padding: calc(22px + var(--safe-top)) 28px 36px; }
}

/* More sheet (phones) */
.sheet-list { display: flex; flex-direction: column; }
.sheet-item {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 6px;
  border: 0; border-bottom: 1px solid var(--line-soft); background: none; font-size: 17px; font-weight: 600; color: var(--ink); text-align: left;
}
.sheet-item.active { color: var(--red); }

/* modal. Modals, toasts, and the scan button sit above the app overlay even
   when the app is embedded in the store theme at a very high z-index. */
.wh-modal-backdrop {
  position: fixed; inset: 0; background: rgba(23, 23, 23, .5); z-index: 2147483200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wh-modal {
  background: #fff; border-radius: 8px; width: 100%; max-width: 580px;
  max-height: 88dvh; display: flex; flex-direction: column; border-top: 4px solid var(--red);
}
.wh-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.wh-modal-head h3 { font-family: var(--f-display); font-size: 28px; font-weight: 800; margin: 0; }
.wh-modal-body { padding: 4px 18px 18px; overflow-y: auto; }
.wh-modal-body p { margin-bottom: 10px; }
.wh-modal-foot { padding: 12px 18px 16px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line-soft); }
.wh-camera-modal { max-width: 480px; }
#cam-reader { border-radius: var(--r); overflow: hidden; }
@media (max-width: 480px) {
  .wh-modal-backdrop { align-items: flex-end; padding: 0; }
  .wh-modal { border-radius: 12px 12px 0 0; max-height: 92dvh; padding-bottom: var(--safe-bot); }
}

/* toasts */
#toasts { position: fixed; top: calc(12px + var(--safe-top)); left: 50%; transform: translateX(-50%); z-index: 2147483300; display: flex; flex-direction: column; gap: 8px; width: min(520px, 92vw); }
.toast {
  padding: 14px 16px; border-radius: var(--r); color: #fff; font-weight: 600; font-size: 15px;
  opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; border-left: 5px solid var(--ok);
}
.toast.show { opacity: 1; transform: none; }
.toast.ok { background: var(--ink); }
.toast.err { background: var(--red); border-left-color: #fff; }

/* global camera scan button (Pallets screens) */
#global-scan {
  position: fixed; right: 18px; bottom: calc(76px + var(--safe-bot)); z-index: 2147483100;
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 0 22px; min-height: 56px;
  background: var(--red); color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(23, 23, 23, .28); transition: background-color .15s;
}
#global-scan:hover { background: var(--red-deep); }
#global-scan:active { background: #7A0000; }
@media (min-width: 768px) { #global-scan { bottom: calc(24px + var(--safe-bot)); right: 28px; } }

.hint { color: var(--muted); font-size: 14px; font-weight: 400; }
h3 .hint, h4 .hint { font-family: var(--f-body); font-size: 14px; font-weight: 500; }
.center { text-align: center; margin-top: 16px; }
.error-text { color: var(--red); font-weight: 600; }

/* phones: stack heads, keep tiles two across */
@media (max-width: 640px) {
  h2 { font-size: 32px; }
  .page-head { align-items: flex-start; }
  .head-right { width: 100%; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--chalk-2); }
  .stat-n { font-size: 38px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .pc-code { font-size: 24px; }
  .count-status .seg-group, .count-target .seg-group { width: 100%; }
  .count-status .seg-group .seg, .count-target .seg-group .seg { flex: 1; padding: 0 8px; white-space: nowrap; }
}

/* Store theme resets. The live page runs inside the luxiaojun.com theme,
   whose button and form rules would otherwise set Inter, all caps and
   letter spacing, and whose body font would reach dialogs and toasts. */
.wh-modal-backdrop, #toasts, #global-scan { font-family: var(--f-body); }
#app .btn, .wh-modal .btn, #global-scan,
#app input, #app textarea, #app select, .wh-modal input, .wh-modal textarea, .wh-modal select {
  font-family: var(--f-body); text-transform: none; letter-spacing: normal;
}
#app .btn, .wh-modal .btn { display: inline-flex; }
#app .count-help { list-style: decimal outside; margin: 12px 0 18px; padding-left: 26px; }
#app a, .wh-modal a { text-decoration: none; }
#app a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; }
}

/* print */
#print-area { display: none; }
@media print {
  @page { size: letter; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff; }
  /* Only the label sheet prints, even when the app is embedded in the store theme. */
  body * { visibility: hidden !important; }
  #print-area, #print-area * { visibility: visible !important; }
  #app, #toasts, .wh-modal-backdrop, #global-scan { display: none !important; }
  #print-area { display: grid !important; position: absolute; left: 0; top: 0; width: 8.5in; grid-template-columns: 1fr 1fr; gap: 24px; padding: 10mm; }
  .plabel { border: 1px dashed #999; border-radius: 8px; padding: 10mm 6mm; text-align: center; break-inside: avoid; }
  .plabel .qr-slot svg { width: 42mm; height: 42mm; }
  .plabel-code { font-family: var(--f-display); font-weight: 800; font-size: 22pt; margin-top: 4mm; color: #000; }
  .plabel-sub { font-size: 11pt; color: #333; margin-top: 1mm; }
  .plabel-note { font-size: 11pt; color: #000; margin-top: 3mm; white-space: pre-wrap; text-align: left; }

  /* FBA-style sticker sheet: Avery 5160, 3 columns x 10 rows on US Letter.
     The --fba-* variables come from the alignment settings in the Labels tab,
     so the grid can be nudged and resized to match a specific printer. */
  #print-area.fba { display: block !important; padding: 0; position: absolute; left: 0; top: 0; }
  .fba-sheet {
    width: 8.5in; height: auto; box-sizing: border-box;
    padding-top: calc(0.5in + var(--fba-down, 0mm));
    padding-left: calc(0.1875in + var(--fba-right, 0mm));
    padding-right: 0; padding-bottom: 0;
    page-break-after: always;
    display: grid;
    grid-template-columns: repeat(3, var(--fba-w, 2.625in));
    grid-auto-rows: var(--fba-h, 1in);
    column-gap: var(--fba-gap, 0.125in);
    row-gap: var(--fba-rowgap, 0);
  }
  .fba-cell {
    width: 100%; height: 100%; box-sizing: border-box; border: none;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  #print-area.fba.guides .fba-cell { border: 0.75pt solid #aaa; border-radius: 10px; }
  .fba-cell svg { max-width: 94%; max-height: 88%; }
  .cal-cell { font-family: var(--f-display); font-weight: 800; font-size: 15pt; color: #000; }
}