/* ==========================================================================
   龍王指標訓練 · 统一设计系统
   风格：TradingView 的专业密度 × Apple 的克制与质感。
   本文件在 styles.css 之后载入，统一所有颜色、字体、圆角、阴影与动效。
   ========================================================================== */

:root {
  color-scheme: dark;
  --ui-bg: #08090b;
  --ui-bg-1: #0e0f12;
  --ui-bg-2: #15161a;
  --ui-bg-3: #1c1e23;
  --ui-bg-4: #25272d;
  --ui-stroke: rgba(255, 255, 255, .07);
  --ui-stroke-2: rgba(255, 255, 255, .12);
  --ui-stroke-3: rgba(255, 255, 255, .2);
  --ui-text: #ececef;
  --ui-text-2: #a3a6af;
  --ui-text-3: #6d717b;
  --ui-accent: #3d7bff;
  --ui-accent-2: #6b9bff;
  --ui-accent-soft: rgba(61, 123, 255, .14);
  --ui-up: #0ecb81;
  --ui-up-soft: rgba(14, 203, 129, .12);
  --ui-down: #f6465d;
  --ui-down-soft: rgba(246, 70, 93, .12);
  --ui-warn: #f0b90b;
  --ui-radius-s: 8px;
  --ui-radius: 12px;
  --ui-radius-l: 18px;
  --ui-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px rgba(0, 0, 0, .35);
  --ui-shadow-l: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 80px rgba(0, 0, 0, .6);
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --ui-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 让旧样式表中的变量全部指向新系统 */
  --bg: var(--ui-bg);
  --surface: var(--ui-bg-2);
  --surface-2: var(--ui-bg-3);
  --surface-3: var(--ui-bg-1);
  --line: var(--ui-stroke-2);
  --line-soft: var(--ui-stroke);
  --text: var(--ui-text);
  --muted: var(--ui-text-2);
  --cyan: var(--ui-accent-2);
  --blue: var(--ui-accent);
  --green: var(--ui-up);
  --red: var(--ui-down);
}
html[data-lang="hans"] { --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }

html { background: var(--ui-bg); }
html, body { min-height: 100%; }
body,
body.theme-peer,
body.theme-teacher,
body.theme-personal,
body:not(.auth-gate) {
  --bg: var(--ui-bg);
  --surface: var(--ui-bg-2);
  --surface-2: var(--ui-bg-3);
  --surface-3: var(--ui-bg-1);
  --line: var(--ui-stroke-2);
  --line-soft: var(--ui-stroke);
  --cyan: var(--ui-accent-2);
  --blue: var(--ui-accent);
  color: var(--ui-text);
  background: var(--ui-bg) !important;
  background-image: none !important;
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
::selection { color: #fff; background: rgba(61, 123, 255, .5); }
:focus { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ui-accent) !important;
  outline-offset: 2px;
}
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgba(255, 255, 255, .14) padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24) padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
kbd {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin: 0 2px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid var(--ui-stroke-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--ui-text-2);
  background: rgba(255, 255, 255, .04);
  font: 600 11px/1 var(--ui-font);
}

/* ---------- 太空背景 ---------- */
.space-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ui-ease);
}
.space-canvas.is-visible { opacity: 1; }
.space-canvas.space-fallback {
  background:
    radial-gradient(120vmax 120vmax at 85% 120%, #12305e 0 34%, rgba(40, 110, 255, .55) 34.4%, transparent 36.5%),
    radial-gradient(60vmax 40vmax at 20% 0%, rgba(80, 60, 160, .18), transparent 70%),
    #05060a;
}
.app-shell { position: relative; z-index: 1; }

/* 初始化期间：只显示太空与品牌标志，不再闪出交易面板 */
html.auth-pending .app-shell { visibility: hidden; }
html.auth-pending body::after {
  content: "";
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 16px;
  background: #0b0b0e url("assets/dragonking-logo.png") center / 150% no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 60px rgba(0, 0, 0, .6);
  animation: ui-breathe 1.6s var(--ui-ease) infinite;
}
@keyframes ui-breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }

/* 登入画面：太空背景上的玻璃卡片 */
body.auth-gate .app-shell { visibility: hidden; }
body.auth-gate { background: transparent !important; }

/* ---------- 语言切换 ---------- */
.lang-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--ui-stroke-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.lang-switch button {
  min-width: 30px !important;
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
  cursor: pointer;
  transition: color 160ms var(--ui-ease), background 160ms var(--ui-ease);
}
.lang-switch button:hover { color: var(--ui-text) !important; }
.lang-switch button.active { color: #0b0b0d !important; background: var(--ui-text) !important; }

/* ==========================================================================
   首页
   ========================================================================== */
body.home-active .app-shell { min-height: 100dvh; padding: 0 !important; background: transparent !important; }
#homeDashboard.home-dashboard {
  position: relative;
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  gap: 0;
  padding: 0 clamp(20px, 5.5vw, 96px) clamp(20px, 4vh, 40px);
  overflow: hidden auto;
  color: var(--ui-text);
  background: transparent !important;
}
body.home-active #homeDashboard.home-dashboard { display: flex; }
#homeDashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 5, 8, .78) 0%, rgba(4, 5, 8, .35) 46%, transparent 70%), linear-gradient(0deg, rgba(4, 5, 8, .7) 0%, transparent 38%);
  pointer-events: none;
}
.hx-nav {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hx-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 650; letter-spacing: .01em; }
.hx-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #0b0b0e url("assets/dragonking-logo.png") center / 118% no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.hx-nav-right { display: flex; align-items: center; gap: 12px; }
#homeDashboard .home-profile {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 4px;
  border: 1px solid var(--ui-stroke-2);
  border-radius: 999px;
  background: rgba(14, 15, 18, .55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
#homeDashboard .home-profile-avatar,
#homeDashboard #homeAvatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: #0b0b0d;
  background: var(--ui-text);
  font-size: 14px;
  font-weight: 700;
}
#homeDashboard .home-profile-text { display: grid; min-width: 0; line-height: 1.2; padding-right: 2px; }
#homeDashboard .home-profile strong { overflow: hidden; color: var(--ui-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
#homeDashboard .home-profile-text span { color: var(--ui-text-2); font-size: 11px; white-space: nowrap; }
#homeDashboard .home-profile button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ui-text-2);
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: color 160ms var(--ui-ease), background 160ms var(--ui-ease), transform 300ms var(--ui-ease);
}
#homeDashboard .home-profile button:hover { color: var(--ui-text); background: rgba(255, 255, 255, .12); transform: rotate(45deg); }
#homeDashboard .home-profile button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.hx-hero {
  display: flex;
  flex: 1 1 auto;
  max-width: 640px;
  min-height: 260px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 6vh, 72px) 0 clamp(24px, 5vh, 56px);
}
.hx-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--ui-stroke-2);
  border-radius: 999px;
  color: var(--ui-text-2);
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hx-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-up); box-shadow: 0 0 0 3px rgba(14, 203, 129, .18); animation: ui-pulse 2.4s ease-in-out infinite; }
@keyframes ui-pulse { 50% { box-shadow: 0 0 0 6px rgba(14, 203, 129, 0); } }
.hx-title {
  margin: 22px 0 18px;
  color: #f6f6f8;
  font-size: clamp(38px, 5.6vw, 76px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .62));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hx-lede { max-width: 480px; margin: 0; color: var(--ui-text-2); font-size: clamp(14px, 1.15vw, 16px); line-height: 1.75; }

#homeDashboard .home-carousel-shell { display: block; margin: 0; padding: 0; }
#homeDashboard .home-carousel-arrow { display: none !important; }
#homeDashboard .home-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-width: 1180px;
  margin: 0;
  padding: 0;
  overflow: visible;
}
#homeDashboard .home-tile {
  position: relative;
  display: grid;
  min-height: 176px;
  aspect-ratio: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  align-content: stretch;
  justify-content: stretch;
  justify-items: stretch;
  align-items: start;
  flex: none;
  gap: 6px;
  filter: none !important;
  padding: 20px 20px 18px;
  overflow: hidden;
  border: 1px solid var(--ui-stroke-2);
  border-radius: var(--ui-radius-l);
  color: var(--ui-text);
  background: linear-gradient(180deg, rgba(28, 30, 36, .62), rgba(14, 15, 18, .62));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 50px rgba(0, 0, 0, .35);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  text-align: left;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 380ms var(--ui-ease), border-color 220ms var(--ui-ease), background 220ms var(--ui-ease), box-shadow 380ms var(--ui-ease);
}
#homeDashboard .home-tile[hidden] { display: none; }
#homeDashboard .home-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px 160px at var(--mx, 80%) var(--my, 0%), rgba(110, 150, 255, .16), transparent 70%);
  opacity: 0;
  transition: opacity 300ms var(--ui-ease);
  pointer-events: none;
}
#homeDashboard .home-tile:hover,
#homeDashboard .home-tile:focus-visible {
  border-color: var(--ui-stroke-3);
  background: linear-gradient(180deg, rgba(36, 38, 46, .7), rgba(18, 19, 23, .7));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 28px 70px rgba(0, 0, 0, .5);
  transform: translateY(-4px);
}
#homeDashboard .home-tile::after { content: none; }
#homeDashboard .home-tile-training, #homeDashboard .home-tile-room, #homeDashboard .home-tile-ranking, #homeDashboard .home-tile-settings { background: linear-gradient(180deg, rgba(28, 30, 36, .62), rgba(14, 15, 18, .62)); }
#homeDashboard .home-tile:hover::before,
#homeDashboard .home-tile:focus-visible::before { opacity: 1; }
#homeDashboard .home-tile:active { transform: translateY(-1px) scale(.99); }
#homeDashboard .home-tile-index { display: none; }
#homeDashboard .home-tile-icon {
  position: relative;
  inset: auto;
  box-shadow: none;
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0 0 18px;
  place-items: center;
  border: 1px solid var(--ui-stroke-2);
  border-radius: 11px;
  color: var(--ui-text);
  background: rgba(255, 255, 255, .05);
  font-size: 0;
}
#homeDashboard .home-tile-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#homeDashboard .home-tile-title { position: relative; margin: 0; color: var(--ui-text); font-size: 18px; font-weight: 650; letter-spacing: 0; }
#homeDashboard .home-tile-subtitle { min-height: 0; margin: 0; color: var(--ui-text-2); font-size: 12.5px; line-height: 1.55; }
#homeDashboard .home-tile-cta {
  position: relative;
  align-self: end;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-stroke);
  color: var(--ui-text-2);
  font-size: 12.5px;
  font-weight: 600;
  transition: color 200ms var(--ui-ease);
}
#homeDashboard .home-tile-cta b { font-weight: 400; transition: transform 300ms var(--ui-ease); }
#homeDashboard .home-tile:hover .home-tile-cta { color: var(--ui-text); }
#homeDashboard .home-tile:hover .home-tile-cta b { transform: translateX(4px); }
#homeDashboard .home-room-invite-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--ui-down);
  font-size: 11px;
  font-weight: 700;
  animation: ui-pulse-red 1.8s ease-in-out infinite;
}
@keyframes ui-pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 70, 93, .5); } 50% { box-shadow: 0 0 0 6px rgba(246, 70, 93, 0); } }
#homeDashboard .home-dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 0;
  color: var(--ui-text-3);
  font-size: 11.5px;
}
#homeDashboard .home-dashboard-footer kbd { color: var(--ui-text-2); }

/* 首页进场动画 */
body.home-active .hx-nav,
body.home-active .hx-eyebrow,
body.home-active .hx-title,
body.home-active .hx-lede,
body.home-active #homeDashboard .home-tile,
body.home-active .home-dashboard-footer { animation: ui-rise 900ms var(--ui-ease) both; }
body.home-active .hx-eyebrow { animation-delay: 80ms; }
body.home-active .hx-title { animation-delay: 160ms; }
body.home-active .hx-lede { animation-delay: 260ms; }
body.home-active #homeDashboard .home-tile:nth-child(1) { animation-delay: 360ms; }
body.home-active #homeDashboard .home-tile:nth-child(2) { animation-delay: 430ms; }
body.home-active #homeDashboard .home-tile:nth-child(3) { animation-delay: 500ms; }
body.home-active #homeDashboard .home-tile:nth-child(4) { animation-delay: 570ms; }
body.home-active .home-dashboard-footer { animation-delay: 700ms; }
@keyframes ui-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }

