:root,
html[data-theme="light"] {
  --xlc-bg: #f3f7fc;
  --xlc-surface: #ffffff;
  --xlc-surface-2: #f7faff;
  --xlc-surface-3: #eaf2fb;
  --xlc-line: #d9e4f1;
  --xlc-line-strong: #c7d7e9;
  --xlc-text: #17243a;
  --xlc-text-2: #53657d;
  --xlc-muted: #7b8ba0;
  --xlc-blue: #087fe3;
  --xlc-blue-hover: #076dcc;
  --xlc-blue-soft: #e6f2ff;
  --xlc-green: #11845b;
  --xlc-warning: #b76500;
  --xlc-danger: #c94242;
  --xlc-table-head: #eaf2fb;
  --xlc-table-hover: #f1f7fd;
  --xlc-sidebar: #102643;
  --xlc-sidebar-2: #163459;
  --xlc-sidebar-text: #dbe9f8;
  --xlc-sidebar-muted: #9eb5cf;
  --xlc-overlay: rgba(7, 18, 35, .62);
  --xlc-shadow: 0 8px 24px rgba(38, 72, 110, .08);
  --green: #075fbd;
  --green2: #087fe3;
  --pale: #e6f2ff;
  --line: #d9e4f1;
  --muted: #657790;
  color-scheme: light;
}

html[data-theme="dark"] {
  --xlc-bg: #0b1120;
  --xlc-surface: #111a2c;
  --xlc-surface-2: #151f33;
  --xlc-surface-3: #142038;
  --xlc-line: #25324a;
  --xlc-line-strong: #33435f;
  --xlc-text: #f0f4fa;
  --xlc-text-2: #a9b5c7;
  --xlc-muted: #8290a6;
  --xlc-blue: #2f7df4;
  --xlc-blue-hover: #5596f7;
  --xlc-blue-soft: #162d50;
  --xlc-green: #3ecf8e;
  --xlc-warning: #f2a33c;
  --xlc-danger: #ff7b7b;
  --xlc-table-head: #142038;
  --xlc-table-hover: #15223a;
  --xlc-sidebar: #080f1d;
  --xlc-sidebar-2: #111d32;
  --xlc-sidebar-text: #e1eafa;
  --xlc-sidebar-muted: #8ea0ba;
  --xlc-overlay: rgba(1, 6, 16, .76);
  --xlc-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  --green: #6aa6ff;
  --green2: #2f7df4;
  --pale: #162d50;
  --line: #25324a;
  --muted: #8290a6;
  color-scheme: dark;
}

html { background: var(--xlc-bg); }
body {
  color: var(--xlc-text);
  background: var(--xlc-bg);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  line-height: 1.55;
}

* { scrollbar-color: var(--xlc-line-strong) transparent; }
::selection { color: #fff; background: var(--xlc-blue); }
:where(button, a, input, select, textarea) { font: inherit; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--xlc-blue) 34%, transparent);
  outline-offset: 2px;
}
button, [role="button"], a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
button:not(:disabled), [role="button"], a[href] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }

