:root {
  --ground: #F4F6F7;
  --surface: #FFFFFF;
  --surface-2: #EDF1F2;
  --surface-3: #E4EAEC;
  --ink: #10191B;
  --ink-2: #3B4A4E;
  --muted: #6E8085;
  --line: #DDE4E6;
  --line-strong: #C3CED1;
  --accent: #0E7078;
  --accent-soft: #DBEEEF;
  --accent-ink: #0A555C;
  --ok: #17724A;
  --ok-soft: #DCEFE4;
  --warn: #8F5406;
  --warn-soft: #F9EAD2;
  --danger: #A5281E;
  --danger-soft: #F9DFDC;
  --paper: #FFFFFF;
  --paper-ink: #101010;
  --paper-line: #111111;
  --shadow-1: 0 1px 2px rgba(16, 25, 27, .07);
  --shadow-2: 0 2px 6px rgba(16, 25, 27, .06), 0 18px 40px -20px rgba(16, 25, 27, .28);
  --sans: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ground: #0C1315;
    --surface: #141D20;
    --surface-2: #1A2529;
    --surface-3: #223034;
    --ink: #E3ECEE;
    --ink-2: #B0C0C4;
    --muted: #7D9096;
    --line: #233034;
    --line-strong: #33454A;
    --accent: #3FB6BD;
    --accent-soft: #103135;
    --accent-ink: #7FD6DB;
    --ok: #4CBF8B;
    --ok-soft: #0E2B21;
    --warn: #DFA34A;
    --warn-soft: #32250F;
    --danger: #EF8275;
    --danger-soft: #3A1A17;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  --ground: #0C1315;
  --surface: #141D20;
  --surface-2: #1A2529;
  --surface-3: #223034;
  --ink: #E3ECEE;
  --ink-2: #B0C0C4;
  --muted: #7D9096;
  --line: #233034;
  --line-strong: #33454A;
  --accent: #3FB6BD;
  --accent-soft: #103135;
  --accent-ink: #7FD6DB;
  --ok: #4CBF8B;
  --ok-soft: #0E2B21;
  --warn: #DFA34A;
  --warn-soft: #32250F;
  --danger: #EF8275;
  --danger-soft: #3A1A17;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px -20px rgba(0, 0, 0, .8);
}

* {
  box-sizing: border-box
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }
}

.app {
  display: grid;
  grid-template-columns: 198px 1fr;
  min-height: 100vh
}

.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 8px 12px
}

.brand b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em
}

.brand span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase
}

.railgroup {
  cursor: pointer;
  user-select: none
}

.railgroup::before {
  content: "▾ ";
  opacity: .5
}

.railgroup.closed::before {
  content: "▸ "
}

.railgroup {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 8px 4px
}

.navbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 6px 9px;
  border-radius: 5px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13px
}

.navbtn:hover {
  background: var(--surface-2);
  color: var(--ink)
}

.navbtn[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600
}

.navbtn .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 500
}

.navbtn[aria-current="true"] .n {
  color: var(--accent-ink)
}

.navbtn .n.alarm {
  color: var(--danger);
  font-weight: 600
}

.railfoot {
  margin-top: auto;
  padding: 10px 9px 2px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6
}

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  height: 54px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20
}

.topbar h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600
}

.topbar .sub {
  color: var(--muted);
  font-size: 12px
}

.syncs {
  margin-left: auto;
  display: flex;
  gap: 14px;
  align-items: center
}

.sync {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-2)
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent)
}

.dot.lag {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent)
}

.sync .t {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted)
}

.view {
  padding: 20px 22px 60px;
  display: none;
  flex-direction: column;
  gap: 16px
}

.view.on {
  display: flex
}

.main {
  min-width: 0
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px
}

.phead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap
}

.phead h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600
}

.phead .hint {
  color: var(--muted);
  font-size: 11.5px;
  margin-left: auto;
  text-align: right
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px
}

.tiles.six {
  grid-template-columns: repeat(6, 1fr)
}

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 14px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0
}

.tile .k {
  font-size: 11.5px;
  color: var(--muted)
}

