:root {
  /* Quiet green identity; status colors retain their own business meaning. */
  --ink-strong: #203c2e;
  --ink-medium: #2f4c3c;
  --ink-soft: #425b4e;
  --brand-strong: #236b4d;
  --brand: #2f7d5b;
  --brand-hover: #19543b;
  --brand-soft: #e5f1e9;
  --brand-line: #a9cbb6;
  --sidebar-surface: #f0f6f2;
  --nav-scroll-thumb: #cad8cf;
  --nav-scroll-thumb-active: #a9cbb6;
  --login-surface: #e7f1ea;
  --table-head: #edf3ef;
  --hover-surface: #f0f7f2;
  --focus-ring: #236b4d;
  --scrim: rgba(22,39,30,.46);
  --focus-halo: rgba(35,107,77,.15);
  --info-ink: #335f7a;
  --info-soft: #e8f0f6;
  --amber-700: #805509;
  --amber-500: #ae7414;
  --amber-100: #fff3d8;
  --red-600: #b42335;
  --red-100: #fde5e8;
  --canvas: #f5f7f5;
  --surface: #ffffff;
  --surface-soft: #f8faf8;
  --line: #d7e2da;
  --line-strong: #82998d;
  --border: var(--line);
  --text: #283d32;
  --muted: #5b6d62;
  --shadow-sm: 0 1px 2px rgba(32,60,46,.04);
  --shadow-md: 0 12px 30px rgba(32,60,46,.09);
  --radius: 10px;
  --sidebar: 248px;
  font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; overflow-x: hidden; background: var(--canvas); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--canvas); color: var(--text); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 10px 14px; border-radius: 8px; background: var(--surface); color: var(--ink-strong); box-shadow: var(--shadow-md); }