.portal, .workspace, #content { background: var(--xlc-bg); }
.portal { grid-template-columns: 252px minmax(0, 1fr); }
.sidebar {
  color: var(--xlc-sidebar-text);
  background: linear-gradient(180deg, var(--xlc-sidebar-2), var(--xlc-sidebar));
  border-right: 1px solid color-mix(in srgb, var(--xlc-line) 58%, transparent);
  padding: 22px 16px;
}
.logo { padding: 2px 8px 22px; }
.logo > span { border-color: rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.05); }
.logo small, .account small { color: var(--xlc-sidebar-muted); }
.sidebar nav { gap: 4px; }
.sidebar nav button {
  min-height: 44px;
  color: var(--xlc-sidebar-muted);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  padding: 10px 12px;
}
.sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.08); }
.sidebar nav button.active {
  color: #fff;
  background: color-mix(in srgb, var(--xlc-blue) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--xlc-blue) 45%, transparent);
  border-left: 3px solid #67adff;
  padding-left: 10px;
}
.account { border-color: rgba(255,255,255,.12); }
.account button { color: var(--xlc-sidebar-text); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.account button:hover { background: rgba(255,255,255,.12); }

.workspace-head {
  color: var(--xlc-text-2);
  background: color-mix(in srgb, var(--xlc-surface) 94%, transparent);
  border-color: var(--xlc-line);
  backdrop-filter: blur(12px);
  padding: 0 30px;
}
.workspace-head a, .workspace-head button, .link-button { color: var(--xlc-blue); }
.workspace-head a:hover, .link-button:hover { color: var(--xlc-blue-hover); }
.role-pill, .status-chip {
  color: var(--xlc-blue);
  background: var(--xlc-blue-soft);
  border-color: color-mix(in srgb, var(--xlc-blue) 25%, var(--xlc-line));
}
#content { max-width: 1580px; padding: 28px 32px 44px; }

.panel,
.filters,
.project-hero,
.metrics button,
.finance-summary article,
.finance-analytics article,
.login-card,
.dialog,
.workbench-tools button,
.auto-plan-row {
  color: var(--xlc-text);
  background: var(--xlc-surface);
  border-color: var(--xlc-line);
  border-radius: 8px;
  box-shadow: var(--xlc-shadow);
}
.panel, .filters, .project-hero, .metrics button { border-width: 1px; border-style: solid; }
.panel-head { border-color: var(--xlc-line); padding: 18px 20px; }
.page-title h1, .project-hero h1 { color: var(--xlc-text); letter-spacing: -.025em; }
.page-title p, .panel-head p, .project-hero p, .muted, .empty { color: var(--xlc-muted); }
.eyebrow { color: var(--xlc-blue); }
.metrics button:hover { border-color: var(--xlc-blue); box-shadow: 0 10px 26px color-mix(in srgb, var(--xlc-blue) 12%, transparent); }
.metrics b { color: var(--xlc-blue); }
.metrics span { color: var(--xlc-text-2); }

button { border-radius: 8px; }
button.primary, .primary {
  color: #fff;
  background: var(--xlc-blue);
  border-color: var(--xlc-blue);
}
button.primary:hover, .primary:hover { background: var(--xlc-blue-hover); border-color: var(--xlc-blue-hover); }
button.secondary, .secondary, .row-actions button, .close {
  color: var(--xlc-blue);
  background: var(--xlc-blue-soft);
  border-color: color-mix(in srgb, var(--xlc-blue) 20%, var(--xlc-line));
}
.actions > button:not(.primary), .panel-head button:not(.primary), .workbench-tools button {
  color: var(--xlc-text-2);
  background: var(--xlc-surface-2);
  border: 1px solid var(--xlc-line-strong);
}
.actions > button:not(.primary):hover, .panel-head button:not(.primary):hover, .workbench-tools button:hover {
  color: var(--xlc-blue);
  border-color: var(--xlc-blue);
}

input, select, textarea,
.field input, .field select,
.filters input, .filters select,
.workbench-tools select {
  color: var(--xlc-text);
  background: var(--xlc-surface-2);
  border-color: var(--xlc-line-strong);
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--xlc-muted); opacity: .9; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--xlc-blue) 45%, var(--xlc-line-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--xlc-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xlc-blue) 14%, transparent); outline: none; }
.field, .filters label, .auto-plan-row label { color: var(--xlc-text-2); }

