/* GHC 健康评估工作站主题包：白天（默认医学蓝）/ 科技感（data-theme="tech"）+ 移动端精修
   切换方式：<html data-theme="tech">，由 index.html 尾部脚本驱动，localStorage 记忆 */

/* ========== 科技感版 · 深空冰青（玻璃拟态 + 冰青光晕 + 网格底 + 等宽数字） ========== */
html[data-theme="tech"] {
  --primary: #2fd4c4;
  --primary-deep: #a9f2ea;
  --bright: #4fc3f7;
  --gold: #2fd4c4;
  --gold-soft: rgba(47,212,196,.25);
  --bg: #05090f;
  --card: rgba(255,255,255,.05);
  --line: rgba(120,220,210,.16);
  --ink: #d9f2ee;
  --ink-soft: #7fa8a2;
  --tint: rgba(47,212,196,.1);
  --ok: #43d68f;
  --mid: #e8b04a;
  --high: #ff6a5e;
}
html[data-theme="tech"] body {
  background: #05090f;
  background-image:
    radial-gradient(900px 420px at 72% -8%, rgba(47,212,196,.14), transparent 62%),
    radial-gradient(720px 380px at 8% 32%, rgba(79,195,247,.08), transparent 60%);
  color: #d9f2ee;
}
html[data-theme="tech"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120,220,210,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,220,210,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
html[data-theme="tech"] .topbar,
html[data-theme="tech"] .tabs,
html[data-theme="tech"] main { position: relative; z-index: 1; }
html[data-theme="tech"] .topbar {
  background: linear-gradient(120deg, #041419, #06262e 55%, #07383d);
  border-bottom: 1px solid rgba(47,212,196,.35);
  box-shadow: 0 6px 28px -8px rgba(47,212,196,.18);
}
html[data-theme="tech"] .topbar .logo { background: rgba(47,212,196,.12); border-color: rgba(47,212,196,.4); }
html[data-theme="tech"] .topbar h1 em { color: #7df0e3; }
html[data-theme="tech"] .badge { background: rgba(47,212,196,.1); border-color: rgba(47,212,196,.35); }
html[data-theme="tech"] .theme-toggle { border-color: rgba(47,212,196,.45); background: rgba(47,212,196,.12); }
html[data-theme="tech"] .tabs { background: rgba(6,14,18,.85); border-bottom-color: var(--line); }
html[data-theme="tech"] .tabs button { color: var(--ink-soft); }
html[data-theme="tech"] .tabs button.active { color: #2fd4c4; border-bottom-color: #2fd4c4; }
html[data-theme="tech"] .card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(120,220,210,.16);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 48px -22px rgba(0,0,0,.7);
}
html[data-theme="tech"] .card h3 { color: #c8f4ee; }
html[data-theme="tech"] .card h3::after { background: linear-gradient(90deg, #2fd4c4 0%, #4fc3f7 60%, rgba(79,195,247,0) 100%); }
html[data-theme="tech"] .card h3 .right { color: var(--ink-soft); }
html[data-theme="tech"] .step-no { background: linear-gradient(135deg, #2fd4c4, #128f85); color: #03211d;
  box-shadow: 0 0 14px rgba(47,212,196,.45), inset 0 1px 0 rgba(255,255,255,.3); }
html[data-theme="tech"] input[type="text"],
html[data-theme="tech"] input[type="number"],
html[data-theme="tech"] select {
  background: rgba(5,18,22,.75); border-color: rgba(120,220,210,.24); color: #d9f2ee;
}
html[data-theme="tech"] input::placeholder { color: #4d7a74; }
html[data-theme="tech"] input:focus,
html[data-theme="tech"] select:focus { outline: 2px solid rgba(47,212,196,.35); border-color: #2fd4c4; }
html[data-theme="tech"] select option { background: #07161a; color: #d9f2ee; }
html[data-theme="tech"] .radios label { background: rgba(5,18,22,.75); border-color: rgba(120,220,210,.24); color: var(--ink-soft); }
html[data-theme="tech"] .radios input:checked + span { color: #2fd4c4; }
html[data-theme="tech"] .radios label:has(input:checked) { background: rgba(47,212,196,.14); border-color: #2fd4c4; color: #2fd4c4; }
html[data-theme="tech"] .seg-title { color: #c8f4ee; border-left-color: #2fd4c4;
  background: linear-gradient(90deg, rgba(47,212,196,.16), rgba(47,212,196,0) 78%); }
html[data-theme="tech"] .btn-primary { background: linear-gradient(120deg, #1fb8a9, #2fd4c4); color: #03211d;
  box-shadow: 0 8px 22px -6px rgba(47,212,196,.5); font-weight: 700; }
html[data-theme="tech"] .btn-ghost { background: rgba(47,212,196,.1); color: #7df0e3; border-color: rgba(120,220,210,.3); }
html[data-theme="tech"] .btn-danger { background: rgba(255,106,94,.12); color: #ff8a80; border-color: rgba(255,106,94,.3); }
html[data-theme="tech"] .notice { background: rgba(255,255,255,.04); color: var(--ink-soft); border-color: var(--line); }
html[data-theme="tech"] .notice.footnote { background: rgba(255,255,255,.04); }
html[data-theme="tech"] .consent { color: var(--ink-soft); }
html[data-theme="tech"] .meta-strip { border-top-color: var(--line); }
html[data-theme="tech"] .meta-strip .meta-engine { color: #2fd4c4; }
html[data-theme="tech"] .drv-foot .foot-strip { border-left-color: #2fd4c4;
  background: linear-gradient(90deg, rgba(47,212,196,.16), rgba(47,212,196,0) 80%); }
html[data-theme="tech"] .drv-foot .foot-strip .fs-label { color: #7df0e3; }
html[data-theme="tech"] .drv-foot .foot-strip .fs-val { color: var(--ink); }
html[data-theme="tech"] .bar-row:hover { background: var(--tint); }
html[data-theme="tech"] .bar-row .val { color: #2fd4c4; }
html[data-theme="tech"] .drv-chip { border-color: rgba(120,220,210,.2); background: rgba(255,255,255,.05); color: var(--ink-soft); }
html[data-theme="tech"] .drv-chip.c-high { color: #ff6a5e; border-color: rgba(255,106,94,.3); background: rgba(255,106,94,.1); }
html[data-theme="tech"] .drv-chip.c-mid  { color: #e8b04a; border-color: rgba(232,176,74,.3); background: rgba(232,176,74,.1); }
html[data-theme="tech"] .drv-chip.c-low  { color: #43d68f; border-color: rgba(67,214,143,.3); background: rgba(67,214,143,.1); }
/* 等宽数字：科技感的核心字体语言 */
html[data-theme="tech"] .gauge-box .g-num,
html[data-theme="tech"] .gauge-box .g-num-sm,
html[data-theme="tech"] .verdict .v-pct,
html[data-theme="tech"] .bar-row .val {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  letter-spacing: .5px;
}
/* 数据密集区保留浅底内卡：深空底上悬浮的数据板（gauge SVG 为 JS 硬编码浅色绘制，保留浅底不翻车） */
html[data-theme="tech"] .gauge-box { background: #f4fbfa; border: 1px solid rgba(47,212,196,.3);
  box-shadow: 0 0 0 1px rgba(47,212,196,.08), 0 12px 30px -12px rgba(0,0,0,.6), 0 0 26px -6px rgba(47,212,196,.25); }
html[data-theme="tech"] .gauge-box .g-title,
html[data-theme="tech"] .gauge-box .g-num { color: #0b3f4d; }
html[data-theme="tech"] .gauge-box .g-unit,
html[data-theme="tech"] .gauge-box .g-note { color: #5f7186; }
html[data-theme="tech"] .chat-box { border-color: rgba(120,220,210,.24); }
html[data-theme="tech"] .chat-log {
  background:
    radial-gradient(120% 58% at 90% -6%, rgba(47,212,196,.07), transparent 62%),
    radial-gradient(110% 52% at 4% 104%, rgba(47,212,196,.05), transparent 60%),
    #071519;
}
html[data-theme="tech"] .chat-log::-webkit-scrollbar-thumb { background: rgba(47,212,196,.25); }
html[data-theme="tech"] .chat-input { background: rgba(5,18,22,.75); border-top-color: rgba(120,220,210,.25); }
html[data-theme="tech"] .chat-input input { background: rgba(5,18,22,.8); color: #d9f2ee; border-color: rgba(120,220,210,.3); }
/* 气泡：AI=玻璃浮卡，用户=冰青渐变 */
html[data-theme="tech"] .msg-row.bot .bubble {
  background: rgba(255,255,255,.055); border-color: rgba(120,220,210,.24); color: var(--ink);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
html[data-theme="tech"] .msg-row.bot .bubble::before {
  background: rgba(255,255,255,.055); border-left-color: rgba(120,220,210,.24); border-bottom-color: rgba(120,220,210,.24);
}
html[data-theme="tech"] .msg-row.user .bubble { background: linear-gradient(120deg, #1fb8a9, #2fd4c4); color: #03211d; }
html[data-theme="tech"] .msg-row.user .bubble::before { background: #1fb8a9; }
html[data-theme="tech"] .bubble b { color: #2fd4c4; }
html[data-theme="tech"] .msg-row.user .bubble b { color: #03211d; }
/* 头像：科技主题下 AI 头像加霓虹发光 */
html[data-theme="tech"] .avatar.ai {
  background: linear-gradient(135deg, #0d6f7d 0%, #13b0a4 55%, #2fd4c4 100%);
  box-shadow: 0 0 0 1px rgba(47,212,196,.35), 0 6px 16px -6px rgba(0,0,0,.7), 0 0 20px -4px rgba(47,212,196,.55);
}
html[data-theme="tech"] .avatar.me { background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.06)); box-shadow: 0 0 0 1px rgba(120,220,210,.2); }
html[data-theme="tech"] .src { color: #5f8f8a; }
html[data-theme="tech"] .typing i { background: #2fd4c4; }
html[data-theme="tech"] .quick-asks { background: rgba(5,18,22,.75); }
html[data-theme="tech"] .quick-asks button { background: rgba(47,212,196,.1); border-color: rgba(120,220,210,.28); color: #7df0e3; }
html[data-theme="tech"] .quick-asks button:hover { background: rgba(47,212,196,.2); border-color: #2fd4c4; }

/* ========== 主题切换按钮 ========== */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.14);
  color: #fff; cursor: pointer; padding: 0; transition: transform .2s, background .2s;
}
.theme-toggle:hover { transform: scale(1.08); background: rgba(255,255,255,.22); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }

/* ========== 移动端精修公共层（双主题共用，<=640px 生效） ========== */
@media (max-width: 640px) {
  main { padding: 20px 14px 76px; }
  .topbar { padding: 13px 14px; gap: 10px; }
  .topbar h1 { font-size: 15px; letter-spacing: .2px; }
  .topbar .sub { font-size: 9.5px; letter-spacing: 1.5px; }
  .topbar .logo { width: 36px; height: 36px; border-radius: 9px; }
  .badge { font-size: 10px; padding: 4px 9px; }
  .tabs { padding: 0 6px; }
  .tabs button { padding: 13px 13px; font-size: 13.5px; }
  .card { padding: 22px 16px; border-radius: 16px; }
  .card h3 {
    font-size: 17px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: nowrap;          /* 标题行与 ①③ 保持同一结构：主标题 + 右侧副标题 */
    line-height: 1.35;
  }
  .card h3 .step-no { flex: 0 0 auto; }              /* 序号徽章不压缩 */
  .card h3 > .right {                                 /* 副标题自动占剩余宽度并右对齐 */
    margin-left: auto; font-size: 11px; flex: 0 1 auto;
    text-align: right; white-space: nowrap;
    max-width: 50%; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: 0;
  }
  .form-card, .grid-result { margin-bottom: 54px; }

  /* ===== 结果区出图后撑破页面宽度的根因修复 =====
     grid/flex 子项默认 min-width:auto，内部内容（仪表圈/数字/条形）最小宽度会把
     列撑到 453px（超出 390 视口）。给子项加 min-width:0 允许其收缩。 */
  .grid-result > * { min-width: 0; }
  .grid-result, #resultSection, #resultBody { min-width: 0; max-width: 100%; }
  .tri-gauges > * { min-width: 0; }
  .bars, .bar-row { min-width: 0; }
  .bar-row { margin: 0; grid-template-columns: 78px 1fr 46px; }   /* 去掉负 margin，防止撑破容器 */
  .verdict > * { min-width: 0; }
  /* 仪表圈/条形图整体锁定在容器内，禁止横向溢出 */
  .tri-gauges { width: 100%; max-width: 100%; }
  .gauge-box { max-width: 100%; box-sizing: border-box; overflow: hidden; }
  .gauge-box svg { max-width: 100%; height: auto; }
  /* 条形备注文字过长时省略，避免撑宽行 */
  .bar-row .name, .bar-row .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ===== 彩虹圈（仪表盘）撑破卡片宽度的根因修复 =====
     index.html 里 <svg id="gaugeXxx" width="200" height="126"> 属性是硬编码的，
     手机端卡片内宽仅 328px、三列 grid 每列约 100px，SVG 死扛 200px 直接把行撑到 419px。
     修法：CSS 覆盖 HTML 属性（CSS 优先级高于 width/height 表现属性），锁定 100% 自适应。 */
  .gauge-box svg[id^="gauge"] {
    width: 100% !important;
    max-width: 200px;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
  /* meta-strip（样本号/性别/年龄/阈值 长文本）强制换行，防止撑宽 */
  .meta-strip { flex-wrap: wrap; word-break: break-word; overflow-wrap: anywhere; min-width: 0; }
  .meta-strip > * { min-width: 0; }
  /* 引擎标签原本 white-space:nowrap 强制不换行 → 长引擎名把卡片撑到 419px 的元凶 */
  .meta-strip .meta-engine, .meta-engine {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    flex: 1 1 100%;
  }
  .score-note, .score-wrap { min-width: 0; overflow-wrap: anywhere; }
  .engine-tag { overflow-wrap: anywhere; word-break: break-word; }
  .fgroup { margin-bottom: 16px; }
  .fgroup > label, .fgroup > .fg-label { font-size: 14.5px; }
  .fgroup .hint { font-size: 12px; }
  input[type="text"], input[type="number"], select {
    height: 46px; font-size: 16px; border-radius: 10px; padding: 10px 13px;
  }
  .radios label { padding: 12px 6px; font-size: 14.5px; border-radius: 10px; min-width: 62px; }
  .seg-title { font-size: 13.5px; }
  .btn { height: 48px; font-size: 16px; border-radius: 12px; letter-spacing: 2px; }
  .submit-bar { padding-top: 18px; gap: 12px; }
  .gauge-box { padding: 16px 8px 18px; border-radius: 14px; }
  .gauge-box .g-num { font-size: 46px; }
  .gauge-box .g-num-sm { font-size: 36px; }
  .gauge-box .g-title { font-size: 15px; }
  .gauge-box .g-note { font-size: 12px; }
  .verdict { padding: 18px; gap: 14px; border-radius: 14px; }
  .verdict .v-pct { font-size: 44px; }
  .verdict .v-title { font-size: 17px; }
  .verdict .v-advice { font-size: 13.5px; }
  .bar-row { font-size: 13.5px; grid-template-columns: 92px 1fr 54px; padding: 6px 4px; }
  .drv-chip { font-size: 12.5px; padding: 4px 12px; }
  .meta-strip { font-size: 12px; }
  .chat-log { height: 360px; padding: 15px 11px 13px; gap: 15px; }
  .avatar { width: 40px; height: 40px; border-radius: 13px; }
  .bubble { max-width: 82%; font-size: 14.4px; line-height: 1.76; padding: 10px 13px; }
  .quick-asks { padding: 11px 10px 2px; }
  .quick-asks button { font-size: 13px; padding: 7px 13px; }
  .chat-input input { height: 44px; }
  .chat-input button { height: 44px; }
  .consent { font-size: 12.5px; }
}