.tile .v {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tile .f {
  font-size: 11.5px;
  color: var(--ink-2)
}

.tile.alert {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line))
}

.tile.alert .v {
  color: var(--danger)
}

.tile.warn {
  border-color: color-mix(in srgb, var(--warn) 50%, var(--line))
}

.tile.warn .v {
  color: var(--warn)
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px
}

.scroll {
  overflow-x: auto
}

th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--mono);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--surface)
}

td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle
}

tbody tr:last-child td {
  border-bottom: 0
}

tbody tr.pick {
  cursor: pointer
}

tbody tr.pick:hover td {
  background: var(--surface-2)
}

tr.sum td {
  font-weight: 600;
  background: var(--surface-2)
}

tr.sub td {
  background: var(--surface-2);
  padding: 0
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right
}

.dim {
  color: var(--muted)
}

.wrap {
  white-space: normal
}

.stripe {
  width: 3px;
  padding: 0 !important;
  border-bottom: 1px solid var(--line)
}

.tail {
  font-family: var(--mono);
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .04em
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1.5px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap
}

.pill.n {
  background: var(--surface-3);
  color: var(--ink-2)
}

.pill.a {
  background: var(--accent-soft);
  color: var(--accent-ink)
}

.pill.g {
  background: var(--ok-soft);
  color: var(--ok)
}

.pill.w {
  background: var(--warn-soft);
  color: var(--warn)
}

.pill.d {
  background: var(--danger-soft);
  color: var(--danger)
}

.plat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px
}

.plat i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex: none
}

.plat.tb i {
  background: #E8562B
}

.plat.dy i {
  background: #1F1F22
}

.plat.pdd i {
  background: #C93C2E
}

.plat.ahs i {
  background: #1BA784
}

:root[data-theme="dark"] .plat.dy i {
  background: #5A5A63
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .plat.dy i {
    background: #5A5A63
  }
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center
}

.chip {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 20px;
  padding: 3.5px 11px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

:root[data-theme="dark"] .chip[aria-pressed="true"] {
  color: #08201F
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .chip[aria-pressed="true"] {
    color: #08201F
  }
}

.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink-2);
  white-space: nowrap
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.btn.pri {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600
}

:root[data-theme="dark"] .btn.pri {
  color: #06201F
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .btn.pri {
    color: #06201F
  }
}

.btn.dng {
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
  color: var(--danger)
}

.btn.sm {
  padding: 3px 9px;
  font-size: 11.5px
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.note {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0
}

.note b {
  color: var(--ink-2)
}

.pad {
  padding: 14px 16px
}

input.in,
select.in {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 6px 9px;
  background: var(--surface);
  font-size: 12.5px
}

input.in:focus,
select.in:focus {
  border-color: var(--accent);
  outline: none
}

input.in[disabled] {
  background: var(--surface-2);
  color: var(--muted)
}

.aging {
  padding: 14px
}

.agebar {
  display: flex;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  gap: 2px
}

.agebar span {
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  min-width: 28px
}

:root[data-theme="dark"] .agebar span {
  color: #07181A
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .agebar span {
    color: #07181A
  }
}

.agekey {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-2)
}

.agekey b {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px
}

.desk {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items: start
}

.pack {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  align-items: start
}

#printres:empty {
  display: none
}

.queue {
  max-height: 620px;
  overflow: auto
}

.qrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 9px 13px;
  cursor: pointer
}

.qrow:hover {
  background: var(--surface-2)
}

.qrow[aria-current="true"] {
  background: var(--accent-soft)
}

.qrow .body {
  min-width: 0;
  flex: 1
}

.qrow .ttl {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.qrow .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px
}

.steps {
  display: flex;
  border-bottom: 1px solid var(--line)
}

.step {
  flex: 1;
  padding: 9px 12px;
  font-size: 11.5px;
  color: var(--muted);
  border-right: 1px solid var(--line);
  display: flex;
  gap: 7px;
  align-items: center
}

.step:last-child {
  border-right: 0
}

.step b {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  flex: none
}

.step.on {
  color: var(--ink);
  font-weight: 600;
  background: var(--accent-soft)
}