@media (max-width: 760px) {
  #homeDashboard.home-dashboard { padding-inline: 16px; }
  .hx-nav { min-height: 64px; }
  .hx-brand-name { display: none; }
  #homeDashboard .home-profile-text { display: none; }
  .hx-hero { min-height: 0; padding: 28px 0 28px; }
  #homeDashboard .home-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  #homeDashboard .home-tile { min-height: 150px; padding: 16px; }
  #homeDashboard .home-tile-icon { margin-bottom: 10px; }
  #homeDashboard .home-tile-cta { display: none; }
  #homeDashboard .home-dashboard-footer { display: none; }
}
@media (max-width: 420px) {
  #homeDashboard .home-tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   交易工作区：顶部栏
   ========================================================================== */
.app-shell { padding: 0 !important; background: var(--ui-bg) !important; }
.topbar,
body.theme-peer .topbar,
body.theme-teacher .topbar {
  min-height: 52px !important;
  gap: 12px !important;
  padding: 0 10px 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-stroke) !important;
  border-radius: 0 !important;
  background: var(--ui-bg-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.topbar .brand { gap: 9px; }
.topbar .brand-mark { width: 28px !important; height: 28px !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); filter: none !important; }
.topbar .brand h1 { margin: 0; color: var(--ui-text); font-size: 14px !important; font-weight: 650 !important; letter-spacing: 0 !important; white-space: nowrap; }
.topbar .brand p { display: none !important; }
.top-actions { gap: 6px !important; }
.top-nav-context { gap: 6px; padding-left: 8px !important; border-left: 1px solid var(--ui-stroke) !important; }
.secondary-button,
.primary-small,
.top-nav-primary .main-menu-button,
.topbar .secondary-button {
  display: inline-flex;
  min-height: 32px !important;
  align-items: center;
  gap: 6px;
  padding: 0 12px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .03) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  transition: background 160ms var(--ui-ease), border-color 160ms var(--ui-ease), color 160ms var(--ui-ease);
}
.secondary-button:hover,
.top-nav-primary .main-menu-button:hover,
.topbar .secondary-button:hover { border-color: var(--ui-stroke-3) !important; background: rgba(255, 255, 255, .08) !important; transform: none !important; translate: none !important; }
.primary-small { color: #0b0b0d !important; border-color: transparent !important; background: var(--ui-text) !important; }
.primary-small:hover { background: #fff !important; }
.room-button, .teacher-button, .member-admin-button { color: var(--ui-text) !important; }
#playerButton { gap: 8px; padding: 0 10px 0 4px !important; border-radius: 999px !important; }
.player-avatar, .player-avatar.admin-avatar { width: 24px !important; height: 24px !important; border: 0 !important; font-size: 11px !important; }

/* 时间周期与工具栏 */
.topbar > .toolbar,
.toolbar { gap: 8px; border: 0 !important; background: transparent !important; }
.toolbar .timeframe-group { gap: 1px !important; }
.toolbar button,
.toolbar .symbol-button {
  min-width: 0 !important;
  height: 28px;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  white-space: nowrap;
  transition: color 140ms var(--ui-ease), background 140ms var(--ui-ease);
}
.toolbar .symbol-button { margin-right: 4px; color: var(--ui-text) !important; font-weight: 700 !important; letter-spacing: .01em; }
.toolbar button:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .06) !important; }
.toolbar button.active,
.toolbar button.tool-active { color: var(--ui-text) !important; background: rgba(255, 255, 255, .1) !important; }
.toolbar button:disabled { opacity: .45; cursor: progress; }
.toolbar .terminal-menu > button b { display: inline-grid; min-width: 16px; height: 16px; place-items: center; margin-left: 4px; border-radius: 99px; color: #fff; background: var(--ui-accent); font-size: 10px; }
.terminal-popover,
.chart-context-menu {
  padding: 6px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text) !important;
  background: rgba(24, 25, 30, .96) !important;
  box-shadow: var(--ui-shadow-l) !important;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  animation: ui-pop 180ms var(--ui-ease);
}
.terminal-popover[hidden], .chart-context-menu[hidden] { display: none !important; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.terminal-popover button,
.chart-context-menu button {
  min-height: 32px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ui-text) !important;
  background: transparent !important;
  font-size: 12.5px !important;
  text-align: left;
}
.terminal-popover button:hover,
.terminal-popover button.active,
.chart-context-menu button:hover { background: rgba(255, 255, 255, .07) !important; }
.chart-context-menu hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--ui-stroke); }

/* ==========================================================================
   图表区
   ========================================================================== */
.trainer-grid,
body.theme-peer .trainer-grid,
body.theme-teacher .trainer-grid { height: calc(100dvh - 52px) !important; border: 0 !important; border-radius: 0 !important; background: var(--ui-bg) !important; }
.chart-column { border-right: 1px solid var(--ui-stroke) !important; background: var(--ui-bg) !important; }
.chart-stage, body.theme-peer .chart-stage, body.theme-teacher .chart-stage { background: var(--ui-bg) !important; }
.chart-stage::after { background: var(--ui-stroke) !important; }

.floating-drawing-toolbar {
  padding: 3px !important;
  gap: 1px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 10px !important;
  background: rgba(21, 22, 26, .92) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4) !important;
}
.floating-drawing-toolbar button,
.floating-drawing-toolbar select {
  min-width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  font-size: 13px !important;
}
.floating-drawing-toolbar button:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .07) !important; }
.floating-drawing-toolbar button.tool-active,
.floating-drawing-toolbar button.active { color: #fff !important; background: var(--ui-accent) !important; }
.floating-drawing-toolbar svg { stroke: currentColor; }
.floating-drawing-toolbar-toggle,
.side-panel-toggle {
  border: 1px solid var(--ui-stroke-2) !important;
  color: var(--ui-text-2) !important;
  background: var(--ui-bg-2) !important;
  box-shadow: none !important;
}
.floating-drawing-toolbar-toggle:hover,
.side-panel-toggle:hover { color: var(--ui-text) !important; background: var(--ui-bg-3) !important; }

.price-scale-header,
.active-indicator-legend,
.chart-zoom-controls,
.landes-water-panel,
.draw-hint,
.selected-drawing-actions,
.reason-selection-actions {
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text-2) !important;
  background: rgba(17, 18, 22, .9) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3) !important;
}
.chart-zoom-controls button { color: var(--ui-text-2) !important; background: transparent !important; border: 0 !important; }
.chart-zoom-controls button:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .07) !important; }
.landes-water-panel strong { color: var(--ui-text) !important; }
.active-indicator-legend { border: 0 !important; background: transparent !important; box-shadow: none !important; }

.loading-overlay {
  background: rgba(8, 9, 11, .82) !important;
  color: var(--ui-text) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.loading-overlay[hidden] { display: none !important; }
.loading-overlay strong { font-size: 14px; font-weight: 600; }
.loading-overlay small { color: var(--ui-text-2); }
.spinner { width: 26px !important; height: 26px !important; border: 2px solid rgba(255, 255, 255, .12) !important; border-top-color: var(--ui-text) !important; border-radius: 50% !important; }

/* 快捷下单 */
.quick-trade-dock {
  gap: 6px !important;
  padding: 6px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(17, 18, 22, .92) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45) !important;
}
.quick-trade-dock button {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.quick-long-button, .quick-add-button { color: #fff !important; background: var(--ui-up) !important; }
.quick-short-button, .quick-close-button { color: #fff !important; background: var(--ui-down) !important; }
.quick-partial-button, .quick-reverse-button, .quick-risk-button { color: var(--ui-text) !important; background: var(--ui-bg-4) !important; }
.quick-trade-dock button:hover { filter: brightness(1.1); }

/* 房间准备浮层 */
.room-ready-overlay, .teacher-start-dock {
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-l) !important;
  background: rgba(21, 22, 26, .96) !important;
  box-shadow: var(--ui-shadow-l) !important;
}
.room-ready-button, .teacher-unified-start-button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--ui-accent) !important;
  font-weight: 650 !important;
}
.room-ready-button:hover, .teacher-unified-start-button:hover:not(:disabled) { background: var(--ui-accent-2) !important; }
.teacher-unified-start-button:disabled { opacity: .45; }

/* ==========================================================================
   右侧面板
   ========================================================================== */
.side-panel,
body.theme-peer .side-panel,
body.theme-teacher .side-panel { border-left: 0 !important; background: var(--ui-bg-1) !important; backdrop-filter: none !important; }
.side-scroll { gap: 0 !important; padding: 0 !important; }
.side-card,
.order-card,
body.theme-peer .side-card,
body.theme-teacher .side-card {
  margin: 0 !important;
  padding: 14px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-stroke) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.order-card { border-bottom: 0 !important; border-top: 1px solid var(--ui-stroke) !important; }
.side-card h2, .order-card h2 { margin: 0; color: var(--ui-text) !important; font-size: 13px !important; font-weight: 650 !important; letter-spacing: 0 !important; }
.side-card h3 { color: var(--ui-text-2); font-size: 12px; }
.side-card label, .order-card label { color: var(--ui-text-2) !important; font-size: 12px !important; font-weight: 500 !important; }
.side-card small, .order-card small { color: var(--ui-text-3) !important; }
.card-fold-toggle, .manager-toggle {
  min-width: 26px !important;
  min-height: 26px !important;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ui-text-3) !important;
  background: transparent !important;
}
.card-fold-toggle:hover, .manager-toggle:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .06) !important; }
.status-pill, .position-pill, .winrate-pill, .market-pill {
  padding: 2px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: rgba(255, 255, 255, .06) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.position-pill.long, .position-pill.is-long { color: var(--ui-up) !important; background: var(--ui-up-soft) !important; }
.position-pill.short, .position-pill.is-short { color: var(--ui-down) !important; background: var(--ui-down-soft) !important; }

/* 账户紧凑行（取代原本占位很大的「账户概览」卡片） */
.order-card .account-compact {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 10px;
  margin: -2px 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ui-stroke);
}
.account-compact .acct-cell { display: grid; min-width: 0; gap: 2px; }
.account-compact .acct-cell span { display: flex; align-items: center; gap: 4px; color: var(--ui-text-3); font-size: 11px; }
.account-compact .acct-cell span em { color: var(--ui-text-2); font-size: 10.5px; font-style: normal; }
.account-compact .acct-cell strong { overflow: hidden; color: var(--ui-text) !important; font-family: var(--ui-mono); font-size: 14px !important; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-compact .acct-float strong.positive, .account-compact .acct-float strong.is-positive { color: var(--ui-up) !important; }
.account-compact .acct-float strong.negative, .account-compact .acct-float strong.is-negative { color: var(--ui-down) !important; }
.account-compact .acct-hidden { display: none !important; }

/* 下单面板 */
.order-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.order-heading .market-pill { margin-left: auto; font-family: var(--ui-mono); }
.trade-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.long-button, .short-button {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: var(--ui-radius-s) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: .08em !important;
  box-shadow: none !important;
  transition: filter 140ms var(--ui-ease), transform 140ms var(--ui-ease);
}
.long-button { background: var(--ui-up) !important; }
.short-button { background: var(--ui-down) !important; }
.long-button:hover, .short-button:hover { filter: brightness(1.08); }
.long-button:active, .short-button:active { transform: scale(.98); }
.long-button:disabled, .short-button:disabled { opacity: .4; filter: saturate(.4); }
.order-type-row, .leverage-row { display: grid; gap: 6px; margin-top: 12px; }
.order-type-row > div, .leverage-presets, .size-presets {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px !important;
  padding: 2px;
  border-radius: 9px;
  background: var(--ui-bg-3);
}
.order-type-row button, .leverage-presets button, .size-presets button {
  min-height: 28px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.order-type-row button:hover:not(:disabled), .leverage-presets button:hover, .size-presets button:hover { color: var(--ui-text) !important; }
.order-type-row button.active, .leverage-presets button.active, .size-presets button.active { color: var(--ui-text) !important; background: var(--ui-bg-4) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important; }
.order-type-row button:disabled { opacity: .4; cursor: not-allowed; }
.close-size-presets { grid-auto-flow: row !important; grid-template-columns: repeat(5, 1fr); }
.leverage-preview {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 0 !important;
  border-radius: 8px;
  color: var(--ui-text-3);
  background: rgba(255, 255, 255, .025) !important;
  font-size: 11px;
}
.leverage-preview strong { margin-left: 4px; color: var(--ui-text) !important; font-family: var(--ui-mono); font-size: 12px !important; }
.order-quantity { display: grid; gap: 8px; margin-top: 12px; }
.quantity-control { display: grid; grid-template-columns: 32px 1fr 32px; gap: 4px; }
.quantity-control button, .quantity-control input, .quantity-control output {
  min-height: 32px !important;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  background: var(--ui-bg-2) !important;
  font-family: var(--ui-mono);
  font-size: 13px !important;
  text-align: center;
}
.quantity-control button:hover { background: var(--ui-bg-3) !important; }
input[type="range"] { accent-color: var(--ui-accent); }
.risk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: 9px !important;
  color: var(--ui-text-2);
  background: var(--ui-bg-2) !important;
  font-size: 12px;
  text-align: left;
}
.risk-row strong { color: var(--ui-text); }
.risk-row em { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--ui-accent-2); font-style: normal; font-weight: 600; }
.partial-button, .close-button, .reverse-button {
  min-height: 34px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.partial-button:hover:not(:disabled), .close-button:hover:not(:disabled), .reverse-button:hover:not(:disabled) { background: rgba(255, 255, 255, .06) !important; }
.partial-button:disabled, .close-button:disabled { opacity: .35; }
.order-card > .trade-buttons:not(.trade-side-buttons) { margin-top: 10px; }
.next-button {
  display: flex !important;
  width: 100%;
  min-height: 40px !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  border: 0 !important;
  border-radius: var(--ui-radius-s) !important;
  color: #0b0b0d !important;
  background: var(--ui-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
.next-button:hover { background: #fff !important; }
.next-button kbd { border-color: rgba(0, 0, 0, .18); color: #0b0b0d; background: rgba(0, 0, 0, .06); }
.candle-playback-controls { display: grid !important; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 8px; }
.candle-playback-controls button,
.candle-playback-controls select,
.finish-button {
  min-height: 34px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.candle-playback-controls label { display: flex; align-items: center; gap: 6px; color: var(--ui-text-3) !important; font-size: 12px !important; }
.candle-playback-controls button.is-playing { color: var(--ui-text) !important; border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; }
.finish-button { width: 100%; margin-top: 8px; color: var(--ui-text-2) !important; }
.finish-button:hover, .candle-playback-controls button:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .06) !important; }

/* 交易记录 */
.trade-stats { display: flex; gap: 14px; color: var(--ui-text-3); font-size: 12px; }
.trade-stats strong { color: var(--ui-text); font-family: var(--ui-mono); }
.history-list > p, .drawing-list > p { color: var(--ui-text-3); font-size: 12px; }

/* ==========================================================================
   对话框
   ========================================================================== */
dialog::backdrop { background: rgba(3, 4, 6, .62) !important; backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
dialog[open] { animation: ui-dialog-in 260ms var(--ui-ease); }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.risk-dialog,
.teacher-dialog,
.rectangle-settings-dialog,
.room-leaderboard-dialog,
.leaderboard-dialog,
.avatar-dialog,
.relation-note-dialog,
.order-reason-dialog,
.room-podium-dialog {
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-l) !important;
  color: var(--ui-text) !important;
  background: rgba(22, 23, 27, .97) !important;
  box-shadow: var(--ui-shadow-l) !important;
}
.risk-dialog form, .teacher-dialog form { gap: 16px; padding: 24px !important; }
.dialog-heading, .teacher-dialog-heading { align-items: flex-start; }
.dialog-heading p, .teacher-dialog-heading p, .notes-eyebrow {
  margin: 0 0 4px !important;
  color: var(--ui-text-3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}
.dialog-heading h2, .teacher-dialog-heading h2 { margin: 0; color: var(--ui-text) !important; font-size: 20px !important; font-weight: 650 !important; letter-spacing: -.01em !important; }
.dialog-heading > button,
.teacher-dialog-heading button[aria-label*="关闭"],
.teacher-dialog-heading button[aria-label*="關閉"],
.teacher-dialog-heading > button,
#closePersonalTrainingButton,
#closeTrainingRecordsButton,
#closeTrainingRecordViewerButton,
#closeAdminNotesButton,
#closeMemberAdminButton,
#closeOrderReasonButton {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  flex: 0 0 30px;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--ui-text-2) !important;
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: none !important;
  outline-offset: 2px;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.dialog-heading > button:hover,
.teacher-dialog-heading > button:hover,
#closePersonalTrainingButton:hover, #closeTrainingRecordsButton:hover, #closeTrainingRecordViewerButton:hover,
#closeAdminNotesButton:hover, #closeMemberAdminButton:hover, #closeOrderReasonButton:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .14) !important; }
.risk-dialog label, .teacher-dialog label { color: var(--ui-text-2) !important; font-size: 12.5px !important; }
.risk-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.risk-dialog select,
.teacher-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.teacher-dialog select,
.teacher-dialog textarea,
.relation-note-dialog textarea,
.order-reason-dialog textarea,
.rectangle-settings-dialog select,
.rectangle-settings-dialog textarea,
.rectangle-settings-dialog input[type="number"] {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 10px !important;
  color: var(--ui-text) !important;
  background: var(--ui-bg-1) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  transition: border-color 160ms var(--ui-ease), box-shadow 160ms var(--ui-ease);
}
.teacher-dialog textarea, .relation-note-dialog textarea, .order-reason-dialog textarea, .rectangle-settings-dialog textarea { padding: 10px 12px; }
.risk-dialog input:focus, .teacher-dialog input:focus, .teacher-dialog textarea:focus, .order-reason-dialog textarea:focus, .risk-dialog select:focus, .teacher-dialog select:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft) !important;
  outline: none !important;
}
.risk-dialog p, .teacher-dialog p { color: var(--ui-text-2) !important; font-size: 13px !important; line-height: 1.65 !important; }
.dialog-error { min-height: 0; color: var(--ui-down) !important; font-size: 12.5px !important; }
.dialog-error:empty { display: none; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions button,
.dialog-save,
.risk-dialog button.dialog-save,
#confirmJoinRoomButton,
#confirmDeleteRoomButton,
#saveOrderReasonButton,
#skipOrderReasonButton,
#cancelOrderReasonButton,
#saveRectangleSettingsButton,
#cancelRectangleSettingsButton {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 10px !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 160ms var(--ui-ease), filter 160ms var(--ui-ease);
}
.dialog-actions button:hover, #skipOrderReasonButton:hover, #cancelOrderReasonButton:hover, #cancelRectangleSettingsButton:hover { background: rgba(255, 255, 255, .09) !important; }
.dialog-save,
.risk-dialog button.dialog-save,
#confirmJoinRoomButton,
#resumeRoomButton,
#teacherContinueRoomButton,
#openRoomJoinFromAnnouncementButton,
#acceptRoomInviteButton,
#saveOrderReasonButton,
#saveRectangleSettingsButton,
#loginButton,
#registerButton {
  border-color: transparent !important;
  color: #fff !important;
  background: var(--ui-accent) !important;
}
.dialog-save:hover, #confirmJoinRoomButton:hover, #resumeRoomButton:hover, #teacherContinueRoomButton:hover, #acceptRoomInviteButton:hover, #saveOrderReasonButton:hover, #saveRectangleSettingsButton:hover, #loginButton:hover, #registerButton:hover { background: var(--ui-accent-2) !important; }
#confirmDeleteRoomButton, #teacherDestroyRoomButton, .teacher-destroy-room-button { border-color: transparent !important; color: #fff !important; background: var(--ui-down) !important; }
#confirmDeleteRoomButton:hover, #teacherDestroyRoomButton:hover { filter: brightness(1.1); }
button:disabled { cursor: not-allowed; }

/* 登入／注册 */
.auth-dialog { width: min(400px, calc(100vw - 32px)) !important; background: rgba(18, 19, 23, .78) !important; backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); }
body.auth-gate dialog.auth-dialog::backdrop { background: rgba(3, 4, 6, .25) !important; backdrop-filter: none; }
.auth-dialog .dialog-heading h2 { font-size: 22px !important; }
.auth-choice-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px !important; padding: 4px 0 !important; }
.auth-choice-panel button {
  display: grid;
  min-height: 88px !important;
  place-content: center;
  gap: 4px;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .04) !important;
  cursor: pointer;
  transition: border-color 180ms var(--ui-ease), background 180ms var(--ui-ease), transform 260ms var(--ui-ease);
}
.auth-choice-panel button:hover { border-color: var(--ui-stroke-3) !important; background: rgba(255, 255, 255, .08) !important; transform: translateY(-2px); }
.auth-choice-panel strong { font-size: 16px !important; font-weight: 650; }
.auth-choice-panel span { color: var(--ui-text-2) !important; font-size: 12px !important; }
#authFields label { display: grid; gap: 6px; }
.username-availability { font-size: 12px; }
.logout-button, .admin-entry-button {
  width: 100%;
  min-height: 40px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 10px !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .04) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.logout-button:hover { background: rgba(255, 255, 255, .09) !important; }
