/**
 * 计算器页面主题桥接：与 HyperSimWeb theme.css 对齐
 * 工具页原有变量名 --bg / --card / --text / --muted / --accent 等
 */

html.tool-hs-light {
  --bg: #f6f8fb;
  --card: #ffffff;
  --panel: #ffffff;
  --surface-inset: #eef2f7;
  --text: #1c2533;
  --muted: #5a6a7e;
  --caption: #3d4d61;
  --accent: #1565c0;
  --accent-subtle: rgba(21, 101, 192, 0.1);
  --accent2: #c62828;
  --formula: #0d47a1;
  --ok: #2e7d32;
  --warn: #b45309;
  --bad: #c62828;
  --border: #d5dde8;
  --border-strong: #a8b8cc;
  --shadow-sm: 0 1px 3px rgba(28, 37, 51, 0.08);
  --font-sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --btn-primary-start: #1565c0;
  --btn-primary-end: #42a5f5;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #e8eef5;
  --btn-secondary-text: var(--caption);
  --btn-secondary-hover-border: var(--border-strong);
  --chart-axis: var(--caption);
  --chart-grid: rgba(28, 37, 51, 0.12);
  --chart-title: var(--text);
  --chart-series-a: #1565c0;
  --chart-series-a-light: #42a5f5;
  --chart-series-b: #c62828;
  --chart-series-c: #2e7d32;
  --chart-series-c-alt: #0e7490;
  --chart-marker-warn: rgba(180, 83, 9, 0.92);
  --chart-marker-warn-dim: rgba(180, 83, 9, 0.45);
  --chart-region-0: rgba(180, 83, 9, 0.18);
  --chart-region-1: rgba(198, 40, 40, 0.14);
  --chart-region-2: rgba(21, 101, 192, 0.14);
  --schematic-bg: var(--surface-inset);
  --schematic-border: var(--border);
  --result-section-bg: var(--surface-inset);
  --hud-bg: rgba(255, 255, 255, 0.92);
  --hud-border: rgba(28, 37, 51, 0.2);
  --hud-text: var(--text);
  --hud-accent: var(--chart-series-a-light);
  --schematic-canvas-bg: var(--surface-inset);
  --schematic-canvas-border: var(--border);
}

html.tool-hs-dark {
  --bg: #0f172a;
  --card: #1e293b;
  --panel: #1e293b;
  --surface-inset: #101835;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --caption: #c3cff5;
  --accent: #38bdf8;
  --accent-subtle: rgba(56, 189, 248, 0.15);
  --accent2: #f87171;
  --formula: #93c5fd;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(160, 180, 255, 0.25);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
  --font-sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --btn-primary-start: #2563eb;
  --btn-primary-end: #4da3ff;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #1a2332;
  --btn-secondary-text: var(--caption);
  --btn-secondary-hover-border: var(--border-strong);
  --chart-axis: #c3cff5;
  --chart-grid: rgba(160, 180, 255, 0.15);
  --chart-title: #d3dcff;
  --chart-series-a: #4da3ff;
  --chart-series-a-light: #7ec8ff;
  --chart-series-b: #ff6b6b;
  --chart-series-c: #33cc88;
  --chart-series-c-alt: #38bdf8;
  --chart-marker-warn: rgba(255, 214, 102, 0.92);
  --chart-marker-warn-dim: rgba(255, 204, 102, 0.55);
  --chart-region-0: rgba(255, 180, 80, 0.22);
  --chart-region-1: rgba(255, 107, 107, 0.18);
  --chart-region-2: rgba(77, 163, 255, 0.18);
  --schematic-bg: #0b1020;
  --schematic-border: #263465;
  --result-section-bg: rgba(16, 24, 53, 0.75);
  --hud-bg: rgba(15, 23, 42, 0.82);
  --hud-border: rgba(148, 163, 184, 0.45);
  --hud-text: rgba(158, 197, 255, 0.95);
  --hud-accent: var(--chart-series-a-light);
  --schematic-canvas-bg: rgba(6, 10, 24, 0.55);
  --schematic-canvas-border: rgba(58, 74, 122, 0.95);
}

