/* =============================================================
 * ui-theme.css —— 三页共享的 UI 设计系统
 *
 * 加载顺序：必须在各页面内联 <style> 之前引入。
 *   本文件提供「设计 token + 基础控件外观」，页面内联样式只保留
 *   页面特有的定位/布局，仍可用同等特异性覆盖这里的规则。
 *
 * 只做视觉，不改行为：不触碰任何 id / class 命名、不依赖 JS、
 * 不改变元素的 display 语义（避免影响收起展开、弹窗显隐等逻辑）。
 * ============================================================= */

/* ---------- 1. 设计 token ---------- */
:root{
  /* 表面：由深到浅四级，配合内高光制造厚度 */
  --sm-bg:            #070b18;
  --sm-surface-1:     rgba(18,25,46,.88);   /* 面板 */
  --sm-surface-2:     rgba(32,43,74,.60);   /* 控件静置 */
  --sm-surface-3:     rgba(48,64,104,.66);  /* 控件 hover */
  --sm-surface-4:     rgba(62,82,130,.72);  /* 控件 active */

  /* 描边 */
  --sm-line:          rgba(255,255,255,.09);
  --sm-line-soft:     rgba(255,255,255,.06);
  --sm-line-strong:   rgba(255,255,255,.16);

  /* 文字：三级灰阶 + 强调 */
  --sm-text-1:        #eef3fc;
  --sm-text-2:        #a9bad9;
  --sm-text-3:        #7488ab;
  --sm-accent:        #6ea8ff;   /* 交互蓝 */
  --sm-accent-deep:   #3d7fe0;
  --sm-gold:          #ffd66e;   /* 时钟 / 太阳 */
  --sm-mint:          #7fe0a8;   /* 成功提示 */

  /* 圆角：外大内小，节奏统一 */
  --sm-r-lg:          18px;
  --sm-r-md:          12px;
  --sm-r-sm:          9px;
  --sm-r-xs:          7px;

  /* 阴影：分层（环境 / 悬浮 / 内高光） */
  --sm-sh-panel:      0 1px 0 rgba(255,255,255,.07) inset,
                      0 -1px 0 rgba(0,0,0,.28) inset,
                      0 20px 48px -14px rgba(0,0,0,.72),
                      0 4px 12px rgba(0,0,0,.34);
  --sm-sh-pop:        0 1px 0 rgba(255,255,255,.10) inset,
                      0 28px 64px -18px rgba(0,0,0,.78),
                      0 6px 18px rgba(0,0,0,.38);
  --sm-sh-btn:        0 1px 0 rgba(255,255,255,.09) inset,
                      0 1px 2px rgba(0,0,0,.34);
  --sm-sh-sunken:     0 1px 2px rgba(0,0,0,.44) inset,
                      0 1px 0 rgba(255,255,255,.04);

  /* 动效 */
  --sm-ease:          cubic-bezier(.4,0,.2,1);
  --sm-ease-out:      cubic-bezier(.16,1,.3,1);
  --sm-t-fast:        .12s;
  --sm-t:             .2s;

  /* 焦点环（无障碍） */
  --sm-ring:          0 0 0 3px rgba(110,168,255,.26);
}

/* ---------- 2. 基础排版 ---------- */
html,body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
              "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--sm-text-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* 所有数值/时间统一等宽，避免跳动 */
#clock,.kv .v,.grp .v,.big,.ticks span{ font-variant-numeric:tabular-nums; }

/* ---------- 3. 面板 / 浮层基底 ---------- */
.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(20,28,52,.92), rgba(11,16,32,.95));
  border:1px solid var(--sm-line);
  border-radius:var(--sm-r-lg);
  box-shadow:var(--sm-sh-panel);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
/* 面板内的分组标题：更轻的字重 + 字距，弱化“标签感” */
.panel h2{
  font-size:11.5px; font-weight:600; letter-spacing:.9px; text-transform:uppercase;
  color:var(--sm-text-3); margin:0 0 8px;
}
.panel h3{ font-size:12px; font-weight:600; color:var(--sm-text-2); margin:12px 0 6px; }