#logoutButton { color: var(--ui-down) !important; }
.admin-entry-button { color: #0b0b0d !important; border-color: transparent !important; background: var(--ui-text) !important; }

/* 个人训练设置 */
.personal-training-dialog .training-start-options {
  padding: 16px !important;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, .02) !important;
  box-shadow: none !important;
}
.training-start-option-heading h3 { margin: 0; color: var(--ui-text) !important; font-size: 13px !important; font-weight: 650 !important; }
.training-start-option-heading span { color: var(--ui-text-3) !important; font-size: 11.5px !important; }
.training-scale-choice button {
  min-height: 40px !important;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: 9px !important;
  color: var(--ui-text-2) !important;
  background: var(--ui-bg-1) !important;
  box-shadow: none !important;
  transition: border-color 140ms var(--ui-ease), background 140ms var(--ui-ease);
}
.training-scale-choice button strong { color: inherit !important; font-size: 13px !important; font-weight: 600 !important; }
.training-scale-choice button span { color: var(--ui-text-3) !important; font-size: 11px !important; }
.training-scale-choice button:hover { border-color: var(--ui-stroke-3) !important; color: var(--ui-text) !important; }
.training-scale-choice button.active { border-color: var(--ui-accent) !important; color: var(--ui-text) !important; background: var(--ui-accent-soft) !important; }
.training-scale-choice button.active span { color: var(--ui-accent-2) !important; }
.personal-training-actions button,
#startPersonalTrainingButton {
  display: flex !important;
  width: 100%;
  min-height: 52px !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: var(--ui-radius) !important;
  color: #fff !important;
  background: var(--ui-accent) !important;
  box-shadow: 0 10px 30px rgba(61, 123, 255, .3) !important;
  cursor: pointer;
  transition: background 160ms var(--ui-ease), transform 220ms var(--ui-ease);
}
#startPersonalTrainingButton:hover { background: var(--ui-accent-2) !important; transform: translateY(-1px); }
#startPersonalTrainingButton strong { color: #fff !important; font-size: 15px !important; }
#startPersonalTrainingButton span { color: rgba(255, 255, 255, .78) !important; font-size: 12px !important; }
.teacher-dialog h3 { color: var(--ui-text) !important; font-size: 14px !important; font-weight: 650 !important; }
.admin-panel-note {
  padding: 10px 12px !important;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: 10px !important;
  color: var(--ui-text-2) !important;
  background: rgba(255, 255, 255, .02) !important;
  font-size: 12.5px !important;
}

/* 排行榜 */
.leaderboard-head, .room-ranking-head, .teacher-table-head { color: var(--ui-text-3) !important; font-size: 11.5px !important; font-weight: 600 !important; }
.leaderboard-row, .room-ranking-row {
  border: 0 !important;
  border-bottom: 1px solid var(--ui-stroke) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.leaderboard-row.me { background: var(--ui-accent-soft) !important; border-radius: 10px !important; }
.leaderboard-row strong { font-family: var(--ui-mono); }

/* ==========================================================================
   提示（Toast）
   ========================================================================== */
.toast {
  left: 50% !important;
  right: auto !important;
  bottom: 28px !important;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 16px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 999px !important;
  color: var(--ui-text) !important;
  background: rgba(28, 29, 34, .94) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center;
  transform: translate(-50%, 16px) !important;
  transition: opacity 240ms var(--ui-ease), transform 320ms var(--ui-ease) !important;
}
.toast.show { transform: translate(-50%, 0) !important; }

/* ==========================================================================
   老师后台
   ========================================================================== */
.teacher-dialog-heading button:not([aria-label]),
.teacher-dialog-heading > div > button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .04) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.teacher-dialog-heading > div > button:hover { background: rgba(255, 255, 255, .09) !important; }
.teacher-summary-grid > div {
  border: 1px solid var(--ui-stroke) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, .02) !important;
}
.teacher-summary-grid span { color: var(--ui-text-3) !important; font-size: 12px !important; }
.teacher-summary-grid strong { color: var(--ui-text) !important; font-family: var(--ui-mono); }
.teacher-user-row, .teacher-monitor-card, .teacher-room-card {
  border: 1px solid var(--ui-stroke) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, .02) !important;
  box-shadow: none !important;
}
.teacher-user-actions select, .teacher-user-actions button, .member-role-label {
  min-height: 32px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background: var(--ui-bg-2) !important;
  font-size: 12px !important;
}
.member-create-panel {
  border: 1px solid var(--ui-stroke) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, .02) !important;
}
#createMemberButton { border: 0 !important; color: #fff !important; background: var(--ui-accent) !important; }

/* ---------- 全局：hidden 属性永远优先 ---------- */
[hidden] { display: none !important; }

/* 登入关卡不需要关闭按钮（未登入无法使用） */
body.auth-gate #authDialog .dialog-heading > button { display: none !important; }
#authError { color: var(--ui-text-2) !important; }

/* 标题与眉标重复时只显示标题 */
#personalTrainingDialog .teacher-dialog-heading p,
#teacherRoomResumeDialog .dialog-heading p { display: none !important; }

/* 训练记录列表 */
.admin-notes-list { gap: 6px !important; }
.admin-review-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px 10px 14px !important;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: 10px !important;
  color: var(--ui-text-2) !important;
  background: rgba(255, 255, 255, .02) !important;
  font-size: 12px !important;
  transition: border-color 160ms var(--ui-ease), background 160ms var(--ui-ease);
}
.admin-review-item:hover { border-color: var(--ui-stroke-2) !important; background: rgba(255, 255, 255, .04) !important; }
.admin-review-item strong { color: var(--ui-text) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.admin-review-item button {
  flex: 0 0 auto;
  min-height: 30px !important;
  margin-left: auto;
  padding: 0 12px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.admin-review-item button:hover { background: rgba(255, 255, 255, .1) !important; }

/* 下单面板置顶，交易记录在下方滚动（与专业交易终端一致） */
.side-panel:has(> .order-card:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) !important; }
.side-panel > .order-card { order: -1; border-top: 0 !important; border-bottom: 1px solid var(--ui-stroke) !important; }
.side-panel > .order-card .order-heading { margin-top: 0; }

/* 开单理由对话框 */
.relation-note-summary,
#orderReasonSummary {
  padding: 10px 12px !important;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: 10px !important;
  color: var(--ui-text-2) !important;
  background: rgba(255, 255, 255, .03) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.relation-note-heading small, #orderReasonKicker { color: var(--ui-text-3) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important; }
.relation-note-heading h2 { color: var(--ui-text) !important; font-size: 20px !important; font-weight: 650 !important; }
.order-reason-dialog label, .relation-note-dialog label { color: var(--ui-text-2) !important; font-size: 12.5px !important; font-weight: 500 !important; }
.reason-preset-row { color: var(--ui-text-3) !important; font-size: 12px !important; font-weight: 500 !important; }
.reason-preset-row button {
  padding: 5px 10px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 999px !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .04) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.reason-preset-row button:hover { background: rgba(255, 255, 255, .1) !important; }
.relation-note-dialog form, .order-reason-dialog form { gap: 14px; padding: 24px !important; }

/* ==========================================================================
   老师房间控制台
   ========================================================================== */
#teacherDialog.teacher-dialog,
body.teacher-dashboard-active #teacherDialog {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ui-bg) !important;
  box-shadow: none !important;
  animation: none;
}
#teacherDialog .teacher-room-workspace {
  gap: 0 !important;
  padding: 0 !important;
  background: var(--ui-bg) !important;
}
#teacherDialog .teacher-topline {
  display: flex !important;
  min-height: 0 !important;
  align-items: center;
  gap: 14px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-stroke) !important;
  border-radius: 0 !important;
  background: var(--ui-bg-1) !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-topline .teacher-dialog-heading {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#teacherDialog .teacher-topline .teacher-dialog-heading p { display: none !important; }
#teacherDialog .teacher-topline .teacher-dialog-heading h2 { font-size: 15px !important; white-space: nowrap; }
#teacherDialog .teacher-topline .teacher-dialog-heading > div:last-child { display: flex !important; flex-direction: row !important; gap: 6px !important; }
#teacherDialog .teacher-topline .teacher-dialog-heading button { width: auto !important; height: 30px !important; min-height: 30px !important; padding: 0 12px !important; border-radius: var(--ui-radius-s) !important; font-size: 12.5px !important; white-space: nowrap; }
#teacherDialog #closeTeacherButton { color: #0b0b0d !important; border-color: transparent !important; background: var(--ui-text) !important; }
#teacherDialog .teacher-top-student-ribbon {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#teacherDialog .teacher-student-slot-panel {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-student-slot-head { display: flex !important; flex: 0 0 auto; align-items: center; gap: 8px !important; padding: 0 !important; }
#teacherDialog .teacher-student-slot-head strong { color: var(--ui-text-2) !important; font-size: 12px !important; font-weight: 600 !important; }
#teacherDialog .teacher-student-slot-head span { color: var(--ui-text) !important; font-family: var(--ui-mono); font-size: 12px !important; }
#teacherDialog .teacher-student-all {
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  font-size: 11.5px !important;
}
#teacherDialog .teacher-student-all.active { color: #0b0b0d !important; border-color: transparent !important; background: var(--ui-text) !important; }
#teacherDialog .teacher-student-slot-grid {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px !important;
  overflow-x: auto;
  padding: 0 !important;
}
#teacherDialog .teacher-student-slot {
  display: inline-flex !important;
  flex: 0 0 auto;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 0 !important;
  align-items: center;
  gap: 6px;
  padding: 0 9px 0 4px !important;
  border: 1px solid var(--ui-stroke) !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: rgba(255, 255, 255, .02) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
}
#teacherDialog .teacher-student-slot b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--ui-text-3); background: rgba(255, 255, 255, .05); font-size: 10px; font-weight: 600; }
#teacherDialog .teacher-student-slot.is-empty { border-style: dashed !important; opacity: .55; }
#teacherDialog .teacher-student-slot.is-empty span { color: var(--ui-text-3); }
#teacherDialog button.teacher-student-slot { color: var(--ui-text) !important; cursor: pointer; }
#teacherDialog button.teacher-student-slot.is-selected { border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; }
#teacherDialog button.teacher-student-slot.is-muted { opacity: .55; }
#teacherDialog .teacher-panorama-filters { display: flex !important; flex: 0 0 auto; align-items: center; padding: 0 !important; border: 0 !important; background: transparent !important; }
#teacherDialog .teacher-panorama-filters label { display: flex !important; align-items: center; gap: 8px; color: var(--ui-text-3) !important; font-size: 12px !important; }
#teacherDialog .teacher-panorama-filters select {
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-bg-2) !important;
  font-size: 12.5px !important;
}