html:not(.tool-hs-light):not(.tool-hs-dark) {
  /* 默认深色，与迁移前 API 版一致 */
  --bg: #0f172a;
  --card: #1e293b;
  --panel: #1e293b;
  --surface-inset: #101835;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --caption: #c3cff5;
  --accent: #38bdf8;
  --accent-subtle: rgba(56, 189, 248, 0.15);
  --accent2: #f87171;
  --formula: #93c5fd;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(160, 180, 255, 0.25);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
  --font-sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --btn-primary-start: #2563eb;
  --btn-primary-end: #4da3ff;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #1a2332;
  --btn-secondary-text: var(--caption);
  --btn-secondary-hover-border: var(--border-strong);
  --chart-axis: #c3cff5;
  --chart-grid: rgba(160, 180, 255, 0.15);
  --chart-title: #d3dcff;
  --chart-series-a: #4da3ff;
  --chart-series-a-light: #7ec8ff;
  --chart-series-b: #ff6b6b;
  --chart-series-c: #33cc88;
  --chart-series-c-alt: #38bdf8;
  --chart-marker-warn: rgba(255, 214, 102, 0.92);
  --chart-marker-warn-dim: rgba(255, 204, 102, 0.55);
  --chart-region-0: rgba(255, 180, 80, 0.22);
  --chart-region-1: rgba(255, 107, 107, 0.18);
  --chart-region-2: rgba(77, 163, 255, 0.18);
  --schematic-bg: #0b1020;
  --schematic-border: #263465;
  --result-section-bg: rgba(16, 24, 53, 0.75);
  --hud-bg: rgba(15, 23, 42, 0.82);
  --hud-border: rgba(148, 163, 184, 0.45);
  --hud-text: rgba(158, 197, 255, 0.95);
  --hud-accent: var(--chart-series-a-light);
  --schematic-canvas-bg: rgba(6, 10, 24, 0.55);
  --schematic-canvas-border: rgba(58, 74, 122, 0.95);
}

html.tool-hs-light body {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: var(--text) !important;
}

html.tool-hs-dark body,
html:not(.tool-hs-light):not(.tool-hs-dark) body {
  background: radial-gradient(1200px 600px at 10% 0%, #1e293b, var(--bg)) !important;
  color: var(--text) !important;
}

html.tool-hs-light .card,
html.tool-hs-light [class*="card"] {
  border-color: var(--border) !important;
}

/* 嵌入页脚版权（SEO + 轻度防爬提示） */
.hypersim-tool-footer {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

.hypersim-tool-footer a {
  color: var(--accent);
  text-decoration: none;
}

.hypersim-tool-footer a:hover {
  text-decoration: underline;
}

.vibsight-tool-seo {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 12px;
  text-align: left;
  font-family: var(--font-sans, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
  border-bottom: 1px solid var(--border);
  background: var(--card, var(--bg));
}

.vibsight-tool-seo__crumb {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}

.vibsight-tool-seo__crumb::after {
  content: "/";
  margin-left: 8px;
  color: var(--muted);
  opacity: 0.55;
}

.vibsight-tool-seo__crumb a {
  color: var(--accent);
  text-decoration: none;
}

.vibsight-tool-seo__crumb a:hover {
  text-decoration: underline;
}

.vibsight-tool-seo h1 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
}

.vibsight-tool-seo__lead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vibsight-tool-seo__related {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0 0 0 auto;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vibsight-tool-seo__related a {
  color: var(--accent);
  text-decoration: none;
}

.vibsight-tool-seo__related a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .vibsight-tool-seo__related {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
}

/*
 * 工具页原本按「整屏 100vh」排版。注入顶栏 + 页脚后，
 * 再叠一层 100vh 会把页面撑出视口，底部出现大块空白。
 * 改为：body 锁一屏，主布局只吃剩余高度。
 */
html {
  height: 100dvh !important;
  overflow: hidden !important;
}

html,
body {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
  height: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/*
 * flex-basis: 0 — 主区高度只吃剩余视口，不被侧栏内容撑开。
 * 旧写法 flex-basis: auto + height: auto 会把 asides 的内容高度当成整页高度，
 * 中间列较短时底部就会多出一块空白。
 */
body > .layout,
body > .app-layout {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

body > .layout {
  align-items: stretch !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body > .layout > * {
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow-x: hidden;
  overflow-y: auto;
}

body > .app-layout {
  align-items: stretch !important;
}

body > .app-layout > * {
  min-height: 0 !important;
  align-self: stretch !important;
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 960px) {
  html,
  body {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }

  body > .layout,
  body > .app-layout {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
    grid-template-rows: none;
  }

  body > .layout > *,
  body > .app-layout > * {
    max-height: none !important;
    overflow: visible;
    align-self: auto !important;
  }
}