:root {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #182936;
    background: #f4f7f6;
    --navy: #142633;
    --ink: #182936;
    --muted: #5d7077;
    --line: #e2e9e6;
    --green: #176c54;
    --green-dark: #105843;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 300px; font-size: 14px; line-height: 1.5; }
body:has(.drawer[open], .cost-dialog[open]) { overflow: hidden; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 2px solid #42977d;
    outline-offset: 3px;
}
h1, h2, p, dl, dd { margin: 0; }
.workspace-page { min-height: 100dvh; background: #f5f7f8; }
.wrap { max-width: 1600px; padding-inline: clamp(20px, 3.7vw, 48px); margin-inline: auto; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.topbar { background: #fff; border-bottom: 1px solid var(--line); }
.topbar-inner { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.topbar-start { display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 670; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; background: var(--green-dark); color: #fff; }
.brand-mark .icon { width: 22px; height: 22px; }
.button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 620; line-height: 1.45; white-space: nowrap; transition: background-color .16s, border-color .16s; }
.button:disabled { opacity: .48; }
.button .icon { width: 16px; height: 16px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-sync { min-inline-size: 126px; }
.data-menu { position: relative; }
.data-menu summary { width: 36px; min-height: 36px; cursor: pointer; list-style: none; }
.data-menu summary::-webkit-details-marker { display: none; }
.menu-dots { font-size: 21px; line-height: 1; }
.data-menu[open] summary { background: #edf5f1; border-color: #aec6bd; }
.data-menu-actions { position: absolute; z-index: 2; inset: calc(100% + 6px) 0 auto auto; display: grid; min-width: 158px; padding: 5px; border: 1px solid #dce7e1; border-radius: 9px; background: #fff; box-shadow: 0 7px 20px #18293624; }
.data-menu-actions .button { justify-content: flex-start; background: #fff; color: var(--ink); }
.data-menu-actions form .button { width: 100%; }
.data-menu-actions .button:not(:disabled):hover { background: #edf5f1; }
.team-login { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.team-login-panel { width: min(100%, 400px); padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.team-login-panel h1 { font-size: 28px; }
.team-login-panel h2 { margin: 8px 0 20px; font-size: 16px; color: var(--muted); }
.team-login-panel p { margin-bottom: 14px; }
.team-login-panel input:not([type="hidden"]) { width: 100%; height: 39px; margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; }
.team-login-panel button { width: 100%; min-height: 39px; border: 0; border-radius: 6px; color: #fff; background: var(--green); }
.team-login-panel [role="alert"] { color: #a04434; }
.button-primary { background: var(--green); color: #fff; border-color: var(--green); }
.button-primary:not(:disabled):hover { background: var(--green-dark); border-color: var(--green-dark); }
.button-secondary, .icon-button { color: #294250; background: #fff; border-color: #dbe6e1; }
.button-secondary:not(:disabled):hover, .icon-button:not(:disabled):hover { background: #eef5f2; border-color: #b9d6cb; }
.icon-button { width: 34px; min-height: 34px; padding: 0; }

.cost-dialog { width: min(calc(100% - 32px), 900px); max-height: min(82dvh, 760px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 14px 48px #182b3433; }
.cost-dialog[open] { display: flex; flex-direction: column; }
.cost-dialog::backdrop { background: #10243155; }
.cost-dialog-head { display: grid; grid-template-columns: max-content 1fr auto; align-items: center; column-gap: clamp(10px, 5vw, 56px); padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cost-dialog-head h2 { margin: 0 0 3px; font-size: 20px; }
.cost-dialog-head > form { align-self: start; }
.cost-current-unit { justify-self: start; min-width: 0; padding: 5px 9px; border-radius: 6px; background: #eef5f2; }
.cost-current-unit dt { color: var(--muted); font-size: 12px; }
.cost-current-unit dd { font-size: 14px; font-weight: 670; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cost-current-unit .cost-caption { display: block; font-weight: 400; }
.cost-dialog-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px 20px 20px; }
.cost-caption { color: var(--muted); font-size: 12px; }
.cost-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cost-list-head h3 { margin: 0; font-size: 14px; }
.cost-table-wrap { margin-top: 12px; overflow-x: auto; }
.cost-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.cost-table :is(th, td) { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cost-table :is(th, td):first-child { text-align: left; }
.cost-table th { color: var(--muted); font-weight: 620; }
.cost-table td .cost-caption { white-space: normal; overflow-wrap: anywhere; }
.cost-empty { padding: 16px 12px; color: var(--muted); text-align: center; }
.cost-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.cost-batch-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cost-expense-head { margin: 14px 0 8px; }
.cost-expenses { display: grid; gap: 6px; }
.cost-expense { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 6px; }
.cost-expense input { min-width: 0; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.cost-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 11px; margin-block: 12px; border-radius: 8px; background: #eef5f2; }
.cost-totals dt { color: var(--muted); font-size: 12px; }
.cost-totals dd { font-size: 18px; font-weight: 670; overflow-wrap: anywhere; }
.cost-form-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

.main { padding-block: 26px 36px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
h1 { font-weight: 710; line-height: 1.18; letter-spacing: -.025em; }
.workspace-page h1 { font-size: clamp(27px, 3vw, 34px); }
.warehouse-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 9px; }
.source-badge { display: inline-flex; align-items: center; gap: 6px; color: #4c6a61; font-size: 11px; white-space: nowrap; }
.source-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.source-badge.demo { color: #855524; }
.snapshot-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 286px; flex: none; }
.snapshot-meta div + div { border-left: 1px solid #dce5e3; padding-left: 16px; }
.snapshot-meta dt { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.snapshot-meta dd { font-variant-numeric: tabular-nums; color: #344d58; font-size: 13px; font-weight: 610; white-space: nowrap; }
.freshness { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin: -4px 0 12px; padding: 5px 9px; border: 1px solid #eee3cd; border-radius: 7px; background: #faf6ed; color: #66552f; font-size: 12px; }
.freshness-sync { min-height: 27px; padding: 2px 4px; color: var(--green-dark); background: transparent; font-size: 12px; }
.freshness-sync:not(:disabled):hover { text-decoration: underline; text-underline-offset: 2px; }

.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.summary-strip > * { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 10px 18px; text-align: left; }
.summary-action { border: 0; border-radius: 0; background: transparent; }
.summary-strip > * + * { border-inline-start: 1px solid var(--line); }
.summary-action:first-child { border-radius: 9px 0 0 9px; }
.summary-action:focus-visible { outline-offset: -3px; }
.summary-action:not(:disabled):hover { background: #f3f7f5; }
.summary-action[aria-pressed="true"] { background: #edf6f1; box-shadow: inset 0 -2px var(--green); }
.summary-label, .summary-value { color: var(--muted); font-size: 12px; }
.summary-value { overflow-wrap: anywhere; }
#metric-sales-7d-hint { margin-inline-start: 5px; }
.summary-value strong { color: var(--ink); font-size: clamp(21px, 2.5vw, 26px); font-weight: 680; line-height: 1.1; font-variant-numeric: tabular-nums; }
.summary-zero strong { color: #a14537; }
.summary-due strong { color: var(--green-dark); }

.shipping-panel { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.shipping-summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 9px 18px; cursor: pointer; list-style: none; }
.shipping-summary::-webkit-details-marker { display: none; }
.shipping-summary .icon { width: 15px; height: 15px; margin-inline-start: auto; color: var(--muted); }
.shipping-panel[open] > .shipping-summary .icon { transform: rotate(180deg); }
.shipping-title { flex: none; font-weight: 680; }
.shipping-order { background: #f6fbf8; border-color: #d4e7dc; }
.shipping-order .shipping-title { color: var(--green-dark); }
.shipping-order-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.shipping-order-items li { display: flex; justify-content: space-between; gap: 8px; padding-block: 5px; border-bottom: 1px solid #e2eee7; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.shipping-order-items strong { flex: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.shipping-caption { color: var(--muted); font-size: 12px; }
.shipping-panel-body { display: grid; gap: 10px; padding: 0 18px 14px; }
.shipping-batches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.shipping-batches:empty { display: none; }
.shipping-batch { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; }
.shipping-batch h3, .shipping-pending h3 { margin: 0 0 4px; color: var(--ink); font-size: 13px; }
.shipping-batch .estimate-grid { margin-block: 8px; }
.shipping-batch details { margin-top: 7px; color: var(--muted); font-size: 12px; }
.shipping-batch details > summary { cursor: pointer; }
.shipping-batch ul, .shipping-pending ul { margin: 4px 0 0; padding-inline-start: 18px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.shipping-batch li + li, .shipping-pending li + li { margin-top: 3px; }
.shipping-pending { padding-top: 3px; }
#estimate-shipping-note { margin-top: 8px; }
@media (max-width: 730px) {
    .shipping-summary { padding-inline: 12px; }
    .shipping-panel-body { padding-inline: 12px; }
}

.worklist { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.worklist-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; }
.worklist-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; flex: none; }
.worklist-title h2 { font-size: 16px; font-weight: 680; letter-spacing: -.015em; }
.result-count { color: var(--muted); font-size: 12px; }
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 360px); min-width: 0; }
.filters .select-field select { flex: 1; width: 0; min-width: 0; max-width: none; }
.filter { min-height: 36px; position: relative; display: flex; align-items: center; gap: 7px; border: 1px solid #dce6e2; border-radius: 7px; color: var(--muted); background: #fff; font-size: 12px; white-space: nowrap; }
.filter:focus-within { border-color: #6da895; outline: 2px solid #a9d9c9; outline-offset: 1px; }
.filter input:focus-visible, .filter select:focus-visible { outline: none; }
.filter input, .filter select { min-width: 0; height: 34px; border: 0; padding: 0; background: transparent; color: var(--ink); outline: none; }
.search-field { padding-inline: 9px 6px; }
.search-field .icon { width: 16px; height: 16px; color: #627a83; }
.search-field input { flex: 1; width: 0; }
.search-field input::placeholder { color: #6d7e85; }
.select-field { padding-left: 9px; }
.select-field select { appearance: none; max-width: 214px; padding-right: 28px; font-weight: 620; }
.select-field .icon { position: absolute; right: 7px; width: 14px; height: 14px; pointer-events: none; }
.select-field:hover { border-color: #b4c9c0; }
.select-field:has(select:open) { border-color: #6da895; outline: none; }
.select-field:has(select:open) .icon { transform: rotate(180deg); }

@supports (appearance: base-select) and selector(select::picker(select)) {
    .select-field select, .select-field select::picker(select) { appearance: base-select; }
    .select-field select { align-items: center; }
    .select-field select::picker-icon { display: none; }
    .select-field select::picker(select) {
        min-inline-size: 164px;
        min-inline-size: max(164px, anchor-size(self-inline));
        max-inline-size: calc(100vw - 24px);
        margin-block-start: 6px;
        padding: 4px;
        border: 1px solid #dce5e3;
        border-radius: 9px;
        background: #fff;
        color: var(--ink);
        box-shadow: 0 8px 22px #18293624;
    }
    .filters select::picker(select) { position-area: block-end span-inline-start; }
    .select-field select option {
        min-block-size: 36px;
        padding: 7px 10px;
        gap: 8px;
        border-radius: 5px;
        color: var(--ink);
        font-size: 13px;
        font-weight: 500;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .select-field select option:checked { color: var(--green-dark); background: #e9f3ed; font-weight: 650; }
    .select-field select option:hover { background: #f1f6f4; }
    .select-field select option:focus-visible { outline: 2px solid #42977d; outline-offset: -2px; }
    .select-field select option::checkmark { order: 1; margin-inline-start: auto; color: var(--green-dark); }
    .select-field select optgroup { color: var(--muted); font-size: 11px; }
}

.table-scroll { overflow: auto; }
.worklist table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-variant-numeric: tabular-nums; }
.worklist thead { background: #f3f6f7; color: #465b64; }
.worklist th, .worklist td { padding-inline: 18px; }
.worklist th { height: 40px; padding-block: 6px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 650; }
.worklist td { height: 46px; padding-block: 5px; border-top: 1px solid #edf1f2; font-size: 14px; vertical-align: middle; }
.worklist tbody tr { cursor: pointer; }
.worklist tbody tr.row-zero { background: #fdf6f4; }
.worklist tbody tr:is(:hover, :focus-within) { background: #edf5f2; }
.column-sort { display: inline-flex; align-items: center; gap: 4px; max-inline-size: 100%; min-block-size: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: start; vertical-align: middle; }
.column-sort > span { min-inline-size: 0; }
.column-sort:hover, th[aria-sort] .column-sort { color: var(--green-dark); }
.column-sort .sort-icon { width: 15px; height: 15px; color: #6f8288; stroke-width: 2; }
th[aria-sort="ascending"] .sort-up, th[aria-sort="descending"] .sort-down { stroke: var(--green-dark); stroke-width: 2.7; }
th[aria-sort="ascending"] .sort-down, th[aria-sort="descending"] .sort-up { opacity: .35; }
.thead-secondary { display: inline-block; margin-inline-start: 5px; color: var(--muted); font-size: 10px; font-weight: 510; }
.worklist .detail-col { width: 36px; padding-inline: 3px 9px; text-align: center; }
.sku-button { display: block; max-width: 100%; min-height: 30px; border: 0; border-radius: 4px; background: transparent; padding: 0; color: #1f5e51; font: 650 14px/1.5 "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sku-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.row-warehouse { color: var(--muted); font-size: 11px; }
.stock-count { font-weight: 660; overflow-wrap: anywhere; }
.remaining-count { font-weight: 610; }
.remaining-meter { display: grid; grid-template-columns: minmax(0, 1fr) 5ch; align-items: center; gap: 8px; max-inline-size: 160px; }
.remaining-bar { display: block; appearance: none; min-inline-size: 0; inline-size: 100%; block-size: 7px; border: 0; border-radius: 99px; overflow: hidden; background: #e2ebe7; color: var(--green); }
.remaining-bar::-webkit-progress-bar { background: #e2ebe7; border-radius: 99px; }
.remaining-bar::-webkit-progress-value { background: var(--green); border-radius: 99px; }
.remaining-bar::-moz-progress-bar { background: var(--green); border-radius: 99px; }
.remaining-value { text-align: end; white-space: nowrap; }
.remaining-meter.is-empty { color: #a25139; }
.remaining-meter.is-empty .remaining-bar { background: #f1e1db; }
.remaining-meter.is-empty .remaining-bar::-webkit-progress-bar { background: #f1e1db; }
.baseline-entry { color: var(--green-dark); border: 0; padding: 0; background: transparent; font-size: 12px; }
.baseline-entry:hover { text-decoration: underline; }
.stock-count.is-zero { color: #a25139; }
.muted { color: #6c7e84; }
.badge { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px; color: #416575; background: #e7eff3; font-size: 11px; font-weight: 630; line-height: 1.35; white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.badge-pending, .badge-horizon { color: #805c25; background: #fbf1dc; }
.badge-ok, .badge-no_shortage { color: #276850; background: #e3f2e9; }
.badge-uncovered { color: #a04434; background: #fbece8; }
.cell-secondary { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.stock-alert { color: #a25139; white-space: normal; }
.forecast-caption { color: #805c25; }
.countdown-value { font-weight: 650; }
.countdown-zero { color: #a25139; }
.number-unit { color: var(--muted); font-size: 11px; }
.worklist .order-due { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #e7f2ec; color: #17614b; font-size: 12px; font-weight: 680; white-space: nowrap; }
.worklist :is(.forecast-cell, .order-value) .cell-secondary { display: inline-block; margin: 0 0 0 6px; white-space: normal; }
.worklist .forecast-caption { color: var(--muted); }
.worklist :is(.prep-value, .order-value, .forecast-cell) { overflow-wrap: anywhere; }
.worklist :is(.prep-value, .order-value) strong:not(.order-due) { font-weight: 610; }
.detail-col .icon { width: 15px; height: 15px; color: #527371; vertical-align: middle; }
.empty-state { padding: 38px 18px; text-align: center; border-top: 1px solid #ecf0ee; color: var(--muted); }
.table-footer { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-top: 1px solid #eaf0ed; padding: 7px 17px; color: var(--muted); font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 8px; color: #48616a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pagination .icon-button { width: 29px; min-height: 29px; }
.notice { margin: 0 18px 13px; padding: 9px 11px; border-radius: 7px; background: #fff0ed; color: #923c2c; font-size: 13px; overflow-wrap: anywhere; }
.toast { position: fixed; right: 25px; bottom: 24px; max-width: calc(100vw - 50px); z-index: 3; padding: 10px 13px; border-radius: 8px; color: #fff; background: #1f5547; box-shadow: 0 4px 16px #15273322; }

.drawer { position: fixed; inset: 0 0 0 auto; width: min(100%, 546px); height: 100%; max-width: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid #dce6e1; background: #fff; color: var(--ink); box-shadow: -10px 0 40px #182b3424; }
.drawer[open] { display: flex; flex-direction: column; }
.drawer::backdrop { background: #10243155; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 15px; border-bottom: 1px solid var(--line); }
.drawer-title { min-width: 0; }
.drawer-title h2 { font: 670 22px/1.3 "IBM Plex Mono", ui-monospace, Menlo, monospace; overflow-wrap: anywhere; margin-top: 4px; }
.drawer-title h2:focus { outline: none; }
.detail-context { color: var(--muted); font-size: 12px; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.detail-overview { padding: 15px 20px; background: #f3f8f6; border-bottom: 1px solid var(--line); }
.detail-overview dl, .route-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.detail-overview dt, .route-summary span { color: var(--muted); font-size: 11px; }
.detail-overview dd { min-height: 22px; margin-top: 3px; font-size: 14px; font-weight: 670; font-variant-numeric: tabular-nums; }
.stock-cycle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.stock-cycle-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; color: var(--muted); font-size: 12px; }
.stock-cycle-summary strong { margin-left: 3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stock-cycle-date { flex-basis: 100%; font-size: 11px; }
.stock-receipt-note, .stock-cycle .notice { flex-basis: 100%; margin: 0; }
.stock-receipt-note { color: var(--muted); font-size: 12px; }
.detail-note { margin-top: 9px; color: #6a542d; font-size: 12px; overflow-wrap: anywhere; }
.route-summary { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e0ebe5; }
.route-summary strong, .route-summary span { display: block; overflow-wrap: anywhere; }
.route-summary strong { font-size: 14px; }
.alternative-details { margin-top: 12px; font-size: 12px; color: #436069; }
.alternative-details p { margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.drawer summary { cursor: pointer; }
.drawer .alternative-details > .estimate-grid { margin-top: 8px; }
.estimate-panel { padding: 14px 20px 16px; background: #fafbf7; border-bottom: 1px solid var(--line); }
.estimate-panel h3 { margin: 0 0 8px; font-size: 14px; font-weight: 680; }
.estimate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.estimate-grid dt, .estimate-leg dt { color: var(--muted); font-size: 11px; }
.estimate-grid dd, .estimate-leg dd { color: #243e45; font-size: 13px; font-weight: 640; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.estimate-legs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.estimate-legs:empty { display: none; }
.estimate-leg { min-width: 0; padding: 8px 10px; border: 1px solid #e2e9e0; border-radius: 7px; background: #fff; }
.estimate-leg h4 { margin: 0 0 4px; color: #254d46; font-size: 13px; }
.estimate-leg-summary { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.estimate-leg-detail { margin-top: 4px; color: #436069; font-size: 11px; }
.estimate-leg dl { display: grid; gap: 4px; margin-top: 5px; }
.estimate-note { margin-top: 8px; color: #645836; font-size: 12px; overflow-wrap: anywhere; }
.estimate-options-list { display: grid; gap: 4px; margin: 7px 0 0; padding: 0; list-style: none; }
.estimate-options-list li { padding: 5px 7px; border-radius: 5px; background: #fff; }
.estimate-options-list strong, .estimate-options-list span { display: block; overflow-wrap: anywhere; }
.oms-sales { padding: 14px 20px 16px; border-bottom: 1px solid var(--line); }
.oms-sales > summary, .drawer-edit > summary { font-size: 14px; font-weight: 640; }
.drawer-edit > summary { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.oms-sales-summary, .oms-sales-note, .oms-sales-window { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.oms-sales-window { margin-top: 7px; }
.oms-sales-summary { margin-top: 3px; }
.oms-sales-note { margin-top: 3px; color: #805c25; }
.oms-sales-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.oms-sales-days:empty { display: none; }
.oms-sales-day { min-width: 0; padding: 4px 2px; border-radius: 5px; background: #e8f4ee; color: #205e4c; text-align: center; font-variant-numeric: tabular-nums; }
.oms-sales-day time { display: block; color: #466466; font-size: 10px; white-space: nowrap; }
.oms-sales-day strong { font-size: 13px; }
.oms-sales-day.zero { background: #f1f5f3; color: #65777a; }
.edit-section { border: 0; border-bottom: 1px solid var(--line); min-width: 0; margin: 0; padding: 14px 20px 16px; }
.edit-section legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 680; }
.form-grid { display: grid; gap: 9px 12px; clear: both; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dimensions { margin-top: 9px; }
.input-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: #52666e; font-size: 12px; }
.input-field input, .input-field select { width: 100%; height: 35px; min-width: 0; border: 1px solid #dce7e2; border-radius: 7px; padding: 6px 8px; background: #fff; color: var(--ink); }
.input-field input::placeholder { color: #71858a; }
.input-field input:disabled, .input-field select:disabled { background: #f2f5f4; color: #617477; opacity: 1; }
.checkbox-field { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; color: #405d64; font-size: 12px; }
.checkbox-field input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--green); flex: none; }
.batch-list { clear: both; display: grid; gap: 8px; }
.batch-empty, .batch-static { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.batch { border: 1px solid #e2ebe7; border-radius: 8px; padding: 9px; }
.batch-eta-only { margin-top: 8px; }
.batch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.batch-head strong { overflow-wrap: anywhere; color: #304c54; font-size: 12px; }
.batch-note { grid-column: 1 / -1; }
.remove-batch { min-height: 27px; width: 27px; color: #9a5544; }
.button-add { min-height: 30px; padding: 4px 8px; margin-top: 8px; background: #edf6f1; color: #236651; border-color: #e0eee7; font-size: 12px; }
.button-add:not(:disabled):hover { background: #e1f0e8; }
.drawer-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.drawer-notice { margin: 12px 20px 16px; }

@media (min-width: 1024px) {
    .topbar-inner { min-height: 64px; }
    .topbar .brand { font-size: 16px; }
    .topbar-sync { min-inline-size: 142px; min-height: 42px; font-size: 14px; }
    .data-menu summary { width: 42px; min-height: 42px; }
    .workspace-page h1 { font-size: clamp(36px, 3vw, 42px); }
    .workspace-page .filter { min-height: 42px; font-size: 14px; }
    .workspace-page .filter :is(input, select) { height: 40px; }
    .source-badge, .snapshot-meta dt { font-size: 12px; }
    .snapshot-meta { width: 322px; }
    .snapshot-meta dd { font-size: 14px; }
    .summary-strip > * { padding: 12px 20px; }
    .summary-label, .summary-value { font-size: 13px; }
    .summary-value strong { font-size: 30px; }
    .worklist-head { padding: 14px 20px; }
    .worklist-title h2 { font-size: 18px; }
    .worklist th, .worklist td { padding-inline: 20px; }
    .worklist th { height: 44px; font-size: 13px; }
    .worklist td { height: 52px; font-size: 16px; }
    .sku-button { font-size: 16px; }
    .worklist .thead-secondary, .worklist .cell-secondary, .worklist .number-unit { font-size: 12px; }
    .worklist .order-due { font-size: 13px; }
}
@media (max-width: 730px) {
    .wrap { padding-inline: 16px; }
    .main { padding-top: 20px; }
    .page-heading { display: block; }
    .snapshot-meta { width: 100%; margin-top: 12px; }
    .snapshot-meta div + div { padding-left: 12px; }
    .summary-strip > * { padding-inline: 12px; }
    .worklist-head { flex-wrap: wrap; padding: 12px; }
    .filters { width: 100%; }
    .worklist th, .worklist td { padding-inline: 8px; }
    .worklist :is(.forecast-cell, .order-value) .cell-secondary { display: block; margin: 1px 0 0; }
    .thead-secondary { display: block; margin-inline-start: 0; }
    .table-footer { padding-inline: 10px; }
}
@media (max-width: 540px) {
    .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-strip > :nth-child(3) { border-inline-start: 0; }
    .summary-strip > :nth-child(n + 3) { border-block-start: 1px solid var(--line); }
    .topbar-inner { min-height: 54px; flex-wrap: wrap; padding-block: 6px; }
    .topbar-start { gap: 8px; }
    .topbar-actions { margin-inline-start: auto; }
    .cost-entry { font-size: 12px; padding-inline: 7px; }
    .cost-dialog-head, .cost-dialog-body { padding-inline: 12px; }
    .cost-dialog-head { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; column-gap: 8px; }
    .cost-dialog-head h2 { font-size: 16px; }
    .cost-current-unit { padding-inline: 6px; }
    .cost-table :is(th, td) { padding-inline: 4px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
    .cost-table .sku-button { white-space: normal; text-align: left; overflow-wrap: anywhere; }
    .cost-batch-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cost-batch-fields > :first-child { grid-column: 1 / -1; }
    .worklist .detail-col { display: none; }
    .sku-col { width: 86px; }
    .worklist th.remaining-col { width: clamp(66px, 17vw, 82px); }
    .remaining-meter { grid-template-columns: minmax(0, 1fr) 5ch; gap: 4px; font-size: 11px; }
    .remaining-bar { block-size: 5px; }
    .worklist th, .worklist td { padding-inline: 5px; font-size: 12px; }
    .worklist th, .column-sort > span { text-wrap: balance; }
    .column-sort { gap: 2px; }
    .column-sort .sort-icon { width: 12px; height: 12px; }
    .worklist th:first-child, .worklist td:first-child { padding-left: 11px; }
    .worklist .order-value { font-size: 11px; letter-spacing: -.015em; text-wrap: balance; }
    .worklist .order-due { padding-inline: 4px; font-size: 11px; }
    .sku-button { font-size: 12px; }
}
@media (max-width: 425px) {
    .wrap { padding-inline: 12px; }
    .topbar-inner { gap: 8px; }
    .topbar-actions { gap: 6px; }
    .topbar-sync { min-inline-size: 116px; padding-inline: 8px; }
    .brand { gap: 7px; font-size: 13px; }
    .brand-mark { width: 28px; height: 28px; }
    .brand-mark .icon { width: 18px; height: 18px; }
    .summary-strip > * { padding-inline: 9px; }
    .drawer-head, .detail-overview, .estimate-panel, .oms-sales, .drawer-edit > summary, .edit-section, .drawer-footer { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

.sync-source-times { display: flex; flex-wrap: wrap; gap: 7px 22px; margin: -5px 0 12px; color: var(--muted); font-size: 12px; }
.sync-source-times > div { display: flex; align-items: baseline; gap: 6px; }
.sync-source-times dd { font-variant-numeric: tabular-nums; color: var(--ink); }
.sync-source-times .is-stale dd { color: #9d5239; }
.order-review-details { margin-bottom: 10px; padding: 9px 12px; border-radius: 7px; background: #fbf3e9; color: #694927; font-size: 13px; }
.order-review-details ul { margin: 5px 0 0; padding-inline-start: 18px; }
#order-comparison { margin-bottom: 7px; }
.shipping-order-items li > span { display: flex; flex-wrap: wrap; gap: 3px 9px; }
.order-advance { color: var(--muted); font-size: 12px; }
.review-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-block: 9px; }
.review-fields > .input-field { flex: 1 1 180px; min-inline-size: 0; }
#stock-receipt-controls, #sku-edit-history { color: var(--muted); font-size: 12px; }
#stock-receipt-controls summary, #sku-edit-history summary { cursor: pointer; }
#sku-edit-events { padding-inline-start: 18px; margin-block: 6px 0; overflow-wrap: anywhere; }
.remaining-count .cycle-stale { display: block; margin-top: 1px; color: #8a5a38; font-size: 10px; }
#sailing-import-dialog { width: min(550px, calc(100% - 32px)); }
#sailing-import-dialog .cost-dialog-head { grid-template-columns: 1fr auto; }
#sailing-import-dialog input { max-inline-size: 100%; }

.procurement-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.procurement-body { display: grid; gap: 14px; align-content: start; }
.procurement-list { display: grid; gap: 8px; }
.procurement-entry { text-align: start; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; }
.procurement-entry:hover { border-color: #b4c9c0; background: #f2f8f5; }
.procurement-line { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.procurement-line-inputs { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(76px, .7fr) minmax(125px, 1fr) auto; gap: 8px; align-items: end; }
.procurement-line-inputs > strong { align-self: center; }
.procurement-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.procurement-actions:empty { display: none; }
.procurement-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.procurement-facts > div { min-inline-size: 0; overflow-wrap: anywhere; }
.procurement-facts dt { color: var(--muted); font-size: 12px; }
.procurement-facts dd { font-weight: 600; }
.procurement-audit { color: var(--muted); font-size: 12px; }
.procurement-audit summary { cursor: pointer; }
.procurement-audit ul { margin-block: 4px; padding-inline-start: 18px; }
.procurement-voyages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.procurement-voyage { gap: 10px; }
.procurement-voyages h4, .procurement-voyage h4 { margin: 0; font-size: 14px; }
.procurement-voyage-status { border-radius: 5px; padding: 3px 7px; color: var(--green-dark); background: #eaf3ef; font-size: 12px; }
.procurement-allocation summary { cursor: pointer; font-size: 12px; color: #3d5e57; }
.procurement-note { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.procurement-table-wrap { overflow-x: auto; }
.procurement-draft-table { min-width: 470px; }
.procurement-draft-table :is(th, td) { padding-inline: 6px; }
.procurement-draft-table input, .procurement-form textarea { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; }
.procurement-form textarea { resize: vertical; }
.procurement-draft-table th:first-child { width: 26%; }
.procurement-draft-table th:last-child { width: 72px; }
.procurement-actual-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.procurement-actual-row > :is(strong, span) { align-self: center; overflow-wrap: anywhere; }
#shipping-order-items + .button { margin-block-start: 8px; }
@media (max-width: 500px) {
    .procurement-facts, .procurement-line-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .procurement-voyages { grid-template-columns: minmax(0, 1fr); }
    .procurement-actual-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .procurement-entry { flex-wrap: wrap; }
    .procurement-head h2 { font-size: 16px; }
}