/* 全景图 */
#teacherDialog #teacherLiveList { padding: 0 !important; background: var(--ui-bg) !important; }
#teacherDialog .teacher-panorama-card,
#teacherDialog .teacher-panorama-frame {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ui-bg) !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-native-panorama-chart { border: 0 !important; border-radius: 0 !important; }
#teacherDialog .teacher-panorama-tools {
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text-2) !important;
  background: rgba(17, 18, 22, .92) !important;
}
#teacherDialog .teacher-panorama-filter-all,
#teacherDialog [data-panorama-filter-all],
#teacherDialog .teacher-panorama-frame button.active {
  border: 1px solid var(--ui-stroke-2) !important;
  color: var(--ui-text) !important;
  background: rgba(17, 18, 22, .92) !important;
  box-shadow: none !important;
}

/* 右侧操作面板 */
#teacherDialog #teacherOperationsPanel.competition-control {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--ui-stroke) !important;
  border-radius: 0 !important;
  background: var(--ui-bg-1) !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-operations-toggle {
  border: 1px solid var(--ui-stroke-2) !important;
  color: var(--ui-text-2) !important;
  background: var(--ui-bg-2) !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-room-lobby { padding: 16px !important; border-bottom: 1px solid var(--ui-stroke) !important; }
#teacherDialog .teacher-room-lobby-active,
#teacherDialog .teacher-room-lobby-empty {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-room-lobby-active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
}
#teacherDialog .room-lobby-main { grid-column: 1 / -1; display: grid !important; gap: 2px; }
#teacherDialog .room-lobby-main strong { display: none !important; }
#teacherDialog .room-lobby-kicker { color: var(--ui-text-2) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
#teacherDialog .room-lobby-main small { color: var(--ui-text-3) !important; font-size: 12px !important; }
#teacherDialog .room-lobby-code {
  grid-column: 1;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-bg-2) !important;
}
#teacherDialog .room-lobby-code span { color: var(--ui-text-3) !important; font-size: 11.5px !important; }
#teacherDialog .room-lobby-code b { flex: 1 1 auto; color: var(--ui-text) !important; font-family: var(--ui-mono); font-size: 24px !important; font-weight: 600 !important; letter-spacing: .18em !important; }
#teacherDialog .room-lobby-code button,
#teacherDialog .room-lobby-quick-actions button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
#teacherDialog .room-lobby-quick-actions { grid-column: 2; grid-row: 2 / span 2; display: grid !important; gap: 6px !important; align-content: start; }
#teacherDialog .room-lobby-quick-actions .room-lobby-quick { min-width: 84px; min-height: 40px !important; border-color: transparent !important; color: #fff !important; background: var(--ui-accent) !important; }
#teacherDialog .room-lobby-quick-actions .room-lobby-quick:hover:not(:disabled) { background: var(--ui-accent-2) !important; }
#teacherDialog .room-lobby-quick-actions .room-lobby-quick:disabled { opacity: .4; }
#teacherDialog .room-lobby-quick-actions .room-lobby-delete { color: var(--ui-down) !important; border-color: rgba(246, 70, 93, .35) !important; background: transparent !important; }
#teacherDialog .room-lobby-quick-actions .room-lobby-delete:hover { background: var(--ui-down-soft) !important; }
#teacherDialog .room-lobby-metrics { grid-column: 1; display: flex !important; gap: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#teacherDialog .room-lobby-metrics span { flex: 1 1 0; display: grid; gap: 1px; padding: 0 !important; color: var(--ui-text-3) !important; font-size: 11.5px !important; }
#teacherDialog .room-lobby-metrics span + span { padding-left: 12px !important; border-left: 1px solid var(--ui-stroke) !important; }
#teacherDialog .room-lobby-metrics b { color: var(--ui-text) !important; font-size: 15px !important; font-weight: 600 !important; }
#teacherDialog .teacher-room-lobby-empty { display: flex !important; align-items: center; gap: 12px; }
#teacherDialog .room-lobby-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px dashed var(--ui-stroke-3); border-radius: 12px; color: var(--ui-text-2); background: transparent !important; }
#teacherDialog .teacher-room-lobby-empty strong { color: var(--ui-text) !important; font-size: 15px !important; }
#teacherDialog .teacher-room-lobby-empty small { color: var(--ui-text-3) !important; font-size: 12px !important; }
#teacherDialog .teacher-room-lobby-empty em { margin-left: auto; padding: 3px 9px; border-radius: 999px; color: var(--ui-text-2); background: rgba(255, 255, 255, .06); font-size: 11px; font-style: normal; }

#teacherDialog .teacher-room-fold {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-stroke) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-room-fold-summary {
  min-height: 52px !important;
  padding: 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
}
#teacherDialog .teacher-room-fold-summary:hover { background: rgba(255, 255, 255, .025) !important; }
#teacherDialog .teacher-room-fold-summary strong { color: var(--ui-text) !important; font-size: 13.5px !important; font-weight: 650 !important; }
#teacherDialog .teacher-room-fold-summary small { color: var(--ui-text-3) !important; font-size: 11.5px !important; }
#teacherDialog .teacher-room-fold-summary b {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  color: var(--ui-text-3) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform 220ms var(--ui-ease);
}
#teacherDialog .teacher-room-fold[open] > .teacher-room-fold-summary b { transform: rotate(180deg); }
#teacherDialog .room-builder,
#teacherDialog .room-management,
#teacherDialog .competition-actions { padding: 4px 16px 16px !important; border: 0 !important; background: transparent !important; }
#teacherDialog .room-step-number {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
  font-size: 11px !important;
}
#teacherDialog .room-builder-step strong { color: var(--ui-text) !important; font-size: 13px !important; }
#teacherDialog .room-builder-step small { color: var(--ui-text-3) !important; font-size: 11.5px !important; }
#teacherDialog .room-presets { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2px !important; padding: 2px !important; border-radius: 9px; background: var(--ui-bg-3) !important; }
#teacherDialog .room-presets button {
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
#teacherDialog .room-presets button.active { color: var(--ui-text) !important; background: var(--ui-bg-4) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important; }
#teacherDialog .room-create-actions label > span,
#teacherDialog .room-settings label > span { color: var(--ui-text-3) !important; font-size: 11.5px !important; }
#teacherDialog .room-create-actions input,
#teacherDialog .room-settings select,
#teacherDialog #roomMessageInput {
  height: 36px !important;
  min-height: 0 !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-bg-2) !important;
  font-size: 13px !important;
}
#teacherDialog .room-range-value { color: var(--ui-text-3) !important; font-size: 12px !important; }
#teacherDialog #createRoomButton {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: var(--ui-radius-s) !important;
  color: #fff !important;
  background: var(--ui-accent) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
}
#teacherDialog #createRoomButton:hover:not(:disabled) { background: var(--ui-accent-2) !important; }
#teacherDialog .competition-actions button,
#teacherDialog .teacher-playback-actions button,
#teacherDialog .teacher-playback-actions select,
#teacherDialog #deleteRoomButton {
  min-height: 34px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-s) !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
#teacherDialog .competition-actions button:hover:not(:disabled) { background: rgba(255, 255, 255, .09) !important; }
#teacherDialog .competition-actions button:disabled { opacity: .38; }
#teacherDialog [data-room-action="end"], #teacherDialog #deleteRoomButton { color: var(--ui-down) !important; border-color: rgba(246, 70, 93, .3) !important; }
#teacherDialog .teacher-monitor-heading strong { color: var(--ui-text) !important; font-size: 13px !important; }
#teacherDialog .teacher-monitor-heading span { color: var(--ui-text-3) !important; font-size: 11.5px !important; }
#teacherDialog .teacher-room-list > p,
#teacherDialog .student-picker-list > p { color: var(--ui-text-3) !important; font-size: 12px !important; }
#teacherDialog .teacher-start-dock .teacher-start-kicker { color: var(--ui-text-3) !important; font-size: 12px !important; letter-spacing: 0 !important; }
#teacherDialog .teacher-ready-pill { border: 1px solid var(--ui-stroke-2) !important; border-radius: 999px !important; color: var(--ui-text-2) !important; background: transparent !important; font-size: 11.5px !important; }
#teacherDialog .teacher-ready-pill.is-ready { color: var(--ui-up) !important; border-color: rgba(14, 203, 129, .35) !important; background: var(--ui-up-soft) !important; }

/* 全景图：定位工具改为右上角小胶囊，不再压住时间轴 */
#teacherDialog .teacher-panorama-tools {
  top: 12px !important;
  right: 76px !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0;
  max-width: min(420px, 60%);
  border-radius: 999px !important;
}
#teacherDialog .teacher-panorama-tools[open] { width: min(420px, 60%) !important; border-radius: var(--ui-radius) !important; }
#teacherDialog .teacher-panorama-tools > summary { padding: 5px 12px !important; color: var(--ui-text-2) !important; font-size: 12px !important; }
#teacherDialog .teacher-panorama-tools[open] > summary { border-bottom: 1px solid var(--ui-stroke) !important; color: var(--ui-text) !important; }
#teacherDialog .teacher-panorama-all-marker {
  height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: rgba(17, 18, 22, .92) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
#teacherDialog .teacher-panorama-all-marker.is-active { color: #0b0b0d !important; border-color: transparent !important; background: var(--ui-text) !important; }

/* 排行榜细节 */
.leaderboard-row { min-height: 54px; }
.leaderboard-row.top-rank { box-shadow: none !important; border-left: 0 !important; }
.leaderboard-row strong, .leaderboard-row > span { color: var(--ui-text) !important; }
.leaderboard-row em {
  display: inline-grid;
  min-width: 28px;
  height: 22px;
  place-items: center;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: rgba(255, 255, 255, .06) !important;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 650 !important;
}
.leaderboard-row.rank-1 em { color: #1a1300 !important; background: #f0c14b !important; }
.leaderboard-row.rank-2 em { color: #111 !important; background: #cfd3da !important; }
.leaderboard-row.rank-3 em { color: #1d0f04 !important; background: #d79a62 !important; }
.leaderboard-presence { color: var(--ui-text-3) !important; font-size: 11px !important; font-style: normal; }
.leaderboard-presence.online { color: var(--ui-up) !important; }
.pk-invite-button {
  height: 24px;
  padding: 0 10px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  opacity: 0;
  transition: opacity 160ms var(--ui-ease), color 160ms var(--ui-ease), background 160ms var(--ui-ease);
}
.leaderboard-row:hover .pk-invite-button, .pk-invite-button:focus-visible { opacity: 1; }
.pk-invite-button:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .08) !important; }
@media (hover: none) { .pk-invite-button { opacity: 1; } }
.teacher-summary-grid > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px !important; }

/* 顶栏：周期与工具在自己的轨道内横向滚动，不会压住右侧按钮 */
.topbar { display: flex !important; flex-wrap: nowrap !important; overflow: visible; }
.topbar > .brand { flex: 0 0 auto; }
.topbar > .toolbar {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  overflow: visible;
}
.topbar > .toolbar .timeframe-group {
  min-width: 0;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.topbar > .toolbar .timeframe-group::-webkit-scrollbar { display: none; }
.topbar > .top-actions { flex: 0 0 auto !important; min-width: 0; }
.top-nav-primary, .top-nav-context { flex-wrap: nowrap !important; }
@media (max-width: 1440px) {
  .topbar .brand h1 { display: none; }
  #playerButton > span:last-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}
.toolbar-menus { display: flex; flex: 0 0 auto; align-items: center; gap: 1px; padding-left: 6px; border-left: 1px solid var(--ui-stroke); }
.toolbar-menus .terminal-menu { position: relative; }
.toolbar .symbol-button { margin-right: 6px !important; }
.topbar > .toolbar { display: flex !important; align-items: center; justify-content: flex-start !important; }

/* 指标管理 */
.indicator-manager { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ui-stroke); }
.indicator-manager-title { padding: 0 6px 6px; color: var(--ui-text-3) !important; font-size: 11.5px !important; font-weight: 600; }
.indicator-manager-title small { color: var(--ui-text-3) !important; font-weight: 400; }
.indicator-manager-row {
  min-height: 34px;
  margin: 2px 0 !important;
  padding: 0 6px 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ui-text) !important;
  background: rgba(255, 255, 255, .035) !important;
  font-size: 12px !important;
}
.indicator-manager-row button { min-height: 26px !important; width: 26px; padding: 0 !important; color: var(--ui-text-2) !important; background: transparent !important; filter: grayscale(1); }
.indicator-manager-row button:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .08) !important; }
.indicator-manager-row.is-locked { background: var(--ui-accent-soft) !important; }
.terminal-popover i { box-shadow: none !important; }
.chart-color-settings { margin-top: 6px; padding: 8px 6px 2px; border-top: 1px solid var(--ui-stroke); color: var(--ui-text-2); font-size: 12px; }
.chart-color-settings strong { color: var(--ui-text-3) !important; font-size: 11.5px !important; }
.chart-color-settings input[type="color"] { width: 28px; height: 20px; padding: 0; border: 1px solid var(--ui-stroke-2); border-radius: 5px; background: transparent; }
body.home-active .app-shell > .topbar,
body.home-active .app-shell > .toolbar,
body.home-active .app-shell > .trainer-grid { display: none !important; }

