:root {
  --bg: #07111f;
  --bg-soft: #0b1728;
  --panel: #101e30;
  --panel-2: #13243a;
  --line: rgba(148, 176, 208, .14);
  --text: #f4f8fc;
  --muted: #8ea3ba;
  --blue: #43a5ff;
  --cyan: #40d7d2;
  --green: #42d392;
  --amber: #ffb84d;
  --red: #ff6577;
  --radius: 18px;
  --shadow: 0 18px 60px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; background: #091525; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 30px; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #04111e; font-weight: 900; box-shadow: 0 8px 30px rgba(64, 215, 210, .22); }
.brand-mark.large { width: 62px; height: 62px; border-radius: 20px; font-size: 20px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .04em; }
.brand small { color: var(--muted); font-size: 10px; margin-top: 3px; text-transform: uppercase; letter-spacing: .16em; }
.nav { display: grid; gap: 7px; }
.nav a { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border-radius: 12px; color: #a8bbce; transition: .2s; position: relative; }
.nav a:hover { color: white; background: rgba(255,255,255,.04); }
.nav a.active { color: white; background: linear-gradient(90deg, rgba(67,165,255,.18), rgba(64,215,210,.06)); box-shadow: inset 2px 0 var(--blue); }
.nav a > span { width: 22px; text-align: center; color: var(--blue); font-weight: 800; }
.nav-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); display: grid; place-items: center; color: white; font-size: 11px; }
.nav-group { display: grid; gap: 3px; }
.nav-group > .nav-link { min-height: 46px; }
.nav-submenu { display: grid; gap: 10px; margin: 0 0 8px 35px; padding: 4px 0 0 11px; border-left: 1px solid var(--line); }
.nav-subgroup { display: grid; gap: 2px; }
.nav-subgroup h2 { margin: 0 0 2px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.nav .nav-subitem { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 7px; border-radius: 7px; color: var(--muted); font-size: 11px; }
.nav .nav-subitem:hover, .nav .nav-subitem.active { color: var(--blue); background: rgba(15, 118, 110, .08); }
.nav-subitem.is-disabled { cursor: default; color: #94a3b8; }
.nav-subitem.is-disabled:hover { background: transparent; }
.nav-subitem small { color: #a8b4c2; font-size: 9px; white-space: nowrap; }
.sidebar-foot { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.dot, .device-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; flex: 0 0 auto; }
.dot.online, .device-dot.online { background: var(--green); box-shadow: 0 0 0 5px rgba(66,211,146,.1); }

.main { min-width: 0; padding: 0 32px 54px; }
.topbar { height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar h1 { margin: 4px 0 0; font-size: 26px; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: var(--cyan); text-transform: uppercase; font-weight: 700; font-size: 10px; letter-spacing: .16em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.user-chip { width: 34px; height: 34px; border-radius: 50%; background: #213650; display: grid; place-items: center; font-size: 11px; overflow: hidden; }
.btn { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; background: #14253a; color: var(--text); }
.btn:hover { border-color: rgba(67,165,255,.5); }
.btn-primary { border: 0; color: #04111e; font-weight: 750; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 10px 30px rgba(67,165,255,.15); }
.btn-small { min-height: 34px; padding: 0 12px; font-size: 12px; }
.btn-block { width: 100%; }
.text-btn { border: 0; background: transparent; color: var(--blue); padding: 7px; }
.text-btn:disabled { color: #53677e; cursor: not-allowed; }
.messages { display: grid; gap: 8px; margin-bottom: 16px; }
.message { padding: 12px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.message.success { border-color: rgba(66,211,146,.35); color: #a2f0c9; }
.message.error { border-color: rgba(255,101,119,.4); color: #ffabb5; }

.hero-strip { min-height: 178px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: 24px; overflow: hidden; position: relative; background: radial-gradient(circle at 82% 32%, rgba(64,215,210,.21), transparent 23%), linear-gradient(120deg, #102b4b, #0e2037 58%, #0c2631); border: 1px solid rgba(67,165,255,.18); box-shadow: var(--shadow); }
.hero-strip:after { content: ""; position: absolute; width: 290px; height: 290px; border: 1px solid rgba(64,215,210,.12); border-radius: 50%; right: -65px; top: -120px; box-shadow: 0 0 0 40px rgba(64,215,210,.03), 0 0 0 80px rgba(64,215,210,.02); }
.hero-strip h2 { margin: 13px 0 8px; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.04em; }
.hero-strip p { margin: 0; color: #a9bfd4; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(66,211,146,.26); border-radius: 999px; color: #a2f0c9; font-size: 11px; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(66,211,146,.12); }
.hero-time { position: relative; z-index: 1; min-width: 170px; text-align: right; }
.hero-time small, .hero-time span { color: #9bb0c4; }
.hero-time strong { display: inline-block; margin: 0 6px; font-size: 52px; line-height: 1; letter-spacing: -.05em; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 17px 0; }
.quote-kpi-grid { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0,1fr)); gap: 14px; margin: 17px 0; }
.metric-card { min-height: 132px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(150deg, rgba(255,255,255,.025), transparent 60%), var(--panel); }
.metric-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.metric-head b { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.04); }
.metric-card > strong { display: block; margin: 12px 0 3px; font-size: 32px; }
.metric-card small { color: var(--muted); }
.accent-blue { box-shadow: inset 0 2px var(--blue); }.accent-green { box-shadow: inset 0 2px var(--green); }.accent-amber { box-shadow: inset 0 2px var(--amber); }.accent-red { box-shadow: inset 0 2px var(--red); }
.accent-blue .metric-head b { color: var(--blue); }.accent-green .metric-head b { color: var(--green); }.accent-amber .metric-head b { color: var(--amber); }.accent-red .metric-head b { color: var(--red); }
.rate-value { margin: 12px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.rate-value strong { font-size: 30px; }.rate-value small { color: var(--muted); }
.progress-track { height: 7px; border-radius: 999px; overflow: hidden; background: #1b2e45; }.progress-track i { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }.progress-track.compact { height: 5px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.two-col { display: grid; grid-template-columns: 1.25fr .75fr; gap: 17px; margin-bottom: 17px; }
.lower-grid { grid-template-columns: 1.35fr .65fr; }
.panel-head { padding: 20px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-head h3 { margin: 5px 0 0; font-size: 17px; }
.panel-head > a { color: var(--blue); font-size: 12px; }
.workflow-row { margin: 0 20px; padding: 19px 0; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; border-top: 1px solid var(--line); }
.workflow-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; }
.workflow-icon.quote { background: rgba(67,165,255,.12); color: var(--blue); }.workflow-icon.label { background: rgba(64,215,210,.12); color: var(--cyan); }
.workflow-copy strong, .workflow-copy span, .workflow-stat b, .workflow-stat small { display: block; }
.workflow-copy span, .workflow-stat small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.workflow-stat { text-align: right; }.workflow-stat b { font-size: 16px; }
.workflow-alert { padding: 5px 8px; border-radius: 7px; color: var(--amber); background: rgba(255,184,77,.08); font-size: 11px; }
.compact-list { padding: 0 14px 14px; }
.alert-line { padding: 12px 7px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.alert-line strong, .alert-line small { display: block; }.alert-line strong { font-size: 12px; }.alert-line small { margin-top: 3px; color: var(--muted); font-size: 10px; }.alert-line time { color: #6f849b; font-size: 9px; }
.severity { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; }
.severity.info { color: var(--blue); background: rgba(67,165,255,.12); }.severity.warning { color: var(--amber); background: rgba(255,184,77,.12); }.severity.critical { color: var(--red); background: rgba(255,101,119,.12); }
.empty-state { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 9px; color: var(--muted); text-align: center; }.empty-state b { color: var(--green); font-size: 24px; }
.boss-focus-grid { grid-template-columns: 1.35fr .65fr; }.quote-tasks-panel { overflow: hidden; }.task-progress-list { padding: 0 18px 17px; }.task-progress-row { padding: 15px 2px; border-top: 1px solid var(--line); }.task-progress-main { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; }.task-progress-copy { min-width: 0; }.task-progress-copy strong, .task-progress-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.task-progress-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }.task-progress-meta { margin: 10px 0 6px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }.task-progress-meta b, .task-progress-meta > strong { color: #d7e3ef; }.task-exception-link { margin-top: 10px; min-height: 31px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255,184,77,.18); border-radius: 8px; color: #ffd08a; background: rgba(255,184,77,.07); font-size: 11px; }.task-exception-link span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #251707; background: var(--amber); font-weight: 900; }
.priority { display: inline-flex; width: max-content; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: #9eb0c2; background: rgba(255,255,255,.03); font-size: 10px; }.priority-3 { color: var(--amber); border-color: rgba(255,184,77,.2); background: rgba(255,184,77,.08); }.priority-4 { color: #ff9baa; border-color: rgba(255,101,119,.24); background: rgba(255,101,119,.1); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 570px; }
th { color: #6f849b; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 650; }
th, td { padding: 13px 18px; text-align: left; border-top: 1px solid var(--line); }
td { color: #bdcbd9; font-size: 12px; }
td a strong, td a small { display: block; } td a strong { color: var(--text); } td a small { color: var(--muted); margin-top: 3px; font-size: 10px; }
.empty-cell { text-align: center; color: var(--muted); padding: 34px; }
.status, .kind-tag { display: inline-flex; width: max-content; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 10px; border: 1px solid var(--line); color: #a9b9c9; background: rgba(255,255,255,.03); }
.status.running { color: var(--blue); background: rgba(67,165,255,.09); }.status.success { color: var(--green); background: rgba(66,211,146,.09); }.status.needs_human, .status.acknowledged { color: var(--amber); background: rgba(255,184,77,.09); }.status.failed, .status.open { color: var(--red); background: rgba(255,101,119,.09); }.status.resolved { color: var(--green); background: rgba(66,211,146,.09); }
.device-panel { padding-bottom: 13px; }.device-line { margin: 0 20px; padding: 15px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }.device-line strong, .device-line small { display: block; }.device-line small { color: var(--muted); margin-top: 3px; font-size: 10px; }.device-state { color: var(--muted); font-size: 11px; }
.integration-box { margin: 12px; padding: 13px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-radius: 12px; background: #0b1828; border: 1px solid var(--line); }.integration-box strong, .integration-box small { display: block; }.integration-box small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.toolbar { min-height: 68px; margin-bottom: 16px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.filter-form { display: flex; gap: 8px; }.toolbar-note { color: var(--muted); font-size: 12px; }
.input { width: 100%; min-height: 42px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); color: var(--text); background: #0b1828; outline: none; }.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(67,165,255,.08); }
.form-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 17px; }.form-panel { padding: 25px; }.form-intro h3 { margin: 6px 0 7px; font-size: 22px; }.form-intro > p:last-child { color: var(--muted); margin-bottom: 25px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }.form-grid label, .stack-form label { color: #aebfd0; font-size: 12px; display: grid; gap: 8px; }.form-grid .span-2 { grid-column: span 2; }.form-actions { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }.help-panel { padding: 24px; align-self: start; }.help-panel h3 { margin: 6px 0 18px; }.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; color: #b6c6d5; }.check-list li:before { content: "✓"; color: var(--green); margin-right: 9px; }.form-error, .error-box { padding: 12px 14px; border: 1px solid rgba(255,101,119,.3); color: #ffabb5; background: rgba(255,101,119,.07); border-radius: 9px; margin: 14px 0; }.field-error { color: var(--red); }.stack-form { display: grid; gap: 16px; }.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.detail-hero { min-height: 150px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; background: radial-gradient(circle at 85% 35%, rgba(67,165,255,.13), transparent 25%), var(--panel); }.detail-hero h2 { margin: 10px 0 5px; font-size: 26px; }.detail-hero p { color: var(--muted); margin: 0; }.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; }.kind-tag.quote { color: var(--blue); }.kind-tag.label { color: var(--cyan); }.progress-ring { width: 100px; height: 100px; flex: 0 0 auto; border: 8px solid #1a2d44; border-top-color: var(--cyan); border-right-color: var(--blue); border-radius: 50%; display: grid; place-items: center; align-content: center; }.progress-ring strong { font-size: 22px; }.progress-ring small { color: var(--muted); font-size: 9px; }
.workbook-panel, .label-summary-panel { margin-bottom: 17px; padding-bottom: 20px; overflow: hidden; }.workbook-head { border-bottom: 1px solid var(--line); }.readiness { min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 10px; border: 1px solid var(--line); }.readiness.ready { color: #9ff0c7; background: rgba(66,211,146,.08); border-color: rgba(66,211,146,.22); }.readiness.blocked { color: #ffabb5; background: rgba(255,101,119,.08); border-color: rgba(255,101,119,.22); }.readiness.pending { color: #ffd08a; background: rgba(255,184,77,.08); border-color: rgba(255,184,77,.2); }
.workbook-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }.workbook-summary-grid > div { min-height: 92px; padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.workbook-summary-grid > div:nth-child(3n) { border-right: 0; }.workbook-summary-grid small, .workbook-summary-grid strong { display: block; }.workbook-summary-grid small { color: var(--muted); font-size: 10px; }.workbook-summary-grid strong { margin-top: 8px; color: #dce8f3; font-size: 17px; overflow-wrap: anywhere; }.workbook-summary-grid strong.money { color: var(--cyan); }.workbook-summary-grid em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 400; }
.duplicate-skus { margin: 16px 20px 0; padding: 14px; border: 1px solid rgba(255,184,77,.16); border-radius: 11px; background: rgba(255,184,77,.05); }.duplicate-skus > strong { color: #ffd08a; font-size: 11px; }.duplicate-skus > div { margin-top: 9px; display: flex; gap: 7px; flex-wrap: wrap; }.duplicate-skus span { padding: 5px 8px; border-radius: 7px; color: #d8e1ea; background: rgba(255,255,255,.04); font-size: 10px; }
.validation-grid { margin: 16px 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.validation-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.validation-card header { min-height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }.warning-card header { color: var(--amber); background: rgba(255,184,77,.05); }.error-card header { color: var(--red); background: rgba(255,101,119,.05); }.validation-list { padding: 9px 13px; }.validation-list p { margin: 6px 0; color: #c5d1dd; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }.validation-list p:before { content: "\2022"; color: currentColor; margin-right: 7px; }.validation-list p.validation-ok { color: #91dbb6; }.validation-list p.validation-ok:before { display: none; }.validation-banner { margin: 18px 20px 0; padding: 14px; border-radius: 10px; }.validation-banner.error { color: #ffabb5; border: 1px solid rgba(255,101,119,.25); background: rgba(255,101,119,.07); }.validation-banner p { margin: 6px 0 0; line-height: 1.6; }.workbook-empty { min-height: 160px; }
.quote-run-panel { margin-bottom: 17px; padding-bottom: 18px; overflow: hidden; }
.quote-line-table-wrap { margin: 16px 20px 0; overflow-x: auto; }
.quote-line-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.quote-line-table th, .quote-line-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.quote-line-table th { color: var(--muted); font-size: 10px; font-weight: 600; }
.quote-line-table tr.risk-high td { color: #ffabb5; }
.quote-line-table tr.risk-low td { color: #dce8f3; }
.quote-gate-actions { margin: 16px 20px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.quote-gate-actions .muted { width: 100%; margin: 0; font-size: 11px; }
.label-flow { padding: 5px 20px 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 13px; }.label-flow > div { min-height: 82px; padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 11px; background: #0c1929; }.label-flow > div > b { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--cyan); background: rgba(64,215,210,.1); }.label-flow strong, .label-flow small { display: block; }.label-flow small { margin-top: 5px; color: var(--muted); font-size: 10px; }.label-flow > i { color: #55728d; font-style: normal; }
.detail-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 17px; margin-bottom: 17px; }.detail-grid > .panel { padding-bottom: 22px; }.detail-list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0 20px; }.detail-list > div { padding: 13px 0; border-top: 1px solid var(--line); }.detail-list > div:nth-child(odd) { padding-right: 15px; }.detail-list dt { color: var(--muted); font-size: 10px; }.detail-list dd { margin: 5px 0 0; color: #d6e0ea; }.detail-list.single { grid-template-columns: 1fr; padding: 0; }.detail-list.single > div { padding-right: 0; }.file-link { display: inline-flex; margin: 14px 20px 0; color: var(--blue); }.error-box { margin: 14px 20px 0; }.error-box p { margin: 7px 0 0; }.detail-grid .stack-form { padding: 0 20px; }.timeline-panel { padding-bottom: 20px; }.timeline { padding: 0 22px; }.timeline > div { display: flex; gap: 12px; padding: 10px 0; }.timeline i { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: var(--blue); box-shadow: 0 0 0 5px rgba(67,165,255,.08); }.timeline strong, .timeline small { display: block; }.timeline small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.empty-large { padding: 50px 20px; text-align: center; color: var(--muted); }.empty-large b { color: var(--green); font-size: 36px; }.empty-large h3 { color: var(--text); margin: 10px 0 6px; }.empty-large p { margin: 0; }
.device-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }.device-card { padding: 20px; }.device-card-head { display: flex; justify-content: space-between; align-items: center; }.device-visual { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--cyan); background: rgba(64,215,210,.1); font-size: 20px; }.device-card h3 { margin: 18px 0 4px; }.device-card > p { margin: 0 0 15px; color: var(--muted); }.api-note { margin-top: 17px; padding: 22px; }.api-note h3 { margin: 6px 0; }.api-note > p:last-child { margin: 0; color: var(--muted); }
.muted { color: var(--muted); }
.mobile-nav { display: none; }

.login-page { min-height: 100vh; background: radial-gradient(circle at 18% 25%, rgba(67,165,255,.16), transparent 24%), radial-gradient(circle at 80% 80%, rgba(64,215,210,.11), transparent 27%), #06101c; display: grid; place-items: center; padding: 24px; }.login-wrap { width: min(100%, 1000px); display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: 0 35px 100px rgba(0,0,0,.42); }.login-intro { min-height: 570px; padding: 58px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, rgba(19,48,78,.92), rgba(8,24,40,.92)); }.login-intro .eyebrow { margin: 28px 0 10px; }.login-intro h1 { margin: 0; font-size: 42px; line-height: 1.18; letter-spacing: -.05em; }.login-intro > p:last-of-type { max-width: 500px; color: #a9bbcd; line-height: 1.8; }.login-metrics { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }.login-metrics span { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; }.login-metrics b { color: var(--cyan); margin-right: 5px; }.login-card { padding: 50px 42px; background: var(--panel); display: flex; flex-direction: column; justify-content: center; gap: 32px; }.login-card h2 { margin: 7px 0 5px; font-size: 28px; }

@media (max-width: 1020px) {
  .sidebar { width: 78px; padding: 22px 11px; }.app-shell { grid-template-columns: 78px minmax(0,1fr); }.brand { justify-content: center; padding-left: 0; padding-right: 0; }.brand > span:last-child, .nav a:not(.active) b, .nav a { font-size: 0; }.nav a { justify-content: center; padding: 0; }.nav a > span { font-size: 16px; }.nav a.active { font-size: 0; }.sidebar-foot { justify-content: center; font-size: 0; }.two-col, .lower-grid { grid-template-columns: 1fr; }.device-grid { grid-template-columns: repeat(2,1fr); }.quote-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  body { padding-bottom: 72px; }.app-shell { display: block; }.sidebar { display: none; }.main { padding: 0 14px 28px; }.topbar { height: 82px; }.topbar h1 { font-size: 21px; }.top-actions .btn-primary, .top-actions .user-chip, .top-actions form { display: none; }.hero-strip { min-height: 210px; padding: 24px; align-items: flex-start; }.hero-strip h2 { font-size: 27px; max-width: 290px; }.hero-strip p { max-width: 280px; line-height: 1.6; }.hero-time { position: absolute; right: 22px; bottom: 18px; }.hero-time strong { font-size: 34px; }.metric-grid, .quote-kpi-grid { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 115px; padding: 15px; }.metric-card > strong { font-size: 27px; }.rate-value { align-items: flex-end; }.rate-value strong { font-size: 26px; }.rate-value small { max-width: 70px; text-align: right; }.two-col { display: block; }.two-col > .panel { margin-bottom: 14px; }.workflow-row { grid-template-columns: auto 1fr auto; margin: 0 14px; }.workflow-alert { display: none; }.panel-head { padding: 18px 16px 13px; }.form-layout, .detail-grid { grid-template-columns: 1fr; }.form-panel { padding: 18px; }.form-grid { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: span 1; }.help-panel { display: none; }.toolbar { align-items: stretch; flex-direction: column; }.filter-form { display: grid; grid-template-columns: 1fr 1fr auto; }.toolbar-note { display: none; }.detail-hero { padding: 19px; }.detail-hero h2 { font-size: 21px; }.progress-ring { width: 76px; height: 76px; border-width: 6px; }.progress-ring strong { font-size: 17px; }.detail-list { grid-template-columns: 1fr; }.detail-list > div:nth-child(odd) { padding-right: 0; }.workbook-summary-grid { grid-template-columns: 1fr 1fr; }.workbook-summary-grid > div, .workbook-summary-grid > div:nth-child(3n) { border-right: 1px solid var(--line); }.workbook-summary-grid > div:nth-child(2n) { border-right: 0; }.validation-grid { grid-template-columns: 1fr; }.label-flow { grid-template-columns: 1fr; }.label-flow > i { display: none; }.device-grid { grid-template-columns: 1fr; }.login-page { padding: 0; }.login-wrap { min-height: 100vh; display: block; border-radius: 0; border: 0; }.login-intro { min-height: 280px; padding: 36px 25px; }.login-intro h1 { font-size: 30px; }.login-intro > p:last-of-type, .login-metrics { display: none; }.login-intro .eyebrow { margin-top: 18px; }.login-card { min-height: calc(100vh - 280px); padding: 35px 25px; justify-content: flex-start; }.mobile-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: 66px; padding: 7px 13px max(7px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4,1fr); align-items: center; background: rgba(7,17,31,.96); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }.mobile-nav a { display: grid; place-items: center; gap: 3px; color: var(--muted); font-size: 9px; }.mobile-nav a span { color: var(--blue); font-size: 16px; }.mobile-nav .mobile-add { width: 45px; height: 45px; justify-self: center; margin-top: -20px; border-radius: 15px; color: #04111e; background: linear-gradient(135deg,var(--blue),var(--cyan)); font-size: 25px; box-shadow: 0 8px 25px rgba(67,165,255,.28); }
}

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.settings-body { padding: 24px; display: grid; gap: 24px; }
.settings-body label { display: grid; gap: 8px; color: var(--text); }.settings-body label small { color: var(--muted); line-height: 1.7; }
.settings-actions { padding-top: 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
.settings-help { padding: 24px; align-self: start; }.settings-help h3 { margin: 6px 0 18px; }.settings-help ol { margin: 0; padding-left: 20px; color: #475569; line-height: 2; }
.security-note { margin: 20px 0 0; padding: 13px; border-radius: 8px; color: #9a3412; background: #fff7ed; line-height: 1.7; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } }

.account-list-panel { margin-top: 16px; overflow: hidden; }
.account-edit-layout { margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
.account-permissions { display: grid; gap: 10px; }
.account-permission { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.account-permission input { flex: 0 0 auto; margin-top: 3px; }
.account-permission b, .account-permission small { display: block; }.account-permission small { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.data-table td strong, .data-table td small { display: block; }.data-table td small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.overview-head { min-height: 56px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.overview-date { margin: 0; color: var(--muted); font-size: 15px; font-weight: 700; }
.status-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.status-overview-card {
  position: relative;
  min-height: 245px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-top: 5px solid var(--blue);
  border-radius: 14px;
  color: #172033;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.status-overview-card:hover { transform: translateY(-3px); border-color: #b7d9d5; box-shadow: 0 20px 42px rgba(15, 23, 42, .12); }
.status-card-name { position: absolute; top: 25px; left: 28px; font-size: 21px; font-weight: 900; }
.status-overview-card strong { color: #15803d; font-size: 40px; line-height: 1; letter-spacing: .03em; }
.status-overview-card strong:before { content: ""; display: inline-block; width: 11px; height: 11px; margin: 0 12px 5px 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px rgba(21, 128, 61, .1); }
.status-overview-card.has-exception { border-top-color: var(--red); }
.status-overview-card.has-exception strong { color: var(--red); }
.status-overview-card.has-exception strong:before { box-shadow: 0 0 0 6px rgba(220, 38, 38, .09); }
.status-overview-card small { margin-top: 14px; color: var(--muted); font-size: 16px; font-weight: 700; }
.status-card-enter { position: absolute; right: 28px; bottom: 23px; color: var(--blue); font-size: 14px; font-weight: 800; }
.device-status-card { cursor: default; }
.status-card-grid.is-arranging .status-overview-card { cursor: grab; outline: 4px dashed rgba(15, 118, 110, .35); outline-offset: -8px; user-select: none; }
.status-card-grid.is-arranging .status-overview-card:hover { transform: none; }
.status-overview-card.is-dragging { opacity: .55; cursor: grabbing; }
.arrange-hint { margin: 18px 0 0; padding: 12px 15px; border: 1px solid var(--brand-line, #b7d9d5); border-radius: 8px; color: var(--blue); background: #eef8f7; font-weight: 800; text-align: center; }

@media (max-width: 900px) {
  .status-card-grid { gap: 18px; }
  .status-overview-card { min-height: 210px; }
}

@media (max-width: 720px) {
  .overview-head { align-items: flex-start; flex-direction: column; }
  .overview-head .btn { width: 100%; }
  .status-card-grid { grid-template-columns: 1fr; }
  .status-overview-card { min-height: 190px; border-radius: 20px; }
  .status-card-name { font-size: 19px; }
  .status-overview-card strong { font-size: 36px; }
}

.simple-intro, .business-head {
  min-height: 120px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  border-left: 5px solid var(--blue);
}
.simple-intro h2, .business-head h2 { margin: 5px 0 8px; font-size: 25px; }
.simple-intro p:last-child, .business-head p:last-child { margin: 0; color: var(--muted); }
.business-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.business-module { min-height: 330px; padding: 22px; display: flex; flex-direction: column; border-top: 4px solid var(--blue); transition: transform .15s ease, border-color .15s ease; }
.business-module:hover { transform: translateY(-2px); border-color: var(--blue); }
.label-module { border-top-color: #0284c7; }.return-module { border-top-color: var(--amber); }
.module-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 900; }
.label-module .module-icon { background: #0284c7; }.return-module .module-icon { background: var(--amber); }
.module-heading { margin: 20px 0; }.module-heading h2 { margin: 6px 0 7px; font-size: 23px; }.module-heading > p:last-child { min-height: 42px; margin: 0; color: var(--muted); line-height: 1.6; }
.business-module dl { margin: 0; padding: 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.business-module dl > div { text-align: center; border-right: 1px solid var(--line); }.business-module dl > div:last-child { border-right: 0; }
.business-module dt { color: var(--muted); font-size: 11px; }.business-module dd { margin: 6px 0 0; color: var(--text); font-size: 24px; font-weight: 900; }
.module-enter { margin-top: auto; padding-top: 18px; color: var(--blue); font-weight: 800; }
.simple-bottom-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }
.simple-count-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.simple-count-grid .stat-card { min-height: 105px; display: flex; flex-direction: column; justify-content: space-between; }
.simple-count-grid .stat-card span { color: var(--muted); font-weight: 800; }.simple-count-grid .stat-card strong { color: var(--text); font-size: 30px; }

@media (max-width: 1020px) {
  .business-module-grid { grid-template-columns: 1fr; }
  .business-module { min-height: 250px; }
}

@media (max-width: 720px) {
  .simple-intro, .business-head { align-items: flex-start; flex-direction: column; }
  .business-head .btn, .simple-intro .btn { width: 100%; }
  .simple-bottom-grid { grid-template-columns: 1fr; }
  .simple-count-grid { grid-template-columns: 1fr 1fr; }
}

/* 视觉基准：参考“床位管理系统”的轻量政企后台风格，仅复用设计语言。 */
:root {
  color-scheme: light;
  --bg: #f4f7fa;
  --bg-soft: #eef3f6;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --line: #d9e1ea;
  --text: #172033;
  --muted: #64748b;
  --blue: #0f766e;
  --cyan: #14b8a6;
  --green: #15803d;
  --amber: #d97706;
  --red: #dc2626;
  --radius: 10px;
  --shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

html { color-scheme: light; }
body {
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(15, 118, 110, .07), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 42%, #edf2f7 100%);
}
.app-shell { grid-template-columns: 264px minmax(0, 1fr); }
.sidebar {
  top: 14px;
  height: calc(100vh - 28px);
  margin: 0 0 14px 14px;
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 0 0 4px #eef8f7;
}
.brand strong { color: var(--text); }
.brand small, .sidebar-foot { color: var(--muted); }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--blue); background: #f1f5f9; }
.nav a.active {
  color: var(--blue);
  background: #eef8f7;
  box-shadow: inset 2px 0 var(--blue);
  font-weight: 800;
}
.nav-count { background: var(--red); }
.sidebar-foot { background: #f1f5f9; border-color: transparent; }

.main { padding: 0 14px 42px 28px; }
.topbar { height: 88px; }
.topbar h1 { color: var(--text); font-size: 24px; }
.eyebrow { color: var(--blue); font-weight: 900; }
.user-chip { color: var(--blue); background: #eef8f7; }
.btn { color: #334155; background: #ffffff; border-color: var(--line); }
.btn:hover { color: var(--blue); border-color: #b7d9d5; background: #eef8f7; }
.btn-primary {
  color: #ffffff;
  background: var(--blue);
  box-shadow: none;
}
.btn-primary:hover { color: #ffffff; background: #115e59; }
.text-btn { color: var(--blue); }
.message { color: var(--text); background: #ffffff; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.message.success { color: #166534; }
.message.error { color: #b91c1c; }
.message.warning { color: #9a3412; border-color: #fed7aa; background: #fff7ed; }

.hero-strip {
  min-height: 158px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 86% 22%, rgba(20, 184, 166, .14), transparent 26%),
    linear-gradient(135deg, #ffffff, #f6fbfa 70%, #eef8f7);
  box-shadow: var(--shadow);
}
.hero-strip:after { border-color: rgba(15, 118, 110, .09); box-shadow: 0 0 0 40px rgba(15, 118, 110, .025), 0 0 0 80px rgba(15, 118, 110, .015); }
.hero-strip h2 { color: var(--text); font-size: clamp(24px, 3vw, 34px); }
.hero-strip p, .hero-time small, .hero-time span { color: var(--muted); }
.hero-time strong { color: var(--blue); }
.live-pill { color: var(--blue); border-color: #b7d9d5; background: #eef8f7; font-weight: 800; }

.panel, .metric-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow);
}
.metric-card { min-height: 126px; background: #f8fafc; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.metric-head, .metric-card small, .rate-value small { color: var(--muted); }
.metric-card > strong, .rate-value strong { color: var(--text); }
.metric-head b { background: #ffffff; border: 1px solid var(--line); }
.accent-blue, .accent-green, .accent-amber, .accent-red { box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.accent-blue { border-top: 3px solid var(--blue); }
.accent-green { border-top: 3px solid var(--green); }
.accent-amber { border-top: 3px solid var(--amber); }
.accent-red { border-top: 3px solid var(--red); }
.progress-track { background: #e2e8f0; }
.progress-track i { background: var(--blue); }

.panel-head {
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.panel-head h3, .task-progress-copy strong, .workflow-copy strong, .device-line strong { color: var(--text); }
.panel-head > a { color: var(--blue); font-weight: 800; }
.workflow-row, .alert-line, .task-progress-row, th, td, .device-line { border-color: var(--line); }
.workflow-copy span, .workflow-stat small, .alert-line small, .alert-line time, .task-progress-copy small, .task-progress-meta, .device-line small, .device-state { color: var(--muted); }
.workflow-stat b, .task-progress-meta b, .task-progress-meta > strong { color: #334155; }
.workflow-icon.quote { color: var(--blue); background: #eef8f7; }
.workflow-icon.label { color: #0f766e; background: #ecfdf5; }
.workflow-alert { color: #b45309; background: #fef3e2; }
.task-exception-link { color: #9a3412; border-color: #fed7aa; background: #fff7ed; }
.task-exception-link span { color: #ffffff; background: var(--amber); }
.priority { color: var(--muted); background: #f8fafc; }
.priority-3 { color: #b45309; border-color: #fed7aa; background: #fff7ed; }
.priority-4 { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

th { color: var(--muted); background: #f8fafc; }
td { color: #475569; }
td a strong { color: var(--text); }
td a small, .empty-cell { color: var(--muted); }
.status, .kind-tag { color: #475569; background: #f8fafc; }
.status.running { color: var(--blue); background: #eef8f7; }
.status.success, .status.resolved { color: #166534; background: #f0fdf4; }
.status.needs_human, .status.acknowledged { color: #b45309; background: #fff7ed; }
.status.failed, .status.open { color: #b91c1c; background: #fef2f2; }
.integration-box, .input, .label-flow > div { color: var(--text); background: #f8fafc; border-color: var(--line); }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15, 118, 110, .09); }
.form-grid label, .stack-form label, .check-list, .toolbar-note { color: #475569; }
.form-intro > p:last-child, .muted { color: var(--muted); }
.form-error, .error-box { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.check-list li:before { color: var(--blue); }

.detail-hero { background: radial-gradient(circle at 85% 35%, rgba(15, 118, 110, .09), transparent 27%), #ffffff; }
.detail-hero h2 { color: var(--text); }
.detail-hero p, .detail-list dt, .workbook-summary-grid small, .workbook-summary-grid em { color: var(--muted); }
.progress-ring { color: var(--text); border-color: #dfe8ed; border-top-color: var(--cyan); border-right-color: var(--blue); }
.workbook-head, .workbook-summary-grid > div, .validation-card, .validation-card header { border-color: var(--line); }
.workbook-summary-grid strong { color: #334155; }
.workbook-summary-grid strong.money { color: var(--blue); }
.readiness.ready { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.readiness.blocked { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.readiness.pending { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.duplicate-skus { color: #9a3412; border-color: #fed7aa; background: #fff7ed; }
.duplicate-skus > strong { color: #9a3412; }
.duplicate-skus span { color: #475569; background: #ffffff; border: 1px solid #fed7aa; }
.warning-card header { color: #b45309; background: #fff7ed; }
.error-card header { color: #b91c1c; background: #fef2f2; }
.validation-list p { color: #475569; }
.validation-list p.validation-ok { color: #166534; }
.validation-banner.error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.detail-list dd, .timeline strong { color: #334155; }
.timeline small { color: var(--muted); }

.severity.info { color: var(--blue); background: #eef8f7; }
.severity.warning { color: #b45309; background: #fff7ed; }
.severity.critical { color: #b91c1c; background: #fef2f2; }
.device-card > p, .api-note > p:last-child { color: var(--muted); }

.login-page { background: linear-gradient(135deg, #eef8f7, #f8fafc 48%, #edf2f7); }
.login-wrap { border-color: var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.login-intro { color: var(--text); background: linear-gradient(145deg, #ffffff, #eef8f7); border-left: 5px solid var(--blue); }
.login-intro > p:last-of-type { color: var(--muted); }
.login-card { color: var(--text); background: #ffffff; }
.login-metrics span { color: var(--muted); background: #ffffff; }
.login-metrics b { color: var(--blue); }

@media (max-width: 1020px) {
  .app-shell { grid-template-columns: 92px minmax(0, 1fr); }
  .sidebar { width: 78px; }
}

@media (max-width: 720px) {
  .main { padding: 0 14px 28px; }
  .hero-strip { min-height: 205px; }
  .mobile-nav { background: rgba(255, 255, 255, .96); border-color: var(--line); box-shadow: 0 -10px 30px rgba(15, 23, 42, .08); }
  .mobile-nav .mobile-add { color: #ffffff; background: var(--blue); box-shadow: 0 8px 24px rgba(15, 118, 110, .24); }
  .login-wrap { border-radius: 0; }
}

/* 报价员工界面：只突出“上传、看结果、下载并核对”。 */
.brand-mark.abb-mark {
  width: 58px;
  border-radius: 6px;
  color: #ff000f;
  background: #ffffff;
  border: 2px solid #ff000f;
  box-shadow: none;
  font: 900 16px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.05em;
}
.brand-mark.abb-mark.large { width: 78px; font-size: 22px; }

.quote-start {
  min-height: 190px;
  margin-bottom: 20px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-left: 6px solid var(--blue);
  background: linear-gradient(135deg, #ffffff, #f0fdfa);
}
.quote-start-copy h2 { margin: 8px 0 10px; font-size: 30px; }
.quote-start-copy > p:last-of-type { max-width: 700px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.quote-start-notes { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.quote-start-notes span { padding: 7px 10px; border-radius: 7px; color: #475569; background: #f1f5f9; font-size: 12px; }
.quote-start-notes .is-ready { color: #166534; background: #f0fdf4; }
.quote-start-button { min-width: 210px; min-height: 54px; font-size: 16px; }
.quote-history { overflow: hidden; }
.history-count { color: var(--muted); font-weight: 700; }
.quote-history-table td { vertical-align: middle; }
.quote-history-table th:nth-child(1) { width: 32%; }
.quote-history-table th:nth-child(2) { width: 34%; }
.quote-file-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.quote-file-name { min-width: 0; flex: 1; }
.quote-file-name strong { overflow-wrap: anywhere; }
.quote-view-button { flex: 0 0 auto; color: var(--blue); border-color: #b7d9d5; background: #eef8f7; font-weight: 800; }
.result-label { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.result-label.ready { color: #166534; background: #f0fdf4; }
.result-label.review { color: #9a3412; background: #fff7ed; }
.result-label.blocked { color: #b91c1c; background: #fef2f2; }
.result-label.pending { color: var(--blue); background: #eef8f7; }
.result-summary { display: block; max-width: 440px; margin-top: 6px; color: var(--muted); line-height: 1.5; }
.quote-row-action { white-space: nowrap; }
.btn-danger { color: #b91c1c; border-color: #fecaca; background: #fff7f7; }
.btn-danger:hover { color: #ffffff; border-color: #b91c1c; background: #b91c1c; }

.quote-steps { max-width: 720px; margin: 0 auto 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.quote-steps span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.quote-steps span b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #64748b; background: #e2e8f0; }
.quote-steps span.active { color: var(--blue); }
.quote-steps span.active b { color: #ffffff; background: var(--blue); }
.quote-steps i { height: 2px; background: #d9e1ea; }
.quote-upload-layout { max-width: 1040px; margin: 0 auto; }
.quote-upload-panel { padding: 32px; }
.quote-upload-panel .form-intro h2 { margin: 8px 0 10px; font-size: 26px; }
.quote-upload-panel .form-intro p:last-child { margin-bottom: 24px; font-size: 15px; line-height: 1.7; }
.quote-file-picker { min-height: 190px; padding: 25px; display: grid; place-items: center; align-content: center; gap: 9px; border: 2px dashed #9cc9c4; border-radius: 12px; color: var(--text); background: #f7fffd; cursor: pointer; text-align: center; }
.quote-file-picker:hover { border-color: var(--blue); background: #eef8f7; }
.quote-file-picker.is-dragging { border-color: var(--blue); background: #dff7f3; box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); }
.quote-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.quote-file-picker strong { font-size: 17px; }
.quote-file-picker small { color: var(--muted); }
.file-picker-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: #ffffff; background: var(--blue); font-weight: 900; }
.selected-file { margin-top: 12px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #bbf7d0; border-radius: 9px; background: #f0fdf4; }
.selected-file[hidden] { display: none; }
.selected-file strong, .selected-file small { display: block; }
.selected-file small { margin-top: 4px; color: var(--muted); }
.upload-safety-note { margin-top: 18px; padding: 13px 15px; display: grid; gap: 5px; border-radius: 9px; color: #475569; background: #f8fafc; }
.upload-safety-note strong { color: var(--text); }
.quote-upload-actions .btn-primary:disabled { color: #94a3b8; background: #e2e8f0; cursor: not-allowed; }
.quote-start-button:disabled { color: #94a3b8; background: #e2e8f0; cursor: not-allowed; box-shadow: none; }
.quote-result-hero { min-height: 185px; padding: 30px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; border-left: 6px solid var(--green); }
.quote-result-hero.review { border-left-color: var(--amber); }
.quote-result-hero.blocked { border-left-color: var(--red); }
.quote-result-hero.pending { border-left-color: var(--blue); }
.quote-result-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: var(--green); font-size: 26px; font-weight: 900; }
.quote-result-hero.review .quote-result-icon { background: var(--amber); }
.quote-result-hero.blocked .quote-result-icon { background: var(--red); }
.quote-result-hero.pending .quote-result-icon { background: var(--blue); }
.quote-result-copy h2 { margin: 7px 0 8px; font-size: 28px; }
.quote-result-copy > p:last-child { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.quote-result-actions { min-width: 190px; display: grid; gap: 9px; }
.quote-result-actions .text-link { padding: 5px; color: var(--muted); font-weight: 700; text-align: center; }
.quote-result-actions .text-link:hover { color: var(--blue); }
.btn-large { min-height: 48px; font-size: 15px; }
.quote-review-panel, .quote-next-panel, .quote-ready-note, .quote-error-help, .quote-legacy-note, .quote-details { margin-top: 18px; }
.review-total { color: #9a3412; font-size: 20px; }
.review-breakdown { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.review-breakdown > div { padding: 16px; display: flex; align-items: center; gap: 14px; border: 1px solid #fed7aa; border-radius: 9px; background: #fff7ed; }
.review-breakdown b { min-width: 34px; color: #9a3412; font-size: 26px; text-align: center; }
.review-breakdown strong, .review-breakdown small { display: block; }
.review-breakdown small { margin-top: 4px; color: var(--muted); }
.review-help { margin: 0 20px 20px; color: #475569; line-height: 1.7; }
.quote-ready-note { padding: 20px; display: flex; align-items: center; gap: 14px; border-color: #bbf7d0; background: #f0fdf4; }
.quote-ready-note > b { color: #166534; font-size: 24px; }
.quote-ready-note strong, .quote-ready-note small { display: block; }
.quote-ready-note small { margin-top: 5px; color: #475569; }
.quote-next-steps { margin: 0; padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; }
.quote-next-steps li { padding: 17px; display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; }
.quote-next-steps li > b { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: var(--blue); }
.quote-next-steps strong, .quote-next-steps small { display: block; }
.quote-next-steps small { margin-top: 6px; color: var(--muted); line-height: 1.6; }
.quote-details { padding: 0; overflow: hidden; }
.quote-details summary { padding: 18px 20px; color: var(--blue); font-weight: 800; cursor: pointer; }
.quote-details dl { margin: 0; padding: 0 20px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.quote-details dl > div { padding: 13px; border-radius: 8px; background: #f8fafc; }
.quote-details dt { color: var(--muted); font-size: 11px; }
.quote-details dd { margin: 6px 0 0; overflow-wrap: anywhere; font-weight: 800; }
.quote-error-help { padding: 24px; }
.quote-error-help h3 { margin-top: 0; }
.quote-error-help p { color: #b91c1c; line-height: 1.7; }
.quote-error-help li { margin: 8px 0; color: #475569; }
.aggregation-result-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.aggregation-exception-panel { margin-top: 20px; overflow: hidden; }
.aggregation-exception-note { margin: 0; padding: 0 24px 20px; color: #475569; line-height: 1.7; }
.aggregation-exception-table { min-width: 640px; }
.aggregation-exception-table td:first-child { width: 110px; font-weight: 800; }
.aggregation-exception-table td:nth-child(2) { width: 220px; }
.quote-legacy-note { padding: 24px; border-left: 5px solid var(--green); }
.quote-legacy-note.blocked { border-left-color: var(--red); }
.quote-legacy-note h3 { margin-top: 0; }
.quote-legacy-note p { color: #475569; line-height: 1.7; }

.supply-chain-hero { margin-bottom: 17px; }
.supply-chain-hero h2 { margin-bottom: 8px; }
.supply-chain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.supply-chain-card { overflow: hidden; }
.supply-chain-items { display: grid; gap: 9px; padding: 0 20px 20px; }
.supply-chain-item { min-height: 58px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.supply-chain-item:hover { border-color: #b7d9d5; background: #eef8f7; }
.supply-chain-item strong, .supply-chain-item small { display: block; }
.supply-chain-item small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.supply-chain-item.is-disabled { cursor: default; }
.supply-chain-item.is-disabled:hover { border-color: var(--line); background: #f8fafc; }

@media (max-width: 1020px) {
  .nav-submenu { display: none; }
}

@media (max-width: 900px) {
  .supply-chain-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .quote-upload-layout { grid-template-columns: 1fr; }
  .quote-result-hero { grid-template-columns: auto 1fr; }
  .quote-result-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .quote-next-steps { grid-template-columns: 1fr; }
  .quote-details dl { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .brand-mark.abb-mark { width: 54px; }
  .quote-start { padding: 22px; align-items: stretch; flex-direction: column; }
  .quote-start-copy h2 { font-size: 25px; }
  .quote-start-button { width: 100%; }
  .quote-history-table { min-width: 680px; }
  .quote-steps { gap: 5px; }
  .quote-steps span { display: grid; justify-items: center; gap: 5px; font-size: 10px; }
  .quote-steps span b { width: 26px; height: 26px; }
  .quote-upload-panel { padding: 20px; }
  .quote-file-picker { min-height: 160px; }
  .quote-result-hero { padding: 22px; grid-template-columns: 1fr; text-align: center; }
  .quote-result-icon { margin: 0 auto; }
  .quote-result-actions { grid-column: auto; grid-template-columns: 1fr; }
  .review-breakdown { grid-template-columns: 1fr; }
  .quote-details dl { grid-template-columns: 1fr; }
}

/* 报价结果页：桌面端左侧明细与后续步骤、右侧结果与操作。 */
.quote-steps {
  max-width: 920px;
  margin-bottom: 28px;
}
.quote-steps span { gap: 10px; font-size: 15px; }
.quote-steps span b { width: 36px; height: 36px; font-size: 15px; }

.quote-result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  align-items: start;
  gap: 24px;
  font-size: 16px;
}
.quote-result-main, .quote-result-aside { min-width: 0; }
.quote-result-main > :first-child, .quote-result-aside > :first-child { margin-top: 0; }
.quote-result-aside {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 20px;
}
.quote-result-aside .quote-result-hero {
  min-height: 0;
  padding: 28px;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 18px;
}
.quote-result-aside .quote-result-icon { width: 64px; height: 64px; font-size: 30px; }
.quote-result-copy h2 { margin: 9px 0 10px; font-size: 30px; line-height: 1.25; }
.quote-result-file { display: block; margin-bottom: 9px; color: #0f766e; font-size: 15px; overflow-wrap: anywhere; }
.quote-result-copy > p:last-child { font-size: 16px; line-height: 1.8; }
.quote-result-actions { width: 100%; min-width: 0; }
.quote-result-actions .btn { min-height: 50px; font-size: 16px; }

.quote-review-panel .panel-head, .quote-next-panel .panel-head { min-height: 82px; padding: 22px 24px; }
.quote-review-panel .panel-head h3, .quote-next-panel .panel-head h3 { margin-top: 7px; font-size: 22px; }
.review-total { font-size: 24px; }
.review-breakdown { padding: 24px; gap: 16px; }
.review-breakdown > div { min-height: 104px; padding: 20px; gap: 18px; }
.review-breakdown b { min-width: 44px; font-size: 32px; }
.review-breakdown strong { font-size: 18px; }
.review-breakdown small { margin-top: 7px; font-size: 14px; line-height: 1.6; }
.review-help { margin: 0 24px 24px; font-size: 15px; line-height: 1.8; }

.quote-result-main .quote-details { margin-top: 20px; }
.quote-result-main .quote-next-panel { margin-top: 20px; }
.quote-details summary { padding: 21px 24px; font-size: 16px; }
.quote-result-main .quote-details dl { padding: 0 24px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quote-details dl > div { min-height: 84px; padding: 17px; }
.quote-details dt { font-size: 13px; }
.quote-details dd { margin-top: 8px; font-size: 18px; }

@media (max-width: 760px) {
  .quote-result-layout { display: flex; flex-direction: column; gap: 18px; }
  .quote-result-main, .quote-result-aside { width: 100%; }
  .quote-result-aside { position: static; order: -1; }
  .quote-result-aside .quote-result-hero { text-align: left; }
  .quote-result-aside .quote-result-icon { margin: 0; }
  .review-breakdown, .quote-result-main .quote-details dl { grid-template-columns: 1fr; }
  .aggregation-result-metrics { grid-template-columns: 1fr !important; }
}

/* 2026-08-24：与微信数据助手一致的浅色三栏工作区。 */
:root {
  --bg: #eef2ed;
  --bg-soft: #f5f7f4;
  --panel: rgba(255, 255, 255, .86);
  --panel-2: #f5f7f4;
  --line: #d5ddd8;
  --text: #1c2724;
  --muted: #64756d;
  --blue: #17664d;
  --cyan: #17664d;
  --green: #29945f;
  --radius: 15px;
  --shadow: 0 14px 45px rgba(36, 61, 51, .06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

body:not(.login-page) {
  height: 100vh;
  overflow: hidden;
  color: var(--text);
  background: radial-gradient(circle at 9% 0%, rgba(104, 165, 133, .2), transparent 30rem), #eef2ed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
}

.app-shell {
  height: 100vh;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}

.app-shell.has-section-nav { grid-template-columns: 220px 188px minmax(0, 1fr); }

.sidebar {
  position: static;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 20px 15px 15px;
  overflow-y: auto;
  border: 1px solid #d5ddd8;
  border-left: 5px solid #17664d;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 45px rgba(36, 61, 51, .08);
}

.brand {
  min-height: 104px;
  padding: 4px 6px 22px;
  gap: 12px;
  border-bottom: 1px solid #dfe6e2;
}

.brand > span:last-child { min-width: 0; }
.brand strong { color: #1c2724; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }
.brand small { margin-top: 4px; color: #64756d; font-size: 10px; letter-spacing: .08em; }
.brand-mark.abb-mark { width: 52px; height: 42px; flex: 0 0 52px; border-radius: 7px; }

.nav { margin-top: 18px; display: grid; gap: 7px; }
.nav > a {
  min-height: 58px;
  padding: 0 13px;
  gap: 12px;
  border-radius: 9px;
  color: #4d5d55;
  font-size: 14px;
  font-weight: 750;
  box-shadow: none;
}
.nav > a:hover { color: #17664d; background: #edf3ef; }
.nav > a.active { color: #fff; background: #17664d; box-shadow: none; }
.nav > a > span { width: 22px; color: #17664d; font-size: 14px; }
.nav > a.active > span { color: #fff; }

.sidebar-status-stack { margin-top: auto; display: grid; gap: 7px; padding-top: 16px; }
.sidebar-foot {
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  color: #64756d;
  background: #edf1f3;
}
.sidebar-foot a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-section-nav {
  min-height: 0;
  padding: 18px 10px 14px;
  overflow-y: auto;
  border: 1px solid #d5ddd8;
  border-radius: 14px;
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 14px 45px rgba(36, 61, 51, .03);
}

.section-nav { display: grid; gap: 6px; }
.section-nav-group { margin: 0; }
.section-nav-group + .section-nav-group { margin-top: 5px; padding-top: 10px; border-top: 1px solid #dfe6e2; }
.section-nav-group summary {
  min-height: 46px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  color: #4d5d55;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.section-nav-group summary::-webkit-details-marker { display: none; }
.section-nav-group summary:hover, .section-nav-group[open] summary { color: #17664d; background: rgba(255, 255, 255, .78); }
.section-nav-group summary span { font-size: 13px; transition: transform .15s ease; }
.section-nav-group:not([open]) summary span { transform: rotate(180deg); }
.section-subnav {
  margin: 3px 0 0 11px;
  padding-left: 10px;
  display: grid;
  gap: 3px;
  border-left: 1px solid #cad7d0;
}
.section-subnav a {
  min-height: 38px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: #586961;
  font-size: .82rem;
  font-weight: 700;
}
.section-subnav a:hover { color: #17664d; background: rgba(255, 255, 255, .74); }
.section-subnav a.active { color: #fff; background: #17664d; }

.main {
  min-width: 0;
  min-height: 0;
  padding: 25px 32px 48px;
  overflow-y: auto;
}
.topbar {
  height: auto;
  min-height: 82px;
  margin-bottom: 18px;
  padding: 3px 4px 7px;
  align-items: flex-start;
}
.topbar h1 { margin: 5px 0 7px; color: #1d2937; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1; letter-spacing: -.04em; }
.eyebrow { color: #17664d; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.page-summary { max-width: 760px; margin: 0; color: #687b72; font-size: 15px; }
.top-actions { padding-top: 3px; }
.user-chip { width: auto; max-width: 130px; height: 38px; padding: 0 13px; border-radius: 999px; color: #17664d; background: #e5f0eb; font-weight: 800; }
.text-btn { color: #17664d; }

.panel {
  border: 1px solid #d5ddd8;
  border-radius: 15px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 45px rgba(36, 61, 51, .06);
}
.btn { border-color: #d5ddd8; color: #26352f; background: rgba(255, 255, 255, .88); }
.btn:hover { border-color: #91b6a7; }
.btn-primary { color: #fff; background: #17664d; box-shadow: none; }
.btn-primary:hover { border-color: #145943; background: #145943; }
.input { border-color: #d5ddd8; color: #1c2724; background: #fff; }
.input:focus { border-color: #17664d; box-shadow: 0 0 0 3px rgba(23, 102, 77, .1); }

.supply-chain-welcome {
  min-height: 280px;
  padding: 34px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.supply-chain-welcome h2 { margin: 8px 0 10px; font-size: 26px; }
.supply-chain-welcome > p:not(.eyebrow) { max-width: 650px; margin: 0 0 22px; color: #687b72; line-height: 1.8; }
.supply-chain-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.supply-chain-placeholder {
  min-height: 430px;
  padding: 42px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.placeholder-badge { padding: 7px 12px; border-radius: 999px; color: #17664d; background: #e5f0eb; font-size: 12px; font-weight: 800; }
.supply-chain-placeholder h2 { margin: 18px 0 8px; font-size: 30px; }
.supply-chain-placeholder p { margin: 0; color: #687b72; }

.inventory-toolbar {
  margin-bottom: 14px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.inventory-filter-form { flex: 1; display: flex; align-items: flex-end; gap: 10px; }
.inventory-filter-form label { min-width: 190px; display: grid; gap: 6px; color: #586961; font-size: 12px; font-weight: 750; }
.inventory-filter-form label:first-child { max-width: 390px; flex: 1; }
.inventory-source { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; color: #687b72; font-size: 11px; }
.inventory-source strong { color: #17664d; font-size: 13px; }

.inventory-summary-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.inventory-summary-grid > div { min-height: 116px; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.inventory-summary-grid span { color: #687b72; font-size: 12px; font-weight: 750; }
.inventory-summary-grid strong { margin: 4px 0 2px; color: #1d2937; font-size: 29px; }
.inventory-summary-grid small { color: #829087; font-size: 10px; }

.inventory-table-panel { overflow: hidden; }
.inventory-table-head { min-height: 84px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.inventory-table-head h2 { margin: 5px 0 0; font-size: 21px; }
.inventory-table-head > span { color: #687b72; font-size: 11px; }
.inventory-table { min-width: 1180px; }
.inventory-table th { color: #687b72; background: #f3f6f3; }
.inventory-table td { color: #43534c; font-size: 12px; }
.inventory-table td strong, .inventory-table td small { display: block; }
.inventory-table td small { margin-top: 3px; color: #829087; }
.inventory-quantity { text-align: right; }
.inventory-quantity strong { color: #17664d; font-size: 16px; }
.inventory-product-link { color: #17664d; text-decoration: underline; text-decoration-color: rgba(23, 102, 77, .25); text-underline-offset: 3px; }
.inventory-product-link:hover { color: #0f5138; text-decoration-color: currentColor; }
.inventory-reconcile { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.inventory-reconcile.ok { color: #17664d; background: #e5f0eb; }
.inventory-reconcile.blocked { color: #9a3412; background: #fff7ed; }
.inventory-modal-backdrop { position: fixed; z-index: 80; inset: 0; padding: 28px; display: grid; place-items: center; background: rgba(20, 34, 28, .42); backdrop-filter: blur(5px); }
.inventory-modal { width: min(1240px, 96vw); max-height: min(820px, 92vh); overflow: auto; background: #fff; }
.inventory-modal-head { padding: 22px 24px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dfe6e2; }
.inventory-modal-head h2 { margin: 5px 0 4px; font-size: 25px; }
.inventory-modal-head p:last-child { margin: 0; color: #687b72; }
.inventory-modal-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d5ddd8; border-radius: 50%; color: #43534c; font-size: 24px; line-height: 1; }
.inventory-detail-summary { padding: 16px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.inventory-detail-summary > div { padding: 12px 14px; border-radius: 11px; background: #f3f6f3; }
.inventory-detail-summary span, .inventory-detail-summary strong { display: block; }
.inventory-detail-summary span { color: #687b72; font-size: 11px; }
.inventory-detail-summary strong { margin-top: 4px; color: #1d2937; font-size: 18px; }
.inventory-detail-table-wrap { margin: 0 24px; border: 1px solid #dfe6e2; border-radius: 12px; }
.inventory-detail-table { min-width: 1120px; }
.inventory-detail-note { margin: 16px 24px 22px; color: #687b72; font-size: 12px; }
.inventory-pagination { padding: 14px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; border-top: 1px solid #dfe6e2; }
.inventory-pagination span { color: #687b72; font-size: 12px; }
.inventory-error-state { min-height: 340px; padding: 32px; display: grid; place-items: center; align-content: center; text-align: center; }
.inventory-error-state > span { padding: 6px 10px; border-radius: 999px; color: #9a3412; background: #fff7ed; font-size: 11px; font-weight: 800; }
.inventory-error-state h2 { margin: 16px 0 7px; }
.inventory-error-state p { max-width: 560px; margin: 0 0 18px; color: #687b72; }

@media (max-width: 1100px) and (min-width: 721px) {
  .app-shell { grid-template-columns: 196px minmax(0, 1fr); }
  .app-shell.has-section-nav { grid-template-columns: 196px 168px minmax(0, 1fr); }
  .sidebar { width: auto; padding: 17px 12px 13px; }
  .brand { justify-content: flex-start; }
  .brand > span:last-child { display: block; }
  .nav > a, .nav > a.active { justify-content: flex-start; padding: 0 10px; font-size: 13px; }
  .nav > a > span { font-size: 13px; }
  .sidebar-foot { justify-content: flex-start; font-size: 11px; }
  .main { padding: 22px 22px 42px; }
  .inventory-toolbar { align-items: stretch; flex-direction: column; }
  .inventory-source { justify-items: start; }
  .inventory-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-modal-backdrop { padding: 14px; }
  .inventory-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body:not(.login-page) { height: auto; min-height: 100vh; overflow: auto; }
  .app-shell, .app-shell.has-section-nav { height: auto; min-height: 100vh; padding: 10px; display: block; }
  .sidebar { display: none; }
  .app-section-nav { margin-bottom: 10px; padding: 10px; overflow: visible; }
  .main { padding: 12px 4px 28px; overflow: visible; }
  .topbar { min-height: 74px; }
  .topbar h1 { font-size: 28px; }
  .page-summary { font-size: 13px; }
  .supply-chain-placeholder { min-height: 300px; padding: 26px 18px; }
  .inventory-toolbar { padding: 14px; align-items: stretch; flex-direction: column; }
  .inventory-filter-form { align-items: stretch; flex-direction: column; }
  .inventory-filter-form label { width: 100%; min-width: 0; max-width: none; }
  .inventory-source { justify-items: start; }
  .inventory-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-summary-grid > div { min-height: 100px; padding: 14px; }
  .inventory-table-head { align-items: flex-start; flex-direction: column; }
  .inventory-modal-backdrop { padding: 0; align-items: end; }
  .inventory-modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .inventory-detail-summary { padding: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-detail-table-wrap { margin: 0 14px; }
  .inventory-detail-note { margin: 14px; }
}