.project-table-head, .supplier-table-head, .finance-row.head, .maintenance-row.head, .management-report-row.head {
  color: var(--xlc-text-2);
  background: var(--xlc-table-head);
}
.project-row, .supplier-line, .task-list > button, .finance-row, .maintenance-row, .management-report-row, .finance-list article {
  color: var(--xlc-text);
  background: var(--xlc-surface);
  border-color: var(--xlc-line);
}
.project-row:hover, .task-list > button:hover { background: var(--xlc-table-hover); }
.task-list small, .project-row small, .supplier-line small, .finance-row small, .maintenance-row small { color: var(--xlc-muted); }
.scope-note {
  color: var(--xlc-blue);
  background: var(--xlc-blue-soft);
  border-color: color-mix(in srgb, var(--xlc-blue) 25%, var(--xlc-line));
}
.workflow-reminder,
.hospital-execution-list button,
.profit-placeholder,
.supplier-record,
.profile-summary div {
  color: var(--xlc-text);
  background: var(--xlc-surface-2);
  border-color: var(--xlc-line);
}
.workflow-reminder.clear b, .hospital-execution-list strong { color: var(--xlc-blue); }
.hospital-execution-list button:hover, .supplier-record:hover { background: var(--xlc-table-hover); border-color: var(--xlc-blue); }
.hospital-execution-list strong { background: var(--xlc-blue-soft); }
.flow-steps div, .mono { color: var(--xlc-text-2); }
.flow-steps div:not(:last-child)::after { border-color: var(--xlc-line-strong); }
.qualification-alert { border-color: var(--xlc-line); }

