:root {
  --ink: #1e293b;
  --ink-dim: #64748b;
  --ink-faint: #94a3b8;
  --line: rgba(15, 23, 42, 0.10);
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #ffffff;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --warn: #dc2626;
  --shadow: 0 12px 32px rgba(2, 6, 23, 0.30), 0 2px 6px rgba(2, 6, 23, 0.18);
  /* 界面自适应：--uiW 由屏幕宽度决定，--uiH 由屏幕高度决定，乘积即统一缩放系数 --ui。
     所有界面尺寸都乘以 --ui，于是整体随屏幕等比缩放，小屏不挤、大屏不空旷。 */
  --uiW: 1;
  --uiH: 1;
  --ui: calc(var(--uiW) * var(--uiH));
  --r: calc(14px * var(--ui));
  --tb-h: calc(58px * var(--ui));
  /* 卡片表头统一规格（v3.6）：所有浮窗表头共用同一套高度 / 内边距 / 主题标记 */
  --head-h: calc(38px * var(--ui));
  --hy: calc(9px * var(--ui));
  --hx: calc(14px * var(--ui));
  --accent-bar: linear-gradient(180deg, #2563eb, #22d3ee);
  /* 浮窗停靠高度：由 JS 依视图实测写入（三窗/综合视图需下移到窗格标题条之下）。
     这里给纯 CSS 兜底值，保证脚本未执行时浮窗也不会压住标题条。 */
  --dock-top: calc(var(--tb-h) + 12px * var(--ui));
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #05070d;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: calc(13px * var(--ui));
  -webkit-font-smoothing: antialiased;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gl.grabbing { cursor: grabbing; }

/* ---------- 视窗框 ---------- */
#panes { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.pane {
  position: absolute; display: none; flex-direction: column; gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
}
.pane.on { display: flex; }
.pane > span { position: absolute; }
/* 窗格表头：与综合视图子窗口表头（.ccell-h）同款 */
.pane .pane-h {
  height: 30px; display: flex; align-items: center; padding: 0 10px; flex: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: 11px 11px 0 0; user-select: none;
}
.pane .pane-h span {
  position: relative; padding-left: 9px;
  font-size: 15px; font-weight: 600; color: #eaf2ff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6); letter-spacing: .4px;
}
/* 统一的表头语言：左侧一小段主题色竖条（浅色卡片与深色窗格共用） */
.pane .pane-h span::before, #comboUI .ccell-h span::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2.5px; height: 12px; border-radius: 999px;
  background: linear-gradient(180deg, #60a5fa, #22d3ee);
}
/* 提示文字：与标题同处一行（不再单独占一行，浮窗可以紧贴表头下方停靠） */
.pane .p-hint {
  margin-left: 10px; font-size: 11px; font-style: normal; font-weight: 400;
  color: rgba(226, 240, 255, 0.62); letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ---------- 可拖动分隔条 ---------- */
.splitter { position: fixed; z-index: 11; display: none; }
.splitter.on { display: block; }
.splitter i {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 999px; background: rgba(37, 99, 235, .45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); transition: background .15s ease;
}
.splitter.vert { cursor: col-resize; width: 10px; }
.splitter.vert i { width: 4px; height: 46px; }
.splitter.horz { cursor: row-resize; height: 10px; }
.splitter.horz i { height: 4px; width: 46px; }
.splitter:hover i, .splitter.drag i { background: rgba(37, 99, 235, .9); box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
body.resizing { user-select: none; cursor: grabbing; }

/* ---------- 面板通用 ---------- */
.card {
  position: fixed; z-index: 10;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
#optsCard.collapsed .card-body { display: none; }

/* ---------- 卡片表头（v3.6 统一规格） ----------
   1) 满宽出血：用负外边距抵消卡片自身的内边距，表头横贯整张卡片，
      不再出现“白色表头浮在卡片里、右侧留一条缝”的观感；
   2) 顶部圆角跟随卡片内圆角，避免表头方角戳出卡片圆角；
   3) 统一构成：左侧主题色竖条 + 图标 + 标题 + 摘要胶囊 + 右侧折叠胶囊按钮。 */
.card > .card-head {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; gap: calc(9px * var(--ui));
  min-height: var(--head-h);
  margin: 0 calc(-1 * var(--pad-x, 0px)) 0;
  padding: var(--hy) var(--hx);
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  background:
    radial-gradient(140% 190% at 0% 0%, rgba(37, 99, 235, .14), rgba(37, 99, 235, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(244, 248, 255, .97));
  border-bottom: 1px solid rgba(15, 23, 42, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
  cursor: grab; user-select: none;
}
.card-head h2 {
  position: relative; margin: 0; padding-left: calc(11px * var(--ui));
  display: inline-flex; align-items: center; gap: calc(5px * var(--ui));
  font-size: calc(13px * var(--ui)); font-weight: 700; letter-spacing: .3px;
  color: #0f172a; line-height: 1.25; white-space: nowrap;
}
.card-head h2::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: calc(3px * var(--ui)); height: calc(15px * var(--ui)); border-radius: 999px;
  background: var(--accent-bar);
  box-shadow: 0 0 0 calc(2.5px * var(--ui)) rgba(37, 99, 235, .10);
}
.hd-ico { font-style: normal; font-size: calc(13px * var(--ui)); line-height: 1; }
/* 表头摘要（时间 / 观测点）：主题色浅胶囊，替代原来的灰色小字 */
.card-head > output {
  flex: 0 1 auto; min-width: 0;
  padding: calc(2px * var(--ui)) calc(9px * var(--ui));
  border: 1px solid rgba(37, 99, 235, .16); border-radius: 999px;
  background: rgba(37, 99, 235, .08); color: #1d4ed8;
  font-size: calc(11px * var(--ui)); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* 折叠 / 展开：胶囊按钮 + 状态箭头（展开态朝上、折叠态朝下） */
.card-head .link {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: calc(5px * var(--ui));
  padding: calc(3px * var(--ui)) calc(10px * var(--ui));
  border: 1px solid rgba(37, 99, 235, .22); border-radius: 999px;
  background: rgba(37, 99, 235, .07); color: #1d4ed8;
  font-size: calc(11.5px * var(--ui)); font-weight: 600; line-height: 1.3;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.card-head .link::before {
  content: ""; width: calc(5.5px * var(--ui)); height: calc(5.5px * var(--ui));
  border-right: calc(1.8px * var(--ui)) solid currentColor;
  border-bottom: calc(1.8px * var(--ui)) solid currentColor;
  transform: rotate(-135deg) translate(-1px, -1px); transition: transform .18s ease;
}
.card-head .link:hover { background: rgba(37, 99, 235, .16); border-color: rgba(37, 99, 235, .38); }
.card-head .link:active { transform: translateY(1px); }
#optsCard.collapsed .card-head .link::before,
#timeCard.min .card-head .link::before,
#geoInfo.gi-min .card-head .link::before { transform: rotate(45deg) translate(-2px, -2px); }

/* ---------- 点标注列表 ---------- */
.pt-list { display: flex; flex-direction: column; gap: 3px; max-height: 168px; overflow-y: auto; }
.pt-row { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 7px; background: rgba(122,162,255,0.07); }
.pt-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 5px rgba(255,176,32,0.55); }
.pt-txt { flex: 1; font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.pt-del { flex: none; }
.pt-empty { font-size: 11px; color: var(--ink-dim); padding: 2px 0; }

/* ---------- 顶部标题栏（v3.6：沉浸式横贯窗口顶端） ---------- */
#titleBar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--tb-h); z-index: 15;
  display: flex; align-items: center; gap: 13px; padding: 0 20px;
  background:
    radial-gradient(140% 260% at 6% -60%, rgba(37, 99, 235, .26), rgba(37, 99, 235, 0) 62%),
    linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(241, 246, 255, .92) 46%, rgba(255, 255, 255, .95) 100%);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 20px rgba(2, 6, 23, .22);
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  user-select: none;
}
/* 顶部高光：让标题栏“贴住”窗口最上沿 */
#titleBar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 20%, rgba(255,255,255,.95) 80%, rgba(255,255,255,0));
}
/* 底端主题渐变线：标题栏与场景之间的“沉浸”过渡 */
#titleBar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; opacity: .8; pointer-events: none;
  background: linear-gradient(90deg, rgba(37,99,235,0) 0%, rgba(37,99,235,.62) 16%, rgba(34,211,238,.68) 58%, rgba(37,99,235,0) 100%);
}
.title-badge {
  width: 38px; height: 38px; flex: none; border-radius: 11px; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #2563eb, #22d3ee);
  display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}
.tb-text h1 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.tb-text p { margin: 2px 0 0; font-size: 10.5px; color: var(--ink-dim); letter-spacing: .3px; white-space: nowrap; }
/* 单窗 / 三窗：只在“自转演示”视图显示（其余视图无此概念） */
#segMode { display: none; }
body[data-view="rotate"] #segMode { display: flex; }

/* ---------- 时间面板 ---------- */
#timeCard {
  right: 16px; top: var(--dock-top); width: 336px; padding: 0 16px 12px;
  display: flex; flex-direction: column; gap: 10px; transition: opacity .2s ease;
  /* 高度上限：不超过窗口下沿，且不越过下方窗格标题文字（--cap 由 JS 按综合视图
     里实际标题位置写入）；内容超高时面板内部滚动，标题始终可见 */
  /* 高度上限：不超过窗口下沿，且不越过下方窗格标题文字（--cap 由 JS 按综合视图
     里实际标题位置写入）；内容超高时面板内部滚动，标题始终可见。
     先写普通 calc() 兜底，再写 min() 版本 —— 不支持 min() 的内核会保留前一条 */
  max-height: calc(100vh - var(--dock-top) - 12px);
  max-height: min(var(--cap, 100vh), calc(100vh - var(--dock-top) - 12px));
  overflow-y: auto;
  /* 面板自身可滚动：触摸设备允许纵向原生滚动 */
  touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  --pad-x: calc(16px * var(--ui)); --hx: calc(16px * var(--ui));
}
#timeCard.fade { opacity: .28; }
/* 折叠态：只留标题行。宽度 auto → 收缩到内容（图标+标题+摘要胶囊+按钮）实际所需宽度，
   既不截断摘要，也不留多余空白（内容自适应排版） */
#timeCard.min { width: auto; }
#timeCard.min .t-block, #timeCard.min .terms,
#timeCard.min .term-note, #timeCard.min .sb, #timeCard.min .facts { display: none; }
/* 浮窗拖拽 */
.card.grabbing { cursor: grabbing; box-shadow: 0 10px 34px rgba(15, 23, 42, .22); }
.card.grabbing .card-head { cursor: grabbing; }
#timeCard.grabbing { opacity: 1 !important; }
.t-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#tDate { font-size: 15px; font-weight: 700; }
#tClock { font-size: 26px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; line-height: 1.1; color: #0f172a; }
.t-sub { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-dim); }
.link {
  border: 0; background: none; color: var(--accent); font-size: 11.5px; cursor: pointer; padding: 2px 4px; border-radius: 6px;
  font-family: inherit;
}
.link:hover { background: var(--accent-soft); }

.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.term {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .7); border-radius: 9px; padding: 5px 2px; cursor: pointer;
  text-align: center; font-family: inherit; transition: .15s;
}
.term .n { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.term .d { display: block; font-size: 10px; color: var(--ink-faint); margin-top: 1px; font-variant-numeric: tabular-nums; }
.term:hover { border-color: rgba(37, 99, 235, .45); background: #fff; }
.term.active { background: var(--accent); border-color: var(--accent); }
.term.active .n, .term.active .d { color: #fff; }
.term-note { font-size: 11px; color: var(--ink-dim); margin-top: -2px; }

.sb { display: flex; flex-direction: column; gap: 3px; }
.sb-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; }
.sb-head label { color: var(--ink-dim); }
.sb-head .dim { color: var(--ink-faint); }
.sb-head output { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.ticks { position: relative; height: 24px; margin-top: -1px; }
.ticks .tk { position: absolute; transform: translateX(-50%); font-size: 9.5px; color: var(--ink-faint); top: 0; white-space: nowrap; }
.ticks .tk::before {
  content: ""; position: absolute; left: 50%; top: -5px; width: 1px; height: 3px; background: rgba(100, 116, 139, .5);
}
.ticks .tk.t2 { top: 11px; }
.ticks .tk.t2::before { top: -4px; height: 3px; }
.ticks .tk.key { color: var(--accent); font-weight: 700; font-size: 10.5px; }
.ticks .tk.key::before { background: var(--accent); height: 4px; width: 1.5px; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; border-top: 1px dashed var(--line); padding-top: 9px; }
.facts div { text-align: center; min-width: 0; }
.facts .fact-wide { grid-column: 1 / -1; }
.facts b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; color: #0f172a; }
.facts i { display: block; font-style: normal; font-size: 10px; color: var(--ink-faint); margin-top: 1px; }

/* ---------- 显示设置 ---------- */
/* v3.6：滚动从卡片移到 .card-body，表头独立于滚动区 —— 表头不再被内容“穿透”，
   右侧也不会再被滚动条挤出一条缝。 */
#optsCard {
  left: 16px; top: var(--dock-top); width: 292px;
  /* --cap（JS 写入）＝ 下方窗格标题文字的上沿，保证铺满全窗时标题不被压住
     （同样先写 calc() 兜底、再写 min() 版本） */
  max-height: calc(100vh - var(--tb-h) - 130px);
  max-height: min(var(--cap, 100vh), calc(100vh - var(--tb-h) - 130px));
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  --pad-x: 0px; --hx: calc(14px * var(--ui));
}
#optsCard .card-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  /* 触摸设备上允许纵向原生滚动（此前被浮窗拖动逻辑劫持 → 无法滑动） */
  touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(8px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui));
  display: flex; flex-direction: column; gap: calc(4px * var(--ui));
}
/* 一级分区（可折叠）：光照系统 / 经纬与特殊纬线 / 五带 / 公转 / 文字 / 观测点 / 数据面板 / 表层 */
.sect { border: 1px solid var(--line); border-radius: 11px; margin: 3px 0; overflow: hidden; background: rgba(255,255,255,.55); }
.sect.open { background: #fff; }
.sect-h {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, rgba(37,99,235,.07), rgba(37,99,235,.02)); border-bottom: 1px solid var(--line);
}
.sect:not(.open) > .sect-h { border-bottom: 0; }
.sect-h:hover { background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(37,99,235,.05)); }
.sect-ico { font-size: 13px; line-height: 1; flex: none; }
.sect-t { font-size: 12px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.sect-sub {
  font-size: 10px; color: var(--ink-faint); margin-left: auto; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 118px;
}
.sect-h::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.7px solid #64748b; border-bottom: 1.7px solid #64748b;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; opacity: .85;
}
.sect:not(.open) > .sect-h::after { transform: rotate(-45deg) translateY(-1px); }
.sect:not(.open) > *:not(.sect-h) { display: none; }
.sect-b { padding: 4px 9px 6px; }
.sect-b > .grp:first-child { padding-top: 6px; }
.sect-b > .grp:last-child { border-bottom: 0; padding-bottom: 2px; }
/* 仅在虚线模式下可用的行（实线时置灰并禁用） */
.row.locked { opacity: .42; }
.row.locked input { pointer-events: none; }
.btn-row.wrap { flex-wrap: wrap; gap: 6px; }
.btn.xs.danger { color: var(--warn); border-color: rgba(220,38,38,.4); }
.btn.xs.danger:hover { background: rgba(220,38,38,.08); }
.grp { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.grp:last-child { border-bottom: 0; }
.grp-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; color: #0f172a; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.grp-title::after, .sub-title::after {
  content: ""; margin-left: auto; flex: none; width: 7px; height: 7px;
  border-right: 1.6px solid #94a3b8; border-bottom: 1.6px solid #94a3b8;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; opacity: .8;
}
.grp:not(.open) > .grp-title::after, .sub-grp:not(.open) > .sub-title::after { transform: rotate(-45deg) translateY(-1px); }
.grp-title:hover, .sub-title:hover { color: #1d4ed8; }
.grp:not(.open) > *:not(.grp-title) { display: none; }
.sub-grp:not(.open) > *:not(.sub-title) { display: none; }
.sub-grp { margin: 8px 0 6px; padding: 7px 9px; border-radius: 10px; background: rgba(15, 23, 42, .035); border: 1px solid rgba(15,23,42,.06); }
.sub-title { font-size: 11px; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; cursor: pointer; user-select: none; }
.sub-title::after { margin-left: auto; }
.row select {
  flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; font-family: inherit; font-size: 11.5px;
  background: #fff; color: var(--ink);
}
.row input[type=color] {
  width: 30px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer;
}
.clr-hex { font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.k { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.k.sw-pd { background: #ffd166; }
.k.sw-pn { background: #5b8def; }
.k.sw-dawn { background: #ffd23f; }
.k.sw-dusk { background: #ff7a45; }
.k.sw-eq { background: #ffffff; border: 1px solid rgba(15,23,42,.25); }
.k.sw-tr { background: #ffc94d; }
.k.sw-ar { background: #6ec1ff; }

.btn-row { display: flex; align-items: center; gap: 8px; padding: 4px 0 0; }
.btn.mini { padding: 5px 10px; font-size: 11.5px; }
.dim { font-size: 10.5px; color: var(--ink-faint); }

/* 开关 */
.sw { display: flex; align-items: center; gap: 9px; padding: 4px 0; cursor: pointer; user-select: none; }
.sw input { display: none; }
.sw .track {
  width: 32px; height: 18px; border-radius: 10px; background: rgba(100, 116, 139, .32); position: relative; flex: none;
  transition: background .18s;
}
.sw .track::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 2px; left: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .18s;
}
.sw input:checked + .track { background: var(--accent); }
.sw input:checked + .track::after { transform: translateX(14px); }
.sw-label { font-size: 12px; }

/* 滑块 */
input[type=range] {
  -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(37,99,235,.55), rgba(37,99,235,.18));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -5px;
  border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(2,6,23,.25);
}
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(37,99,235,.4); }
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--accent);
}

/* ---------- 底部控制条 ---------- */
#controlBar {
  position: fixed; z-index: 12; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; row-gap: 8px; padding: 10px 16px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center;
}
/* 折叠按钮：位于控制条窗口内右上角 */
.cb-toggle {
  position: absolute; top: 5px; right: 8px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .65); color: var(--ink-faint);
  border-radius: 999px; padding: 1px 9px; font-size: 10.5px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .15s, border-color .15s; white-space: nowrap; flex: none;
}
.cb-toggle:hover { color: #1d4ed8; border-color: rgba(37, 99, 235, .45); }
.cb-toggle .arr { display: inline-block; transition: transform .25s; font-size: 9px; line-height: 1; }
#controlBar.min { padding: 6px 12px; }
#controlBar.min .cb-group, #controlBar.min .cb-sep { display: none; }
#controlBar.min .cb-toggle { position: static; }
#controlBar.min .cb-toggle .arr { transform: rotate(180deg); }
.cb-group { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.cb-sep { width: 1px; height: 26px; background: var(--line); flex: none; }
.cb-cap { font-size: 11.5px; color: var(--ink-faint); flex: none; letter-spacing: .5px; }
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; padding: 6px 13px;
  font-size: 12.5px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  height: 31px; transition: .15s; white-space: nowrap;
}
.btn:hover { border-color: rgba(37,99,235,.5); color: var(--accent); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.xs { height: 27px; padding: 4px 10px; font-size: 12px; }
.btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.unit { font-size: 11px; color: var(--ink-dim); min-width: 22px; }
.btn.play { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 88px; justify-content: center; }
.btn.play:hover { background: #1d4ed8; color: #fff; }
.btn.warn { color: var(--warn); }
.btn.warn:hover { border-color: rgba(220,38,38,.5); background: rgba(220,38,38,.06); color: var(--warn); }
.speed { display: flex; align-items: center; gap: 8px; }
.speed label { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }
.speed input[type=range] { width: 110px; }
.speed output { font-size: 11.5px; min-width: 124px; color: var(--ink); font-variant-numeric: tabular-nums; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; flex: none; }
.seg button {
  border: 0; background: none; padding: 6px 14px; height: 29px; font-size: 12.5px; font-family: inherit;
  cursor: pointer; color: var(--ink-dim); white-space: nowrap; transition: .15s;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--accent); background: rgba(37, 99, 235, .06); }
.seg button.on { background: var(--accent); color: #fff; }
.grp-tip { margin: 8px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--ink-dim); }

/* ---------- loading ---------- */
#loading {
  position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 18px; border-radius: 12px; background: rgba(15,23,42,.82); color: #e2e8f0; font-size: 13px;
  letter-spacing: .5px; transition: opacity .4s; pointer-events: none;
}
#loading.hide { opacity: 0; }

/* 滚动条（滚动区已移至 .card-body，表头不再被滚动条挤窄） */
#optsCard .card-body::-webkit-scrollbar { width: 10px; }
#optsCard .card-body::-webkit-scrollbar-thumb { background: rgba(100,116,139,.45); border-radius: 5px; }
#optsCard .card-body::-webkit-scrollbar-track { background: transparent; }
#optsCard .card-body { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }

/* ---------- 标题栏视图切换 ---------- */
#titleBar .title-views { margin-left: auto; }
#titleBar .seg { height: 30px; }
#titleBar .seg button { height: 28px; padding: 0 14px; font-size: 12px; }

/* ---------- 综合视图窗口管理器 ---------- */
#comboUI { position: fixed; inset: 0; z-index: 6; display: none; pointer-events: none; }
#comboUI.on { display: block; }
#comboUI .ccell {
  position: absolute; background: transparent; border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; overflow: hidden; pointer-events: none;
}
#comboUI .ccell-h {
  height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border-bottom: 1px solid rgba(255,255,255,.12); cursor: pointer; user-select: none; pointer-events: auto;
}
#comboUI .ccell-h span { position: relative; padding-left: 9px; font-size: 15px; font-weight: 700; color: #eaf2ff; text-shadow: 0 1px 3px rgba(0,0,0,.6); letter-spacing: .5px; }
#comboUI .ccell-x {
  border: 0; background: rgba(255,255,255,.14); color: #eaf2ff; border-radius: 6px; width: 22px; height: 20px;
  font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit;
}
#comboUI .ccell-x:hover { background: rgba(255,255,255,.3); }
#comboUI .cdiv { position: absolute; z-index: 7; pointer-events: auto; }
#comboUI .cdiv:hover { background: rgba(37,99,235,.25); }
#comboUI .cdiv#spV, #comboUI .cdiv#spV2 { width: 8px; cursor: col-resize; }
#comboUI .cdiv#spL1, #comboUI .cdiv#spR1 { height: 8px; cursor: row-resize; }

/* ---------- 观测点数据面板（默认时间面板左侧；风格与其它浮窗一致，可折叠 / 拖动） ---------- */
#geoInfo {
  z-index: 20; display: none; width: 344px; max-width: 412px;
  padding: 0 14px 10px; font-size: 12.5px; line-height: 1.5;
  max-height: calc(100vh - var(--dock-top) - 12px);
  max-height: min(var(--cap, 100vh), calc(100vh - var(--dock-top) - 12px));
  overflow-y: auto;
  touch-action: pan-y; overscroll-behavior: contain;
  --pad-x: calc(14px * var(--ui)); --hx: calc(14px * var(--ui));
}
#geoInfo.on { display: block; }
/* 折叠态：只留标题行（宽度同上，保证表头摘要不被截断） */
#geoInfo.gi-min { width: auto; }
#geoInfo.gi-min .gi-body { display: none; }
#geoInfo .gi-body { display: flex; flex-direction: column; padding-top: 8px; }
#geoInfo .pi { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
#geoInfo .pi-k { flex: none; min-width: 68px; color: var(--ink-dim); font-size: 11.5px; white-space: nowrap; }
/* 数值行一律不换行：面板宽度已按最长行（全年昼长 / 日出日落方位）预留 */
#geoInfo .pi-v { flex: 1; text-align: right; color: var(--ink); font-weight: 600; white-space: nowrap; }
#geoInfo .pi.hero { flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 3px 0; }
#geoInfo .pi.hero .pi-k { min-width: 0; }
#geoInfo .pi-big { font-size: 21px; font-weight: 800; letter-spacing: 1px; color: #b45309; line-height: 1.2; }
#geoInfo .pi-cap { font-size: 11px; color: var(--ink-dim); }
#geoInfo .pi-curve { display: block; padding-top: 6px; }
/* 全年昼长曲线：高度固定、宽度自适应；画布内部分辨率由 JS 按实际显示尺寸 × devicePixelRatio
   重建（此前固定 464×156 内部尺寸 + CSS 拉伸，宽高比不一致导致文字被压扁） */
