:root {
  --paper: #fafaf8;
  --ink: #0a0a0a;
  --grey-1: #f0f0ee;
  --grey-2: #d4d4d2;
  --grey-3: #737373;
  --accent: #ff6b35;
  --page: var(--paper);
  --surface: var(--paper);
  --surface-raised: var(--paper);
  --surface-muted: var(--grey-1);
  --text: var(--ink);
  --text-muted: #525252;
  --line: var(--grey-2);
  --line-strong: #a3a3a3;
  --accent-strong: #e34f1b;
  --accent-readable: #bf3d0e;
  --accent-text: #ffffff;
  --success: var(--accent);
  --canvas: var(--ink);
  --radius: 0px;
  --header-height: 72px;
  --command-height: 176px;
  --flow-height: 72px;
  --tool-switcher-height: 54px;
  --font-ui: Arial, Helvetica, "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  --font-number: "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { border-radius: 0 !important; box-shadow: none !important; }
html, body { color-scheme: light; background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow: hidden; }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .drop-zone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.app-header { height: var(--header-height); padding: 0 5vw; border-bottom: 1px solid var(--ink); background: var(--paper); }
.brand-block { gap: 16px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--font-number); font-size: 12px; font-weight: 600; letter-spacing: -.04em; }
.brand-copy { display: grid; gap: 3px; }
.brand-block .brand-kicker, .command-kicker, .result-kicker { margin: 0; color: var(--accent); font-family: var(--font-number); font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.brand-block h1 { font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
.local-status { color: var(--text-muted); font-family: var(--font-number); font-size: 11px; letter-spacing: .04em; }
.status-light { width: 8px; height: 8px; background: var(--accent); }

.business-command { height: var(--command-height); display: grid; grid-template-columns: minmax(0,7fr) minmax(420px,5fr); border-bottom: 1px solid var(--ink); background: var(--paper); }
.command-copy { min-width: 0; display: grid; align-content: center; gap: 10px; padding: 22px 4vw 22px 5vw; border-right: 1px solid var(--ink); }
.command-copy h2 { max-width: 18ch; margin: 0; font-size: clamp(30px,3vw,52px); font-weight: 200; line-height: .98; letter-spacing: -.055em; }
.command-copy > p:last-child { max-width: 70ch; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.command-ledger { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); min-width: 0; }
.command-ledger > div { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 22px 18px; border-right: 1px solid var(--grey-2); }
.command-ledger > div:last-child { border-right: 0; }
.command-ledger span, .command-ledger small { color: var(--text-muted); font-family: var(--font-number); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.command-ledger strong { overflow-wrap: anywhere; font-family: var(--font-number); font-size: clamp(28px,3.3vw,58px); font-weight: 300; line-height: .9; letter-spacing: -.07em; }
.command-ledger .command-ledger-accent { background: var(--accent); color: #fff; }
.command-ledger-accent span, .command-ledger-accent small { color: #fff; }

.business-flow { height: var(--flow-height); display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0 5vw; list-style: none; border-bottom: 1px solid var(--ink); background: var(--grey-1); }
.business-flow li { min-width: 0; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 0 16px; border-left: 1px solid var(--grey-2); border-top: 4px solid transparent; }
.business-flow li:last-child { border-right: 1px solid var(--grey-2); }
.business-flow span { grid-row: 1 / span 2; align-self: center; color: var(--grey-3); font-family: var(--font-number); font-size: 12px; }
.business-flow strong { font-size: 13px; font-weight: 600; }
.business-flow small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
body:not([data-active-tool="weight"]) .business-flow li:first-child, body[data-active-tool="weight"] .business-flow li:nth-child(2) { border-top-color: var(--accent); background: var(--paper); }
body:not([data-active-tool="weight"]) .business-flow li:first-child span, body[data-active-tool="weight"] .business-flow li:nth-child(2) span { color: var(--accent); }

.tool-switcher { height: var(--tool-switcher-height); justify-content: flex-start; gap: 0; padding: 0 5vw; border-bottom: 1px solid var(--ink); background: var(--paper); }
.tool-tab { min-width: 230px; min-height: 100%; padding: 0 24px; border: 0; border-left: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; }
.tool-tab:last-child { border-right: 1px solid var(--ink); }
.tool-tab span { margin-right: 10px; color: var(--grey-3); font-family: var(--font-number); font-size: 10px; }
.tool-tab:hover { background: var(--grey-1); color: var(--ink); }
.tool-tab.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tool-tab.is-active span { color: var(--accent); }

.workbench, .weight-workbench { height: calc(100dvh - var(--header-height) - var(--command-height) - var(--flow-height) - var(--tool-switcher-height)); }
.workbench { grid-template-columns: 300px minmax(0,1fr) 290px; }
.control-panel, .result-panel, .weight-summary, .weight-editor { scrollbar-color: var(--ink) var(--grey-1); scrollbar-width: thin; }
.control-panel, .result-panel, .weight-summary { background: var(--paper); }
.control-panel { border-right-color: var(--ink); }
.result-panel { border-left-color: var(--ink); }
.panel-section, .count-section, .metric-section { padding: 20px; border-bottom-color: var(--grey-2); }
.panel-section h2, .count-section h2 { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.drop-zone { min-height: 138px; padding: 20px; border: 1px solid var(--ink); background: var(--paper); }
.drop-zone::before { content: "＋"; display: block; color: var(--accent); font-family: Arial,sans-serif; font-size: 30px; font-weight: 200; line-height: 1; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--accent); background: var(--grey-1); }
.drop-zone strong { font-size: 14px; font-weight: 600; }
.primary-button, .secondary-button, .mode-button, .error-banner button { min-height: 40px; border: 1px solid var(--ink); font-size: 12px; font-weight: 600; transition: background-color 150ms ease,color 150ms ease,border-color 150ms ease; }
.primary-button { background: var(--accent); color: #fff; }
.primary-button:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.secondary-button, .mode-button { background: var(--paper); color: var(--ink); }
.secondary-button:hover:not(:disabled), .mode-button:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mode-button.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }
.text-button, .legal-link, .legal-back { color: var(--accent-readable); font-weight: 600; }
.viewer-panel { background: var(--ink); }
.viewer-toolbar, .viewer-footer { background: var(--paper); }
.viewer-toolbar { border-bottom-color: var(--ink); }
.viewer-footer { border-top-color: var(--ink); }
.canvas-wrap { padding: 20px; }
.canvas-wrap canvas { background: var(--ink); }
.empty-state, .loading-state { color: var(--paper); }
.empty-state p, .loading-state p { color: var(--grey-2); }
.empty-visual span { border-color: var(--grey-3); }
.loading-lines span { height: 5px; background: #333; }
.count-section { padding-top: 24px; }
.result-kicker { margin-bottom: 14px; }
.count-section h2 { margin-bottom: 8px; }
.count-value { color: var(--ink); font-size: clamp(52px,6vw,86px); font-weight: 200; letter-spacing: -.075em; }
.next-step-section { display: grid; gap: 12px; padding: 22px 20px; border-bottom: 1px solid var(--ink); background: var(--accent); color: #fff; }
.next-step-section[hidden] { display: none; }
.next-step-section > p { margin: 0; font-family: var(--font-number); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.next-step-section h2 { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.15; letter-spacing: -.035em; }
.next-step-section .primary-button { border-color: var(--ink); background: var(--ink); color: var(--paper); text-align: left; }
.next-step-section small { font-size: 10px; line-height: 1.6; }
.metric-row { padding-bottom: 10px; border-bottom: 1px solid var(--grey-2); }
.metric-row strong { font-weight: 500; }
.error-banner { border-color: var(--ink); }

.weight-workbench { grid-template-columns: minmax(320px,380px) minmax(0,1fr); background: var(--paper); }
.weight-summary { padding: 28px 24px 48px; border-right-color: var(--ink); }
.weight-kicker { color: var(--accent-readable); font-family: var(--font-number); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.weight-summary h2 { font-size: 28px; font-weight: 200; line-height: 1; }
.weight-total-block { padding: 28px 0; border-bottom-color: var(--ink); }
.weight-total-block strong { color: var(--ink); font-size: clamp(40px,4.5vw,70px); font-weight: 200; }
.weight-total-block output { color: var(--accent-readable); font-weight: 500; }
.detected-count-box, .project-batch, .weight-caveat { border-color: var(--ink); background: var(--grey-1); }
.project-batch { border-top: 4px solid var(--accent); }
.project-batch-totals { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.project-batch-totals > div { border-right-color: var(--grey-2); }
.project-batch-totals strong { color: var(--ink); font-family: var(--font-number); font-weight: 400; }
.threshold-track { height: 8px; border: 1px solid var(--ink); background: var(--paper); }
.threshold-track span { background: var(--accent); }
.project-device-list li { border-color: var(--grey-2); background: var(--paper); }
.weight-editor { padding: 32px 4vw 72px; }
.weight-editor-inner { max-width: 1080px; margin: 0; }
.weight-editor-header { padding-bottom: 24px; border-bottom: 1px solid var(--ink); }
.weight-editor-header h2 { font-size: clamp(34px,4vw,62px); font-weight: 200; line-height: .95; letter-spacing: -.055em; }
.weight-part { border-color: var(--ink); background: var(--paper); }
.weight-part + .weight-part { border-top: 0; }
.weight-part > summary { background: var(--paper); }
.weight-part[open] > summary { border-bottom-color: var(--ink); background: var(--ink); color: var(--paper); }
.weight-part > summary output { color: var(--accent-readable); font-family: var(--font-number); font-weight: 500; }
.weight-part[open] > summary output { color: var(--accent); }
.weight-part-body { background: var(--grey-1); }
.weight-fields input, .material-row input, .material-row select, .weight-fields select, .quote-fields input, .quote-note textarea { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.weight-fields input:focus, .material-row input:focus, .material-row select:focus, .weight-fields select:focus, .quote-fields input:focus, .quote-note textarea:focus { border-color: var(--accent); }
.quote-request { margin-top: 48px; padding: 32px; border: 0; border-top: 6px solid var(--accent); background: var(--ink); color: var(--paper); }
.quote-request .weight-kicker, .quote-request-heading > p:last-child, .quote-fields label > span, .quote-note > span, .quote-form-status, .quote-consent { color: var(--grey-2); }
.quote-request h3 { max-width: 15ch; font-size: clamp(30px,4vw,56px); font-weight: 200; line-height: 1; letter-spacing: -.05em; }
.quote-form { border-top: 1px solid var(--grey-3); }
.quote-fields input, .quote-note textarea { border-color: var(--grey-3); background: #161616; color: var(--paper); }
.quote-submit { width: auto; min-width: 260px; }
.quote-result { border-color: var(--accent); background: var(--paper); color: var(--ink); }
.quote-result p, .quote-result small { color: var(--text-muted); }
.quote-price { color: var(--accent-readable); font-weight: 300; }
.legal-header, .legal-shell section { border-color: var(--ink); }

@media (max-width:1180px) {
  :root { --command-height:158px; }
  .business-command { grid-template-columns: minmax(0,3fr) minmax(360px,2fr); }
  .command-copy h2 { font-size: clamp(26px,3.2vw,42px); }
  .workbench { grid-template-columns: 260px minmax(0,1fr) 250px; }
}

@media (max-width:1050px) {
  body { overflow:auto; }
  .workbench, .weight-workbench { height:auto; }
  .workbench { min-height:760px; grid-template-columns:250px minmax(0,1fr); }
  .viewer-panel { min-height:760px; }
}

@media (max-width:760px) {
  :root { --header-height:62px; --command-height:auto; --flow-height:auto; --tool-switcher-height:52px; }
  .app-header { padding:0 16px; }
  .brand-mark { width:34px; height:34px; font-size:10px; }
  .brand-kicker { display:none; }
  .brand-block h1 { font-size:15px; }
  .business-command { height:auto; display:block; }
  .command-copy { padding:24px 16px; border-right:0; border-bottom:1px solid var(--ink); }
  .command-copy h2 { max-width:13ch; font-size:clamp(34px,10.6vw,50px); }
  .command-copy > p:last-child { font-size:11px; }
  .command-ledger > div { padding:18px 10px; }
  .command-ledger strong { font-size:clamp(25px,8vw,38px); }
  .command-ledger span, .command-ledger small { font-size:8px; }
  .business-flow { height:auto; grid-template-columns:repeat(2,1fr); padding:0; }
  .business-flow li { min-height:66px; padding:10px 12px; border-bottom:1px solid var(--grey-2); }
  .business-flow li:nth-child(2n) { border-right:0; }
  .tool-switcher { top:0; padding:0; }
  .tool-tab { min-width:0; padding:0 12px; border-left:0; border-right:1px solid var(--ink); font-size:11px; }
  .tool-tab:last-child { border-right:0; }
  .tool-tab span { display:block; margin:0 0 2px; font-size:8px; }
  .workbench, .weight-workbench { min-height:0; }
  .viewer-panel { min-height:72dvh; }
  .result-panel { display:grid; grid-template-columns:1fr; }
  .count-section { padding:28px 16px; }
  .count-value { font-size:clamp(76px,24vw,112px); }
  .next-step-section { padding:26px 16px; }
  .weight-summary { padding:28px 16px; }
  .weight-editor { padding:32px 16px 72px; }
  .weight-editor-header h2 { font-size:42px; }
  .quote-request { margin-inline:-16px; padding:28px 16px; }
  .quote-request h3 { font-size:38px; }
  .quote-submit { width:100%; min-width:0; }
}