:root {
  font-family: "Microsoft YaHei UI", "Noto Sans CJK SC", Arial, sans-serif;
  color: #18212f;
  background: #eef2f6;
  font-synthesis: none;
  --line: #cfd7e2;
  --muted: #647184;
  --blue: #176b91;
  --blue-dark: #125573;
  --surface: #ffffff;
  --soft: #f6f8fa;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.back-home { position: fixed; right: 18px; bottom: 18px; z-index: 50; min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #cbd5df; border-radius: 4px; background: rgba(255, 255, 255, .96); color: #24445a; text-decoration: none; font-size: 13px; box-shadow: 0 4px 14px rgba(25, 45, 60, .12); }
.back-home:hover { border-color: #177b9b; color: #177b9b; }
.back-home:focus-visible { outline: 3px solid rgba(23, 123, 155, .22); outline-offset: 2px; }
@media (max-width: 720px) { .back-home span { display: none; } .back-home { width: 40px; padding: 0; justify-content: center; } }
button, input, textarea { font: inherit; }
button { border: 1px solid #b9c3cf; background: #fff; color: #273344; min-height: 34px; padding: 0 12px; cursor: pointer; border-radius: 4px; }
button:hover { border-color: #7f91a5; background: #f8fafc; }
button.primary { background: var(--blue); border-color: var(--blue); color: white; font-weight: 700; }
button.primary:hover { background: var(--blue-dark); }
button.secondary { background: #f7f9fb; }
button.compact { min-height: 30px; padding: 0 9px; font-size: 13px; }
button.danger { color: #a43838; }
.app-header { min-height: 74px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; background: #f8fafc; border-bottom: 1px solid var(--line); }
.app-header h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; letter-spacing: 0; }
.app-header h1 span { color: #176b91; font-size: 18px; }
.app-header h1 b { width: 1px; height: 24px; background: #b9c3cf; display: inline-block; }
.app-header p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.server-state { font-size: 12px; color: var(--muted); padding-left: 16px; position: relative; }
.server-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d59637; position: absolute; left: 0; top: 5px; }
.server-state.online::before { background: #39a56a; }
.mode-tabs { display: flex; gap: 6px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.mode-tab { min-width: 118px; font-weight: 700; }
.mode-tab.active { color: #fff; background: #26384c; border-color: #26384c; }
.workspace { height: calc(100vh - 129px); min-height: 600px; display: grid; grid-template-columns: 300px minmax(420px, 1fr) minmax(400px, 1.08fr); gap: 10px; padding: 10px; }
.controls, .data-panel, .preview-panel { background: var(--surface); border: 1px solid var(--line); min-width: 0; overflow: hidden; }
.controls { overflow-y: auto; padding: 14px; }
.controls section { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid #e4e9ef; }
h2 { margin: 0; font-size: 15px; }
.section-heading, .panel-heading, .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.button-row, .export-row { display: flex; gap: 7px; flex-wrap: wrap; }
.button-row button { flex: 1; }
.wide { width: 100%; margin-top: 8px; }
.metric { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
label { display: block; color: var(--muted); font-size: 12px; margin-top: 9px; }
input { width: 100%; height: 34px; border: 1px solid #bfc9d5; border-radius: 3px; padding: 0 9px; margin-top: 4px; color: #172231; background: white; }
.rate-row { display: grid; grid-template-columns: 1fr 72px 30px; gap: 6px; align-items: end; margin-top: 7px; }
.rate-row input { margin: 0; }
.rate-row button { padding: 0; }
.sample-settings { display: grid; gap: 7px; }
.sample-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; }
.sample-row input[type="color"] { width: 28px; height: 28px; border: 0; padding: 0; margin: 0; }
.sample-row input[type="text"] { margin: 0; }
.primary-actions { position: sticky; bottom: -14px; background: #fff; padding: 12px 0 2px; }
.primary-actions > button { width: 100%; }
.export-row { margin-top: 7px; }
.export-row button { flex: 1; }
.data-panel, .preview-panel { display: flex; flex-direction: column; }
.panel-heading { min-height: 48px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.panel-heading span { font-size: 12px; color: var(--muted); }
.sheet-toolbar { display: flex; align-items: stretch; min-height: 62px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fff; }
.sheet-toolbar button { min-width: 46px; height: 61px; border: 0; border-right: 1px solid #e1e6ec; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 5px; font-size: 11px; }
.sheet-toolbar button:hover { background: #eef5f8; color: #155e80; }
.sheet-toolbar button:disabled { opacity: .38; cursor: default; background: #fff; }
.sheet-toolbar i { font-size: 17px; color: #24769b; }
.toolbar-separator { width: 7px; flex: 0 0 7px; border-right: 1px solid #dce3ea; background: #f7f9fb; }
.formula-bar { height: 42px; display: grid; grid-template-columns: 96px 42px minmax(180px, 1fr); align-items: center; border-bottom: 1px solid var(--line); background: #f8fafc; padding: 5px 8px; gap: 6px; }
.formula-bar input { margin: 0; height: 30px; background: #fff; }
.formula-bar .fx { height: 30px; display: grid; place-items: center; border: 1px solid #bfc9d5; background: #fff; color: #4c6378; font-family: Georgia, serif; font-style: italic; font-weight: 700; }
.sheet-wrap { flex: 1; overflow: auto; background: #fff; }
.sheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; table-layout: fixed; }
.sheet th, .sheet td { height: 30px; min-width: 108px; border-right: 1px solid #dbe1e8; border-bottom: 1px solid #e1e6ec; padding: 0; }
.sheet th:first-child, .sheet td:first-child { position: sticky; left: 0; z-index: 2; min-width: 46px; width: 46px; text-align: center; background: #f3f6f9; color: #6c7786; }
.sheet th { position: sticky; z-index: 3; background: #eaf0f5; font-weight: 600; }
.sheet thead tr.letters th { top: 0; height: 24px; min-height: 24px; color: #617083; background: #f4f6f8; font-size: 12px; font-style: italic; font-weight: 500; }
.sheet thead tr.headers th { top: 24px; }
.sheet th:first-child { z-index: 4; }
.sheet input { width: 100%; height: 29px; border: 0; border-radius: 0; margin: 0; padding: 0 7px; background: transparent; }
.sheet input:focus { outline: 0; background: transparent; }
.sheet tr.selected td { background: #e9f4f8; }
.sheet td.range-selected, .sheet th.range-selected { background: #e8f3fb !important; }
.sheet td.active-cell { position: relative; box-shadow: inset 0 0 0 2px #1683d8; background: #fff !important; z-index: 1; }
.sheet td.active-cell::after { content: ""; position: absolute; width: 7px; height: 7px; right: -4px; bottom: -4px; background: #1683d8; border: 1px solid #fff; z-index: 4; }
.sheet .selected-heading { background: #d9eaf7 !important; color: #125d85 !important; }
.sheet-status { min-height: 34px; display: flex; align-items: center; gap: 22px; padding: 0 12px; color: #667487; border-top: 1px solid var(--line); background: #f8fafc; font-size: 12px; }
.sheet-status span:first-child { margin-right: auto; }
.preview-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; overflow: auto; padding: 14px; background: #fff; }
.preview-stage.has-image { align-items: start; padding-top: 54px; }
.preview-stage p { color: #7a8696; }
.preview-stage img { display: none; max-width: 100%; max-height: 100%; object-fit: contain; }
dialog { width: min(680px, calc(100vw - 32px)); border: 1px solid #bcc7d3; border-radius: 6px; padding: 0; box-shadow: 0 18px 60px rgba(27, 39, 51, .25); }
dialog::backdrop { background: rgba(25, 34, 45, .35); }
dialog form { padding: 16px; }
dialog textarea { width: 100%; height: 340px; resize: vertical; border: 1px solid #bfc9d5; padding: 10px; margin: 12px 0; border-radius: 3px; font-family: Consolas, monospace; }
.dialog-heading button { border: 0; font-size: 22px; padding: 0 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; right: 18px; bottom: 18px; max-width: 420px; padding: 11px 14px; background: #26384c; color: white; border-radius: 4px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; z-index: 20; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Shared XLei light theme. Tool behavior and geometry stay untouched. */
:root {
  color: #24212b;
  background: #f3f1f6;
  --line: #ddd7e5;
  --muted: #706b7b;
  --blue: #7652b5;
  --blue-dark: #62419d;
  --soft: #f8f6fa;
}
.back-home { border-color: #d8d0e2; border-radius: 6px; color: #62419d; box-shadow: 0 8px 22px rgba(67, 50, 91, .12); }
.back-home:hover { border-color: #7652b5; color: #7652b5; }
.back-home:focus-visible { outline-color: rgba(118, 82, 181, .22); }
button { border-color: #d3cbdc; color: #2e2a35; }
button:hover { border-color: #a996c0; background: #faf8fc; }
button.secondary, .panel-heading, .formula-bar, .sheet-status, .app-header { background: #faf9fc; }
.app-header h1 span, .sheet-toolbar i { color: #7652b5; }
.mode-tab.active { background: #7652b5; border-color: #7652b5; }
.controls section { border-bottom-color: #ebe7ef; }
input, dialog textarea, .formula-bar .fx { border-color: #d3cbdc; color: #24212b; }
.sheet-toolbar button:hover { background: #f3eef9; color: #62419d; }
.toolbar-separator { border-right-color: #e4dfea; background: #faf9fc; }
.sheet th, .sheet td { border-right-color: #e5e0e9; border-bottom-color: #ece8ef; }
.sheet th { background: #eee9f3; }
.sheet thead tr.letters th, .sheet th:first-child, .sheet td:first-child { background: #f7f4f9; color: #706b7b; }
.sheet tr.selected td { background: #f4effa; }
.sheet td.range-selected, .sheet th.range-selected { background: #efe8f7 !important; }
.sheet td.active-cell { box-shadow: inset 0 0 0 2px #7652b5; }
.sheet td.active-cell::after { background: #7652b5; }
.sheet .selected-heading { background: #e5d9f2 !important; color: #62419d !important; }
.toast { background: #62419d; border-radius: 6px; }
dialog { border-color: #d3cbdc; box-shadow: 0 18px 60px rgba(67, 50, 91, .22); }
.controls, .data-panel, .preview-panel { border-radius: 8px; box-shadow: 0 8px 24px rgba(67, 50, 91, .05); }
.mode-tab, button, input, dialog textarea { border-radius: 6px; }
.panel-heading { border-radius: 8px 8px 0 0; }
@media (max-width: 1050px) {
  .workspace { height: auto; min-height: 0; grid-template-columns: 280px 1fr; }
  .preview-panel { grid-column: 1 / -1; min-height: 620px; }
}
@media (max-width: 720px) {
  .app-header p { display: none; }
  .app-header h1 { font-size: 18px; }
  .app-header h1 span, .app-header h1 b { display: none; }
  .server-state { max-width: 72px; line-height: 1.25; }
  .mode-tabs { overflow-x: auto; }
  .mode-tab { min-width: 108px; }
  .workspace { display: flex; flex-direction: column; padding: 7px; }
  .controls, .data-panel, .preview-panel { width: 100%; }
  .data-panel { min-height: 480px; }
  .preview-panel { min-height: 460px; }
  .preview-stage.has-image { padding-top: 14px; }
}