#geoInfo #cvYearCurve { width: 100%; height: 92px; display: block; }

/* =====================================================================
   自适应（v2.5）：整个界面随屏幕尺寸等比缩放
   ---------------------------------------------------------------------
   --uiW 由屏幕宽度断点决定、--uiH 由屏幕高度断点决定，二者相乘得到统一
   缩放系数 --ui。下面集中覆盖上文各处的固定像素值，使标题栏 / 时间面板 /
   显示设置 / 底部控制条 / 综合视图子窗口在笔记本小屏、低矮窗口、超宽大屏
   上都能完整显示、互不重叠。
   ===================================================================== */

/* --- 宽度断点：越宽的屏放得越大，越窄的屏收得越小（断点留有余量，避免窗口边框导致刚好卡在边界） --- */
@media (min-width: 2400px)                        { :root { --uiW: 1.26; } }
@media (min-width: 2000px) and (max-width: 2399px) { :root { --uiW: 1.16; } }
@media (min-width: 1760px) and (max-width: 1999px) { :root { --uiW: 1.06; } }
@media (min-width: 1560px) and (max-width: 1759px) { :root { --uiW: 1.00; } }
@media (max-width: 1559px)                        { :root { --uiW: 0.94; } }
@media (max-width: 1400px)                        { :root { --uiW: 0.88; } }
@media (max-width: 1240px)                        { :root { --uiW: 0.82; } }
@media (max-width: 1100px)                        { :root { --uiW: 0.75; } }
@media (max-width: 980px)                         { :root { --uiW: 0.68; } }
@media (max-width: 860px)                         { :root { --uiW: 0.60; } }
@media (max-width: 720px)                         { :root { --uiW: 0.52; } }

