/* 下单平台样式，与官网同一套视觉：白、炭黑、中国红，平涂、小圆角、不用阴影和渐变。 */
:root {
  --red: #c8161d;
  --red-dark: #a30f15;
  --red-soft: #fdf2f2;
  --ink: #1f1f1f;
  --text: #4d4d4d;
  --muted: #8c8c8c;
  --line: #e6e6e6;
  --border: #d9d9d9;
  --surface: #fff;
  --canvas: #f5f5f5;
  --amber: #a85d00;
  --amber-bg: #fff6e6;
  --blue: #1f5fae;
  --blue-bg: #eef4fb;
  --green: #1d7a46;
  --green-bg: #ecf7f0;
  --danger: #c8161d;
  --danger-bg: #fdf0f0;
  --radius: 4px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --num: "DIN Alternate", "Bahnschrift", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }

/* Login, register and verify: one centred card on a light grey page */
.auth-body { min-height: 100vh; background: var(--canvas); }
.auth-page { display: flex; min-height: 100vh; padding: 48px 16px; align-items: center; justify-content: center; flex-direction: column; gap: 24px; }
.brand, .auth-brand { display: flex; gap: 10px; align-items: center; }
.brand img, .auth-brand img { flex: none; }
.brand > span, .auth-brand > span { display: flex; line-height: 1.2; flex-direction: column; }
.brand strong, .auth-brand strong { font-size: 18px; letter-spacing: .1em; }
.brand small, .auth-brand small { margin-top: 2px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.auth-card { width: min(100%, 420px); padding: 36px 36px 30px; border: 1px solid var(--line); border-top: 3px solid var(--red); background: #fff; }
.auth-card.register-card { width: min(100%, 520px); }
.auth-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.auth-foot { margin: 0; color: var(--muted); font-size: 13px; }
.auth-foot a:hover { color: var(--red); }
.subtle { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.subtle strong { color: var(--ink); }
.stack-form { display: flex; gap: 18px; flex-direction: column; }
.field-row { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-switch { margin: 22px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.auth-switch a, .link-button { margin-left: 4px; color: var(--red); }
.auth-switch a:hover, .link-button:hover { text-decoration: underline; }
.link-button { padding: 0; border: 0; background: transparent; font-size: 13px; }
.resend-form { margin-top: 16px; text-align: center; }
.code-field input { height: 56px; text-align: center; font-family: var(--num); font-size: 26px; font-weight: 700; letter-spacing: .4em; }

/* Form controls */
.layout-hint { display: block; margin-top: 8px; }
.spec-grid-gap { margin-bottom: 15px; }
.field { display: flex; min-width: 0; gap: 7px; flex-direction: column; }
.field > span, .field > label + span { color: #333; font-size: 13px; font-weight: 600; }
.field em { color: var(--red); font-style: normal; }
.field input, .field select, .field textarea, .search-box input, .role-form select { width: 100%; min-height: 40px; padding: 8px 11px; outline: none; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-size: 14px; transition: border-color .15s; }
.field textarea { line-height: 1.65; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #bfbfbf; }
.field input:focus, .field select:focus, .field textarea:focus, .search-box input:focus { border-color: var(--red); }
.field input::placeholder, .field textarea::placeholder { color: #b3b3b3; }
.field.invalid input, .field.invalid select, .field.invalid textarea, .upload-box.invalid { border-color: var(--red); }
.field-error { color: var(--red); font-size: 12px; line-height: 1.4; }
.field-error.block { display: block; margin-top: 8px; }
/* Administrator-only pricing controls. Units remain visible beside each amount. */
.pricing-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; color: var(--muted); font-size: 13px; }
.pricing-form { display: grid; gap: 16px; }
.curve-editor { padding: 0 20px 20px; }
.curve-editor > .pricing-help { margin: 16px 0; }
.curve-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.curve-toolbar select { width: 100%; min-height: 40px; padding: 8px; border: 1px solid var(--border); background: #fff; }
.curve-mode-note { margin: 14px 0; padding: 10px 14px; background: #faf6ee; color: #7d5b20; font-size: 13px; }
.curve-chart-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.curve-chart { display: block; width: 100%; min-width: 640px; }
.curve-canvas { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.curve-workbench { margin-top: 14px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.curve-workbench .curve-canvas { border: 0; border-radius: 0; }
.curve-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fafafa; }
.curve-tabs [role="tab"] { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 10px 14px; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; }
.curve-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--red); color: var(--red); background: #fff; font-weight: 600; }
.curve-tabs [role="tab"]:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.curve-tabs [data-curve-restore] { margin-left: auto; }
.curve-discount-note { margin: 0; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.curve-canvas > .curve-chart-scroll { border: 0; border-radius: 0 0 4px 4px; }
.curve-canvas > .curve-actions { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fafafa; }
.curve-canvas-error { margin: 10px 12px; }
[data-curve-chart] { touch-action: manipulation; }
[data-curve-chart]:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.curve-grid { stroke: #ececec; stroke-width: 1; }
.curve-axis-text { fill: #777; font-size: 12px; }
.curve-main-path { fill: none; stroke: var(--red); stroke-width: 2.5; }
.curve-selected-path { fill: none; stroke: #2876b9; stroke-width: 2; stroke-dasharray: 5 4; }
.curve-grab { fill: transparent; cursor: grab; touch-action: none; }
.curve-grab:focus { outline: none; fill: #c8161d12; stroke: var(--red); stroke-width: 1; }
.curve-dot { fill: #fff; stroke: var(--red); stroke-width: 2; }
.curve-node.selected .curve-dot { fill: var(--red); }
.curve-node-tooltip { pointer-events: none; }
.curve-tooltip-card { width: 100%; padding: .65em; border: 1px solid var(--red); border-radius: 4px; background: #fff; color: var(--text); font-family: var(--font); font-size: inherit; line-height: 1.4; }
.curve-touch-tooltip { padding-top: 8px; overflow-x: auto; font-size: 12px; }
.curve-tooltip-quantity { display: block; margin-bottom: .35em; color: var(--ink); }
.curve-tooltip-edit-price { display: flex; justify-content: space-between; gap: .5em; color: var(--red); }
.curve-tooltip-edit-price strong { font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.curve-tooltip-notice { margin: .4em 0 0; color: var(--muted); }
.curve-tooltip-table { width: 100%; margin-top: .5em; border-collapse: collapse; font-size: inherit; }
.curve-tooltip-table th, .curve-tooltip-table td { padding: .35em .25em; border-bottom: 1px solid var(--line); vertical-align: middle; }
.curve-tooltip-table thead { background: #f7f7f7; color: var(--muted); }
.curve-tooltip-table thead th { font-weight: 500; text-align: right; white-space: nowrap; }
.curve-tooltip-table th:first-child { padding-left: 0; padding-right: .5em; text-align: left; }
.curve-tooltip-table tbody th { font-weight: 400; overflow-wrap: anywhere; }
.curve-tooltip-table td { font-family: var(--num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.curve-tooltip-table th:last-child, .curve-tooltip-table td:last-child { padding-right: 0; }
.curve-tooltip-table tbody tr:last-child > * { border-bottom: 0; }
.curve-node-tooltip-total { font-weight: 600; }
.curve-tooltip-series-1 { color: #c8161d; }.curve-tooltip-series-2 { color: #cf8610; }.curve-tooltip-series-3 { color: #2876b9; }
.curve-tooltip-series-4 { color: #188c66; }.curve-tooltip-series-5 { color: #8c55aa; }
.curve-legend, .curve-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin: 14px 0; font-size: 12px; }
.curve-legend span { display: inline-flex; align-items: center; gap: 6px; }
.curve-legend i { width: 20px; height: 2px; background: var(--red); }
.curve-legend .curve-preview-line { background: #2876b9; }
.curve-legend small, .curve-actions small { color: var(--muted); }
.curve-chart-area { position: relative; }
.curve-on-chart-controls { position: absolute; z-index: 2; top: 8px; right: 10px; display: flex; gap: 8px; width: 268px; max-width: calc(100% - 78px); padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fffefa; }
.curve-on-chart-controls label { display: grid; gap: 3px; min-width: 0; flex: 1; color: var(--muted); font-size: 11px; }
.curve-on-chart-controls input, .curve-on-chart-controls select { width: 100%; min-width: 0; height: 28px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 2px; background: #fff; color: var(--text); font-size: 12px; }
.curve-on-chart-controls input:focus { border-color: var(--red); outline: 1px solid var(--red); }
.curve-anchor-controls { width: 360px; }
.curve-adjustment-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fafafa; font-size: 12px; }
.curve-adjustment-toolbar > label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.curve-adjustment-toolbar select, .curve-adjustment-toolbar input { padding: 5px 8px; border: 1px solid var(--border); background: #fff; }
.curve-adjustment-toolbar input { width: 110px; min-width: 0; }
.curve-adjustment-toolbar small { color: var(--muted); }
.curve-anchor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.curve-generated-points { opacity: .28; }
.curve-anchor-handle { fill: transparent; cursor: ns-resize; touch-action: none; }
.curve-anchor-mark { fill: #fff; stroke: var(--red); stroke-width: 2; pointer-events: none; }
.curve-anchor.selected .curve-anchor-mark { fill: var(--red); }
.curve-anchor-rate .curve-anchor-mark { stroke: #2876b9; }
.curve-anchor-rate.selected .curve-anchor-mark { fill: #2876b9; }
.curve-anchor-handle:focus { outline: none; stroke: var(--red); stroke-width: 1; }
.curve-node.fixed .curve-grab { cursor: ns-resize; }
.curve-discount-path { fill: none; stroke: #2876b9; stroke-width: 2.5; }
.curve-discount-node .curve-dot { stroke: #2876b9; }
.curve-discount-node .curve-grab { cursor: ns-resize; }
.curve-discount-node.locked .curve-grab { cursor: default; }
.curve-discount-node.selected .curve-dot { fill: #2876b9; }
.curve-generated-points .curve-node .curve-grab, .curve-generated-points .curve-discount-node .curve-grab { cursor: default; touch-action: auto; }
.curve-discount-readout { color: #2876b9; font-size: 12px; }
.curve-scheme-summary { margin: 0; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.curve-summary-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.curve-summary-heading h4 { margin: 0; font-size: 13px; }
.curve-summary-heading > span { color: var(--red); font-size: 12px; font-variant-numeric: tabular-nums; }
.curve-summary-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-left: auto; }
.curve-summary-controls label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; white-space: nowrap; }
.curve-summary-controls select { max-width: 160px; min-height: 30px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 3px; background: #fff; font-size: 12px; }
.curve-summary-controls select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.curve-scheme-summary > p { margin: 5px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.curve-preview-config { margin: 8px 0; padding: 9px; border: 1px solid var(--line); border-radius: 3px; background: #fafafa; }
.curve-preview-config-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 7px; font-size: 12px; }
.curve-preview-config-heading small { color: var(--muted); font-size: 11px; }
.curve-preview-config-heading .button { padding: 3px 7px; min-height: 26px; font-size: 11px; }
.curve-preview-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 7px 10px; }
.curve-preview-config-grid label { display: grid; min-width: 0; gap: 3px; font-size: 11px; color: var(--text); }
.curve-preview-config-grid input, .curve-preview-config-grid select { width: 100%; min-width: 0; min-height: 30px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; background: #fff; }
.curve-preview-config-grid :disabled { color: var(--muted); background: #f0f0f0; }
.curve-preview-config-grid input:focus-visible, .curve-preview-config-grid select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.curve-preview-config-grid[data-preview-group="adapter"] { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.curve-preview-extra { margin-top: 8px; font-size: 11px; }
.curve-preview-extra > summary { color: var(--blue); cursor: pointer; }
.curve-preview-extra .curve-preview-config-grid { margin-top: 7px; }
.curve-preview-config-help, .curve-preview-basis { margin: 6px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.curve-preview-basis { color: var(--text); }
.curve-scheme-summary .curve-summary-status.error { color: var(--red); }
.curve-summary-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; }
.curve-summary-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.curve-summary-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.35; }
.curve-summary-table th, .curve-summary-table td { padding: 5px 7px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.curve-summary-table thead th { padding-top: 7px; padding-bottom: 7px; color: var(--text); font-size: 11px; font-weight: 500; background: #f7f7f7; }
.curve-summary-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; text-align: left; background: #fff; }
.curve-summary-table thead th:first-child { background: #f7f7f7; }
.curve-summary-table tbody tr:nth-child(even) > * { background: #fafafa; }
.curve-summary-table tbody tr.selected > * { background: var(--red-soft); }
.curve-summary-table tbody tr:last-child > * { border-bottom: 0; }
.curve-summary-scheme { padding: 0; border: 0; background: transparent; font-size: inherit; font-weight: 500; line-height: 1.4; text-align: left; white-space: nowrap; }
.curve-summary-scheme:hover, .curve-summary-scheme[aria-pressed="true"] { color: var(--red); }
.curve-summary-scheme:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.curve-summary-inspect { display: block; margin-top: 2px; padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 10px; font-weight: 400; line-height: 1.3; }
.curve-summary-inspect:hover { text-decoration: underline; }
.curve-summary-inspect:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.curve-summary-total, .curve-summary-per-set { display: block; font-family: var(--num); font-variant-numeric: tabular-nums; }
.curve-summary-total { color: var(--ink); }
.curve-summary-profit .curve-summary-total { font-weight: 600; }
.curve-summary-per-set { margin-top: 1px; color: #707070; font-size: 10px; }
.curve-scheme-summary[aria-busy="true"] tbody { opacity: .45; }
.curve-calculation { margin-top: 10px; border: 1px solid var(--line); border-radius: 3px; }
.curve-calculation > summary { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px; cursor: pointer; font-size: 12px; background: #fafafa; scroll-margin-top: 76px; }
.curve-calculation > summary span { color: var(--muted); }
.curve-calculation > summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.curve-calculation-status, .curve-calculation-basis { margin: 8px 10px; color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.curve-calculation-status.error { color: var(--red); }
.curve-calculation-notes, .curve-calculation-warnings { margin: 8px 10px; padding-left: 18px; font-size: 11px; line-height: 1.7; }
.curve-calculation-notes { color: var(--text); }
.curve-calculation-warnings { color: var(--amber); }
.curve-calculation-scroll { max-width: 100%; overflow-x: auto; }
.curve-calculation-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.curve-calculation-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 12px; line-height: 1.5; }
.curve-calculation-table th, .curve-calculation-table td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.curve-calculation-table th { text-align: left; font-weight: 500; }
.curve-calculation-table thead { background: #f7f7f7; color: var(--text); font-size: 11px; }
.curve-calculation-table thead th:nth-last-child(-n+2) { text-align: right; white-space: nowrap; }
.curve-calculation-table .curve-calculation-formula { width: 55%; min-width: 280px; color: var(--text); font-size: 11px; overflow-wrap: anywhere; }
.curve-calculation-amount { text-align: right; white-space: nowrap; font-family: var(--num); font-variant-numeric: tabular-nums; }
.curve-calculation-table tfoot { background: #fafafa; }
.curve-calculation-emphasis .curve-calculation-amount { color: var(--red); font-weight: 600; }
.curve-calculation-bom { margin: 10px; border: 1px solid var(--line); border-radius: 3px; }
.curve-calculation-bom > summary { padding: 8px; cursor: pointer; font-size: 11px; background: #fafafa; }
.curve-calculation-parts { min-width: 720px; font-size: 11px; }
.curve-calculation-parts thead th:not(:first-child) { text-align: right; white-space: nowrap; }
.curve-comparison-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; padding: 10px; }
.curve-comparison-controls > label { display: grid; min-width: 0; gap: 4px; font-size: 12px; }
.curve-comparison-controls select { min-height: 32px; max-width: 220px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 3px; background: #fff; font-size: 12px; }
.curve-comparison-controls select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.curve-comparison-controls > .curve-comparison-filter { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
.curve-comparison-filter input { accent-color: var(--red); }
.curve-comparison-conclusion { margin: 0 10px 10px; color: var(--red); font-size: 12px; line-height: 1.7; }
.curve-comparison-table { min-width: 820px; }
.curve-comparison-table th:first-child { min-width: 120px; }
.curve-comparison-table thead th:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.curve-comparison-table thead th:last-child { text-align: left; white-space: normal; }
.curve-comparison-money { text-align: right; white-space: nowrap; }
.curve-comparison-table .curve-summary-total { font-size: 12px; }
.curve-comparison-table .curve-summary-per-set { font-size: 10px; }
.curve-comparison-table .difference-positive .curve-summary-total { color: var(--red); }
.curve-comparison-table .difference-negative .curve-summary-total { color: var(--green); }
.curve-comparison-table .difference-zero .curve-summary-total { color: var(--muted); }
.curve-comparison-explanation { width: 40%; min-width: 250px; color: var(--text); font-size: 11px; }
.curve-comparison-explanation > p { margin: 0 0 4px; }
.curve-comparison-explanation summary { color: var(--blue); cursor: pointer; }
.curve-comparison-explanation strong { display: block; margin-top: 6px; font-size: 11px; }
.curve-comparison-explanation ul { margin: 4px 0; padding-left: 16px; overflow-wrap: anywhere; }
.curve-comparison-empty { padding: 12px; color: var(--muted); font-size: 12px; }
.curve-comparison-part-side { min-width: 150px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.curve-comparison-part-side small { display: block; margin-top: 2px; font-size: 10px; color: var(--text); }
.curve-series-line { fill: none; stroke-width: 2; }
.curve-series-0 { stroke: #737373; }.curve-series-1 { stroke: #c8161d; }.curve-series-2 { stroke: #cf8610; }
.curve-series-3 { stroke: #2876b9; }.curve-series-4 { stroke: #188c66; }.curve-series-5 { stroke: #8c55aa; }
.curve-legend .curve-series-0 { background: #737373; }.curve-legend .curve-series-1 { background: #c8161d; }.curve-legend .curve-series-2 { background: #cf8610; }
.curve-legend .curve-series-3 { background: #2876b9; }.curve-legend .curve-series-4 { background: #188c66; }.curve-legend .curve-series-5 { background: #8c55aa; }
.curve-financial-marker { stroke: #aaa; stroke-width: 1; stroke-dasharray: 4 4; }
.curve-financial-legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.curve-financial-legend input { margin: 0; accent-color: var(--red); }
.curve-financial-legend .curve-series-off { opacity: .45; }
.curve-financial-dot { stroke: #fff; stroke-width: 1; }
.curve-financial-dot.curve-series-0 { fill: #737373; }.curve-financial-dot.curve-series-1 { fill: #c8161d; }.curve-financial-dot.curve-series-2 { fill: #cf8610; }
.curve-financial-dot.curve-series-3 { fill: #2876b9; }.curve-financial-dot.curve-series-4 { fill: #188c66; }.curve-financial-dot.curve-series-5 { fill: #8c55aa; }
.pricing-legacy { margin: 16px 20px; }
.pricing-legacy > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .curve-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .curve-editor { padding: 0 16px 16px; }
  .curve-summary-controls { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .curve-summary-controls label { display: grid; gap: 4px; min-width: 0; }
  .curve-summary-controls select { width: 100%; max-width: none; min-width: 0; }
  .curve-comparison-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curve-comparison-controls select { width: 100%; max-width: none; min-width: 0; }
}
.pricing-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; cursor: pointer; }
.pricing-group > summary strong { font-size: 16px; }
.pricing-group > summary span { color: var(--muted); font-size: 12px; }
.pricing-group[open] > summary { border-bottom: 1px solid var(--line); }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; padding: 20px; }
.pricing-input { display: flex; align-items: center; gap: 10px; }
.pricing-input input { min-width: 0; }
.pricing-input small { min-width: 84px; flex: none; color: var(--muted); font-size: 12px; }
.pricing-help { padding: 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pricing-save { padding: 20px; }
.pricing-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.pricing-actions p { margin: 0; color: var(--muted); font-size: 13px; }
.pricing-history { margin-top: 24px; }
.pricing-revision { padding: 16px 20px; border-top: 1px solid var(--line); }
.pricing-revision summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 13px; }
.pricing-revision summary span, .pricing-revision p, .pricing-revision small { color: var(--muted); font-size: 12px; }
.pricing-revision ul { padding: 0; list-style: none; }
.pricing-revision li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pricing-group > summary, .pricing-save, .pricing-revision { padding: 16px; }
  .pricing-revision summary span { overflow-wrap: anywhere; }
}
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Buttons */
.button { display: inline-flex; min-height: 40px; padding: 8px 18px; border: 1px solid transparent; border-radius: 2px; align-items: center; justify-content: center; gap: 8px; font-size: 14px; transition: background-color .15s, border-color .15s, color .15s; }
.button.primary { color: #fff; background: var(--red); }
.button.primary:hover { background: var(--red-dark); }
.button.secondary { color: var(--ink); border-color: var(--border); background: #fff; }
.button.secondary:hover { color: var(--red); border-color: var(--red); }
.button.success { color: #fff; background: var(--green); }
.button.success:hover { background: #16623a; }
.button.danger { color: #fff; background: var(--red); }
.button.ghost { color: var(--text); border-color: var(--border); background: #fff; }
.button.ghost:hover { color: var(--red); border-color: var(--red); }
.button.danger.ghost { color: var(--red); border-color: #efbcbe; background: #fff; }
.button.danger.ghost:hover { border-color: var(--red); background: var(--red-soft); }
.button.wide { width: 100%; }
.button.small { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.button.tiny { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:disabled { cursor: not-allowed; opacity: .45; }

/* Notices */
.alert { display: flex; gap: 10px; margin: 0 0 20px; padding: 11px 14px; border: 1px solid; border-radius: var(--radius); align-items: flex-start; font-size: 13px; line-height: 1.55; }
.alert span { display: grid; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; place-items: center; font-size: 11px; font-weight: 700; }
.alert.success { color: #1d5c37; border-color: #c7e6d3; background: var(--green-bg); }.alert.success span { color: #fff; background: var(--green); }
.alert.danger { color: #8f1a1f; border-color: #f2c6c8; background: var(--danger-bg); }.alert.danger span { color: #fff; background: var(--red); }

/* App shell: light sidebar and white top bar, like the company website */
.app-body { min-width: 320px; background: var(--canvas); }
.app-shell { display: grid; min-height: 100vh; grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: 220px; padding: 20px 0 18px; flex-direction: column; border-right: 1px solid var(--line); background: #fff; }
.sidebar .brand { padding: 0 20px 20px; border-bottom: 1px solid var(--line); }
.side-nav { display: flex; padding-top: 8px; flex-direction: column; }
.side-nav a { position: relative; display: flex; min-height: 42px; padding: 0 20px; align-items: center; gap: 10px; color: #333; font-size: 14px; transition: background-color .15s, color .15s; }
.side-nav a:hover { color: var(--red); background: #fafafa; }
.side-nav a.active { color: var(--red); background: var(--red-soft); font-weight: 600; }
.side-nav a.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--red); }
.side-nav svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side-nav a:first-child svg { fill: currentColor; stroke: none; }
.nav-label { margin: 18px 20px 6px; color: var(--muted); font-size: 12px; }
.sidebar-foot { display: grid; margin-top: auto; padding: 16px 16px 0; border-top: 1px solid var(--line); align-items: center; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
.sidebar-guest { display: flex; margin-top: auto; padding: 16px 20px 0; border-top: 1px solid var(--line); flex-direction: column; gap: 8px; }
.sidebar-guest p { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guest-quote-banner { margin-bottom: 20px; }
.user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; color: #fff; border-radius: 50%; place-items: center; background: var(--ink); font-size: 14px; font-weight: 600; }
.user-avatar.small { width: 30px; height: 30px; font-size: 12px; }
.user-summary { display: flex; min-width: 0; flex-direction: column; }.user-summary strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.user-summary small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.icon-button, .menu-button { display: grid; width: 32px; height: 32px; padding: 0; color: var(--muted); border: 0; border-radius: 2px; place-items: center; background: transparent; }.icon-button:hover { color: var(--red); background: #f5f5f5; }.icon-button svg, .menu-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.main-area { min-width: 0; grid-column: 2; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; height: 60px; padding: 0 clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; background: #fff; }
.topbar-title { display: flex; min-width: 0; align-items: baseline; gap: 12px; }.topbar-title span { font-size: 15px; font-weight: 600; }.topbar-title small { color: var(--muted); font-size: 12px; }
.menu-button { display: none; color: var(--ink); }
.page-content { width: min(100%, 1440px); min-height: calc(100vh - 110px); margin: 0 auto; padding: 28px clamp(20px, 3vw, 40px) 48px; }
.site-footer { padding: 0 32px 20px; color: #b3b3b3; text-align: center; font-size: 12px; }

/* Page headings */
.page-heading { margin-bottom: 22px; }.page-heading h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }.page-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.heading-with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.back-link { display: inline-flex; margin-bottom: 14px; color: var(--muted); font-size: 13px; }.back-link:hover { color: var(--red); }

/* Dashboard figures */
.metrics-grid { display: grid; margin-bottom: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.metric-card > div { display: flex; flex-direction: column; }
.metric-card span { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 13px; }
.metric-card span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.metric-card strong { margin-top: 10px; font-family: var(--num); font-size: 32px; font-weight: 700; line-height: 1; }
.metric-card small { margin-top: 8px; color: var(--muted); font-size: 12px; }
.metric-card.accent span::before { background: var(--ink); }.metric-card.warning span::before { background: var(--amber); }.metric-card.info span::before { background: var(--blue); }.metric-card.success span::before { background: var(--green); }

/* Panels and tables */
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.panel-head { display: flex; min-height: 60px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; gap: 20px; }.panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; }.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.text-link { color: var(--red); font-size: 13px; }.text-link:hover { text-decoration: underline; }.text-link span { margin-left: 3px; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.data-table th { padding: 11px 16px; color: var(--muted); border-bottom: 1px solid var(--line); text-align: left; background: #fafafa; font-size: 13px; font-weight: 500; }.data-table td { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; font-size: 13px; }.data-table tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: #fafafa; }
.order-title { display: flex; min-width: 155px; flex-direction: column; gap: 3px; }.order-title strong { color: var(--red); font-size: 12px; font-weight: 500; }.order-title span { max-width: 220px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; }.order-title:hover span { color: var(--red); }
.cell-secondary, .customer-name, .quote-type { display: block; }.cell-secondary { color: var(--muted); font-size: 12px; }.customer-name { margin-bottom: 3px; font-size: 13px; }.spec-summary { color: var(--text); }.quote-type { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.status-badge { display: inline-flex; padding: 3px 8px; border-radius: 2px; align-items: center; gap: 6px; font-size: 12px; }.status-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.status-badge.large { padding: 6px 12px; font-size: 13px; }.status-badge.warning { color: var(--amber); background: var(--amber-bg); }.status-badge.info { color: var(--blue); background: var(--blue-bg); }.status-badge.success { color: var(--green); background: var(--green-bg); }.status-badge.danger { color: var(--danger); background: var(--danger-bg); }.status-badge.muted { color: #666; background: #f0f0f0; }
.row-arrow { display: grid; width: 28px; height: 28px; color: var(--muted); border: 1px solid var(--border); border-radius: 2px; place-items: center; }.row-arrow:hover { color: var(--red); border-color: var(--red); }
.empty-state { display: flex; min-height: 300px; padding: 40px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }.empty-state.compact { min-height: 220px; }.empty-state h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }.empty-state p { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.help-strip { display: flex; margin-top: 20px; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius); align-items: center; justify-content: space-between; gap: 20px; background: #fff; }.help-strip strong { font-size: 14px; }.help-strip p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }.help-strip a { color: var(--red); font-size: 13px; white-space: nowrap; }

.filter-panel { margin-bottom: 16px; }.filter-form { display: flex; padding: 16px; align-items: center; gap: 10px; }.search-box { position: relative; flex: 1; }.search-box svg { position: absolute; z-index: 1; top: 50%; left: 12px; width: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; transform: translateY(-50%); }.search-box input { padding-left: 36px; }.select-wrap select { min-width: 140px; height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-size: 14px; }
.info-banner { display: flex; margin-bottom: 20px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius); align-items: flex-start; gap: 12px; background: #fff; }.info-banner svg { width: 18px; margin-top: 2px; flex: 0 0 auto; fill: none; stroke: var(--red); stroke-width: 1.8; }.info-banner strong { font-size: 14px; }.info-banner p { margin: 4px 0 0; color: var(--text); font-size: 13px; line-height: 1.6; }
.account-cell { display: flex; align-items: center; gap: 10px; }.account-cell > div { display: flex; min-width: 0; flex-direction: column; }.account-cell strong { font-size: 13px; }.account-cell span:not(.user-avatar) { max-width: 230px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; }
.role-form { display: flex; align-items: center; gap: 7px; }.role-form select { width: 96px; min-height: 30px; padding: 4px 6px; font-size: 12px; }.role-pill { display: inline-flex; padding: 3px 8px; color: var(--red); border-radius: 2px; background: var(--red-soft); font-size: 12px; }
.account-role-form { width: 220px; align-items: stretch; flex-direction: column; gap: 10px; }
.account-role-form select { width: 100%; }
.account-setting-email { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.account-role-form > button { align-self: flex-end; }
.account-history { margin-top: 24px; }
.account-change { padding: 16px 20px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.account-change > strong, .account-change p { font-size: 13px; }
.account-change p { margin: 8px 0; }
.account-change small { color: var(--muted); font-size: 12px; }

/* Order form */
.order-form-heading { margin-bottom: 20px; }.heading-with-step { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.step-indicator { position: relative; display: grid; width: 300px; margin-bottom: 22px; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; }.step-indicator span { display: grid; width: 24px; height: 24px; color: var(--muted); border: 1px solid var(--border); border-radius: 50%; place-items: center; background: #fff; font-family: var(--num); font-size: 12px; }.step-indicator span.active { color: #fff; border-color: var(--red); background: var(--red); }.step-indicator i { height: 1px; background: var(--border); }.step-indicator small { position: absolute; right: -14px; top: 32px; color: var(--muted); font-size: 12px; white-space: pre; }
.order-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 20px; }.form-column { display: flex; gap: 16px; flex-direction: column; }
.form-section { padding: 22px 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.section-title { display: flex; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); align-items: baseline; gap: 10px; }.section-title > span { color: var(--red); font-family: var(--num); font-size: 18px; font-weight: 700; }.section-title > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }.section-title h2 { margin: 0; font-size: 16px; font-weight: 600; }.section-title p { margin: 0; color: var(--muted); font-size: 12px; }
/* Order form: one row per item with the label on the left and every choice laid out as a button, like a PCB fab's order page */
.form-section .section-title { margin-bottom: 6px; }
.section-tag { padding: 1px 6px; color: #fff; border-radius: 2px; background: var(--red); font-size: 11px; font-weight: 600; }
.opt-group { margin: 14px 0 2px; padding: 6px 12px; border-left: 3px solid var(--red); background: #f7f7f7; font-size: 13px; font-weight: 600; }
.opt-row { display: grid; padding: 8px 0; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
.opt-row + .opt-row { border-top: 1px dashed #efefef; }
.opt-label { padding-top: 6px; color: var(--text); text-align: right; font-size: 13px; line-height: 1.4; }
.opt-label em { color: var(--red); font-style: normal; }
.opt-label small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.opt-body { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; align-items: center; }
.opt-body.stack { align-items: stretch; flex-direction: column; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt input + span { position: relative; display: inline-flex; height: 30px; padding: 0 16px 0 12px; align-items: center; gap: 6px; overflow: hidden; border: 1px solid var(--border); border-radius: 2px; background: #fff; cursor: pointer; font-size: 13px; white-space: nowrap; transition: border-color .12s, color .12s; }
.opt:hover input + span { border-color: var(--red); }
.opt input:checked + span { color: var(--red); border-color: var(--red); }
.opt input:checked + span::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; background: linear-gradient(135deg, transparent 50%, var(--red) 50%); }
.opt input:checked + span::before { content: ""; position: absolute; z-index: 1; right: 1px; bottom: 3px; width: 4px; height: 2px; border-bottom: 1.5px solid #fff; border-left: 1.5px solid #fff; transform: rotate(-45deg); }
.opt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.opt input:disabled + span { cursor: not-allowed; opacity: .45; }
.opt-row.invalid .opt input + span { border-color: #efbcbe; }
.opt-tooltip { position: absolute; z-index: 25; bottom: calc(100% + 8px); left: 0; display: none; min-width: 180px; max-width: 280px; padding: 8px 10px; color: #fff; border-radius: 3px; background: #333; box-shadow: 0 4px 12px rgba(0,0,0,.15); font-size: 12px; line-height: 1.6; }
.has-tooltip:hover .opt-tooltip, .has-tooltip:focus-within .opt-tooltip { display: block; }
/* Effect photo shown above an option on hover, e.g. OSP vs ENIG pads */
.opt-preview { position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 0; display: none; padding: 4px; border: 1px solid var(--line); background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.opt-preview img { display: block; width: 180px; height: 180px; object-fit: cover; }
.opt-preview small { display: block; padding: 5px 2px 1px; color: var(--muted); font-size: 12px; text-align: center; }
.opt:hover .opt-preview, .opt input:focus-visible ~ .opt-preview { display: block; }
.opt.has-preview input + span { text-decoration: underline dotted #bfbfbf; text-underline-offset: 4px; }
.opt-hint { margin-left: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.opt-body.stack .opt-hint { margin-left: 0; }
.opt-control { width: 100%; max-width: 360px; min-height: 32px; padding: 5px 10px; outline: none; border: 1px solid var(--border); border-radius: 2px; background: #fff; font-size: 13px; transition: border-color .15s; }
.opt-control:hover { border-color: #bfbfbf; }.opt-control:focus { border-color: var(--red); }.opt-control::placeholder { color: #b3b3b3; }
textarea.opt-control { max-width: none; line-height: 1.6; resize: vertical; }
.opt-control.short { width: 96px; }.opt-control.short-select { width: 150px; }
.opt-control.upper { text-transform: uppercase; }
.opt-row.invalid .opt-control { border-color: var(--red); }
.opt-unit { color: var(--muted); font-size: 13px; }
.scheme-groups { display: flex; gap: 8px; flex-direction: column; }
.scheme-group { display: flex; align-items: center; gap: 10px; }
.scheme-group-name { width: 52px; flex: none; color: var(--muted); font-size: 12px; }
.ref-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; }
.opt-body > .ref-links { min-height: 30px; align-items: center; }
.ref-links a { position: relative; color: var(--red); }.ref-links a:hover { text-decoration: underline; }
.ref-links a:hover .opt-preview, .ref-links a:focus-visible .opt-preview { display: block; }
.ref-links .opt-preview img { width: 240px; height: auto; }
/* Quantity: sample buttons plus a batch-size popover laid out like a PCB fab's quantity picker */
.qty-picker { position: relative; }
.qty-picker > summary { position: relative; display: inline-flex; height: 30px; padding: 0 30px 0 12px; align-items: center; border: 1px solid var(--border); border-radius: 2px; background: #fff; cursor: pointer; font-size: 13px; white-space: nowrap; list-style: none; }
.qty-picker > summary::-webkit-details-marker { display: none; }
.qty-picker > summary::after { content: ""; position: absolute; top: 10px; right: 11px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.qty-picker[open] > summary::after { top: 13px; transform: rotate(-135deg); }
.qty-picker > summary:hover, .qty-picker[open] > summary { border-color: var(--red); }
.qty-picker:has(input:checked) > summary { color: var(--red); border-color: var(--red); }
.qty-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(472px, calc(100vw - 48px)); padding: 12px; border: 1px solid var(--line); background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.qty-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.qty-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.qty-custom .opt-control { width: 140px; }
.qty-grid .opt input + span { width: 100%; padding: 0 4px; justify-content: center; }
/* Delivery date: one row per lead time with a native radio, like a fab's lead-time table */
.lead-list { display: flex; max-width: 520px; flex-direction: column; border: 1px solid var(--line); border-radius: 2px; }
.lead-option { display: grid; padding: 9px 12px; grid-template-columns: 18px 48px minmax(0, 1fr); align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.lead-option + .lead-option { border-top: 1px solid var(--line); }
.lead-option input { margin: 0; accent-color: var(--red); }
.lead-option b { font-weight: 600; }
.lead-option > span { color: var(--text); }
.lead-option:has(input:checked) { background: var(--red-soft); }
.section-note { margin: 12px 0 4px; padding: 9px 12px; color: var(--text); border-radius: var(--radius); background: #fafafa; font-size: 12px; line-height: 1.6; }
.upload-box.compact { min-height: 0; padding: 9px 12px; }.upload-box.compact .upload-icon { width: 30px; height: 30px; }
.swatch { width: 12px; height: 12px; flex: none; border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px; }
.swatch-black { background: #1f1f1f; }.swatch-white { background: #fff; }.swatch-green { background: #1e7a3d; }.swatch-blue { background: #1f4fa3; }.swatch-red { background: #c0262d; }.swatch-yellow { background: #e2b100; }.swatch-purple { background: #6a3d9a; }
.money-input { position: relative; }.money-input i { position: absolute; z-index: 1; top: 50%; left: 12px; color: var(--muted); font-style: normal; transform: translateY(-50%); }.money-input input { padding-left: 28px; font-family: var(--num); font-size: 17px; font-weight: 700; }
.upload-box { display: flex; min-height: 76px; padding: 14px; cursor: pointer; border: 1px dashed #c4c4c4; border-radius: var(--radius); align-items: center; gap: 14px; background: #fafafa; transition: border-color .15s, background-color .15s; }.upload-box:hover, .upload-box.has-files { border-color: var(--red); background: var(--red-soft); }.upload-box input { position: absolute; width: 1px; height: 1px; opacity: 0; }.upload-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); place-items: center; background: #fff; font-size: 11px; font-weight: 700; }.upload-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.upload-box > span:nth-of-type(2) { display: flex; flex-direction: column; }.upload-box strong { font-size: 13px; font-weight: 600; }.upload-box small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.existing-files { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius); background: #fafafa; }.existing-files > strong { color: var(--muted); font-size: 12px; font-weight: 500; }.existing-files > div { display: flex; margin-top: 6px; flex-wrap: wrap; gap: 6px; }.existing-files a { padding: 3px 8px; color: var(--red); border: 1px solid var(--line); border-radius: 2px; background: #fff; font-size: 12px; }
.confirmation-section { padding: 18px 24px; }.check-line { display: flex; cursor: pointer; align-items: flex-start; gap: 10px; }.check-line input { position: absolute; opacity: 0; }.check-line i { display: grid; width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; color: transparent; border: 1px solid #bfbfbf; border-radius: 2px; place-items: center; font-size: 11px; font-style: normal; }.check-line input:checked + i { color: #fff; border-color: var(--red); background: var(--red); }.check-line span { display: flex; flex-direction: column; }.check-line strong { font-size: 13px; font-weight: 600; }.check-line small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Quote card beside the order form */
.quote-sidebar { position: sticky; top: 80px; }
.quote-card { padding: 22px 22px 20px; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius); background: #fff; }
.quote-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }.quote-card > p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.quote-role-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0 0 16px; padding: 10px 12px; gap: 6px 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fafafa; }
.quote-role-preview > label { font-size: 12px; font-weight: 600; }.quote-role-preview select { min-width: 0; width: 100%; padding: 6px 8px; font-size: 12px; }.quote-role-preview small, .quote-role-preview noscript { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 1.6; }
.quote-card > .quote-status.is-error { color: var(--red); }
.quote-facts { display: grid; margin: 0 0 16px; padding: 12px; border-radius: var(--radius); grid-template-columns: 1fr 1fr; gap: 10px; background: #fafafa; }.quote-facts div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.quote-facts dt { color: var(--muted); font-size: 12px; }.quote-facts dd { margin: 0; font-size: 13px; font-weight: 600; }
.quote-lines { display: flex; margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); gap: 8px; flex-direction: column; list-style: none; }.quote-lines li { display: flex; justify-content: space-between; gap: 14px; color: var(--text); font-size: 12px; }.quote-lines strong { font-weight: 500; white-space: nowrap; }
.quote-total { display: flex; padding: 14px 0; align-items: center; justify-content: space-between; }.quote-total > span { display: flex; font-size: 13px; font-weight: 600; flex-direction: column; }.quote-total small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }.quote-total > strong { color: var(--red); font-family: var(--num); font-size: 26px; }
.quote-review { margin: 0 0 14px; padding: 8px 10px; color: var(--amber); border-radius: var(--radius); background: var(--amber-bg); font-size: 12px; line-height: 1.6; }
.submit-hint { display: block; margin: 10px 2px 0; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.5; }

/* Order detail */
.detail-heading { margin-bottom: 18px; }
.status-hero { display: grid; margin-bottom: 18px; padding: 18px 22px; border: 1px solid var(--line); border-left: 4px solid; border-radius: var(--radius); align-items: center; grid-template-columns: auto 1fr auto; gap: 16px; background: #fff; }
.status-hero.warning { border-left-color: var(--amber); }.status-hero.info { border-left-color: var(--blue); }.status-hero.success { border-left-color: var(--green); }.status-hero.danger { border-left-color: var(--danger); }.status-hero.muted { border-left-color: #b3b3b3; }
.status-symbol { display: grid; width: 40px; height: 40px; border-radius: 50%; place-items: center; font-size: 18px; font-weight: 700; }.status-symbol svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.status-hero.warning .status-symbol { color: var(--amber); background: var(--amber-bg); }.status-hero.info .status-symbol { color: var(--blue); background: var(--blue-bg); }.status-hero.success .status-symbol { color: var(--green); background: var(--green-bg); }.status-hero.danger .status-symbol { color: var(--danger); background: var(--danger-bg); }.status-hero.muted .status-symbol { color: #666; background: #f0f0f0; }
.status-hero > div:nth-child(2) > span, .status-quote span { color: var(--muted); font-size: 12px; }
.status-hero h2 { margin: 2px 0; font-size: 18px; font-weight: 600; }.status-hero p { margin: 0; color: var(--text); font-size: 13px; }
.status-hero blockquote { margin: 10px 0 0; padding: 8px 12px; color: var(--text); border-left: 2px solid var(--border); background: #fafafa; font-size: 13px; line-height: 1.6; }.status-hero blockquote strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 12px; }
.status-quote { display: flex; padding-left: 24px; border-left: 1px solid var(--line); align-items: flex-end; flex-direction: column; }.status-quote strong { margin: 2px 0; color: var(--red); font-family: var(--num); font-size: 26px; }.status-quote small { color: var(--muted); font-size: 11px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 18px; }.detail-main, .detail-sidebar { display: flex; gap: 16px; flex-direction: column; }.detail-panel .panel-head { border-bottom: 0; }
.revision-chip { padding: 3px 8px; color: var(--text); border: 1px solid var(--border); border-radius: 2px; font-family: var(--num); font-size: 12px; }
.spec-section { margin: 0 20px; padding: 18px 0; border-top: 1px solid var(--line); }.spec-section h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.spec-grid { display: grid; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.spec-grid-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; }.spec-grid-dense dd { font-size: 13px; }.spec-grid > div, .long-spec { display: flex; flex-direction: column; }.spec-grid dt, .long-spec > span { margin-bottom: 4px; color: var(--muted); font-size: 12px; }.spec-grid dd { margin: 0; font-size: 14px; }
.long-spec + .long-spec, .spec-grid + .long-spec { margin-top: 14px; }.long-spec p { margin: 0; padding: 10px 12px; color: var(--text); border-radius: var(--radius); background: #fafafa; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.attachment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.attachment-grid a { display: flex; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); align-items: center; gap: 10px; }.attachment-grid a:hover { border-color: var(--red); }.file-type { display: grid; width: 32px; height: 32px; flex: 0 0 auto; color: var(--text); border-radius: 2px; place-items: center; background: #f0f0f0; font-family: var(--num); font-size: 10px; font-weight: 700; }.attachment-grid a > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }.attachment-grid strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.attachment-grid small { margin-top: 2px; color: var(--muted); font-size: 11px; }.attachment-grid b { color: var(--muted); }
.timeline { padding: 4px 20px 20px; }.timeline article { position: relative; display: grid; min-height: 72px; padding: 14px 0 14px 22px; border-left: 1px solid var(--line); grid-template-columns: 130px 1fr; gap: 14px; }.timeline article:last-child { border-left-color: transparent; }.timeline-dot { position: absolute; top: 19px; left: -5px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #bfbfbf; box-shadow: 0 0 0 1px #d9d9d9; }.timeline-dot.current { background: var(--red); box-shadow: 0 0 0 1px var(--red); }.timeline-time { color: var(--muted); font-size: 12px; }.timeline-content strong { font-size: 13px; font-weight: 600; }.timeline-content p { margin: 6px 0; color: var(--muted); font-size: 12px; }.timeline-content blockquote { margin: 8px 0; padding: 8px 10px; color: var(--text); border-left: 2px solid var(--border); background: #fafafa; font-size: 13px; line-height: 1.55; }.timeline-content small { color: var(--muted); font-size: 11px; }.mini-status { padding: 1px 6px; border-radius: 2px; background: #f0f0f0; }.mini-status.active { color: var(--red); background: var(--red-soft); }
.review-card { padding-bottom: 18px; border-top: 3px solid var(--red); }.review-card form { display: flex; padding: 18px 20px 0; gap: 16px; flex-direction: column; }.review-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acknowledgement { display: flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 13px; line-height: 1.65; cursor: pointer; }
.acknowledgement input { flex: 0 0 auto; margin-top: 4px; accent-color: var(--red); }
.action-card { padding: 22px 20px; text-align: center; }.action-card.attention { border-top: 3px solid var(--blue); }.action-icon { display: grid; width: 40px; height: 40px; margin: 0 auto 12px; color: #fff; border-radius: 50%; place-items: center; background: var(--blue); font-size: 18px; font-weight: 700; }.action-card h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }.action-card p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.quote-breakdown { padding-bottom: 16px; }.quote-breakdown ul { display: flex; margin: 0; padding: 14px 20px; gap: 8px; flex-direction: column; list-style: none; }.quote-breakdown li, .quote-adjustment { display: flex; color: var(--text); justify-content: space-between; gap: 14px; font-size: 12px; }.quote-breakdown li strong { font-weight: 500; white-space: nowrap; }.quote-breakdown .quote-total { margin: 0 20px; padding: 14px 0 0; border-top: 1px solid var(--line); }.quote-breakdown .quote-total strong { color: var(--red); }.quote-adjustment { margin: 0 20px 6px; color: var(--blue); }
.cost-breakdown ul { display: flex; margin: 0; padding: 14px 20px; gap: 9px; flex-direction: column; list-style: none; }.cost-breakdown li { display: grid; color: var(--text); grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 12px; }.cost-breakdown li strong { font-weight: 500; white-space: nowrap; }.cost-breakdown li small { color: var(--muted); font-size: 11px; grid-column: 1 / -1; }.cost-breakdown li.profit { color: var(--red); font-weight: 600; }
.cost-summary { display: grid; margin: 0 20px; padding: 12px 0 4px; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; gap: 8px; }.cost-summary div { display: flex; flex-direction: column; gap: 3px; }.cost-summary dt { color: var(--muted); font-size: 12px; }.cost-summary dd { margin: 0; font-family: var(--num); font-size: 15px; font-weight: 700; }
.cost-warnings { margin: 12px 20px 0; padding: 10px 12px; color: var(--amber); border-radius: var(--radius); background: var(--amber-bg); font-size: 12px; line-height: 1.6; }
.customer-card { padding-bottom: 16px; }.customer-card > .account-cell { padding: 14px 20px; }.customer-card dl { margin: 0 20px; padding-top: 12px; border-top: 1px solid var(--line); }.customer-card dl div { display: flex; margin-bottom: 8px; justify-content: space-between; gap: 10px; }.customer-card dt { color: var(--muted); font-size: 12px; }.customer-card dd { margin: 0; font-size: 12px; word-break: break-all; text-align: right; }
.cancel-zone details { color: var(--muted); font-size: 13px; }.cancel-zone summary { cursor: pointer; text-align: center; }.cancel-zone summary:hover { color: var(--red); }.cancel-zone form { display: flex; margin-top: 12px; gap: 10px; flex-direction: column; }

/* Error page */
.error-page { display: flex; min-height: 55vh; padding: 48px 20px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }.error-page.standalone { min-height: 100vh; background: var(--canvas); }.error-code { margin-bottom: 12px; color: #d9d9d9; font-family: var(--num); font-size: 88px; font-weight: 700; line-height: 1; }.error-page h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }.error-page p { max-width: 460px; margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.sidebar-overlay { display: none; }

@media (max-width: 1120px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .order-form-layout, .detail-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .heading-with-step .step-indicator { display: none; }
  .spec-grid-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { position: fixed; z-index: 25; inset: 0; background: rgba(0, 0, 0, .35); }.menu-open .sidebar-overlay { display: block; }
  .main-area { width: 100%; }
  .menu-button { display: grid; }
  .topbar-title { margin-right: auto; margin-left: 10px; }
  .order-form-layout, .detail-layout { grid-template-columns: 1fr; }
  .quote-sidebar { position: static; }
  .detail-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .review-card, .action-card, .cancel-zone { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .page-content { padding: 20px 14px 40px; }
  .topbar { height: 56px; padding: 0 14px; }.topbar-title small { display: none; }.topbar .button { padding: 6px 10px; }
  .heading-with-action { align-items: flex-start; flex-direction: column; }.heading-with-action > .button { width: 100%; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.metric-card { padding: 14px; }.metric-card strong { font-size: 26px; }
  .panel-head { padding: 14px 16px; }.data-table th, .data-table td { padding-right: 12px; padding-left: 12px; }
  .help-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
  .field-row { grid-template-columns: 1fr; }
  .form-section { padding: 18px 16px; }
  .filter-form { align-items: stretch; flex-direction: column; }.select-wrap select { width: 100%; }
  .status-hero { grid-template-columns: auto 1fr; }.status-quote { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; align-items: flex-start; }
  .spec-grid, .attachment-grid { grid-template-columns: 1fr; }
  .spec-grid-dense { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .qty-panel { position: fixed; top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; max-height: 70vh; overflow-y: auto; }
  .qty-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.lead-option { grid-template-columns: 18px 40px minmax(0, 1fr); }
  .opt-row { grid-template-columns: 1fr; gap: 6px; }.opt-label { padding-top: 0; text-align: left; }.opt-hint { flex-basis: 100%; margin-left: 0; }.opt-control { max-width: none; }.scheme-group { align-items: flex-start; }.scheme-group-name { padding-top: 7px; }.timeline article { grid-template-columns: 1fr; gap: 4px; }.timeline-time { order: 2; }.detail-sidebar { display: flex; }.review-secondary { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 22px 24px; }.code-field input { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
.pricing-tier-scroll { overflow-x: auto; margin: 18px 0; }
.pricing-group { min-width: 0; }
.pricing-tier-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.pricing-tier-table th, .pricing-tier-table td { padding: 9px; border-bottom: 1px solid var(--border); text-align: left; }
.pricing-tier-table input { width: 85px; padding: 9px; border: 1px solid var(--border); border-radius: 7px; }
.price-option summary { cursor: pointer; padding: 8px; border-radius: 7px; background: var(--canvas); }
.price-option .pricing-input { margin-top: 8px; }
/* Private BOM editor: compact tables, independent schemes and shared parts. */
.hardware-workbench { min-width: 0; }
.hardware-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--border, #e2e8f0); margin-bottom: 20px; }
.hardware-toolbar, .hardware-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hardware-toolbar .field { min-width: 200px; flex: 1; max-width: 420px; }
.hardware-controllers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.hardware-bom-section { margin: 24px 0; }
.hardware-section-head h2 { font-size: 15px; margin: 0 0 10px; }
.hardware-subtotal { font-size: 12px; color: #486476; font-variant-numeric: tabular-nums; }
.hardware-scroll { width: 100%; overflow-x: auto; margin-bottom: 10px; }
.hardware-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 12px; }
.hardware-table th { text-align: left; background: #f5f8fa; font-weight: 600; white-space: nowrap; }
.hardware-table th, .hardware-table td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.hardware-table input, .hardware-table select { width: 100%; min-width: 80px; padding: 8px; font-size: 12px; box-sizing: border-box; }
.hardware-table td:first-child { min-width: 220px; }
.hardware-table td:first-child select { min-width: 240px; }
.hardware-table input[type=number] { width: 112px; }
.hardware-library { min-width: 840px; table-layout: fixed; }
.hardware-library th, .hardware-library td { padding: 4px 5px; }
.hardware-library th:nth-child(1), .hardware-library td:nth-child(1) { width: 22%; min-width: 0; }
.hardware-library th:nth-child(2), .hardware-library td:nth-child(2) { width: 15%; min-width: 0; }
.hardware-library th:nth-child(3), .hardware-library td:nth-child(3) { width: 14%; }
.hardware-library th:nth-child(4), .hardware-library td:nth-child(4) { width: 8%; }
.hardware-library th:nth-child(5), .hardware-library td:nth-child(5) { width: 27%; min-width: 0; }
.hardware-library th:nth-child(6), .hardware-library td:nth-child(6) { width: 14%; }
.hardware-library input { height: 28px; min-width: 0; padding: 4px 6px; line-height: 18px; }
.hardware-library input[type=number] { width: 100%; font-variant-numeric: tabular-nums; }
.hardware-library td:last-child { white-space: nowrap; }
.hardware-part-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hardware-part-actions small { font-size: 11px; color: var(--muted, #728292); }
.hardware-library .button { min-height: 26px; padding: 3px 7px; font-size: 11px; line-height: 18px; }
.hardware-inherited { border-top: 1px solid #e2e8f0; padding: 16px 0 0; margin-top: 16px; }
.hardware-inherited summary { cursor: pointer; font-size: 13px; margin-bottom: 12px; }
@media (max-width: 640px) {
  .hardware-controllers { grid-template-columns: 1fr; }
  .hardware-toolbar { align-items: stretch; }
  .hardware-toolbar .field { min-width: 0; width: 100%; }
  .hardware-tabs .button { padding: 9px 11px; font-size: 12px; }
}