.step.on b {
  background: var(--accent);
  color: #fff
}

.step.did b {
  background: var(--ok);
  color: #fff
}

.work {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.need {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 26px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-radius: 6px
}

.need div {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.need .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}

.need .v {
  font-size: 12.5px;
  font-weight: 500
}

.rec {
  border: 1.5px solid var(--accent);
  border-radius: 7px;
  padding: 13px 15px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap
}

.rec .big {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--accent-ink)
}

.rec .why {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px
}

.rec .facts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 5px
}

.rec .acts {
  margin-left: auto;
  display: flex;
  gap: 8px
}

.scanin {
  display: flex;
  gap: 9px
}

.scanin input {
  flex: 1;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .05em;
  padding: 9px 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  min-width: 0
}

.scanin input:focus {
  border-color: var(--accent);
  outline: none
}

.result {
  border-radius: 6px;
  padding: 12px 15px;
  border: 1px solid
}

.result.ok {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  color: var(--ok)
}

.result.bad {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger)
}

.result.info {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent-ink)
}

.result h3 {
  margin: 0 0 4px;
  font-size: 13.5px
}

.result p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2)
}

.waybill {
  background: var(--paper);
  color: var(--paper-ink);
  width: 340px;
  border: 1.5px solid var(--paper-line);
  border-radius: 3px;
  font-family: var(--mono);
  box-shadow: var(--shadow-2)
}

.wb-top {
  display: flex;
  align-items: center;
  border-bottom: 1.5px solid var(--paper-line);
  padding: 7px 10px;
  gap: 8px
}

.wb-top b {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .06em
}

.wb-top span {
  margin-left: auto;
  font-size: 10px
}

.wb-code {
  padding: 8px 10px 4px;
  border-bottom: 1.5px solid var(--paper-line);
  text-align: center
}

.bars {
  height: 34px;
  display: flex;
  gap: 1.4px;
  justify-content: center;
  margin-bottom: 4px
}

.bars i {
  background: var(--paper-ink);
  display: block
}

.wb-code .no {
  font-size: 14px;
  letter-spacing: .13em;
  font-weight: 600
}

.wb-body {
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.65;
  border-bottom: 1.5px solid var(--paper-line)
}

.wb-body .lbl {
  font-size: 9px;
  letter-spacing: .1em;
  opacity: .6
}

.wb-pick {
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid var(--paper-line);
  background: #F0F0F0
}

.wb-pick .k {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.35;
  opacity: .75
}

.wb-pick .t {
  margin-left: auto;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1
}

.wb-foot {
  padding: 6px 10px;
  font-size: 9.5px;
  opacity: .65;
  display: flex;
  justify-content: space-between
}

.wbwrap {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start
}

.wbnote {
  flex: 1;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 16px;
  padding: 14px 16px
}

.f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0
}

.f.w2 {
  grid-column: span 2
}

.f label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}

.f input,
.f select {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 6px 9px;
  background: var(--surface);
  font-size: 12.5px;
  width: 100%
}

.f input:focus,
.f select:focus {
  border-color: var(--accent);
  outline: none
}

.f input[disabled] {
  background: var(--surface-2);
  color: var(--muted)
}

.qcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 7px
}

.qi {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 12px;
  cursor: pointer;
  background: var(--surface);
  text-align: left
}

.qi:hover {
  border-color: var(--line-strong)
}

.qi[data-r="ok"] {
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: var(--ok-soft);
  color: var(--ok)
}

.qi[data-r="bad"] {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: var(--danger-soft);
  color: var(--danger)
}

.qi i {
  font-style: normal;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600
}

.formfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap
}

.lookup {
  display: flex;
  gap: 9px;
  padding: 16px 18px
}

.lookup input {
  flex: 1;
  font-family: var(--mono);
  font-size: 16px;
  padding: 9px 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  min-width: 0
}

.lookup input:focus {
  border-color: var(--accent);
  outline: none
}

.card {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 18px 18px
}

.kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 11px 16px
}

.kv .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}

.kv .v {
  font-size: 12.5px;
  margin-top: 1px
}

