:root {
  color-scheme: dark;
  --bg: #08090d;
  --panel: #14151b;
  --panel-2: #1a1c23;
  --panel-3: #20232c;
  --line: #30323a;
  --line-strong: #3b3e49;
  --text: #f1f1f5;
  --muted: #838896;
  --purple: #6f50f5;
  --purple-soft: #252043;
  --green: #37d4a0;
  --green-soft: #112b25;
  --blue: #37bdf0;
  --orange: #ffab1d;
  --orange-soft: #312513;
  --red: #ff5973;
  --red-soft: #351922;
  --shadow: 0 2px 0 rgba(0,0,0,.35);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root.light {
  color-scheme: light;
  --bg: #f5f5f8;
  --panel: #fff;
  --panel-2: #f6f6fa;
  --panel-3: #eceef4;
  --line: #d9dbe3;
  --line-strong: #c9ccd7;
  --text: #171820;
  --muted: #6d7280;
  --purple-soft: #ece8ff;
  --green-soft: #e8faf3;
  --orange-soft: #fff3df;
  --red-soft: #ffecf0;
  --shadow: 0 2px 0 rgba(34,38,52,.07);
}

* { box-sizing: border-box; }
.print-only { display: none; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 16px; line-height: 1.45; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; }
h2 { margin: 36px 0 22px; font-size: 25px; letter-spacing: -.025em; }

.topbar {
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 20px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.logo { display: flex; align-items: baseline; gap: 9px; min-width: max-content; white-space: nowrap; }
.logo-title { font-size: 18px; font-weight: 850; letter-spacing: -.035em; }
.warehouse-title { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .17em; }
nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a { display: inline-flex; align-items: center; min-height: 44px; color: #a6aab6; padding: 8px 12px; border-radius: 24px; font-size: 15px; font-weight: 730; white-space: nowrap; }
nav a:hover { color: var(--text); background: var(--panel-2); }
nav a.active { color: var(--text); background: var(--purple-soft); }
nav kbd { margin-left: 7px; }
.topbar-right { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
#freshness { font-size: 12px; }
.user-name { max-width: 110px; overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; }
.user-badge { padding: 7px 10px; background: var(--panel-2); border-radius: 999px; color: #aeb2bf; font-size: 10px; font-weight: 850; letter-spacing: .09em; }
.training-link { display: inline-flex; min-height: 40px; align-items: center; padding: 7px 12px; border: 1px solid var(--purple); border-radius: 10px; color: #c8bdff; background: var(--purple-soft); font-size: 12px; font-weight: 800; }
.training-link.active { color: #fff; background: var(--purple); }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text); background: var(--panel-2); font-size: 21px; }

.page { width: 100%; max-width: 1920px; margin: 0 auto; padding: 30px 32px 90px; }
body[data-page="queue"] .page { max-width: none; padding: 18px 20px 60px; }
body[data-page="supply"] .page { max-width: none; padding: 30px 20px 60px; }
body[data-page="supply"] h2 { margin: 22px 0 14px; font-size: 17px; }
.page-title { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-height: 44px; margin-bottom: 22px; }
.subpage-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.subpage-heading h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: -.03em; }
.subpage-heading p { margin: 0; color: var(--muted); }
.loading { padding: 100px; text-align: center; color: var(--muted); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; margin-bottom: 32px; }
.metric { min-height: 146px; position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid #969baa; border-radius: 15px; padding: 24px 24px 20px; box-shadow: var(--shadow); }
.metric.purple { border-color: var(--purple); border-left-color: var(--purple); background: var(--purple-soft); }
.metric.green { border-left-color: var(--green); }
.metric.blue { border-left-color: var(--blue); }
.metric.orange { border-left-color: var(--orange); }
.metric.red { border-left-color: var(--red); }
.metric .label { color: #aeb2bf; font-size: 13px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.metric .value { margin-top: 10px; font-size: clamp(38px, 3vw, 52px); line-height: 1; font-weight: 830; letter-spacing: -.045em; }
.metric .note { margin-top: 10px; color: var(--muted); font-size: 14px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px; margin-bottom: 28px; box-shadow: var(--shadow); }
.panel.flat { box-shadow: none; }
.compact-panel { padding: 26px 30px; margin-bottom: 22px; }
.panel h2 { margin: 0 0 22px; color: #b1b5c2; font-size: 15px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.panel h3 { margin: 24px 0 14px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; }
.toolbar { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-bottom: 22px; }
.toolbar.grow > * { flex: 1; min-width: 210px; }
.stack { display: grid; gap: 16px; }
label { display: grid; gap: 8px; color: #aeb2bf; font-size: 13px; font-weight: 790; text-transform: uppercase; letter-spacing: .07em; }
input, select { min-height: 54px; width: 100%; padding: 12px 15px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 10px; outline: none; text-transform: none; letter-spacing: normal; }
input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 23%, transparent); }
button.primary, button.secondary, button.danger, button.good { min-height: 52px; border-radius: 10px; padding: 12px 20px; font-weight: 790; color: var(--text); }
a.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 10px; padding: 10px 17px; font-weight: 790; }
a.button.secondary { border: 1px solid var(--line-strong); background: var(--panel-2); }
button.primary { border: 1px solid var(--purple); background: var(--purple); }
button.secondary { border: 1px solid var(--line-strong); background: var(--panel-2); }
button.danger { border: 1px solid var(--red); background: transparent; color: var(--red); }
button.good { border: 1px solid var(--green); background: transparent; color: var(--green); }
button:hover:not(:disabled), a.button:hover { filter: brightness(1.12); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; }
.chip { min-height: 46px; border: 1px solid var(--line-strong); color: var(--muted); background: transparent; padding: 10px 16px; border-radius: 999px; font-weight: 720; }
.chip.active { border-color: var(--purple); color: var(--text); background: var(--purple-soft); }
.cancellation-strip { display: flex; gap: 12px 28px; flex-wrap: wrap; margin: 0 0 28px; padding: 18px 22px; border: 1px solid var(--line); border-left: 6px solid var(--red); border-radius: 14px; background: var(--panel); color: var(--muted); }
.cancellation-strip b { color: var(--red); }

body[data-page="queue"] .metrics { gap: 12px; margin-bottom: 24px; }
body[data-page="queue"] .metric { min-height: 100px; padding: 13px 16px 11px; }
body[data-page="queue"] .metric .value { margin-top: 6px; font-size: clamp(32px, 2.4vw, 40px); }
body[data-page="queue"] .metric .note { margin-top: 4px; font-size: 12px; }
.queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.queue-toolbar .chips { min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.queue-toolbar .chips::-webkit-scrollbar { display: none; }
.queue-toolbar-meta { display: flex; flex: none; align-items: center; gap: 14px; }
.queue-cancel-zero { color: var(--muted); font-size: 13px; white-space: nowrap; }
.queue-cancel-zero b { color: var(--red); }
body[data-page="queue"] .chip { min-height: 38px; padding: 7px 15px; }
body[data-page="queue"] .queue-toolbar button.secondary { min-height: 42px; padding: 8px 14px; }
body[data-page="queue"] .queue-toolbar .queue-refresh { display: grid; width: 42px; min-width: 42px; height: 42px; place-items: center; padding: 0; font-size: 21px; line-height: 1; }
body[data-page="queue"] .cancellation-strip { gap: 8px 22px; margin-bottom: 16px; padding: 10px 16px; font-size: 13px; }
.queue-notes, .supply-notes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.queue-notes p, .supply-notes p { margin: 0 0 8px; }
.queue-notes strong, .supply-notes strong { color: #aeb2bf; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th { position: sticky; top: 0; z-index: 1; padding: 18px; text-align: left; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 820; text-transform: uppercase; letter-spacing: .09em; }
td { min-height: 66px; padding: 18px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 62%, transparent); }
tr.stage-bonus td, tr.stage-neutral td, tr.stage-surcharge td, tr.stage-overdue td { background: transparent; }
tr.stage-bonus td:first-child { border-left: 5px solid var(--green); }
tr.stage-neutral td:first-child { border-left: 5px solid var(--blue); }
tr.stage-surcharge td:first-child { border-left: 5px solid var(--orange); }
tr.stage-overdue td:first-child { border-left: 5px solid var(--red); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--muted); }
.strong { font-weight: 800; }
.badge { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 790; white-space: nowrap; }
.badge.green { color: var(--green); border-color: var(--green); }
.badge.orange { color: var(--orange); border-color: var(--orange); }
.badge.red { color: var(--red); border-color: var(--red); }
.badge.blue { color: var(--blue); border-color: var(--blue); }
.queue-table { min-width: 1396px; table-layout: fixed; }
.queue-table th { padding: 11px 10px; white-space: nowrap; }
.queue-table td { min-height: 58px; padding: 13px 14px; }
.queue-table .badge { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.queue-table .queue-status-cell { padding-inline: 8px; }
.queue-table .queue-status-cell .badge { max-width: 100%; justify-content: center; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.queue-table .queue-created-cell { white-space: nowrap; }
.queue-table th:nth-child(1), .queue-table td:nth-child(1) { width: 112px; }
.queue-table th:nth-child(2), .queue-table td:nth-child(2) { width: 112px; }
.queue-table th:nth-child(3), .queue-table td:nth-child(3) { width: 90px; }
.queue-table th:nth-child(4), .queue-table td:nth-child(4) { width: 166px; }
.queue-table th:nth-child(5), .queue-table td:nth-child(5) { width: 216px; }
.queue-table th:nth-child(6), .queue-table td:nth-child(6) { width: 80px; }
.queue-table th:nth-child(7), .queue-table td:nth-child(7) { width: 120px; }
.queue-table th:nth-child(8), .queue-table td:nth-child(8) { width: 150px; }
.queue-table th:nth-child(9), .queue-table td:nth-child(9) { width: 132px; }
.queue-table th:nth-child(10), .queue-table td:nth-child(10) { width: 120px; }
.queue-table th:nth-child(11), .queue-table td:nth-child(11) { width: 98px; }
.queue-table td:nth-child(11) { padding-inline: 7px; font-size: 14px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.actions button { min-height: 42px; padding: 8px 13px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.empty { padding: 44px 30px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; color: var(--muted); }
.callout { padding: 20px 22px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.callout.warning { background: var(--orange-soft); border-color: var(--orange); color: var(--text); }
.callout.error { background: var(--red-soft); border-color: var(--red); color: var(--text); }
.toast { position: fixed; right: 28px; bottom: 28px; z-index: 100; max-width: 480px; padding: 17px 21px; background: var(--text); color: var(--bg); border-radius: 13px; box-shadow: 0 18px 50px rgba(0,0,0,.35); font-weight: 750; }

.supply-create { margin-bottom: 16px; }
.supply-create-result { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--green); border-radius: 14px; background: var(--green-soft); }
.supply-create-result.has-problems { border-color: var(--red); background: var(--red-soft); }
.supply-create-result > div { display: grid; gap: 5px; }
.supply-create-result strong { font-size: 18px; }
.supply-create-result span { font-weight: 750; }
.supply-create-result small { color: var(--muted); }
.supply-create-result .button { flex: 0 0 auto; }
.supply-topline { display: grid; grid-template-columns: 44px 171px 260px; gap: 10px; align-items: end; margin-bottom: 14px; }
.supply-topline .supply-refresh { display: grid; width: 44px; min-width: 44px; min-height: 44px; place-items: center; padding: 0; font-size: 21px; line-height: 1; }
.supply-topline button.primary { width: 171px; min-height: 44px; padding: 9px 12px; font-size: 14px; }
.supply-topline label { gap: 4px; }
.supply-topline input { min-height: 40px; padding: 8px 11px; }
.supply-builder { display: grid; grid-template-columns: 290px 360px 170px; gap: 10px; align-items: start; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 16px; color: var(--muted); font-size: 13px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.radio-list, .supply-fields { display: grid; gap: 5px; }
.radio-option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 11px 13px; border: 1px solid transparent; border-radius: 10px; color: var(--text); font-size: 15px; text-transform: none; letter-spacing: normal; cursor: pointer; }
.radio-option:has(input:checked) { border-color: var(--purple); background: var(--purple-soft); }
.radio-option input { width: 20px; min-height: auto; accent-color: var(--purple); }
.radio-option strong { color: var(--muted); }
.checkbox-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 18px; }
.checkbox-list label { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; text-transform: none; letter-spacing: normal; }
.checkbox-list input { width: 20px; min-height: auto; accent-color: var(--purple); }
.checkbox-list label:has(input:disabled) { opacity: .52; cursor: not-allowed; }
.supply-create legend { margin-bottom: 8px; font-size: 11px; }
.supply-create .radio-option { min-height: 28px; padding: 1px 4px; border: 0; border-radius: 0; }
.supply-create .radio-option:has(input:checked) { border: 0; background: transparent; }
.supply-create .checkbox-list { grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 5px 18px; }
.supply-create .checkbox-list label { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; min-height: 28px; }
.supply-create .checkbox-list strong { color: var(--muted); font-weight: 650; }
.supply-limit { display: flex; align-items: end; gap: 10px; color: var(--muted); }
.supply-limit label { width: 96px; gap: 4px; }
.supply-limit input { min-height: 44px; padding: 8px 10px; }
.supply-limit > span { padding-bottom: 11px; }
.supply-explainer { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.supply-explainer strong { color: #aeb2bf; }
.row-note { margin-top: 6px; font-size: 12px; font-weight: 500; }
.progress { appearance: none; -webkit-appearance: none; display: block; width: 180px; height: 8px; margin-top: 10px; overflow: hidden; border: 0; border-radius: 999px; background: var(--panel-3); color: var(--green); }
.progress::-webkit-progress-bar { border-radius: inherit; background: var(--panel-3); }
.progress::-webkit-progress-value { border-radius: inherit; background: var(--green); }
.progress::-moz-progress-bar { border-radius: inherit; background: var(--green); }
.qr-button { min-width: 82px; min-height: 48px; padding: 8px 11px; border: 1px solid var(--green); border-radius: 10px; background: transparent; color: var(--green); font-weight: 800; }
.qr-thumb { display: block; width: 68px; height: 68px; object-fit: contain; background: #fff; }
.supply-table-wrap { border: 0; border-radius: 0; background: transparent; }
.supply-table { min-width: 1540px; table-layout: fixed; }
.supply-table th { position: static; padding: 10px 9px; background: transparent; font-size: 10px; letter-spacing: .07em; white-space: nowrap; }
.supply-table td { min-height: 62px; padding: 12px 9px; }
.supply-table .badge { min-height: 28px; padding: 4px 9px; font-size: 12px; }
.supply-qr-state { min-width: 0; }
.supply-qr-state .badge { max-width: 100%; justify-content: center; line-height: 1.2; overflow-wrap: anywhere; text-align: center; white-space: normal; }
.storage-issue-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.storage-issue-badges .badge { white-space: normal; line-height: 1.25; }
.supply-storage-summary { display: grid; justify-items: start; gap: 6px; }
.supply-storage-summary > .muted { display: none; }
.storage-review-link { min-height: 30px; padding: 4px 8px; font-size: 11px; }
.supply-table .progress { width: 100%; max-width: 118px; height: 6px; margin-top: 7px; }
.supply-table th:nth-child(1), .supply-table td:nth-child(1) { width: 100px; }
.supply-table th:nth-child(2), .supply-table td:nth-child(2) { width: 140px; }
.supply-table th:nth-child(3), .supply-table td:nth-child(3) { width: 130px; }
.supply-table th:nth-child(4), .supply-table td:nth-child(4) { width: 140px; }
.supply-table th:nth-child(5), .supply-table td:nth-child(5) { width: 90px; }
.supply-table th:nth-child(6), .supply-table td:nth-child(6) { width: 190px; }
.supply-table th:nth-child(7), .supply-table td:nth-child(7) { width: 90px; }
.supply-table th:nth-child(8), .supply-table td:nth-child(8) { width: 125px; }
.supply-table th:nth-child(9), .supply-table td:nth-child(9) { width: 112px; }
.supply-table th:nth-child(10), .supply-table td:nth-child(10) { width: 112px; }
.supply-table th:nth-child(11), .supply-table td:nth-child(11) { width: 220px; }
.supply-actions { display: flex; gap: 7px; align-items: flex-end; flex-direction: column; }
.supply-actions button { min-height: 34px; width: max-content; max-width: 145px; padding: 6px 10px; font-size: 12px; }
.supply-inline-action { width: 100%; max-width: 200px; }
.supply-inline-action > summary { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); background: var(--panel-2); cursor: pointer; font-size: 11px; font-weight: 800; line-height: 1.25; list-style: none; }
.supply-inline-action > summary::-webkit-details-marker { display: none; }
.supply-inline-action[open] { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.supply-inline-action label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: normal; text-transform: none; }
.supply-inline-action textarea { width: 100%; min-height: 76px; padding: 8px; resize: vertical; font-size: 12px; }

.compact-metrics { gap: 14px; margin-bottom: 28px; }
.compact-metrics .metric { min-height: 128px; padding: 20px 22px; }
.compact-metrics .metric .value { font-size: 42px; }
body[data-page="pick"] .page { max-width: none; padding: 18px 20px 60px; }
body[data-page="pick"] .compact-metrics { gap: 12px; margin-bottom: 18px; }
body[data-page="pick"] .compact-metrics .metric { height: 90px; min-height: 90px; padding: 10px 16px 8px; }
body[data-page="pick"] .compact-metrics .metric .value { margin-top: 5px; font-size: 30px; }
body[data-page="pick"] .compact-metrics .metric .note { margin-top: 2px; font-size: 12px; line-height: 1.1; }
.pick-controls { margin-bottom: 18px; }
.pick-filters { display: grid; grid-template-columns: 190px 190px minmax(360px, 520px) 210px; gap: 10px 24px; align-items: start; }
.pick-filters fieldset { min-width: 0; }
.pick-filters legend { margin-bottom: 7px; font-size: 11px; }
.pick-choice-list { display: grid; gap: 4px; }
.pick-choice-list label, .pick-check-option { display: flex; align-items: center; gap: 8px; min-height: 24px; color: var(--text); font-size: 13px; text-transform: none; letter-spacing: normal; cursor: pointer; }
.pick-choice-list input, .pick-check-option input { flex: none; width: 16px; min-height: auto; accent-color: var(--purple); }
.pick-categories .checkbox-list { grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 4px 18px; }
.pick-categories .checkbox-list label { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; min-height: 24px; font-size: 13px; }
.pick-categories .checkbox-list input { width: 16px; }
.pick-categories .checkbox-list strong { color: var(--muted); font-weight: 650; }
.pick-wave-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.pick-wave-row input { width: 96px; min-height: 44px; padding: 8px 10px; }
.field-help { max-width: 210px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.pick-wave .pick-check-option { margin-top: 10px; }
.pick-selection-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.pick-selection-actions button { min-height: 44px; padding: 9px 17px; font-size: 14px; }
.pick-guide { margin: 14px 0; overflow: hidden; border: 2px solid #8f79ff; border-radius: 14px; background: linear-gradient(135deg, #2d265a 0%, #191923 76%); box-shadow: 0 0 0 1px rgba(143,121,255,.16), 0 8px 24px rgba(0,0,0,.2); }
.pick-guide > summary { display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 13px 126px 13px 16px; position: relative; cursor: pointer; list-style: none; }
.pick-guide > summary::-webkit-details-marker { display: none; }
.pick-guide > summary::after { content: '▾'; position: absolute; right: 18px; color: #fff; font-size: 19px; transition: transform .16s ease; }
.pick-guide[open] > summary::after { transform: rotate(180deg); }
.pick-guide-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 2px solid #c6baff; border-radius: 12px; color: #fff; background: #6f50f5; font-size: 22px; font-weight: 900; box-shadow: 0 4px 12px rgba(32,20,88,.34); }
.pick-guide-summary-copy { display: grid; gap: 3px; min-width: 0; }
.pick-guide > summary .pick-guide-summary-copy strong { color: #fff; font-size: 18px; line-height: 1.2; }
.pick-guide > summary .pick-guide-summary-copy > span { color: #ded9f1; font-size: 13px; line-height: 1.35; }
.pick-guide-cta { position: absolute; right: 44px; min-width: 68px; padding: 6px 9px; border: 1px solid #b9aaff; border-radius: 999px; color: #fff; background: rgba(111,80,245,.42); font-size: 11px; font-weight: 850; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.pick-guide-cta::before { content: 'Открыть'; }
.pick-guide[open] .pick-guide-cta::before { content: 'Свернуть'; }
.pick-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; border-top: 1px solid rgba(198,186,255,.45); background: rgba(8,9,13,.28); }
.pick-guide-grid > div { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid #514876; border-left: 4px solid #8f79ff; border-radius: 10px; background: #211f30; }
.pick-guide-grid strong { color: #eeeaff; font-size: 14px; }
.pick-guide-grid span { color: #d0ccdc; font-size: 13px; line-height: 1.45; }
:root.light .pick-guide { border-color: #6545df; background: linear-gradient(135deg, #e8e0ff 0%, #fff 76%); box-shadow: 0 0 0 1px rgba(101,69,223,.12), 0 8px 22px rgba(61,40,126,.12); }
:root.light .pick-guide > summary::after { color: #321875; }
:root.light .pick-guide-icon { border-color: #4d2dbd; color: #fff; background: #6545df; box-shadow: 0 4px 12px rgba(82,52,178,.22); }
:root.light .pick-guide > summary .pick-guide-summary-copy strong { color: #24104f; }
:root.light .pick-guide > summary .pick-guide-summary-copy > span { color: #4d4562; }
:root.light .pick-guide-cta { border-color: #6545df; color: #321875; background: #f0ecff; }
:root.light .pick-guide-grid { border-top-color: rgba(101,69,223,.3); background: rgba(238,233,255,.5); }
:root.light .pick-guide-grid > div { border-color: #c9bcf4; border-left-color: #6545df; background: #fff; }
:root.light .pick-guide-grid strong { color: #3e218f; }
:root.light .pick-guide-grid span { color: #403a50; }
.pick-sheet-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 20px; align-items: center; margin: 14px 0 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pick-sheet-toolbar-context { display: grid; gap: 5px; min-width: 0; }
.pick-sheet-toolbar-context strong { color: var(--text); font-size: 15px; }
.pick-sheet-toolbar-context span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.pick-sheet-actions { display: grid; gap: 7px; justify-items: end; }
.pick-sheet-actions-label { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.pick-sheet-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pick-sheet-action-buttons button { min-height: 42px; padding: 8px 14px; font-size: 13px; }
.pick-sheet-actions .pick-fill-complete { border-color: var(--green); color: var(--green); background: var(--green-soft); font-weight: 850; }
.pick-sheet-actions .pick-fill-complete:hover:not(:disabled) { border-color: var(--green); background: rgba(51, 217, 164, .18); }
.pick-sheet { color: #111; background: #fff; border-radius: 10px; padding: 14px 16px; }
.pick-header { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 7px; margin-bottom: 8px; font-size: 15px; line-height: 1.3; }
.pick-header span { text-align: right; }
.pick-columns { columns: 2 520px; column-gap: 18px; }
.pick-box { break-inside: avoid; margin-bottom: 8px; }
.pick-box h4 { display: flex; justify-content: space-between; margin: 0; padding: 3px 6px; color: #fff; background: #111; font-size: 13px; line-height: 1.2; }
.pick-line { display: grid; grid-template-columns: 74px minmax(125px, 1fr) minmax(160px, .9fr) 52px 24px minmax(330px, 2.1fr); gap: 8px; align-items: center; min-height: 72px; padding: 7px 6px; border-bottom: 1px solid #ddd; font-size: 11px; line-height: 1.28; }
.pick-line .box-code { display: grid; justify-items: center; min-width: 0; padding: 7px 6px; border: 2px solid #6545df; border-radius: 7px; color: #321875; background: #eee8ff; line-height: 1.05; text-align: center; }
.pick-line .box-code span { max-width: 100%; font-size: 16px; font-weight: 950; overflow-wrap: anywhere; }
.pick-line .pick-article { min-width: 0; overflow: visible; font-size: 12px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
.pick-line .barcode { min-width: 0; padding: 6px 7px; border: 2px solid #111; border-radius: 5px; color: #050505; background: #f7f7f7; font-size: 16px; font-weight: 950; letter-spacing: .01em; line-height: 1.15; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; overflow-wrap: anywhere; }
.pick-line .pick-size { min-width: 0; color: #050505; font-size: 20px; font-weight: 950; line-height: 1; text-align: center; white-space: nowrap; }
.pick-allocations { display: grid; gap: 6px; min-width: 0; }
.pick-allocation { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(115px, .85fr) auto; gap: 7px; align-items: end; min-width: 0; }
.pick-allocation-remove { min-height: 34px; padding: 5px 9px; font-size: 11px; }
.pick-line-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.pick-line-actions button { min-height: 34px; padding: 5px 10px; font-size: 11px; }
.pick-shortage-editor { min-width: min(320px, 100%); }
.pick-shortage-editor > summary { min-height: 34px; padding: 7px 10px; border: 1px solid var(--red); border-radius: 7px; color: #fff; background: var(--red); cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
.pick-shortage-editor > summary::-webkit-details-marker { display: none; }
.pick-shortage-editor[open] { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--red); border-radius: 9px; background: var(--red-soft); }
.pick-inline-field { display: grid; gap: 5px; min-width: min(280px, 100%); color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: normal; text-transform: none; }
.pick-inline-field input, .pick-inline-field textarea { width: 100%; min-height: 36px; padding: 7px 9px; font-size: 12px; }
.pick-inline-field textarea { min-height: 70px; resize: vertical; }
.pick-line-invalid { background: rgba(255, 89, 115, .12); }
.pick-actual-field, .pick-count-field { display: grid; align-content: center; gap: 5px; min-width: 0; color: #343741; font-size: 9px; font-weight: 850; letter-spacing: .035em; line-height: 1.2; text-transform: uppercase; }
.pick-line .actual-box { min-width: 0; height: 34px; min-height: 34px; padding: 5px 8px; border-radius: 6px; font-size: 13px; font-weight: 800; }
.pick-count-control { display: flex; align-items: center; gap: 6px; color: #343741; font-size: 11px; white-space: nowrap; }
.pick-count-control .picked-quantity { width: 58px; height: 34px; min-height: 34px; padding: 5px 6px; border-radius: 6px; font-size: 14px; font-weight: 850; text-align: center; }
.pick-count-control .picked-quantity.invalid { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,89,115,.25); }
.pick-mark-line { height: 1px; background: #999; }
.pick-mark-box { width: 11px; height: 11px; border: 1px solid #111; }
.pick-shortage-list { margin: 14px 0; border: 1px solid var(--orange); border-radius: 12px; background: var(--orange-soft); }
.pick-shortage-list > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 11px 46px 11px 16px; position: relative; cursor: pointer; list-style: none; }
.pick-shortage-list > summary::-webkit-details-marker { display: none; }
.pick-shortage-list > summary::after { content: '▾'; position: absolute; right: 16px; color: var(--orange); font-size: 16px; transition: transform .16s ease; }
.pick-shortage-list[open] > summary::after { transform: rotate(180deg); }
.pick-shortage-summary-copy { display: grid; gap: 3px; min-width: 0; }
.pick-shortage-summary-copy strong { color: var(--orange); font-size: 14px; }
.pick-shortage-summary-copy span { color: var(--muted); font-size: 12px; }
.pick-shortage-cards { display: grid; gap: 10px; padding: 0 16px 16px; border-top: 1px solid color-mix(in srgb, var(--orange) 38%, transparent); padding-top: 12px; }
.pick-shortage-card { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(240px, 1.25fr) minmax(130px, auto) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pick-shortage-card.shortage-red { border-left: 6px solid var(--red); background: var(--red-soft); }
.pick-shortage-card.shortage-orange { border-left: 6px solid var(--orange); background: var(--orange-soft); }
.pick-shortage-product, .pick-shortage-reference { display: grid; gap: 3px; min-width: 0; }
.pick-shortage-product strong, .pick-shortage-reference b { overflow-wrap: anywhere; }
.pick-shortage-product small, .pick-shortage-reference small { color: var(--muted); font-size: 11px; }
.pick-shortage-quantity { white-space: nowrap; }
.pick-shortage-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; justify-content: flex-end; }
.focus-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 14px 16px; border: 2px solid var(--purple); border-radius: 14px; background: var(--purple-soft); }
.focus-banner > div { display: grid; gap: 4px; }
.focus-banner strong { color: #e1dcff; }
.focus-banner span { color: #b8b1dd; font-size: 12px; }
.focus-target { position: relative; z-index: 1; outline: 3px solid var(--orange); outline-offset: 2px; background: rgba(255, 179, 71, .16) !important; }
.focus-dim { opacity: .36; }

body[data-page="pack"] .page { max-width: none; padding: 18px 20px 60px; }
.pack-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(480px, .95fr); gap: 16px; align-items: stretch; }
.pack-workspace > .panel { min-width: 0; margin: 0; padding: 18px 20px; }
.pack-supply-panel { min-height: 154px; }
.pack-supply-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.pack-supply-row label { gap: 6px; }
.pack-supply-row select { min-height: 46px; padding: 9px 12px; }
.pack-supply-row .pack-remaining-toggle { min-height: 46px; border: 2px solid #a993ff; color: #fff; background: linear-gradient(135deg, #8165ff 0%, #5b36e8 100%); box-shadow: 0 0 0 3px rgba(111,80,245,.2), 0 8px 22px rgba(71,43,191,.34); font-weight: 900; letter-spacing: .01em; }
.pack-supply-row .pack-remaining-toggle:hover:not(:disabled) { border-color: #d5cbff; filter: brightness(1.1); transform: translateY(-1px); }
.pack-supply-row .pack-remaining-toggle:focus-visible { outline: 3px solid #f1edff; outline-offset: 3px; }
.pack-supply-row .pack-remaining-toggle[aria-expanded="true"] { border-color: #bff7e4; color: #071a14; background: linear-gradient(135deg, #66e4bd 0%, #34c99b 100%); box-shadow: 0 0 0 3px rgba(55,212,160,.2), 0 8px 22px rgba(24,139,104,.28); }
:root.light .pack-supply-row .pack-remaining-toggle { border-color: #5430cf; background: linear-gradient(135deg, #7757f4 0%, #5932d7 100%); box-shadow: 0 0 0 3px rgba(91,54,232,.14), 0 8px 20px rgba(65,40,156,.24); }
:root.light .pack-supply-row .pack-remaining-toggle:focus-visible { outline-color: #4e2ac7; }
:root.light .pack-supply-row .pack-remaining-toggle[aria-expanded="true"] { border-color: #087858; color: #06251b; background: linear-gradient(135deg, #7be9c7 0%, #45d3a7 100%); box-shadow: 0 0 0 3px rgba(8,120,88,.13), 0 8px 20px rgba(8,120,88,.2); }
.pack-supply-panel .callout { margin-top: 14px; padding: 12px 14px; font-size: 13px; }
.pack-remaining-panel { grid-column: 1 / -1; }
.pack-remaining-panel .table-wrap { max-height: 440px; }
.supply-registry-heading { align-items: center; }
.pack-empty-state { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; }
.pack-empty-state .pack-refresh { display: grid; width: 46px; min-height: 46px; place-items: center; padding: 0; font-size: 21px; }
.pack-empty-state .empty { min-height: 118px; display: grid; place-content: center; gap: 7px; padding: 18px 22px; }
.pack-empty-state .empty strong { color: var(--text); font-size: 16px; }
.pack-empty-state .empty span { max-width: 680px; }
.pack-summary-panel h2, .pack-legend-panel h2 { margin-bottom: 16px; }
.pack-today-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pack-today-stats > div { display: grid; gap: 5px; }
.pack-today-stats > div:last-child { grid-column: 1 / -1; }
.pack-today-stats span { color: #aeb2bf; font-size: 11px; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
.pack-today-stats strong { font-size: 25px; line-height: 1; }
.pack-today-stats .green-text { color: var(--green); }
.box-title { font-size: 26px; font-weight: 850; text-align: right; }
.box-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.pack-scan-panel label { gap: 7px; }
.scan-input { min-height: 62px; padding-inline: 16px; font-size: 17px; border: 2px dashed var(--line-strong); }
.scan-input:focus { border-style: solid; border-color: var(--purple); }
.scan-hints { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 12px; color: var(--muted); font-size: 12px; }
.pack-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.pack-actions button.secondary { min-height: 44px; padding: 9px 14px; font-size: 13px; }
.scan-result { min-height: 225px; display: grid; place-items: center; text-align: center; border: 2px dashed var(--line-strong); border-radius: 16px; padding: 30px; }
.pack-result-panel { min-height: 225px; margin: 0; place-items: start; align-content: start; padding: 24px 26px; text-align: left; }
.pack-result-panel h2 { margin: 0 0 8px; }
.pack-result-panel p { max-width: 620px; margin: 0; }
.scan-result.success { border-color: var(--green); background: var(--green-soft); }
.scan-result.warning { border-color: var(--orange); background: var(--orange-soft); }
.scan-result.error { border-color: var(--red); background: var(--red-soft); }
.scan-result h2 { font-size: 34px; margin: 0 0 10px; }
.pack-result-panel h2 { font-size: 24px; }
kbd { padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel-2); color: var(--muted); font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.row-check { width: 20px; min-height: auto; accent-color: var(--purple); }
.pack-events-panel .section-heading { margin-bottom: 12px; }
.pack-events-panel .section-heading h2 { margin: 0; color: var(--text); font-size: 16px; letter-spacing: 0; text-transform: none; }
.reprint-selection-guide { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.reprint-selection-guide strong { color: var(--green); }
.reprint-selection-guide span { display: inline-flex; margin-left: 8px; padding: 3px 8px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); background: var(--green-soft); font-weight: 850; }
.pack-events-panel a.button { min-height: 38px; padding: 7px 12px; font-size: 12px; }
.pack-event-wrap { border: 0; border-radius: 0; background: transparent; }
.pack-event-table { min-width: 980px; table-layout: fixed; }
.pack-event-table th { position: static; padding: 7px 8px; background: transparent; font-size: 9px; }
.pack-event-table td { min-height: 38px; padding: 7px 8px; font-size: 11px; }
.pack-event-table .badge { min-height: 28px; padding: 4px 9px; font-size: 11px; }
.pack-event-table .row-check { width: 16px; }
.pack-event-table th:nth-child(1), .pack-event-table td:nth-child(1) { width: 105px; }
.pack-event-table th:nth-child(2), .pack-event-table td:nth-child(2) { width: 75px; }
.pack-event-table th:nth-child(3), .pack-event-table td:nth-child(3) { width: 135px; }
.pack-event-table th:nth-child(4), .pack-event-table td:nth-child(4) { width: 92px; }
.pack-event-table th:nth-child(5), .pack-event-table td:nth-child(5) { width: 180px; }
.pack-event-table th:nth-child(6), .pack-event-table td:nth-child(6) { width: 50px; }
.pack-event-table th:nth-child(7), .pack-event-table td:nth-child(7) { width: 130px; }
.pack-event-table th:nth-child(8), .pack-event-table td:nth-child(8) { width: 180px; }
.reprint-choice { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 8px; border: 1px solid var(--green); border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 10px; font-weight: 900; letter-spacing: 0; text-transform: none; cursor: pointer; }
.reprint-choice input { flex: none; margin: 0; accent-color: var(--green); }
.reprint-unavailable { color: var(--muted); }
.pack-event-table .reprint-eligible td { background: color-mix(in srgb, var(--green-soft) 42%, transparent); }
.pack-event-table .reprint-selected td { background: color-mix(in srgb, var(--green-soft) 86%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--green) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--green) 40%, transparent); }
.pack-event-table .reprint-selected .reprint-choice { color: var(--panel); background: var(--green); }
.dashboard-refresh-button { min-height: 46px; padding-inline: 18px; box-shadow: 0 0 0 3px var(--purple-soft); }
.pack-legend-panel h3 { margin: 18px 0 10px; color: var(--text); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.pack-repeat-warning { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid var(--red); border-radius: 12px; background: var(--red-soft); }
.pack-repeat-warning strong { color: var(--red); font-size: 13px; }
.pack-repeat-warning span { color: var(--text); font-size: 12px; line-height: 1.45; }
.pack-history-legend { margin-top: 16px; border-top: 1px solid var(--line); }
.pack-history-legend summary { padding: 14px 0 8px; color: var(--muted); font-size: 12px; font-weight: 850; cursor: pointer; }
.pack-history-legend[open] summary { color: var(--text); }
.pack-history-legend .legend { padding-top: 4px; }
.legend { display: grid; gap: 9px; }
.legend-row { display: grid; grid-template-columns: minmax(0, 178px) minmax(0, 1fr); gap: 14px; align-items: start; color: #aeb2bf; font-size: 12px; }
.legend-row > * { min-width: 0; overflow-wrap: anywhere; }
.legend-row .badge { width: 100%; max-width: 100%; min-height: 28px; justify-content: flex-start; padding: 4px 9px; border-radius: 14px; font-size: 11px; line-height: 1.25; text-align: left; white-space: normal; overflow-wrap: anywhere; }
:root.light .legend-row { color: #4f5566; }
:root.light .pack-repeat-warning span { color: #252938; }
.pack-footer-notes { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pack-footer-notes p { margin: 0 0 8px; }
.pack-footer-notes strong { color: #aeb2bf; }

body[data-page="dashboard"] .page { max-width: none; padding: 18px 20px 60px; }
body[data-page="dashboard"] .panel { margin-bottom: 0; padding: 18px 20px; border-radius: 12px; box-shadow: none; }
.green-text { color: var(--green); }
.orange-text { color: var(--orange); }
.red-text { color: var(--red); }
.dashboard-section-title { margin: 24px 0 12px; font-size: 16px; }
.dashboard-top-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.dashboard-top-metrics .metric { min-height: 90px; padding: 14px 16px 12px; border-radius: 11px; box-shadow: none; }
.dashboard-top-metrics .metric .label { font-size: 10px; }
.dashboard-top-metrics .metric .value { margin-top: 8px; font-size: 28px; }
.dashboard-top-metrics .metric .note { margin-top: 5px; font-size: 11px; }
.dashboard-risk-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px; }
.dashboard-risk-summary > div { display: grid; gap: 5px; }
.dashboard-risk-summary span, .dashboard-risk-panel h3, .dashboard-two-columns h3, .dashboard-chart-grid h3 { color: #aeb2bf; font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-risk-summary strong { font-size: 26px; }
.dashboard-risk-summary small { color: var(--muted); font-size: 11px; }
.dashboard-risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.dashboard-risk-panel h3, .dashboard-two-columns h3, .dashboard-chart-grid h3 { margin: 0 0 10px; }
.plain-table { min-width: 0; table-layout: fixed; }
.plain-table th, .dashboard-compact-table th { position: static; padding: 8px 7px; background: transparent; font-size: 9px; }
.plain-table td, .dashboard-compact-table td { min-height: 38px; padding: 8px 7px; font-size: 12px; }
.dashboard-inline-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.dashboard-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; }
.dashboard-note strong { color: #aeb2bf; }
.dashboard-stuck-list { padding-block: 0 !important; }
.dashboard-stuck-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.dashboard-stuck-row:last-child { border-bottom: 0; }
.dashboard-stuck-row > div { display: grid; gap: 4px; min-width: 0; }
.dashboard-stuck-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.dashboard-stuck-row small { overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.dashboard-alert-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--red); border-radius: 50%; color: var(--red); font-weight: 850; }
.dashboard-alert-icon.orange { border-color: var(--orange); color: var(--orange); }
.dashboard-table-panel { padding: 0 16px 14px !important; }
.dashboard-table-panel .table-wrap { border: 0; border-radius: 0; background: transparent; }
.dashboard-compact-table { min-width: 900px; table-layout: fixed; }
.dashboard-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.dashboard-chart-grid .panel { min-height: 280px; }
.dashboard-bars { height: 220px; display: flex; align-items: stretch; gap: 9px; overflow-x: auto; padding: 8px 0 0; }
.dashboard-column { min-width: 48px; flex: 1 0 48px; display: grid; grid-template-rows: 24px minmax(0,1fr) 24px; align-items: end; text-align: center; }
.dashboard-bar-value { color: #aeb2bf; font-size: 10px; }
.dashboard-bar-value b { color: var(--red); }
.dashboard-bar-track { height: 100%; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 0; overflow: hidden; background: transparent; }
.dashboard-bar-packed { display: block; width: 72%; min-height: 3px; background: var(--purple); }
.dashboard-bar-rejects { display: block; width: 72%; min-height: 0; background: var(--red); border-radius: 5px 5px 0 0; }
.dashboard-bar-label { align-self: center; color: var(--muted); font-size: 10px; }
.dashboard-total-row td { border-top: 1px solid var(--line-strong); font-weight: 800; }
.dashboard-shipment-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.dashboard-shipment-metrics .metric { min-height: 108px; padding: 18px 20px 14px; box-shadow: none; }
.dashboard-shipment-metrics .metric .value { margin-top: 8px; font-size: 34px; }
.dashboard-shipment-metrics .metric .note { margin-top: 6px; font-size: 12px; }
.dashboard-shipment-list > div:not(.muted) { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.dashboard-shipment-list > div span { color: var(--muted); }
.dashboard-order-flow .panel, .dashboard-work-splits .panel, .dashboard-review .panel { min-width: 0; }
.dashboard-exception-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dashboard-exception-metrics > div { display: grid; gap: 8px; }
.dashboard-exception-metrics span { color: #aeb2bf; font-size: 11px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-exception-metrics strong { font-size: 28px; }
.dashboard-review .empty { display: grid; min-height: 106px; place-content: center; gap: 8px; padding: 20px; }
.dashboard-review .empty span { color: var(--muted); }
.dashboard-footer-notes { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.dashboard-footer-notes p { margin: 0 0 8px; }
.dashboard-footer-notes strong { color: #aeb2bf; }
.review-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; margin-bottom: 22px; padding: 28px 30px; border: 1px solid var(--purple); border-radius: 18px; background: linear-gradient(125deg, var(--purple-soft), var(--panel) 62%); }
.review-hero h1 { margin: 9px 0 7px; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; }
.review-hero p { max-width: 860px; margin: 0; color: var(--muted); font-size: 15px; }
.review-summary { display: grid; grid-template-columns: repeat(3, minmax(95px, 1fr)); gap: 10px; }
.review-summary > div { display: grid; gap: 6px; min-width: 105px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.review-summary span { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.review-summary strong { font-size: 28px; }
.review-list { display: grid; gap: 18px; }
.review-case { display: grid; gap: 18px; color: var(--text); }
.review-case-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.review-case-head h2 { margin: 10px 0 0; font-size: 22px; }
.review-case-number { color: var(--muted); font-size: 13px; }
.review-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.review-facts span { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 78%, transparent); overflow-wrap: anywhere; }
.review-facts b { color: var(--muted); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.review-return { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--purple); border-radius: 12px; background: color-mix(in srgb, var(--purple-soft) 62%, var(--panel)); }
.review-return h3 { margin: 0; font-size: 20px; }
.review-return-primary { display: grid; gap: 5px; padding: 15px 16px; border: 1px solid var(--green); border-radius: 10px; background: color-mix(in srgb, var(--green-soft) 36%, var(--panel-2)); }
.review-return-primary > span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.review-return-primary strong { font-size: 22px; }
.review-return-primary small, .review-return-missing span { color: var(--muted); font-size: 12px; }
.review-return-missing { display: grid; gap: 5px; padding: 15px 16px; border: 1px solid var(--red); border-radius: 10px; background: var(--red-soft); }
.review-return-stock-note { display: grid; gap: 3px; padding: 12px 14px; border-left: 4px solid var(--orange); border-radius: 8px; background: var(--panel-2); }
.review-return-stock-note strong { color: var(--orange); }
.review-return-stock-note span, .review-return-options p, .review-return-no-options { color: var(--muted); font-size: 12px; }
.review-return-options { display: grid; gap: 8px; }
.review-return-options ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.review-return-options li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.review-return-options li small { color: var(--muted); white-space: nowrap; }
.review-return-options p, .review-return-no-options { margin: 0; }
.review-instruction { padding: 16px 18px; border-left: 4px solid var(--purple); border-radius: 10px; background: var(--panel-2); }
.review-instruction h3 { margin: 0 0 9px; }
.review-instruction ol { display: grid; gap: 7px; margin: 0; padding-left: 20px; }
.review-candidates { display: grid; gap: 12px; }
.review-candidates .toolbar, .review-actions { margin: 0; }
.review-resolve { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; padding-top: 16px; border-top: 1px solid var(--line); }
.review-answer-example { grid-column: 1 / -1; display: grid; gap: 7px; padding: 14px 16px; border: 1px solid var(--purple); border-radius: 10px; background: color-mix(in srgb, var(--purple-soft) 68%, var(--panel)); }
.review-answer-example strong { color: var(--text); font-size: 14px; }
.review-answer-example p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; }
.review-answer-example small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.review-resolve > label:first-of-type { grid-column: 1 / -1; }
.review-resolve textarea { min-height: 118px; resize: vertical; }
.review-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: normal; text-transform: none; }
.review-check input { width: 20px; min-height: auto; accent-color: var(--purple); }
.review-recent { margin-top: 22px; }
.review-recent .stack > div { display: grid; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.review-recent span { color: var(--muted); font-size: 12px; }
.review-playbook { margin: 0 0 18px; padding: 0; border-color: var(--purple); background: linear-gradient(135deg, var(--purple-soft), var(--panel) 72%); }
.review-playbook > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 14px 52px 14px 18px; position: relative; cursor: pointer; list-style: none; }
.review-playbook > summary::-webkit-details-marker { display: none; }
.review-playbook > summary::after { content: '▾'; position: absolute; right: 20px; color: #c9c2ff; font-size: 18px; transition: transform .16s ease; }
.review-playbook[open] > summary::after { transform: rotate(180deg); }
.review-playbook > summary span { display: grid; gap: 4px; }
.review-playbook > summary strong { color: var(--text); font-size: 18px; }
.review-playbook > summary small { color: var(--muted); font-size: 12px; }
.review-playbook > summary b { color: #c9c2ff; font-size: 12px; white-space: nowrap; }
.review-playbook-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.review-playbook-body > p { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.review-playbook-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.review-playbook-list details { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.review-playbook-list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 14px; cursor: pointer; }
.review-playbook-list summary > * { min-width: 0; overflow-wrap: anywhere; }
.review-playbook-list summary strong { color: var(--muted); font-size: 11px; text-align: right; }
.review-playbook-list ol { display: grid; gap: 8px; margin: 0; padding: 0 22px 16px 42px; color: var(--muted); font-size: 13px; }
.sync-list { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; }
.sync-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 14px; align-items: center; padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }

.history-filters { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 14px; align-items: end; }
.history-search { grid-column: 1 / -1; }
.history-buttons { display: flex; gap: 10px; align-items: center; }
.history-table table { min-width: 1700px; }

body[data-page="training"] .page { max-width: 1760px; padding-top: 22px; }
.training-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; margin-bottom: 20px; padding: 28px 30px; border: 1px solid var(--purple); border-radius: 18px; background: linear-gradient(125deg, var(--purple-soft), var(--panel) 62%); }
.training-hero h1 { max-width: 980px; margin: 10px 0 8px; font-size: clamp(30px, 4vw, 52px); line-height: 1.03; letter-spacing: -.05em; }
.training-hero p { max-width: 970px; margin: 0; color: #b5b8c5; font-size: 16px; }
.training-safe-badge { display: inline-flex; padding: 6px 10px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.training-live-state { display: grid; gap: 7px; padding: 20px; border: 1px solid var(--line-strong); border-radius: 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); }
.training-live-state span { color: #b5b8c5; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.training-live-state strong { font-size: 26px; }
.training-live-state small { color: var(--muted); }
.training-role-filter { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 18px; }
.training-role-filter .chip { min-height: 40px; margin: 0; padding: 7px 14px; }
.training-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.training-timeline { max-height: 900px; position: sticky; top: 82px; display: grid; gap: 7px; overflow-y: auto; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.training-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; text-align: left; }
.training-step > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 11px; font-weight: 850; }
.training-step > div { min-width: 0; }
.training-step small { display: block; margin-bottom: 2px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.training-step strong { display: block; overflow: hidden; color: #b8bbc6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.training-step:hover { border-color: var(--line-strong); background: var(--panel-2); }
.training-step.active { border-color: var(--purple); color: #d0c8ff; background: var(--purple-soft); }
.training-step.active > span { border-color: var(--purple); color: #fff; background: var(--purple); }
.training-step.active strong { color: #fff; }
.training-step.done > span { border-color: var(--green); color: var(--green); }
.training-stage { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.training-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.training-stage-head span:not(.badge) { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.training-stage-head h2 { margin: 5px 0 0; color: var(--text); font-size: 30px; text-transform: none; letter-spacing: -.035em; }
.training-screen-label { margin: 18px 0 8px; color: #aeb2bf; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.training-preview { min-height: 360px; display: grid; gap: 14px; align-content: stretch; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--bg); }
.training-preview button { pointer-events: none; }
.training-preview [data-training-action], .training-preview [data-training-guide-action] { pointer-events: auto; }
.training-preview button:disabled, .training-preview input:disabled, .training-preview select:disabled { opacity: .62; cursor: not-allowed; }
.training-preview .chip { min-height: 36px; margin: 0; padding: 6px 12px; pointer-events: none; }
.training-safe-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, auto); gap: 14px; align-items: center; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--blue); border-radius: 12px; background: color-mix(in srgb, var(--blue) 10%, var(--panel)); }
.training-safe-control span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.training-safe-control strong { display: block; margin-bottom: 2px; color: #9fe5ff; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.training-safe-mark { justify-self: end; display: inline-flex; min-height: 34px; align-items: center; padding: 6px 10px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: 11px; font-weight: 850; white-space: nowrap; }
.training-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.training-simulator { display: grid; gap: 12px; min-width: 0; }
.training-simulator-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 2px; }
.training-simulator-head > div { display: grid; gap: 3px; }
.training-simulator-head small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.training-simulator-head strong { color: var(--text); font-size: 17px; }
.training-simulator-head > span { color: #b9b0ee; font-size: 11px; font-weight: 800; }
.training-simulator-canvas { min-width: 0; }
.training-guide-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 14px; border: 1px solid var(--blue); border-radius: 11px; background: color-mix(in srgb, var(--blue) 10%, var(--panel)); }
.training-guide-control span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.training-guide-control strong { display: block; margin-bottom: 2px; color: #9fe5ff; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.training-guide-control button { min-height: 38px; padding: 7px 11px; white-space: nowrap; }
.training-simulator-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--muted); font-size: 11px; }
.training-simulator-foot button { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; }
.training-screen-shell { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.training-physical-stage { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, var(--panel)); }
.training-physical-stage .training-local-pill { border-color: var(--blue); color: #9fe5ff; }
.training-screen-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.training-screen-bar > span:first-child { color: var(--text); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.training-screen-bar strong { overflow: hidden; color: #c8cbd5; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.training-local-pill { padding: 5px 8px; border: 1px solid var(--purple); border-radius: 999px; color: #c9bfff; font-size: 8px; font-weight: 900; letter-spacing: .07em; white-space: nowrap; }
.training-screen-body { display: grid; gap: 12px; min-height: 235px; align-content: center; padding: 18px; }
.training-screen-note { padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--panel-2) 72%, transparent); font-size: 10px; }
.training-screen-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.training-screen-head > div { display: grid; gap: 4px; }
.training-screen-head small, .training-mini-form small { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.training-mini-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.training-mini-actions button { min-height: 40px; padding: 7px 12px; }
.training-mini-outcome { display: grid; gap: 6px; padding: 14px 15px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-2); }
.training-mini-outcome strong { color: var(--text); }
.training-mini-outcome span { color: var(--muted); }
.training-mini-outcome.green { border-color: var(--green); background: var(--green-soft); }
.training-mini-outcome.green strong { color: #b9f1dd; }
.training-mini-outcome.green span { color: #90cbb6; }
.training-mini-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.training-mini-form-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.training-mini-form label { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--panel-2); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.training-mini-form strong { overflow: hidden; color: var(--text); font-size: 13px; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.training-mini-table { display: grid; gap: 7px; }
.training-mini-row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(160px, 1.4fr) auto; gap: 10px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.training-mini-row > span:not(.badge) { color: var(--muted); }
.training-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.training-compare > div { display: grid; gap: 6px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.training-compare small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.training-compare strong { font-size: 22px; }
.training-change { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--orange); border-radius: 9px; background: var(--orange-soft); }
.training-change span { color: #c2a76e; text-decoration: line-through; }
.training-change strong { color: #ffd995; }
.training-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.training-pick-row > span, .training-pick-row label { display: grid; gap: 3px; }
.training-pick-row small { color: var(--muted); }
.training-pick-row label { color: var(--muted); font-size: 10px; text-align: right; }
.training-pick-row label strong { color: var(--text); font-size: 16px; }
.training-pick-row.warn { border-color: var(--orange); background: var(--orange-soft); }
.training-pick-edit > span { display: inline-flex; gap: 7px; align-items: center; justify-content: flex-end; }
.training-pick-edit input { width: 76px; min-height: 38px; padding: 7px 9px; border-color: var(--orange); font-size: 16px; font-weight: 850; text-align: right; }
.training-pick-edit b { color: var(--text); font-size: 14px; }
.training-scan.active { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple-soft); }
.training-mini-status { display: grid; gap: 7px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel-2); }
.training-mini-status strong { font-size: 18px; }
.training-mini-status span:last-child { color: var(--muted); }
.training-mini-status.orange { border-color: var(--orange); background: var(--orange-soft); }
.training-mini-status.green { border-color: var(--green); background: var(--green-soft); }
.training-event.selected { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 18%, transparent); }
.training-case { display: grid; gap: 8px; padding: 15px; border: 1px solid var(--red); border-radius: 11px; background: var(--red-soft); }
.training-case > div { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.training-case > span { color: #d4939e; }
.training-position-list { display: grid; gap: 7px; }
.training-position-list span { padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.training-reason, .training-confirm { display: grid; gap: 6px; padding: 13px 15px; border: 1px solid var(--orange); border-radius: 10px; background: var(--orange-soft); }
.training-reason small { color: #d6b46f; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.training-confirm span { color: #d1b172; }
.training-fake-input { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.training-pending { border-color: var(--orange) !important; color: var(--orange) !important; background: var(--orange-soft) !important; }
.training-truck.done { border-color: var(--green); color: #a8ead3; background: var(--green-soft); }
:root.light .training-screen-label { color: #555b68; }
:root.light .training-hero p,
:root.light .training-live-state span,
:root.light .training-step strong,
:root.light .training-explanation small,
:root.light .training-no-box span { color: var(--muted); }
:root.light .training-step.active { color: #4c2aa5; background: color-mix(in srgb, var(--purple) 16%, var(--panel)); }
:root.light .training-step.active strong { color: var(--text); }
:root.light .training-step.active > span { color: #fff; }
:root.light .training-safe-control strong { color: #075c78; }
:root.light .training-guide-control strong { color: #075c78; }
:root.light .training-safe-mark,
:root.light .training-safe-badge { border-color: #087858; color: #086348; }
:root.light .training-simulator-head > span,
:root.light .training-local-pill { border-color: #6747c7; color: #5636b5; }
:root.light .training-screen-bar strong { color: var(--text); }
:root.light .training-preview .green-text { color: #087858; }
:root.light .training-preview .orange-text { color: #765000; }
:root.light .training-checks span { border-color: #087858; color: #086348; }
:root.light .training-mini-outcome.green strong,
:root.light .training-truck.done,
:root.light .training-preview-doc { color: #075f43; }
:root.light .training-mini-outcome.green span { color: #286b56; }
:root.light .training-change span { color: #72571f; }
:root.light .training-change strong,
:root.light .training-warning,
:root.light .training-reason small,
:root.light .training-confirm span { color: #684600; }
:root.light .training-truck { color: #075c78; }
:root.light .training-problem strong { color: #9a1234; }
:root.light .training-case > span { color: #7b3341; }
:root.light .training-pending { border-color: #8a5b00 !important; color: #765000 !important; }
:root.light .training-explanation .training-stop small,
:root.light .training-explanation .training-stop p { color: #9a1234; }
:root.light .training-no-box strong { color: #4c2aa5; }
.training-explanation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.training-explanation > div { padding: 15px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.training-explanation small { color: #aeb2bf; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.training-explanation p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.training-explanation .training-stop { border-color: var(--red); background: var(--red-soft); }
.training-explanation .training-stop small, .training-explanation .training-stop p { color: #ff91a4; }
.training-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.training-nav button { min-height: 44px; padding: 8px 14px; }
.training-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.training-metrics span { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--muted); }
.training-metrics b { color: inherit; font-size: 24px; }
.training-demo-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.training-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.training-demo-grid > div { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.training-demo-grid small { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.training-route { display: grid; gap: 8px; padding: 16px; border-left: 4px solid var(--purple); background: var(--panel-2); }
.training-route span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.training-field { max-width: 620px; }
.training-scan { padding: 16px; border: 2px solid var(--purple); border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.training-label { justify-self: center; display: grid; width: min(420px, 100%); gap: 8px; padding: 20px; border: 3px solid #111; border-radius: 5px; color: #111; background: #fff; text-align: center; }
.training-label b { font-size: 17px; }
.training-label small { padding-top: 8px; border-top: 1px solid #111; color: #555; }
.training-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--panel-2); font-size: 13px; text-transform: none; letter-spacing: 0; }
.training-event input { width: 18px; min-height: auto; }
.training-problem, .training-warning, .training-truck, .training-preview-doc { display: grid; gap: 8px; padding: 18px; border-radius: 12px; }
.training-problem { border: 1px solid var(--red); background: var(--red-soft); }
.training-problem strong { color: var(--red); font-size: 20px; }
.training-warning { border: 1px solid var(--orange); background: var(--orange-soft); color: #ffd995; }
.training-truck { border: 1px solid var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); color: #9fe5ff; }
.training-preview-doc { border: 1px solid var(--green); background: var(--green-soft); color: #a8ead3; }
.training-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.training-checks span { padding: 14px; border: 1px solid var(--green); border-radius: 9px; color: var(--green); background: var(--green-soft); }
.training-qr { justify-self: center; display: grid; width: min(300px, 100%); gap: 7px; padding: 18px; border: 3px solid #111; color: #111; background: #fff; text-align: center; }
.training-qr > div { width: 120px; height: 120px; justify-self: center; border: 8px solid #111; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 50% / 18px 18px; }
.training-qr small { color: #555; }
.training-glossary { margin-top: 26px; }
.training-glossary .section-heading { align-items: end; }
.training-glossary .section-heading h2 { margin: 0 0 5px; color: var(--text); font-size: 24px; letter-spacing: -.025em; text-transform: none; }
.training-glossary .section-heading p { margin: 0; color: var(--muted); }
.training-glossary details { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.training-glossary summary { display: flex; justify-content: space-between; gap: 20px; padding: 15px 17px; cursor: pointer; font-weight: 800; }
.training-glossary summary span { color: var(--muted); }
.training-glossary .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.training-glossary table { min-width: 900px; }
.training-glossary th, .training-glossary td { padding: 12px 14px; }
.training-glossary .badge { min-height: 28px; padding: 4px 9px; font-size: 11px; }
.training-no-box { display: grid; gap: 8px; margin-top: 18px; padding: 20px; border: 1px solid var(--purple); border-radius: 12px; background: var(--purple-soft); }
.training-no-box strong { color: #d4cdff; font-size: 18px; }
.training-no-box span { color: #aaa2d8; }

.login-page { display: grid; min-height: 100vh; place-items: center; background: radial-gradient(circle at 50% 12%, #282149 0, var(--bg) 38%); }
.login-card { width: min(460px, calc(100% - 32px)); background: var(--panel); padding: 40px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 28px 90px rgba(0,0,0,.32); }
.login-card h1 { margin: 18px 0 6px; font-size: 38px; letter-spacing: -.04em; }
.login-card > p { margin: 0 0 30px; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 17px; background: var(--purple-soft); border: 1px solid var(--purple); font-weight: 900; }
.form-error { padding: 13px; border: 1px solid var(--red); border-radius: 10px; color: var(--red); }
.demo-hint { margin-top: 24px; color: var(--muted); font-size: 13px; }
.demo-hint p { margin: 7px 0; }

@media (max-width: 1600px) {
  .topbar { gap: 12px; padding-inline: 14px; }
  .logo { gap: 7px; }
  nav { gap: 2px; }
  nav a { padding-inline: 7px; font-size: 14px; }
  nav kbd { display: inline-block; margin-left: 5px; padding: 2px 4px; font-size: 9px; }
  .topbar-right { gap: 6px; }
  #freshness { font-size: 11px; }
  .user-name { max-width: 70px; font-size: 13px; }
  .user-badge { padding: 6px 8px; font-size: 9px; }
  .icon-button { width: 40px; height: 40px; }
}

body.navigation-guard-open { overflow: hidden; }
.navigation-guard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 4, 7, .76);
  backdrop-filter: blur(8px);
}
.navigation-guard-backdrop[hidden] { display: none; }
.navigation-guard-dialog {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
.navigation-guard-dialog h2 { margin: 0 0 12px; color: var(--text); }
.navigation-guard-dialog p { margin: 0; color: var(--muted); }
.navigation-guard-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; }

@media (max-width: 1280px) {
  .topbar { gap: 14px; padding-inline: 18px; }
  .logo-title { font-size: 18px; }
  .warehouse-title { font-size: 10px; }
  nav a { padding-inline: 11px; font-size: 14px; }
  #freshness { display: none; }
  .user-name { display: none; }
  .page { padding-inline: 24px; }
  .supply-builder { grid-template-columns: 270px 340px 170px; gap: 10px; }
  .pick-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supply-fields { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .pick-selection-actions { grid-column: 1 / -1; }
  .pick-sheet-toolbar { grid-template-columns: 1fr; }
  .pick-sheet-actions { justify-items: start; }
  .pick-sheet-action-buttons { justify-content: flex-start; }
  .pick-shortage-card { grid-template-columns: auto minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(130px, auto); }
  .pick-shortage-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .pick-columns { columns: 1 auto; }
  .training-layout { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .topbar { min-height: auto; align-items: flex-start; flex-wrap: wrap; padding: 14px 18px; gap: 12px; }
  nav { order: 3; flex: 1 0 100%; width: 100%; }
  .topbar-right { margin-left: auto; }
  .page { padding: 22px 18px 70px; }
  .grid-2, .pack-workspace, .supply-builder, .pick-filters { grid-template-columns: 1fr; }
  .supply-topline { grid-template-columns: 44px minmax(0, 1fr); }
  .supply-name { grid-column: 1 / -1; }
  .supply-fields { grid-column: auto; grid-template-columns: 1fr; }
  .pick-categories, .pick-selection-actions { grid-column: auto; }
  .pick-guide-grid { grid-template-columns: 1fr; }
  .pick-shortage-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .pick-shortage-reference, .pick-shortage-quantity, .pick-shortage-actions { grid-column: 2; }
  .history-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-list { grid-template-columns: 1fr; }
  .queue-toolbar { align-items: stretch; flex-direction: column; }
  .queue-toolbar .chips { flex-wrap: wrap; overflow: visible; }
  .queue-toolbar-meta { justify-content: space-between; }
  .dashboard-top-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-risk-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-risk-grid, .dashboard-two-columns { grid-template-columns: 1fr; }
  .training-hero, .training-layout, .review-hero, .training-safe-control { grid-template-columns: 1fr; }
  .review-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-timeline { max-height: 360px; position: static; }
  .training-explanation { grid-template-columns: 1fr; }
  .training-mini-form { grid-template-columns: 1fr; }
  .training-mini-row { grid-template-columns: minmax(110px, .8fr) minmax(140px, 1.2fr); }
  .training-mini-row > :last-child { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 650px) {
  .warehouse-title, #role-badge { display: none; }
  .pack-supply-row { grid-template-columns: 1fr; gap: 12px; }
  .pack-supply-row .pack-remaining-toggle { width: 100%; }
  .pick-guide > summary { gap: 10px; min-height: 68px; padding: 11px 42px 11px 12px; }
  .pick-guide-icon { width: 38px; height: 38px; font-size: 19px; }
  .pick-guide > summary .pick-guide-summary-copy strong { font-size: 16px; }
  .pick-guide > summary .pick-guide-summary-copy > span { font-size: 12px; }
  .pick-guide-cta { display: none; }
  .pick-guide > summary::after { right: 14px; }
  .pick-guide-grid { padding: 10px; }
  .page-title { align-items: flex-start; flex-direction: column; }
  .subpage-heading { align-items: flex-start; flex-direction: column; }
  .metric { min-height: 128px; }
  .history-filters { grid-template-columns: 1fr; }
  .sync-row { grid-template-columns: 1fr auto; }
  .sync-row .muted { grid-column: 1 / -1; grid-row: 2; }
  .legend-row { grid-template-columns: 1fr; gap: 8px; }
  .dashboard-top-metrics, .dashboard-shipment-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-exception-metrics { grid-template-columns: 1fr; }
  .review-summary, .review-facts, .review-resolve { grid-template-columns: 1fr; }
  .review-playbook-list { grid-template-columns: 1fr; }
  .review-playbook-list summary { align-items: flex-start; flex-wrap: wrap; }
  .review-resolve > label:first-child { grid-column: auto; }
  .training-link { padding-inline: 9px; font-size: 11px; }
  .training-stage { padding: 18px; }
  .training-stage-head h2 { font-size: 24px; }
  .training-demo-grid, .training-metrics, .training-checks { grid-template-columns: 1fr; }
  .training-preview { min-height: 0; padding: 10px; }
  .training-screen-bar { grid-template-columns: 1fr auto; }
  .training-screen-bar > span:first-child { display: none; }
  .training-screen-body { min-height: 0; padding: 13px; }
  .training-simulator-head, .training-simulator-foot, .training-screen-head { align-items: stretch; flex-direction: column; }
  .training-guide-control { grid-template-columns: 1fr; }
  .training-guide-control button { width: 100%; white-space: normal; }
  .training-safe-mark { justify-self: start; }
  .training-compare { grid-template-columns: 1fr; }
  .training-pick-row { grid-template-columns: 1fr; }
  .training-pick-row label { text-align: left; }
  .training-pick-edit > span { justify-content: flex-start; }
  .training-mini-actions button { width: 100%; }
  .training-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-nav #training-reset { grid-column: 1 / -1; grid-row: 2; }
}

@page { size: A4 portrait; margin: 10mm; }

@media print {
  body { background: #fff; }
  .topbar, .no-print, .page > :not(.pick-sheet) { display: none !important; }
  .print-only { display: inline-block !important; }
  .page { max-width: none; padding: 0; }
  .pick-sheet { padding: 0; border-radius: 0; }
  .pick-columns { columns: 2; }
  .pick-header { font-size: 13px; }
  .pick-box h4 { font-size: 11px; }
  .pick-box h4 > span:first-child { font-size: 14px; font-weight: 950; }
  .pick-line { grid-template-columns: 62px minmax(0, 1fr) 42px 22px 14px; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; min-height: 52px; padding: 4px 5px; font-size: 10px; line-height: 1.2; }
  .pick-line .box-code { grid-column: 1; grid-row: 1 / span 2; align-self: center; padding: 5px 4px; border-color: #000; border-radius: 4px; color: #000; background: #e8e8e8; }
  .pick-line .box-code span { font-size: 13px; }
  .pick-line .pick-article { grid-column: 2; grid-row: 1; display: grid; align-content: end; gap: 2px; min-width: 0; font-size: 11px; line-height: 1.2; }
  .pick-line .pick-article-value { overflow-wrap: anywhere; word-break: normal; }
  .pick-line .pick-box-stock { display: block !important; color: #000; font-size: 9px; font-weight: 950; line-height: 1.15; }
  .pick-line .barcode { grid-column: 2; grid-row: 2; min-width: 0; padding: 4px 5px; border-color: #000; background: #fff; font-size: 16px; font-weight: 950; letter-spacing: 0; overflow-wrap: normal; white-space: nowrap; }
  .pick-line .pick-size { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 18px; }
  .pick-line .pick-planned-quantity { grid-column: 4; grid-row: 1 / span 2; align-self: center; font-size: 14px; font-weight: 950; line-height: 1; text-align: center; }
  .pick-line .pick-mark-box { grid-column: 5; grid-row: 1 / span 2; align-self: center; }
}