:root {
  --ink: #18211d;
  --muted: #6f7b75;
  --line: #e5e9e6;
  --panel: #ffffff;
  --canvas: #f4f6f4;
  --green: #1c7c54;
  --green-soft: #e7f4ed;
  --red: #c23b3b;
  --red-soft: #faeaea;
  --orange: #c66b1c;
  --orange-soft: #fff0df;
  --yellow: #a77b12;
  --yellow-soft: #fff6d9;
  --blue: #3f6fb5;
  --blue-soft: #e9f0fb;
  --sidebar: #14231d;
  --sidebar-muted: #8ea399;
  --shadow: 0 8px 26px rgba(24, 33, 29, .055);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button:disabled { cursor: not-allowed; opacity: .55; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; padding: 25px 18px; background: var(--sidebar); color: white; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 6px 32px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #f4c45c; color: #14231d; font-size: 22px; font-weight: 900; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: .02em; }
.brand small { color: var(--sidebar-muted); margin-top: 1px; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; color: #bdcac4; border-radius: 10px; font-weight: 600; transition: .18s; }
.sidebar nav a span { width: 22px; text-align: center; font-size: 16px; }
.sidebar nav a:hover { color: white; background: rgba(255,255,255,.06); }
.sidebar nav a.active { color: white; background: #244337; box-shadow: inset 3px 0 #f4c45c; }
.sidebar-note { margin-top: auto; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; display: flex; align-items: center; gap: 10px; color: #d4ded9; }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note small { color: var(--sidebar-muted); font-size: 11px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #54d393; box-shadow: 0 0 0 5px rgba(84,211,147,.12); }

.main-shell { margin-left: 238px; min-height: 100vh; }
.demo-banner { padding: 8px 34px; color: #72520f; background: #fff1c5; border-bottom: 1px solid #f1dda0; font-size: 12px; }
.demo-banner strong { margin-right: 8px; }
.topbar { display: flex; justify-content: space-between; align-items: end; padding: 28px 34px 20px; }
.topbar h1 { margin: 1px 0 0; font-size: 27px; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: #8a958f; font-size: 10px; line-height: 1.4; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.read-only-pill { color: var(--green); background: var(--green-soft); border: 1px solid #cae8d8; border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: white; background: #315346; font-size: 12px; font-weight: 700; }
.logout-form { margin: 0; }
.logout-form .avatar { border: 0; cursor: pointer; }
.mobile-nav, .mobile-more-actions { display: none; }
.content { padding: 0 34px 42px; }

.freshness-strip { display: flex; gap: 9px; overflow-x: auto; margin-bottom: 16px; }
.freshness-item { min-width: 155px; flex: 1; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.75); }
.freshness-item strong, .freshness-item small { display: block; white-space: nowrap; }
.freshness-item strong { font-size: 12px; }
.freshness-item small { color: var(--muted); font-size: 10px; }
.freshness-icon { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-weight: 900; }
.freshness-item.stale .freshness-icon, .freshness-item.failed .freshness-icon, .freshness-item.partial .freshness-icon { background: var(--orange-soft); color: var(--orange); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-period-note { margin: -4px 0 16px; padding: 9px 12px; color: #59645f; background: #edf4f0; border: 1px solid #d8e6df; border-radius: 10px; font-size: 11px; }
.kpi-grid.compact .kpi-card { min-height: 125px; }
.kpi-card { min-height: 144px; padding: 20px; border-radius: 15px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi-card.hero { background: linear-gradient(145deg, #1b3a2e, #244f3f); color: white; border: 0; }
.kpi-card.hero:after { content: ""; position: absolute; width: 120px; height: 120px; border: 22px solid rgba(255,255,255,.055); border-radius: 50%; right: -45px; top: -45px; }
.kpi-card.attention { border-top: 3px solid #e7ac37; }
.kpi-card .kpi-label { color: var(--muted); font-weight: 700; display: flex; justify-content: space-between; }
.kpi-card .kpi-label span { color: #a8b1ac; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.kpi-card.hero .kpi-label { color: #b7cec4; }
.kpi-card > strong { display: block; margin: 17px 0 4px; font-size: 28px; line-height: 1; letter-spacing: -.035em; }
.kpi-card > small { color: var(--muted); }
.kpi-card.hero > small { color: #aac1b7; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }

.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); padding: 20px; }
.panel-wide { grid-row: span 2; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.panel-heading h2 { margin: 3px 0 0; font-size: 17px; letter-spacing: -.015em; }
.panel-heading > a { color: var(--green); font-weight: 700; font-size: 12px; }
.count-pill { padding: 4px 8px; border-radius: 999px; color: var(--orange); background: var(--orange-soft); font-size: 11px; font-weight: 700; }
.note { color: var(--muted); font-size: 11px; }

.action-list { display: grid; }
.action-row { display: grid; grid-template-columns: 12px minmax(0,1fr) auto 18px; align-items: center; gap: 11px; padding: 14px 3px; border-top: 1px solid #edf0ee; }
.action-row:first-child { border-top: 0; }
.action-row:hover { background: #fafbfa; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; background: #9da7a2; }
.alert-dot.red, .status-line.failed { background: var(--red); }
.alert-dot.orange, .alert-dot.amber, .status-line.stale, .status-line.partial { background: var(--orange); }
.alert-dot.yellow { background: #e1b839; }
.alert-dot.blue { background: var(--blue); }
.alert-dot.green, .status-line.fresh { background: var(--green); }
.action-main strong, .action-main small { display: block; }
.action-main small { color: var(--muted); margin-top: 2px; }
.action-meta { color: #59645f; font-size: 12px; }
.arrow { color: #9aa49f; }

.mini-list > div, .data-status-list > div { padding: 10px 0; border-top: 1px solid #edf0ee; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-list > div:first-child, .data-status-list > div:first-child { border-top: 0; }
.mini-list span strong, .mini-list span small, .data-status-list span strong, .data-status-list span small { display: block; }
.mini-list span small, .data-status-list span small { color: var(--muted); font-size: 11px; }
.mini-list b, .data-status-list b { font-size: 12px; white-space: nowrap; }
.data-status-list > div { justify-content: flex-start; }
.data-status-list > div > b { margin-left: auto; color: var(--muted); font-weight: 500; }
.status-line { width: 4px; height: 29px; border-radius: 4px; flex: none; }

.filter-bar, .toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 11px; padding: 14px; margin-bottom: 16px; border-radius: 13px; background: white; border: 1px solid var(--line); }
.filter-bar label, .stack-form label { color: #65716b; font-size: 11px; font-weight: 700; }
input, select { width: 100%; margin-top: 5px; padding: 9px 10px; color: var(--ink); background: white; border: 1px solid #dfe5e1; border-radius: 8px; outline: 0; }
input:focus, select:focus { border-color: #6c9f88; box-shadow: 0 0 0 3px rgba(52,122,89,.08); }
.filter-bar label { min-width: 150px; }
.button { border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; font-weight: 700; font-size: 12px; }
.button.primary { color: white; background: #1f7653; }
.button.primary:hover { background: #185d41; }
.button.secondary { color: #28523f; background: #edf4f0; border: 1px solid #d8e6df; }
.button.ghost { color: #65716b; background: transparent; border: 1px solid #dfe4e1; }

.table-panel { padding: 0; overflow: hidden; }
.table-panel .panel-heading { padding: 19px 20px 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 11px 13px; color: #7e8983; background: #f8faf8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
td { padding: 13px; border-bottom: 1px solid #eef1ef; vertical-align: middle; font-size: 12px; }
tr:last-child td { border-bottom: 0; }
td strong, td small { display: block; }
td small { color: var(--muted); margin-top: 2px; max-width: 260px; white-space: normal; }
.maturity, .alert-badge { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.maturity.provisional { color: var(--orange); background: var(--orange-soft); }
.maturity.observed { color: var(--blue); background: var(--blue-soft); }
.maturity.reconciled { color: var(--green); background: var(--green-soft); }
.alert-badge.red { color: var(--red); background: var(--red-soft); }
.alert-badge.orange { color: var(--orange); background: var(--orange-soft); }
.alert-badge.yellow { color: var(--yellow); background: var(--yellow-soft); }
.alert-badge.blue { color: var(--blue); background: var(--blue-soft); }
.alert-badge.gray { color: #69746e; background: #eef0ef; }
.alert-badge.green { color: var(--green); background: var(--green-soft); }

.alert-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.alert-summary > div { padding: 15px; border-radius: 12px; background: white; border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.alert-summary strong { font-size: 25px; }
.alert-summary span { color: var(--muted); font-size: 12px; }
.alert-summary .red { border-left: 4px solid var(--red); }.alert-summary .orange { border-left: 4px solid var(--orange); }.alert-summary .yellow { border-left: 4px solid #dcb437; }.alert-summary .blue { border-left: 4px solid var(--blue); }.alert-summary .gray { border-left: 4px solid #89938e; }

.toolbar { justify-content: space-between; align-items: center; }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 700; font-size: 12px; }
.tabs a.active { color: var(--green); background: var(--green-soft); }
.suggestion-stack { display: grid; gap: 14px; }
.suggestion-card { padding: 20px; background: white; border: 1px solid var(--line); border-left: 4px solid #aab3ae; border-radius: 14px; box-shadow: var(--shadow); }
.suggestion-card.priority-inventory { border-left-color: var(--red); }
.suggestion-card.priority-stop_loss, .suggestion-card.priority-listing { border-left-color: var(--orange); }
.suggestion-card.priority-scale { border-left-color: var(--green); }
.suggestion-card.priority-explore { border-left-color: var(--blue); }
.suggestion-head { display: flex; justify-content: space-between; gap: 20px; }
.suggestion-head h2 { margin: 8px 0 4px; font-size: 18px; }
.suggestion-head p { margin: 0; color: var(--muted); }
.priority-pill, .confidence { padding: 3px 7px; border-radius: 999px; background: #edf0ee; color: #66716b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.confidence { margin-left: 5px; background: var(--blue-soft); color: var(--blue); }
.impact { min-width: 120px; text-align: right; }
.impact small, .impact strong, .impact span { display: block; }
.impact strong { margin: 3px 0; color: var(--green); font-size: 19px; }
.impact span { color: var(--muted); font-size: 10px; }
.ad-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 11px; margin: 16px 0 12px; color: #4f5c55; background: #f7f9f7; border-radius: 8px; font-size: 11px; }
.ad-path b { color: #a6aea9; }
.metrics-row { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.metrics-row > div { padding: 10px; border-left: 1px solid var(--line); }
.metrics-row > div:first-child { border-left: 0; }
.metrics-row small, .metrics-row strong { display: block; }
.metrics-row small { color: var(--muted); font-size: 9px; }
.metrics-row strong { margin-top: 3px; font-size: 12px; }
.explanation { margin-top: 12px; padding: 13px; background: #fffbef; border: 1px solid #f2e6bf; border-radius: 9px; }
.explanation strong { color: #7b5c18; font-size: 11px; }
.explanation p { margin: 4px 0; }
.explanation small { color: #8a7b5c; }
.suggestion-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.processed { margin-top: 13px; color: var(--muted); font-size: 11px; text-align: right; }

.connection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.connection-card { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.connection-card > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; }
.connection-card.ready > span { color: var(--green); background: var(--green-soft); }
.connection-card.missing > span { color: var(--orange); background: var(--orange-soft); }
.connection-card strong, .connection-card small { display: block; }
.connection-card small { color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.live-sync-panel { margin-bottom: 16px; }
.live-sync-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(360px, 1.3fr); gap: 24px; }
.settings-grid.lower { grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
.stack-form { display: grid; gap: 11px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.form-help { color: var(--muted); }
.check-line { display: flex !important; align-items: flex-start; gap: 8px; color: var(--muted) !important; font-weight: 500 !important; line-height: 1.4; }
.check-line input { width: 16px; height: 16px; flex: none; margin: 1px 0 0; accent-color: var(--green); }
.general-expense-panel { margin-bottom: 16px; }
.general-expense-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 11px; }
.general-expense-form label { color: #65716b; font-size: 11px; font-weight: 700; }
.general-expense-form .compact-check { align-self: center; }
.expense-ledger { margin-top: 16px; }
.empty-state { padding: 28px; color: var(--muted); text-align: center; }
.feature-callout { padding: 8px 2px; }
.feature-callout p { color: var(--muted); line-height: 1.65; }
.shipment-toolbar > div { display: grid; gap: 3px; }
.shipment-toolbar small { color: var(--muted); }
.shipment-rules, .inbound-batch { margin-bottom: 16px; }
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rule-grid > div { padding: 13px; background: #f8faf8; border: 1px solid var(--line); border-radius: 10px; }
.rule-grid b, .rule-grid span { display: block; }
.rule-grid span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.batch-heading small { color: var(--muted); }
.batch-pills { display: flex; gap: 7px; align-items: center; }
.shipment-columns { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; margin-bottom: 16px; }
.shipment-columns h3 { margin: 0 0 8px; font-size: 13px; }
.shipment-card-list { display: grid; gap: 7px; }
.shipment-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: #f8faf8; border: 1px solid var(--line); border-radius: 9px; }
.shipment-card strong, .shipment-card small, .shipment-card b { display: block; }
.shipment-card small { color: var(--muted); }
.shipment-card b { text-align: right; }
.batch-cost-editor, .inline-editor { border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.batch-cost-editor > summary, .inline-editor > summary { padding: 11px 13px; color: var(--green); cursor: pointer; font-weight: 700; }
.batch-cost-editor > form { padding: 0 13px 13px; }
.cost-input-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.batch-items { margin-left: -20px; margin-right: -20px; margin-bottom: -20px; }
.inline-editor { min-width: 170px; }
.inline-editor form { display: grid; gap: 8px; padding: 0 10px 10px; }
.inline-editor form label { color: var(--muted); font-size: 10px; font-weight: 700; }
.shipment-finance-note { display: block; padding: 12px 20px 18px; }

.close-status { margin-bottom: 16px; }
.close-status.open { border-left: 4px solid var(--orange); }
.close-status.ready { border-left: 4px solid var(--green); }
.close-status.reconciled { border-left: 4px solid var(--blue); }
.close-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.close-grid > div { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfa; }
.close-grid small, .close-grid strong { display: block; }
.close-grid small { color: var(--muted); font-size: 10px; }
.close-grid strong { margin-top: 4px; font-size: 17px; }
.blocking-list { margin: 14px 0; padding: 11px 14px 11px 32px; color: #825014; background: var(--orange-soft); border-radius: 10px; }
.quality-ok { padding: 11px 13px; color: var(--green); background: var(--green-soft); border-radius: 10px; }
.close-form { display: grid; grid-template-columns: 1fr 1.4fr auto auto; align-items: end; gap: 10px; margin-top: 14px; }
.close-form label { color: #65716b; font-size: 11px; font-weight: 700; }

.login-page { display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 0, #eef6f1, var(--canvas) 52%); }
.login-card { width: min(420px, 100%); padding: 32px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px rgba(20,35,29,.12); }
.login-brand { margin: 0 0 34px; color: var(--ink); }
.login-brand small { color: var(--muted); }
.login-card h1 { margin: 5px 0 8px; }
.login-intro { margin: 0 0 22px; color: var(--muted); }
.login-error { margin-bottom: 14px; padding: 10px 12px; color: var(--red); background: var(--red-soft); border-radius: 9px; }
.login-button { min-height: 44px; margin-top: 5px; }

@media (max-width: 1120px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-row { grid-template-columns: repeat(3, 1fr); }
  .metrics-row > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .metrics-row > div:nth-child(5), .metrics-row > div:nth-child(6) { border-top: 1px solid var(--line); }
  .connection-grid, .settings-grid.lower, .live-sync-grid { grid-template-columns: 1fr; }
  .general-expense-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .close-grid { grid-template-columns: repeat(2, 1fr); }
  .close-form { grid-template-columns: 1fr 1fr; }
  .shipment-columns { grid-template-columns: 1fr; }
  .cost-input-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .sidebar { position: static; width: 100%; height: auto; padding: 14px; }
  .brand { margin-bottom: 12px; }
  .sidebar nav { display: none; }
  .sidebar-note { display: none; }
  .main-shell { margin-left: 0; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
  .content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }
  .panel-wide { grid-row: auto; }
  .alert-summary { grid-template-columns: repeat(2, 1fr); }
  .mobile-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); background: rgba(20,35,29,.97); box-shadow: 0 -8px 24px rgba(20,35,29,.14); }
  .mobile-nav a { display: grid; place-items: center; gap: 1px; min-height: 48px; color: #aebdb6; font-size: 10px; border-radius: 9px; }
  .mobile-nav a span { font-size: 17px; line-height: 1; }
  .mobile-nav a.active { color: white; background: #244337; }
  .mobile-more-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
  .mobile-more-actions form { margin: 0; }
  .rule-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .suggestion-head { display: block; }
  .impact { margin-top: 10px; text-align: left; }
  .metrics-row { grid-template-columns: repeat(2, 1fr); }
  .metrics-row > div { border-top: 1px solid var(--line); }
  .form-row { grid-template-columns: 1fr; }
  .general-expense-form { grid-template-columns: 1fr; }
  .topbar { align-items: center; padding-top: 18px; }
  .topbar h1 { font-size: 23px; }
  .read-only-pill { display: none; }
  .kpi-card { min-height: 118px; }
  .close-grid, .close-form { grid-template-columns: 1fr; }
  .cost-input-grid { grid-template-columns: 1fr; }
  .button, button, input, select { min-height: 44px; }
  table.mobile-cards, table.mobile-cards tbody, table.mobile-cards tr, table.mobile-cards td { display: block; width: 100%; }
  table.mobile-cards thead { display: none; }
  table.mobile-cards { white-space: normal; }
  table.mobile-cards tr { margin: 12px; width: calc(100% - 24px); padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
  table.mobile-cards td { display: flex; justify-content: space-between; gap: 18px; padding: 8px 2px; border-bottom: 1px solid #eef1ef; text-align: right; }
  table.mobile-cards td:last-child { border-bottom: 0; }
  table.mobile-cards td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 10px; font-weight: 700; text-align: left; }
  table.mobile-cards td > small { max-width: 62%; }
  .suggestion-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .suggestion-actions .button { width: 100%; padding-left: 8px; padding-right: 8px; }
}

/* Shipment workspace V1.7 — scalable overview, drill-down details and exception center. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sidebar nav a i { width: 22px; text-align: center; font-size: 18px; }
.mobile-nav a i { font-size: 19px; line-height: 1; }
.page-meta { min-height: 18px; margin-top: 3px; color: var(--muted); font-size: 11px; }
.page-meta:empty { min-height: 0; margin: 0; }
.topbar-action-form { margin: 0; }
.topbar-action-form > input { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.sync-button { min-height: 40px; padding: 10px 16px; box-shadow: 0 5px 14px rgba(31,118,83,.13); }
.topbar-back { min-height: 38px; }

.shipment-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 20px; padding: 0 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.shipment-summary-item { position: relative; display: grid; place-items: center; align-content: center; min-height: 126px; padding: 20px 14px; text-align: center; }
.shipment-summary-item + .shipment-summary-item::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px; background: var(--line); }
.shipment-summary-item span, .shipment-summary-item strong { display: block; }
.shipment-summary-item span { color: var(--muted); font-size: 13px; }
.shipment-summary-item strong { margin-top: 8px; color: var(--ink); font-size: 27px; line-height: 1; letter-spacing: -.035em; }
a.shipment-summary-item:hover { background: #fbfcfb; }

.shipment-filter { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(130px, .55fr) minmax(280px, 1fr) 100px auto auto; align-items: center; gap: 12px; margin-bottom: 20px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.shipment-filter label { min-width: 0; }
.shipment-filter input, .shipment-filter select { min-height: 42px; margin-top: 0; }
.shipment-search { position: relative; }
.shipment-search > i { position: absolute; z-index: 1; top: 50%; left: 13px; transform: translateY(-50%); color: #8a958f; font-size: 18px; }
.shipment-search input { padding-left: 40px; }
.shipment-date-range { display: grid; grid-template-columns: minmax(120px,1fr) 18px minmax(120px,1fr); align-items: center; gap: 6px; }
.shipment-date-range > i { color: #a3aca7; text-align: center; }
.switch-field { display: inline-flex; align-items: center; gap: 8px; min-width: 100px; color: #4e5953; white-space: nowrap; cursor: pointer; }
.switch-field > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch-control { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #d8deda; transition: .18s; }
.switch-control::after { content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(24,33,29,.2); transition: .18s; }
.switch-field input:checked + .switch-control { background: var(--green); }
.switch-field input:checked + .switch-control::after { transform: translateX(14px); }
.switch-field input:focus-visible + .switch-control { outline: 3px solid rgba(28,124,84,.2); outline-offset: 2px; }
.switch-field b { font-size: 12px; }

.shipment-table-panel { padding: 0; overflow: hidden; }
.shipment-table-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.shipment-table-heading > div strong, .shipment-table-heading > div span { display: block; }
.shipment-table-heading > div strong { font-size: 15px; }
.shipment-table-heading > div span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 12px; font-weight: 700; white-space: nowrap; }
.text-link em { min-width: 20px; padding: 2px 6px; color: var(--red); background: var(--red-soft); border-radius: 999px; font-size: 10px; font-style: normal; text-align: center; }
.shipments-table th { height: 54px; padding: 13px 16px; background: #fafbfa; color: #69746e; font-size: 11px; text-transform: none; letter-spacing: 0; }
.shipments-table td { height: 90px; padding: 16px; font-size: 13px; }
.shipments-table tbody tr { transition: background .15s; }
.shipments-table tbody tr:hover { background: #fbfcfb; }
.batch-name { display: block; min-width: 190px; }
.batch-name strong { color: var(--ink); font-size: 14px; }
.batch-name small { color: var(--muted); font-size: 10px; }
.quantity-triple { white-space: nowrap; }
.quantity-triple b, .quantity-triple span { display: inline; }
.quantity-triple span { padding: 0 4px; color: #a6aea9; }
.exception-link { color: var(--red); font-weight: 700; white-space: nowrap; }
.muted-dash { color: #9fa8a3; }
.row-action { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 12px; font-weight: 700; white-space: nowrap; }
.row-action i { font-size: 16px; }
.empty-state i, .empty-state strong, .empty-state small { display: block; }
.empty-state i { margin-bottom: 7px; color: #8ca096; font-size: 24px; }
.empty-state small { margin: 3px auto 0; }

.table-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: 64px; padding: 10px 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; }
.table-pagination > form { margin: 0; }
.table-pagination label { display: inline-flex; align-items: center; gap: 7px; }
.table-pagination select { width: auto; min-height: 34px; margin: 0; padding: 5px 28px 5px 9px; }
.table-pagination > span { text-align: center; }
.table-pagination nav { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.table-pagination nav a, .table-pagination nav > span, .table-pagination nav b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.table-pagination nav a { color: #64716b; border: 1px solid var(--line); }
.table-pagination nav a:hover { color: var(--green); border-color: #b9d6c8; }
.table-pagination nav b { color: white; background: var(--green); }
.table-pagination nav .disabled { color: #c1c7c4; }
.table-pagination nav small { color: var(--muted); }

.detail-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.detail-summary > div { min-height: 92px; padding: 18px; border-left: 1px solid var(--line); }
.detail-summary > div:first-child { border-left: 0; }
.detail-summary span, .detail-summary strong { display: block; }
.detail-summary span { color: var(--muted); font-size: 11px; }
.detail-summary strong { margin-top: 7px; font-size: 20px; }
.detail-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 5px; overflow-x: auto; background: #e9eeeb; border-radius: 11px; }
.detail-tabs a { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 12px; color: #66716b; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.detail-tabs a.active { color: var(--green); background: white; box-shadow: 0 1px 5px rgba(24,33,29,.08); }
.detail-tabs a span { padding: 1px 6px; color: #7f8a84; background: #eef1ef; border-radius: 999px; font-size: 9px; }
.detail-panel { margin-bottom: 16px; }
.detail-table th { text-transform: none; letter-spacing: 0; }
.detail-table td { min-height: 64px; }
.detail-cost-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .4fr); gap: 16px; align-items: start; }
.cost-form-panel { grid-row: span 2; }
.batch-cost-total { display: grid; gap: 7px; min-height: 150px; align-content: center; }
.batch-cost-total span, .batch-cost-total small { color: var(--muted); }
.batch-cost-total strong { color: var(--green); font-size: 28px; }
.read-only-note { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }

.exception-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; }
.exception-summary a { padding: 15px 18px; border-left: 1px solid var(--line); }
.exception-summary a:first-child { border-left: 0; }
.exception-summary a.active { box-shadow: inset 0 -3px var(--green); background: #fbfdfc; }
.exception-summary span, .exception-summary strong { display: block; }
.exception-summary span { color: var(--muted); font-size: 11px; }
.exception-summary strong { margin-top: 4px; font-size: 16px; }
.exception-filter { grid-template-columns: minmax(280px,1fr) minmax(180px,.45fr) auto auto; }
.exception-table-panel { margin-bottom: 24px; }
.case-editor { min-width: 210px; }
.case-editor[open] { min-width: 290px; }

@media (max-width: 1180px) {
  .shipment-filter { grid-template-columns: minmax(260px,1fr) minmax(160px,.5fr) minmax(330px,1fr); }
  .shipment-filter .switch-field, .shipment-filter > .button { justify-self: start; }
  .detail-cost-grid { grid-template-columns: 1fr; }
  .cost-form-panel { grid-row: auto; }
}

@media (max-width: 820px) {
  .sidebar nav a i { width: auto; }
  .shipment-summary { padding: 0; grid-template-columns: repeat(5, minmax(130px, 1fr)); overflow-x: auto; }
  .shipment-summary-item { min-height: 100px; }
  .shipment-filter { grid-template-columns: 1fr 1fr; }
  .shipment-search, .shipment-date-range { grid-column: 1 / -1; }
  .detail-summary { grid-template-columns: repeat(3, 1fr); }
  .detail-summary > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .detail-summary > div:nth-child(5) { border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .page-meta { max-width: 210px; }
  .topbar-right { gap: 6px; }
  .sync-button span, .topbar-back { font-size: 0; }
  .sync-button, .topbar-back { width: 42px; min-width: 42px; padding: 0; }
  .sync-button i, .topbar-back i { font-size: 18px; }
  .shipment-summary { grid-template-columns: repeat(5, minmax(108px, 1fr)); margin-bottom: 14px; border-radius: 12px; }
  .shipment-summary-item { min-height: 86px; padding: 12px 9px; }
  .shipment-summary-item + .shipment-summary-item::before { top: 20px; bottom: 20px; }
  .shipment-summary-item span { font-size: 10px; }
  .shipment-summary-item strong { font-size: 22px; }
  .shipment-filter { display: grid; grid-template-columns: 1fr; margin-bottom: 14px; padding: 12px; }
  .shipment-search, .shipment-date-range { grid-column: auto; }
  .shipment-date-range { grid-template-columns: 1fr 16px 1fr; }
  .shipment-filter .switch-field, .shipment-filter > .button { justify-self: stretch; }
  .shipment-filter .switch-field { min-height: 44px; }
  .shipment-table-heading { min-height: 58px; padding: 12px 14px; }
  .shipment-table-heading > div span { display: none; }
  .shipments-table tr, .detail-table tr, .exception-table tr { box-shadow: none; }
  .shipments-table td, .detail-table td, .exception-table td { height: auto; min-height: auto; align-items: center; }
  .shipments-table .alert-badge, .detail-table .alert-badge, .exception-table .alert-badge { flex: none; align-self: center; }
  .shipments-table .batch-name { min-width: 0; }
  .quantity-triple { white-space: normal; }
  .table-pagination { grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px; }
  .table-pagination > span { display: none; }
  .detail-summary { grid-template-columns: repeat(2, 1fr); }
  .detail-summary > div { min-height: 78px; padding: 13px; }
  .detail-summary > div:nth-child(3), .detail-summary > div:nth-child(5) { border-left: 0; }
  .detail-summary > div:nth-child(3) { border-top: 1px solid var(--line); }
  .detail-summary > div:nth-child(4), .detail-summary > div:nth-child(5) { border-top: 1px solid var(--line); }
  .detail-tabs { margin-left: -4px; margin-right: -4px; }
  .detail-cost-grid { display: block; }
  .batch-cost-total { min-height: 118px; margin-bottom: 16px; }
  .exception-summary { grid-template-columns: repeat(2, 1fr); }
  .exception-summary a:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .exception-summary a:nth-child(4) { border-top: 1px solid var(--line); }
  .exception-filter { grid-template-columns: 1fr; }
  .case-editor[open] { min-width: 0; width: 100%; }
}