/* ---------- 4. 按钮 ---------- */
button{
  font:inherit; font-size:12px; font-weight:500; line-height:1;
  color:var(--sm-text-1);
  background:linear-gradient(180deg, var(--sm-surface-3), var(--sm-surface-2));
  border:1px solid var(--sm-line);
  border-radius:var(--sm-r-sm);
  padding:7px 12px;
  cursor:pointer;
  box-shadow:var(--sm-sh-btn);
  transition:background var(--sm-t) var(--sm-ease),
             border-color var(--sm-t) var(--sm-ease),
             transform var(--sm-t-fast) var(--sm-ease),
             box-shadow var(--sm-t) var(--sm-ease);
}
button:hover{
  background:linear-gradient(180deg, var(--sm-surface-4), var(--sm-surface-3));
  border-color:var(--sm-line-strong);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 4px 10px rgba(0,0,0,.4);
}
button:active{ transform:translateY(0); box-shadow:var(--sm-sh-sunken); }
button:focus-visible{ outline:none; box-shadow:var(--sm-ring), var(--sm-sh-btn); }

button.primary{
  background:linear-gradient(180deg, #4d8ff0, #2f6fce);
  border-color:#5b9bf7;
  color:#fff;
}
button.primary:hover{
  background:linear-gradient(180deg, #5d9bf7, #3d7fe0);
  border-color:#74a9fa;
}
button:disabled{ opacity:.45; cursor:default; transform:none; }

/* 图标按钮：正方形，内部图标居中，去掉文字内边距 */
.ibtn{
  width:34px; height:34px; padding:0; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--sm-r-sm); color:#d3e1fb;
}
.ibtn svg{ display:block; }

/* ---------- 5. 复选框（完全自定义，替换原生方框） ---------- */
input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:0 0 auto;
  width:16px; height:16px; margin:0;
  border:1px solid var(--sm-line-strong);
  border-radius:5px;
  background:var(--sm-surface-2);
  box-shadow:var(--sm-sh-sunken);
  cursor:pointer;
  transition:background var(--sm-t) var(--sm-ease),
             border-color var(--sm-t) var(--sm-ease),
             box-shadow var(--sm-t) var(--sm-ease);
}
input[type=checkbox]:hover{ border-color:rgba(255,255,255,.28); background:var(--sm-surface-3); }
input[type=checkbox]:focus-visible{ outline:none; box-shadow:var(--sm-ring); }
input[type=checkbox]:checked{
  background:linear-gradient(180deg, #5b9bf7, #2f6fce) no-repeat center;
  border-color:#5b9bf7;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 2px 6px rgba(47,111,206,.4);
}
/* 勾选：内联 SVG 描边勾（stroke 用 #fff，随 data URI 固定色，不随主题变） */
input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
                   linear-gradient(180deg, #5b9bf7, #2f6fce);
  background-repeat:no-repeat; background-position:center;
}
label.check{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--sm-text-2); cursor:pointer;
  user-select:none;
  transition:color var(--sm-t) var(--sm-ease);
}
label.check:hover{ color:var(--sm-text-1); }
label.check input[type=checkbox]:checked + *{ color:var(--sm-text-1); }