/* 领奖台、对决邀请、本金耗尽：统一金属质感，去除霓虹 */
.room-podium-heading p, .game-over-kicker { color: var(--ui-text-3) !important; font-size: 12px !important; letter-spacing: .08em !important; }
.room-podium-heading h2 { color: var(--ui-text) !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.room-podium-heading span { color: var(--ui-text-2) !important; }
.room-podium-close { min-height: 42px !important; border: 0 !important; border-radius: 10px !important; color: #0b0b0d !important; background: var(--ui-text) !important; box-shadow: none !important; font-weight: 650 !important; }
.room-podium-list > p { color: var(--ui-text-2) !important; text-align: center; }
.game-over-title { color: var(--ui-down) !important; text-shadow: none !important; letter-spacing: .02em !important; }
.game-over-stats > div { border: 1px solid var(--ui-stroke) !important; border-radius: 10px !important; background: rgba(255, 255, 255, .02) !important; }
.game-over-stats span { color: var(--ui-text-3) !important; }
.game-over-stats strong { color: var(--ui-text) !important; font-family: var(--ui-mono); }
.room-invite-visual {
  border: 1px solid var(--ui-stroke-2) !important;
  color: var(--ui-text) !important;
  background: var(--ui-bg-3) !important;
  box-shadow: none !important;
  transform: none !important;
}
.room-invite-visual i { display: none !important; }
#roomInviteCountdown { color: var(--ui-text-2) !important; }
.rectangle-settings-dialog .rectangle-dialog-heading button { border: 0 !important; border-radius: 50% !important; width: 30px; height: 30px; color: var(--ui-text-2) !important; background: rgba(255, 255, 255, .07) !important; }
.rectangle-tabs button { color: var(--ui-text-2) !important; }
.rectangle-tabs button.active { color: var(--ui-text) !important; }
.rectangle-settings-dialog input[type="color"] { border: 1px solid var(--ui-stroke-2) !important; border-radius: 8px !important; background: var(--ui-bg-1) !important; }

/* ==========================================================================
   实时账户面板（图表右上角）
   ========================================================================== */
.pnl-hud {
  position: absolute;
  z-index: 9;
  top: 12px;
  right: 92px;
  width: 248px;
  padding: 12px 14px;
  border: 1px solid var(--ui-stroke-2);
  border-radius: var(--ui-radius);
  color: var(--ui-text);
  background: rgba(15, 16, 20, .9);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  font-feature-settings: "tnum" 1;
  pointer-events: auto;
  transition: border-color 200ms var(--ui-ease);
}
.pnl-hud.has-position { border-color: var(--ui-stroke-3); }
body.home-active .pnl-hud, body.teacher-dashboard-active .pnl-hud { display: none; }
.pnl-hud-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pnl-hud-head span { display: block; color: var(--ui-text-3); font-size: 11px; }
.pnl-hud-head strong { display: block; margin-top: 2px; font-family: var(--ui-mono); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.pnl-hud-chip { padding: 2px 8px; border-radius: 999px; color: var(--ui-text-2); background: rgba(255, 255, 255, .06); font-family: var(--ui-mono); font-size: 12px; font-style: normal; font-weight: 600; }
.pnl-hud-chip.positive { color: var(--ui-up); background: var(--ui-up-soft); }
.pnl-hud-chip.negative { color: var(--ui-down); background: var(--ui-down-soft); }
.pnl-hud-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ui-text-3); font-size: 11px; }
.pnl-hud-meta b { margin-left: 4px; color: var(--ui-text-2); font-family: var(--ui-mono); font-weight: 500; }
.pnl-hud .positive { color: var(--ui-up) !important; }
.pnl-hud .negative { color: var(--ui-down) !important; }
.pnl-hud-position { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-stroke); animation: ui-pop 220ms var(--ui-ease); }
.pnl-hud-position-title { display: flex; align-items: center; gap: 8px; color: var(--ui-text-2); font-size: 11.5px; }
.pnl-hud-side { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: #fff; font-size: 12px; }
.pnl-hud-side.is-long { background: var(--ui-up); }
.pnl-hud-side.is-short { background: var(--ui-down); }
.pnl-hud-pnl { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; margin-top: 8px; }
.pnl-hud-pnl span { grid-column: 1 / -1; color: var(--ui-text-3); font-size: 11px; }
.pnl-hud-pnl strong { font-family: var(--ui-mono); font-size: 20px; font-weight: 600; }
.pnl-hud-pnl em { font-family: var(--ui-mono); font-size: 13px; font-style: normal; font-weight: 600; }
.pnl-hud dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0 0; }
.pnl-hud dl div { min-width: 0; }
.pnl-hud dt { color: var(--ui-text-3); font-size: 10.5px; }
.pnl-hud dd { margin: 1px 0 0; overflow: hidden; color: var(--ui-text); font-family: var(--ui-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pnl-hud dd.is-liq { color: var(--ui-warn); }
@media (max-width: 900px) { .pnl-hud { top: auto; right: 10px; bottom: 54px; width: 220px; } }

/* 已平仓：落败一侧（盈利时的红色止损区／亏损时的绿色利润区）由开仓线向外渐隐 */
.position-risk-zone.closed-profit-red,
.position-risk-zone.closed-loss-green {
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: .75;
}
.position-risk-zone.closed-profit-red { background: rgba(221, 46, 70, .34) !important; }
.position-risk-zone.closed-loss-green { background: rgba(0, 178, 132, .3) !important; }
.position-risk-zone.closed-profit-red.zone-below,
.position-risk-zone.closed-loss-green.zone-below {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
}
.position-risk-zone.closed-profit-red.zone-above,
.position-risk-zone.closed-loss-green.zone-above {
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
}
.position-risk-zone.closed-profit-red::after,
.position-risk-zone.closed-loss-green::after { display: none; }

/* 止损标签可直接拖动 */
.position-risk-zone span.position-stop-label { cursor: ns-resize; }
.position-stop-lock { font-size: 11px !important; }

/* 画图工具：每个工具下方显示快捷键 */
.floating-drawing-toolbar button[data-key] { position: relative; height: 36px !important; padding-bottom: 9px !important; }
.floating-drawing-toolbar button[data-key]::after {
  content: attr(data-key);
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  color: var(--ui-text-3);
  font: 600 8.5px/1 var(--ui-mono);
  letter-spacing: 0;
  pointer-events: none;
}
.floating-drawing-toolbar button[data-key].tool-active::after,
.floating-drawing-toolbar button[data-key].active::after { color: rgba(255, 255, 255, .8); }
.floating-drawing-toolbar .chart-type-switch button, .floating-drawing-toolbar-drag-handle { height: 36px !important; }

/* 快捷键列表：位于指标图例下方，可收起 */
.chart-stage .shortcut-legend {
  display: block !important;
  position: absolute;
  z-index: 6;
  left: 12px !important;
  bottom: auto !important;
  max-width: 236px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: auto;
}
.chart-stage .shortcut-legend > button {
  height: 24px;
  padding: 0 10px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 999px !important;
  color: var(--ui-text-2) !important;
  background: rgba(17, 18, 22, .9) !important;
  font-size: 11.5px !important;
  cursor: pointer;
}
.chart-stage .shortcut-legend > div {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px !important;
  max-width: none !important;
  margin-top: 6px;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text-2) !important;
  background: rgba(17, 18, 22, .92) !important;
  font-size: 11px !important;
  opacity: 1;
  transition: opacity 180ms var(--ui-ease);
}
.chart-stage .shortcut-legend.collapsed > div { display: none !important; }
.chart-stage .shortcut-legend > div span { display: flex !important; align-items: center; gap: 6px; white-space: nowrap; }
.chart-stage .shortcut-legend kbd { min-width: 18px; height: 18px; margin: 0; padding: 0 4px; font-size: 10px; }

/* ==========================================================================
   玩家资料与人物形象
   ========================================================================== */
.avatar-face.has-character,
.has-character {
  display: inline-grid !important;
  place-items: center;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  font-size: 0 !important;
}
.has-character > svg { display: block; width: 100%; height: 100%; }
.player-avatar.has-character { width: 26px !important; height: 26px !important; }
#homeDashboard #homeAvatar.has-character { width: 34px; height: 34px; }
.leaderboard-avatar.has-character { width: 38px !important; height: 38px !important; }
.teacher-student-slot-avatar.has-character { width: 22px !important; height: 22px !important; }

.auth-dialog { width: min(460px, calc(100vw - 32px)) !important; }
.profile-dialog { width: min(480px, calc(100vw - 32px)) !important; }
.profile-fields { display: grid; gap: 12px; }
.profile-fields label, .profile-field { display: grid; gap: 6px; min-width: 0; }
.profile-fields label > span, .profile-field > span { color: var(--ui-text-2); font-size: 12.5px; }
.profile-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-fields select { width: 100%; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; min-height: 40px; padding: 2px; border: 1px solid var(--ui-stroke-2); border-radius: 10px; background: var(--ui-bg-1); }
.segmented button {
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 160ms var(--ui-ease), color 160ms var(--ui-ease);
}
.segmented button.active { color: var(--ui-text) !important; background: var(--ui-bg-4) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.profile-character-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ui-stroke-2);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .02);
}
.profile-character-preview { width: 56px; height: 56px; overflow: hidden; border-radius: 14px; background: var(--ui-bg-3); }
.profile-character-preview.is-empty { border: 1px dashed var(--ui-stroke-3); background: transparent; }
.profile-character-preview svg { display: block; width: 100%; height: 100%; }
.profile-character-row strong { display: block; color: var(--ui-text); font-size: 13.5px; }
.profile-character-row small { color: var(--ui-text-3); font-size: 12px; }
.profile-character-row button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--ui-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.profile-character-row button:hover { background: var(--ui-accent-2); }
.profile-password-section { display: grid; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid var(--ui-stroke-2); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.profile-password-section > div:first-child { display: grid; gap: 3px; }
.profile-password-section strong { color: var(--ui-text); font-size: 13.5px; }
.profile-password-section small { color: var(--ui-text-3); font-size: 12px; }
.profile-password-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profile-password-fields label { display: grid; gap: 6px; }
.profile-password-fields label > span { color: var(--ui-text-2); font-size: 12px; }
.profile-password-section > button { min-height: 34px; justify-self: start; padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: var(--ui-accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.profile-password-section > button:hover { background: var(--ui-accent-2); }
.profile-password-section > button:disabled { cursor: wait; opacity: .55; }
.profile-note { margin: 0 !important; }

/* 形象设计器 */
.character-dialog {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--ui-stroke-2);
  border-radius: var(--ui-radius-l);
  color: var(--ui-text);
  background: rgba(20, 21, 26, .98);
  box-shadow: var(--ui-shadow-l);
  overflow: hidden;
}
.character-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 26px); margin: 0; }
.character-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 12px; }
.character-head p { margin: 0 0 4px; color: var(--ui-text-3); font-size: 12px; font-weight: 600; }
.character-head h2 { margin: 0; font-size: 20px; font-weight: 650; }
.character-close { width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--ui-text-2); background: rgba(255, 255, 255, .07); font-size: 15px; cursor: pointer; }
.character-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; border-top: 1px solid var(--ui-stroke); }
.character-stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  border-right: 1px solid var(--ui-stroke);
  background: radial-gradient(260px 200px at 50% 30%, rgba(61, 123, 255, .16), transparent 70%), linear-gradient(180deg, #121521, #0c0d12);
}
.character-full { width: 220px; height: 380px; animation: chr-idle 4s ease-in-out infinite; }
.character-full svg { width: 100%; height: 100%; }
@keyframes chr-idle { 50% { transform: translateY(-4px); } }
.character-avatar-preview { position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); }
.character-avatar-preview svg { width: 100%; height: 100%; }
.character-random { min-height: 34px; padding: 0 16px; border: 1px solid var(--ui-stroke-2); border-radius: 999px; color: var(--ui-text); background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 600; cursor: pointer; }
.character-random:hover { background: rgba(255, 255, 255, .1); }
.character-editor { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.character-tabs { display: flex; gap: 2px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--ui-stroke); scrollbar-width: none; }
.character-tabs button { flex: 0 0 auto; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; color: var(--ui-text-2); background: transparent; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.character-tabs button:hover { color: var(--ui-text); }
.character-tabs button.active { color: #0b0b0d; background: var(--ui-text); }
.character-options { display: grid; align-content: start; gap: 10px; padding: 16px; overflow-y: auto; }
.character-options.is-swatch { grid-template-columns: repeat(auto-fill, 44px); }
.character-options.is-chips { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.character-options.is-preview { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.character-options.is-preview.is-full { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.character-swatch { width: 44px; height: 44px; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); cursor: pointer; transition: transform 160ms var(--ui-ease); }
.character-swatch:hover { transform: scale(1.08); }
.character-swatch.active { border-color: var(--ui-text); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.character-chip { min-height: 40px; border: 1px solid var(--ui-stroke-2); border-radius: 10px; color: var(--ui-text-2); background: rgba(255, 255, 255, .03); font-size: 13px; font-weight: 600; cursor: pointer; }
.character-chip:hover { color: var(--ui-text); border-color: var(--ui-stroke-3); }
.character-chip.active { color: var(--ui-text); border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.character-tile { display: grid; justify-items: center; gap: 6px; padding: 8px 6px; border: 1px solid var(--ui-stroke); border-radius: 12px; color: var(--ui-text-2); background: rgba(255, 255, 255, .02); font-size: 12px; cursor: pointer; transition: border-color 160ms var(--ui-ease), background 160ms var(--ui-ease); }
.character-tile svg { width: 72px; height: 72px; }
.character-options.is-full .character-tile svg { width: 72px; height: 120px; }
.character-tile:hover { border-color: var(--ui-stroke-3); color: var(--ui-text); }
.character-tile.active { border-color: var(--ui-accent); color: var(--ui-text); background: var(--ui-accent-soft); }
.character-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--ui-stroke); color: var(--ui-text-3); font-size: 12px; }
.character-foot div { display: flex; gap: 8px; }
.character-foot button { min-height: 38px; padding: 0 18px; border: 1px solid var(--ui-stroke-2); border-radius: 10px; color: var(--ui-text); background: rgba(255, 255, 255, .04); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.character-foot .character-save { border-color: transparent; color: #fff; background: var(--ui-accent); }
.character-foot .character-save:hover { background: var(--ui-accent-2); }
@media (max-width: 760px) {
  .character-body { grid-template-columns: 1fr; overflow-y: auto; }
  .character-stage { border-right: 0; border-bottom: 1px solid var(--ui-stroke); }
  .character-full { width: 140px; height: 240px; }
  .character-foot span { display: none; }
  .profile-field-row { grid-template-columns: 1fr; }
}
.chart-stage .shortcut-legend > button { width: auto !important; min-width: 0 !important; white-space: nowrap; writing-mode: horizontal-tb; }
.chart-stage #activeIndicatorLegend { top: 112px !important; left: 12px !important; }
.leaderboard-row { align-items: center !important; }
.room-podium-card { position: relative; }
.room-podium-figure { display: block; width: 92px; height: 160px; margin: 0 auto 6px; animation: chr-idle 3.6s ease-in-out infinite; }
.room-podium-figure svg { width: 100%; height: 100%; }
.room-podium-card.rank-1 .room-podium-figure { width: 112px; height: 196px; }
.room-podium-figure.is-placeholder { filter: grayscale(1) brightness(.55); opacity: .5; }
.room-podium-card {
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius-l) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
  box-shadow: none !important;
}
.room-podium-card.rank-1 { border-color: rgba(240, 193, 75, .55) !important; background: linear-gradient(180deg, rgba(240, 193, 75, .2), rgba(240, 193, 75, .03)) !important; box-shadow: 0 20px 60px rgba(240, 193, 75, .12) !important; }
.room-podium-card.rank-2 { border-color: rgba(207, 211, 218, .4) !important; }
.room-podium-card.rank-3 { border-color: rgba(215, 154, 98, .4) !important; }
.room-podium-card strong { color: var(--ui-text) !important; }
.room-podium-card small { color: var(--ui-text-3) !important; }
.room-podium-card b { color: var(--ui-text) !important; font-family: var(--ui-mono); text-shadow: none !important; }
.room-podium-rank { color: var(--ui-text-2) !important; text-shadow: none !important; }
.pnl-hud-foot { margin: 8px 0 0; color: var(--ui-text-3); font-size: 10.5px; line-height: 1.5; }

/* 模式提示条 */
.mode-banner {
  position: absolute;
  z-index: 14;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid rgba(61, 123, 255, .55);
  border-radius: 999px;
  color: var(--ui-text);
  background: rgba(20, 28, 48, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
  animation: ui-pop 200ms var(--ui-ease);
  white-space: nowrap;
}
.mode-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent-2); box-shadow: 0 0 0 4px rgba(61, 123, 255, .2); }
.mode-banner strong { font-size: 13px; font-weight: 650; }
.mode-banner-hint { color: var(--ui-text-2); font-size: 12px; }
.mode-banner-hint kbd { height: 18px; min-width: 18px; font-size: 10px; }
.mode-banner button {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--ui-accent);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.mode-banner button:hover { background: var(--ui-accent-2); }
@media (max-width: 760px) { .mode-banner-hint { display: none; } }
.chart-stage.over-stop-lock, .chart-stage.over-stop-lock * { cursor: pointer !important; }

/* 实时账户面板停靠在右侧栏顶部（屏幕右上角），不遮挡任何K线 */
.pnl-hud.pnl-hud-docked {
  position: static;
  order: -2;
  width: auto;
  margin: 0;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--ui-stroke);
  border-radius: 0;
  background: var(--ui-bg-1);
  box-shadow: none;
}
.side-panel:has(> .pnl-hud-docked) { grid-template-rows: auto auto minmax(0, 1fr) !important; }
.order-card .account-compact { display: none !important; }
body.teacher-sidebar-mode .pnl-hud-docked { display: none; }
/* 右侧栏：账户面板 → 下单 → 交易记录，整栏一起滚动，不会互相重叠 */
.side-panel:not([hidden]) { display: flex !important; flex-direction: column; overflow-y: auto !important; overflow-x: hidden; }
.side-panel > .pnl-hud-docked, .side-panel > .order-card { flex: 0 0 auto; }
.side-panel > .side-scroll { flex: 1 0 auto; overflow: visible !important; }
.side-panel #positionCard { display: none !important; }

/* 资料对话框文字区域 */
.risk-dialog textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: 10px !important;
  color: var(--ui-text) !important;
  background: var(--ui-bg-1) !important;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}
.risk-dialog textarea:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-soft) !important; outline: none !important; }