.warr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 6px;
  background: var(--ok-soft);
  color: var(--ok)
}

.warr.out {
  background: var(--surface-2);
  color: var(--ink-2)
}

.warr .d {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1
}

.pool td .bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  width: 90px;
  overflow: hidden
}

.pool td .bar i {
  display: block;
  height: 100%;
  background: var(--accent)
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start
}

.pl td.ind {
  padding-left: 26px
}

.pl td.tot {
  font-weight: 600;
  border-top: 1.5px solid var(--line-strong)
}

.dayc {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 120px;
  padding: 14px 16px 6px
}

.dayc .d {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 2px;
  height: 100%;
  min-width: 0
}

.dayc .d i {
  display: block;
  border-radius: 2px 2px 0 0
}

.dayc .d i.tb {
  background: #E8562B
}

.dayc .d i.dy {
  background: #5A5A63
}

.dayc .d i.pdd {
  background: #C93C2E
}

.daylab {
  display: flex;
  gap: 5px;
  padding: 0 16px 12px
}

.daylab span {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted)
}

.legend {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 0 16px 12px
}

.legend b {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px
}

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 16, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s;
  z-index: 40
}

.scrim.on {
  opacity: 1;
  pointer-events: auto
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(490px, 94vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transform: translateX(100%);
  transition: transform .2s cubic-bezier(.3, .8, .4, 1);
  z-index: 41;
  display: flex;
  flex-direction: column
}

.drawer.on {
  transform: none
}

.dhead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line)
}

.dhead .code {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .03em
}

.dhead .m {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px
}

.dhead button {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: var(--muted);
  flex: none
}

.dbody {
  overflow: auto;
  padding: 16px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.money {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 12px 14px
}

.money .k {
  font-size: 10.5px;
  color: var(--muted)
}

.money .v {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px
}

.sect {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 9px
}

.tl {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px
}

.tl li {
  position: relative
}

.tl li::before {
  content: "";
  position: absolute;
  left: -20.5px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  border: 2px solid var(--surface)
}

.tl li.now::before {
  background: var(--accent)
}

.tl .w {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted)
}

.tl .e {
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 1px
}

.tl .d {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px
}

.badlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

@media (max-width:1180px) {
  .app {
    grid-template-columns: 1fr
  }

  .rail {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }

  .brand {
    padding: 4px 10px
  }

  .railgroup,
  .railfoot {
    display: none
  }

  .navbtn {
    width: auto
  }

  .tiles,
  .tiles.six {
    grid-template-columns: repeat(2, 1fr)
  }

  .desk,
  .two,
  .pack {
    grid-template-columns: 1fr
  }

  .form {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ================= v1.7：当前账号 · 提示条 · 锁定构成条 · 权限矩阵 · 供应商端 ================= */
.me {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  margin-left: 14px;
  white-space: nowrap
}

.me select {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 4px 8px;
  background: var(--surface);
  font-size: 12px;
  color: var(--ink);
  max-width: 250px
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 10px);
  background: var(--ink);
  color: var(--surface);
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s, transform .16s;
  z-index: 60;
  max-width: min(560px, 90vw)
}

.toast.on {
  opacity: 1;
  transform: translate(-50%, 0)
}

.toast.bad {
  background: var(--danger);
  color: var(--surface)
}

.lkbar {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 2px;
  overflow: hidden
}

.lkbar i {
  display: block;
  min-width: 4px
}

.lkbar .b {
  background: var(--accent-ink)
}

.lkbar .l {
  background: var(--warn)
}

.lkbar .a {
  background: var(--ok)
}

.lkbar .g,
.lklegend b.gap {
  background: repeating-linear-gradient(135deg, var(--danger) 0 3px, var(--danger-soft) 3px 6px)
}

.lklegend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 10px 14px;
  border-top: 1px solid var(--line)
}

.lklegend b {
  display: inline-block;
  width: 12px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle
}

.matrix th,
.matrix td {
  text-align: center
}

.matrix th:first-child,
.matrix td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 230px
}

.matrix tr.grp td {
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 5px 10px
}

.matrix input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle
}

.matrix input:disabled {
  cursor: not-allowed;
  opacity: .4
}

