/* =========================================================
   app.css — 初一理科 3D 讲解   深色科技风 + 三科配色
   ========================================================= */
:root {
  --bg: #0B0E16;
  --bg2: #10141F;
  --panel: #141926;
  --panel2: #1A2132;
  --line: #232B3D;
  --line2: #2E3850;
  --text: #E6EAF5;
  --text2: #A3ADC2;
  --text3: #6B768F;
  --math: #4C6FFF;
  --bio: #2FB344;
  --geo: #0FA3B1;
  --geo2: #F2A33A;
  --accent: #F2A33A;
  --warn: #E5484D;
  --ok: #3FDA7A;
  --r: 10px;
  --topbar-h: 52px;
  --player-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", system-ui, sans-serif;
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ==================== 顶栏 ==================== */
#topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  background: linear-gradient(180deg, #151B29 0%, #10141F 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(242,163,58,.4);
}
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: .5px; white-space: nowrap; }
.brand-name b { color: var(--accent); font-weight: 700; }
.brand-sub {
  font-size: 11px; color: var(--text3);
  padding: 2px 7px; border: 1px solid var(--line2); border-radius: 20px;
  white-space: nowrap;
}

.subjects { display: flex; gap: 6px; flex: 1 1 auto; }
.subj-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
  white-space: nowrap;
}
.subj-tab:hover { background: rgba(255,255,255,.045); color: var(--text); }
.subj-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.subj-tab.active { background: rgba(255,255,255,.07); color: var(--text); border-color: var(--line2); }
.subj-tab.active .dot { opacity: 1; box-shadow: 0 0 8px currentColor; }
.subj-tab[data-s="math"].active { color: #A8B8FF; }
.subj-tab[data-s="bio"].active { color: #7BE295; }
.subj-tab[data-s="geo"].active { color: #6FDCE6; }

.top-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.fps { font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.icon-btn {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line2);
  color: var(--text2); cursor: pointer; font-size: 13px; font-family: inherit;
  transition: all .16s;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.icon-btn.mute { font-size: 14px; line-height: 1; }
.icon-btn.mute.on { border-color: var(--warn); background: rgba(229,72,77,.14); }
a.icon-btn { font-size: 13px; line-height: 1; }
/* 语言按钮：显示的是"点一下会变成的语言"的名字（EN / 中文），比图标更直观。
   两个字放不进 28px 方钮，所以宽度自适应、字号略小。 */
.icon-btn.lang { width: auto; min-width: 28px; padding: 0 8px; font-size: 11.5px; letter-spacing: .3px; }

/* ==================== 主体 ==================== */
#stage {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}

.panel {
  width: 268px;
  flex: 0 0 auto;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width .22s ease, opacity .18s ease;
  z-index: 20;
}
#sidebar { border-right: 1px solid var(--line); }
#inspector { width: 316px; border-left: 1px solid var(--line); }
.panel.collapsed { width: 0; overflow: hidden; opacity: 0; }

.panel-head {
  height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--text2);
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.collapse {
  width: 24px; height: 24px; border-radius: 6px;
  background: transparent; border: none; color: var(--text3);
  cursor: pointer; font-size: 15px; line-height: 1; font-family: inherit;
}
.collapse:hover { background: rgba(255,255,255,.06); color: var(--text); }

.panel-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.panel-body::-webkit-scrollbar-thumb:hover { background: #3E4A66; }

/* ==================== 场景列表 ==================== */
.scene-item {
  padding: 9px 12px 9px 14px;
  border-bottom: 1px solid rgba(35,43,61,.55);
  cursor: pointer;
  position: relative;
  transition: background .14s;
}
.scene-item:hover { background: rgba(255,255,255,.04); }
.scene-item.active { background: rgba(76,111,255,.13); }
.scene-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--math);
}
.scene-item[data-s="bio"].active { background: rgba(47,179,68,.13); }
.scene-item[data-s="bio"].active::before { background: var(--bio); }
.scene-item[data-s="geo"].active { background: rgba(15,163,177,.14); }
.scene-item[data-s="geo"].active::before { background: var(--geo); }

.si-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.si-code {
  font-size: 10.5px; color: var(--text3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.si-badge {
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  font-weight: 700; letter-spacing: .3px;
  background: rgba(242,163,58,.16); color: var(--accent);
}
.si-badge.p1 { background: rgba(76,111,255,.16); color: #8FA3FF; }
.si-badge.p2 { background: rgba(107,118,143,.18); color: #8B96AD; }
.si-title { font-size: 13px; color: var(--text); line-height: 1.4; }
.scene-item.active .si-title { font-weight: 600; }
.si-sub { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.35; }

.list-group-head {
  padding: 11px 14px 6px;
  font-size: 11px; font-weight: 700; color: var(--text3);
  letter-spacing: 1px;
  background: var(--panel);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid rgba(35,43,61,.4);
}

/* ==================== 视口 ==================== */
#viewport {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  background: radial-gradient(ellipse at 50% 42%, #141C2E 0%, #0B0E16 72%);
  overflow: hidden;
}
#glcanvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* 文字标注层 */
.labels {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lbl {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--text);
  background: rgba(16, 20, 31, .82);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  will-change: transform, opacity;
  box-shadow: 0 3px 14px rgba(0,0,0,.45);
  line-height: 1.35;
}
.lbl.hidden-lbl { opacity: 0; }
.lbl.dim { opacity: .42; }
.lbl.hi { border-color: var(--accent); color: #FFD9A0; box-shadow: 0 0 14px rgba(242,163,58,.3); }
.lbl.accent { border-color: var(--accent); color: #FFD9A0; }
.lbl.warn { border-color: var(--warn); color: #FF9EA1; }
.lbl.ok { border-color: var(--ok); color: #9CF5BE; }
.lbl.math { border-color: rgba(76,111,255,.6); color: #AEBDFF; }
.lbl.bio { border-color: rgba(47,179,68,.6); color: #93EDAA; }
.lbl.geo { border-color: rgba(15,163,177,.6); color: #86E3ED; }

/* 字幕 */
.caption {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 16px;
  max-width: min(760px, calc(100% - 40px));
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 15px;
  background: rgba(11, 14, 22, .84);
  border: 1px solid var(--line2);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  box-shadow: 0 6px 26px rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.caption.show { opacity: 1; }
.beat-tag {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(242,163,58,.18); color: var(--accent);
  margin-top: 1px;
  white-space: nowrap;
}
.beat-text { flex: 1 1 auto; }

/* 载入 */
.splash {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  background: rgba(11, 13, 18, .72);
  z-index: 10;
  transition: opacity .35s;
}
.splash.hidden { opacity: 0; pointer-events: none; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line2);
  border-top-color: var(--accent);
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.splash-msg { font-size: 13px; color: var(--text2); }
.splash-msg.err { color: var(--warn); max-width: 560px; text-align: center; line-height: 1.6; }
.splash-start {
  height: 46px; padding: 0 30px; border-radius: 12px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 8px 24px rgba(242,163,58,.25);
}
.splash-start:hover { filter: brightness(1.07); }

/* 帮助卡 */
.help-card {
  position: absolute; top: 16px; right: 16px;
  width: 260px;
  padding: 16px;
  background: rgba(20, 25, 38, .96);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  z-index: 20;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  transition: opacity .18s, transform .18s;
}
.help-card.hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.help-card h4 { font-size: 13px; margin-bottom: 10px; color: var(--text); font-weight: 600; }
.help-card ul { list-style: none; font-size: 12.5px; color: var(--text2); line-height: 2; }
.help-card b { color: var(--accent); font-weight: 600; display: inline-block; min-width: 76px; }
.help-card .btn {
  margin-top: 12px; width: 100%;
  padding: 7px; border-radius: 7px;
  background: rgba(242,163,58,.16); border: 1px solid rgba(242,163,58,.4);
  color: var(--accent); cursor: pointer; font-size: 12.5px; font-family: inherit;
}
.help-card .btn:hover { background: rgba(242,163,58,.26); }

/* ==================== 右栏 ==================== */
.meta { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.meta-code {
  font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums;
  letter-spacing: .4px; margin-bottom: 4px;
}
.meta-title { font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.meta-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 4px;
  background: var(--panel2); color: var(--text2);
  border: 1px solid var(--line2);
}
.tag.t-p0 { background: rgba(242,163,58,.16); border-color: rgba(242,163,58,.4); color: var(--accent); font-weight: 700; }
.tag.t-p1 { background: rgba(76,111,255,.14); border-color: rgba(76,111,255,.36); color: #8FA3FF; }
.tag.t-p2 { color: var(--text3); }

.card {
  margin: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel2);
  overflow: hidden;
}
.card-t {
  padding: 7px 11px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--line);
}
.card-b { padding: 9px 11px; font-size: 12.5px; line-height: 1.72; color: var(--text2); }

.card.focus { border-color: rgba(242,163,58,.34); }
.card.focus .card-t { color: var(--accent); background: rgba(242,163,58,.08); }
.card.focus .card-b { color: #E8DCC6; }

.card.hard { border-color: rgba(229,72,77,.32); }
.card.hard .card-t { color: #FF8C8F; background: rgba(229,72,77,.08); }
.card.hard .card-b { color: #EBD3D4; }

.card.solve { border-color: rgba(47,179,68,.3); }
.card.solve .card-t { color: #7BE295; background: rgba(47,179,68,.08); }
.card.solve .card-b { color: #D2E8D7; }

/* 控件 */
.controls { padding: 6px 12px 20px; }
.ctrl-row { margin-bottom: 13px; }
.ctrl-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--text2); margin-bottom: 6px;
  gap: 8px;
}
.ctrl-label .val {
  color: var(--accent); font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--line2); outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(242,163,58,.18);
  transition: box-shadow .16s;
}
input[type=range]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px rgba(242,163,58,.24); }
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: var(--accent); cursor: pointer;
}

.btn-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 11px;
  background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 8px; color: var(--text2);
  cursor: pointer; font-size: 12.5px; font-family: inherit;
  transition: all .16s;
}
.btn-toggle:hover { border-color: #3E4A66; color: var(--text); }
.btn-toggle.on { background: rgba(242,163,58,.14); border-color: rgba(242,163,58,.44); color: var(--accent); }
.btn-toggle .sw {
  width: 30px; height: 16px; border-radius: 8px;
  background: var(--line2); position: relative; transition: background .18s; flex: 0 0 auto;
}
.btn-toggle .sw::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #7A8399; transition: all .18s;
}
.btn-toggle.on .sw { background: rgba(242,163,58,.5); }
.btn-toggle.on .sw::after { left: 16px; background: var(--accent); }

/* ==================== 播放条 ==================== */
#player {
  height: var(--player-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: linear-gradient(0deg, #151B29 0%, #10141F 100%);
  border-top: 1px solid var(--line);
  z-index: 25;
}
.ctrl-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid var(--line2);
  color: var(--text2); cursor: pointer; font-size: 15px; line-height: 1;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: all .16s;
  flex: 0 0 auto;
}
.ctrl-btn:hover { background: rgba(255,255,255,.06); color: var(--text); border-color: #3E4A66; }
.ctrl-btn.play {
  width: 38px; height: 38px;
  background: rgba(242,163,58,.16); border-color: rgba(242,163,58,.46);
  color: var(--accent); font-size: 14px;
}
.ctrl-btn.play:hover { background: rgba(242,163,58,.28); }
.ctrl-btn.wide { width: auto; padding: 0 12px; font-size: 12.5px; }

.timeline-wrap { flex: 1 1 auto; min-width: 0; }
.timeline {
  position: relative;
  height: 6px;
  background: var(--line2);
  border-radius: 3px;
  cursor: pointer;
  overflow: visible;
}
.timeline:hover { background: #3A4560; }
.tl-progress {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(242,163,58,.6), var(--accent));
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(242,163,58,.4);
}
.tl-beats { position: absolute; inset: 0; pointer-events: none; }
.tl-mark {
  position: absolute; top: -2px;
  width: 1px; height: 10px;
  background: rgba(255,255,255,.28);
}
.tl-labels {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font-size: 10px; color: var(--text3);
  letter-spacing: .3px;
}
.tl-labels span { flex: 1 1 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ctrl-group { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ==================== 响应式 ==================== */
@media (max-width: 1180px) {
  #inspector { width: 280px; }
  #sidebar { width: 232px; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 48px; }
  .brand-sub, .fps { display: none; }
  #sidebar { position: absolute; left: 0; top: 0; bottom: 0; box-shadow: 8px 0 30px rgba(0,0,0,.6); }
  #sidebar.collapsed { box-shadow: none; }
  #inspector { position: absolute; right: 0; top: 0; bottom: 0; width: 290px; box-shadow: -8px 0 30px rgba(0,0,0,.6); }
  #inspector.collapsed { box-shadow: none; }
  .subjects { overflow-x: auto; }
  .subj-tab { padding: 6px 11px; font-size: 12.5px; }
  .tl-labels { display: none; }
}
@media (max-width: 620px) {
  #player { gap: 8px; padding: 0 10px; }
  .ctrl-btn.wide { display: none; }
  .brand-name { font-size: 13.5px; }
  .caption { bottom: 10px; font-size: 12px; padding: 8px 11px; }
  .panel { width: 86vw; }
  #inspector { width: 86vw; }
}

/* ============ SEO / GEO：视觉隐藏、但对爬虫与无 JS 环境可读的静态内容 ============
   主应用首屏是一个 canvas，#app 里的标题与文案全部由 JS 注入。搜索引擎
   抓不到 JS 注入的文本，所以 play.html 的 <body> 里放了一段真正写在
   HTML 里的 h1 / 站点定位 / 9 个场景链接，用 clip 技术移出视觉层。
   注意：这里用 clip + clip-path 而不是 display:none / visibility:hidden，
   因为后两者会让内容被搜索引擎判成隐藏文本而降权。
   也绝对不要改成元素上的 style 属性：站点 CSP 是 style-src 'self'，
   内联样式会被浏览器直接拦掉，那段内容就会变成可见的裸文字。 */
.seo-static {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ 收藏按钮 ============ */
.panel-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  flex-shrink: 0;
}
.fav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-color: var(--accent);
}
.fav-btn.active {
  background: rgba(242, 163, 58, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}
.fav-btn .fav-icon {
  font-size: 13px;
  line-height: 1;
}

/* ============ 模态弹窗系统（通用） ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.modal-overlay.hidden {
  display: none;
  opacity: 0;
}
.modal-card {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 12px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-head h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.modal-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 75vh;
  overflow-y: auto;
}
.modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(0, 0, 0, 0.2);
}

/* ============ 表单控件 ============ */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row label {
  font-size: 12px;
  color: var(--text2);
}
.form-control {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
}
.form-control:focus {
  border-color: var(--accent);
}
textarea.form-control {
  resize: vertical;
  min-height: 80px;
}
.hp-input {
  display: none;
  position: absolute;
  left: -9999px;
}
.form-status {
  font-size: 12px;
  line-height: 1.4;
  min-height: 18px;
}
.form-status.ok {
  color: var(--ok);
}
.form-status.err {
  color: var(--warn);
}

/* ============ 按钮系统 ============ */
.btn-primary {
  background: var(--accent);
  color: #0B0E16;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: opacity 0.15s ease;
}
.btn-primary:hover {
  opacity: 0.9;
}
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-secondary {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.15s ease;
}
.btn-secondary:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* ============ 账号与同步卡片 ============ */
.account-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text);
}
.account-badge .badge-icon {
  font-size: 16px;
}
.account-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-box {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.stat-box .stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.stat-box .stat-lbl {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.otp-input-group {
  display: flex;
  gap: 8px;
}
.otp-input-group .form-control {
  flex: 1;
}
.otp-input-group .btn-secondary {
  white-space: nowrap;
}

/* ==========================================================================
   窄屏 3D 播放器：画布在上、面板在下
   --------------------------------------------------------------------------
   900px 以下原先左右面板是 position:absolute 覆盖层，两个面板默认都打开时
   会把中间 canvas 完全盖住；而且折叠按钮在面板内部，折叠后无法再打开。
   这里改为正常流：视口固定 56vh，两个面板堆在下方，stage 内部滚动。
   ========================================================================== */
@media (max-width: 900px) {
  #stage { flex-direction: column; overflow-y: auto; }
  #viewport { order: 1; flex: 0 0 56vh; min-height: 300px; }
  #sidebar { order: 2; }
  #inspector { order: 3; }
  #sidebar,
  #inspector {
    position: static;
    width: auto;
    max-width: none;
    max-height: 34vh;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  #sidebar.collapsed,
  #inspector.collapsed {
    width: auto;
    max-height: 0;
    opacity: 1;
    overflow: hidden;
    border-top: 0;
  }
  .panel-head .collapse { display: none; }
}