:root {
  color-scheme: light;
  --ink: #273142;
  --ink-strong: #172033;
  --muted: #707b8f;
  --canvas: #f7f8fc;
  --panel: #ffffff;
  --panel-soft: #fafbfe;
  --line: #e4e8f0;
  --line-strong: #d7ddea;
  --primary: #2860cf;
  --primary-dark: #204da9;
  --primary-soft: #eaf1ff;
  --cold-pink: #b43d79;
  --cold-pink-dark: #8d2c5e;
  --future-yellow: #e1ac20;
  --violet: #8977ba;
  --violet-soft: #f3f0fa;
  --teal: #3d9b93;
  --teal-soft: #eaf7f5;
  --amber: #b9782f;
  --amber-bg: #fff6e8;
  --red: #b34f5b;
  --red-soft: #fff0f2;
  --shadow-float: 0 18px 45px rgba(40, 49, 75, .12);
  --sidebar-width: 224px;
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--canvas); }
body[data-section="refrigerator"] { --primary: var(--cold-pink); --primary-dark: var(--cold-pink-dark); --primary-soft: #fdebf3; }
body.nav-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.app-sidebar {
  position: sticky; top: 0; z-index: 45; display: flex; flex-direction: column; height: 100vh;
  padding: 18px 14px; background: #fff; border-right: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-height: 48px; padding: 4px 6px; text-decoration: none; }
.brand-mark { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; color: var(--primary); background: var(--primary-soft); border-radius: 10px; }
.brand-mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.brand strong, .brand small { display: block; white-space: nowrap; }
.brand strong { color: var(--ink-strong); font-size: 14px; letter-spacing: -.01em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.sidebar-nav { display: grid; gap: 5px; margin-top: 24px; }
.nav-group-label { margin: 12px 10px 5px; color: #9aa3b3; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.nav-button {
  display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 9px 11px;
  color: #596579; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 9px;
  font-size: 13px; font-weight: 650; transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.nav-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-button:hover { color: var(--primary-dark); background: #f7f9fd; }
.nav-button.active { color: var(--primary-dark); background: var(--primary-soft); border-color: #e3e9f7; }
.sidebar-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 14px 10px 3px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; }
.status-dot { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 3px var(--teal-soft); }

.app-content { min-width: 0; }
.app-header {
  position: sticky; top: 0; z-index: 35; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(260px, 430px) auto auto;
  align-items: center; gap: 15px; min-height: 66px; padding: 10px clamp(18px, 2.4vw, 34px);
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
}
.app-header .mobile-menu { display: none; }
.context-path { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 12px; }
.context-path i { color: #b2bac8; font-style: normal; }
.context-path strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.app-search { position: relative; }
.app-search svg { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; color: #98a3b5; fill: none; stroke: currentColor; stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.app-search input { height: 40px; padding-right: 56px; padding-left: 39px; background: var(--panel-soft); }
.app-search-submit { position: absolute; top: 5px; right: 5px; min-height: 30px; padding: 4px 9px; color: var(--primary-dark); background: var(--primary-soft); border: 0; border-radius: 6px; font-size: 10px; }
.identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; color: #fff; background: linear-gradient(140deg, #758fca, #9384bd); border-radius: 50%; font-size: 10px; font-weight: 800; }
.identity-copy { min-width: 0; }
.identity-copy strong, .identity-copy small { display: block; overflow: hidden; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; }
.identity-copy strong { color: var(--ink-strong); font-size: 11px; }
.identity-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.test-mode-banner { display: flex; justify-content: center; gap: 8px; padding: 7px 18px; color: #7e5b25; background: #fff9ed; border-bottom: 1px solid #f0dfbd; font-size: 11px; }
.test-mode-banner strong { color: #9b6721; }

main { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 78px; }
.view { display: none; }
.view.active { display: block; animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(3px); } }
.page-heading, .panel-heading, .box-toolbar, .dialog-heading, .dialog-actions, .button-row, .page-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.page-heading { margin-bottom: 20px; }
.page-heading h1 { margin: 3px 0 0; color: var(--ink-strong); font-size: clamp(24px, 2.5vw, 31px); font-weight: 700; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: var(--primary); font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.subtitle, .hint { color: var(--muted); }
.subtitle { margin: 7px 0 0; font-size: 12px; }
.hint { margin: 13px 0 0; font-size: 11px; line-height: 1.65; }
.soft-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--violet); background: var(--violet-soft); border-radius: 9px; font-size: 10px; font-weight: 800; }

.panel { padding: 19px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.panel + .panel { margin-top: 16px; }
.panel-heading { margin-bottom: 15px; }
.panel h2 { margin: 3px 0 0; color: var(--ink-strong); font-size: 17px; font-weight: 680; letter-spacing: -.015em; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.two-column > .panel { margin-top: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.freezer-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { position: relative; min-height: 93px; padding: 15px 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.metric::after { content: ""; position: absolute; right: -16px; bottom: -22px; width: 62px; height: 62px; background: var(--primary-soft); border-radius: 50%; opacity: .8; }
.metric:nth-child(2n)::after { background: var(--violet-soft); }
.metric strong { display: block; margin-top: 12px; color: var(--ink-strong); font-size: 25px; font-weight: 700; line-height: 1; }
.metric span { color: var(--muted); font-size: 11px; }
.metric.alert { background: var(--amber-bg); border-color: #f0ddbc; }
.metric.alert::after { background: #f8e5c7; }

.storage-entrances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 17px; }
.storage-entrance { display: grid; gap: 6px; min-height: 148px; padding: 17px 19px; text-align: left; background: #fff; border: 1px solid var(--line); border-top: 4px solid transparent; border-radius: 11px; }
.storage-entrance span { width: max-content; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.storage-entrance strong { color: var(--ink-strong); font-size: 16px; }
.storage-entrance small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.storage-entrance.minus80 { background: linear-gradient(135deg, #f4f8ff, #fff); border-color: #cfddf8; border-top-color: #2860cf; }
.storage-entrance.minus80 span, .storage-entrance.minus80 .storage-value { color: #204da9; background: #e6efff; }
.storage-entrance.plus4 { background: linear-gradient(135deg, #fff5fa, #fff); border-color: #f2d5e3; border-top-color: var(--cold-pink); }
.storage-entrance.plus4 span, .storage-entrance.plus4 .storage-value { color: var(--cold-pink-dark); background: #fce5ef; }
.storage-entrance.future { background: linear-gradient(135deg, #fffbed, #fff); border-color: #f3e5b7; border-top-color: var(--future-yellow); }
.storage-entrance.future span, .storage-entrance.future .storage-value { color: #795916; background: #fff1bf; }
.storage-value { width: fit-content; padding: 3px 8px; border-radius: 6px; font-size: 18px; line-height: 1.3; }
.overview-search-panel { margin-bottom: 14px; padding: 18px 20px; border-color: #d9e3f7; }
.overview-search-panel form { display: grid; gap: 9px; }
.overview-search-panel label { color: var(--ink-strong); font-size: 15px; font-weight: 750; }
.overview-search-row { display: flex; gap: 10px; }
.overview-search-row input { min-width: 0; flex: 1; min-height: 44px; }
.overview-search-row button { min-width: 116px; }
.overview-attention { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 15px; }
.attention-chip { min-height: 34px; padding: 7px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; }
button.attention-chip:hover { border-color: var(--primary); color: var(--primary-dark); }
.overview-more { margin-top: 8px; }
.overview-more > summary { width: fit-content; padding: 10px 2px; color: var(--primary-dark); cursor: pointer; font-size: 12px; font-weight: 700; }
.overview-more > .two-column { margin-top: 8px; }
.storage-entrance:is(button):hover { border-color: var(--primary); box-shadow: 0 5px 18px rgba(68, 85, 130, .1); }

.cold-zone-panel { margin-bottom: 16px; }
.cold-zone-grid { display: grid; gap: 8px; max-width: 760px; }
.cold-zone { display: grid; grid-template-columns: 95px 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; text-align: left; background: #fbfcff; border: 1px solid var(--line-strong); border-radius: 9px; }
.cold-zone:hover, .cold-zone.active { background: #fff0f7; border-color: #dc9cbb; }
.cold-zone-code { color: var(--cold-pink-dark); font-size: 11px; font-weight: 800; }
.cold-zone strong { color: var(--ink); font-size: 13px; }
.cold-zone small { color: var(--muted); font-size: 10px; }
.cold-filters { display: flex; gap: 10px; margin: 0 0 14px; }
.cold-filters .grow { flex: 1; }
.cold-filters label { min-width: 180px; }
.cold-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.cold-item { display: grid; gap: 9px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.cold-item-head, .cold-item-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cold-item-head strong { color: var(--ink-strong); font-size: 14px; }
.cold-item-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.inventory-status.in-stock { color: #146d67; background: var(--teal-soft); }
.inventory-status.used-up { color: var(--red); background: var(--red-soft); }
.inventory-status.unknown { color: var(--amber); background: var(--amber-bg); }
.stock-balance { width: fit-content; padding: 6px 9px; color: #146d67; background: var(--teal-soft); border: 1px solid #cbe9e5; border-radius: 7px; font-size: 12px; font-weight: 800; }
.stock-balance.unknown { color: var(--amber); background: var(--amber-bg); border-color: #ead7b8; }
.stock-balance.empty { color: var(--red); background: var(--red-soft); border-color: #f0d1d0; }
.cold-item-details, .cold-item-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.cold-item-note { padding: 7px 9px; background: var(--panel-soft); border-radius: 6px; }
.cold-item-footer { padding-top: 9px; border-top: 1px solid var(--line); }
.cold-item-footer small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.cold-item-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.cold-item-footer .button-row { flex: 0 0 auto; gap: 5px; }
.cold-item-footer button { min-height: 31px; padding: 5px 8px; font-size: 10px; }
.movement-item { align-items: start; }
.movement-item > div { display: grid; gap: 4px; }
.movement-item > small { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.legacy-fields { margin-top: 9px; }
.cold-status.found { color: #267f77; background: var(--teal-soft); }
.cold-status.unverified { color: var(--amber); background: var(--amber-bg); }
.cold-status.missing { color: var(--red); background: var(--red-soft); }
.cold-status.removed { color: var(--muted); background: #edf0f4; }

.freezer-map-panel { margin-bottom: 16px; overflow: hidden; }
.freezer-map-heading label { min-width: 230px; }
.inventory-progress { display: grid; gap: 7px; margin-bottom: 14px; padding: 12px 14px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 9px; }
.progress-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.progress-summary strong { color: var(--ink); }
.progress-track { display: flex; height: 7px; overflow: hidden; background: #edf0f5; border-radius: 99px; }
.progress-segment { min-width: 0; transition: flex-basis .2s ease; }
.progress-segment.unreviewed { background: #cfd5df; }
.progress-segment.quick { background: #d5b88d; }
.progress-segment.standard { background: #859bcf; }
.progress-segment.complete { background: #8b7fba; }
.progress-key { display: flex; flex-wrap: wrap; gap: 11px; color: var(--muted); font-size: 9px; }
.progress-key span { display: inline-flex; align-items: center; gap: 5px; }
.progress-key i { width: 8px; height: 8px; border-radius: 2px; }
.layer-tabs { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.layer-tab { flex: 0 0 auto; min-height: 34px; padding: 7px 13px; color: var(--primary-dark); background: #fff; border-color: var(--line-strong); }
.layer-tab.active { color: var(--primary-dark); background: var(--primary-soft); border-color: #cfd9ef; box-shadow: inset 0 -2px var(--primary); }
.freezer-map { display: grid; grid-template-columns: repeat(4, minmax(205px, 1fr)); gap: 10px; overflow-x: auto; padding: 2px 1px 8px; }
.rack-tower { min-width: 205px; padding: 10px; background: #f8f9fc; border: 1px solid var(--line-strong); border-radius: 9px; }
.rack-title { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; font-size: 10px; }
.rack-title strong { color: var(--ink-strong); font-size: 12px; }
.rack-title span { color: var(--muted); font-size: 9px; }
.drawer-row { display: grid; grid-template-columns: 35px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: stretch; padding: 5px; margin-top: 5px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.drawer-label { display: grid; place-items: center; color: var(--muted); font-size: 9px; font-weight: 750; }
.map-slot { position: relative; min-width: 0; min-height: 53px; padding: 5px 3px; color: var(--muted); background: #fbfcfe; border: 1px dashed #cbd2de; border-radius: 6px; font-size: 8px; line-height: 1.25; }
.map-slot strong, .map-slot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-slot strong { margin: 2px 0 3px; color: var(--ink); font-size: 11px; }
.map-slot small { font-size: 8px; }
.map-slot.occupied { border-style: solid; border-color: #b8c6e4; background: #f0f4fc; }
.map-slot.quick { border-color: #c9c0df; background: #f5f2fa; }
.map-slot.unreviewed { border-color: #e1c69e; background: var(--amber-bg); }
.map-slot.complete { color: #fff; background: #788bc2; border-color: #788bc2; }
.map-slot.complete strong { color: #fff; }
.map-slot.empty:hover { color: var(--primary-dark); background: var(--primary-soft); border-color: var(--primary); }

button, .button-link { border: 1px solid transparent; border-radius: 8px; font-weight: 650; transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease; }
button:active, .button-link:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #8399cf; outline-offset: 2px; }
.primary, .secondary, .danger, .button-link { min-height: 40px; padding: 9px 14px; }
.primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.primary.compact { min-height: 38px; padding: 8px 14px; font-size: 12px; }
.secondary { color: var(--primary-dark); background: #fff; border-color: var(--line-strong); }
.secondary:hover { background: var(--primary-soft); border-color: #c7d2eb; }
.danger { color: #fff; background: var(--red); border-color: var(--red); }
.danger.ghost { color: var(--red); background: #fff; }
.text-button, .icon-button { padding: 5px; color: var(--primary-dark); background: transparent; border: 0; }
.text-button:hover { color: var(--violet); }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; font-size: 25px; font-weight: 400; }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.full { width: 100%; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; color: var(--primary-dark); background: var(--primary-soft); border-radius: 99px; font-size: 10px; font-weight: 700; }
.tag.dark { color: #fff; background: var(--violet); }
.tag.success { color: #397e77; background: var(--teal-soft); }
.tag.success i { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }

label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
input, select, textarea { width: 100%; padding: 9px 10px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; }
input::placeholder, textarea::placeholder { color: #aab2bf; }
input:focus, select:focus, textarea:focus { border-color: #91a4d3; box-shadow: 0 0 0 3px rgba(100, 127, 196, .12); }
textarea { resize: vertical; line-height: 1.5; }
fieldset { margin: 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; }
legend { color: var(--muted); font-size: 10px; font-weight: 700; }
.check { display: inline-flex; grid-template-columns: auto 1fr; align-items: center; gap: 7px; margin-right: 15px; color: var(--ink); font-weight: 500; }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }
.direct-search { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.direct-search input { font-size: 19px; font-weight: 750; letter-spacing: .14em; }
.filters { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; }
.filters .grow { flex: 1; }
.filters label:not(.grow) { min-width: 150px; }

.compact-list, .activity-list { display: grid; }
.compact-item, .activity-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.compact-item:first-child, .activity-item:first-child { border-top: 0; }
.compact-item button { text-align: left; }
.compact-item strong, .activity-item strong { display: block; color: var(--ink-strong); font-size: 12px; }
.compact-item small, .activity-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.activity-item { grid-template-columns: minmax(0, 1fr) auto; font-size: 11px; }

.box-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.box-card { display: grid; grid-template-rows: auto 1fr auto; min-height: 156px; padding: 15px; text-align: left; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.box-card:hover { border-color: #aebde0; background: #fdfdff; transform: translateY(-1px); }
.box-card-head { display: flex; justify-content: space-between; gap: 12px; }
.box-number { color: var(--ink-strong); font-size: 22px; font-weight: 700; }
.box-card h3 { margin: 15px 0 4px; font-size: 13px; }
.box-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.box-card-foot { display: flex; justify-content: space-between; padding-top: 11px; margin-top: 11px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
.empty-state { grid-column: 1 / -1; padding: 42px; color: var(--muted); text-align: center; background: #fff; border: 1px dashed var(--line-strong); border-radius: 10px; }
.search-results { margin-bottom: 16px; padding: 14px; background: var(--primary-soft); border: 1px solid #d5dff2; border-radius: 10px; }
.search-results h3 { margin: 0 0 10px; font-size: 12px; }
.search-result-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 7px; }
.search-result { display: grid; gap: 6px; padding: 10px; color: var(--primary-dark); text-align: left; background: #fff; border: 1px solid #d3dced; border-radius: 7px; font-weight: 600; }
.search-result strong { font-size: 11px; }
.search-result small { color: var(--muted); font-size: 9px; font-weight: 600; line-height: 1.5; }
.pick-route { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--primary-dark); font-size: 9px; }
.pick-route span { padding: 2px 5px; background: var(--primary-soft); border-radius: 4px; }
.pick-route i { color: #9ba6b8; font-style: normal; }
.hidden { display: none !important; }

.box-toolbar { margin-bottom: 16px; }
.box-heading { align-items: end; }
.box-status { display: flex; gap: 8px; }
.box-layout { display: grid; grid-template-columns: minmax(620px, 1.35fr) minmax(390px, .65fr); gap: 16px; align-items: start; }
.plate-panel { overflow: auto; }
.plate { --columns: 9; display: grid; grid-template-columns: 29px repeat(var(--columns), minmax(46px, 1fr)); gap: 6px; min-width: 580px; }
.plate-label { display: grid; place-items: center; min-height: 26px; color: var(--muted); font-size: 9px; font-weight: 750; }
.well { position: relative; min-height: 59px; padding: 6px; overflow: hidden; color: var(--muted); text-align: left; background: #fbfcfe; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 9px; font-weight: 600; user-select: none; }
.well strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 10px; }
.well span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.well.occupied { background: var(--batch-bg, #eef2fb); border-color: var(--batch-border, #a9b8da); }
.well.placeholder { background: var(--amber-bg); border-color: #dfc39a; }
.well.selected { color: #fff; background: var(--primary); border-color: var(--primary-dark); box-shadow: 0 0 0 2px rgba(100, 127, 196, .16); }
.well.selected strong { color: #fff; }
.plate.dragging .well { touch-action: none; }
.selection-actions, .plate-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.plate-legend { margin: 15px 0 0; color: var(--muted); font-size: 9px; }
.plate-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; background: #eef2fb; border: 1px solid #afbddb; border-radius: 2px; }
.legend-dot.placeholder { background: var(--amber-bg); }
.legend-dot.selected { background: var(--primary); }
.selection-count { color: var(--primary-dark); font-size: 11px; font-weight: 750; }
.batch-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.batch-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 4px 7px; color: var(--muted); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 99px; font-size: 9px; }
.batch-chip i { flex: 0 0 auto; width: 9px; height: 9px; background: var(--batch-bg); border: 1px solid var(--batch-border); border-radius: 2px; }
.batch-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.workflow-panel { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.workflow-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel-soft); border-bottom: 1px solid var(--line); }
.workflow-tab { min-height: 50px; padding: 7px; color: var(--muted); background: transparent; border: 0; border-radius: 0; font-size: 10px; }
.workflow-tab.active { color: var(--primary-dark); background: #fff; box-shadow: inset 0 -2px var(--primary); }
.workflow { display: none; padding: 18px; }
.workflow.active { display: block; }
.notice { display: grid; gap: 4px; margin-bottom: 15px; padding: 12px; color: var(--ink); background: var(--primary-soft); border: 1px solid #dce4f3; border-radius: 8px; font-size: 10px; line-height: 1.5; }
.notice span { color: var(--muted); }
.divider { display: flex; align-items: center; gap: 10px; margin: 17px 0; color: var(--muted); font-size: 9px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
details { margin: 0 0 14px; color: var(--muted); font-size: 10px; }
details code { display: block; margin-top: 8px; padding: 9px; overflow: auto; color: var(--ink); background: var(--panel-soft); border: 1px solid var(--line); }
.paste-area { min-height: 230px; font: 11px/1.5 Consolas, monospace; white-space: pre; }

.export-actions { display: grid; gap: 9px; }
.table-panel { margin-top: 16px; }
.table-scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 10px; }
th, td { padding: 10px 9px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); background: var(--panel-soft); font-size: 9px; font-weight: 750; letter-spacing: .06em; }
td code { color: var(--muted); font-size: 9px; }
.completeness { font-weight: 750; }
.completeness.placeholder { color: var(--amber); }
.completeness.complete { color: var(--teal); }
.user-list { display: grid; gap: 8px; margin-top: 16px; }
.user-row { display: grid; grid-template-columns: minmax(220px, 1fr) 160px 110px auto; gap: 11px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 8px; }

dialog { width: min(640px, calc(100% - 30px)); max-height: calc(100vh - 30px); padding: 0; overflow: auto; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-float); }
dialog::backdrop { background: rgba(29, 36, 55, .5); backdrop-filter: blur(3px); }
dialog:focus { outline: none; }
.bottom-sheet-handle { display: none; }
.dialog-form { display: grid; gap: 15px; padding: 22px; }
.dialog-form.wide { width: min(1000px, calc(100vw - 30px)); }
#sample-dialog { width: min(1000px, calc(100% - 30px)); }
.dialog-heading { align-items: start; }
.dialog-heading h2 { margin: 0; color: var(--ink-strong); font-size: 21px; font-weight: 700; }
.dialog-actions { padding-top: 14px; border-top: 1px solid var(--line); }
.dialog-actions.split { flex-wrap: wrap; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; width: min(360px, calc(100% - 36px)); }
.toast { padding: 12px 14px; color: #fff; background: var(--primary-dark); border-radius: 8px; box-shadow: var(--shadow-float); animation: toast-in .18s ease-out; font-size: 11px; }
.toast.error { background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(5px); } }
.loading { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 11px; color: #fff; background: rgba(32, 40, 61, .48); font-size: 12px; font-weight: 750; }
.spinner { width: 30px; height: 30px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-bottom-nav { display: none; }

@media (max-width: 1180px) {
  :root { --sidebar-width: 76px; }
  .brand { justify-content: center; }
  .brand > span:last-child, .nav-button span, .nav-group-label, .sidebar-foot span:last-child { display: none; }
  .sidebar-nav { justify-items: stretch; }
  .sidebar-nav .nav-button { justify-content: center; padding-inline: 0; }
  .sidebar-foot { justify-content: center; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .freezer-metrics { grid-template-columns: repeat(4, 1fr); }
  .box-grid { grid-template-columns: repeat(3, 1fr); }
  .box-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .app-header { grid-template-columns: minmax(130px, 1fr) minmax(220px, 1fr) auto; }
  .app-header .primary.compact { display: none; }
  .identity-copy { display: none; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters .grow { grid-column: 1 / -1; }
  .filters label:not(.grow) { min-width: 0; }
  .freezer-metrics { grid-template-columns: repeat(2, 1fr); }
  .two-column { grid-template-columns: 1fr; }
  .storage-entrances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cold-results { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --sidebar-width: 0px; }
  .app-shell { display: block; }
  .app-sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw); height: 100dvh; padding: 16px 14px; box-shadow: var(--shadow-float); transform: translateX(-105%); transition: transform .2s ease; }
  .app-sidebar::after { content: ""; position: fixed; inset: 0 0 0 100%; width: 100vw; background: rgba(30, 38, 57, .34); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.nav-open .app-sidebar { transform: translateX(0); }
  body.nav-open .app-sidebar::after { opacity: 1; pointer-events: auto; }
  .brand { justify-content: flex-start; }
  .brand > span:last-child, .nav-button span, .nav-group-label, .sidebar-foot span:last-child { display: block; }
  .sidebar-nav .nav-button { justify-content: flex-start; padding-inline: 11px; }
  .sidebar-foot { justify-content: flex-start; }
  .app-header { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 7px; min-height: 60px; padding: 8px 12px; }
  .app-header .mobile-menu { display: grid; }
  .context-path { font-size: 11px; }
  .context-path span, .context-path i { display: none; }
  .app-search { grid-column: 1 / -1; grid-row: 2; }
  .app-search input { height: 39px; }
  .identity { justify-self: end; }
  .test-mode-banner { align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 12px; overflow: hidden; font-size: 9px; white-space: nowrap; }
  .test-mode-banner span { overflow: hidden; text-overflow: ellipsis; }
  main { width: min(100% - 24px, 1480px); padding: 20px 0 104px; }
  .page-heading, .box-heading { align-items: flex-start; flex-direction: column; margin-bottom: 16px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading .button-row, .page-heading .page-status { width: 100%; }
  .page-heading .button-row > *, .page-heading .page-status > button { flex: 1; }
  #view-refrigerator .page-heading .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #view-refrigerator .page-heading .button-row > * { display: grid; place-items: center; min-height: 39px; white-space: nowrap; }
  #view-refrigerator #cold-add { grid-column: 1 / -1; }
  .subtitle { font-size: 11px; }
  .panel { padding: 15px; border-radius: 10px; }
  .panel h2 { font-size: 15px; }
  .metric-grid, .freezer-metrics { display: flex; gap: 8px; margin-right: -12px; margin-left: -12px; padding: 0 12px 3px; overflow-x: auto; scroll-snap-type: x proximity; }
  .metric { flex: 0 0 130px; min-height: 82px; padding: 13px; scroll-snap-align: start; }
  .metric strong { margin-top: 10px; font-size: 21px; }
  .overview-actions { gap: 12px; }
  .storage-entrances { grid-template-columns: 1fr 1fr; gap: 8px; }
  .storage-entrance { min-height: 120px; padding: 13px; }
  .storage-entrance.future { grid-column: 1 / -1; min-height: 82px; }
  .storage-entrance strong { font-size: 14px; }
  .storage-value { font-size: 15px; }
  .overview-search-panel { padding: 14px; }
  .overview-search-row { flex-direction: column; }
  .overview-search-row button { min-height: 42px; }
  .cold-zone { grid-template-columns: 64px 1fr; gap: 5px 9px; min-height: 56px; padding: 9px 11px; }
  .cold-zone small { grid-column: 2; }
  .cold-filters { flex-direction: column; }
  .cold-filters label { min-width: 0; }
  .cold-item-footer { align-items: stretch; flex-direction: column; }
  .cold-item-actions { justify-content: flex-start; }
  .cold-item-footer .button-row { justify-content: flex-end; }
  .direct-search { grid-template-columns: 1fr; }
  .direct-search button { min-height: 45px; }
  .filters { grid-template-columns: 1fr; padding: 13px; }
  .filters .grow { grid-column: auto; }
  .box-grid { grid-template-columns: 1fr; }
  .box-card { min-height: 142px; }
  .freezer-map-panel { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; }
  .freezer-map-heading { align-items: stretch; flex-direction: column; }
  .freezer-map-heading label { min-width: 0; }
  .inventory-progress { padding: 10px; }
  .progress-summary { font-size: 9px; }
  .freezer-map { grid-template-columns: repeat(4, 220px); scroll-snap-type: x mandatory; }
  .rack-tower { min-width: 220px; scroll-snap-align: center; }
  .map-slot { min-height: 57px; }
  .box-toolbar { align-items: center; }
  .box-toolbar .button-row { gap: 5px; }
  .box-toolbar .button-row button { min-height: 36px; padding: 7px 9px; font-size: 10px; }
  .box-layout { gap: 12px; }
  .plate-panel { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; }
  .plate { grid-template-columns: 25px repeat(var(--columns), minmax(45px, 1fr)); gap: 5px; min-width: 520px; }
  .well { min-height: 57px; }
  .selection-actions { flex-wrap: nowrap; overflow-x: auto; }
  .selection-actions button { flex: 0 0 auto; min-height: 38px; font-size: 10px; }
  .workflow-tabs { grid-template-columns: repeat(4, minmax(92px, 1fr)); overflow-x: auto; }
  .workflow-tab { min-height: 48px; white-space: nowrap; }
  .workflow { padding: 15px; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: 1; }
  .user-row { grid-template-columns: 1fr; }
  .table-panel { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; }
  dialog { width: 100%; max-width: none; max-height: 91dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  #sample-dialog { width: 100%; }
  .bottom-sheet-handle { display: block; width: 38px; height: 4px; margin: -8px auto 5px; background: #cbd1dc; border-radius: 99px; }
  .dialog-form, .dialog-form.wide { width: 100%; padding: 18px 15px max(20px, env(safe-area-inset-bottom)); }
  .dialog-actions.split { align-items: stretch; flex-direction: column; }
  .dialog-actions .button-row { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .dialog-actions .button-row:last-child { grid-template-columns: 1fr 1fr; }
  .mobile-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 5px 8px max(5px, env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }
  .mobile-bottom-nav .nav-button { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 5px 2px; color: var(--muted); border: 0; font-size: 9px; }
  .mobile-bottom-nav .nav-button span { display: block; }
  .mobile-bottom-nav .nav-button.active { color: var(--primary-dark); background: transparent; }
  .mobile-bottom-nav .nav-button svg { width: 20px; height: 20px; }
  .toast-region { right: 12px; bottom: 76px; width: calc(100% - 24px); }
}

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