/* --- 高度断点：低矮窗口进一步收窄，避免面板超出屏幕 --- */
@media (max-height: 940px) { :root { --uiH: 0.97; } }
@media (max-height: 820px) { :root { --uiH: 0.92; } }
@media (max-height: 700px) { :root { --uiH: 0.86; } }
@media (max-height: 600px) { :root { --uiH: 0.78; } }

/* --- 顶部标题栏 --- */
#titleBar { padding: 0 calc(20px * var(--ui)); gap: calc(13px * var(--ui)); }
.title-badge {
  width: calc(38px * var(--ui)); height: calc(38px * var(--ui));
  border-radius: calc(11px * var(--ui)); font-size: calc(12px * var(--ui));
}
.tb-text h1 { font-size: calc(16.5px * var(--ui)); }
.tb-text p { font-size: calc(10.5px * var(--ui)); margin-top: calc(2px * var(--ui)); }
#titleBar .seg { height: calc(30px * var(--ui)); }
#titleBar .seg button { height: calc(28px * var(--ui)); padding: 0 calc(14px * var(--ui)); font-size: calc(12px * var(--ui)); }

/* --- 右侧时间面板 --- */
#timeCard {
  right: calc(16px * var(--ui)); top: var(--dock-top);
  width: calc(336px * var(--ui));
  padding: 0 calc(16px * var(--ui)) calc(12px * var(--ui));
  gap: calc(10px * var(--ui));
  /* max-height 见上方主规则（min(--cap, 视口剩余高度)），此处不再覆盖 */
  --pad-x: calc(16px * var(--ui)); --hx: calc(16px * var(--ui));
}
/* 时间面板自身会滚动（窗口很矮时），表头保持吸附在顶部 */
#timeCard > .card-head { position: sticky; top: 0; }
#timeCard.min { width: auto; }
.t-main { gap: calc(8px * var(--ui)); }
#tDate { font-size: calc(15px * var(--ui)); }
#tClock { font-size: calc(26px * var(--ui)); }
.t-sub { font-size: calc(11px * var(--ui)); }
.link { font-size: calc(11.5px * var(--ui)); padding: calc(2px * var(--ui)) calc(4px * var(--ui)); border-radius: calc(6px * var(--ui)); }
.terms { gap: calc(6px * var(--ui)); }
.term { border-radius: calc(9px * var(--ui)); padding: calc(5px * var(--ui)) calc(2px * var(--ui)); }
.term .n { font-size: calc(12px * var(--ui)); }
.term .d { font-size: calc(10px * var(--ui)); margin-top: calc(1px * var(--ui)); }
.term-note { font-size: calc(11px * var(--ui)); }
.sb { gap: calc(3px * var(--ui)); }
.sb-head { font-size: calc(11.5px * var(--ui)); }
.sb-head output { font-size: calc(12.5px * var(--ui)); }
.ticks { height: calc(24px * var(--ui)); }
.ticks .tk { font-size: calc(9.5px * var(--ui)); }
.ticks .tk.t2 { top: calc(11px * var(--ui)); }
.ticks .tk.key { font-size: calc(10.5px * var(--ui)); }
.facts { gap: calc(7px * var(--ui)) calc(8px * var(--ui)); padding-top: calc(9px * var(--ui)); }
.facts b { font-size: calc(13px * var(--ui)); }
.facts i { font-size: calc(10px * var(--ui)); margin-top: calc(1px * var(--ui)); }