/* 老师面板：房间列表与入场席位改为单栏，避免竖排文字 */
#teacherDialog .room-management { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
#teacherDialog .room-management-heading { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; gap: 8px; writing-mode: horizontal-tb; }
#teacherDialog .room-management-heading strong { color: var(--ui-text) !important; font-size: 13px !important; white-space: nowrap; }
#teacherDialog .room-management-heading span { color: var(--ui-text-3) !important; font-size: 11.5px !important; white-space: nowrap; }
#teacherDialog .teacher-room-list { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; }
#teacherDialog .teacher-room-list > * {
  border: 1px solid var(--ui-stroke-2) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-bg-2) !important;
  box-shadow: none !important;
}
#teacherDialog .teacher-room-list button { min-width: 0; white-space: nowrap; writing-mode: horizontal-tb; border-radius: var(--ui-radius-s) !important; color: var(--ui-text) !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--ui-stroke-2) !important; box-shadow: none !important; }
#teacherDialog .teacher-subfold { border: 1px solid var(--ui-stroke) !important; border-radius: var(--ui-radius) !important; background: transparent !important; }
#teacherDialog .teacher-subfold > summary { padding: 10px 12px !important; }
#teacherDialog .teacher-subfold > summary strong { color: var(--ui-text) !important; font-size: 13px !important; }
#teacherDialog .teacher-subfold > summary small { color: var(--ui-text-3) !important; }

/* 账户概览：右侧面板收起时浮在图表右上角，任何时候都看得到 */
.pnl-hud.pnl-hud-floating { top: 10px; right: calc(var(--price-axis-width, 72px) + 52px); width: 232px; padding: 10px 12px; pointer-events: none; }
.pnl-hud.pnl-hud-floating .pnl-hud-foot { display: none; }
.pnl-hud.pnl-hud-floating dl { gap: 4px 10px; margin-top: 8px; }
/* 老师端：所选学生的实时账户概览 */
.pnl-hud.teacher-student-hud,
.teacher-panorama-frame .teacher-student-account-hud {
  position: absolute !important;
  z-index: 30 !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  visibility: visible !important;
  width: 248px !important;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  padding: 10px 12px;
  pointer-events: none;
}

/* ===== 老师右侧面板（2026-10-09 重设计）===== */
/* 已开房：开房区隐藏（每位老师只有一个房间）；学生／控场区固定展开，标题只作分组用。 */
#teacherDialog #teacherOperationsPanel.has-active-room .teacher-room-fold > summary { pointer-events: none; min-height: 0 !important; padding: 12px 14px 6px !important; }
#teacherDialog #teacherOperationsPanel.has-active-room .teacher-room-fold > summary b { display: none !important; }
#teacherDialog #teacherOperationsPanel.has-active-room .teacher-room-fold > summary small { display: none !important; }
#teacherDialog #teacherOperationsPanel.has-active-room .teacher-room-fold > summary strong { color: var(--ui-text-3) !important; font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; }
#teacherDialog #teacherOperationsPanel.has-active-room #teacherRoomList,
#teacherDialog #teacherOperationsPanel.has-active-room .room-management-heading,
#teacherDialog #teacherOperationsPanel.has-active-room #teacherStudentPickerFold { display: none !important; }
#teacherDialog #teacherOperationsPanel.has-active-room .room-management { display: block !important; padding: 0 14px 12px !important; border: 0 !important; background: transparent !important; }

/* 学生名单 */
.teacher-roster { display: grid; gap: 6px; }
.teacher-roster-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.teacher-roster-head strong { color: var(--ui-text); font-size: 13px; font-weight: 650; }
.teacher-roster-head span { color: var(--ui-text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.teacher-roster-row { display: grid; grid-template-columns: 8px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ui-stroke); border-radius: var(--ui-radius-s); background: rgba(255, 255, 255, .025); transition: border-color 160ms ease, opacity 160ms ease; }
.teacher-roster-row:hover { border-color: var(--ui-stroke-2); }
.teacher-roster-row.is-offline { opacity: .62; border-style: dashed; }
.teacher-roster-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-up); box-shadow: 0 0 0 3px var(--ui-up-soft); }
.teacher-roster-row.is-offline .teacher-roster-dot { background: var(--ui-text-3); box-shadow: none; }
.teacher-roster-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; }
.teacher-roster-name { display: grid; min-width: 0; gap: 1px; }
.teacher-roster-name strong { overflow: hidden; color: var(--ui-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.teacher-roster-name em { color: var(--ui-text-3); font-family: var(--ui-mono); font-size: 11px; font-style: normal; }
.teacher-roster-name em.is-ready, .teacher-roster-name em.positive { color: var(--ui-up); }
.teacher-roster-name em.is-waiting { color: var(--ui-warn); }
.teacher-roster-name em.negative { color: var(--ui-down); }
.teacher-roster-name em.is-offline { color: var(--ui-text-3); }
.teacher-roster-actions { display: flex; gap: 4px; }
.teacher-roster-actions button { min-height: 26px !important; padding: 0 8px !important; border: 1px solid var(--ui-stroke-2) !important; border-radius: 6px !important; color: var(--ui-text-2) !important; background: transparent !important; font-size: 11.5px !important; cursor: pointer; }
.teacher-roster-actions button:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, .06) !important; }
.teacher-roster-empty { display: grid; gap: 4px; padding: 16px 12px; border: 1px dashed var(--ui-stroke-2); border-radius: var(--ui-radius-s); text-align: center; }
.teacher-roster-empty strong { color: var(--ui-text-2); font-size: 13px; }
.teacher-roster-empty span { color: var(--ui-text-3); font-size: 11.5px; }
.teacher-ready-pill.is-offline { opacity: .6; border-style: dashed !important; }

/* 房间卡片上的接管按钮 */
#teacherDialog .room-lobby-quick-actions .room-lobby-takeover { color: #ffd54a !important; border-color: rgba(255, 213, 74, .4) !important; background: rgba(255, 213, 74, .06) !important; }
#teacherDialog .room-lobby-quick-actions .room-lobby-takeover:hover { background: rgba(255, 213, 74, .14) !important; }
#teacherDialog .room-lobby-quick-actions .room-lobby-takeover.is-active { color: #111 !important; border-color: transparent !important; background: #ffd54a !important; }

/* 快捷键图标与说明 */
#teacherDialog .teacher-shortcut-button { min-width: 32px; font-size: 15px !important; }
.teacher-shortcut-popover { position: absolute; z-index: 40; top: 52px; right: 12px; width: 320px; padding: 14px 16px; border: 1px solid var(--ui-stroke-2); border-radius: 12px; color: var(--ui-text); background: rgba(15, 16, 20, .97); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.teacher-shortcut-popover[hidden] { display: none; }
.teacher-shortcut-popover strong { display: block; margin-bottom: 10px; font-size: 13px; }
.teacher-shortcut-popover dl { display: grid; gap: 7px; margin: 0; }
.teacher-shortcut-popover dl div { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; }
.teacher-shortcut-popover dt { display: flex; gap: 3px; color: var(--ui-text-2); font-size: 11.5px; }
.teacher-shortcut-popover dd { margin: 0; color: var(--ui-text-2); font-size: 12px; }
.teacher-shortcut-popover kbd { min-width: 20px; padding: 1px 5px; border: 1px solid var(--ui-stroke-3); border-bottom-width: 2px; border-radius: 4px; color: var(--ui-text); background: var(--ui-bg-3); font-family: var(--ui-mono); font-size: 11px; text-align: center; }
.teacher-shortcut-popover p { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ui-stroke); color: var(--ui-text-3); font-size: 11.5px; line-height: 1.5; }