/* ---------- 6. 下拉框（自定义箭头 + 悬浮态） ---------- */
select{
  -webkit-appearance:none; appearance:none;
  font:inherit; font-size:12px; line-height:1.2;
  color:var(--sm-text-1);
  background-color:var(--sm-surface-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a9bad9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
  border:1px solid var(--sm-line);
  border-radius:var(--sm-r-xs);
  padding:6px 26px 6px 9px;
  cursor:pointer;
  box-shadow:var(--sm-sh-btn);
  transition:background-color var(--sm-t) var(--sm-ease),
             border-color var(--sm-t) var(--sm-ease);
}
select:hover{ background-color:var(--sm-surface-3); border-color:var(--sm-line-strong); }
select:focus-visible{ outline:none; border-color:var(--sm-accent); box-shadow:var(--sm-ring); }
select option{ background:#131a2e; color:var(--sm-text-1); }   /* 弹出面板跟随暗色 */

/* ---------- 7. 日期 / 数字输入 ---------- */
input[type=date],input[type=number]{
  font:inherit; font-size:12px; line-height:1.2;
  color:var(--sm-text-1);
  background-color:var(--sm-surface-2);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-r-xs);
  padding:5px 9px;
  box-shadow:var(--sm-sh-btn);
  transition:background-color var(--sm-t) var(--sm-ease),
             border-color var(--sm-t) var(--sm-ease);
}
input[type=date]:hover,input[type=number]:hover{ background-color:var(--sm-surface-3); border-color:var(--sm-line-strong); }
input[type=date]:focus-visible,input[type=number]:focus-visible{
  outline:none; border-color:var(--sm-accent); box-shadow:var(--sm-ring);
}

/* ---------- 8. 时间进度条 ---------- */
/* 轨道：内阴影凹槽 + 顶部高光，滑块带外发光环，hover 时放大 */
.timebar{
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px; background:transparent; cursor:pointer;
}
.timebar::-webkit-slider-runnable-track{
  height:8px; border-radius:999px;
  background:var(--track, linear-gradient(90deg,#7aa5ff,#ffd66e));
  box-shadow:var(--sm-sh-sunken), 0 0 0 1px rgba(255,255,255,.07);
}
.timebar::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px; margin-top:-5px;
  border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#dbe5f6);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(110,168,255,.22), 0 2px 6px rgba(0,0,0,.55);
  cursor:grab;
  transition:box-shadow var(--sm-t) var(--sm-ease), transform var(--sm-t-fast) var(--sm-ease);
}
.timebar:hover::-webkit-slider-thumb{
  box-shadow:0 0 0 5px rgba(110,168,255,.28), 0 3px 10px rgba(0,0,0,.6);
  transform:scale(1.08);
}
.timebar:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.02); }
.timebar:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 5px rgba(110,168,255,.45), 0 2px 6px rgba(0,0,0,.55); }
/* Firefox */
.timebar::-moz-range-track{
  height:8px; border-radius:999px;
  background:var(--track, linear-gradient(90deg,#7aa5ff,#ffd66e));
  box-shadow:var(--sm-sh-sunken), 0 0 0 1px rgba(255,255,255,.07);
}
.timebar::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#dbe5f6);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(110,168,255,.22), 0 2px 6px rgba(0,0,0,.55);
  cursor:grab;
  transition:box-shadow var(--sm-t) var(--sm-ease);
}
.timebar:hover::-moz-range-thumb{ box-shadow:0 0 0 5px rgba(110,168,255,.28), 0 3px 10px rgba(0,0,0,.6); }

/* ---------- 9. 操作栏（中下可收起面板） ---------- */
/* 分组容器：浅色凹槽底 + 内描边，把同类控件“装”在一起 */
.grp{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.grp.seg{
  gap:2px; padding:3px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--sm-line-soft);
  border-radius:var(--sm-r-md);
  box-shadow:0 1px 2px rgba(0,0,0,.22) inset;
}
/* 分段内的图标按钮：去掉独立边框，靠容器分区 */
.grp.seg .ibtn{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}
.grp.seg .ibtn:hover{
  background:var(--sm-surface-3);
  border-color:var(--sm-line);
  box-shadow:var(--sm-sh-btn);
  transform:none;
}
.grp.seg .ibtn.primary{
  background:linear-gradient(180deg,#4d8ff0,#2f6fce);
  border-color:#5b9bf7; color:#fff;
}

/* 分隔线：用渐变淡出，比实线轻 */
.bar-bottom{ position:relative; }
.bar-bottom::before{
  content:''; position:absolute; top:0; left:-16px; right:-16px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12) 18%, rgba(255,255,255,.12) 82%, transparent);
}

/* 收起手柄：与面板连为一体的“顶部把手”。
 * 背景取面板表面同一渐变起点（颜色连续 → 视觉融合），无独立厚阴影；
 * 居中用 left:50% + 负 margin-left（不用 translateX，把 transform 完全留给浮现动画，
 * 也避免被全局 button:hover 的 translateY(-1px) 覆盖导致水平跳位）。
 * 面板展开态：默认藏起（下沉+透明），鼠标移入面板后自下而上浮现 */
.bar-toggle{
  width:64px; height:22px;
  border-radius:12px 12px 0 0;
  border:1px solid var(--sm-line); border-bottom:none;
  background:linear-gradient(180deg, rgba(26,35,62,.97), rgba(16,22,40,.95));
  color:var(--sm-text-2);
  box-shadow:0 -2px 8px rgba(0,0,0,.22);
  opacity:0; transform:translateY(12px);
  pointer-events:none;   /* 藏起时不可误点（opacity 不拦指针事件） */
  transition:opacity var(--sm-t) var(--sm-ease), transform var(--sm-t) var(--sm-ease),
             background var(--sm-t) var(--sm-ease), color var(--sm-t) var(--sm-ease);
}
/* 收起态面板只剩手柄：必须常显可点（面板=手柄，hover 面板即 hover 手柄） */
#panel-left.collapsed .bar-toggle{ opacity:1; transform:none; pointer-events:auto; }
/* 鼠标移入面板（展开态）→ 手柄自下而上浮现 */
.panel:hover .bar-toggle{ opacity:1; transform:none; pointer-events:auto; }
.bar-toggle:hover{ color:#fff; transform:translateY(1px); background:linear-gradient(180deg, rgba(34,46,80,.97), rgba(20,28,50,.95)); }
.bar-toggle:active{ transform:translateY(2px); }
.bar-toggle svg{ transition:transform var(--sm-t) var(--sm-ease-out); }

/* ---------- 折叠 / 展开的高度动画 ----------
 * 面板内容按行（.bar-top / .bar-row2 / .bar-bottom …）逐行收放：
 * 每行 max-height 收缩到 0 + 淡出，展开时反向 —— 无需改 HTML（手柄以外的行全部命中）。
 * 展开态 max-height 给足余量（窄屏换行后单行可能更高），过渡前快后慢可接受。 */
#panel-left > :not(.bar-toggle){
  overflow:hidden;
  transition:max-height .3s var(--sm-ease), opacity .2s var(--sm-ease),
             margin .3s var(--sm-ease), transform .28s var(--sm-ease-out);
  max-height:300px;   /* 给足余量：窄屏 flex 换行后单行可能较高 */
}
#panel-left.collapsed{ padding:6px 14px; }
#panel-left.collapsed > :not(.bar-toggle){
  max-height:0; opacity:0; margin:0; transform:translateY(6px);
  pointer-events:none;   /* 收起后行不可交互（透明残影防误触） */
}
/* 面板自身的 padding / 圆角 / 背景也随收放平滑过渡（与上面 .collapsed 定义合并） */
#panel-left{ transition:max-height .3s var(--sm-ease), padding .3s var(--sm-ease); }