/* --- 左侧显示设置 --- */
#optsCard {
  left: calc(16px * var(--ui)); top: var(--dock-top);
  width: calc(292px * var(--ui));
  max-height: calc(100vh - var(--tb-h) - 130px * var(--ui));
  max-height: min(var(--cap, 100vh), calc(100vh - var(--tb-h) - 130px * var(--ui)));
}
.grp { padding: calc(8px * var(--ui)) 0; }
.sect { border-radius: calc(11px * var(--ui)); margin: calc(3px * var(--ui)) 0; }
.sect-h { gap: calc(6px * var(--ui)); padding: calc(7px * var(--ui)) calc(9px * var(--ui)); }
.sect-ico { font-size: calc(13px * var(--ui)); }
.sect-t { font-size: calc(12px * var(--ui)); }
.sect-sub { font-size: calc(10px * var(--ui)); max-width: calc(118px * var(--ui)); }
.sect-h::after { width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-right-width: calc(1.7px * var(--ui)); border-bottom-width: calc(1.7px * var(--ui)); }
.sect-b { padding: calc(4px * var(--ui)) calc(9px * var(--ui)) calc(6px * var(--ui)); }
.sect-b > .grp:first-child { padding-top: calc(6px * var(--ui)); }
.btn-row.wrap { gap: calc(6px * var(--ui)); }
.grp-title { font-size: calc(12px * var(--ui)); margin-bottom: calc(6px * var(--ui)); gap: calc(6px * var(--ui)); }
.grp-title::after, .sub-title::after { width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-right-width: calc(1.6px * var(--ui)); border-bottom-width: calc(1.6px * var(--ui)); }
.sub-grp { margin: calc(8px * var(--ui)) 0 calc(6px * var(--ui)); padding: calc(7px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(10px * var(--ui)); }
.sub-title { font-size: calc(11px * var(--ui)); gap: calc(6px * var(--ui)); margin-bottom: calc(4px * var(--ui)); }
.grp-tip { font-size: calc(10.5px * var(--ui)); margin: calc(8px * var(--ui)) 0 0; }
.dim { font-size: calc(10.5px * var(--ui)); }
.clr-hex { font-size: calc(10.5px * var(--ui)); }
.btn-row { gap: calc(8px * var(--ui)); padding: calc(4px * var(--ui)) 0 0; }
.btn.mini { padding: calc(5px * var(--ui)) calc(10px * var(--ui)); font-size: calc(11.5px * var(--ui)); }
.k { width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); border-radius: calc(3px * var(--ui)); }

