:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #18221d;
  background: #f4f7f5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f4f7f5; color: #18221d; }
button, input, select, textarea { font: inherit; min-height: 42px; }
button { cursor: pointer; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #edf2ef; }
.auth-shell { width: min(860px, 100%); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #d7e0db; border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(20, 40, 30, .08); }
.auth-intro { padding: 54px 48px; color: #e7efe9; background: #17231d; }
.auth-intro h1 { margin: 10px 0 14px; font-size: 30px; font-weight: 500; letter-spacing: 0; }
.auth-intro p:last-child { margin: 0; color: #b9c8c0; line-height: 1.7; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 7px; background: #1d8a60; color: #fff; font-weight: 700; }
.brand-mark.small { width: 30px; height: 30px; font-size: 14px; }
.eyebrow { margin: 34px 0 0; color: #76c69f; font-size: 13px; }
.auth-form-panel { padding: 48px; }
.auth-form-panel h2 { margin: 0 0 24px; font-size: 21px; font-weight: 500; letter-spacing: 0; }
.auth-form-panel form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; color: #425049; font-size: 14px; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid #cbd6d0; border-radius: 6px; color: #18221d; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(29, 138, 96, .18); border-color: #1d8a60; }
.field-help { margin: -10px 0 0; color: #6d7973; font-size: 12px; }
.form-error { padding: 10px 12px; border-left: 3px solid #b93c32; background: #fff1ef; color: #8e2d26; font-size: 14px; }
.primary-button, .secondary-button, .text-button { border-radius: 6px; }
.primary-button { padding: 10px 16px; border: 0; color: #fff; background: #176f4e; font-weight: 500; }
.primary-button:hover { background: #105e40; }
.danger-button { min-height: 38px; padding: 7px 12px; border: 1px solid #b94a42; border-radius: 6px; color: #972f28; background: #fff5f3; white-space: nowrap; }
.secondary-button { padding: 9px 18px; border: 1px solid #cbd6d0; background: #fff; color: #203029; }
.text-button { padding: 8px 10px; border: 0; background: transparent; color: #4e5e56; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 210px minmax(0, 1fr); transition: grid-template-columns .18s ease; }
.sidebar { height: var(--scaled-viewport-height, 100vh); display: flex; overflow: hidden; position: sticky; top: 0; flex-direction: column; background: #17231d; color: #e7efe9; }
.sidebar-brand { display: flex; flex: none; align-items: center; gap: 10px; padding: 20px 18px 18px 22px; background: #17231d; font-weight: 500; }
.sidebar-scroll { min-height: 0; padding: 0 10px 20px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(216,227,221,.55) #17231d; scrollbar-width: thin; }
.sidebar-scroll::-webkit-scrollbar { width: 10px; }
.sidebar-scroll::-webkit-scrollbar-track { background: #17231d; }
.sidebar-scroll::-webkit-scrollbar-thumb { border: 2px solid #17231d; border-radius: 6px; background: rgba(216,227,221,.55); }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(231,239,233,.72); }
.sidebar-brand-name { white-space: nowrap; }
.sidebar-toggle { width: 32px; min-height: 32px; margin-left: auto; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: #d8e3dd; background: transparent; font-size: 18px; line-height: 1; }
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-backdrop, .mobile-nav-toggle { display: none; }
.app-shell.sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
.sidebar-collapsed .sidebar { overflow: hidden; }
.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 20px 10px; }
.sidebar-collapsed .sidebar-scroll { display: none; }
.sidebar-collapsed .sidebar-brand-name, .sidebar-collapsed .sidebar .brand-mark,
.sidebar-collapsed .sidebar nav, .sidebar-collapsed .sidebar .nav-label { display: none; }
.sidebar-collapsed .sidebar-toggle { margin-left: 0; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar nav a, .sidebar nav span { min-height: 40px; display: flex; align-items: center; padding: 0 12px; border-radius: 6px; color: #bdcac3; text-decoration: none; }
.sidebar nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar nav a.active { color: #fff; background: rgba(255,255,255,.11); }
.sidebar nav span { opacity: .62; }
.sidebar-group { margin: 0 0 6px; }
.sidebar-group > summary { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 6px; color: #d8e3dd; font-size: 13px; font-weight: 500; line-height: 1.4; cursor: pointer; list-style: none; }
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary:hover, .sidebar-group[open] > summary { background: rgba(255,255,255,.05); color: #fff; }
.sidebar-group > summary:focus-visible { outline: 2px solid #8bc7ac; outline-offset: -2px; }
.sidebar-group-chevron { flex: none; font-size: 16px; transition: transform .15s; }
.sidebar-group[open] > summary .sidebar-group-chevron { transform: rotate(180deg); }
.sidebar .sidebar-group nav { margin: 4px 0 8px 8px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.12); }
.nav-label { margin: 22px 12px 8px; color: #7f9188; font-size: 12px; }
.main-content { min-width: 0; }
.topbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; border-bottom: 1px solid #dce4df; background: #fff; }
.topbar-heading { min-width: 0; display: flex; align-items: center; gap: 11px; }
.topbar-title { min-width: 0; }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: 0; }
.topbar p { margin: 3px 0 0; color: #738078; font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.zoom-control { height: 36px; display: flex; overflow: hidden; align-items: stretch; border: 1px solid #d5ded9; border-radius: 6px; background: #fff; }
.zoom-control button { min-width: 34px; min-height: 34px; padding: 0 9px; border: 0; color: #43534b; background: transparent; font-size: 17px; }
.zoom-control button:hover { background: #f0f5f2; }
.zoom-control .zoom-value { min-width: 54px; border-right: 1px solid #e0e7e3; border-left: 1px solid #e0e7e3; font-size: 12px; font-variant-numeric: tabular-nums; }
.account-menu { position: relative; }
.account-menu summary { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 5px; border-radius: 6px; color: #3f5148; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover, .account-menu[open] summary { background: #f0f5f2; }
.account-avatar { width: 30px; height: 30px; display: grid; flex: none; place-items: center; border-radius: 50%; color: #fff; background: #1d8a60; font-size: 13px; font-weight: 600; }
.account-name { max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-chevron { color: #718078; font-size: 14px; }
.account-menu-panel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 220px; overflow: hidden; padding: 7px; border: 1px solid #cbd6d0; border-radius: 7px; background: #fff; box-shadow: 0 12px 30px rgba(24,34,29,.15); }
.account-menu-identity { display: grid; gap: 2px; padding: 9px 10px 11px; border-bottom: 1px solid #e5ebe8; }
.account-menu-identity strong { font-size: 14px; font-weight: 600; }
.account-menu-identity span { color: #77837c; font-size: 11px; }
.account-menu-panel a, .account-menu-panel form button { width: 100%; min-height: 38px; display: flex; align-items: center; padding: 8px 10px; border: 0; border-radius: 5px; color: #34453c; background: transparent; text-align: left; text-decoration: none; font-size: 13px; }
.account-menu-panel a:hover, .account-menu-panel form button:hover { background: #f0f5f2; }
.account-menu-panel form { margin-top: 4px; padding-top: 4px; border-top: 1px solid #e5ebe8; }
.account-menu-panel form button { color: #97392f; }
.page-content { padding: 22px 28px 34px; }
.filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters label { min-width: 150px; }
.filters label:first-child { min-width: 190px; }
.filter-field { min-width: 170px; display: grid; gap: 6px; color: #425049; font-size: 14px; }
.multi-select { position: relative; }
.multi-select summary { min-height: 42px; display: flex; align-items: center; padding: 9px 34px 9px 11px; border: 1px solid #cbd6d0; border-radius: 6px; color: #18221d; background: #fff; cursor: pointer; list-style: none; white-space: nowrap; }
.multi-select summary::-webkit-details-marker { display: none; }
.multi-select summary::after { content: '⌄'; position: absolute; right: 12px; top: 8px; font-size: 18px; }
.multi-select[open] summary { outline: 3px solid rgba(29, 138, 96, .18); border-color: #1d8a60; }
.multi-select-menu { position: absolute; z-index: 20; top: calc(100% + 5px); left: 0; width: max(100%, 220px); max-height: 300px; overflow-y: auto; padding: 7px; border: 1px solid #cbd6d0; border-radius: 7px; background: #fff; box-shadow: 0 12px 30px rgba(24,34,29,.15); }
.multi-select-menu label { min-width: 0; display: flex; grid-template-columns: 17px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 5px; cursor: pointer; }
.multi-select-menu label:hover { background: #f2f6f4; }
.multi-select-menu input { width: 17px; min-height: 17px; margin: 0; }
.inventory-filters .filter-field { min-width: 175px; }
.filter-clear-link { min-height: 42px; }
.item-code { color: #176f4e; text-decoration: none; }
.item-code:hover, .item-code:focus-visible { text-decoration: underline; }
.detail-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.detail-summary-grid article, .detail-panel { padding: 18px; border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.detail-summary-grid article { min-width: 0; }
.detail-summary-grid span, .detail-summary-grid small { display: block; color: #6d7973; font-size: 12px; }
.detail-summary-grid strong { display: block; margin: 8px 0 3px; overflow: hidden; font-size: 17px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.detail-panel { margin-top: 18px; }
.detail-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
.detail-fields div { min-width: 0; }
.detail-fields dt { color: #6d7973; font-size: 12px; }
.detail-fields dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.muted-text { margin: 4px 0 0; color: #6d7973; font-size: 13px; }
.unit-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0 0 0 18px; list-style: none; }
.unit-timeline::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 4px; width: 1px; background: #cbd6d0; }
.unit-timeline li { position: relative; display: grid; grid-template-columns: 1fr; padding: 0 0 22px 18px; }
.timeline-marker { position: absolute; top: 5px; left: -18px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #1d8a60; box-shadow: 0 0 0 1px #1d8a60; }
.timeline-content { min-width: 0; }
.timeline-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.timeline-heading time { color: #6d7973; font-size: 12px; }
.timeline-content p { margin: 5px 0 4px; overflow-wrap: anywhere; color: #34453c; }
.timeline-content small { display: block; margin-top: 3px; color: #6d7973; font-size: 12px; }
.compact-empty { padding: 4px 0 0; }
.dashboard-controls { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dashboard-controls .filters { flex: 1; }
.dashboard-settings-control { position: relative; flex: none; margin-bottom: 18px; }
.dashboard-setting-row.table-column-option { grid-template-columns: 24px minmax(0, 1fr); }
.dashboard-setting-row .column-drag-handle { width: 24px; min-width: 24px; padding: 0; border: 0; background: transparent; touch-action: none; user-select: none; }
.dashboard-setting-row.is-dragging { background: #e7f2ec; }
.dashboard-setting-row.is-dragging .column-drag-handle { cursor: grabbing; }
.inspection-mode-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.inspection-form [hidden] { display: none !important; }
[data-transfer-form] [hidden] { display: none !important; }
[data-sale-form] [hidden], [data-return-form] [hidden] { display: none !important; }
[data-sale-code-list] { max-height: 360px; overflow: auto; margin-top: 14px; }
[data-return-code-list] { max-height: 360px; overflow: auto; margin-top: 14px; }
[data-production-return-form] [hidden] { display: none !important; }
[data-processing-code-list] { max-height: 360px; overflow: auto; }
[data-processing-code-picker] > label, [data-processing-code-picker] details, [data-processing-code-picker] [data-mobile-scan-page] { margin: 14px 0; }
[data-return-code-picker] > label, [data-return-code-picker] details, [data-return-code-picker] [data-mobile-scan-page] { margin: 14px 0; }
[data-sale-code-picker] > label, [data-sale-code-picker] details, [data-sale-code-picker] [data-mobile-scan-page] { margin: 14px 0; }
.transfer-selected-list { max-height: 260px; overflow: auto; }
.transfer-selected-list > div { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 5px 0; }
[data-transfer-code-list] { max-height: 360px; overflow: auto; margin-top: 14px; }
[data-transfer-code-picker] details, [data-transfer-code-picker] > label, [data-transfer-code-picker] [data-mobile-scan-page] { margin: 14px 0; }
[data-confirmation-message] { white-space: pre-wrap; max-height: 50vh; overflow: auto; overflow-wrap: anywhere; }
.inspection-mode-actions button[aria-pressed="true"] { border-color: #176f4e; background: #e8f3ee; color: #176f4e; }
.inspection-photo-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid #dce4df; }
.inspection-photo-section h3 { margin-bottom: 12px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.summary-card-link { min-width: 0; color: inherit; text-decoration: none; }
.summary-grid article { height: 100%; min-width: 0; padding: 17px; border: 1px solid #dce4df; border-radius: 7px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.summary-card-link:hover article, .summary-card-link:focus-visible article { border-color: #8dbda7; box-shadow: 0 4px 14px rgba(20,65,44,.1); transform: translateY(-1px); }
.summary-card-link:focus-visible { outline: none; }
.summary-grid p { margin: 0 0 10px; color: #647269; font-size: 14px; }
.summary-grid strong { display: block; margin-bottom: 5px; font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.summary-grid small { margin-left: 4px; color: #66736c; font-size: 13px; }
.summary-grid span { color: #79847e; font-size: 12px; }
.date-stack { display: inline-flex; flex-direction: column; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.date-stack small { color: #77837c; font-size: 11px; line-height: 1.2; }
.report-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #dce4df; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.section-heading h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: 0; }
.section-heading span { color: #77837c; font-size: 12px; }
.result-total { padding: 6px 10px; border-radius: 6px; color: #425049 !important; background: #e8f2ed; font-size: 14px !important; }
.result-total strong { color: #176f4e; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.warehouse-list { display: grid; gap: 12px; max-width: 760px; }
.warehouse-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(120px, 3fr) 52px; align-items: center; gap: 14px; }
.warehouse-row strong { text-align: right; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; overflow: hidden; border-radius: 4px; background: #e4ebe7; }
.empty-stock-track { display: block; height: 8px; border-radius: 4px; background: #e4ebe7; }
.bar-fill { height: 100%; border-radius: 4px; background: #1d8a60; }
.stock-level-0 { width: 0; }
.stock-level-5 { width: 5%; }
.stock-level-10 { width: 10%; }
.stock-level-15 { width: 15%; }
.stock-level-20 { width: 20%; }
.stock-level-25 { width: 25%; }
.stock-level-30 { width: 30%; }
.stock-level-35 { width: 35%; }
.stock-level-40 { width: 40%; }
.stock-level-45 { width: 45%; }
.stock-level-50 { width: 50%; }
.stock-level-55 { width: 55%; }
.stock-level-60 { width: 60%; }
.stock-level-65 { width: 65%; }
.stock-level-70 { width: 70%; }
.stock-level-75 { width: 75%; }
.stock-level-80 { width: 80%; }
.stock-level-85 { width: 85%; }
.stock-level-90 { width: 90%; }
.stock-level-95 { width: 95%; }
.stock-level-100 { width: 100%; }
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.activity-grid article { min-width: 0; }
.activity-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity-grid strong { font-size: 21px; font-weight: 500; }
.activity-grid p { margin: 10px 0 0; color: #7b8780; font-size: 13px; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.page-intro h2 { margin: 0 0 5px; font-size: 20px; font-weight: 500; }
.page-intro p { margin: 0; color: #6b7871; font-size: 14px; }
.page-actions { display: flex; align-items: center; gap: 10px; }
.warehouse-create-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.warehouse-admin-list { border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.warehouse-admin-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(300px, 2fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border-bottom: 1px solid #e4ebe7; }
.warehouse-admin-row:last-child { border-bottom: 0; }
.warehouse-admin-row > div strong, .warehouse-admin-row > div small { display: block; }
.warehouse-admin-row > div strong { font-size: 14px; font-weight: 500; }
.warehouse-admin-row > div small { margin-top: 4px; color: #77837c; font-size: 12px; }
.warehouse-admin-row form { display: flex; align-items: center; gap: 8px; }
.warehouse-admin-row form label { min-width: 0; flex: 1; }
.account-list { overflow: hidden; border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.account-row { display: grid; grid-template-columns: minmax(190px, 1fr) auto 74px; align-items: center; gap: 14px; padding: 14px; border-bottom: 1px solid #e4ebe7; }
.account-row:last-child { border-bottom: 0; }
.account-identity small { display: block; margin-top: 5px; color: #77837c; font-size: 12px; }
.account-title-line { display: flex; align-items: center; gap: 8px; }
.account-title-line strong { font-size: 15px; font-weight: 500; }
.account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.account-actions .secondary-link { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.account-current { color: #66736c; font-size: 12px; text-align: right; }
.account-section { margin-top: 18px; }
.permission-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.permission-toolbar > label { width: min(280px, 100%); }
.permission-toolbar > div { display: flex; gap: 8px; }
.permission-group { margin: 0 0 17px; padding: 0; border: 0; }
.permission-group legend { margin-bottom: 9px; color: #425049; font-size: 14px; font-weight: 500; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.permission-option { min-width: 0; display: flex; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 9px; padding: 11px; border: 1px solid #d5ded9; border-radius: 6px; background: #f9fbfa; }
.permission-option input { width: 17px; min-height: 17px; margin: 0; }
.permission-option strong, .permission-option small { display: block; }
.permission-option strong { color: #26352e; font-size: 13px; font-weight: 500; }
.permission-option small { margin-top: 3px; color: #7a867f; font-size: 11px; }
.permission-option.is-readonly { grid-template-columns: 17px minmax(0, 1fr); }
.permission-option.is-readonly > span { color: #176f4e; font-weight: 700; }
.protected-account-note { margin-bottom: 16px; padding: 13px; border-left: 3px solid #1d8a60; background: #eef7f2; }
.protected-account-note strong { font-size: 14px; }
.protected-account-note p, .danger-zone p { margin: 5px 0 0; color: #65726b; font-size: 13px; line-height: 1.6; }
.danger-zone { border-color: #e2d5d1; }
.account-status-actions { display: grid; gap: 16px; }
.account-status-actions form:last-child { padding-top: 16px; border-top: 1px solid #eadbd7; }
.account-status-actions form:last-child label { max-width: 360px; }
.danger-button:disabled { cursor: not-allowed; opacity: .48; }
.catalog-row { display: grid; grid-template-columns: minmax(170px, 2fr) minmax(130px, 1fr) minmax(120px, 1fr) auto; gap: 10px; align-items: end; padding: 12px; border-bottom: 1px solid #e4ebe7; }
.catalog-row:last-child { border-bottom: 0; }
.catalog-row.wide { grid-template-columns: minmax(130px, 1.5fr) minmax(170px, 1.5fr) minmax(150px, 1.4fr) 90px 110px auto; }
.catalog-row small { display: block; margin-bottom: 5px; color: #77837c; font-size: 12px; }
.inline-void-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; }
.inline-void-form input, .inline-void-form button { min-height: 38px; }
.positive-number { color: #176f4e; }
.negative-number { color: #9a3a32; }
.compact-table { min-width: 620px; }
.status-badge { display: inline-flex; padding: 4px 8px; border-radius: 5px; font-size: 12px; }
.status-ok { color: #176f4e; background: #eaf7f0; }
.status-low { color: #972f28; background: #fff0ed; }
.breakdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.simple-list { overflow: hidden; border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.simple-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #e4ebe7; }
.simple-list > div:last-child { border-bottom: 0; }
.simple-list strong { font-size: 14px; font-weight: 500; }
.simple-list p { margin: 0; padding: 20px; color: #77837c; text-align: center; }
.primary-link, .secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 16px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.primary-link { color: #fff; background: #176f4e; }
.secondary-link { color: #26352e; border: 1px solid #cbd6d0; background: #fff; }
.form-page { width: 100%; max-width: none; }
.inspection-code-field { grid-column: 1 / -1; }
.inspection-code-field textarea { min-height: 96px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-fill-button { width: fit-content; margin-top: 4px; color: #176f4e; }
.code-fill-button:disabled { opacity: .45; }
.code-preview-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.code-preview-row > div { display: grid; gap: 5px; padding: 14px; border: 1px solid #dce4df; border-radius: 6px; background: #f8faf9; }
.unit-code-picker { display: grid; gap: 10px; grid-column: 1 / -1; padding: 14px; border: 1px solid #dce4df; border-radius: 7px; background: #f8faf9; }
.unit-code-picker[hidden] { display: none; }
.unit-code-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.unit-code-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; padding: 8px; border: 1px solid #dce4df; border-radius: 6px; background: #fff; }
.unit-code-list label { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border-radius: 5px; cursor: pointer; }
.unit-code-list label:hover { background: #f2f6f4; }
.unit-code-list label[hidden] { display: none; }
.unit-code-list input { width: 17px; min-height: 17px; flex: 0 0 auto; }
.unit-code-list span { min-width: 0; display: grid; gap: 2px; }
.unit-code-list strong { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.unit-code-list small { color: #77837c; font-size: 11px; }
.code-preview-row strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.code-preview-row small { color: #6d7973; }
.compact-link { min-height: 34px; padding: 5px 9px; font-size: 12px; }
.item-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.copyable-value { position: relative; display: inline-flex; align-items: center; max-width: 100%; padding-right: 30px; }
.inline-copy-button { position: absolute; z-index: 3; top: 50%; right: 0; width: 26px; min-height: 26px; padding: 0; border: 1px solid #cbd6d0; border-radius: 5px; opacity: 0; pointer-events: none; background: #fff; box-shadow: 0 2px 7px rgba(24,34,29,.12); transform: translateY(-50%) scale(.92); transition: opacity .12s ease, transform .12s ease, border-color .12s ease, background-color .12s ease; }
.inline-copy-button::before, .inline-copy-button::after { position: absolute; width: 8px; height: 9px; border: 1.5px solid #52645b; border-radius: 1px; content: ''; }
.inline-copy-button::before { top: 6px; left: 7px; }
.inline-copy-button::after { top: 9px; left: 10px; background: #fff; }
.copyable-value:hover .inline-copy-button, .copyable-value:focus-within .inline-copy-button, .inline-copy-button.copied { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.inline-copy-button:hover, .inline-copy-button:focus-visible { border-color: #78ad95; outline: none; background: #edf6f1; }
.inline-copy-button.copied { border-color: #1d8a60; background: #1d8a60; }
.inline-copy-button.copied::before { width: 9px; height: 5px; top: 8px; left: 7px; border-width: 0 0 2px 2px; border-color: #fff; border-radius: 0; transform: rotate(-45deg); }
.inline-copy-button.copied::after { display: none; }
.label-toolbar { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 16px; border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.label-toolbar > div, .label-toolbar > label { display: grid; gap: 7px; }
.label-toolbar > label { min-width: 170px; }
.label-profile-control { flex-basis: 100%; }
.label-profile-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.label-profile-row select { min-width: 250px; }
.label-profile-fields { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); flex-basis: 100%; gap: 12px; padding: 12px; border: 1px solid #e2e9e5; border-radius: 6px; background: #f8faf9; }
.label-profile-fields label { display: grid; gap: 6px; color: #4d5c54; font-size: 13px; }
.label-profile-default { align-content: end; }
.label-profile-default input { width: 16px; min-height: 16px; margin-right: 5px; vertical-align: middle; }
.print-profile-form { display: grid; gap: 16px; }
.print-profile-list { display: grid; gap: 16px; }
.print-profile-card { position: relative; padding: 18px; border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.print-profile-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.print-profile-card-heading strong, .print-profile-card-heading small { display: block; }
.print-profile-card-heading small { margin-top: 5px; color: #6d7973; font-size: 12px; }
.status-badge { padding: 4px 8px; border-radius: 999px; color: #176f4e; background: #e8f2ed; font-size: 12px; white-space: nowrap; }
.status-badge.status-ok { color: #176f4e; background: #e8f2ed; }
.status-badge.status-low { color: #972f28; background: #fff0ed; }
.checkbox-field { align-self: end; display: flex !important; align-items: center; gap: 7px; }
.checkbox-field input { width: 17px; min-height: 17px; }
.print-profile-actions { display: flex; justify-content: flex-start; }
.print-profile-delete { margin-top: 10px; }
.scan-panel { max-width: 760px; }
.scan-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.scan-form label { display: grid; gap: 7px; color: #4d5c54; font-size: 13px; }
.scan-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.scan-camera { position: relative; max-width: 520px; margin-top: 18px; overflow: hidden; border-radius: 8px; background: #111; }
.scan-camera video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scan-frame { position: absolute; inset: 20% 12%; border: 2px solid #8ee0b8; border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.22); }
.label-scope-control { flex-basis: 100%; }
.label-range-fields { grid-template-columns: repeat(2, minmax(190px, 1fr)); flex-basis: 100%; }
.label-range-fields[hidden], .label-code-picker[hidden] { display: none; }
.label-range-fields label { display: grid; gap: 6px; color: #4d5c54; font-size: 13px; }
.label-code-picker { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); flex-basis: 100%; max-height: 180px; overflow-y: auto; padding: 10px; border: 1px solid #dce4df; border-radius: 6px; background: #f8faf9; }
.label-code-picker label { display: flex; align-items: center; gap: 7px; min-height: 32px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.label-code-picker input { width: 16px; min-height: 16px; }
.label-selection-summary { min-width: 140px; align-content: center; padding: 8px 12px; border-radius: 6px; background: #e8f2ed; }
.label-selection-summary strong { color: #176f4e; font-size: 20px; }
.label-selection-summary span { color: #5f6e66; font-size: 12px; }
.control-label { color: #4d5c54; font-size: 13px; }
.segmented-control { height: 42px; display: flex; overflow: hidden; border: 1px solid #cbd6d0; border-radius: 6px; }
.segmented-control button { min-height: 40px; padding: 8px 13px; border: 0; border-right: 1px solid #dce4df; color: #3d4d45; background: #fff; }
.segmented-control button:last-child { border-right: 0; }
.segmented-control button.active { color: #fff; background: #176f4e; }
.label-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.label-summary span { color: #6d7973; font-size: 13px; }
.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, var(--label-width, 50mm)); gap: 12px; align-items: start; justify-content: space-between; overflow-x: auto; }
.inventory-label { width: var(--label-width, 50mm); max-width: 100%; height: var(--label-height, 30mm); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18mm); grid-template-rows: auto 1fr; gap: 2mm; overflow: hidden; padding: 2.5mm; border: 1px dashed #9eaaa4; color: #111; background: #fff; break-inside: avoid; }
.label-text { min-width: 0; display: grid; align-content: start; gap: 1mm; grid-column: 1 / -1; }
.label-text strong { overflow: hidden; font-size: 10pt; white-space: nowrap; text-overflow: ellipsis; }
.label-text span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8pt; font-weight: 600; letter-spacing: 0; }
.label-barcode { width: 100%; min-width: 0; height: 11mm; align-self: center; object-fit: contain; }
.label-qr { width: 16mm; max-width: 100%; height: 16mm; align-self: center; justify-self: end; object-fit: contain; image-rendering: pixelated; }
.label-mode-barcode .inventory-label { grid-template-columns: 1fr; }
.label-mode-barcode .label-barcode { height: 15mm; }
.label-mode-barcode .label-qr, .label-mode-qr .label-barcode { display: none; }
.label-mode-qr .inventory-label { grid-template-columns: 1fr 18mm; }
.label-mode-qr .label-qr { grid-column: 2; }
.label-size-small .inventory-label { padding: 2mm; }
.label-size-small .label-text strong { font-size: 8pt; }
.label-size-small .label-qr { width: 13mm; height: 13mm; }
.label-size-micro .inventory-label { grid-template-columns: 1fr 7mm; grid-template-rows: auto 1fr; gap: .5mm; padding: 1mm; }
.label-size-micro .label-text { gap: 0; }
.label-size-micro .label-text strong { display: none; }
.label-size-micro .label-text span { font-size: 5pt; }
.label-size-micro .label-barcode { height: 4mm; }
.label-size-micro .label-qr { width: 6mm; height: 6mm; }
.label-size-large .inventory-label { padding: 3mm; }
.label-size-large .label-text strong { font-size: 12pt; }
.label-size-large .label-qr { width: 22mm; height: 22mm; }
.purchase-form { display: grid; gap: 18px; }
.form-section { padding: 20px; border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.form-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.form-section-heading h3 { margin: 0; font-size: 16px; font-weight: 500; }
.form-section-heading span { color: #7b8780; font-size: 12px; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.line-table { display: grid; gap: 9px; }
.line-header, .line-row { display: grid; grid-template-columns: minmax(210px, 2fr) minmax(110px, .7fr) minmax(150px, 1fr) 42px; gap: 10px; align-items: center; }
.line-header { color: #65726b; font-size: 13px; }
.icon-button { width: 42px; height: 42px; padding: 0; border: 1px solid #d7dfda; border-radius: 6px; background: #fff; color: #6c7871; font-size: 21px; line-height: 1; }
.icon-button:hover:not(:disabled) { border-color: #bc5a50; color: #a3342b; background: #fff5f3; }
.icon-button:disabled { opacity: .32; cursor: not-allowed; }
.add-line-button { margin-top: 13px; padding: 8px 12px; border: 1px solid #cbd6d0; border-radius: 6px; background: #f8faf9; color: #225c45; }
.cost-mode { display: flex; gap: 10px; flex-wrap: wrap; }
.cost-mode label { min-height: 42px; display: flex; grid-template-columns: 18px auto; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #d3ddd7; border-radius: 6px; background: #f9fbfa; }
.cost-mode input { width: 17px; min-height: 17px; margin: 0; }
.batch-total { width: min(320px, 100%); margin-top: 16px; }
.batch-total[hidden] { display: none; }
.field-note { margin: 13px 0 0; color: #6d7973; font-size: 13px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.success-message { margin-bottom: 18px; padding: 12px 14px; border-left: 3px solid #1d8a60; background: #eaf7f0; color: #1d5f45; }
.empty-state { padding: 38px 20px; border: 1px dashed #cbd6d0; border-radius: 7px; text-align: center; background: #fff; }
.empty-state h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; }
.empty-state p { margin: 0; color: #6d7973; }
.table-wrap { overflow-x: auto; border: 1px solid #dce4df; border-radius: 7px; background: #fff; }
.fixed-workspace { height: var(--scaled-viewport-height, 100vh); display: flex; overflow: hidden; flex-direction: column; }
.fixed-workspace .topbar { flex: none; }
.fixed-workspace-content { min-height: 0; display: flex; flex: 1; overflow: hidden; flex-direction: column; }
.fixed-workspace-content .filters, .fixed-result-heading { flex: none; }
.paginated-table { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.scrollable-table { min-height: 0; flex: 1; overflow: auto; border-radius: 7px 7px 0 0; }
.scrollable-table .records-table th { position: sticky; z-index: 2; top: 0; }
.table-pagination { min-height: 58px; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid #dce4df; border-top: 0; border-radius: 0 0 7px 7px; background: #fff; }
.page-size-controls, .page-navigation { display: flex; align-items: center; gap: 7px; }
.page-size-controls { flex-wrap: wrap; color: #5e6d65; font-size: 12px; }
.page-size-button, .page-navigation button { min-height: 32px; padding: 5px 9px; border: 1px solid #cbd6d0; border-radius: 5px; color: #34453c; background: #fff; }
.page-size-button.active { border-color: #176f4e; color: #fff; background: #176f4e; }
.custom-page-size { width: 86px; min-height: 32px; padding: 5px 8px; font-size: 12px; }
.page-navigation span { min-width: 76px; color: #5e6d65; text-align: center; font-size: 12px; }
.page-navigation button:disabled { opacity: .4; cursor: not-allowed; }
/* Only inventory uses the full remaining viewport for its scrolling results. */
@media screen {
  .inventory-results-page.fixed-workspace { height: var(--scaled-viewport-height, 100dvh); min-height: 0; overflow: hidden; }
  .inventory-results-page .fixed-workspace-content { display: flex; min-height: 0; overflow: hidden; flex-direction: column; }
  .inventory-results-page .paginated-table { display: flex; flex: 1; min-height: 0; flex-direction: column; }
  .inventory-results-page .scrollable-table { flex: 1; min-height: 0; max-height: none; overflow: auto; }
  .inventory-results-page .table-pagination { position: static; flex: none; }
}
@media screen and (max-width: 820px) {
  .inventory-results-page .table-settings-panel { max-height: 35dvh; }
}
/* Short windows/keyboards must not squeeze the results and pagination out of reach. */
@media screen and (max-height: 650px) {
  .inventory-results-page .fixed-workspace-content { overflow-y: auto; }
  .inventory-results-page .paginated-table { flex: none; }
  .inventory-results-page .scrollable-table { flex: none; max-height: 50dvh; }
}
.records-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 14px; }
.records-table th, .records-table td { padding: 13px 14px; border-bottom: 1px solid #e4ebe7; text-align: left; vertical-align: top; }
.records-table th { color: #637068; background: #f7f9f8; font-size: 12px; font-weight: 500; }
.records-table th { position: relative; }
.records-table td { max-width: 360px; line-height: 1.55; }
.records-table td:not(:has(.date-stack)):not(:has(form)):not(:has(a)) { overflow: hidden; }
.records-table td:not(:has(.date-stack)):not(:has(form)):not(:has(a)) > :first-child,
.records-table td:not(:has(.date-stack)):not(:has(form)):not(:has(a)) { overflow-wrap: anywhere; }
.two-line-content { min-width: 150px; max-width: 340px; max-height: 3.1em; display: -webkit-box; overflow: hidden; line-height: 1.55; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.column-resize-handle { position: absolute; z-index: 4; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.column-resize-handle::after { position: absolute; top: 24%; bottom: 24%; left: 4px; width: 1px; background: transparent; content: ''; }
.records-table th:hover .column-resize-handle::after, .column-resize-handle:hover::after { background: #7ca892; }
.resizing-table-column, .resizing-table-column * { cursor: col-resize !important; user-select: none !important; }
.records-table th.is-resizing .column-resize-handle::after { background: #176f4e; }
.records-table.has-custom-widths { table-layout: fixed; }
.frozen-column { position: sticky !important; z-index: 3; left: var(--frozen-left) !important; background: #fff; box-shadow: 1px 0 #dfe7e2; }
.records-table th.frozen-column { z-index: 6; background: #f7f9f8; }
.table-workspace-toolbar { min-height: 42px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.table-future-actions { min-width: 1px; flex: 1; }
.table-settings-button { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid #cbd6d0; border-radius: 6px; color: #34453c; background: #fff; }
.table-settings-button:hover, .table-settings-button[aria-expanded="true"] { border-color: #82ad98; background: #edf5f1; }
.settings-icon { width: 14px; height: 14px; position: relative; border: 1.5px solid currentColor; border-radius: 50%; }
.settings-icon::after { position: absolute; inset: 3px; border: 1.5px solid currentColor; border-radius: 50%; content: ''; }
.table-settings-panel { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: min(360px, calc(100vw - 32px)); max-height: min(560px, 70vh); overflow-y: auto; padding: 14px; border: 1px solid #cbd6d0; border-radius: 7px; background: #fff; box-shadow: 0 16px 36px rgba(24,34,29,.18); }
.table-settings-panel[hidden] { display: none; }
.table-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table-settings-heading strong { font-size: 15px; font-weight: 600; }
.table-settings-heading button { min-height: 30px; padding: 3px 7px; border: 0; color: #176f4e; background: transparent; font-size: 12px; }
.table-settings-panel > p { margin: 4px 0 12px; color: #7a867f; font-size: 11px; }
.table-column-list { display: grid; gap: 3px; }
.table-column-option { min-height: 40px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 5px; }
.table-column-option:hover { background: #f2f6f4; }
.column-drag-handle { color: #97a39c; cursor: grab; font-size: 17px; letter-spacing: -4px; }
.table-column-option label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.table-column-option input { width: 16px; min-height: 16px; margin: 0; }
.column-freeze-button { width: 30px; min-height: 30px; position: relative; padding: 0; border: 0; border-radius: 5px; background: transparent; }
.column-freeze-button::before { position: absolute; width: 10px; height: 10px; top: 7px; left: 9px; border: 1.5px solid #829087; border-radius: 50% 50% 2px 2px; content: ''; transform: rotate(45deg); }
.column-freeze-button::after { position: absolute; width: 1.5px; height: 9px; top: 15px; left: 14px; background: #829087; content: ''; transform: rotate(45deg); }
.column-freeze-button:hover, .column-freeze-button.active { background: #e7f2ec; }
.column-freeze-button.active::before { border-color: #176f4e; background: #176f4e; }
.records-table tbody tr:last-child td { border-bottom: 0; }
.records-table td strong { display: block; font-weight: 500; }
.records-table td small { display: block; margin-top: 4px; color: #77837c; }
.input-help { color: #77837c; font-size: 12px; }
.result-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.result-options label { min-height: 76px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 9px; padding: 12px; border: 1px solid #d5ded9; border-radius: 7px; background: #fafcfb; cursor: pointer; }
.result-options input { width: 17px; min-height: 17px; margin: 2px 0 0; }
.result-options strong, .result-options small { display: block; }
.result-options strong { font-size: 14px; font-weight: 500; }
.result-options small { margin-top: 4px; color: #77837c; font-size: 11px; line-height: 1.4; }
.result-options label:has(input:checked) { border-color: #1d8a60; background: #edf8f2; }
.conditional-fields { max-width: 430px; margin-top: 18px; }
.conditional-fields[hidden] { display: none; }
.defect-only-fields { max-width: 430px; }
.defect-fields { max-width: none; }
.defect-fields fieldset { margin: 15px 0 0; padding: 0; border: 0; }
.defect-fields legend { margin-bottom: 8px; color: #425049; font-size: 14px; }
.option-group-heading { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clear-options-button { min-height: 32px; padding: 5px 10px; border: 1px solid #cbd6d0; border-radius: 6px; color: #4e5e56; background: #fff; font-size: 12px; }
.clear-options-button:hover { border-color: #93a49b; background: #f5f8f6; }
.feature-options { display: grid; grid-template-columns: repeat(4, minmax(125px, 1fr)); gap: 8px; }
.feature-option { min-width: 0; padding: 9px 10px; border: 1px solid #d5ded9; border-radius: 6px; background: #f9fbfa; }
.feature-option label { display: flex; grid-template-columns: 17px auto; align-items: center; gap: 7px; }
.feature-option input, .processing-options input { width: 17px; min-height: 17px; margin: 0; }
.feature-option select { min-height: 36px; margin-top: 8px; padding: 6px 8px; font-size: 13px; }
.feature-option select[hidden] { display: none; }
.processing-fields { max-width: none; }
.processing-fields fieldset { margin: 0; padding: 0; border: 0; }
.processing-fields legend { margin-bottom: 8px; color: #425049; font-size: 14px; }
.processing-options { display: flex; flex-wrap: wrap; gap: 8px; }
.processing-options label { display: flex; grid-template-columns: 17px auto; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #d5ded9; border-radius: 6px; background: #f9fbfa; }
.notes-field { margin-top: 18px; }
.notes-field textarea { resize: vertical; }
.empty-action { margin-top: 18px; }
.two-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sale-lines { display: grid; gap: 9px; }
.sale-line-header, .sale-line { display: grid; grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr) 42px; gap: 10px; align-items: start; }
.sale-line-header { color: #65726b; font-size: 13px; }
.sale-line label { gap: 3px; }
.sale-line small { color: #77837c; font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.confirmation-dialog { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 8px; color: #1d2a24; background: #fff; box-shadow: 0 18px 55px rgba(12, 31, 22, .24); }
.confirmation-dialog::backdrop { background: rgba(12, 24, 18, .48); }
.confirmation-dialog-panel { display: grid; gap: 22px; padding: 24px; }
.confirmation-dialog-panel h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.confirmation-dialog-panel p { margin: 0; color: #5d6b64; line-height: 1.65; }
.confirmation-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 900px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .auth-page { padding: 0; }
  .auth-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .auth-intro { padding: 30px 24px; }
  .auth-intro h1 { font-size: 24px; }
  .auth-intro .eyebrow { margin-top: 18px; }
  .auth-form-panel { padding: 30px 24px; }
  body { min-width: 0; }
  body.mobile-navigation-open { overflow: hidden; }
  .app-shell, .app-shell.sidebar-collapsed { min-height: 100dvh; display: block; }
  .sidebar {
    width: min(300px, calc(100vw - 48px));
    height: 100dvh;
    display: flex;
    position: fixed;
    z-index: 60;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .mobile-nav-open .sidebar { transform: translateX(0); box-shadow: 12px 0 30px rgba(8, 20, 14, .2); }
  .sidebar-collapsed .sidebar-brand { justify-content: flex-start; padding: 20px 18px 18px 22px; }
  .sidebar-collapsed .sidebar-scroll { display: block; }
  .sidebar-collapsed .sidebar-brand-name, .sidebar-collapsed .sidebar .brand-mark,
  .sidebar-collapsed .sidebar nav, .sidebar-collapsed .sidebar .nav-label { display: flex; }
  .sidebar-collapsed .sidebar nav { display: grid; }
  .sidebar-collapsed .sidebar-toggle { margin-left: auto; }
  .sidebar-backdrop {
    width: 100%;
    min-height: 0;
    display: block;
    position: fixed;
    z-index: 50;
    inset: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(9, 22, 15, .42);
    cursor: default;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .mobile-nav-open .sidebar-backdrop { visibility: visible; opacity: 1; }
  .topbar, .page-content { padding-left: 16px; padding-right: 16px; }
  .topbar { min-height: 64px; position: sticky; z-index: 30; top: 0; align-items: center; gap: 8px; padding-top: 9px; padding-bottom: 9px; }
  .topbar-heading { flex: 1; gap: 9px; }
  .topbar-title h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; }
  .topbar-title p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-nav-toggle { width: 40px; min-height: 40px; display: grid; flex: none; place-items: center; padding: 0; border: 1px solid #d5ded9; border-radius: 6px; color: #34453c; background: #fff; font-size: 19px; line-height: 1; }
  .mobile-nav-toggle:hover, .mobile-nav-toggle[aria-expanded="true"] { border-color: #82ad98; background: #edf5f1; }
  .topbar-actions { gap: 5px; }
  .account-name { display: none; }
  .zoom-control { display: none; }
  .account-menu summary { padding-right: 2px; }
  .account-chevron { display: none; }
  .page-content { padding-top: 18px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .filters label, .filters label:first-child { width: 100%; min-width: 0; }
  .filters .filter-field { width: 100%; min-width: 0; }
  .filters .secondary-button { width: 100%; }
  .filter-clear-link { width: 100%; }
  .dashboard-controls { display: block; }
  .dashboard-settings-control, .dashboard-settings-toggle { width: 100%; }
  .dashboard-settings-panel { right: 0; left: 0; width: auto; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-grid article { padding: 14px; }
  .summary-grid p { margin-bottom: 8px; font-size: 13px; }
  .summary-grid strong { font-size: 23px; }
  .summary-grid span { display: block; line-height: 1.5; }
  .activity-grid { grid-template-columns: 1fr; }
  .breakdown-grid { grid-template-columns: 1fr; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .warehouse-create-form { grid-template-columns: 1fr; }
  .warehouse-admin-row { grid-template-columns: 1fr; }
  .warehouse-admin-row form { align-items: stretch; flex-direction: column; }
  .account-row { grid-template-columns: 1fr; }
  .account-actions { justify-content: flex-start; }
  .account-current { text-align: left; }
  .permission-toolbar { align-items: stretch; flex-direction: column; }
  .permission-toolbar > div { flex-wrap: wrap; }
  .permission-grid { grid-template-columns: 1fr; }
  .catalog-row, .catalog-row.wide { grid-template-columns: 1fr; }
  .inline-void-form { grid-template-columns: 1fr; }
  .warehouse-row { grid-template-columns: 90px minmax(70px, 1fr) 48px; gap: 8px; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .page-intro .primary-link, .page-intro .secondary-link { width: 100%; }
  .field-grid { grid-template-columns: 1fr; }
  .two-fields { grid-template-columns: 1fr; }
  .result-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-group-heading { align-items: flex-start; }
  .sale-line-header { display: none; }
  .sale-line { grid-template-columns: minmax(0, 1fr) 42px; }
  .sale-line label { grid-column: 1; }
  .sale-line .icon-button { grid-column: 2; grid-row: 1; }
  .line-header { display: none; }
  .line-row { grid-template-columns: minmax(0, 1fr) 90px 42px; }
  .line-row [data-unit-cost] { grid-column: 1 / 3; }
  .line-row .icon-button { grid-column: 3; grid-row: 1; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-section { padding: 16px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .table-workspace-toolbar { align-items: stretch; }
  .table-settings-button { min-height: 40px; }
  .table-pagination { align-items: stretch; flex-direction: column; }
  .page-navigation { justify-content: space-between; }
  /* 手机端恢复页面纵向滚动，避免筛选项占满屏幕后库存表被挤到看不见。 */
  .fixed-workspace { height: auto; min-height: 100dvh; overflow: visible; }
  .fixed-workspace-content { display: block; overflow: visible; }
  .paginated-table { display: block; flex: none; }
  /* 表格只负责横向查看，纵向滚动交给页面，避免手指拖动时表格和页面互相抢滚动。 */
  .scrollable-table {
    max-height: none;
    flex: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* 在手机横向查看明细时，货物编码保持在左侧可见，并让复制按钮可直接点击。 */
  .scrollable-table .records-table .inventory-code-column {
    position: sticky !important;
    z-index: 5;
    left: 0 !important;
    min-width: 170px;
    background: #fff;
    box-shadow: 1px 0 #dfe7e2;
  }
  .scrollable-table .records-table th.inventory-code-column {
    z-index: 7;
    background: #f7f9f8;
  }
  .scrollable-table .records-table .inventory-code-column .copyable-value {
    max-width: 100%;
  }
  .scrollable-table .records-table .inventory-code-column .inline-copy-button {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }
  .confirmation-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .confirmation-dialog-actions button { width: 100%; }
}

@media print {
  @page { margin: 4mm; }
  html, body { width: auto !important; min-height: auto !important; background: #fff; }
  .label-print-shell { width: auto !important; min-height: auto !important; display: block; zoom: 1 !important; }
  .label-print-shell .sidebar, .label-print-shell .topbar, .print-hidden { display: none !important; }
  .label-print-shell .main-content, .label-print-shell .page-content { padding: 0; margin: 0; min-height: 0; }
  .label-print-shell .label-sheet { display: block; overflow: visible; }
  .label-print-shell .inventory-label { page: inventoryLabel; border: 0; max-width: none; break-after: page; }
  .label-print-shell .inventory-label:last-child { break-after: auto; }
}

@media (max-width: 820px) {
  .label-profile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .label-profile-fields { grid-template-columns: 1fr; }
  .label-profile-row select { min-width: 0; width: 100%; }
  .scan-form { grid-template-columns: 1fr; }
  .scan-form button, .scan-actions button { width: 100%; }
}

@media (max-width: 359px) {
  .summary-grid { grid-template-columns: 1fr; }
  .detail-summary-grid, .detail-fields { grid-template-columns: 1fr; }
  .page-content { padding-left: 12px; padding-right: 12px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .topbar-actions { gap: 2px; }
  .account-menu summary { padding-left: 2px; }
  .result-options, .feature-options { grid-template-columns: 1fr; }
}

.unit-photo-panel { scroll-margin-top: 20px; }
.photo-upload-form { padding: 18px; border: 1px solid var(--border, #d8e2de); border-radius: 12px; margin-bottom: 24px; }
.photo-binding { margin-top: 0; overflow-wrap: anywhere; }
.photo-upload-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.photo-upload-fields label, .photo-management label { display: grid; gap: 8px; min-width: 0; }
.photo-upload-fields input, .photo-upload-fields textarea, .photo-upload-fields select { width: 100%; min-width: 0; box-sizing: border-box; }
.photo-selection, .photo-status, .photo-warning { overflow-wrap: anywhere; }
.photo-status { color: #176c50; }
.photo-warning { color: #a53328; }
.photo-local-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.photo-local-previews img { width: 84px; height: 84px; object-fit: contain; border-radius: 6px; background: #edf3f0; }
.photo-pending-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-pending-card .secondary-button { padding: 6px 12px; font-size: 13px; min-height: 36px; }
.unit-photo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); gap: 18px; }
.unit-photo-card { min-width: 0; border: 1px solid var(--border, #d8e2de); border-radius: 12px; overflow: hidden; background: #fff; }
.photo-image-link { display: block; background: #edf3f0; }
.photo-image-link img { width: 100%; height: 200px; display: block; object-fit: contain; }
.photo-card-info { padding: 14px; overflow-wrap: anywhere; }
.photo-card-info p { white-space: pre-wrap; }
.photo-card-info small { display: block; color: #687b73; margin: 8px 0; }
.photo-card-info a { color: #176c50; }
.photo-management { padding: 0 14px 14px; }
.photo-management summary, .photo-trash summary { cursor: pointer; color: #176c50; padding: 12px 0; }
.photo-management form { display: grid; gap: 12px; padding: 12px 0; border-top: 1px solid #d8e2de; }
.photo-management input, .photo-management textarea, .photo-management select { width: 100%; min-width: 0; }
.photo-trash { margin-top: 24px; }
.photo-empty { padding: 12px 0; }
/* Unified screen layout; physical label dimensions and print rules stay independent. */
@media screen {
  :root { --ui-border: #dce5df; --ui-gap: 12px; }
  body { font-size: 14px; line-height: 1.45; }
  .main-content, .topbar-heading, .topbar-title, .field-grid > *, .page-intro > div { min-width: 0; }
  .page-content { padding: 16px 22px 24px; }
  /* Fill the available workspace at every zoom level, not a shrinking centred island. */
  .form-page { max-width: none; width: 100%; margin-inline: 0; }
  .topbar { min-height: 60px; padding: 10px 22px; }
  .topbar h1 { font-size: 18px; }
  .topbar-title h1 { font-weight: 650; }
  .sidebar nav a { min-height: 34px; padding: 6px 10px; font-size: 13px; }
  .sidebar-brand { padding: 14px 14px 12px; }
  .nav-label { margin-top: 14px; }
  .primary-button, .secondary-button, .primary-link, .secondary-link,
  .add-line-button { min-height: 36px; padding: 7px 12px; border-radius: 6px; line-height: 1.4; font-size: 13px; }
  .primary-button, .primary-link { font-weight: 600; }
  .primary-button:hover, .primary-link:hover { background: #125a3f; }
  button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #90c6ac; outline-offset: 3px; }
  label { line-height: 1.5; min-width: 0; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { min-height: 36px; padding: 7px 10px; }
  textarea { resize: vertical; }
  .purchase-form, .inspection-form { display: grid; gap: var(--ui-gap); }
  .form-section { padding: 16px; border-radius: 8px; }
  .form-section-heading { align-items: flex-start; margin-bottom: 12px; }
  .form-section-heading h3 { font-weight: 600; }
  .form-section-heading span { flex-shrink: 0; }
  .field-grid { gap: 12px; align-items: start; }
  .line-field-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .page-intro { align-items: center; margin-bottom: 14px; }
  .page-intro h2 { font-size: 18px; }
  .page-intro p { font-size: 13px; }
  .page-intro p { max-width: 70ch; line-height: 1.65; }
  .form-actions { flex-wrap: wrap; gap: 10px; }
  form > .form-actions { padding: 10px 0 2px; margin-top: 0; border-top: 1px solid var(--ui-border); }
  [data-mobile-scan-page] > .form-actions { margin-top: 12px; justify-content: flex-start; }
  .input-help, .field-note, .muted-text { line-height: 1.65; margin-block: 8px; }
  p[role=status]:empty { display: none; }
  .unit-code-picker { gap: 10px; padding: 12px; border-radius: 8px; }
  .unit-code-picker-heading { flex-wrap: wrap; }
  .unit-code-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; padding: 8px; }
  .unit-code-list label { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 10px; min-height: 64px; align-items: center; border: 1px solid transparent; }
  .unit-code-list label > input { grid-column: 1; grid-row: 1 / 3; width: 20px; min-height: 20px; margin: 0; }
  .unit-code-list label > strong, .unit-code-list label > small, .unit-code-list label > span { grid-column: 2; }
  .unit-code-list label:has(input:checked) { border-color: #a9cdbb; background: #edf7f1; }
  .unit-code-list strong { font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .unit-code-list small { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
  .unit-code-list:empty { display: none; }
  .transfer-selected-list > div { gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ui-border); }
  .transfer-selected-list > div > span { min-width: 0; overflow-wrap: anywhere; }
  .transfer-selected-list button { flex: none; min-height: 44px; }
  .unit-code-picker details, [data-sale-code-picker] details, [data-return-code-picker] details,
  [data-processing-code-picker] details { padding: 10px 0; border-top: 1px solid var(--ui-border); }
  details > summary { min-height: 36px; cursor: pointer; }
  details > label, details > button { margin-top: 10px; }
  .summary-grid article { min-width: 0; padding: 12px 16px; border-radius: 8px; }
  .summary-grid strong { font-size: 24px; }
  .summary-grid strong { display: block; margin: 6px 0; color: #243d30; }
  .summary-grid span { display: block; line-height: 1.6; }
  .summary-grid p { margin-bottom: 4px; font-size: 13px; }
  .report-section { margin-top: 16px; padding-top: 16px; }
  .section-heading { margin-bottom: 10px; }
  .activity-grid { gap: 12px; }
  .activity-grid article { padding: 10px 12px; background: #fff; border: 1px solid var(--ui-border); border-radius: 8px; }
  .activity-grid p { margin-top: 5px; font-size: 12px; }
  .table-wrap { border-radius: 10px; }
  .records-table th { font-weight: 600; white-space: nowrap; }
  .records-table td { padding-block: 9px; font-size: 13px; }
  .records-table th { padding-block: 10px; font-size: 12px; }
  .records-table .money-cell { white-space: nowrap; overflow-wrap: normal !important; min-width: 120px; font-variant-numeric: tabular-nums; }
  .records-table .identity-cell { min-width: 190px; }
  .records-table .identity-cell strong { overflow-wrap: normal; }
  .fixed-workspace { height: auto; min-height: var(--scaled-viewport-height, 100vh); overflow: visible; }
  .fixed-workspace-content { display: block; overflow: visible; }
  .paginated-table { flex: none; }
  .scrollable-table { flex: none; max-height: 65vh; }
  .table-pagination { border-radius: 0 0 10px 10px; }
  .empty-state { padding: 18px; border-radius: 8px; }
  .detail-panel, .detail-summary-grid article { padding: 14px; }
  .detail-summary-grid strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
}
@media screen and (min-width: 821px) {
  button { min-height: 32px; }
  .app-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .app-shell.sidebar-collapsed { grid-template-columns: 56px minmax(0, 1fr); }
  .filters { gap: 8px; margin-bottom: 12px; }
  .filters label { min-width: 140px; font-size: 13px; }
  .filters label:first-child { min-width: 165px; }
  .dashboard-settings-control { margin-bottom: 12px; }
  .form-section-heading h3 { font-size: 15px; }
  .code-preview-row > div { padding: 10px; }
  .code-preview-row strong { font-size: 16px; }
  .code-preview-row small { font-size: 12px; }
  .line-header, .line-row { grid-template-columns: minmax(180px, 2fr) minmax(100px, .7fr) minmax(130px, 1fr) 36px; }
  .icon-button { width: 36px; height: 36px; min-height: 36px; }
  .cost-mode label { min-height: 36px; padding: 6px 10px; }
  .result-options label { min-height: 62px; padding: 10px; }
  .notes-field { margin-top: 12px; }
  .inspection-mode-actions { margin-bottom: 0; }
  .inspection-form[data-inspection-mode="single"] .form-section:has([name="inspectionDate"]) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
  .inspection-form[data-inspection-mode="single"] .form-section:has([name="inspectionDate"]) .form-section-heading { margin-bottom: 0; }
  .inspection-form[data-inspection-mode="single"] .form-section:has([name="inspectionDate"]) .field-grid { grid-template-columns: minmax(180px, 240px); }
  .table-workspace-toolbar { min-height: 36px; margin-bottom: 6px; }
  .fixed-result-heading { margin-bottom: 8px; }
  .table-pagination { padding: 8px 12px; gap: 8px; }
  .page-size-button, .page-navigation button, .custom-page-size { min-height: 32px; }
  .unit-code-list label { min-height: 54px; padding: 6px 8px; }
  .scan-actions { margin-top: 10px; }
  .auth-intro, .auth-form-panel { padding: 36px; }
}
@media screen and (min-width: 1600px) {
  .summary-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .warehouse-list { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media screen and (min-width: 821px) and (max-width: 1100px) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-row.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 820px) {
  body { font-size: 14px; }
  .sidebar nav a { min-height: 36px; padding: 7px 10px; font-size: 13px; }
  .primary-button, .secondary-button, .primary-link, .secondary-link, .add-line-button { min-height: 36px; padding: 7px 10px; font-size: 13px; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { min-height: 38px; padding: 6px 8px; font-size: 16px; }
  .page-content { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 54px; padding: 6px 12px; }
  .topbar-title h1 { font-size: 16px; }
  .topbar-title p { font-size: 11px; }
  .mobile-nav-toggle, .sidebar-toggle { width: 36px; min-height: 36px; }
  .account-menu summary { min-height: 36px; }
  .page-content button:not(.inline-copy-button), .account-menu-panel a, .account-menu-panel button { min-height: 36px; }
  .dashboard-order-actions button, .column-freeze-button { min-width: 36px; }
  .table-column-option { grid-template-columns: 20px minmax(0, 1fr) 36px; gap: 8px; min-height: 42px; }
  .dashboard-settings-panel label, .multi-select-menu label, .label-code-picker label { min-height: 36px; }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px; }
  .field-grid, .two-fields, .code-preview-row { grid-template-columns: minmax(0, 1fr); }
  .line-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; align-items: end; gap: 8px; padding: 10px; border: 1px solid var(--ui-border); border-radius: 6px; }
  .line-row .icon-button, .sale-line .icon-button { width: 36px; min-height: 36px; padding: 0; }
  .line-row .line-model { grid-column: 1 / 3; }
  .line-row .icon-button { grid-column: 3; grid-row: 1; }
  .line-field-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 13px; }
  .sale-line { padding: 10px; border: 1px solid var(--ui-border); border-radius: 6px; }
  .sale-line .sr-only { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .form-section, .detail-panel { padding: 12px; border-radius: 7px; }
  .form-section-heading { gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .form-section-heading h3 { font-size: 14px; }
  .field-grid, .two-fields, .code-preview-row { gap: 10px; }
  .field-grid label, .two-fields label { font-size: 13px; }
  .purchase-form > .form-section:first-of-type .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-form > .form-section:first-of-type .field-grid > label:last-child { grid-column: 1 / -1; }
  .purchase-form .code-preview-row { gap: 6px; }
  .purchase-form .code-preview-row > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .purchase-form .code-preview-row > div:last-child strong { flex-shrink: 0; }
  .purchase-form .code-preview-row > div:last-child small { flex: 1 1 160px; }
  .cost-mode { gap: 8px; }
  .cost-mode label { min-height: 36px; padding: 6px 8px; font-size: 13px; }
  .form-section-heading span { flex-shrink: 1; }
  .page-intro { gap: 8px; align-items: stretch; margin-bottom: 10px; }
  .page-intro h2 { font-size: 16px; }
  .page-intro p { font-size: 12px; line-height: 1.45; }
  .page-intro .secondary-link { width: auto; align-self: flex-start; }
  .fixed-result-heading { flex-direction: row; align-items: center; margin-bottom: 8px; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filters > label:last-of-type { grid-column: 1 / -1; }
  .filters > label, .filters > .filter-field { width: auto !important; min-width: 0 !important; }
  .dashboard-controls .filters { margin-bottom: 12px; }
  .dashboard-controls .filters > label:first-child { grid-column: 1 / -1; }
  .dashboard-controls .filters > label:last-of-type { grid-column: auto; }
  .dashboard-settings-control { margin-bottom: 10px; }
  .dashboard-settings-toggle { width: auto; }
  .summary-grid { gap: 8px; }
  .summary-grid article { padding: 10px; border-radius: 6px; }
  .summary-grid strong { font-size: 21px; margin: 4px 0; }
  .summary-grid span { font-size: 11px; line-height: 1.4; }
  .unit-code-picker { padding: 10px; gap: 8px; }
  .unit-code-list label { min-height: 48px; padding: 6px 8px; }
  .code-preview-row > div { padding: 10px; }
  .code-preview-row strong { font-size: 15px; }
  .code-preview-row small { font-size: 12px; }
  .unit-code-list { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; }
  [data-transfer-code-list], [data-sale-code-list], [data-return-code-list], [data-processing-code-list] { max-height: none; overflow: visible; }
  .form-actions { flex-direction: row; align-items: stretch; }
  .form-actions > button, .form-actions > a { flex: 1 1 120px; white-space: normal; }
  form > .form-actions { display: grid; grid-template-columns: minmax(64px, .65fr) minmax(0, 1.8fr); gap: 8px; position: sticky; bottom: 0; z-index: 10; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); background: #f4f7f5; }
  form > .form-actions > button, form > .form-actions > a { min-height: 38px; }
  form > .form-actions > .primary-button { flex: 2 1 170px; }
  form > .form-actions > :only-child { grid-column: 1 / -1; }
  .form-actions > [hidden] { display: none !important; }
  .result-options, .feature-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-options label { min-height: 62px; padding: 8px; }
  .result-options small { font-size: 11px; line-height: 1.35; }
  .processing-options label, .feature-option { min-height: 36px; padding: 6px 8px; }
  .scan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .scan-actions button { width: auto; }
  [data-mobile-scan-page] .scan-actions { display: flex; gap: 10px; margin-top: 12px; }
  [data-mobile-scan-page] .scan-actions > button { flex: 1; width: auto; min-height: 36px; }
  .table-pagination { padding: 8px; gap: 8px; }
  .page-size-button, .page-navigation button, .custom-page-size, .table-settings-button { min-height: 36px; padding: 6px 9px; }
  .scrollable-table { max-height: none; overflow-y: visible; }
  /* Comparing records needs rows and columns, not a tall card for every record. */
  .responsive-records [hidden] { display: none !important; }
  .confirmation-dialog-panel { padding: 14px; gap: 12px; }
  .confirmation-dialog-actions { flex-direction: row; }
  .confirmation-dialog-actions button { flex: 1; min-height: 38px; padding: 7px 10px; font-size: 13px; }
  .detail-summary-grid { gap: 10px; }
  .timeline-heading { flex-wrap: wrap; }
}
@media screen and (max-width: 359px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-options { grid-template-columns: minmax(0, 1fr); }
  .page-content, .topbar { padding-inline: 12px; }
}
@media (max-width: 520px) {
  .photo-upload-fields { grid-template-columns: 1fr; }
  .photo-upload-form { padding: 12px; }
  .photo-upload-form button { width: 100%; }
}

/* Presentation only: keep the original forms, table DOM, handlers and preferences. */
.filter-disclosure-toggle, .filter-disclosure-trigger { display: none; }
.filter-disclosure { min-width: 0; flex: 1; }
.fixed-workspace-content > .filter-disclosure { flex: none; }
@media screen and (min-width: 601px) and (max-width: 1180px) {
  .page-content { padding: 16px 18px 24px; }
  .topbar { padding-inline: 18px; }
  .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .filters { display: flex; gap: 8px; flex-wrap: wrap; }
  .filters > label, .filters > .filter-field { flex: 1 1 150px; width: auto; min-width: 0; }
  .filters > .secondary-button, .filters > a { width: auto; flex: none; }
  .dashboard-controls { display: flex; align-items: end; gap: 10px; }
  .dashboard-controls .filters > label:first-child { width: auto; }
  .dashboard-settings-control { width: auto; flex: none; }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 1180px) {
  /* Tablet and phone prioritize reading: only the compact page header stays fixed. */
  .inventory-results-page.fixed-workspace { height: auto; min-height: 100dvh; overflow: visible; }
  .inventory-results-page .topbar { position: sticky; top: 0; z-index: 30; }
  .inventory-results-page .fixed-workspace-content { display: block; overflow: visible; }
  .inventory-results-page .paginated-table { display: block; }
  .inventory-results-page .scrollable-table { max-height: none; overflow-x: auto; }
  .records-table { min-width: 640px; }
  .records-table.compact-table { min-width: 600px; }
  .records-table td { white-space: nowrap; }
  .records-table td:has(form), .records-table .two-line-content { white-space: normal; }
  .table-wrap { overscroll-behavior-x: contain; }
}
@media screen and (max-width: 600px) {
  .page-content { padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); }
  .topbar { min-height: 48px; padding: 5px 10px; gap: 6px; }
  .topbar-title h1 { font-size: 15px; font-weight: 600; }
  .topbar-title p { font-size: 10px; }
  .topbar-heading { gap: 7px; }
  .mobile-nav-toggle { width: 32px; min-height: 32px; font-size: 17px; }
  .account-avatar { width: 27px; height: 27px; font-size: 12px; }
  .account-menu summary { min-height: 32px; padding: 2px; }
  .topbar .compact-link { min-height: 30px; padding: 4px 8px; font-size: 12px; }
  .page-content button:not(.inline-copy-button), .page-content .secondary-link,
  .page-content .primary-link { min-height: 32px; padding: 5px 9px; font-size: 12px; width: auto; }
  .page-content label, .filter-field { font-size: 12px; gap: 4px; }
  .page-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .page-content select { min-height: 34px; padding: 4px 7px; }
  .page-content .multi-select summary { min-height: 34px; padding: 5px 26px 5px 8px; font-size: 14px; }
  .multi-select summary::after { top: 4px; right: 8px; }
  .multi-select-menu { width: max(100%, 180px); max-width: calc(100vw - 24px); max-height: 40dvh; }
  .filter-field:nth-child(even) .multi-select-menu { left: auto; right: 0; }
  .filter-disclosure { position: relative; margin-bottom: 10px; }
  .filter-disclosure-toggle { display: block; position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .filter-disclosure-trigger { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 9px; border: 1px solid #cbd6d0; border-radius: 6px; background: #fff; cursor: pointer; color: #34453c; }
  .filter-disclosure-trigger span { color: #738078; font-size: 10px; }
  .filter-disclosure-toggle:focus-visible + .filter-disclosure-trigger { outline: 2px solid #1d8a60; outline-offset: 2px; }
  .filter-disclosure-body { display: none; }
  .filter-disclosure-toggle:checked ~ .filter-disclosure-body { display: block; padding-top: 8px; }
  .filter-disclosure-toggle:checked + .filter-disclosure-trigger { border-color: #82ad98; background: #edf5f1; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 0; }
  .filters > label:last-of-type { grid-column: auto; }
  .filters > label:has(input[name=keyword]) { grid-column: 1 / -1; }
  .filters > button, .filters > a { justify-self: start; width: auto; }
  .dashboard-controls { display: flex; align-items: start; gap: 8px; margin-bottom: 10px; position: relative; }
  .dashboard-controls .filter-disclosure-trigger { margin-right: 76px; }
  .dashboard-controls .filter-disclosure, .dashboard-settings-control { margin-bottom: 0; }
  .dashboard-settings-control { width: auto; flex: none; position: absolute; top: 0; right: 0; }
  .dashboard-controls .filters > label:first-child { grid-column: auto; }
  .dashboard-controls .filters { margin-bottom: 0; }
  .dashboard-settings-panel { position: fixed; top: 56px; bottom: auto; left: 10px; right: 10px; width: auto; max-height: calc(100dvh - 72px); }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .summary-grid article { padding: 8px 9px; border-radius: 6px; }
  .summary-grid p { font-size: 12px; margin: 0 0 4px; }
  .summary-grid strong { font-size: 19px; margin: 2px 0 4px; line-height: 1.2; }
  .summary-grid strong small { font-size: 11px; }
  .summary-grid span { font-size: 10px; line-height: 1.3; }
  .report-section { margin-top: 12px; padding-top: 12px; }
  .section-heading { margin-bottom: 7px; gap: 4px 8px; }
  .section-heading h2 { font-size: 14px; }
  .section-heading > span { font-size: 11px; }
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .activity-grid article { padding: 8px 9px; min-width: 0; }
  .activity-grid article > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
  .activity-grid article span { font-size: 12px; }
  .activity-grid article strong { font-size: 17px; margin-left: auto; overflow-wrap: anywhere; }
  .activity-grid article:has(strong):last-child:nth-child(odd) { grid-column: 1 / -1; }
  .activity-grid p { font-size: 10px; line-height: 1.35; margin: 5px 0 0; }
  .warehouse-row { grid-template-columns: minmax(70px, 1fr) minmax(50px, 2fr) 45px; min-height: 28px; gap: 8px; font-size: 12px; }
  .page-intro { flex-direction: row; flex-wrap: wrap; align-items: start; gap: 8px; }
  .page-intro > div { flex: 1 1 180px; min-width: 0; }
  .page-intro h2 { font-size: 15px; }
  .page-intro .primary-link, .page-intro .secondary-link { width: auto; align-self: start; }
  .page-actions { width: auto; gap: 6px; }
  .fixed-result-heading { flex-wrap: wrap; align-items: center; gap: 6px; }
  .fixed-result-heading > h2 { flex: 1 1 auto; margin: 0; }
  .fixed-result-heading .result-total { padding: 4px 7px; font-size: 12px; }
  .fixed-result-heading .result-total strong { font-size: 16px; }
  .table-workspace-toolbar { min-height: 32px; margin-bottom: 5px; }
  .table-settings-panel { position: fixed; top: 56px; right: 10px; left: 10px; width: auto; max-height: calc(100dvh - 72px); }
  .inventory-results-page .table-settings-panel { max-height: calc(100dvh - 72px); }
  .table-column-option { min-height: 36px; }
  .table-wrap:has(> .records-table)::before { content: '左右滑动查看完整表格'; display: block; position: sticky; left: 0; width: calc(100vw - 24px); padding: 5px 8px; color: #738078; font-size: 10px; background: #f7f9f8; }
  .records-table th { font-size: 11px; padding: 7px 8px; }
  .records-table td { font-size: 12px; padding: 7px 8px; line-height: 1.4; white-space: nowrap; }
  .records-table td:has(form), .records-table .two-line-content { white-space: normal; }
  .records-table .identity-cell { min-width: 170px; }
  .records-table .money-cell { min-width: 110px; }
  .records-table .date-stack small { font-size: 10px; }
  .table-pagination { position: static; min-height: 0; gap: 6px; padding: 6px; }
  .page-size-controls { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; gap: 5px; }
  .page-size-controls > * { flex: none; }
  .page-size-controls > span { font-size: 11px; }
  .page-content .page-size-button { padding: 4px 7px; min-height: 28px; font-size: 11px; }
  .page-content .custom-page-size { min-height: 28px !important; width: 72px; font-size: 16px; }
  .page-navigation { justify-content: space-between; gap: 6px; }
  .page-content .page-navigation button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
  .page-navigation span { font-size: 11px; min-width: 60px; }
  .form-section, .detail-panel { padding: 10px; }
  .form-section-heading { margin-bottom: 8px; }
  .result-options label { min-height: 54px; padding: 6px 8px; }
  .unit-code-list label { min-height: 42px; }
  .code-preview-row > div { padding: 8px; }
  .code-preview-row small { font-size: 11px; }
  .notes-field { margin-top: 10px; }
  .scan-actions { gap: 6px; }
  .photo-upload-form button { width: auto; }
}