.modal { background: var(--xlc-overlay); backdrop-filter: blur(5px); }
.dialog { border: 1px solid var(--xlc-line); border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.hint { color: var(--xlc-text-2); background: var(--xlc-surface-2); border: 1px solid var(--xlc-line); }
.error { color: var(--xlc-danger); }
.error-card { color: var(--xlc-danger); background: color-mix(in srgb, var(--xlc-danger) 8%, var(--xlc-surface)); border-color: color-mix(in srgb, var(--xlc-danger) 35%, var(--xlc-line)); }
.warning-card, .finance-summary .warn, .finance-analytics .warn { color: var(--xlc-warning); background: color-mix(in srgb, var(--xlc-warning) 9%, var(--xlc-surface)); border-color: color-mix(in srgb, var(--xlc-warning) 40%, var(--xlc-line)); }

/* Legacy business modules use the same surface hierarchy as the shell. */
.company-tabs button,
.master-tabs button {
  color: var(--xlc-text-2);
  background: var(--xlc-surface);
  border: 1px solid var(--xlc-line-strong);
}
.company-tabs button:hover,
.master-tabs button:hover { color: var(--xlc-blue); border-color: var(--xlc-blue); }
.company-tabs button.active,
.master-tabs button.active {
  color: #fff;
  background: var(--xlc-blue);
  border-color: var(--xlc-blue);
}
.qualification-summary div,
.qualification-card,
.budget-summary article,
.file-metrics button,
.document-workflow article,
.hospital-dashboard-summary article {
  color: var(--xlc-text);
  background: var(--xlc-surface);
  border-color: var(--xlc-line);
  box-shadow: var(--xlc-shadow);
}
.qualification-summary span,
.qualification-card small,
.budget-summary span,
.document-workflow span { color: var(--xlc-muted); }
.qualification-summary b,
.budget-summary b,
.file-metrics b,
.hospital-dashboard-summary b { color: var(--xlc-blue); }
.qualification-card { min-width: 0; }
.qualification-card h3,
.qualification-card footer { color: var(--xlc-text); border-color: var(--xlc-line); }
.qualification-preview {
  color: var(--xlc-muted);
  background: repeating-linear-gradient(45deg,var(--xlc-surface-2),var(--xlc-surface-2) 10px,var(--xlc-surface-3) 10px,var(--xlc-surface-3) 20px);
}
.qualification-preview.has-file { color: var(--xlc-blue); background: var(--xlc-blue-soft); }
.qualification-preview img { background: var(--xlc-surface-2); }
.qualification-card footer button,
.mini-download { color: var(--xlc-blue); background: var(--xlc-blue-soft); }
.qualification-card footer .danger-lite { color: var(--xlc-danger); background: color-mix(in srgb,var(--xlc-danger) 12%,var(--xlc-surface)); }
.qualification-card .ok { color: var(--xlc-green); }
.qualification-card .missing { color: var(--xlc-warning); }
.form-notice,
.finance-rule,
.quote-guide span,
.authorization-guide { color: var(--xlc-blue); background: var(--xlc-blue-soft); border-color: var(--xlc-line); }

.supplier-directory-head,
.budget-table-head,
.file-ledger-head,
.sales-contract-head,
.sales-item-table > div:first-child,
.asset-ledger-head,
.hospital-budget-items > div:first-child,
.hospital-budget-execution-head,
.execution-device-head,
.management-report-row.head {
  color: var(--xlc-text-2);
  background: var(--xlc-table-head);
  border-color: var(--xlc-line);
}
.supplier-record,
.budget-table-row,
.file-ledger-row,
.workflow-ledger-row,
.sales-contract-list article,
.hospital-master-list article,
.asset-ledger article,
.hospital-budget-list article,
.hospital-budget-execution-list article,
.budget-adjustment-review-list article,
.budget-adjustment-history > article,
.material-row,
.sales-document-chain article,
.group-sales-todos article,
.hospital-todo-panel article {
  color: var(--xlc-text);
  background: var(--xlc-surface);
  border-color: var(--xlc-line);
}
.budget-table-row:hover,
.supplier-record:hover,
.file-ledger-row:hover { background: var(--xlc-table-hover); }

.budget-form-rule,
.budget-preview-row,
.entity-chain-flow div,
.audit-row pre,
.project-device-row,
.requirement-box,
.attachment-picker,
.project-budget-groups header,
.budget-picker-row,
.edit-budget-summary,
.execution-unit-list article,
.execution-unit-list dl div,
.execution-unit-editor > section > header,
.subject-chain div,
.sales-contract-summary > div,
.asset-archive-block,
.asset-mini-list > span,
.empty,
.upload-box {
  color: var(--xlc-text);
  background: var(--xlc-surface-2);
  border-color: var(--xlc-line);
}
.quote-row.head { color: var(--xlc-text-2); background: var(--xlc-table-head); }
.quote-row,
.sales-item-table > div,
.hospital-budget-items > div,
.inventory-asset-row { color: var(--xlc-text); border-color: var(--xlc-line); }
.quote-row input,
.quote-meta input,
.edit-budget-controls input,
.edit-budget-controls select,
.execution-unit-basic input,
.execution-device-row input,
.budget-editor-head input,
.hospital-budget-editor textarea,
.hospital-budget-edit-row input,
.inventory-asset-row input {
  color: var(--xlc-text);
  background: var(--xlc-surface-2);
  border-color: var(--xlc-line-strong);
}
.quote-row .remove,
.device-card-head button { color: var(--xlc-danger); background: color-mix(in srgb,var(--xlc-danger) 11%,var(--xlc-surface)); }
.selected-winner { background: color-mix(in srgb,var(--xlc-warning) 10%,var(--xlc-surface)) !important; }
.budget-error-list > div { color: var(--xlc-danger); background: color-mix(in srgb,var(--xlc-danger) 8%,var(--xlc-surface)); }
.budget-error-list span { color: var(--xlc-danger); }

.login {
  position: relative;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--xlc-blue) 13%, transparent), transparent 30%),
    linear-gradient(145deg, var(--xlc-bg), color-mix(in srgb, var(--xlc-blue-soft) 50%, var(--xlc-bg)));
}
.login-card { border: 1px solid var(--xlc-line); border-radius: 10px; padding: 34px; }
.brand { color: var(--xlc-text); }
.login-register-divider, .login-register-note { color: var(--xlc-muted); }
.login-register-divider::before, .login-register-divider::after { background: var(--xlc-line); }
.login-register-actions button { color: var(--xlc-blue); background: var(--xlc-surface-2); border-color: var(--xlc-line-strong); border-radius: 8px; }
.login-register-actions button:hover { border-color: var(--xlc-blue); background: var(--xlc-blue-soft); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px !important;
  color: var(--xlc-text-2) !important;
  background: var(--xlc-surface-2) !important;
  border: 1px solid var(--xlc-line-strong) !important;
  border-radius: 8px;
}
.theme-toggle:hover { color: var(--xlc-blue) !important; border-color: var(--xlc-blue) !important; }
.theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.login > .theme-toggle { position: fixed; z-index: 3; top: 20px; right: 20px; }