/* 设置项行：标签 + 控件 + 读数对齐排布（原来没有 flex，窄屏下容易错位） */
.row { display: flex; align-items: center; gap: calc(8px * var(--ui)); padding: calc(3px * var(--ui)) 0; }
.row > label { flex: none; width: auto; white-space: nowrap; font-size: calc(11.5px * var(--ui)); color: var(--ink-dim); max-width: 62%; }
.row input[type=range] { flex: 1 1 auto; min-width: 0; }
.row > output { flex: none; min-width: calc(46px * var(--ui)); text-align: right; font-size: calc(11.5px * var(--ui)); font-variant-numeric: tabular-nums; color: var(--ink); }
.row input[type=number] {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: calc(7px * var(--ui));
  padding: calc(3px * var(--ui)) calc(6px * var(--ui)); font-family: inherit; font-size: calc(11.5px * var(--ui));
  background: #fff; color: var(--ink);
}
.row select { font-size: calc(11.5px * var(--ui)); padding: calc(3px * var(--ui)) calc(6px * var(--ui)); border-radius: calc(7px * var(--ui)); }
.row input[type=color] { width: calc(30px * var(--ui)); height: calc(22px * var(--ui)); border-radius: calc(6px * var(--ui)); }
.unit { font-size: calc(11px * var(--ui)); min-width: calc(22px * var(--ui)); }