.skip-link:focus { top: 16px; }
.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; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar); display: flex; flex-direction: column; padding: 18px 14px; color: var(--text); background: var(--sidebar-surface); border-right: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 8px; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { color: var(--ink-strong); font-size: 19px; letter-spacing: .01em; }
.brand-lockup small { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--brand-strong); border-radius: 10px; background: var(--brand-strong); color: white; font: 700 19px/1 ui-monospace, monospace; }
.tenant-mini { margin: 18px 0 10px; padding: 13px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.tenant-mini span, .tenant-mini strong { display: block; }
.tenant-mini__label { color: var(--muted); font-size: 12px; }
.tenant-mini strong { margin-top: 3px; font-size: 13px; }
.status-dot { margin-top: 8px; color: var(--brand-strong); font-size: 12px; }
.status-dot i, .page-heading__status i, .server-note i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.nav-stack {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-scroll-thumb) transparent;
  scrollbar-gutter: stable;
}
.nav-stack:hover, .nav-stack:focus-within { scrollbar-color: var(--nav-scroll-thumb-active) transparent; }
.nav-stack::-webkit-scrollbar { width: 6px; }
.nav-stack::-webkit-scrollbar-track {
  border-radius: 999px;
  background: transparent;
}
.nav-stack::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--nav-scroll-thumb);
  background-clip: padding-box;
}
.nav-stack:hover::-webkit-scrollbar-thumb, .nav-stack:focus-within::-webkit-scrollbar-thumb {
  background: var(--nav-scroll-thumb-active);
  background-clip: padding-box;
}
.nav-caption { margin: 18px 10px 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.nav-item { width: 100%; min-height: 44px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px; margin: 3px 0; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-soft); text-align: left; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.nav-item:hover { background: var(--brand-soft); color: var(--brand-strong); }
.nav-item.is-active { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); box-shadow: inset 3px 0 var(--brand-strong); font-weight: 700; }
.nav-item b { min-width: 24px; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: 12px; text-align: center; }
.nav-item .nav-badge--warn { background: var(--amber-100); color: var(--amber-700); }
.sidebar-foot { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 12px 10px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.sidebar-foot strong { color: var(--ink-soft); font-weight: 500; }

.app-main { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 30; height: 64px; display: grid; grid-template-columns: auto minmax(260px, 540px) auto; align-items: center; gap: 22px; padding: 0 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar-context { display: flex; align-items: center; gap: 9px; }
.topbar-context label { color: var(--muted); font-size: 12px; }
.topbar-context select, .select-label select { height: 36px; padding: 0 34px 0 11px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); }
.global-search { position: relative; display: flex; align-items: center; }
.global-search .icon { position: absolute; left: 12px; color: var(--muted); }
.global-search input { width: 100%; height: 38px; padding: 0 52px 0 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--text); transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.global-search input:focus { border-color: var(--brand); background: white; box-shadow: 0 0 0 3px var(--focus-halo); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.global-search kbd { position: absolute; right: 10px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: white; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.icon-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-soft); transition: background 180ms ease, border-color 180ms ease; }
.icon-button:hover { border-color: var(--line); background: var(--surface-soft); }
.notification-count { position: absolute; right: 1px; top: 0; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 2px solid white; border-radius: 999px; background: var(--red-600); color: white; font: 700 12px/1 ui-monospace, monospace; }
.user-chip { display: flex; align-items: center; gap: 8px; min-width: 132px; margin-left: 4px; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 12px; }
.user-chip small { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.mobile-menu { display: none; }

.workspace { width: min(1500px, 100%); margin: 0 auto; padding: 26px 30px 46px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: var(--brand-strong); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
.eyebrow--dark, .section-kicker { color: var(--brand-strong); }
.page-heading h1 { margin: 0; color: var(--ink-strong); font-size: clamp(24px, 2.1vw, 31px); line-height: 1.15; letter-spacing: -.02em; }
.page-heading p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); }
.page-heading__status { display: flex; align-items: center; gap: 16px; padding-top: 9px; color: var(--muted); font-size: 12px; }
.page-heading__status span { color: var(--brand-strong); font-weight: 600; }
.page-heading__status time { font-family: ui-monospace, monospace; }

.pulse { overflow: hidden; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.pulse__heading { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.pulse__heading strong, .pulse__heading small { display: block; }
.pulse__heading strong { color: var(--ink-strong); font-size: 14px; }
.pulse__heading small { color: var(--muted); font-size: 12px; }
.pulse__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 12px; padding: 16px; }
.pulse-node { --node-accent: var(--ink-soft); --node-accent-soft: var(--table-head); min-width: 0; min-height: 100px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 1px 2px rgba(16,36,62,.035); text-align: left; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.pulse-node:hover { border-color: var(--line-strong); background: var(--surface-soft); box-shadow: 0 7px 20px rgba(16,36,62,.07); }
.pulse-node span, .pulse-node strong, .pulse-node small { display: block; }
.pulse-node span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.pulse-node span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--node-accent); box-shadow: 0 0 0 4px var(--node-accent-soft); flex: 0 0 auto; }
.pulse-node strong { margin: 7px 0 3px; color: var(--ink-strong); font: 700 28px/1.05 ui-monospace, monospace; letter-spacing: -.025em; }
.pulse-node small { color: var(--muted); font-size: 12px; }
.pulse-node--pending { --node-accent: var(--amber-500); --node-accent-soft: var(--amber-100); }
.pulse-node--flow { --node-accent: var(--brand); --node-accent-soft: var(--brand-soft); }
.pulse-node--risk { --node-accent: var(--red-600); --node-accent-soft: var(--red-100); }
.pulse-node--finance { --node-accent: var(--ink-soft); --node-accent-soft: var(--table-head); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; color: var(--ink-strong); font-size: 16px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--brand-strong); font-size: 12px; font-weight: 600; }
.text-button:hover { background: var(--brand-soft); }
.text-button .icon { width: 14px; height: 14px; }
.queue-list, .risk-list { padding: 5px 16px 12px; }
.queue-item, .risk-item { display: grid; align-items: center; gap: 12px; min-height: 57px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.queue-item { grid-template-columns: auto minmax(0,1fr) auto auto; }
.risk-item { grid-template-columns: auto minmax(0,1fr) auto; }
.queue-item:last-child, .risk-item:last-child { border-bottom: 0; }
.queue-priority { width: 7px; height: 32px; border-radius: 999px; background: var(--amber-500); }
.queue-item strong, .queue-item span, .risk-item strong, .risk-item span { display: block; min-width: 0; }
.queue-item strong, .risk-item strong { overflow: hidden; color: var(--ink-strong); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.queue-item span, .risk-item span { color: var(--muted); font-size: 12px; }
.mono { font-family: ui-monospace, "SFMono-Regular", monospace; font-variant-numeric: tabular-nums; }
.money { color: var(--ink-strong); font: 600 12px/1.4 ui-monospace, monospace; white-space: nowrap; }
.risk-date { min-width: 56px; padding: 5px 7px; border-radius: 7px; background: var(--amber-100); color: var(--amber-700); font: 600 12px/1.3 ui-monospace, monospace; text-align: center; }
.risk-date.is-expired { background: var(--red-100); color: var(--red-600); }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--table-head); color: var(--ink-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge--ok, .badge--delivered, .badge--approved, .badge--valid, .badge--paid { background: var(--brand-soft); color: var(--brand-strong); }
.badge--pending, .badge--confirmed, .badge--submitted, .badge--expiring, .badge--processing { background: var(--amber-100); color: var(--amber-700); }
.badge--expired, .badge--rejected { background: var(--red-100); color: var(--red-600); }
.badge--shipping, .badge--in_transit { background: var(--info-soft); color: var(--info-ink); }

.readiness { margin-top: 18px; }
.readiness-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.readiness article { display: flex; align-items: center; gap: 11px; min-height: 86px; padding: 14px 16px; border-right: 1px solid var(--line); }
.readiness article:last-child { border-right: 0; }
.readiness article > .icon { width: 25px; height: 25px; color: var(--brand-strong); }
.readiness article strong, .readiness article span { display: block; }
.readiness article strong { color: var(--ink-strong); font-size: 12px; }
.readiness article span { color: var(--muted); font-size: 12px; }

.data-view { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.filter-bar { display: flex; align-items: end; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.filter-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.filter-search .icon { position: absolute; left: 11px; top: 10px; color: var(--muted); }
.filter-search input { width: 100%; height: 36px; padding: 0 10px 0 36px; border: 1px solid var(--line-strong); border-radius: 7px; background: white; }
.select-label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
.btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border: 1px solid transparent; border-radius: 7px; font-weight: 650; font-size: 13px; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease; }
.btn--primary { border-color: var(--brand-strong); background: var(--brand-strong); color: white; }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--secondary { border-color: var(--line-strong); background: white; color: var(--ink-soft); }
.btn--secondary:hover { border-color: var(--brand-line); background: var(--hover-surface); }
.btn--wide { width: 100%; min-height: 44px; }
.btn:disabled { opacity: .45; }
.table-summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; color: var(--muted); font-size: 12px; }
.server-note { color: var(--brand-strong); }
.table-region { position: relative; min-height: 320px; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.data-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.data-table th { position: sticky; top: 0; z-index: 2; height: 39px; padding: 8px 12px; border-bottom: 1px solid var(--line-strong); background: var(--table-head); color: var(--ink-soft); font-size: 12px; font-weight: 750; letter-spacing: .02em; text-align: left; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 1px 0 0 var(--line); }
.data-table th:first-child { z-index: 3; background: var(--table-head); }
.data-table td { height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: white; color: var(--text); vertical-align: middle; white-space: nowrap; }
.data-table th.cell--numeric, .data-table td.cell--numeric,
.detail-table th.cell--numeric, .detail-table td.cell--numeric,
.print-table th.cell--numeric, .print-table td.cell--numeric { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.data-table th.cell--center, .data-table td.cell--center,
.detail-table th.cell--center, .detail-table td.cell--center { text-align: center; }
.data-table th.cell--actions, .data-table td.cell--actions { text-align: right; }
.data-table td.cell--actions .row-actions { justify-content: flex-end; }
.data-table tbody tr:hover td { background: var(--hover-surface); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.row-button { min-height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.row-button:hover { border-color: var(--brand); color: var(--brand-strong); }
.row-button--primary { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }
.table-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,.87); color: var(--muted); }
.table-loading[hidden] { display: none; }
.table-loading span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: loading 900ms ease-in-out infinite alternate; }
.table-loading span:nth-child(2) { animation-delay: 160ms; }
.table-loading span:nth-child(3) { animation-delay: 320ms; }
.table-loading p { margin-left: 6px; font-size: 12px; }
@keyframes loading { to { opacity: .25; transform: translateY(-3px); } }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 11px; min-height: 55px; padding: 8px 14px; }
.pagination span { min-width: 90px; color: var(--muted); font-size: 12px; text-align: center; }

.analytics-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.analytics-toolbar > div:first-child strong, .analytics-toolbar > div:first-child span { display: block; }
.analytics-toolbar > div:first-child strong { color: var(--ink-strong); font-size: 16px; }
.analytics-toolbar > div:first-child span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.period-controls { display: flex; align-items: end; gap: 9px; }
.period-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 650; }
.period-controls select, .period-controls input { min-width: 130px; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: white; color: var(--text); }
.analytics-metrics { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.analytics-metric { min-height: 92px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: var(--shadow-sm); }
.analytics-metric span, .analytics-metric strong { display: block; }
.analytics-metric span { color: var(--muted); font-size: 12px; font-weight: 650; }
.analytics-metric strong { margin-top: 8px; color: var(--ink-strong); font: 700 19px/1.15 ui-monospace, monospace; white-space: nowrap; }
.analytics-metric small { margin-left: 3px; color: var(--muted); font-size: 12px; }
.analytics-chart-panel { overflow: hidden; }
.chart-wrap { min-height: 280px; padding: 12px 14px 2px; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; min-width: 720px; height: 280px; }
.chart-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; }
.chart-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.chart-area { fill: var(--brand-soft); }
.chart-point { fill: white; stroke: var(--brand); stroke-width: 2; }
.chart-x-label, .chart-y-label { fill: var(--muted); font: 10px ui-monospace, monospace; }
.chart-data { margin: 0 16px 16px; border-top: 1px solid var(--line); }
.chart-data summary { min-height: 42px; display: flex; align-items: center; color: var(--brand-strong); cursor: pointer; font-size: 12px; font-weight: 650; }

.import-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.import-intro h2 { margin: 0; color: var(--ink-strong); font-size: 18px; }
.import-intro > p { max-width: 660px; margin: 0; color: var(--muted); font-size: 12px; }
.imports-view { margin-bottom: 24px; }
.imports-view .btn { min-height: 44px; }
.import-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.import-card { position: relative; min-height: 390px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.import-card h3 { margin: 4px 0 8px; color: var(--ink-strong); font-size: 19px; }
.import-card > p { min-height: 42px; color: var(--muted); font-size: 12px; }
.import-step { color: var(--brand-strong); font: 700 12px/1 ui-monospace, monospace; letter-spacing: .12em; }
.file-field { display: grid; gap: 6px; margin-top: 18px; color: var(--ink-strong); font-size: 12px; font-weight: 700; }
.file-field input { width: 100%; padding: 9px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-soft); color: var(--muted); }
.file-field input::file-selector-button { min-height: 32px; margin-right: 10px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: white; color: var(--ink-soft); cursor: pointer; }
.import-actions { display: flex; gap: 8px; margin-top: 12px; }
.import-result { min-height: 76px; margin-top: 14px; padding: 11px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; }
.import-summary strong, .import-summary span { display: block; }
.import-summary strong { color: var(--ink-strong); }
.import-summary span { margin-top: 3px; }
.import-summary.is-valid { border-left: 3px solid var(--brand); padding-left: 9px; }
.import-summary.is-invalid { border-left: 3px solid var(--red-600); padding-left: 9px; }
.import-summary ul { max-height: 145px; overflow-y: auto; margin: 8px 0 0; padding-left: 18px; color: var(--red-600); }
.import-summary li + li { margin-top: 4px; }

.drawer { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(720px, 96vw); padding: 0; border-left: 1px solid var(--line); background: white; box-shadow: -15px 0 40px rgba(16,36,62,.14); transform: translateX(104%); transition: transform 220ms ease; }
.drawer.is-open { transform: translateX(0); }
.drawer-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 18px; }
.drawer-body { overflow-y: auto; height: calc(100vh - 72px); padding: 18px; }
.drawer-scrim, .mobile-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(22,39,30,.46); backdrop-filter: blur(2px); }
.detail-grid { display: grid; grid-template-columns: 130px 1fr; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.detail-grid dt, .detail-grid dd { min-height: 42px; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.detail-grid dt { background: var(--canvas); color: var(--muted); font-size: 12px; }
.detail-grid dd { overflow-wrap: anywhere; color: var(--text); font-size: 12px; }
.detail-grid dd.cell--numeric { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.detail-grid dd.cell--center { text-align: center; }
.detail-grid dt:last-of-type, .detail-grid dd:last-of-type { border-bottom: 0; }
.detail-section { margin-bottom: 22px; }
.detail-section h3 { margin: 0 0 9px; color: var(--ink-strong); font-size: 13px; }
.detail-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.detail-table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: 12px; }
.detail-table th, .detail-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.detail-table th { background: var(--canvas); color: var(--muted); font-size: 12px; }
.detail-table tr:last-child td { border-bottom: 0; }
.detail-table strong, .detail-table small { display: block; }
.detail-table small { margin-top: 3px; color: var(--muted); line-height: 1.45; }
.detail-table .wrap { max-width: 190px; white-space: normal; overflow-wrap: anywhere; }
.drawer-loading { padding: 40px 12px; color: var(--muted); text-align: center; }

.confirm-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 24px 70px rgba(16,36,62,.28); }
.confirm-dialog::backdrop { background: rgba(22,39,30,.46); backdrop-filter: blur(3px); }
.confirm-dialog form { padding: 24px; }
.confirm-dialog--wide { width: min(820px, calc(100vw - 32px)); }
.confirm-dialog--wide form { max-height: min(88vh, 820px); overflow-y: auto; }
.confirm-dialog h2 { margin: 12px 0 7px; color: var(--ink-strong); font-size: 20px; }
.confirm-dialog p { color: var(--muted); }
.confirm-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); }
.confirm-icon .icon { width: 23px; height: 23px; }
.transition-preview { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 12px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.transition-preview span { color: var(--amber-700); }
.transition-preview strong { color: var(--brand-strong); }
.confirm-note { padding-left: 12px; border-left: 3px solid var(--line-strong); font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 16px 0; }
.dialog-field { display: grid; gap: 5px; color: var(--ink-strong); font-size: 12px; font-weight: 700; }
.dialog-field input[type="number"], .response-line input[type="number"], .shipment-line input[type="number"], .receipt-line input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.dialog-field input, .dialog-field textarea, .dialog-field select, .response-line input, .shipment-line input, .receipt-line input { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: white; color: var(--text); font: inherit; }
.dialog-field textarea { min-height: 72px; resize: vertical; }
.dialog-field input:focus, .dialog-field textarea:focus, .dialog-field select:focus, .response-line input:focus, .shipment-line input:focus, .receipt-line input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-halo); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.response-lines { display: grid; gap: 8px; margin: 16px 0; }
.response-line, .shipment-line { display: grid; grid-template-columns: minmax(180px, 1.35fr) 70px 110px minmax(160px, 1fr); align-items: end; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.shipment-line { grid-template-columns: minmax(170px, 1.25fr) 100px 150px 145px minmax(170px, 1fr); }
.response-line strong, .response-line small, .shipment-line strong, .shipment-line small, .receipt-line strong, .receipt-line small { display: block; }
.response-line small, .shipment-line small, .receipt-line small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.response-line label, .shipment-line label, .receipt-line label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.response-line label > span { min-height: 38px; display: flex; align-items: center; color: var(--ink-strong); font-size: 13px; }
.record-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }
.record-field--wide { grid-column: 1 / -1; }
.receipt-lines { display: grid; gap: 8px; margin: 14px 0; }
.receipt-line { display: grid; grid-template-columns: minmax(190px, 1.3fr) 105px 105px minmax(160px, 1fr); align-items: end; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.dialog-status { min-height: 18px; margin: 6px 0 0; color: var(--red-600) !important; font-size: 12px; }

.notification-panel { position: fixed; z-index: 90; top: 64px; right: 18px; width: min(410px, calc(100vw - 24px)); max-height: calc(100vh - 82px); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 22px 60px rgba(16,36,62,.22); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 160ms ease, transform 160ms ease; }
.notification-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.notification-panel__head { min-height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.notification-panel__head h2 { margin: 0; font-size: 16px; }
.notification-list { max-height: calc(100vh - 160px); overflow-y: auto; padding: 7px; }
.notification-item { width: 100%; display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 11px 9px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-soft); text-align: left; }
.notification-item.is-read { background: white; }
.notification-item:hover { background: var(--hover-surface); }
.notification-item strong, .notification-item small, .notification-item time { margin-top: 6px; color: var(--muted); font: 12px/1.4 ui-monospace, monospace; }
.notification-item strong { color: var(--ink-strong); font-size: 12px; }
.notification-item small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.notification-item time { margin-top: 6px; color: #8799a5; font: 12px/1.3 ui-monospace, monospace; }
.severity { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--brand); }
.severity--warning { background: var(--amber-500); }
.severity--critical { background: var(--red-600); }
.badge--partial, .badge--partial_confirmed, .badge--difference { background: var(--amber-100); color: var(--amber-700); }
.badge--accepted, .badge--acknowledged, .badge--matched, .badge--active { background: var(--brand-soft); color: var(--brand-strong); }
.badge--blocked { background: var(--red-100); color: var(--red-600); }
.toast-region { position: fixed; z-index: 120; right: 18px; bottom: 18px; display: grid; gap: 9px; }
.toast { min-width: 280px; max-width: 420px; padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: 8px; background: white; color: var(--text); box-shadow: var(--shadow-md); animation: toast-in 180ms ease both; }
.toast.is-error { border-color: #e2a2aa; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.login-body {
  --portal-accent: var(--brand);
  --portal-accent-strong: var(--brand-strong);
  --portal-focus: var(--focus-halo);
  background: var(--surface);
}
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-story { position:relative; isolation:isolate; overflow:hidden; min-height: 100vh; display: flex; flex-direction: column; padding: 40px clamp(28px, 4vw, 64px); color: var(--ink-strong); background: var(--login-surface); border-right: 1px solid var(--line); }
.brand-lockup--light { position:relative; z-index:1; padding:0; }
.login-story__content { position:relative; z-index:1; max-width:650px; margin:auto 0; padding:32px 0; }
.login-story h1 { margin: 0; max-width: 620px; font-size: clamp(35px, 4.2vw, 61px); line-height: 1.22; letter-spacing: -.03em; }
.login-story h1 span { display: block; white-space: nowrap; }
.login-story__content > p:not(.eyebrow) { max-width: 460px; margin-top: 24px; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
/* Decorative sterile supply packs and a restrained barcode scan. */
.login-network { position:absolute; inset:0; z-index:0; pointer-events:none; }
.login-medical { position:absolute; width:min(340px,60%); height:auto; right:20px; bottom:68px; }
.medical-packs { animation:medical-float 12s ease-in-out infinite; }
.pack-seam { fill:none; stroke:var(--line); stroke-width:1; }
.pack-cross { fill:none; stroke:var(--brand); stroke-width:2.2; stroke-linecap:round; opacity:.7; }
.pack-instrument { fill:none; stroke:var(--brand); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.gauze-weave { fill:none; stroke:var(--brand-line); stroke-width:.65; opacity:.65; }
.pack-barcode { fill:none; stroke:var(--ink-soft); stroke-width:1.2; opacity:.48; }
.medical-scan { animation:medical-scan 8s ease-in-out infinite; }
.login-network[data-motion="paused"] :is(.network-motion,.network-packet) { animation-play-state:paused; }
@keyframes medical-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes medical-scan { 0%,15% { transform:translateY(0); opacity:0; } 25% { opacity:.7; } 65% { transform:translateY(25px); opacity:.7; } 75%,100% { transform:translateY(25px); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .login-network :is(.network-motion,.network-packet) { animation:none !important; } .medical-scan { opacity:0; } }
@media (max-width:960px) { .login-network { display:none; } .login-story__foot { max-width:none; } }
.login-pulse { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:28px; color:var(--muted); font-size:13px; font-weight:400; }
.login-pulse i { display:inline; color:var(--brand-line); font-style:normal; }
.login-pulse span { padding:0; border:0; border-radius:0; background:none; cursor:default; }
.login-story__foot { position:relative; z-index:1; max-width:none; margin: auto 0 0; padding-top: 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.login-panel { display: grid; place-items: center; min-height: 100vh; padding: 40px; background: var(--surface); }
.login-card { width: min(440px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-md); }
.login-card h2 { margin: 0; color: var(--ink-strong); font-size: 26px; letter-spacing: -.02em; }
.login-intro { margin: 7px 0 25px; color: var(--muted); }
.login-card .eyebrow--dark { color: var(--portal-accent-strong); }
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; color: var(--ink-strong); font-size: 12px; font-weight: 700; }
.field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: white; font-size: 16px; }
.field input:focus { border-color: var(--portal-accent); box-shadow: 0 0 0 3px var(--portal-focus); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.field-error { min-height: 15px; margin: 4px 0 0; color: var(--red-600); font-size: 12px; }
.form-status { min-height: 20px; margin: 8px 0 0; color: var(--red-600); font-size: 12px; text-align: center; }
.security-note { display: flex; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.security-note .icon { color: var(--portal-accent-strong); }
.login-card .btn { min-height: 48px; font-size: 15px; }
.login-body .btn--primary { border-color: var(--portal-accent-strong); background: var(--portal-accent-strong); }
.login-body .btn--primary:hover { filter: brightness(.9); }

.print-page { min-height: 100vh; padding: 30px 20px 90px; background: #dfe6ea; }
.print-sheet { width: min(1080px, 100%); min-height: 720px; margin: 0 auto; padding: 34px 38px; background: white; box-shadow: var(--shadow-md); }
.print-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--ink-strong); }
.print-head p { margin: 0 0 5px; color: var(--brand-strong); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.print-head h1 { margin: 0; color: var(--ink-strong); font-size: 28px; }
.print-head dl { display: grid; grid-template-columns: auto auto; gap: 5px 12px; margin: 0; font-size: 12px; }
.print-head dt { color: var(--muted); }
.print-head dd { margin: 0; color: var(--ink-strong); font-family: ui-monospace, monospace; }
.print-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-top: 0; }
.print-meta div { min-height: 62px; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.print-meta div:nth-child(4n) { border-right: 0; }
.print-meta div:nth-last-child(-n+4) { border-bottom: 0; }
.print-meta span, .print-meta strong { display: block; }
.print-meta span { color: var(--muted); font-size: 12px; }
.print-meta strong { margin-top: 4px; color: var(--ink-strong); font-size: 12px; }
.print-table { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 12px; }
.print-table th, .print-table td { padding: 9px; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.print-table th { background: var(--table-head); color: var(--ink-soft); }
.print-table strong, .print-table span { display: block; }
.print-table span { margin-top: 3px; }
.print-wrap { max-width: 180px; overflow-wrap: anywhere; }
.print-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; color: var(--ink-strong); font-size: 12px; }
.print-signatures span { display: inline-block; width: 120px; border-bottom: 1px solid var(--text); }
.print-toolbar { position: fixed; z-index: 20; right: 24px; bottom: 24px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow-md); }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: auto minmax(180px, 1fr) auto; padding-inline: 18px; gap: 12px; }
  .topbar-context label { display: none; }
  .user-chip span:not(.avatar) { display: none; }
  .user-chip { min-width: auto; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .readiness-grid { grid-template-columns: repeat(2, 1fr); }
  .readiness article:nth-child(2) { border-right: 0; }
  .readiness article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .analytics-metrics { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .print-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .print-meta div:nth-child(4n) { border-right: 1px solid var(--line); }
  .print-meta div:nth-child(2n) { border-right: 0; }
  .print-meta div:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .print-meta div:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-102%); transition: transform 220ms ease; box-shadow: var(--shadow-md); }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-scrim { z-index: 35; }
  .app-main { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { grid-template-columns: auto minmax(150px, 1fr) auto; }
  .topbar-context { display: none; }
  .global-search { grid-column: 2; }
  .workspace { padding: 22px 18px 40px; }
  .pulse__track { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .filter-bar { flex-wrap: wrap; }
  .filter-search { max-width: none; flex-basis: 100%; }
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: 270px; padding: 25px; border-right: 0; border-bottom: 1px solid var(--line); }
  .login-story__content { margin:auto 0 0; padding:16px 0 0; }
  .login-story h1 { font-size: clamp(30px, 8vw, 48px); }
  .login-story__content > p:not(.eyebrow), .login-pulse { display: none; }
  .login-panel { min-height: 0; padding: 28px 20px; }
  .response-line, .shipment-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .response-line > div, .shipment-line > div { grid-column: 1 / -1; }
  .analytics-toolbar { align-items: stretch; flex-direction: column; }
  .analytics-metrics { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .import-grid { grid-template-columns: 1fr; }
  .import-intro { align-items: flex-start; flex-direction: column; }
  .receipt-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-line > div { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .topbar { height: 58px; padding: 0 10px; gap: 4px; }
  .global-search { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .topbar-actions { grid-column: 3; }
  .icon-button { width: 44px; height: 44px; }
  .workspace { padding: 18px 12px 32px; }
  .page-heading { display: block; }
  .page-heading__status { margin-top: 8px; justify-content: space-between; }
  .pulse__heading { padding-inline: 12px; }
  .pulse__track { padding: 10px 12px 12px; }
  .pulse-node { min-height: 96px; padding: 11px; }
  .dashboard-grid { gap: 12px; }
  .queue-item { grid-template-columns: auto minmax(0,1fr) auto; }
  .queue-item .money { display: none; }
  .readiness-grid { grid-template-columns: 1fr; }
  .readiness article { border-right: 0; border-bottom: 1px solid var(--line); }
  .readiness article:last-child { border-bottom: 0; }
  .filter-bar .btn { flex: 1; min-height: 44px; }
  .select-label { flex: 1 1 100%; }
  .select-label select { width: 100%; min-height: 44px; font-size: 16px; }
  .filter-search input { min-height: 44px; font-size: 16px; }
  .pagination { justify-content: space-between; }
  .pagination .btn { min-height: 44px; }
  .row-button { min-height: 44px; }
  .confirm-dialog--wide { width: calc(100vw - 16px); }
  .confirm-dialog form { padding: 18px 14px; }
  .dialog-grid, .response-line, .shipment-line { grid-template-columns: 1fr; }
  .response-line > div, .shipment-line > div { grid-column: auto; }
  .record-form-grid, .receipt-line { grid-template-columns: 1fr; }
  .record-field--wide, .receipt-line > div { grid-column: auto; }
  .period-controls { align-items: stretch; flex-direction: column; }
  .period-controls select, .period-controls input, .period-controls .btn { width: 100%; min-height: 44px; }
  .analytics-metrics { grid-template-columns: 1fr 1fr; }
  .analytics-metric { min-height: 82px; }
  .import-card { min-height: 0; padding: 18px; }
  .import-actions { align-items: stretch; flex-direction: column; }
  .print-page { padding: 0; }
  .print-sheet { padding: 20px 14px; box-shadow: none; }
  .print-head { flex-direction: column; }
  .print-meta { grid-template-columns: 1fr; }
  .print-meta div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .print-meta div:last-child { border-bottom: 0 !important; }
  .print-signatures { grid-template-columns: 1fr; gap: 30px; }
  .dialog-actions { position: sticky; bottom: -18px; margin-inline: -14px; padding: 12px 14px 18px; border-top: 1px solid var(--line); background: white; }
  .dialog-actions .btn { flex: 1; min-height: 44px; }
  .notification-panel { top: 62px; right: 8px; }
  .detail-grid { grid-template-columns: 105px 1fr; }
  .login-card { padding: 26px 20px; }
  .login-panel { padding: 18px 12px 30px; }
}

@media (max-width: 860px), (pointer: coarse) {
  .btn, .text-button, .row-button { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .sidebar { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .dialog-actions { padding-bottom: env(safe-area-inset-bottom); }
}

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

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .sidebar, .topbar, .filter-bar, .pagination, .page-heading__status, .print-toolbar { display: none !important; }
  .app-main { margin: 0; }
  .workspace { width: 100%; padding: 0; }
  .panel, .data-view { box-shadow: none; }
  .print-page { padding: 0; background: white; }
  .print-sheet { width: 100%; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .print-table { page-break-inside: auto; }
  .print-table tr { page-break-inside: avoid; page-break-after: auto; }
}

/* Shared UI/UX contract: owned errors, clear actions and honest read state. */
.field-error { display:block; color:var(--red-600); font-size:13px; line-height:1.5; }
[aria-invalid="true"] { border-color:var(--red-600)!important; }
.search-clear { min-height:36px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--brand-strong); padding:6px 10px; cursor:pointer; flex-shrink:0; }
.search-clear:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
#page-read-status[data-state="error"] { color:var(--red-600); }
#page-read-status[data-state="loading"] { color:var(--muted); }
#discard-dialog { padding:24px; }
#discard-dialog h2 { margin-top:0; }
textarea { resize:none; min-height:80px; }
:root { scrollbar-color:var(--line-strong) var(--canvas); scrollbar-width:auto; }
*::-webkit-scrollbar { width:12px; height:12px; }
*::-webkit-scrollbar-track { background:var(--canvas); }
*::-webkit-scrollbar-thumb { background:var(--line-strong); border:3px solid var(--canvas); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover { background:var(--brand-strong); }
@media(forced-colors:active) { :root, .nav-stack, .nav-stack:hover, .nav-stack:focus-within { scrollbar-color:auto; } }
@media(max-width:860px) { .search-clear,.q-filter select { min-height:44px; } }
@media(max-width:560px) { .drawer-body .table-wrap::before { content:"可向右滑动查看完整数量";display:block;font-size:12px;color:var(--muted);padding:6px; } }