/* 供应商端：手机网页预览 */
.supmode .app {
  display: none
}

.supwrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 40px;
  background: var(--ground)
}

.supbar {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-2)
}

.phone {
  width: min(390px, 100%);
  height: min(780px, calc(100vh - 120px));
  min-height: 560px;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.ph-top {
  padding: 22px 18px 16px;
  background: var(--accent);
  color: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 2px
}

.ph-brand {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85
}

.ph-name {
  font-size: 19px;
  font-weight: 600
}

.ph-sub {
  font-size: 11.5px;
  opacity: .9
}

.ph-body {
  flex: 1;
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ph-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: var(--surface)
}

.ph-tabs button {
  border: 0;
  background: none;
  padding: 12px 4px 14px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer
}

.ph-tabs button[aria-pressed="true"] {
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--accent)
}

.scard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px
}

.scard .btn {
  align-self: flex-start;
  margin-top: 3px
}

.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px
}

.sc-meta {
  font-size: 11.5px;
  color: var(--muted)
}

.sc-big {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em
}

.sc-bad {
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 6px;
  padding: 6px 9px
}

.sc-sect {
  margin: 4px 2px 0
}

.sform {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.sform label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted)
}

.sform input,
.sform select {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
  width: 100%
}

.sform .btn {
  padding: 9px 12px;
  font-size: 13px
}

.sc-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px
}

/* v2.6 入库打标：标签按毫米排版，屏幕预览和打印同一套尺寸；标签纸永远是白底黑字 */
.lbltpl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start
}

@media (max-width: 900px) {
  .lbltpl {
    grid-template-columns: minmax(0, 1fr)
  }
}

.lblgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  overflow-x: auto
}

.lbl {
  box-sizing: border-box;
  flex: none;
  background: #fff;
  color: #111;
  border: 1px solid #c9d1d8;
  border-radius: 1.2mm;
  padding: 1.4mm 2mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5mm;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12)
}

.lbl .lb-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5mm;
  line-height: 1.15;
  min-width: 0
}

.lbl .lb-top b {
  font-size: 3.4mm;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0
}

.lbl .lb-top span {
  font-size: 2.5mm;
  white-space: nowrap;
  flex: none
}

.lbl .bc {
  display: block;
  width: 100%;
  height: 6.6mm
}

.lbl .lb-imei span,
.lbl .lb-code span {
  display: block;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 2.3mm;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lbl.s50x30 .bc {
  height: 4.6mm
}

.lbl.s50x30 .lb-top b {
  font-size: 3mm
}

.lbl.s40x30 .bc {
  height: 6mm
}

.lbl.s40x30 .lb-top b {
  font-size: 2.8mm
}

.lbl.s40x30 .lb-top span,
.lbl.s40x30 .lb-imei span,
.lbl.s40x30 .lb-code span {
  font-size: 2mm
}

#lblprint {
  display: none
}

@media print {
  body.printing>*:not(#lblprint) {
    display: none !important
  }

  body.printing #lblprint {
    display: block !important
  }

  body.printing #lblprint .lbl {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always
  }
}

.f label.lblck {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer
}

.f label.lblck input {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  box-shadow: none
}

/* ===== 登录 · 改密码 ===== */
.login{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--ground);padding:16px}
.loginbox{width:min(360px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 24px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.loginbox .brand{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}.loginbox .brand b{font-size:20px;letter-spacing:.02em}.loginbox .brand span{color:var(--muted);font-size:12px}
.loginbox label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.loginbox input{font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink)}
.loginbox input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.loginbox .err{min-height:16px;color:var(--danger);font-size:12.5px}
.loginbox .btn{padding:9px 12px;font-size:14px}
.loginbox .note{margin:0}
.me{display:flex;align-items:center;gap:8px;margin-left:12px}.me .who{display:flex;flex-direction:column;line-height:1.15;font-size:13px;font-weight:500}.me .who small{font-weight:400;color:var(--muted);font-size:11px}
.sync .dot.bad{background:var(--danger)}
.sync{white-space:nowrap}
.topbar h1{white-space:nowrap}
.topbar .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}