/* 折叠态：整体收成一条细胶囊，只留手柄 */
#panel-left.collapsed{
  padding:6px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(30,40,72,.92), rgba(13,19,36,.94));
}

/* 时钟：金色等宽，带极淡的发光，作为视觉锚点 */
#clock{
  font-size:15px; font-weight:600; color:var(--sm-gold);
  letter-spacing:.3px;
  text-shadow:0 0 14px rgba(255,214,110,.28);
}

/* ---------- 10. 刻度与次要文字 ---------- */
.ticks{ font-size:10.5px; color:var(--sm-text-3); letter-spacing:.2px; }
.dim{ color:var(--sm-text-3); font-size:12px; }
.kv .k{ color:var(--sm-text-2); }
.kv .v{ color:var(--sm-text-1); }
.tag{
  background:rgba(110,168,255,.16); color:#a9c9ff;
  border:1px solid rgba(110,168,255,.24);
  border-radius:999px; padding:1px 8px; font-size:11px;
}

/* ---------- 11. 弹窗 ---------- */
.modal-mask{
  background:rgba(4,7,15,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:sm-fade var(--sm-t) var(--sm-ease);
}
.modal-box{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #17203a, #101728);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-r-lg);
  box-shadow:var(--sm-sh-pop);
  padding:20px;
  animation:sm-pop .28s var(--sm-ease-out);
}
.modal-box h3{ font-size:15px; font-weight:600; color:var(--sm-text-1); margin-bottom:12px; }
.modal-foot{ border-top:1px solid var(--sm-line-soft); padding-top:14px; margin-top:14px; }
@keyframes sm-fade{ from{opacity:0} to{opacity:1} }
@keyframes sm-pop{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:none; }
}

/* ---------- 12. 滚动条（面板内） ---------- */
.panel ::-webkit-scrollbar,.modal-box ::-webkit-scrollbar{ width:8px; height:8px; }
.panel ::-webkit-scrollbar-thumb,.modal-box ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14); border-radius:999px;
}
.panel ::-webkit-scrollbar-thumb:hover,.modal-box ::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.24);
}
.panel ::-webkit-scrollbar-track,.modal-box ::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 13. 降低动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- 14. CLS 防护：Three.js 画布尺寸跳变 ----------
 * WebGLRenderer 创建时画布默认 300×150，JS 接管（setSize）后才撑满视口。
 * 若此时已发生绘制，画布从 300×150 撑到全屏即产生布局位移（CLS）。
 * 强制画布布局盒始终占满 #scene-container，与 JS 何时 setSize 无关，
 * 从根本上消除该位移。同时 display:block 避免 inline 元素底部幽灵间隙。 */
#scene-container canvas { display:block; width:100%; height:100%; }

/* ---------- 15. 触控目标尺寸（P2-3 a11y）----------
 * 桌面（精确指针）保持紧凑工具栏；触屏 / 移动端（Lighthouse 移动审计命中
 * pointer:coarse）把交互控件命中区放大到 ≥44px（WCAG 2.5.5），
 * 满足「tap targets sized appropriately」审计，且不影响桌面观感。 */
@media (pointer: coarse){
  button, select, input[type=date], input[type=number],
  .icon-btn, label.check, a.nav-link, .lang-btn{
    min-height:44px;
  }
  .icon-btn{ width:44px; height:44px; }
  label.check{ padding-block:6px; }
}