/* HYPERROLL high-spec operations UI upgrade.
   A restrained dashboard layer: less decoration, clearer hierarchy, denser
   scanning, and stable mobile behavior. Loaded after legacy themes. */

:root {
  --hs-bg: #08090c;
  --hs-surface: #101217;
  --hs-surface-2: #151821;
  --hs-surface-3: #1b1f2a;
  --hs-line: rgba(158, 174, 205, 0.16);
  --hs-line-strong: rgba(158, 174, 205, 0.28);
  --hs-text: #f3f6fb;
  --hs-muted: #96a0b5;
  --hs-faint: #697387;
  --hs-blue: #74a7ff;
  --hs-cyan: #38d6d2;
  --hs-green: #18c98b;
  --hs-red: #ff5a72;
  --hs-amber: #f3b75c;
  --hs-purple: #a78bfa;
}

html, body {
  background: var(--hs-bg) !important;
}

body {
  color: var(--hs-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  padding: 14px 18px 64px !important;
  background:
    linear-gradient(180deg, rgba(116, 167, 255, 0.055), transparent 280px),
    var(--hs-bg) !important;
}

body::before,
body::after,
.horizon,
.horizon-grid,
.scanline,
.corner-deco {
  display: none !important;
}

.wrap {
  max-width: 1560px !important;
}

.hud-top {
  position: sticky !important;
  top: 10px !important;
  z-index: 50 !important;
  background: rgba(16, 18, 23, 0.92) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) !important;
  clip-path: none !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
}

.hud-top h1 {
  color: var(--hs-text) !important;
  -webkit-text-fill-color: var(--hs-text) !important;
  background: none !important;
  filter: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.hud-top h1::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
  background: var(--hs-green);
  box-shadow: 0 0 0 4px rgba(24, 201, 139, 0.12);
}

.hud-top h1 .dim {
  margin-left: 10px !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--hs-line) !important;
  color: var(--hs-muted) !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  letter-spacing: 0.04em !important;
}

.hud-top .right {
  gap: 6px !important;
  align-items: center !important;
}

.stat-pill,
.lang-toggle,
.bot-switch button,
.theme-switch button,
.csv-btn,
.seg-tabs button,
.top-nav button {
  border-radius: 6px !important;
  border: 1px solid var(--hs-line) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--hs-muted) !important;
  box-shadow: none !important;
  clip-path: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.stat-pill {
  min-height: 30px !important;
  padding: 5px 9px !important;
}

.stat-pill .lbl {
  color: var(--hs-faint) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

.stat-pill .val {
  color: var(--hs-text) !important;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 640 !important;
}

.lang-toggle,
.bot-switch button,
.theme-switch button,
.csv-btn,
.seg-tabs button {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

#forecast-link {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(116, 167, 255, 0.48) !important;
  border-radius: 6px !important;
  background: rgba(116, 167, 255, 0.14) !important;
  color: var(--hs-text) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.lang-toggle:hover,
.bot-switch button:hover,
.theme-switch button:hover,
.csv-btn:hover,
.seg-tabs button:hover,
.top-nav button:hover {
  color: var(--hs-text) !important;
  border-color: var(--hs-line-strong) !important;
  background: rgba(116, 167, 255, 0.08) !important;
}

.lang-toggle.active,
.lang-toggle.on,
.bot-switch button.on,
.theme-switch button.on,
.seg-tabs button.on,
.top-nav button.on {
  color: var(--hs-text) !important;
  border-color: rgba(116, 167, 255, 0.5) !important;
  background: rgba(116, 167, 255, 0.16) !important;
}

.top-nav {
  position: sticky !important;
  top: 76px !important;
  z-index: 45 !important;
  display: flex !important;
  gap: 6px !important;
  padding: 8px !important;
  margin: 10px 0 12px !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 8px !important;
  background: rgba(12, 14, 18, 0.88) !important;
  backdrop-filter: blur(16px) !important;
}

.top-nav button {
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

.grid {
  gap: 12px !important;
}

.panel {
  background: linear-gradient(180deg, rgba(21, 24, 33, 0.94), rgba(16, 18, 23, 0.96)) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
  clip-path: none !important;
  padding: 14px !important;
  overflow: hidden !important;
}

.panel:hover {
  border-color: rgba(116, 167, 255, 0.24) !important;
}

.panel h2 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 28px !important;
  margin: -2px 0 12px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--hs-line) !important;
  color: var(--hs-muted) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.badge,
.panel h2 .badge,
#slots-badge {
  border: 1px solid var(--hs-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--hs-muted) !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  font-weight: 740 !important;
}

#heroZone,
#ribbon,
#alerts,
#etaBanner,
#botNamePlate {
  margin-bottom: 12px !important;
}

.ribbon,
.eta-banner,
.alert,
.bot-name-plate {
  border-radius: 8px !important;
  border: 1px solid var(--hs-line) !important;
  background: var(--hs-surface) !important;
  box-shadow: none !important;
  clip-path: none !important;
}

canvas {
  border-radius: 6px !important;
}

table,
.scan-table,
.trade-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12px !important;
}

th,
td {
  border-bottom: 1px solid rgba(158, 174, 205, 0.08) !important;
  padding: 8px 9px !important;
}