/* 开关 */
.sw { gap: calc(9px * var(--ui)); padding: calc(4px * var(--ui)) 0; }
.sw .track { width: calc(32px * var(--ui)); height: calc(18px * var(--ui)); border-radius: calc(10px * var(--ui)); }
.sw .track::after { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); top: calc(2px * var(--ui)); left: calc(2px * var(--ui)); }
.sw input:checked + .track::after { transform: translateX(calc(14px * var(--ui))); }
.sw-label { font-size: calc(12px * var(--ui)); }

/* 滑块 */
input[type=range] { height: calc(18px * var(--ui)); }
input[type=range]::-webkit-slider-runnable-track { height: calc(4px * var(--ui)); border-radius: calc(2px * var(--ui)); }
input[type=range]::-webkit-slider-thumb { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); margin-top: calc(-5px * var(--ui)); border-width: calc(2px * var(--ui)); }
input[type=range]::-moz-range-track { height: calc(4px * var(--ui)); }

/* --- 底部控制条 --- */
#controlBar {
  bottom: calc(14px * var(--ui)); gap: calc(12px * var(--ui)); padding: calc(10px * var(--ui)) calc(16px * var(--ui));
  border-radius: calc(16px * var(--ui)); max-width: calc(100vw - 2 * 16px * var(--ui));
}
#controlBar.min { padding: calc(6px * var(--ui)) calc(12px * var(--ui)); }
.cb-toggle { font-size: calc(10.5px * var(--ui)); padding: calc(1px * var(--ui)) calc(9px * var(--ui)); top: calc(5px * var(--ui)); right: calc(8px * var(--ui)); }
.cb-group { gap: calc(8px * var(--ui)); }
.cb-sep { height: calc(26px * var(--ui)); }
.cb-cap { font-size: calc(11.5px * var(--ui)); }
.btn { border-radius: calc(9px * var(--ui)); padding: calc(6px * var(--ui)) calc(13px * var(--ui)); font-size: calc(12.5px * var(--ui)); height: calc(31px * var(--ui)); gap: calc(5px * var(--ui)); }
.btn.xs { height: calc(27px * var(--ui)); padding: calc(4px * var(--ui)) calc(10px * var(--ui)); font-size: calc(12px * var(--ui)); }
.btn.play { min-width: calc(88px * var(--ui)); }
.speed { gap: calc(8px * var(--ui)); }
.speed label { font-size: calc(11.5px * var(--ui)); }
.speed input[type=range] { width: calc(110px * var(--ui)); }
.speed output { font-size: calc(11.5px * var(--ui)); min-width: calc(124px * var(--ui)); }
.seg { border-radius: calc(9px * var(--ui)); }
.seg button { padding: calc(6px * var(--ui)) calc(14px * var(--ui)); height: calc(29px * var(--ui)); font-size: calc(12.5px * var(--ui)); }

