:root {
  --ink: #172033;
  --muted: #667085;
  --line: #dce2ea;
  --line-strong: #cbd4e1;
  --surface: #ffffff;
  --canvas: #f4f6f8;
  --blue: #2058a5;
  --blue-dark: #17457f;
  --blue-soft: #edf4fc;
  --green: #187a5b;
  --danger: #b42318;
  --radius: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 14px; letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }

.topbar { position: sticky; top: 12px; z-index: 20; width: min(1280px, calc(100% - 32px)); height: 64px; margin: 12px auto 0; color: var(--ink); background: rgba(255, 255, 255, .98); border: 1px solid #d8dee8; border-radius: 8px; box-shadow: 0 8px 24px rgba(25, 42, 70, .10); }
.topbar-inner { width: 100%; height: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: #1f4e82; border-radius: 4px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.brand strong { display: block; color: #172033; font-size: 16px; font-weight: 700; }
.brand div span { display: block; margin-top: 2px; color: #667085; font-size: 11px; }
.topbar-meta { display: flex; align-items: center; gap: 16px; }
.version-badge { padding: 4px 9px; color: #344054; background: #f5f7fa; border: 1px solid #d7dee8; border-radius: 4px; font: 600 11px/1.2 Consolas, monospace; text-decoration: none; transition: color .16s, border-color .16s, background .16s; }
.version-badge:hover { color: #17457f; background: #edf4fc; border-color: #9db4cf; }
.version-badge:focus-visible { outline: 3px solid rgba(32, 88, 165, .18); outline-offset: 2px; }
.draft-state { display: flex; align-items: center; gap: 7px; color: #475467; font-size: 12px; }
.draft-state i { width: 7px; height: 7px; flex: 0 0 7px; background: #238263; border-radius: 50%; }

.page-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 56px; }
.page-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 11px; font-weight: 700; }
h1 { margin: 0; font-size: 28px; line-height: 1.3; }
.page-intro p:last-child { margin: 9px 0 0; color: var(--muted); }
.step-strip { display: flex; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.step-strip span { min-width: 120px; padding: 12px 16px; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; }
.step-strip span:last-child { border: 0; }
.step-strip b { display: inline-grid; width: 22px; height: 22px; margin-right: 7px; place-items: center; color: var(--muted); background: #eef1f5; border-radius: 50%; font-size: 12px; }
.step-strip .active { color: var(--blue); font-weight: 700; }
.step-strip .active b { color: white; background: var(--blue); }

.form-section { margin-bottom: 18px; padding: 24px 26px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.section-heading, .heading-group { display: flex; align-items: flex-start; gap: 13px; }
.section-heading { margin-bottom: 22px; }
.split-heading { justify-content: space-between; align-items: center; }
.section-index { width: 36px; padding-top: 4px; color: var(--blue); font-weight: 700; font-size: 13px; border-top: 2px solid var(--blue); }
h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.field-grid { display: grid; gap: 18px 16px; }
.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.field { min-width: 0; }
.field > span { display: block; min-height: 20px; margin-bottom: 7px; color: #344054; font-size: 13px; font-weight: 600; }
.field i { color: var(--danger); font-style: normal; }
input, select { width: 100%; height: 42px; padding: 0 12px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 4px; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea { width: 100%; min-height: 190px; padding: 12px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 4px; outline: none; resize: vertical; line-height: 1.7; }
input::placeholder { color: #98a2b3; }
textarea::placeholder { color: #98a2b3; }
input:focus, select:focus, textarea:focus { border-color: #4d82c4; box-shadow: 0 0 0 3px rgba(32, 88, 165, .1); }
input:user-invalid, select:user-invalid { border-color: #e88b84; }
.readonly-field input { color: #344054; background: #f4f7fa; }
.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.field-hint.warning { color: #d97706; font-weight: 600; }
.serial-input { display: grid; grid-template-columns: minmax(145px, auto) 70px; }
.serial-input b { height: 42px; padding: 0 11px; display: flex; align-items: center; color: #475467; background: #f4f7fa; border: 1px solid var(--line-strong); border-right: 0; border-radius: 4px 0 0 4px; font-size: 12px; white-space: nowrap; }
.serial-input input { border-radius: 0 4px 4px 0; text-align: center; font-weight: 700; }

.disclosure { display: flex; align-items: center; width: 100%; margin-top: 20px; padding: 13px 0 4px; color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--line); text-align: left; }
.disclosure span { font-weight: 700; }
.disclosure small { margin-left: 9px; color: var(--muted); }
.disclosure b { margin-left: auto; color: var(--blue); font-size: 20px; font-weight: 400; }
.collapsible { margin-top: 16px; }

.supplier-heading { margin-bottom: 10px; }
.supplier-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tool-button { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); background: white; border: 1px solid #b9c9dc; border-radius: 4px; font-size: 12px; font-weight: 700; cursor: pointer; }
.tool-button:hover { background: var(--blue-soft); border-color: #7da0c8; }
.tool-button.emphasis { color: white; background: var(--blue); border-color: var(--blue); }
.tool-button.emphasis:hover { background: var(--blue-dark); }
.file-tool { position: relative; overflow: hidden; }
.file-tool input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tool-status { min-height: 20px; margin: 0 0 12px 49px; color: var(--muted); font-size: 12px; }
.tool-status.success { color: var(--green); }
.tool-status.error { color: var(--danger); }
.supplier-lookup-field { position: relative; }
.supplier-suggestions { position: fixed; z-index: 8; max-height: 260px; padding: 5px; overflow-y: auto; background: white; border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 0 10px 28px rgba(23, 32, 51, .14); }
.supplier-suggestion { width: 100%; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); background: transparent; border: 0; border-radius: 3px; text-align: left; }
.supplier-suggestion:hover, .supplier-suggestion:focus { background: var(--blue-soft); outline: none; }
.supplier-suggestion strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.supplier-suggestion span { flex: 0 0 auto; color: var(--muted); font-family: Consolas, monospace; font-size: 11px; }
.supplier-no-result { padding: 11px; color: var(--muted); font-size: 12px; }
.lookup-error { min-height: 19px; margin: 8px 0 0; color: var(--danger); font-size: 12px; }

.ocr-dialog { width: min(680px, calc(100% - 28px)); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 18px 55px rgba(23, 32, 51, .22); }
.ocr-dialog::backdrop { background: rgba(15, 23, 42, .54); }
.ocr-dialog-panel { padding: 22px; }
.ocr-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.ocr-dialog-heading strong, .ocr-dialog-heading span { display: block; }
.ocr-dialog-heading strong { font-size: 17px; }
.ocr-dialog-heading span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.ocr-fields { margin-bottom: 16px; }
.ocr-raw { color: var(--muted); font-size: 12px; }
.ocr-raw summary { cursor: pointer; }
.ocr-raw pre { max-height: 180px; padding: 12px; overflow: auto; color: #344054; background: #f7f9fb; border: 1px solid var(--line); white-space: pre-wrap; word-break: break-all; font-family: inherit; line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.primary-button.compact { min-width: 116px; min-height: 40px; }

.secondary-button, .primary-button { border: 0; border-radius: 4px; font-weight: 700; }
.secondary-button { min-height: 38px; padding: 0 15px; color: var(--blue); background: var(--blue-soft); border: 1px solid #c9dcf1; }
.secondary-button:hover { background: #e0edfb; }
.device-list { display: grid; gap: 12px; }
.device-item { position: relative; padding: 18px 18px 14px; background: #fafbfc; border: 1px solid var(--line); border-left: 3px solid #6d91bc; border-radius: 4px; }
.device-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.device-title strong { font-size: 14px; }
.icon-button { width: 30px; height: 30px; color: #667085; background: transparent; border: 0; border-radius: 4px; font-size: 21px; line-height: 1; }
.icon-button:hover { color: var(--danger); background: #fceceb; }
.device-grid { grid-template-columns: 1.2fr 1.2fr 1fr .8fr .42fr .42fr .72fr .72fr 1fr; gap: 12px; }
.device-grid .field > span { font-size: 12px; }
.line-total { margin-top: 10px; color: var(--muted); text-align: right; font-size: 12px; }
.line-total strong { margin-left: 6px; color: var(--ink); font-size: 14px; }
.attachment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.attachment-field + .attachment-field { padding-left: 26px; border-left: 1px solid var(--line); }
.attachment-title { min-height: 42px; margin-bottom: 10px; }
.attachment-title strong { display: block; font-size: 14px; }
.attachment-title i { color: var(--danger); font-style: normal; }
.attachment-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.paste-table-status { min-height: 18px; margin: 5px 0 0; color: var(--green); font-size: 11px; }
.pasted-table-editor { border: 1px solid #9bb7d8; border-radius: 4px; background: #fff; overflow: hidden; }
.pasted-table-toolbar { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f4f7fb; border-bottom: 1px solid var(--line); }
.pasted-table-toolbar strong { color: var(--ink); font-size: 13px; }
.pasted-table-toolbar button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; color: #365f91; font-size: 12px; cursor: pointer; }
.pasted-table-toolbar button:hover { border-color: #4d82c4; background: #f7fbff; }
.pasted-table-toolbar button:focus-visible { outline: 3px solid rgba(32, 88, 165, .22); outline-offset: 1px; }
.pasted-table-scroll { max-height: 360px; overflow: auto; }
.pasted-table-scroll table { width: 100%; min-width: 420px; border-collapse: collapse; table-layout: auto; }
.pasted-table-scroll td { min-width: 110px; padding: 9px 10px; border-right: 1px solid #aebdce; border-bottom: 1px solid #aebdce; color: var(--ink); background: #fff; font-size: 13px; line-height: 1.5; vertical-align: top; white-space: pre-wrap; }
.pasted-table-scroll tr:first-child td { background: #eef4fb; font-weight: 700; }
.pasted-table-scroll td:last-child { border-right: 0; }
.pasted-table-scroll tr:last-child td { border-bottom: 0; }
.pasted-table-scroll td:focus { position: relative; outline: 3px solid rgba(32, 88, 165, .24); outline-offset: -3px; background: #f8fbff; }
.pasted-table-help { display: block; padding: 7px 10px; border-top: 1px solid var(--line); color: var(--muted); background: #fbfcfe; font-size: 11px; }
.upload-button { min-height: 48px; margin-top: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; background: #f8fafc; border: 1px dashed #aebdce; border-radius: 4px; cursor: pointer; }
.upload-button:hover { border-color: #5d87bd; background: var(--blue-soft); }
.upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-button b { color: var(--blue); font-size: 12px; white-space: nowrap; }
.upload-button .file-summary { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 62px; }
.input-suffix em { position: absolute; top: 1px; right: 1px; height: 40px; min-width: 52px; display: grid; place-items: center; color: var(--muted); background: #f4f6f8; border-left: 1px solid var(--line); border-radius: 0 3px 3px 0; font-size: 12px; font-style: normal; }

.submit-bar { position: sticky; bottom: 0; z-index: 4; min-height: 84px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(255, 255, 255, .97); border: 1px solid var(--line-strong); border-bottom-color: #aeb9c8; box-shadow: 0 -8px 24px rgba(29, 41, 57, .07); border-radius: 6px 6px 0 0; }
.amount-summary { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 14px; }
.amount-summary span { color: var(--muted); }
.amount-summary strong { color: var(--green); font-size: 25px; }
.amount-summary small { grid-column: 1 / -1; margin-top: 3px; color: var(--muted); }
.submit-actions { display: flex; align-items: center; gap: 16px; }
.submit-actions p { max-width: 420px; margin: 0; color: var(--danger); font-size: 13px; }
.submit-actions p.success { color: var(--green); }
.primary-button { min-width: 214px; min-height: 48px; padding: 0 20px; color: white; background: var(--blue); box-shadow: 0 2px 4px rgba(32, 88, 165, .2); }
.primary-button:hover { background: var(--blue-dark); }
.primary-button:disabled { cursor: wait; opacity: .65; }

@media (max-width: 1050px) {
  .device-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .topbar { top: 8px; width: calc(100% - 16px); height: 58px; margin-top: 8px; }
  .topbar-inner { padding: 0 14px; gap: 12px; }
  .brand { gap: 9px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand strong { font-size: 14px; }
  .brand div span { display: none; }
  .draft-state { display: none; }
  .topbar-meta { gap: 8px; }
  .page-shell { width: calc(100% - 24px); padding: 22px 0 38px; }
  .page-intro { display: block; }
  .step-strip { margin-top: 20px; }
  .step-strip span { flex: 1; min-width: 0; padding: 10px 8px; text-align: center; font-size: 12px; }
  .step-strip b { display: grid; margin: 0 auto 4px; }
  .form-section { padding: 20px 16px; }
  .columns-2, .columns-3, .columns-4, .device-grid { grid-template-columns: 1fr 1fr; }
  .span-2 { grid-column: 1 / -1; }
  .attachment-grid { grid-template-columns: 1fr; gap: 22px; }
  .attachment-field + .attachment-field { padding: 22px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .split-heading { align-items: flex-start; }
  .supplier-heading { display: block; }
  .supplier-tools { justify-content: flex-start; margin: 16px 0 0 49px; }
  .tool-status { margin-left: 49px; }
  .secondary-button { white-space: nowrap; }
  .submit-bar { position: static; display: block; }
  .submit-actions { display: block; }
  .submit-actions p { margin: 10px 0; }
  .primary-button { width: 100%; }
}
@media (max-width: 480px) {
  h1 { font-size: 24px; }
  .columns-2, .columns-3, .columns-4, .device-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .section-heading { gap: 9px; }
  .split-heading { display: block; }
  .split-heading .secondary-button { width: 100%; margin-top: 16px; }
  .supplier-tools { margin-left: 0; }
  .supplier-tools .tool-button { flex: 1 1 calc(50% - 4px); }
  .tool-status { margin-left: 0; }
  .disclosure small { display: none; }
}

/* ===== 新里程统一深色商务主题（与门户首页一致） ===== */
:root {
  --ink: #f0f4fa;
  --muted: #a9b5c7;
  --line: #25324a;
  --line-strong: #33435f;
  --surface: #111a2c;
  --canvas: #0b1120;
  --blue: #2f7df4;
  --blue-dark: #2469d8;
  --blue-soft: #162d50;
  --green: #3ecf8e;
  --danger: #ff7b7b;
  --radius: 8px;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(47, 125, 244, .09), transparent 34%),
    var(--canvas);
}

.topbar {
  color: var(--ink);
  background: rgba(17, 26, 44, .96);
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
}
.brand-mark { background: var(--blue); border-radius: 6px; box-shadow: 0 0 18px rgba(47, 125, 244, .22); }
.brand strong { color: var(--ink); }
.brand div span, .draft-state { color: var(--muted); }
.draft-state i { background: var(--green); box-shadow: 0 0 10px rgba(62, 207, 142, .35); }
.version-badge { color: #8ebcff; background: var(--blue-soft); border-color: #29568c; border-radius: 999px; }
.version-badge:hover { color: #fff; background: #1b3964; border-color: var(--blue); box-shadow: 0 0 14px rgba(47, 125, 244, .22); }
.version-badge:focus-visible { outline-color: rgba(47, 125, 244, .36); }
.theme-toggle { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; color: #a9b5c7; background: #151f33; border: 1px solid var(--line); border-radius: 6px; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.theme-toggle:hover { color: #fff; background: var(--blue-soft); border-color: var(--blue); box-shadow: 0 0 14px rgba(47, 125, 244, .18); }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

.eyebrow { color: #8ebcff; letter-spacing: .08em; }
.step-strip, .form-section { background: var(--surface); border-color: var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
.step-strip b { color: var(--muted); background: #1a263b; }
.step-strip .active { color: #8ebcff; }
.step-strip .active b { color: #fff; background: var(--blue); }
.form-section { transition: border-color .18s ease, box-shadow .18s ease; }
.form-section:hover { border-color: #30415e; box-shadow: 0 14px 34px rgba(0, 0, 0, .16), 0 0 18px rgba(47, 125, 244, .045); }

.field > span { color: #c4cede; }
input, select, textarea {
  color: var(--ink);
  background: #151f33;
  border-color: var(--line-strong);
  color-scheme: dark;
}
input::placeholder, textarea::placeholder { color: #748197; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 125, 244, .16); }
.readonly-field input, .serial-input b, .input-suffix em { color: var(--muted); background: #0f1829; }
.disclosure { color: var(--ink); }

.tool-button { color: #8ebcff; background: #151f33; border-color: var(--line-strong); }
.tool-button:hover { color: #fff; background: var(--blue-soft); border-color: var(--blue); box-shadow: 0 0 12px rgba(47, 125, 244, .15); }
.tool-button.emphasis { color: #fff; background: var(--blue); border-color: var(--blue); }
.tool-button.emphasis:hover { background: var(--blue-dark); }
.supplier-suggestions { background: #151f33; border-color: var(--line-strong); box-shadow: 0 16px 36px rgba(0, 0, 0, .38); }
.supplier-suggestion { color: var(--ink); }
.supplier-suggestion:hover, .supplier-suggestion:focus { background: var(--blue-soft); }

.ocr-dialog { color: var(--ink); background: var(--surface); border-color: var(--line-strong); box-shadow: 0 22px 64px rgba(0, 0, 0, .52); }
.ocr-dialog::backdrop { background: rgba(3, 8, 18, .72); }
.ocr-raw pre { color: #c4cede; background: #0f1829; border-color: var(--line); }
.secondary-button { color: #9cc5ff; background: var(--blue-soft); border-color: #29568c; }
.secondary-button:hover { color: #fff; background: #1b3964; }

.device-item { background: #0f1829; border-color: var(--line); border-left-color: var(--blue); }
.icon-button { color: var(--muted); }
.icon-button:hover { color: #ff9999; background: rgba(239, 68, 68, .12); }
.pasted-table-editor { background: #0f1829; border-color: #3a6395; }
.pasted-table-toolbar { background: #151f33; border-color: var(--line); }
.pasted-table-toolbar button { color: #9cc5ff; background: #111a2c; border-color: var(--line-strong); }
.pasted-table-toolbar button:hover { background: var(--blue-soft); border-color: var(--blue); }
.pasted-table-scroll td { color: var(--ink); background: #111a2c; border-color: #33435f; }
.pasted-table-scroll tr:first-child td { background: #162d50; }
.pasted-table-scroll td:focus { background: #182740; }
.pasted-table-help { color: var(--muted); background: #0f1829; border-color: var(--line); }
.upload-button { background: #0f1829; border-color: #40516c; }
.upload-button:hover { background: var(--blue-soft); border-color: var(--blue); }

.submit-bar { background: rgba(17, 26, 44, .97); border-color: var(--line-strong); box-shadow: 0 -12px 30px rgba(0, 0, 0, .24); backdrop-filter: blur(14px); }
.amount-summary strong { color: var(--green); }
.primary-button { background: var(--blue); box-shadow: 0 6px 18px rgba(47, 125, 244, .22); }
.primary-button:hover { background: var(--blue-dark); box-shadow: 0 8px 22px rgba(47, 125, 244, .30); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(47, 125, 244, .34);
  outline-offset: 2px;
}

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

/* 浅色模式：沿用同一商务层级，仅切换明度 */
html[data-theme="light"] {
  --ink: #172033;
  --muted: #667085;
  --line: #dce2ea;
  --line-strong: #cbd4e1;
  --surface: #ffffff;
  --canvas: #f4f6f8;
  --blue: #2058a5;
  --blue-dark: #17457f;
  --blue-soft: #edf4fc;
  --green: #187a5b;
  --danger: #b42318;
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--canvas); }
html[data-theme="light"] .topbar { color: var(--ink); background: rgba(255, 255, 255, .98); border-color: #d8dee8; box-shadow: 0 8px 24px rgba(25, 42, 70, .10); }
html[data-theme="light"] .brand-mark { background: #1f4e82; box-shadow: none; }
html[data-theme="light"] .brand strong { color: var(--ink); }
html[data-theme="light"] .version-badge { color: #344054; background: #f5f7fa; border-color: #d7dee8; }
html[data-theme="light"] .version-badge:hover { color: var(--blue-dark); background: var(--blue-soft); border-color: #9db4cf; box-shadow: none; }
html[data-theme="light"] .theme-toggle { color: #475467; background: #fff; border-color: #d7dee8; }
html[data-theme="light"] .theme-toggle:hover { color: var(--blue); background: var(--blue-soft); border-color: var(--blue); box-shadow: none; }
html[data-theme="light"] .eyebrow, html[data-theme="light"] .step-strip .active { color: var(--blue); }
html[data-theme="light"] .step-strip, html[data-theme="light"] .form-section { box-shadow: none; }
html[data-theme="light"] .step-strip b { color: var(--muted); background: #eef1f5; }
html[data-theme="light"] .field > span { color: #344054; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: var(--ink); background: #fff; border-color: var(--line-strong); color-scheme: light; }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #98a2b3; }
html[data-theme="light"] .readonly-field input, html[data-theme="light"] .serial-input b, html[data-theme="light"] .input-suffix em { color: #475467; background: #f4f7fa; }
html[data-theme="light"] .tool-button { color: var(--blue); background: #fff; border-color: #b9c9dc; }
html[data-theme="light"] .tool-button:hover { color: var(--blue-dark); background: var(--blue-soft); border-color: #7da0c8; box-shadow: none; }
html[data-theme="light"] .supplier-suggestions, html[data-theme="light"] .ocr-dialog { color: var(--ink); background: #fff; border-color: var(--line-strong); }
html[data-theme="light"] .supplier-suggestion { color: var(--ink); }
html[data-theme="light"] .ocr-raw pre { color: #344054; background: #f7f9fb; }
html[data-theme="light"] .device-item { background: #fafbfc; border-color: var(--line); }
html[data-theme="light"] .pasted-table-editor, html[data-theme="light"] .pasted-table-scroll td { color: var(--ink); background: #fff; }
html[data-theme="light"] .pasted-table-toolbar { background: #f4f7fb; }
html[data-theme="light"] .pasted-table-toolbar button { color: #365f91; background: #fff; }
html[data-theme="light"] .pasted-table-scroll tr:first-child td { background: #eef4fb; }
html[data-theme="light"] .pasted-table-help { background: #fbfcfe; }
html[data-theme="light"] .upload-button { background: #f8fafc; }
html[data-theme="light"] .submit-bar { background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(29, 41, 57, .07); }