html[data-theme="dark"] .finance-summary article,
html[data-theme="dark"] .finance-analytics article,
html[data-theme="dark"] .auto-plan-row,
html[data-theme="dark"] .requirement-box,
html[data-theme="dark"] .device-card,
html[data-theme="dark"] .profile-field,
html[data-theme="dark"] .authorization-card {
  color: var(--xlc-text);
  background: var(--xlc-surface);
  border-color: var(--xlc-line);
}
html[data-theme="dark"] .task-state { color: var(--xlc-text-2); background: var(--xlc-surface-3); }
html[data-theme="dark"] .task-state.pending { color: #ffd58a; background: #493617; }
html[data-theme="dark"] .task-state.returned { color: #ffaaa3; background: #472426; }
html[data-theme="dark"] .task-state.approved { color: #76e0af; background: #123c31; }
html[data-theme="dark"] .task-state.locked { color: #aebbd0; background: #202b3f; }
html[data-theme="dark"] .budget-completion.done,
html[data-theme="dark"] .budget-method.group { color: #76e0af; background: #123c31; }
html[data-theme="dark"] .budget-completion.pending { color: #ffd58a; background: #493617; }
html[data-theme="dark"] .budget-method.self { color: var(--xlc-text-2); background: var(--xlc-surface-3); }
html[data-theme="dark"] .project-progress {
  color: var(--xlc-text);
  background: var(--xlc-surface);
  border-color: var(--xlc-line);
}
html[data-theme="dark"] .progress-node,
html[data-theme="dark"] .progress-node:disabled {
  color: var(--xlc-text);
  background: var(--xlc-surface-2);
  border-color: var(--xlc-line-strong);
  opacity: 1;
}
html[data-theme="dark"] .progress-node b { color: var(--xlc-text); }
html[data-theme="dark"] .progress-node small { color: var(--xlc-text-2); }
html[data-theme="dark"] .progress-node em { color: var(--xlc-muted); }
html[data-theme="dark"] .progress-node i { color: #b8c5d8; background: #26344b; }
html[data-theme="dark"] .progress-node.done { background: #102c2a; border-color: #286b5d; }
html[data-theme="dark"] .progress-node.done b { color: #e9fff7; }
html[data-theme="dark"] .progress-node.done small,
html[data-theme="dark"] .progress-node.done em { color: #9bcdbc; }
html[data-theme="dark"] .progress-node.done i { color: #fff; background: #159477; }
html[data-theme="dark"] .progress-node.current { background: #332712; border-color: #a87525; }
html[data-theme="dark"] .progress-node.current b { color: #fff1c7; }
html[data-theme="dark"] .progress-node.current small,
html[data-theme="dark"] .progress-node.current em { color: #e0c48d; }
html[data-theme="dark"] .progress-node.current i { color: #171009; background: #f2b544; }
html[data-theme="dark"] .progress-node.returned { background: #382022; border-color: #9c484d; }
html[data-theme="dark"] .progress-node.returned b { color: #ffe5e2; }
html[data-theme="dark"] .progress-node.returned small,
html[data-theme="dark"] .progress-node.returned em { color: #e2aaa7; }
html[data-theme="dark"] .progress-node.returned i { color: #fff; background: #d55353; }
html[data-theme="dark"] .progress-node.waiting,
html[data-theme="dark"] .progress-node.skipped { opacity: 1; }
html[data-theme="dark"] .progress-node.waiting b,
html[data-theme="dark"] .progress-node.skipped b { color: #c0cad9; }
html[data-theme="dark"] .progress-node.waiting small,
html[data-theme="dark"] .progress-node.waiting em,
html[data-theme="dark"] .progress-node.skipped small,
html[data-theme="dark"] .progress-node.skipped em { color: #8392a8; }
html[data-theme="dark"] .progress-node.skipped { background: #101827; border-style: dashed; }
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"] { background: var(--xlc-surface) !important; }

@media (max-width: 1050px) {
  .portal { grid-template-columns: 210px minmax(0, 1fr); }
  #content { padding-inline: 24px; }
}
@media (max-width: 700px) {
  #content { padding: 18px 14px 32px; }
  .workspace-head { padding-inline: 14px; }
  .theme-toggle span { display: none; }
  .login > .theme-toggle { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}