/* 极简风：白底 / 系统字体 / 细线 / 等宽显示 OEM */
:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e5e5e5;
  --line-strong: #cfcfcf;
  --accent: #111111;
  --accent-fg: #ffffff;
  --warn: #b45309;
  --bad: #b91c1c;
  --ok: #047857;
  --soft: #f6f6f6;
  --soft-2: #fafafa;
  --radius: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
}

code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
  background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 600; letter-spacing: 0.3px; }
.me { color: var(--muted); font-size: 13px; }
.me button { margin-left: 12px; }

main { max-width: 1080px; margin: 0 auto; padding: 24px; }

.tabs {
  display: flex; gap: 6px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  background: transparent; border: 0; padding: 10px 16px;
  font-size: 14px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 500; }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; background: #fff;
}
.card h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.card h3 { margin: 16px 0 8px; font-size: 14px; font-weight: 600; }

.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.wrap > input, .row.wrap > select { flex: 1 1 160px; width: auto; }

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

input[type=text], input[type=search], input[type=password], input[type=tel], input[type=number], input[type=date], textarea, select {
  width: 100%; padding: 8px 10px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; color: var(--fg); font-family: inherit;
}
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, monospace; font-size: 13px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

button {
  background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent);
  padding: 8px 14px; font-size: 13px; border-radius: var(--radius);
  cursor: pointer; font-family: inherit;
}
button:hover { opacity: 0.9; }
button.ghost { background: #fff; color: var(--fg); border-color: var(--line-strong); }
button.ghost:hover { background: var(--soft); }
button.danger { background: var(--bad); border-color: var(--bad); }
button.warn { background: var(--warn); border-color: var(--warn); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.field { margin-bottom: 12px; }
.help { color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }

/* 报价规则编辑器：按业务决策顺序分组，避免比例与金额混在同一行。 */
.pricing-editor { padding: 24px; }
.pricing-block { margin-top: 16px; padding: 18px; border: 1px solid var(--line); background: var(--soft-2); }
.pricing-block-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.pricing-block-head > span {
  display: inline-grid; place-items: center; flex: 0 0 24px; height: 24px;
  color: #fff; background: var(--accent); border-radius: 50%; font-size: 12px; font-weight: 650;
}
.pricing-block-head strong { display: block; color: var(--fg); font-size: 14px; }
.pricing-block-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 16px; }
.pricing-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pricing-grid .field { margin: 0; color: #4d4f52; font-weight: 550; }
.pricing-grid .field input, .pricing-grid .field select { margin-top: 5px; font-weight: 400; }
.pricing-grid .field small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 400; }
.pricing-customer-picker input + select { margin-top: 7px; }
.pricing-note { margin-top: 12px; padding: 10px 12px; color: #4d4f52; background: #fff; border-left: 3px solid #a8aaad; font-size: 12px; }
.pricing-example { margin-top: 10px; padding: 12px 14px; color: #3d3f42; background: #f0f7ff; border: 1px solid #bfd9f5; font-size: 13px; }
.pricing-check { display: flex; align-items: center; gap: 9px; min-height: 42px; margin: 0; padding: 8px 10px; color: #3d3f42; background: #fff; border: 1px solid var(--line); }
.pricing-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pricing-save { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.pricing-save span { color: var(--muted); font-size: 12px; }
.pricing-rule-list { display: grid; gap: 10px; }
.pricing-rule-card { padding: 16px; border: 1px solid var(--line); background: #fff; }
.pricing-rule-card.is-disabled { opacity: .62; }
.pricing-rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pricing-rule-title { font-size: 15px; font-weight: 650; }
.pricing-rule-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 14px; border: 1px solid var(--line); }
.pricing-rule-grid > div { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
.pricing-rule-grid > div:last-child { border-right: 0; }
.pricing-rule-grid span, .pricing-rule-grid small { display: block; color: var(--muted); font-size: 11px; }
.pricing-rule-grid strong { display: block; margin: 4px 0; font-size: 13px; overflow-wrap: anywhere; }
.pricing-progress { margin-top: 10px; padding: 9px 11px; color: var(--ok); background: #f0fdf4; border-left: 3px solid #6ee7b7; font-size: 12px; }
.pricing-progress.warn { color: var(--warn); background: #fffbeb; border-left-color: #fbbf24; }
.pricing-risk-actions { display: flex; align-items: end; gap: 10px; margin-top: 10px; padding: 12px; background: var(--soft-2); border: 1px solid var(--line); }
.pricing-risk-actions label { min-width: 260px; margin: 0; font-size: 12px; font-weight: 600; }
.pricing-risk-actions select { margin-top: 5px; }
.pricing-risk-actions small { color: var(--muted); font-size: 11px; }
.pricing-guide { margin-top: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); }
.pricing-guide summary { cursor: pointer; font-weight: 650; }
.pricing-guide ol { margin: 12px 0 8px; padding-left: 22px; color: #3d3f42; font-size: 12px; line-height: 1.8; }
.pricing-guide p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.export-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; background: var(--soft-2); border: 1px solid var(--line); }
.export-summary strong, .export-summary small, .export-supplier-row strong, .export-supplier-row small { display: block; }
.export-summary small, .export-supplier-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.export-supplier-list { margin-top: 10px; border: 1px solid var(--line); }
.export-supplier-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.export-supplier-row:last-child { border-bottom: 0; }
.export-supplier-row .ok-text { color: var(--ok); }
.export-supplier-row .warn-text { color: var(--warn); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: left; vertical-align: top; }
.table th { font-weight: 500; color: var(--muted); background: var(--soft-2); }
.table tbody tr:hover { background: var(--soft-2); }

.badge {
  display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 99px;
  background: var(--soft); color: var(--muted); border: 1px solid var(--line);
}
.badge.ok { background: #ecfdf5; color: var(--ok); border-color: #a7f3d0; }
.badge.warn { background: #fffbeb; color: var(--warn); border-color: #fde68a; }
.badge.bad { background: #fef2f2; color: var(--bad); border-color: #fecaca; }
.badge.dot { padding: 2px 8px 2px 18px; position: relative; }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); }

.status-submitted     { color: var(--muted); }
.status-staff_review  { color: var(--warn); }
.status-quoted        { color: var(--fg); }
.status-pre_confirmed { color: var(--fg); }
.status-matched       { color: var(--fg); }
.status-contracted    { color: var(--warn); }
.status-confirmed     { color: var(--fg); }
.status-dayou_placed  { color: var(--fg); }
.status-fulfilling    { color: var(--fg); }
.status-fulfilled     { color: var(--ok); }
.status-returning     { color: var(--warn); }
.status-refunded      { color: var(--ok); }
.status-returned      { color: var(--ok); }
.status-closed        { color: var(--muted); }
.status-cancelled     { color: var(--bad); }
.progress-awaiting_quote, .progress-awaiting_customer, .progress-awaiting_quote_confirmation, .progress-awaiting_order_confirmation, .progress-processing_confirmation, .progress-awaiting_order { color: var(--warn); }
.progress-partially_ordered, .progress-partially_shipped { color: #9a6700; background: #fff8c5; border-color: #eedb87; }
.progress-ordered, .progress-shipping { color: #0969da; background: #ddf4ff; border-color: #b6d7f2; }
.progress-exception, .progress-cancelled { color: var(--bad); background: #fef2f2; border-color: #fecaca; }
.progress-fulfilled, .progress-returned { color: var(--ok); background: #ecfdf5; border-color: #a7f3d0; }
.progress-after_sales { color: var(--warn); }
.progress-closed { color: var(--muted); }

.empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }

.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: 13px; }
.kv .k { color: var(--muted); }

.candidate {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0;
}
.candidate.selectable { cursor: pointer; }
.candidate.selectable:hover { background: var(--soft-2); border-color: var(--line-strong); }
.candidate.selectable input[type="radio"] { margin: 0 4px 0 0; cursor: pointer; }
.candidate.selectable:has(input:checked) {
  background: #f0f9ff;
  border-color: var(--accent);
}
.candidate.chosen { background: #ecfdf5; border-color: #a7f3d0; }
.candidate .meta { color: var(--muted); font-size: 12px; }

hr.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 8px 16px; background: var(--accent); color: var(--accent-fg);
  border-radius: var(--radius); font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); z-index: 100;
  opacity: 0; transition: opacity .2s;
}
.toast.show { opacity: 1; }
.toast.err { background: var(--bad); }

.login-box { max-width: 360px; margin: 60px auto; }
.login-box h1 { font-size: 18px; margin: 0 0 18px; font-weight: 600; }

.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions button { font-size: 12px; padding: 5px 10px; }


/* 已完成处理的明细行 */
.table tr.done-row td {
  background: #f0fdf4;
  color: var(--muted);
}
.table tr.done-row td.mono { text-decoration: line-through; }


@media (max-width: 640px) {
  .topbar { padding: 12px; gap: 10px; align-items: flex-start; }
  .brand { white-space: nowrap; }
  .me { text-align: right; }
  main { padding: 12px; }
  .card { padding: 14px; overflow-x: auto; }
  .login-box { margin: 24px auto; }
  .tabs { overflow-x: auto; }
  .tabs button { white-space: nowrap; padding: 9px 12px; }
  .table { min-width: 680px; }
  .kv { grid-template-columns: 88px minmax(0, 1fr); }
  .candidate { min-width: 260px; }
  .pricing-editor { padding: 14px; }
  .pricing-grid, .pricing-grid.two, .pricing-rule-grid { grid-template-columns: 1fr; }
  .pricing-rule-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .pricing-rule-grid > div:last-child { border-bottom: 0; }
  .pricing-save, .pricing-rule-head, .pricing-risk-actions, .export-summary { align-items: stretch; flex-direction: column; }
  .pricing-risk-actions label { min-width: 0; }
}

/* V2.1 portal — Tesla-inspired, restrained and task-focused */
:root {
  --bg: #f4f5f6;
  --fg: #171a20;
  --muted: #5c5e62;
  --line: #e2e3e3;
  --line-strong: #c9cacc;
  --accent: #171a20;
  --accent-fg: #ffffff;
  --soft: #f1f2f2;
  --soft-2: #f8f8f8;
  --radius: 4px;
}

.portal { min-height: 100vh; background: var(--bg); }
.portal .topbar {
  height: 64px; padding: 0 28px; border-bottom: 1px solid #ececec;
  box-shadow: none; background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
}
.portal .brand { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .08em; }
.portal .brand small { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .12em; }
.brand-mark {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  color: #fff; background: #171a20; font-weight: 700; letter-spacing: 0;
}
.portal-shell { min-height: calc(100vh - 64px); display: grid; grid-template-columns: 224px minmax(0,1fr); }
.portal-shell:has(.side-nav[hidden]) { grid-template-columns: minmax(0,1fr); }
.side-nav {
  position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px);
  padding: 28px 18px; border-right: 1px solid var(--line); background: #fff;
}
.side-nav[hidden], .page-tools[hidden] { display: none !important; }
.nav-section { margin: 20px 12px 8px; color: #919398; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.nav-section:first-child { margin-top: 0; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 11px; margin: 2px 0; padding: 10px 12px;
  color: #393c41; background: transparent; border: 0; border-radius: 4px; text-align: left;
  font-size: 13px; font-weight: 500;
}
.nav-item:hover { background: #f4f4f4; opacity: 1; }
.nav-item.active { color: #171a20; background: #ebebeb; font-weight: 650; }
.nav-icon { width: 18px; color: #6b6d70; text-align: center; font-size: 14px; }
.nav-badge { margin-left: auto; min-width: 22px; padding: 1px 6px; border-radius: 10px; background: #171a20; color: #fff; font-size: 10px; text-align: center; }
.workspace { min-width: 0; }
.page-tools {
  min-height: 66px; padding: 13px 32px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); background: #fff;
}
.global-search { flex: 1; max-width: 720px; position: relative; }
.global-search span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #777; font-size: 18px; }
.global-search input {
  width: 100%; height: 40px; padding: 8px 14px 8px 42px; border: 1px solid transparent;
  border-radius: 4px; background: #f4f4f4; font-size: 13px;
}
.global-search input:focus { outline: 1px solid #171a20; background: #fff; }
.portal main { max-width: 1480px; margin: 0 auto; padding: 32px; }
.staff-portal main { max-width: none; }
.staff-portal main > .tabs { display: none; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-header h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 560; letter-spacing: -.035em; }
.page-header p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.eyebrow { margin-bottom: 7px; color: #777; font-size: 10px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.hero-panel {
  min-height: 240px; padding: 38px; display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; background: #171a20; border-radius: 4px; overflow: hidden; position: relative;
}
.hero-panel::after {
  content: ""; position: absolute; width: 360px; height: 360px; right: -110px; top: -170px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025);
}
.hero-panel h1 { max-width: 620px; margin: 0; font-size: 32px; font-weight: 520; letter-spacing: -.035em; }
.hero-panel p { max-width: 620px; color: #c8c9cb; }
.hero-actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.hero-panel .light { color: #171a20; background: #fff; border-color: #fff; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 16px 0 24px; }
.metric-card { min-height: 112px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.metric-card:hover { color: #171a20 !important; background: #fff !important; border-color: #9b9da0; }
.metric-card .metric-label { color: var(--muted); font-size: 12px; }
.metric-card .metric-value { margin-top: 12px; font-size: 28px; line-height: 1; font-weight: 520; letter-spacing: -.04em; }
.metric-card .metric-note { margin-top: 10px; color: #898b8f; font-size: 11px; }
.analytics-card { margin-bottom: 16px; }
.analytics-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.analytics-metric { min-height: 112px; padding: 18px 20px; background: #fff; }
.analytics-metric .metric-label { color: var(--muted); font-size: 11px; }
.analytics-metric .metric-value { margin-top: 10px; font-size: 24px; line-height: 1.1; font-weight: 550; letter-spacing: -.035em; }
.analytics-metric .metric-note { margin-top: 9px; color: #898b8f; font-size: 11px; }
.trend-panel { padding: 18px 20px 20px; }
.trend-panel h3 { margin: 0 0 14px; }
.trend-list { display: grid; gap: 10px; }
.trend-row { display: grid; grid-template-columns: 72px minmax(120px,1fr) 130px; gap: 12px; align-items: center; }
.trend-month, .trend-value { color: var(--muted); font-size: 11px; }
.trend-value { text-align: right; }
.trend-track { height: 8px; overflow: hidden; background: #eceeef; border-radius: 99px; }
.trend-bar { display: block; height: 100%; background: #171a20; border-radius: inherit; }
.analytics-table { min-width: 1050px; }
.analytics-table td:first-child { min-width: 150px; }
.content-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,1fr); gap: 16px; }
.portal .card { border-color: var(--line); border-radius: 4px; box-shadow: none; }
.portal .card h2 { font-size: 15px; letter-spacing: -.01em; }
.section-card { padding: 0; overflow: hidden; }
.section-head { min-height: 60px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.section-head h2 { margin: 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-bar input, .filter-bar select { width: auto; min-width: 160px; height: 38px; }
.filter-bar .filter-grow { flex: 1; min-width: 220px; }
.subfilter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 5px; background: #e9eaeb; border-radius: 4px; }
.portal .subfilter-item { min-height: 34px; padding: 7px 14px; color: var(--muted); background: transparent; border-color: transparent; }
.portal .subfilter-item:hover { color: var(--fg); background: rgba(255,255,255,.65); }
.portal .subfilter-item.active { color: var(--fg); background: #fff; border-color: #d5d6d7; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.compact { padding: 7px 12px; font-size: 12px; }
.portal button { min-height: 36px; border-radius: 4px; font-weight: 550; transition: background .16s,color .16s,border .16s; }
.portal button:hover { opacity: 1; background: #303238; }
.portal button.ghost:hover { color: #171a20; background: #eeeeee; }
.portal .table th { height: 42px; padding: 10px 12px; color: #6c6e72; background: #f7f7f7; font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.portal .table td { padding: 13px 12px; }
.portal .table tbody tr { background: #fff; }
.portal .table tbody tr:hover { background: #f7f7f7; }
.order-list-card .section-head small { display: block; margin-top: 3px; font-size: 11px; }
.order-list-body { padding: 0 20px 20px; }
.order-list-body[hidden] { display: none; }
.table-scroll { width: 100%; overflow-x: auto; }
.order-link { padding: 0; min-height: 0 !important; color: #171a20; background: transparent; border: 0; font-weight: 650; }
.order-link:hover { background: transparent !important; text-decoration: underline; }
.quick-list { display: grid; gap: 8px; }
.quick-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.quick-item:last-child { border-bottom: 0; }
.quick-item strong { font-size: 13px; }
.quick-item small { color: var(--muted); }
.order-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.summary-cell { padding: 18px; background: #fff; }
.summary-cell .k { color: var(--muted); font-size: 11px; }
.summary-cell .v { margin-top: 6px; font-size: 18px; font-weight: 550; }
.order-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 16px 0 20px; padding: 16px; border: 1px solid var(--line); background: #fff; }
.progress-step { position: relative; min-width: 0; padding: 0 10px 0 24px; color: var(--muted); }
.progress-step::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line); }
.progress-step:first-child::before { left: 12px; }
.progress-step:last-child::before { right: calc(100% - 12px); }
.progress-dot { position: absolute; z-index: 1; left: 8px; top: 2px; width: 12px; height: 12px; border: 2px solid #b9bbbe; border-radius: 50%; background: #fff; }
.progress-step strong, .progress-step small { display: block; position: relative; margin-top: 20px; overflow-wrap: anywhere; }
.progress-step strong { color: inherit; font-size: 12px; }
.progress-step small { margin-top: 3px; font-size: 10px; }
.progress-step.done { color: var(--ok); }
.progress-step.done::before { background: #86cdb2; }
.progress-step.done .progress-dot { border-color: var(--ok); background: var(--ok); }
.progress-step.current { color: var(--fg); }
.progress-step.current .progress-dot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(17,17,17,.12); }
.detail-tabs { display: flex; gap: 24px; margin: 18px 0; padding: 0 4px; border-bottom: 1px solid var(--line); }
.detail-tab { min-height: 42px !important; padding: 0 2px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0 !important; }
.detail-tab.active { color: #171a20; border-bottom-color: #171a20; }
.detail-tab:disabled { opacity: .35; cursor: not-allowed; }
.quote-quality-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0 16px; padding: 10px; background: #f4f4f4; border: 1px solid var(--line); }
.quote-quality-filter .filter-label { margin: 0 4px; color: var(--muted); font-size: 12px; font-weight: 650; }
.portal .quality-filter-item { min-height: 32px; padding: 6px 14px; color: var(--muted); background: #fff; border-color: var(--line); }
.portal .quality-filter-item.active { color: #fff; background: #171a20; border-color: #171a20; }
.quote-option { cursor: pointer; }
.quote-option:hover { border-color: #9b9da0; }
.quote-option:has(.quote-option-radio:checked) { border-color: #171a20; box-shadow: inset 3px 0 0 #171a20; }
.quote-option-radio { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 3px 0 0; accent-color: #171a20; }
.quality-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; color: #34363a; background: #eceeef; border-radius: 2px; font-size: 11px; font-weight: 650; }
.quality-pill.quality-original { color: #174b2c; background: #e6f3ea; }
.quality-pill.quality-oe { color: #4d3a12; background: #f7efd9; }
.quality-pill.quality-international_brand { color: #273e70; background: #e8eefb; }
.quality-pill.quality-domestic_brand { color: #5a2868; background: #f3e9f6; }
.quality-pill.quality-factory { color: #4b4b4b; background: #ececec; }
.quality-pill.quality-dismantled { color: #762d2d; background: #fae8e8; }
.compact-empty { padding: 10px 12px; text-align: left; }
.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; padding: 0 0 18px 24px; color: var(--muted); font-size: 12px; }
.timeline-item::before { content: ""; position: absolute; left: 5px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #171a20; }
.timeline-item::after { content: ""; position: absolute; left: 8px; top: 14px; bottom: 0; width: 1px; background: var(--line-strong); }
.timeline-item:last-child::after { display: none; }
.search-results { display: grid; gap: 10px; }
.search-result { padding: 16px 18px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.search-result:hover { border-color: #a9aaad; }
.mapping-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(300px,.8fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.mapping-table { min-width: 980px; }
.mapping-table th:last-child,
.mapping-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 104px;
  background: #fff;
  box-shadow: -1px 0 0 var(--line), -12px 0 18px rgba(23,26,32,.08);
}
.mapping-table th:last-child {
  z-index: 3;
  background: var(--soft-2);
}
.mapping-table tbody tr:hover td:last-child { background: #f7f7f7; }
.mapping-table td:last-child .compact { width: 100%; white-space: nowrap; }
.mapping-rule-list { display: grid; padding: 8px; gap: 6px; max-height: 720px; overflow-y: auto; }
.portal .mapping-rule-item { width: 100%; padding: 13px 14px; display: grid; gap: 7px; color: var(--fg); background: #fff; border: 1px solid transparent; text-align: left; }
.portal .mapping-rule-item:hover { color: var(--fg); background: #f5f5f5; border-color: var(--line); }
.mapping-rule-item > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mapping-editor-card { margin-bottom: 16px; padding: 0; overflow: hidden; border-top: 3px solid #171a20 !important; }
.mapping-form { padding: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.mapping-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }
.mapping-form input, .mapping-form select { width: 100%; height: 40px; }
.mapping-form .mapping-wide { grid-column: span 2; }
.mapping-form .mapping-check { display: flex; flex-direction: row; align-items: center; align-self: end; height: 40px; }
.mapping-form .mapping-check input { width: 16px; height: 16px; accent-color: #171a20; }
.mapping-editor-actions { padding: 0 20px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mapping-preview { min-height: 38px; padding: 8px 12px; display: flex; gap: 12px; align-items: center; background: #f3f4f4; border-left: 3px solid #171a20; font-size: 12px; }
.raw-field-summary { padding: 18px 20px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; background: #f5f5f5; border-bottom: 1px solid var(--line); }
.raw-field-item { min-width: 0; display: grid; gap: 5px; }
.raw-field-item small { color: var(--muted); }
.raw-field-item strong { overflow-wrap: anywhere; }
.simple-quality-grid { padding: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.simple-quality-option { position: relative; min-height: 88px; padding: 15px; display: grid; align-content: center; gap: 6px; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.simple-quality-option:hover { border-color: #8b8d91; }
.simple-quality-option.active { color: #fff; background: #171a20; border-color: #171a20; }
.simple-quality-option input { position: absolute; inset: 10px 10px auto auto; width: 16px; height: 16px; accent-color: #171a20; }
.simple-quality-option small { color: var(--muted); font-weight: 400; }
.simple-quality-option.active small { color: #d5d6d8; }
.simple-brand-field { margin: 0 20px 16px; display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
.simple-brand-field input { max-width: 520px; }
.simple-pending-option { margin: 0 20px 18px; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.simple-pending-option input { width: 16px; height: 16px; accent-color: #171a20; }
.mapping-advanced { margin: 0 20px 18px; border: 1px solid var(--line); }
.mapping-advanced summary { padding: 12px 14px; color: var(--muted); background: #fafafa; cursor: pointer; }
.mapping-safety-note { margin: 16px 20px 0; padding: 12px 14px; display: grid; gap: 4px; color: #6a2828; background: #fff0f0; border-left: 3px solid #a33; }
.quality-plan-card { margin-bottom: 16px; }
.quality-plan-intro { padding: 14px 20px; display: flex; gap: 10px; align-items: baseline; background: #f7f7f7; border-bottom: 1px solid var(--line); font-size: 12px; }
.quality-plan-intro span { color: var(--muted); }
.quality-plan-grid { padding: 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.quality-plan-item { min-height: 218px; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-top: 3px solid #7c7e82; }
.quality-plan-item.ready { border-top-color: #2f6f45; }
.quality-plan-item.review { border-top-color: #9a6a19; }
.quality-plan-item-head, .quality-plan-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quality-plan-target { color: #303238; font-size: 12px; font-weight: 650; }
.quality-plan-count { display: flex; align-items: baseline; gap: 7px; }
.quality-plan-count b { font-size: 24px; font-weight: 560; letter-spacing: -.03em; }
.quality-plan-count span { color: var(--muted); font-size: 11px; }
.quality-plan-item p { flex: 1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.login-shell { max-width: 920px; min-height: 560px; margin: 24px auto; display: grid; grid-template-columns: 1.2fr .8fr; background: #fff; border: 1px solid var(--line); }
.login-visual { padding: 48px; color: #fff; background: #171a20; display: flex; flex-direction: column; justify-content: space-between; }
.login-visual h1 { margin: 0; max-width: 420px; font-size: 34px; line-height: 1.15; font-weight: 520; letter-spacing: -.04em; }
.login-panel { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.login-panel h2 { margin: 0 0 24px; font-size: 22px; font-weight: 560; }
.portal .login-box { max-width: 430px; margin: 64px auto; padding: 38px; border-top: 3px solid #171a20; }
.portal .login-box h1 { margin-bottom: 8px; font-size: 24px; font-weight: 560; letter-spacing: -.03em; }
.portal .login-box .muted { line-height: 1.7; }

@media (max-width: 1050px) {
  .portal-shell { grid-template-columns: 188px minmax(0,1fr); }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .mapping-layout { grid-template-columns: 1fr; }
  .mapping-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .raw-field-summary, .simple-quality-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quality-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .order-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .portal .topbar { height: 56px; padding: 0 14px; }
  .portal .brand small { display: none; }
  .portal-shell { display: block; min-height: calc(100vh - 56px); }
  .side-nav { position: sticky; top: 56px; z-index: 8; width: 100%; height: auto; padding: 8px 10px; display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-section { display: none; }
  .nav-item { flex: 0 0 auto; width: auto; padding: 8px 10px; white-space: nowrap; }
  .nav-icon, .nav-badge { display: none; }
  .page-tools { padding: 10px 12px; min-height: 60px; }
  .page-tools .compact { display: none; }
  .portal main { padding: 18px 12px; }
  .subfilter-bar { flex-wrap: nowrap; overflow-x: auto; }
  .portal .subfilter-item { flex: 0 0 auto; white-space: nowrap; }
  .order-list-body { padding: 0 14px 14px; }
  .order-list-card .section-head { padding: 14px; }
  .analytics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-metric { min-height: 100px; padding: 15px 14px; }
  .trend-row { grid-template-columns: 66px minmax(90px,1fr); }
  .trend-value { grid-column: 2; text-align: left; }
  .hero-panel { min-height: 220px; padding: 26px 22px; }
  .hero-panel h1 { font-size: 27px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mapping-form { grid-template-columns: 1fr; }
  .mapping-form .mapping-wide { grid-column: auto; }
  .raw-field-summary, .simple-quality-grid { grid-template-columns: 1fr; }
  .quality-plan-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 96px; padding: 16px; }
  .metric-card .metric-value { font-size: 24px; }
  .order-summary { grid-template-columns: 1fr 1fr; }
  .order-progress { grid-template-columns: 1fr; gap: 0; }
  .progress-step { min-height: 58px; padding-left: 34px; }
  .progress-step::before { left: 15px !important; right: auto !important; top: 0; bottom: 0; width: 2px; height: auto; }
  .progress-dot { left: 10px; top: 5px; }
  .progress-step strong { margin-top: 0; }
  .login-shell { display: block; min-height: 0; margin: 8px 0; }
  .login-visual { min-height: 220px; padding: 28px 24px; }
  .login-visual h1 { font-size: 28px; }
  .login-panel { padding: 30px 24px; }
}

.receipt-shipment-cards { display: none; }
@media (max-width: 700px) {
  .receipt-shipment-table { display: none; }
  .receipt-shipment-cards { display: grid; gap: 12px; margin-top: 12px; }
  .receipt-shipment-card { border: 1px solid var(--line, #e5e7eb); border-radius: 6px; padding: 14px; }
  .receipt-shipment-card .kv { grid-template-columns: 80px minmax(0, 1fr); }
  .receipt-shipment-value { overflow-wrap: anywhere; }
  .receipt-shipment-card button { width: 100%; }
}