/* --- 视窗框标题 --- */
.pane { border-radius: calc(12px * var(--ui)); }
.pane .pane-h { height: calc(30px * var(--ui)); padding: 0 calc(10px * var(--ui)); border-radius: calc(11px * var(--ui)) calc(11px * var(--ui)) 0 0; }
.pane .pane-h span { font-size: calc(15px * var(--ui)); }
.pane .p-hint { left: calc(12px * var(--ui)); top: calc(38px * var(--ui)); font-size: calc(11px * var(--ui)); }

/* --- 综合视图子窗口 --- */
#comboUI .ccell { border-radius: calc(12px * var(--ui)); }
#comboUI .ccell-h { height: calc(30px * var(--ui)); padding: 0 calc(10px * var(--ui)); }
#comboUI .ccell-h span { font-size: calc(15px * var(--ui)); }
#comboUI .ccell-x { width: calc(22px * var(--ui)); height: calc(20px * var(--ui)); font-size: calc(13px * var(--ui)); border-radius: calc(6px * var(--ui)); }

/* --- 观测点数据面板 / 加载提示 --- */
#geoInfo {
  width: calc(344px * var(--ui)); max-width: calc(412px * var(--ui));
  padding: 0 calc(14px * var(--ui)) calc(10px * var(--ui));
  font-size: calc(12.5px * var(--ui));
  --pad-x: calc(14px * var(--ui)); --hx: calc(14px * var(--ui));
}
#geoInfo.gi-min { width: auto; }
#geoInfo .gi-body { padding-top: calc(8px * var(--ui)); }
#geoInfo .pi-k { min-width: calc(68px * var(--ui)); font-size: calc(11.5px * var(--ui)); }
#geoInfo .pi-big { font-size: calc(21px * var(--ui)); }
#geoInfo .pi-cap { font-size: calc(11px * var(--ui)); }
#loading { padding: calc(10px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(12px * var(--ui)); font-size: calc(13px * var(--ui)); }

/* --- 窄屏：压缩标题栏，保证三个视图切换按钮始终可点 --- */
@media (max-width: 1150px) {
  #titleBar { padding: 0 calc(10px * var(--ui)); gap: calc(9px * var(--ui)); }
  #titleBar .title-views.seg button { padding: 0 calc(9px * var(--ui)); }
  .tb-text h1 { white-space: normal; line-height: 1.15; }
}
@media (max-width: 920px) {
  .title-badge { display: none; }
  .tb-text p { display: none; }
}


/* ---------- v4.1 菜单化显示设置：主面板只列一级菜单，内容在右侧浮层展开 ---------- */
#optsCard { overflow: visible; }
#optsCard.collapsed .opt-fly { display: none; }
#optsCard .card-body { border-radius: var(--r); }