/* 接管工具栏（只在接管中显示） */
.teacher-takeover-bar { position: fixed; z-index: 60; top: 64px; left: 50%; display: flex; align-items: center; gap: 4px; padding: 5px 6px; border: 1px solid rgba(255, 213, 74, .45); border-radius: 12px; background: rgba(15, 16, 20, .95); box-shadow: 0 12px 36px rgba(0, 0, 0, .5); transform: translateX(-50%); }
.teacher-takeover-bar[hidden] { display: none; }
.teacher-takeover-bar button { display: grid; justify-items: center; gap: 1px; min-width: 46px; padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; color: var(--ui-text-2); background: transparent; cursor: pointer; }
.teacher-takeover-bar button b { font-size: 15px; line-height: 1; }
.teacher-takeover-bar button small { font-size: 10.5px; }
.teacher-takeover-bar button:hover { color: var(--ui-text); background: rgba(255, 255, 255, .06); }
.teacher-takeover-bar button.is-active { color: #111; background: #ffd54a; }
.teacher-takeover-bar .teacher-takeover-exit { min-width: 0; margin-left: 4px; padding: 0 12px; height: 34px; border-color: rgba(255, 213, 74, .45); color: #ffd54a; font-size: 12px; font-weight: 650; }
.teacher-takeover-live { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; color: #ffd54a; font-size: 12px; font-weight: 650; white-space: nowrap; }
.teacher-takeover-live i, .teacher-takeover-banner i { width: 8px; height: 8px; border-radius: 50%; background: #ffd54a; animation: teacher-takeover-pulse 1.4s ease-in-out infinite; }
@keyframes teacher-takeover-pulse { 50% { opacity: .35; } }
body.teacher-takeover-on #teacherLiveList .teacher-panorama-frame { outline: 2px solid rgba(255, 213, 74, .55); outline-offset: -2px; }
body.teacher-takeover-drawing #teacherLiveList .teacher-panorama-frame,
body.teacher-takeover-drawing #teacherLiveList .teacher-native-panorama-chart { cursor: crosshair !important; }

/* 学生端：老师画图层与「老师接管中」提示 */
.teacher-takeover-layer { position: absolute; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; }
.teacher-takeover-banner { position: absolute; z-index: 9; top: 10px; left: 50%; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(255, 213, 74, .5); border-radius: 999px; color: #ffd54a; background: rgba(15, 16, 20, .92); font-size: 12.5px; font-weight: 650; transform: translateX(-50%); pointer-events: none; }
.teacher-takeover-banner[hidden] { display: none; }

/* 连线状态提示（网络中断／老师暂时离线） */
.connection-banner { position: fixed; z-index: 2000; top: 60px; left: 50%; display: grid; gap: 4px; transform: translateX(-50%); pointer-events: none; }
.connection-banner[hidden] { display: none; }
.connection-banner span { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: #fff; background: rgba(140, 100, 10, .94); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); font-size: 12.5px; font-weight: 600; }
.connection-banner.is-error span { background: rgba(170, 36, 54, .95); }
.connection-banner i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: teacher-takeover-pulse 1.2s ease-in-out infinite; }

/* 老师全景：开仓标签放在布林带上方，字少不遮K线 */
.teacher-panorama-position-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; color: #e9fffa; background: rgba(5, 22, 35, .82); font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; transform: translateY(-100%); pointer-events: none; }
.teacher-panorama-position-tag i { font-style: normal; color: var(--ui-up); }
.teacher-panorama-position-tag.is-short i { color: var(--ui-down); }
.teacher-panorama-position-tag em { font-style: normal; font-family: var(--ui-mono); }
.teacher-panorama-position-tag.is-profit em { color: var(--ui-up); }
.teacher-panorama-position-tag.is-loss em { color: var(--ui-down); }
#teacherDialog .room-lobby-quick-actions .room-lobby-lock { color: var(--ui-text-2) !important; }
#teacherDialog .room-lobby-quick-actions .room-lobby-lock.is-locked { color: #ffd54a !important; border-color: rgba(255, 213, 74, .45) !important; background: rgba(255, 213, 74, .08) !important; }
.hx-title .hx-line { white-space: nowrap; }

/* ===== 比赛模式与分组 ===== */
.match-setup-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--ui-stroke-2); border-radius: 18px; color: var(--ui-text); background: linear-gradient(180deg, #14151a, #0d0e11); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.match-setup-dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); }
.match-setup-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: calc(100vh - 34px); }
.match-setup-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 10px; }
.match-setup-head p { margin: 0; color: var(--ui-text-3); font-size: 12px; letter-spacing: .12em; }
.match-setup-head h2 { margin: 4px 0 0; font-size: 22px; }
.match-setup-close { width: 32px; height: 32px; border: 1px solid var(--ui-stroke-2); border-radius: 50%; color: var(--ui-text-2); background: transparent; cursor: pointer; }
.match-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 22px 14px; }
.match-mode-card { display: grid; justify-items: start; gap: 4px; padding: 16px 18px; border: 1.5px solid var(--ui-stroke-2); border-radius: 14px; color: var(--ui-text); background: rgba(255, 255, 255, .03); text-align: left; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.match-mode-card:hover { transform: translateY(-2px); border-color: var(--ui-stroke-3); }
.match-mode-card.is-active { border-color: #ffd43b; background: rgba(255, 212, 59, .07); box-shadow: 0 0 0 3px rgba(255, 212, 59, .12); }
.match-mode-icon { font-size: 26px; }
.match-mode-card strong { font-size: 17px; }
.match-mode-card small { color: var(--ui-text-2); font-size: 12.5px; }
.match-mode-card em { margin-top: 4px; color: #ffd43b; font-size: 11.5px; font-style: normal; }
.match-team-editor { min-height: 0; overflow: auto; padding: 0 22px 12px; }
.match-team-editor[hidden] { display: none; }
.match-team-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.match-team-count { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--ui-stroke-2); border-radius: 999px; color: var(--ui-text-2); font-size: 12.5px; }
.match-team-count b { min-width: 18px; color: var(--ui-text); text-align: center; }
.match-team-count button, .match-team-toolbar > button { min-height: 30px; padding: 0 12px; border: 1px solid var(--ui-stroke-2); border-radius: 999px; color: var(--ui-text); background: rgba(255, 255, 255, .05); cursor: pointer; }
.match-team-count button { width: 28px; padding: 0; }
.match-team-random { border-color: rgba(255, 212, 59, .45) !important; color: #ffd43b !important; }
.match-team-hint { margin: 0 0 10px; color: var(--ui-text-3); font-size: 12px; }
.match-team-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; margin-bottom: 12px; padding: 8px 10px; border: 1px dashed var(--ui-stroke-3); border-radius: 12px; }
.match-team-pool-label { margin-right: 4px; color: var(--ui-text-3); font-size: 12px; }
.match-team-pool em, .match-team-members em { color: var(--ui-text-3); font-size: 12px; font-style: normal; }
.match-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.match-team-card { display: grid; align-content: start; gap: 8px; min-height: 140px; padding: 10px; border: 1px solid color-mix(in srgb, var(--team) 45%, transparent); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--team) 14%, transparent), rgba(255, 255, 255, .02)); transition: transform 160ms ease, box-shadow 160ms ease; }
.match-team-card.is-over, .match-team-pool.is-over { box-shadow: 0 0 0 2px var(--team, #ffd43b); transform: scale(1.01); }
.match-team-card-head { display: flex; align-items: center; gap: 8px; }
.match-team-card-head i { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--team); }
.match-team-card-head input { min-width: 0; flex: 1; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; color: var(--ui-text); background: transparent; font-size: 15px; font-weight: 700; }
.match-team-card-head input:hover, .match-team-card-head input:focus { border-color: var(--ui-stroke-2); background: rgba(0, 0, 0, .25); outline: none; }
.match-team-card-head b { color: var(--ui-text-3); font-size: 11.5px; font-weight: 500; }
.match-team-members { display: flex; flex-wrap: wrap; gap: 6px; }
.match-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--ui-stroke-2); border-radius: 999px; color: var(--ui-text); background: var(--ui-bg-2); font-size: 12.5px; cursor: grab; transition: transform 140ms ease, border-color 140ms ease; }
.match-chip:hover { transform: translateY(-1px); border-color: var(--ui-stroke-3); }
.match-chip.is-selected { border-color: #ffd43b; box-shadow: 0 0 0 2px rgba(255, 212, 59, .25); }
.match-chip.is-offline { opacity: .55; }
.match-chip-avatar { width: 22px !important; height: 22px !important; border-radius: 50% !important; }
.match-team-grid.is-shuffled .match-chip { animation: match-chip-in 420ms cubic-bezier(.2, .9, .3, 1.3) both; }
.match-team-grid.is-shuffled .match-team-card:nth-child(2) .match-chip { animation-delay: 60ms; }
.match-team-grid.is-shuffled .match-team-card:nth-child(3) .match-chip { animation-delay: 120ms; }
.match-team-grid.is-shuffled .match-team-card:nth-child(n+4) .match-chip { animation-delay: 180ms; }
@keyframes match-chip-in { from { opacity: 0; transform: translateY(-14px) scale(.8); } }
.match-setup-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--ui-stroke); }
.match-setup-foot span { color: var(--ui-text-2); font-size: 12.5px; }
.match-setup-foot div { display: flex; gap: 8px; }
.match-setup-foot button { min-height: 38px; padding: 0 16px; border: 1px solid var(--ui-stroke-2); border-radius: 10px; color: var(--ui-text); background: transparent; cursor: pointer; }
.match-setup-foot .match-setup-go { border-color: transparent; color: #111; background: #ffd43b; font-weight: 700; }
.match-setup-foot .match-setup-go:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 640px) { .match-mode-picker { grid-template-columns: 1fr; } }