th {
  color: var(--hs-faint) !important;
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

td,
.kv .v,
.pos-row,
.trade-card,
.heat-cell,
.scan-table {
  color: var(--hs-text) !important;
}

.pos,
.long,
.win,
.positive,
.up,
[class*="profit"] {
  color: var(--hs-green) !important;
}

.neg,
.short,
.loss,
.negative,
.down,
[class*="loss"] {
  color: var(--hs-red) !important;
}

.empty {
  color: var(--hs-faint) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(158, 174, 205, 0.12) !important;
  border-radius: 6px !important;
  padding: 18px !important;
  letter-spacing: 0 !important;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  body {
    padding: 8px 8px 84px !important;
    font-size: 14px !important;
  }
  .hud-top,
  .top-nav {
    position: static !important;
  }
  .hud-top {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hud-top .right,
  .top-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .hud-top .right::-webkit-scrollbar,
  .top-nav::-webkit-scrollbar {
    display: none !important;
  }
  .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-12 {
    grid-column: 1 / -1 !important;
  }
  .panel {
    padding: 12px !important;
  }
}

/* ═══ v20 visual refresh — 2026-07-08 by 5080_claude ═══
   看得見的更新：更新公告帶、精緻化面板、統一琥珀強調色 */
.v20-ribbon {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 16px;
  background: linear-gradient(90deg, rgba(243,183,92,.10), rgba(243,183,92,.03) 60%, transparent);
  border: 1px solid rgba(243,183,92,.35); border-left: 3px solid #f3b75c;
  border-radius: 6px; color: #f3b75c; font-size: 12.5px; letter-spacing: .8px;
}
.v20-ribbon .v20-badge {
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 11px;
  background: rgba(243,183,92,.15); padding: 2px 8px; border-radius: 3px;
  letter-spacing: 2px;
}
.v20-ribbon .v20-dim { color: #96a0b5; }
.panel { border-radius: 10px !important; }
.panel h2 { letter-spacing: 2.5px; }
#botStrategyCard { line-height: 1.65; }
#botStrategyCard table td, #botStrategyCard .param-row { padding: 4px 8px; }
.hud-top { border-radius: 10px; }
.lang-toggle:hover, .top-nav button:hover { filter: brightness(1.25); transition: filter .15s; }
@media (max-width: 700px) { .v20-ribbon { font-size: 11.5px; padding: 8px 10px; } }

/* v21 information hierarchy: keep the operation surface quiet and scannable. */
.theme-switch,
#perf-toggle,
#cmdk-trigger {
  display: none !important;
}

.hud-top .right {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.bot-switch {
  display: inline-flex !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.v20-ribbon {
  min-height: 38px !important;
  padding: 8px 12px !important;
  background: rgba(16, 18, 23, 0.78) !important;
  border: 1px solid var(--hs-line) !important;
  border-left: 3px solid var(--hs-amber) !important;
  color: var(--hs-text) !important;
  letter-spacing: 0 !important;
}

.v20-ribbon .v20-dim {
  color: var(--hs-muted) !important;
}

.site-load-state {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(243, 183, 92, 0.38);
  border-radius: 8px;
  background: rgba(243, 183, 92, 0.08);
  color: var(--hs-amber);
  font-size: 12px;
  font-weight: 650;
}

body.load-slow .skel {
  animation: none !important;
  opacity: 0.45 !important;
}

.bot-strategy-section .panel,
#ai-pred-panel,
#bar-panel {
  border-color: rgba(116, 167, 255, 0.22) !important;
}

@media (max-width: 900px) {
  .hud-top .right {
    overflow: visible !important;
    row-gap: 6px !important;
  }

  .bot-switch {
    order: 10;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bot-switch::-webkit-scrollbar {
    display: none;
  }

  .bot-switch button {
    flex: 0 0 auto;
  }

  #forecast-link {
    margin-left: auto !important;
  }

  .v20-ribbon {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 520px) {
  .top-nav,
  #chat-fab {
    display: none !important;
  }

  .hud-top h1 {
    text-align: left !important;
  }

  .hud-top h1 .dim {
    display: inline !important;
  }

  .stat-pill {
    flex: 0 1 auto !important;
  }

  #forecast-link {
    flex: 0 0 auto !important;
  }
}

/* ═══ v22 design polish — 2026-07-16 by 5080_claude ═══
   Hero 統計帶重排：數字永不截斷（clamp 字級 + auto-fit 網格）、
   行動按鈕獨立欄（窄幅自動轉滿版列）、kv 標籤層級、手機 2×2。 */

.hero-zone {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
  gap: 1px !important;
  background: var(--hs-line) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.hero-stat {
  background: var(--hs-surface) !important;
  padding: 13px 16px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.hero-lbl {
  color: var(--hs-faint) !important;
  font-size: 10.5px !important;
  font-weight: 740 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hero-val {
  font-size: clamp(19px, 1.9vw, 27px) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  letter-spacing: -0.3px !important;
  line-height: 1.25 !important;
  margin-top: 3px !important;
}

.hero-sub {
  color: var(--hs-muted) !important;
  font-size: 11px !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}

.hero-health {
  border-radius: 999px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.hero-actions {
  background: var(--hs-surface) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: stretch !important;
  padding: 12px 14px !important;
  margin: 0 !important;
}

.hero-btn {
  min-height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid var(--hs-line-strong) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--hs-text) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.hero-btn.danger {
  border-color: rgba(255, 90, 114, 0.45) !important;
  background: rgba(255, 90, 114, 0.10) !important;
  color: var(--hs-red) !important;
}

.kv-grid .kv .k {
  color: var(--hs-faint) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.kv-grid .kv .v {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace !important;
  font-size: 15px !important;
}

@media (max-width: 1150px) {
  .hero-actions {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    padding: 9px 12px !important;
  }
  .hero-btn {
    flex: 0 0 auto !important;
    min-width: 110px !important;
  }
}

@media (max-width: 640px) {
  .hero-zone {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hero-actions {
    flex-direction: row !important;
  }
  .hero-btn {
    flex: 1 !important;
  }
}

@media (max-width: 900px) {
  .reactor svg {
    max-width: 170px;
    display: block;
    margin: 0 auto;
  }
}