/* 一级菜单行 */
.opt-menu { display: flex; flex-direction: column; gap: calc(3px * var(--ui)); }
.opt-row {
  display: flex; align-items: center; gap: calc(8px * var(--ui)); width: 100%;
  padding: calc(7px * var(--ui)) calc(9px * var(--ui));
  border: 1px solid var(--line); border-radius: calc(10px * var(--ui));
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(37,99,235,.015));
  cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
}
.opt-row:hover { background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(37,99,235,.05)); }
.opt-row.on { background: #fff; border-color: rgba(37,99,235,.45); box-shadow: inset 0 0 0 1px rgba(37,99,235,.22); }
.opt-ico { font-size: calc(14px * var(--ui)); line-height: 1; flex: none; font-style: normal; }
.opt-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.opt-t { font-size: calc(12.5px * var(--ui)); font-weight: 700; color: #0f172a; white-space: nowrap; }
.opt-sub { font-size: calc(10px * var(--ui)); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-row .chev { margin-left: auto; flex: none; color: #64748b; font-size: calc(13px * var(--ui)); font-style: normal; transition: transform .15s ease; }
.opt-row.on .chev { transform: translateX(2px); color: var(--accent); }

/* 右侧浮层（一级内容 / 二级菜单列表）：高度继承主面板的 JS 夹取值（max-height: inherit），
   内部自行滚动；鼠标移出整个菜单范围后由 JS 自动收起 */
.opt-fly {
  display: none; position: absolute; left: calc(100% + 8px); top: 0;
  width: calc(272px * var(--ui)); max-height: inherit;
  background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: calc(12px * var(--ui));
  box-shadow: 0 12px 32px rgba(2,6,23,.22); padding: calc(8px * var(--ui)) calc(10px * var(--ui)) calc(10px * var(--ui));
  overflow-y: auto; overflow-x: hidden; z-index: 30;
  touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent;
}
.opt-fly.on { display: block; }
.opt-fly.lv3 { width: calc(266px * var(--ui)); }
/* 菜单被拖到右半屏时，浮层改为向左展开 */
#optsCard.fly-left .opt-fly { left: auto; right: calc(8px + 100%); }
/* 浮层与菜单之间的透明"桥"：鼠标穿过间隙不触发 pointerleave 的收起计时 */
.opt-fly::before, .opt-fly::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10px; }
.opt-fly::before { left: -10px; }
.opt-fly::after { right: -10px; }
#optsCard.fly-left .opt-fly::before { left: auto; right: -10px; }
#optsCard.fly-left .opt-fly::after { right: auto; left: -10px; }

.fly-head {
  font-size: calc(12px * var(--ui)); font-weight: 700; color: #0f172a;
  padding: calc(2px * var(--ui)) calc(2px * var(--ui)) calc(7px * var(--ui));
  border-bottom: 1px dashed var(--line); margin-bottom: calc(6px * var(--ui));
}
.opt-fly .opt-row { margin: calc(3px * var(--ui)) 0; background: rgba(15,23,42,.03); }
.opt-fly .grp { border-bottom: 1px dashed var(--line); padding: calc(6px * var(--ui)) 0; }
.opt-fly .grp:last-child { border-bottom: 0; }
.opt-fly .grp-title { cursor: default; }
.opt-fly .grp-title::after { display: none; }
.opt-fly::-webkit-scrollbar { width: 8px; }
.opt-fly::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 4px; }
.opt-fly::-webkit-scrollbar-track { background: transparent; }

/* ---------- v4.3 统一三级菜单 ---------- */
/* 一级菜单行（.lv1）下方的二级容器：点击一级行后在其下方内联展开 */
.opt-sec .lv2-wrap { display: none; }
.opt-sec.open .lv2-wrap {
  display: flex; flex-direction: column; gap: calc(2px * var(--ui));
  margin: calc(3px * var(--ui)) 0 calc(5px * var(--ui)) calc(14px * var(--ui));
  padding: calc(3px * var(--ui)) 0 calc(3px * var(--ui)) calc(8px * var(--ui));
  border-left: 2px solid rgba(37, 99, 235, .30);
}
.lv1 .chev { transition: transform .18s ease; }
.opt-sec.open > .lv1 .chev { transform: rotate(90deg); color: var(--accent); }

/* 二级菜单行（紧凑样式，位于二级容器内） */
.lv2-row { padding: calc(5px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(8px * var(--ui)); background: rgba(15, 23, 42, .03); }
.lv2-row .opt-t { font-size: calc(11.5px * var(--ui)); }
.lv2-row .chev { font-size: calc(11px * var(--ui)); }
.lv2-row:hover { background: rgba(37, 99, 235, .10); }
.lv2-row.on { background: #fff; border-color: rgba(37, 99, 235, .45); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .22); }

/* 右侧三级浮层：三级手风琴（点击三级标题，控制项在其下方向下展开；
   浮层高度随内容自动扩展，超出视口上限后内部滚动，滚轮可查看） */
.lv3 {
  border: 1px solid var(--line); border-radius: calc(9px * var(--ui));
  margin: calc(4px * var(--ui)) 0; background: rgba(15, 23, 42, .025); overflow: hidden;
}
.lv3-h {
  display: flex; align-items: center; width: 100%; gap: calc(6px * var(--ui));
  padding: calc(6px * var(--ui)) calc(9px * var(--ui)); cursor: pointer; user-select: none;
  font-family: inherit; font-size: calc(11.5px * var(--ui)); font-weight: 700; color: #0f172a;
  text-align: left; background: transparent; border: 0;
}
.lv3-h:hover { color: #1d4ed8; }
.lv3-h .chev { margin-left: auto; font-style: normal; font-size: calc(10px * var(--ui)); color: #64748b; transition: transform .18s ease; }
.lv3.open .lv3-h .chev { transform: rotate(180deg); color: var(--accent); }
.lv3-b {
  display: none; padding: calc(2px * var(--ui)) calc(9px * var(--ui)) calc(8px * var(--ui));
  background: #fff; border-top: 1px dashed var(--line);
}
.lv3.open .lv3-b { display: block; }
/* 三级内的内联小块（赤道/回归线/极圈）沿用 sub-grp 外观，但恒展开、不可折叠 */
.lv3-b .sub-grp { margin: calc(6px * var(--ui)) 0; }
.lv3-b .sub-title { cursor: default; }
.lv3-b .sub-title::after { display: none; }
.fly-head { color: #1e3a8a; }