#teacherDialog .room-lobby-quick-actions .room-lobby-teams { color: #9ad0ff !important; }
.teacher-roster-team { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; color: #111; background: var(--team); font-size: 10.5px; font-style: normal; font-weight: 700; vertical-align: 1px; }

/* 学生：分组公告与小组徽章 */
.team-announce-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; color: var(--ui-text); background: #111216; box-shadow: 0 30px 80px rgba(0, 0, 0, .65); overflow: hidden; }
.team-announce-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.team-announce-body { display: grid; justify-items: center; gap: 10px; padding: 0 22px 8px; text-align: center; }
.team-announce-flag { display: grid; gap: 4px; width: calc(100% + 44px); margin: 0 -22px; padding: 26px 0 22px; background: linear-gradient(135deg, var(--team), color-mix(in srgb, var(--team) 40%, #111)); color: #111; animation: team-flag-in 520ms cubic-bezier(.2, .9, .3, 1.2) both; }
.team-announce-flag span { font-size: 12px; font-weight: 700; letter-spacing: .2em; opacity: .75; }
.team-announce-flag strong { font-size: 30px; font-weight: 900; letter-spacing: .04em; }
@keyframes team-flag-in { from { opacity: 0; transform: scale(.85); } }
.team-announce-body p { margin: 6px 0 0; color: var(--ui-text-2); font-size: 13px; }
.team-announce-mates { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.team-announce-mates span { display: grid; justify-items: center; gap: 4px; }
.team-announce-avatar { width: 44px !important; height: 44px !important; border-radius: 50% !important; }
.team-announce-mates b { font-size: 12.5px; }
.team-announce-body small { color: var(--ui-text-3); font-size: 11.5px; }
.team-announce-ok { display: block; width: calc(100% - 44px); margin: 12px 22px 22px; min-height: 42px; border: 0; border-radius: 12px; color: #111; background: #ffd43b; font-size: 15px; font-weight: 800; cursor: pointer; }
.my-team-badge { position: absolute; z-index: 7; top: 50px; left: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid color-mix(in srgb, var(--team) 55%, transparent); border-radius: 999px; background: rgba(15, 16, 20, .88); font-size: 12px; pointer-events: none; }
.my-team-badge[hidden] { display: none; }
.my-team-badge i { width: 9px; height: 9px; border-radius: 3px; background: var(--team); }
.my-team-badge span { color: var(--ui-text-3); }
.live-ranking-float .team-row .team-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--team); }
.live-ranking-float .personal-row { margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, .12); }

/* ===== 颁奖典礼 ===== */
.ceremony-stage { display: grid; gap: 14px; min-height: 280px; animation: ceremony-in 420ms ease both; }
@keyframes ceremony-in { from { opacity: 0; transform: translateY(10px); } }
.ceremony-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; }
.ceremony-team { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 0; text-align: center; }
.ceremony-team strong { font-size: 18px; font-weight: 900; color: var(--team); }
.ceremony-team b { font-family: var(--ui-mono); font-size: 14px; }
.ceremony-team small { color: var(--ui-text-3); font-size: 11.5px; }
.ceremony-rank { font-size: 30px; }
.ceremony-step { display: block; width: 100%; margin-top: 8px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--team) 70%, transparent), color-mix(in srgb, var(--team) 15%, transparent)); }
.ceremony-team.rank-1 .ceremony-step { height: 120px; }
.ceremony-team.rank-2 .ceremony-step { height: 84px; }
.ceremony-team.rank-3 .ceremony-step { height: 60px; }
.ceremony-mvp { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 0; text-align: center; overflow: hidden; }
.ceremony-mvp-rays { position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg, rgba(255, 212, 59, .14) 0 10deg, transparent 10deg 20deg); animation: ceremony-rays 14s linear infinite; pointer-events: none; }
@keyframes ceremony-rays { to { transform: rotate(360deg); } }
.ceremony-crown { position: relative; font-size: 46px; animation: ceremony-crown 900ms cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes ceremony-crown { from { opacity: 0; transform: translateY(-30px) scale(.5); } }
.ceremony-mvp-figure { position: relative; display: block !important; width: 140px; margin: 0 auto; }
.ceremony-mvp-figure .room-podium-card { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.ceremony-mvp-figure .room-podium-card > strong { display: none; }
.ceremony-mvp h3 { position: relative; margin: 0; font-size: 26px; font-weight: 900; }
.ceremony-mvp-team { position: relative; margin: 0; padding: 2px 10px; border-radius: 999px; color: #111; background: var(--team); font-size: 12px; font-weight: 700; }
.ceremony-mvp b { position: relative; font-family: var(--ui-mono); font-size: 18px; }
.ceremony-mvp em { position: relative; padding: 4px 14px; border-radius: 999px; color: #111; background: #ffd43b; font-style: normal; font-weight: 800; animation: ceremony-pop 600ms 500ms cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes ceremony-pop { from { opacity: 0; transform: scale(.4); } }
.ceremony-awards { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.ceremony-award-row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .03); text-align: left; }
.ceremony-award-row.is-me { border-color: #ffd43b; background: rgba(255, 212, 59, .08); }
.ceremony-award-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ceremony-award-row span { display: flex; flex-wrap: wrap; gap: 4px; }
.ceremony-award-row i { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 11px; font-style: normal; }
.ceremony-award-row i.award-mvp { color: #111; background: #ffd43b; font-weight: 700; }
.ceremony-award-row i.award-team, .ceremony-award-row i.award-solo { color: #9ad0ff; background: rgba(77, 171, 247, .15); }
.ceremony-award-row b { color: #ffd43b; font-family: var(--ui-mono); font-size: 15px; }
.ceremony-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ceremony-nav i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.ceremony-nav i.is-active { width: 18px; border-radius: 4px; background: #ffd43b; }
.ceremony-nav button { margin-left: 10px; padding: 4px 12px; border: 1px solid rgba(255, 212, 59, .45); border-radius: 999px; color: #ffd43b; background: transparent; cursor: pointer; }

/* ===== 手机版（≤ 760px）：图表占满画面，按钮改为图标，面板一律收起 ===== */
@media (max-width: 760px) {
  body:not(.home-active) .topbar { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; height: 44px !important; min-height: 44px !important; padding: 0 8px !important; overflow: hidden !important; }
  body:not(.home-active) .topbar .brand,
  body:not(.home-active) .topbar .quote-badge,
  body:not(.home-active) .topbar .quote-separator,
  body:not(.home-active) .topbar .chart-spread,
  body:not(.home-active) .topbar .toolbar-note,
  body:not(.home-active) .topbar .symbol-button,
  body:not(.home-active) .topbar .toolbar-menus,
  body:not(.home-active) .topbar .chart-tools,
  body:not(.home-active) .topbar .lang-switch,
  body:not(.home-active) #roomLeaderboardButton,
  body:not(.home-active) #roomArchiveButton,
  body:not(.home-active) #memberAdminButton,
  body:not(.home-active) #newRandomChartButton,
  body:not(.home-active) .topbar [data-interval="45m"],
  body:not(.home-active) .topbar [data-interval="2h"],
  body:not(.home-active) .topbar [data-interval="6h"],
  body:not(.home-active) .topbar [data-interval="8h"],
  body:not(.home-active) .topbar [data-interval="1w"] { display: none !important; }
  body:not(.home-active) .topbar .toolbar { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
  body:not(.home-active) .topbar .timeframe-group { display: flex !important; flex-wrap: nowrap !important; gap: 2px !important; overflow-x: auto !important; scrollbar-width: none; }
  body:not(.home-active) .topbar .timeframe-group::-webkit-scrollbar { display: none; }
  body:not(.home-active) .topbar [data-interval] { flex: none !important; min-width: 34px !important; height: 30px !important; padding: 0 6px !important; font-size: 11.5px !important; }
  body:not(.home-active) .top-actions { flex: none !important; display: flex !important; gap: 4px !important; margin: 0 !important; }
  body:not(.home-active) .top-actions .top-nav-primary,
  body:not(.home-active) .top-actions .top-nav-context { display: flex !important; gap: 4px !important; }
  /* 文字按钮改成图标 */
  body:not(.home-active) #mainMenuButton,
  body:not(.home-active) #joinRoomButton,
  body:not(.home-active) #teacherButton,
  body:not(.home-active) #finishTopButton { width: 34px !important; min-width: 34px !important; height: 30px !important; padding: 0 !important; font-size: 0 !important; overflow: hidden !important; }
  body:not(.home-active) #mainMenuButton::before { content: "⌂"; font-size: 17px; }
  body:not(.home-active) #joinRoomButton::before { content: "⎆"; font-size: 15px; }
  body:not(.home-active) #teacherButton::before { content: "◎"; font-size: 15px; }
  body:not(.home-active) #finishTopButton::before { content: "■"; font-size: 13px; }
  body:not(.home-active) #mainMenuButton span { display: none !important; }
  body:not(.home-active) #playerButton { width: 34px !important; min-width: 34px !important; height: 30px !important; padding: 0 !important; overflow: hidden !important; }
  body:not(.home-active) #playerButton > span:not(.player-avatar) { display: none !important; }

  /* 图表占满：顶部 44px，底部交易栏 56px */
  body:not(.home-active) .trainer-grid { grid-template-columns: minmax(0, 1fr) 0 !important; height: calc(100dvh - 44px) !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; }
  body:not(.home-active) .trainer-grid .side-panel,
  body:not(.home-active) .trainer-grid .side-panel-toggle { display: none !important; }
  body:not(.home-active) .chart-stage { padding-bottom: 56px !important; }
  body:not(.home-active) #shortcutLegend,
  body:not(.home-active) .chart-legend,
  body:not(.home-active) #activeIndicatorLegend,
  body:not(.home-active) #landesWaterPanel,
  body:not(.home-active) #priceScaleHeader,
  body:not(.home-active) .live-ranking-float,
  body:not(.home-active) #modeBanner .mode-banner-hint { display: none !important; }
  /* 画图工具：默认收起，只留一个图标 */
  body:not(.home-active) #floatingDrawingToolbar { top: 6px !important; left: 6px !important; max-width: calc(100vw - 12px) !important; overflow-x: auto !important; }
  body:not(.home-active) #floatingDrawingToolbar:not(.mobile-open) > :not(.floating-drawing-toolbar-toggle) { display: none !important; }
  /* 交易按钮：固定在底部一排 */
  body:not(.home-active) #quickTradeDock { position: fixed !important; z-index: 40 !important; inset: auto 0 0 0 !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 6px !important; width: auto !important; height: 56px !important; margin: 0 !important; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-top: 1px solid var(--ui-stroke) !important; border-radius: 0 !important; background: rgba(10, 11, 14, .96) !important; transform: none !important; }
  body:not(.home-active) #quickTradeDock[hidden] { display: none !important; }
  body:not(.home-active) #quickTradeDock .quick-trade-actions { display: flex !important; flex: 1 1 auto !important; gap: 6px !important; }
  body:not(.home-active) #quickTradeDock .quick-trade-actions[hidden] { display: none !important; }
  body:not(.home-active) #quickTradeDock button { flex: 1 1 0 !important; min-height: 0 !important; height: 100% !important; padding: 0 4px !important; font-size: 14px !important; }
  body:not(.home-active) #quickTradeDock .quick-risk-button { flex: 0 0 64px !important; font-size: 12px !important; }
  /* 账户概览：缩成一个小卡片（权益 + 未实现盈亏） */
  body:not(.home-active) #pnlHud.pnl-hud-floating { top: 6px !important; right: 66px !important; left: auto !important; bottom: auto !important; width: auto !important; min-width: 132px !important; padding: 6px 10px !important; }
  body:not(.home-active) #pnlHud.pnl-hud-floating dl,
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-meta,
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-position-title,
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-head span { display: none !important; }
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-head strong { font-size: 15px !important; }
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-position { margin-top: 4px !important; padding-top: 4px !important; }
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-pnl { margin: 0 !important; }
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-pnl span { display: none !important; }
  body:not(.home-active) #pnlHud.pnl-hud-floating .pnl-hud-pnl strong { font-size: 14px !important; }
  body:not(.home-active) .candle-playback-controls.is-floating { bottom: 64px !important; transform: translateX(-50%) scale(.86) !important; }
  .room-ready-overlay { width: calc(100vw - 32px) !important; }
  .my-team-badge { top: 44px; left: 6px; }
  .teacher-takeover-banner { top: 44px; font-size: 11.5px; }

  /* 老师端：控制面板默认收起，全景图占满 */
  #teacherDialog .teacher-topline #teacherTopStudentRibbon,
  #teacherDialog .teacher-shortcut-button,
  #teacherDialog .teacher-monitor-heading,
  #teacherDialog #teacherRoomArchiveList { display: none !important; }
  #teacherDialog #refreshTeacherButton,
  #teacherDialog #closeTeacherButton { width: 34px !important; min-width: 34px !important; padding: 0 !important; font-size: 0 !important; }
  #teacherDialog #refreshTeacherButton::before { content: "⟳"; font-size: 15px; }
  #teacherDialog #closeTeacherButton::before { content: "⌂"; font-size: 16px; }
  .teacher-takeover-bar { top: 50px; max-width: calc(100vw - 12px); overflow-x: auto; }
  .teacher-takeover-bar button { min-width: 38px; }
  .teacher-takeover-bar button small, .teacher-takeover-live { display: none; }
}
.teacher-roster-actions .teacher-roster-kick { color: var(--ui-down) !important; border-color: rgba(246, 70, 93, .35) !important; }

/* 训练结束：询问是否下载训练图片（右上角） */
.training-image-offer { position: fixed; z-index: 2100; top: 64px; right: 16px; display: grid; gap: 10px; width: min(300px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid rgba(255, 212, 59, .45); border-radius: 14px; color: var(--ui-text); background: rgba(15, 16, 20, .97); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: ceremony-in 320ms ease both; }
.training-image-offer[hidden] { display: none; }
.training-image-offer strong { display: block; font-size: 14px; }
.training-image-offer span { color: var(--ui-text-3); font-size: 12px; }
.training-image-offer-actions { display: flex; justify-content: flex-end; gap: 8px; }
.training-image-offer-actions button { min-height: 32px; padding: 0 14px; border: 1px solid var(--ui-stroke-2); border-radius: 8px; color: var(--ui-text); background: transparent; cursor: pointer; }
.training-image-offer-actions .is-primary { border-color: transparent; color: #111; background: #ffd43b; font-weight: 700; }
@media (max-width: 760px) {
  body:not(.home-active) .trainer-grid > .chart-column { height: calc(100dvh - 44px) !important; min-height: 0 !important; }
  body:not(.home-active) #chartStage { height: calc(100dvh - 44px - 56px) !important; min-height: 0 !important; padding-bottom: 0 !important; }
  body:not(.home-active) .topbar .toolbar { max-width: calc(100vw - 160px) !important; }
  body:not(.home-active) .top-actions { position: fixed !important; z-index: 45 !important; top: 7px !important; right: 6px !important; left: auto !important; width: auto !important; }
  .connection-banner { top: 50px; }
  .connection-banner span { padding: 5px 12px; font-size: 11.5px; }
  /* 老师：面板收起时隐藏；展开时为右侧抽屉，盖在全景图上 */
  #teacherDialog .teacher-room-workspace.teacher-operations-collapsed #teacherOperationsPanel { display: none !important; }
  #teacherDialog .teacher-room-workspace:not(.teacher-operations-collapsed) #teacherOperationsPanel { position: fixed !important; z-index: 50 !important; top: 52px !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(92vw, 380px) !important; max-height: none !important; overflow-y: auto !important; box-shadow: -16px 0 40px rgba(0, 0, 0, .55) !important; }
  #teacherDialog #teacherLiveList { height: calc(100dvh - 52px) !important; max-height: none !important; }
  #teacherDialog .teacher-operations-toggle { position: fixed !important; z-index: 2200 !important; top: 50% !important; right: 0 !important; }
}
@media (max-width: 760px) {
  body:not(.home-active) .topbar .toolbar { position: absolute !important; top: 6px !important; left: 6px !important; width: calc(100vw - 178px) !important; max-width: none !important; height: 32px !important; }
  body:not(.home-active) .topbar .timeframe-group { width: 100% !important; }
  #teacherDialog .teacher-topline .teacher-student-slot-panel,
  #teacherDialog .teacher-topline .teacher-panorama-head-right,
  #teacherDialog .teacher-topline .teacher-filter-group { display: none !important; }
  #teacherDialog #teacherOperationsToggle { display: grid !important; place-items: center !important; width: 42px !important; height: 72px !important; border: 1px solid var(--ui-stroke-2) !important; border-right: 0 !important; border-radius: 10px 0 0 10px !important; color: var(--ui-text) !important; background: rgba(15, 16, 20, .92) !important; transform: translateY(-50%) !important; }
  #teacherDialog .teacher-room-workspace:not(.teacher-operations-collapsed) #teacherOperationsToggle { right: min(92vw, 380px) !important; }
}
@media (max-width: 760px) {
  body.teacher-dashboard-active #teacherDialog #teacherOperationsToggle { position: fixed !important; z-index: 2200 !important; top: 50% !important; right: 0 !important; left: auto !important; display: grid !important; place-items: center !important; width: 42px !important; height: 72px !important; opacity: 1 !important; visibility: visible !important; border: 1px solid var(--ui-stroke-2) !important; border-right: 0 !important; border-radius: 10px 0 0 10px !important; color: var(--ui-text) !important; background: rgba(15, 16, 20, .92) !important; transform: translateY(-50%) !important; }
  body.teacher-dashboard-active #teacherDialog .teacher-room-workspace:not(.teacher-operations-collapsed) #teacherOperationsToggle { right: min(92vw, 380px) !important; }
}

/* ===== 训练记录：主图表回放 ===== */
.record-replay-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(920px, calc(100vw - 32px));
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ui-stroke-2);
  border-radius: var(--ui-radius);
  background: rgba(14, 15, 18, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--ui-shadow-l);
  color: var(--ui-text);
  font-family: var(--ui-font);
}
.record-replay-bar[hidden] { display: none; }
.record-replay-bar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.record-replay-bar-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 160px; }
.record-replay-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-warn); box-shadow: 0 0 0 3px rgba(240, 185, 11, .18); flex: none; }
.record-replay-badge { font-size: 11px; color: var(--ui-text-3); white-space: nowrap; }
.record-replay-bar-head button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ui-stroke-2);
  border-radius: var(--ui-radius-s);
  background: var(--ui-bg-3);
  color: var(--ui-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.record-replay-bar-head button:hover { background: var(--ui-bg-4); }
.record-replay-bar-head .record-replay-exit { border-color: rgba(246, 70, 93, .45); color: #ff8a98; }
.record-replay-controls-mount .training-replay-controls {
  position: static;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}
.record-replay-controls-mount .training-replay-controls input[type="range"] { flex: 1 1 200px; min-width: 120px; }
.record-replay-controls-mount #trainingReplayStatus { font-family: var(--ui-mono); font-size: 12px; color: var(--ui-text-2); }
.record-replay-notes { overflow: auto; max-height: 34vh; border-top: 1px solid var(--ui-stroke); padding-top: 8px; }
.record-replay-notes[hidden] { display: none; }
body.record-replay-mode #chartStage { outline: 1px solid rgba(240, 185, 11, .35); outline-offset: -1px; }
@media (max-width: 640px) {
  .record-replay-bar { bottom: 8px; padding: 8px 10px; }
  .record-replay-badge { display: none; }
}