:root {
  color-scheme: dark;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    sans-serif;
  background: #0d1117;
  color: #e6edf3;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {
  max-width: 1120px;
  margin: auto;
  padding: 24px;
}
header,
.controls,
.toolbar,
.optional,
.status,
.hero,
.meta,
.levels {
  display: flex;
  align-items: center;
  gap: 14px;
}
header {
  justify-content: space-between;
}
h1 {
  margin: 0;
  font-size: 25px;
}
h2 {
  font-size: 16px;
  margin: 0 0 9px;
}
p {
  margin: 5px 0;
  color: #9aa7b6;
  font-size: 13px;
}
.controls {
  flex-wrap: wrap;
}
select,
button {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 7px;
  color: inherit;
  padding: 8px 10px;
}
button {
  cursor: pointer;
}
button:hover,
button.active {
  border-color: #58a6ff;
  color: #58a6ff;
}
.status {
  justify-content: space-between;
  background: #161b22;
  border-radius: 8px;
  padding: 8px 11px;
  margin: 16px 0;
  color: #9aa7b6;
  font-size: 12px;
}
.hero {
  justify-content: space-between;
  margin-bottom: 16px;
}
.hero strong {
  font-size: 36px;
  display: block;
}
.meta {
  flex-wrap: wrap;
  font-size: 13px;
  color: #9aa7b6;
}
.meta b {
  color: #e6edf3;
}
.card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
}
.toolbar {
  justify-content: space-between;
  flex-wrap: wrap;
}
.toolbar div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chart-box {
  height: 390px;
  position: relative;
  margin-top: 12px;
}
#chartError {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  background: #241b12;
  color: #ffd8a8;
  padding: 30px;
}
.chart-caption,
.muted {
  color: #9aa7b6;
  font-size: 12px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.signal {
  font-size: 29px;
  font-weight: 800;
}
/* 涨跌配色唯一真源在下方的 .bull / .bear 规则（欧美习惯：涨=绿 --bull、跌=红 --bear）。
   此处原有一组反向定义（.bull 红 #ff6175 / .bear 绿 #42c995），属早期残留，
   虽被下方 `color: var(--bull/--bear)` 覆盖而从未生效，但一旦层叠顺序变动就会
   让全站涨跌色整体翻转，已移除。 */
.levels {
  justify-content: space-between;
  padding-top: 12px;
  font-size: 13px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.metric {
  border-left: 3px solid #30363d;
  padding: 6px 8px;
  font-size: 13px;
}
.metric span {
  display: block;
  color: #9aa7b6;
  font-size: 11px;
}
.optional {
  justify-content: space-between;
  flex-wrap: wrap;
}
.optional h2 {
  margin: 0;
}
pre {
  white-space: pre-wrap;
  word-break: break-word;
  color: #9aa7b6;
  margin: 0;
  font-size: 12px;
}
@media (max-width: 680px) {
  main {
    padding: 14px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .hero {
    display: block;
  }
  .meta {
    margin-top: 10px;
  }
  .chart-box {
    height: 300px;
  }
  header {
    align-items: flex-start;
  }
  .hero strong {
    font-size: 30px;
  }
}
#chartError[hidden] {
  display: none;
}

/* 视觉基础：克制的液态玻璃深色交易终端 / Visual foundation: a restrained liquid-glass dark market terminal. */
:root {
  background: #070b12;
  color: #f4f7fb;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(
      850px 500px at 8% -12%,
      rgba(66, 134, 255, 0.18),
      transparent 60%
    ),
    radial-gradient(
      750px 500px at 93% 4%,
      rgba(105, 73, 255, 0.12),
      transparent 58%
    ),
    linear-gradient(145deg, #070b12 0%, #0a101a 50%, #070c14 100%);
}
body:before,
body:after {
  content: "";
  position: fixed;
  pointer-events: none;
  filter: blur(18px);
  border-radius: 999px;
  z-index: -1;
}
body:before {
  width: 300px;
  height: 300px;
  left: -130px;
  bottom: 8%;
  background: rgba(22, 180, 191, 0.08);
}
body:after {
  width: 280px;
  height: 280px;
  right: -110px;
  top: 32%;
  background: rgba(90, 104, 255, 0.09);
}
main {
  max-width: 1240px;
  padding: 38px 30px 46px;
}
header {
  padding: 6px 4px 22px;
  border-bottom: 1px solid rgba(194, 211, 236, 0.12);
}
header h1 {
  font-size: 25px;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 18px rgba(197, 220, 255, 0.15);
}
header p {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #7f91a9;
}
.controls {
  padding: 5px;
  border-radius: 14px;
  border: 1px solid rgba(185, 207, 241, 0.13);
  background: rgba(25, 35, 52, 0.43);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 38px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(18px) saturate(135%);
}
select,
button {
  border-color: rgba(175, 201, 239, 0.14);
  background: rgba(31, 43, 62, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
select {
  padding: 8px 11px;
}
button:hover {
  transform: translateY(-1px);
  background: rgba(50, 70, 99, 0.68);
  border-color: rgba(116, 172, 255, 0.72);
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
button.active {
  color: #a9d1ff;
  border-color: #55a8ff;
  background: linear-gradient(
    145deg,
    rgba(54, 132, 230, 0.35),
    rgba(31, 61, 113, 0.35)
  );
  box-shadow:
    0 0 0 1px rgba(102, 177, 255, 0.13),
    inset 0 1px 0 rgba(210, 235, 255, 0.18);
}
.status {
  margin: 20px 0 16px;
  padding: 10px 13px;
  background: rgba(20, 30, 44, 0.5);
  border: 1px solid rgba(185, 207, 241, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
  border-radius: 14px;
}
.status #connection:before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 999px;
  background: #33d19d;
  box-shadow: 0 0 12px rgba(51, 209, 157, 0.8);
}
.hero {
  padding: 19px 7px 20px;
  margin-bottom: 6px;
}
.hero .muted {
  letter-spacing: 0.12em;
  font-size: 11px;
  text-transform: uppercase;
}
.hero strong {
  font-size: 50px;
  line-height: 1;
  letter-spacing: -2.4px;
  background: linear-gradient(135deg, #fff 20%, #d1e5ff 90%);
  background-clip: text;
  color: transparent;
}
.hero #change {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 16px;
}
.meta {
  gap: 9px;
}
.meta span {
  border-left: 1px solid rgba(177, 201, 237, 0.16);
  padding-left: 10px;
}
.meta span:first-child {
  border: 0;
}
.meta b {
  font-weight: 650;
}
.card {
  position: relative;
  overflow: hidden;
  border-color: rgba(180, 205, 238, 0.16);
  background: linear-gradient(
    132deg,
    rgba(28, 39, 57, 0.72),
    rgba(16, 24, 36, 0.57)
  );
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(24px) saturate(125%);
}
.card:before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.05),
    transparent 26%,
    transparent 75%,
    rgba(133, 172, 255, 0.035)
  );
  opacity: 0.8;
}
.card > * {
  position: relative;
}
.chart-box {
  height: 440px;
  margin: 15px -16px 0;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(5, 10, 17, 0.48),
    rgba(17, 29, 41, 0.12)
  );
  border: 1px solid rgba(172, 201, 232, 0.06);
}
.chart-box:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.027),
    transparent 18%,
    transparent 78%,
    rgba(87, 147, 255, 0.04)
  );
  mix-blend-mode: screen;
}
.chart-caption {
  padding: 12px 4px 1px;
  letter-spacing: 0.02em;
}
.grid {
  gap: 16px;
}
.grid .card {
  min-height: 190px;
}
.card h2 {
  color: #dce8f8;
  letter-spacing: 0.01em;
}
.signal {
  font-size: 38px;
  letter-spacing: -1.4px;
  text-shadow: 0 0 22px currentColor;
}
.levels {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid rgba(177, 204, 239, 0.09);
  border-radius: 12px;
  background: rgba(4, 10, 17, 0.2);
}
.levels span {
  display: grid;
  gap: 4px;
  color: #91a1b7;
}
.levels b {
  color: #dce8f8;
}
.metrics {
  gap: 10px;
}
.metric {
  padding: 9px 10px;
  border-left: 1px solid rgba(112, 186, 255, 0.4);
  border-radius: 7px;
  background: rgba(5, 12, 20, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.metric:hover {
  background: rgba(54, 87, 123, 0.19);
}
.metric b {
  font-size: 15px;
}
.metric span {
  letter-spacing: 0.04em;
}
.optional {
  padding-block: 17px;
}
.optional button {
  background: linear-gradient(
    145deg,
    rgba(44, 125, 223, 0.46),
    rgba(34, 73, 141, 0.47)
  );
  border-color: rgba(117, 183, 255, 0.46);
}
pre {
  padding: 12px;
  border-radius: 10px;
  background: rgba(4, 10, 16, 0.31);
  border: 1px solid rgba(172, 201, 232, 0.07);
  line-height: 1.7;
}
/* 同上：这里原有第二组反向涨跌定义（.bull 红 #ff708a / .bear 绿 #37d8a0），
   同样被下方 .bull/.bear 的 var(--bull/--bear) 规则覆盖，已移除以免日后层叠变动
   导致配色翻转。 */
@media (max-width: 680px) {
  main {
    padding: 22px 14px 34px;
  }
  header {
    padding-bottom: 16px;
  }
  .hero {
    padding: 20px 3px;
  }
  .hero strong {
    font-size: 41px;
  }
  .meta span {
    border-left: 0;
    padding-left: 0;
  }
  .chart-box {
    height: 315px;
  }
  .controls {
    margin-top: 4px;
  }
}
.chart-box {
  background: #121923;
  border-color: #253042;
}
.chart-box:after {
  background: linear-gradient(180deg, rgba(62, 88, 125, 0.07), transparent 36%);
}
#chartTooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  display: none;
  gap: 5px;
  min-width: 170px;
  padding: 9px 10px;
  border: 1px solid rgba(170, 202, 242, 0.28);
  border-radius: 9px;
  background: rgba(11, 18, 29, 0.72);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  font-size: 11px;
  color: #b8c6d8;
  pointer-events: none;
}
#chartTooltip b {
  color: #edf5ff;
  font-size: 12px;
}
#chartTooltip span {
  white-space: nowrap;
}
.signal-gauge {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 0 2px;
}
.gauge-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #8492a6;
}
.gauge-top b:first-child {
  color: #39cf9b;
}
.gauge-top b:last-child {
  color: #ff617b;
}
.gauge-top span {
  color: #d9e6f7;
  font-weight: 650;
}
.gauge-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #2dce98 0%,
    #1a624f 31%,
    #293140 50%,
    #772b42 71%,
    #ff526c 100%
  );
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(54, 137, 154, 0.1);
}
.gauge-track i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.13),
    0 0 12px #fff;
  transform: translateX(-50%);
}
.gauge-strength {
  height: 7px;
  position: relative;
  border-radius: 99px;
  background: #111b2c;
  overflow: hidden;
}
.gauge-strength em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2dce98, #4ea6ff);
  box-shadow: 0 0 10px rgba(48, 203, 154, 0.55);
}
.gauge-strength span {
  position: absolute;
  right: 0;
  top: 10px;
  color: #8695aa;
  font-size: 11px;
  font-style: normal;
}
.signal-gauge + small {
  display: block;
  margin-top: 20px;
  color: #8190a4;
  font-size: 11px;
}
/* BTC 仪表盘设计令牌与桌面端构图基准 / Authoritative BTC dashboard design tokens and desktop composition. */
body:before,
body:after {
  display: none;
}
main {
  max-width: 1360px;
  padding: 28px 30px 32px;
}
header {
  padding: 0 0 17px;
  border-color: var(--border-subtle);
}
header h1 {
  font-size: 20px;
  letter-spacing: 0;
  text-shadow: none;
}
header p {
  color: var(--text-muted);
  font-size: 11px;
}
.live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: -1px;
  background: var(--live);
  box-shadow: 0 0 6px var(--live);
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
  50% {
    opacity: 0.3;
    box-shadow: none;
  }
}
.controls {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.controls label {
  font-size: 0;
}
.controls label:after {
  content: "数据源";
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 5px;
}
.controls select,
.controls button {
  font-size: 12px;
  border-color: var(--border-subtle);
  background: var(--bg-elevated);
  box-shadow: none;
  border-radius: 8px;
}
.controls select:hover,
.controls button:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}
.status {
  display: none;
}
.hero {
  padding: 17px 5px 18px;
  margin: 0;
}
.hero strong {
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 44px;
  letter-spacing: -1.8px;
  color: var(--text-primary);
  background: none;
}
.hero .muted,
.meta {
  color: var(--text-secondary);
}
.meta b,
.metric b,
.levels b {
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.meta span {
  border-color: var(--border-subtle);
}
.terminal-layout {
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(300px, 32fr);
  gap: 18px;
  align-items: start;
}
/* v2.10.56：左列容器——K 线卡、OKX 微观结构卡、周期涨幅卡三张平级卡片纵向排列。 */
.chart-column {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
.chart-column > .card {
  margin: 0;
}
.chart-column > .okx-microstructure-card {
  margin-top: 0;
}
.card {
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-surface);
  box-shadow: none;
  backdrop-filter: none;
}
.card:before {
  display: none;
}
.terminal-layout > .card,
.chart-column > .card {
  margin: 0;
}
.toolbar {
  margin-bottom: 12px;
}
.toolbar #ranges {
  display: none;
}
.toolbar button {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.toolbar button:hover {
  background: var(--bg-elevated);
  transform: none;
}
.toolbar button.active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  box-shadow: none;
}
.chart-box {
  height: 530px;
  margin: 0 -16px;
  background: var(--bg-surface-2);
  border: 0;
  border-radius: 10px;
}
.chart-box:after {
  display: none;
}
.chart-caption {
  padding: 9px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}
.side-stack {
  display: grid;
  gap: 16px;
}
.side-stack .card {
  margin: 0;
}
.side-stack .card:first-child {
  min-height: 255px;
}
.side-stack .card:nth-child(2) {
  min-height: 300px;
}
.grid {
  display: contents;
}
.signal {
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 33px;
  text-shadow: none;
}
.signal-gauge {
  margin-top: 15px;
}
.gauge-top b:first-child {
  color: var(--bear);
}
.gauge-top b:last-child {
  color: var(--bull);
}
.gauge-track {
  height: 10px;
  background: linear-gradient(
    90deg,
    var(--bear) 0%,
    #2a313b 50%,
    var(--bull) 100%
  );
  box-shadow: none;
}
.gauge-track i {
  top: -4px;
  bottom: -4px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.75);
}
.gauge-strength {
  display: none;
}
.signal-gauge + small {
  margin-top: 12px;
  color: var(--text-muted);
}
.levels {
  margin-top: 12px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
}
.metrics {
  display: block;
}
.metric {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  box-shadow: none;
}
.metric:last-child {
  border-bottom: 0;
}
.metric:hover {
  background: var(--bg-surface-2);
}
.metric span {
  font-size: 13px;
  color: var(--text-secondary);
}
.metric b {
  font-size: 14px;
}
.badge {
  font-style: normal;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 999px;
}
.badge.bull {
  background: rgba(0, 212, 170, 0.12);
  color: var(--bull);
}
.badge.bear {
  background: rgba(255, 77, 106, 0.12);
  color: var(--bear);
}
.badge.flat {
  background: rgba(154, 164, 178, 0.12);
  color: var(--text-secondary);
}
.change-card {
  padding: 16px 0 0;
  border-top: 1px solid var(--border-subtle);
}
.change-card h2 {
  font-size: 14px;
  margin: 0 0 10px;
}
.change-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.change-card span {
  display: grid;
  gap: 2px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--bg-surface-2);
}
.change-card small {
  font-size: 10px;
  color: var(--text-muted);
}
.change-card b {
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 12px;
}
/* ===== 涨跌配色唯一真源（全站约定：欧美习惯 —— 涨=绿、跌=红） =====
   .bull（看多/上涨）→ var(--bull) 绿；.bear（看空/下跌）→ var(--bear) 红。
   --bull / --bear 在 html[data-theme="dark"|"light"|"auto"] 中各自定义，
   亮暗主题均保持同一方向。K 线图在 app.js 中单独绘制（涨 #28c76f / 跌 #ef4d78），
   方向与这里一致。新增涨跌元素请复用 .bull / .bear，不要另写颜色。 */
.bull {
  color: var(--bull);
}
.bear {
  color: var(--bear);
}
.flat {
  color: var(--text-secondary);
}
#chartTooltip {
  background: rgba(35, 42, 51, 0.94);
  border-color: var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}
.optional {
  margin-top: 18px;
  background: var(--bg-surface);
}
pre {
  background: var(--bg-surface-2);
  border-color: var(--border-subtle);
}
footer {
  margin-top: 18px;
  padding: 15px 0 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}
footer b {
  color: var(--warn);
}
#chartTooltip {
  background: rgba(28, 36, 48, 0.78) !important;
  border-color: rgba(156, 185, 222, 0.55) !important;
  backdrop-filter: blur(5px) !important;
  max-width: 290px;
}
@media (max-width: 1024px) {
  .terminal-layout {
    grid-template-columns: 1fr;
  }
  .chart-box {
    height: 420px;
  }
  .side-stack {
    grid-template-columns: 1fr 1fr;
  }
  .change-card {
    grid-column: 1/-1;
  }
}
@media (max-width: 680px) {
  main {
    padding: 18px 14px 26px;
  }
  .hero strong {
    font-size: 32px;
  }
  .chart-box {
    height: 310px;
  }
  .side-stack {
    grid-template-columns: 1fr;
  }
  .change-card {
    grid-column: auto;
  }
  .meta {
    gap: 9px;
  }
  .terminal-layout {
    gap: 14px;
  }
}
.toolbar {
  align-items: center;
  gap: 12px;
}
.toolbar #ranges {
  display: flex;
}
.toolbar .control-label {
  align-self: center;
  margin-right: 2px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.toolbar #intervals,
.toolbar #ranges {
  align-items: center;
  padding: 5px 7px;
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.toolbar #ranges button.active {
  color: var(--bull);
  border-color: rgba(0, 212, 170, 0.42);
}
@keyframes price-flash-up {
  0% {
    color: #00d4aa;
    text-shadow: 0 0 18px rgba(0, 212, 170, 0.7);
  }
  100% {
    color: var(--text-primary);
    text-shadow: none;
  }
}
@keyframes price-flash-down {
  0% {
    color: #ff4d6a;
    text-shadow: 0 0 18px rgba(255, 77, 106, 0.65);
  }
  100% {
    color: var(--text-primary);
    text-shadow: none;
  }
}
.hero strong.price-up {
  animation: price-flash-up 900ms ease-out;
}
.hero strong.price-down {
  animation: price-flash-down 900ms ease-out;
}
.zoom-tools {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 7px;
  background: var(--bg-surface-2);
}
.zoom-tools button {
  padding: 4px 7px !important;
  font-size: 12px !important;
}
.zoom-tools span {
  min-width: 35px;
  text-align: center;
  font:
    10px "SF Mono",
    monospace;
  color: var(--text-secondary);
}
.forecast-card {
  margin-top: 18px;
}
.forecast-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}
.forecast-head h2 {
  margin: 0;
}
.forecast-head button {
  font-size: 11px;
}
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.forecast-item {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.forecast-item span {
  font-size: 11px;
  color: var(--text-secondary);
}
.forecast-item b {
  font:
    600 13px "SF Mono",
    monospace;
}
.forecast-item small {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
}
@media (max-width: 1024px) {
  .forecast-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .forecast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zoom-tools {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-end;
  }
  .toolbar {
    gap: 6px;
  }
}
.hero #change {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  margin-left: 12px;
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.hero #change .change-pct {
  font-size: 18px;
}
.hero #change.price-up {
  animation: price-flash-up 900ms ease-out;
}
.hero #change.price-down {
  animation: price-flash-down 900ms ease-out;
}
@media (max-width: 680px) {
  .hero #change {
    margin-left: 0;
    margin-top: 10px;
    font-size: 18px;
  }
  .hero #change .change-pct {
    font-size: 16px;
  }
}
.correlation-card {
  margin-top: 18px;
}
.correlation-output {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.corr-stat {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.corr-stat span {
  font-size: 12px;
  color: var(--text-secondary);
}
.corr-stat b {
  font:
    600 21px "SF Mono",
    monospace;
}
.corr-stat small {
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-muted);
}
@media (max-width: 680px) {
  .correlation-output {
    grid-template-columns: 1fr;
  }
}
.controls label:after {
  content: attr(data-label) !important;
}
.controls #langToggle,
.controls #themeToggle {
  white-space: nowrap;
}
.controls #themeToggle {
  min-width: 63px;
}
#marketClocks {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 11px;
}
#marketClocks b {
  font-family: "SF Mono", "JetBrains Mono", monospace;
  color: var(--text-secondary);
  font-weight: 500;
}
#marketClocks i {
  height: 13px;
  border-left: 1px solid var(--border-subtle);
}
#marketClocks em {
  font-style: normal;
  font-size: 10px;
}
.open {
  color: var(--bull);
}
.closed {
  color: var(--text-muted);
}
.us-equity-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-inline: 1px solid var(--border-subtle);
  font:
    11px "SF Mono",
    "JetBrains Mono",
    monospace;
  white-space: nowrap;
}
.us-equity-quote {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
}
.us-equity-quote strong {
  color: var(--text-primary);
  font-weight: 700;
}
.us-equity-quote em {
  font-style: normal;
  font-weight: 700;
}
html[data-theme="light"] {
  --bg-base: #f5f7fa;
  --bg-surface: #fff;
  --bg-surface-2: #eef2f6;
  --bg-elevated: #e5eaf0;
  --border-subtle: #d6dde5;
  --border-strong: #a8b6c4;
  --text-primary: #1a1d23;
  --text-secondary: #56616e;
  --text-muted: #7c8793;
  color-scheme: light;
  background: var(--bg-base);
  color: var(--text-primary);
}
html[data-theme="light"] body {
  background: var(--bg-base);
  color: var(--text-primary);
}
html[data-theme="light"] .chart-box {
  background: #edf2f6;
}
html[data-theme="light"] #chartTooltip {
  background: rgba(255, 255, 255, 0.78);
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --bg-base: #f5f7fa;
    --bg-surface: #fff;
    --bg-surface-2: #eef2f6;
    --bg-elevated: #e5eaf0;
    --border-subtle: #d6dde5;
    --border-strong: #a8b6c4;
    --text-primary: #1a1d23;
    --text-secondary: #56616e;
    --text-muted: #7c8793;
    color-scheme: light;
    background: var(--bg-base);
    color: var(--text-primary);
  }
  html[data-theme="auto"] body {
    background: var(--bg-base);
    color: var(--text-primary);
  }
  html[data-theme="auto"] .chart-box {
    background: #edf2f6;
  }
}
@media (max-width: 680px) {
  #marketClocks {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  #marketClocks i {
    display: none;
  }
}
.leverage-card {
  margin-top: 18px;
}
.leverage-card > p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
}
.leverage-grid {
  display: grid;
  gap: 6px;
  margin-top: 13px;
}
.lev-row {
  display: grid;
  grid-template-columns: 52px repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--bg-surface-2);
}
.lev-row > b {
  font:
    700 15px "SF Mono",
    monospace;
  color: var(--warn);
}
.lev-row span {
  display: grid;
  gap: 2px;
  font:
    600 12px "SF Mono",
    monospace;
  color: var(--text-primary);
}
.lev-row small {
  font: 10px ui-sans-serif;
  color: var(--text-muted);
}
@media (max-width: 680px) {
  .lev-row {
    grid-template-columns: 44px 1fr 1fr;
  }
  .lev-row > b {
    grid-row: span 2;
  }
  .lev-row span {
    font-size: 11px;
  }
}
.leverage-card .leverage-method {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--warn);
  border-radius: 4px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.55;
}
.leverage-card .leverage-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 680px) {
  .leverage-card .leverage-controls {
    justify-content: flex-start;
    margin-top: 10px;
  }
}
.index-ticker-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.index-card {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
}
.index-card > span {
  font-size: 12px;
  color: var(--text-secondary);
}
.index-card > b {
  font:
    700 25px "SF Mono",
    monospace;
  color: var(--text-primary);
  letter-spacing: -1px;
}
.index-card div {
  display: flex;
  gap: 10px;
  font:
    600 14px "SF Mono",
    monospace;
}
.index-card em {
  font-style: normal;
}
.index-card small {
  font-size: 10px;
  color: var(--text-muted);
}
.index-card.up div {
  color: var(--bull);
}
.index-card.down div {
  color: var(--bear);
}
@media (max-width: 680px) {
  .index-ticker-cards {
    grid-template-columns: 1fr;
  }
  .index-card > b {
    font-size: 22px;
  }
}
.leverage-exchange {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}
.leverage-exchange select {
  padding: 7px 9px;
  border-color: var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* 高密度实时数据交互细节 / Dense live-data affordances. */
.help-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
  color: var(--text-secondary);
  font: 700 9px/1 system-ui;
  cursor: help;
  vertical-align: 1px;
}
.help-dot:focus,
.help-dot:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  outline: 0;
}
.help-dot:after {
  content: attr(data-tip);
  position: absolute;
  z-index: 20;
  display: none;
  left: 50%;
  top: 20px;
  width: min(270px, 70vw);
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(20, 27, 37, 0.98);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  font: 11px/1.5 ui-sans-serif;
  letter-spacing: 0;
  text-align: left;
  transform: translateX(-50%);
}
.help-dot:focus:after,
.help-dot:hover:after {
  display: block;
}
.selection-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px dashed var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
  font:
    11px "SF Mono",
    monospace;
}
.selection-stats b {
  color: var(--text-secondary);
}
.selection-stats .high {
  color: #ffcb65;
}
.selection-stats .low {
  color: #52d5f4;
}
.micro-forecast {
  margin: 15px 0 13px;
  padding: 12px;
  border: 1px solid rgba(75, 159, 255, 0.32);
  border-radius: 9px;
  background: linear-gradient(
    135deg,
    rgba(28, 47, 72, 0.52),
    rgba(18, 27, 38, 0.56)
  );
}
.micro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.micro-head h3 {
  margin: 0;
  font-size: 12px;
  color: var(--text-primary);
}
.micro-head span {
  color: var(--warn);
  font-size: 10px;
}
.micro-direction {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
  margin-top: 9px;
}
.micro-direction > b {
  font:
    700 19px "SF Mono",
    monospace;
}
.micro-direction span {
  font-size: 11px;
  color: var(--text-secondary);
}
.micro-direction strong {
  font:
    700 12px "SF Mono",
    monospace;
  color: var(--text-primary);
}
.micro-direction small {
  grid-column: 1/-1;
  color: var(--text-muted);
  font-size: 10px;
}
.vol-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.vol-item {
  display: grid;
  gap: 3px;
  padding: 7px;
  border-radius: 6px;
  background: rgba(6, 13, 23, 0.35);
}
.vol-item > span {
  color: var(--text-secondary);
  font-size: 10px;
}
.vol-item > b {
  font:
    700 13px "SF Mono",
    monospace;
  color: var(--accent-cyan);
}
.vol-item small {
  display: grid;
  gap: 2px;
  font:
    9px "SF Mono",
    monospace;
}
.vol-item i {
  font-style: normal;
}
.vol-item .low {
  color: #52d5f4;
}
.vol-item .high {
  color: #ffcb65;
}
#priceTime {
  margin-left: 4px;
  color: var(--text-muted);
  font:
    10px "SF Mono",
    monospace;
  letter-spacing: 0;
}
.hero #change.price-up {
  animation: price-flash-up 1.35s ease-out;
}
.hero #change.price-down {
  animation: price-flash-down 1.35s ease-out;
}
.hero strong.price-up {
  animation: price-flash-up 1.35s ease-out;
}
.hero strong.price-down {
  animation: price-flash-down 1.35s ease-out;
}
.lev-row {
  border-left: 3px solid var(--warn);
}
.lev-row:nth-child(1) {
  border-left-color: #58a6ff;
}
.lev-row:nth-child(2) {
  border-left-color: #a78bfa;
}
.lev-row:nth-child(3) {
  border-left-color: #ffb020;
}
.lev-row:nth-child(4) {
  border-left-color: var(--bear);
  background: linear-gradient(
    90deg,
    rgba(255, 77, 106, 0.12),
    var(--bg-surface-2) 50%
  );
}
.lev-row span:nth-child(2),
.lev-row span:nth-child(4) {
  color: #ffcf70;
}
.lev-row span:nth-child(3),
.lev-row span:nth-child(5) {
  color: #72d8ff;
}
.leverage-card .forecast-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.controls {
  gap: 8px;
}
.controls label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.controls select,
.controls button {
  min-height: 38px;
}
.controls #langToggle {
  min-width: 74px;
  border-color: #608fce;
  color: #dceaff;
}
.controls #themeToggle {
  min-width: 88px;
}
.controls #refresh {
  font-weight: 700;
}
.controls:has(#langToggle) {
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--bg-surface);
}
.chart-periods {
  display: block !important;
  margin: 13px 0 0 !important;
  padding: 13px 0 0 !important;
  border-top: 1px solid var(--border-subtle) !important;
}
.chart-periods h2 {
  margin-bottom: 9px;
}
.chart-periods > div {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.chart-periods span {
  min-width: 0;
  padding: 7px 8px !important;
}
.side-stack > .change-card {
  display: none;
}
.terminal-layout > .card > .forecast-card,
.chart-column > .card > .forecast-card {
  margin: 18px 0 0;
  padding: 14px;
  background: var(--bg-surface-2);
  box-shadow: none;
}
.terminal-layout > .card > .forecast-card .forecast-grid,
.chart-column > .card > .forecast-card .forecast-grid {
  margin-top: 10px;
}
.terminal-layout > .card > .forecast-card .forecast-item,
.chart-column > .card > .forecast-card .forecast-item {
  padding: 8px;
  background: rgba(3, 12, 23, 0.28);
}
.side-stack > .optional {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px 14px;
  padding: 14px;
}
.side-stack > .optional > div {
  min-width: 0;
}
.side-stack > .optional > button {
  width: auto;
  min-width: 0;
  justify-self: end;
  padding: 7px 10px;
}
.side-stack > .optional > #resonance {
  grid-column: 1/-1;
  justify-self: start;
  min-width: 0;
}
.side-stack > .optional .res-chip {
  margin: 2px 4px 0 0;
  padding: 5px 6px;
  font-size: 10px;
}
.metric .help-dot,
.change-card .help-dot,
.card h2 .help-dot {
  display: inline-grid !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  border: 1px solid var(--accent-cyan) !important;
  vertical-align: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}
.card:has(.help-dot),
.side-stack .card,
.optional {
  overflow: visible;
}
.help-dot:after {
  max-height: none !important;
  overflow: visible !important;
}
.chart-point-price {
  display: block;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 5px;
  background: rgba(0, 212, 170, 0.1);
  color: #fff;
  font:
    800 16px "SF Mono",
    monospace;
  letter-spacing: -0.3px;
}
.micro-direction small b {
  color: var(--accent-cyan);
  font-weight: 700;
}
#chartTooltip .chart-live-price {
  display: block;
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(110, 138, 178, 0.12);
  font:
    700 12px "SF Mono",
    monospace;
  color: var(--text-primary);
}
#chartTooltip .chart-live-price i {
  margin-left: 5px;
  font-style: normal;
}
.chart-box {
  overflow: visible !important;
}
#selectionOverlay {
  position: absolute;
  z-index: 7;
  /* 与主图绘图区左缘（CHART_PAD.l = 52px）对齐，不再整条贴左 */
  left: 52px;
  right: 84px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(117, 183, 255, 0.65);
  border-radius: 8px;
  /* 卡片固定在图表底部，会压住副图（成交量柱 + RSI）下沿约 60px，
     因此保持半透明并只用轻微模糊，让下面的成交量柱仍可辨认。 */
  background: rgba(16, 27, 41, 0.32);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  font:
    11px "SF Mono",
    monospace;
  color: var(--text-secondary);
  pointer-events: none;
}
#selectionOverlay[hidden] {
  display: none;
}
#selectionOverlay > b {
  color: #dceaff;
}
#selectionOverlay span {
  white-space: nowrap;
}
#selectionOverlay em {
  font-style: normal;
  font-weight: 700;
}
#selectionOverlay .high {
  color: #ffcb65;
}
#selectionOverlay .low {
  color: #52d5f4;
}
#selectionOverlay i {
  font-style: normal;
}
.levels .help-dot,
.toolbar .help-dot {
  display: inline-grid !important;
  align-self: center;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  margin-left: 6px !important;
  padding: 0 !important;
}
.res-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 3px 5px 3px 0;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
  font:
    12px "SF Mono",
    monospace;
}
.res-chip b {
  color: var(--text-secondary);
}
.res-chip em {
  font-style: normal;
  font-weight: 700;
}
.res-chip small {
  color: var(--text-muted);
  font-size: 10px;
}
.res-chip.bull {
  border-color: rgba(0, 212, 170, 0.4);
  background: rgba(0, 212, 170, 0.1);
}
.res-chip.bear {
  border-color: rgba(255, 77, 106, 0.4);
  background: rgba(255, 77, 106, 0.1);
}
.res-chip.flat {
  border-color: rgba(154, 164, 178, 0.4);
}
.res-chip.conflict {
  border-style: dashed;
  border-color: rgba(255, 77, 106, 0.75) !important;
  background: rgba(255, 77, 106, 0.12);
}
.res-chips {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2px;
}
.res-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font:
    700 13px/1.2 "SF Mono",
    "JetBrains Mono",
    monospace;
  border: 1px solid transparent;
}
.res-summary b {
  font-style: normal;
}
.res-summary small {
  font-weight: 500;
  font-size: 11px;
  opacity: 0.85;
}
.res-summary.bull {
  color: #00d4aa;
  background: rgba(0, 212, 170, 0.14);
  border-color: rgba(0, 212, 170, 0.45);
}
.res-summary.bear {
  color: #ff4d6a;
  background: rgba(255, 77, 106, 0.14);
  border-color: rgba(255, 77, 106, 0.45);
}
.res-summary.flat {
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border-color: var(--border-subtle);
}
.res-summary.conflict {
  color: #ffb020;
  background: rgba(255, 176, 32, 0.14);
  border-color: rgba(255, 176, 32, 0.5);
}
.res-summary.loading,
.res-summary.error {
  color: var(--text-muted);
  background: var(--bg-surface-2);
  border-color: var(--border-subtle);
}
/* 多周期共振的卡片头部：标题与结论徽标同一行，说明换行在下面。
   结论（强共振 / 多数 / 分歧 + 强度）放在标题右侧，卡片变成「先看结论、
   再看右侧各周期标签」的读法；未计算时槽位为空，不占位。 */
.resonance-head {
  min-width: 0;
}
.resonance-head-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.resonance-head-top > h2 {
  flex: 0 0 auto;
}
#resonanceSummary:empty {
  display: none;
}
#resonanceSummary .res-summary {
  margin: 0;
}
/* 标题行里那句话结论（几个字，如「多头占优」）：纯文字、跟着方向变色，
   不做成第二个徽标 —— 徽标已经有数字，这里只要一眼看懂的短句。 */
.res-verdict {
  font:
    700 14px/1.2 "SF Mono",
    "JetBrains Mono",
    monospace;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.res-verdict[hidden] {
  display: none;
}
.res-verdict.bull {
  color: var(--bull);
}
.res-verdict.bear {
  color: var(--bear);
}
.res-verdict.conflict {
  color: #ffb020;
}
.res-verdict.flat {
  color: var(--text-secondary);
}
.horizon-forecasts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(111, 143, 184, 0.2);
}
.horizon-forecasts > span {
  font-size: 10px;
  color: var(--text-muted);
}
.horizon-forecasts article {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(3, 12, 23, 0.34);
  border: 1px solid rgba(75, 159, 255, 0.22);
}
.horizon-forecasts small {
  color: var(--text-secondary);
  font-size: 10px;
}
.horizon-forecasts b {
  font:
    800 15px "SF Mono",
    monospace;
}
.horizon-forecasts span {
  font-size: 10px;
  color: var(--text-muted);
}
header h1 {
  font-size: 30px !important;
  font-weight: 800;
  letter-spacing: -0.9px;
  color: #f3f7ff;
  text-shadow: 0 1px 18px rgba(80, 151, 255, 0.16);
}
header h1::first-letter {
  color: var(--accent-cyan);
}
@media (max-width: 680px) {
  header h1 {
    font-size: 23px !important;
  }
  #selectionOverlay {
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: 10px;
  }
  .horizon-forecasts {
    grid-template-columns: 1fr;
  }
}
#exchangeMeta {
  display: none;
  flex: 1 1 360px;
  min-width: 280px;
  max-width: 560px;
  gap: 5px;
  margin-left: auto;
}
#exchangeMeta:not(:empty) {
  display: grid;
}
.exchange-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3px 9px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
  font:
    10px/1.25 "SF Mono",
    monospace;
  color: var(--text-secondary);
  min-width: 0;
}
.exchange-row > b {
  min-width: 48px;
  color: var(--text-primary);
}
.exchange-row span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.exchange-row em {
  font-style: normal;
  font-weight: 800;
}
.hero {
  align-items: flex-start;
}
.hero > div:first-child {
  min-width: 300px;
}
header p b {
  color: var(--accent-cyan);
  font:
    700 11px "SF Mono",
    monospace;
}
@media (max-width: 1024px) {
  #exchangeMeta {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
    margin: 8px 5px 0;
  }
  .hero {
    flex-wrap: wrap;
  }
}
@media (max-width: 680px) {
  .exchange-row {
    justify-content: flex-start;
    gap: 5px 9px;
    font-size: 10px;
  }
  .hero > div:first-child {
    min-width: 0;
  }
}
#marketClocks #exchangeMeta {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-left: auto;
}
#marketClocks .exchange-row {
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 9px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font: inherit;
  color: inherit;
  white-space: nowrap;
}
#marketClocks .exchange-row > b {
  min-width: 0;
  color: inherit;
  font-weight: 500;
}
#marketClocks .exchange-row span {
  white-space: nowrap;
  overflow-wrap: normal;
}
#marketClocks .exchange-row em {
  font-weight: 700;
}
@media (max-width: 680px) {
  #marketClocks #exchangeMeta {
    width: 100%;
    margin-left: 0;
  }
  #marketClocks .exchange-row {
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
  }
}
.optional {
  display: grid;
  grid-template-columns: minmax(290px, 1fr) 158px minmax(540px, auto);
  align-items: center;
  gap: 18px;
}
.optional > button {
  width: 158px;
  min-width: 158px;
  justify-self: center;
  white-space: nowrap;
}
.optional > #resonance {
  min-width: 0;
  justify-self: end;
}
/* The manual recalculation control is a compact action alongside the result
   chips, rather than a wider primary action that dominates this row. */
/* 标题区按内容自适应，中间那一列 1fr 只当留白，把「计算共振」推到最右侧、
   紧挨着周期标签；周期标签继续靠右对齐。 */
.optional {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
}
.optional > button {
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
  justify-self: end;
}
.chart-periods #changeTags small {
  font-size: 10px;
  letter-spacing: 0;
  color: var(--text-muted);
}
.price-digit {
  display: inline-block;
  min-width: 0.6ch;
  /* 放大以字符底线为基准，跳动时向上"长"出去，不推挤整行基线
     / Grow from the digit's own baseline so a tick never nudges the row. */
  transform-origin: 50% 100%;
}
/* 脉冲时长 500ms：刷新提到 250ms（4 次/秒）后，若还用原来的 950ms，同一位数字
   连续变化时动画会被下一次刷新打断、永不到达终态（表现为"一直在亮"）。500ms 让
   每次脉冲在下一次刷新前后就基本回落完成，颜色与光晕方案保持不变。
   A 500ms pulse: once the quote refreshes every 250ms, the old 950ms animation
   would be restarted before finishing (a digit that keeps changing would stay lit
   forever). 500ms lets each pulse settle; colors and glow are unchanged. */
.price-digit.changed-up {
  animation: digit-flash-up 500ms ease-out;
}
.price-digit.changed-down {
  animation: digit-flash-down 500ms ease-out;
}
@keyframes digit-flash-up {
  0% {
    color: #00d4aa;
    text-shadow: 0 0 18px rgba(0, 212, 170, 0.9);
    transform: translateY(-1px) scale(1.16);
  }
  100% {
    color: inherit;
    text-shadow: none;
    transform: none;
  }
}
@keyframes digit-flash-down {
  0% {
    color: #ff4d6a;
    text-shadow: 0 0 18px rgba(255, 77, 106, 0.85);
    transform: translateY(-1px) scale(1.16);
  }
  100% {
    color: inherit;
    text-shadow: none;
    transform: none;
  }
}
#priceSource {
  margin-left: 7px;
  color: var(--text-muted);
  font:
    10px "SF Mono",
    monospace;
  letter-spacing: 0;
}
.exchange-row {
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.exchange-row + .exchange-row {
  border-top: 1px solid var(--border-subtle) !important;
  padding-top: 7px !important;
  margin-top: 3px;
}
.exchange-row .source-note {
  align-self: center;
  color: var(--text-muted);
  font-size: 10px;
}
.position-card {
  margin-top: 18px;
}
.position-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: start;
}
.position-head h2 {
  margin: 0;
}
.position-head button {
  font-size: 11px;
  white-space: nowrap;
}
.position-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.position-form label {
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 11px;
}
.position-form input,
.position-form select {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font:
    12px "SF Mono",
    monospace;
}
.position-output {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.position-output > div {
  display: grid;
  gap: 4px;
  padding: 9px;
  border-left: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-surface-2);
}
.position-output small {
  color: var(--text-muted);
  font-size: 10px;
}
.position-output b {
  font:
    700 13px "SF Mono",
    monospace;
}
#entryMarker {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 74px;
  border-top: 1px dashed #a78bfa;
  color: #d9c8ff;
  font:
    700 10px "SF Mono",
    monospace;
  pointer-events: none;
}
#entryMarker::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 9px #a78bfa;
}
#entryMarker[hidden] {
  display: none;
}
#entryMarker {
  left: auto !important;
  right: 82px !important;
  width: auto !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(167, 139, 250, 0.7) !important;
  border-radius: 6px !important;
  background: rgba(34, 25, 58, 0.94) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(-50%);
}
#entryMarker::before {
  left: -7px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  transform: translateY(-50%);
  border: 2px solid #d9c8ff;
  background: #a78bfa;
}
.liq-probability {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(114, 151, 201, 0.28);
}
.liq-prob-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.liq-prob-head h3 {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
}
.liq-prob-head span {
  color: var(--warn);
  font-size: 10px;
}
.liq-prob-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}
.liq-prob-form label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
}
.liq-prob-form select,
.liq-prob-form input {
  width: 100%;
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font:
    11px "SF Mono",
    monospace;
}
.liq-prob-output {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.liq-prob-output > div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(3, 12, 23, 0.32);
}
.liq-prob-output small {
  font-size: 9px;
  color: var(--text-muted);
}
.liq-prob-output b {
  font:
    700 12px "SF Mono",
    monospace;
}
.liq-prob-output p {
  grid-column: 1/-1;
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}
.liq-prob-output p.bear {
  color: var(--bear);
}
.liq-prob-output p.bull {
  color: var(--bull);
}
.liq-prob-output p.flat {
  color: var(--warn);
}
.liq-probability-card {
  margin-top: 18px;
}
.liq-probability-card .liq-prob-head h2 {
  margin: 0;
  font-size: 16px;
}
.liq-probability-card .liq-prob-head p {
  margin-top: 4px;
}
.position-details {
  margin-top: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-surface);
}
.position-details summary {
  cursor: pointer;
  padding: 13px 16px;
  color: var(--text-secondary);
  font-size: 13px;
}
.position-details[open] summary {
  border-bottom: 1px solid var(--border-subtle);
}
.position-details .position-card,
.liq-probability-details .liq-probability-card,
.leverage-details .leverage-card {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.alert-details .wechat-alert-card {
  margin: 0 !important;
  border: 0;
  border-radius: 0;
}
@media (max-width: 900px) {
  .liq-prob-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .liq-prob-output {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .liq-prob-form {
    grid-template-columns: 1fr 1fr;
  }
}
#chartLegend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  font:
    10px "SF Mono",
    monospace;
  color: var(--text-secondary);
}
#chartLegend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#chartLegend span:before {
  content: "";
  width: 14px;
  border-top: 2px solid currentColor;
}
.candle-series {
  color: #a3b3c8;
}
.price-line {
  color: var(--bull);
}
.ma20-line {
  color: #4b9fff;
}
.ma50-line {
  color: #d69b2d;
}
.ma200-line {
  color: #a970ff;
}
/* 图例色块与图上线条一一对应。 */
.boll-line {
  color: #7c9ac4;
}
.vwap-line {
  color: #ff5cd0;
}
.rsi-line {
  color: #f4f8ff;
}
html[data-theme="light"] .rsi-line {
  color: #64748b;
}
#chartLegend .volume-line:before {
  border-top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ef4d78, #28c76f);
}
#chartLegend .personal-entry-long {
  color: #19d3b0;
}
#chartLegend .personal-entry-short {
  color: #ff5b7b;
}
#chartLegend .personal-entry-long:before,
#chartLegend .personal-entry-short:before {
  border-top-style: dashed;
}
.short-risk {
  display: block;
  margin-top: 7px;
  padding: 5px 7px;
  border-left: 2px solid currentColor;
  border-radius: 3px;
  background: var(--bg-surface-2);
  font-size: 10px;
}
.short-risk.bear {
  color: var(--bear);
}
.short-risk.bull {
  color: var(--bull);
}
.short-risk.flat {
  color: var(--text-secondary);
}
@media (max-width: 1100px) {
  .optional {
    grid-template-columns: minmax(260px, 1fr) 158px;
  }
  .optional > #resonance {
    grid-column: 1/-1;
    justify-self: start;
  }
}
@media (max-width: 680px) {
  .optional {
    grid-template-columns: 1fr;
  }
  .optional > button {
    justify-self: start;
  }
  .optional > #resonance {
    grid-column: auto;
  }
}
@media (max-width: 900px) {
  .position-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .position-output {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .position-head {
    display: grid;
  }
  .position-form {
    grid-template-columns: 1fr;
  }
  .position-output {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 850px) {
  .vol-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .controls:has(#langToggle) {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 680px) {
  .selection-stats {
    font-size: 10px;
  }
  .micro-direction {
    grid-template-columns: 1fr;
  }
  .vol-grid {
    grid-template-columns: 1fr 1fr;
  }
  .controls select,
  .controls button {
    min-height: 34px;
  }
  .help-dot:after {
    left: auto;
    right: -20px;
    transform: none;
  }
  .hero #change {
    flex-wrap: wrap;
  }
}
@media (max-width: 680px) {
  .chart-periods > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Floating liquid-glass navigation: a bright, refractive surface instead of
   the former edge-to-edge black header. */
main {
  padding-top: 20px;
}
main > header {
  position: relative;
  isolation: isolate;
  min-height: 62px;
  margin: 0 0 12px;
  padding: 8px 12px 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(
      150px 80px at 12% -35%,
      rgba(255, 255, 255, 0.2),
      transparent 70%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.105),
      rgba(255, 255, 255, 0.045) 47%,
      rgba(113, 185, 255, 0.075)
    );
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.34),
    0 10px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  overflow: hidden;
}
main > header:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
main > header h1 {
  font-size: 21px !important;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.45px;
  text-shadow: 0 1px 15px rgba(255, 255, 255, 0.1);
}
main > header p {
  margin: 3px 0 0;
  font-size: 10.5px;
  line-height: 1.1;
  color: rgba(218, 228, 243, 0.75);
  letter-spacing: 0.02em;
}
main > header .live-pulse {
  width: 7px;
  height: 7px;
  margin-right: 5px;
}
main > header .controls {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(5, 10, 18, 0.17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
main > header .controls label {
  gap: 4px;
}
main > header .controls label:after {
  font-size: 10px;
  color: rgba(218, 228, 243, 0.6);
}
main > header .controls select,
main > header .controls button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--accent-cyan);
  font-size: 13px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
main > header .controls #langToggle {
  min-width: 50px;
}
main > header .controls #themeToggle {
  min-width: 72px;
}
/* Header actions share the same utility-pill visual language as fullscreen and
   theme controls instead of mixing cyan status pills with purple utility pills. */
main > header .controls > button,
main > header .controls > label > select,
main > header .controls .connectivity-toggle {
  box-sizing: border-box;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-color: rgba(176, 159, 223, 0.3);
  border-radius: 999px;
  background: rgba(111, 83, 159, 0.2);
  color: #e7eafb;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
main > header .controls > label > select {
  min-width: 78px;
  color-scheme: dark;
}
main > header .controls .connectivity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
main > header .controls > button:hover,
main > header .controls > label > select:hover,
main > header .controls .connectivity-toggle:hover {
  border-color: rgba(208, 198, 241, 0.58);
  background: rgba(128, 99, 181, 0.34);
  color: #fff;
}
main > header .controls #appVersion,
main > header .controls #langToggle,
main > header .controls #themeToggle {
  min-width: 0;
}
main > header .controls select:hover,
main > header .controls button:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 14px rgba(117, 187, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
main > #marketClocks {
  margin: 0 14px 13px;
  font-size: 10.5px;
}
@media (max-width: 900px) {
  main > header {
    border-radius: 28px;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
  }
  main > header .controls {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (max-width: 640px) {
  main {
    padding-top: 14px;
  }
  main > header {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 24px;
    padding: 12px;
  }
  main > header h1 {
    font-size: 19px !important;
  }
  main > header .controls {
    width: 100%;
    justify-content: flex-start;
  }
  main > header .controls label {
    flex: 1 1 120px;
  }
  main > header .controls select {
    width: 100%;
  }
  main > header .controls button {
    flex: 0 0 auto;
  }
  main > #marketClocks {
    margin: 0 8px 11px;
  }
}

/* Let the individual controls float directly in the glass nav; do not wrap
   them in a second dark rectangle.  Align the two quote rows to the price. */
main > header .controls {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero {
  align-items: flex-end;
}
@media (max-width: 1024px) {
  .hero {
    align-items: flex-start;
  }
}

/* The previous grouped-controls rule has an ID selector via :has(), so it
   needs an equally specific override to remove its inherited dark panel. */
main > header .controls:has(#langToggle) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (min-width: 1025px) {
  .terminal-layout {
    align-items: stretch;
  }
  .terminal-layout > .side-stack {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .terminal-layout > .side-stack > .card:nth-child(2) {
    height: 100%;
    min-height: 0;
  }
  .terminal-layout > .side-stack > .card:nth-child(2) .metrics {
    padding-bottom: 72px;
  }
}

/* Keep the two dashboard columns level.  The details card uses two columns
   until its own available width becomes genuinely too narrow for the values. */
@media (min-width: 1025px) {
  .terminal-layout {
    align-items: stretch;
  }
  .terminal-layout > .side-stack {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .terminal-layout > .side-stack > .card:nth-child(2) {
    height: 100%;
    min-height: 0;
  }
  .terminal-layout > .side-stack > .card:nth-child(2) .metrics {
    padding-bottom: 0;
  }
}

/* A wide desktop has room for a useful two-column indicator card. */
@media (min-width: 1320px) {
  main {
    max-width: 1440px;
  }
  .terminal-layout {
    grid-template-columns: minmax(0, 68fr) minmax(300px, 32fr);
  }
}

/* Higher-contrast light palette: all semantic text and status colours remain
   readable on a bright canvas instead of retaining dark-mode translucency. */
html[data-theme="light"] {
  --bg-base: #f3f6fa;
  --bg-surface: #ffffff;
  --bg-surface-2: #edf2f7;
  --bg-elevated: #e1e8f0;
  --border-subtle: #c8d3df;
  --border-strong: #91a2b6;
  --text-primary: #162235;
  --text-secondary: #43566d;
  --text-muted: #65778c;
  --bull: #007f69;
  --bear: #c3344f;
  --warn: #9b6200;
  --accent-cyan: #007f9d;
}
html[data-theme="light"] main > header {
  border-color: rgba(68, 89, 116, 0.24);
  background:
    radial-gradient(
      150px 80px at 12% -35%,
      rgba(255, 255, 255, 0.9),
      transparent 70%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.78),
      rgba(229, 237, 247, 0.68) 47%,
      rgba(205, 224, 244, 0.62)
    );
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.96),
    inset -1px -1px 0 rgba(71, 92, 119, 0.12),
    0 10px 32px rgba(35, 51, 72, 0.22);
}
html[data-theme="light"] main > header h1 {
  color: #142033;
  text-shadow: none;
}
html[data-theme="light"] main > header p {
  color: rgba(45, 66, 91, 0.78);
}
html[data-theme="light"] main > header .controls select,
html[data-theme="light"] main > header .controls button {
  border-color: rgba(64, 88, 119, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: #24364d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
html[data-theme="light"] main > header .controls label:after {
  color: #587087;
}
html[data-theme="light"] .micro-forecast,
html[data-theme="light"] .terminal-layout > .card > .forecast-card,
html[data-theme="light"] .chart-column > .card > .forecast-card {
  background: linear-gradient(135deg, #f7fbff, #edf4fa);
}
html[data-theme="light"] .vol-item,
html[data-theme="light"] .horizon-forecasts article,
html[data-theme="light"] .forecast-item {
  background: #fff;
  border-color: #cbd7e3;
}
html[data-theme="light"] .signal-projection {
  background: #f8fbfd;
  border-color: #c4d2df;
}
html[data-theme="light"] #selectionOverlay {
  background: rgba(248, 251, 255, 0.45);
  color: #32465d;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --bg-base: #f3f6fa;
    --bg-surface: #ffffff;
    --bg-surface-2: #edf2f7;
    --bg-elevated: #e1e8f0;
    --border-subtle: #c8d3df;
    --border-strong: #91a2b6;
    --text-primary: #162235;
    --text-secondary: #43566d;
    --text-muted: #65778c;
    --bull: #007f69;
    --bear: #c3344f;
    --warn: #9b6200;
    --accent-cyan: #007f9d;
  }
  html[data-theme="auto"] main > header {
    border-color: rgba(68, 89, 116, 0.24);
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.82),
      rgba(229, 237, 247, 0.72)
    );
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.96),
      inset -1px -1px 0 rgba(71, 92, 119, 0.12),
      0 10px 32px rgba(35, 51, 72, 0.22);
  }
  html[data-theme="auto"] main > header h1 {
    color: #142033;
    text-shadow: none;
  }
  html[data-theme="auto"] main > header p {
    color: rgba(45, 66, 91, 0.78);
  }
  html[data-theme="auto"] main > header .controls select,
  html[data-theme="auto"] main > header .controls button {
    border-color: rgba(64, 88, 119, 0.22);
    background: rgba(255, 255, 255, 0.72);
    color: #24364d;
  }
  html[data-theme="auto"] .micro-forecast,
  html[data-theme="auto"] .terminal-layout > .card > .forecast-card,
  html[data-theme="auto"] .chart-column > .card > .forecast-card {
    background: linear-gradient(135deg, #f7fbff, #edf4fa);
  }
  html[data-theme="auto"] .vol-item,
  html[data-theme="auto"] .horizon-forecasts article,
  html[data-theme="auto"] .forecast-item {
    background: #fff;
    border-color: #cbd7e3;
  }
  html[data-theme="auto"] .signal-projection {
    background: #f8fbfd;
    border-color: #c4d2df;
  }
}
.range-extreme {
  position: absolute;
  z-index: 6;
  max-width: 190px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(19, 28, 41, 0.78);
  backdrop-filter: blur(5px);
  font:
    700 10px "SF Mono",
    monospace;
  pointer-events: none;
  white-space: nowrap;
}
.range-extreme:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.range-extreme.high {
  color: #ffcb65;
  border: 1px solid rgba(255, 203, 101, 0.5);
}
.range-extreme.low {
  color: #52d5f4;
  border: 1px solid rgba(82, 213, 244, 0.5);
}
.forecast-item b.caution,
.horizon-forecasts b.caution {
  color: var(--warn) !important;
}
.range-extreme {
  background: rgba(19, 28, 41, 0.98) !important;
}
.range-extreme.high {
  transform: translateY(-58px);
}
.range-extreme.low {
  transform: translateY(34px);
}
/* 标签贴近图表右缘时向左展开：圆点仍锚在真实 K 线 x 上（平移量补偿圆点
   半径＋右缘 margin，让圆点中心恰好落在标记 x）。 */
.range-extreme.flip-left {
  display: flex;
  flex-direction: row-reverse;
}
.range-extreme.flip-left:before {
  margin-right: 0;
  margin-left: 4px;
}
.range-extreme.flip-left.high {
  transform: translateX(calc(-100% + 4px)) translateY(-58px);
}
.range-extreme.flip-left.low {
  transform: translateX(calc(-100% + 4px)) translateY(34px);
}
.range-extreme {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.range-extreme.is-visible {
  visibility: visible;
  opacity: 1;
}
.signal-projection {
  display: grid;
  gap: 6px;
  min-height: 126px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.signal-projection > span {
  font-size: 10px;
  color: var(--text-muted);
}
.signal-projection > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 15px;
}
.signal-projection b {
  font:
    800 17px "SF Mono",
    monospace;
}
.signal-projection em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: 11px;
}
.signal-projection strong {
  font:
    700 13px "SF Mono",
    monospace;
}
.signal-projection small {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}
.signal-projection.bull {
  border-left-color: var(--bull);
}
.signal-projection.bear {
  border-left-color: var(--bear);
}
.signal-projection small b {
  color: var(--accent-cyan);
  font:
    800 10px "SF Mono",
    monospace;
}
.signal-validity {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
}
.signal-validity-head,
.signal-validity-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.signal-validity-head > b {
  font-size: 13px;
}
.signal-validity-head > span {
  font:
    700 11px "SF Mono",
    monospace;
}
.signal-validity.is-valid .signal-validity-head > span {
  color: var(--bull);
}
.signal-validity.is-invalid .signal-validity-head > span {
  color: var(--text-muted);
}
.signal-validity-scale {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) minmax(80px, 2.6fr) minmax(70px, 1fr);
  align-items: center;
  gap: 8px;
}
.signal-validity-label {
  display: grid;
  gap: 2px;
  font:
    700 11px "SF Mono",
    monospace;
}
.signal-validity-label.right {
  text-align: right;
}
.signal-validity-label small {
  color: var(--text-primary);
}
.signal-validity-label em {
  font:
    10px ui-sans-serif,
    system-ui,
    sans-serif;
  color: var(--text-muted);
}
.signal-validity-track {
  position: relative;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(82, 213, 244, 0.45),
    var(--accent-cyan),
    rgba(255, 203, 101, 0.45)
  );
}
.signal-validity-now {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 3px solid var(--bg-surface);
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 0 2px var(--accent-cyan);
  transform: translate(-50%, -50%);
}
.signal-validity-foot {
  font-size: 10px;
  color: var(--text-secondary);
}
.signal-validity-foot b {
  font:
    700 11px "SF Mono",
    monospace;
  color: var(--text-primary);
}
.signal-validity-foot small {
  max-width: 65%;
  color: var(--text-muted);
  text-align: right;
}
.signal-invalid {
  opacity: 0.42;
  filter: grayscale(0.9);
}
.signal-validity.is-invalid {
  border-color: var(--border-subtle);
  background: rgba(105, 119, 137, 0.08);
}
.duration-estimate {
  display: inline-block;
  margin-left: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: transparent;
  font:
    800 11px "SF Mono",
    monospace;
  letter-spacing: 0.01em;
}
.duration-estimate.duration-comfort {
  color: var(--bull);
  background: color-mix(in srgb, var(--bull) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bull) 30%, transparent);
}
.duration-estimate.duration-caution {
  color: #f0b84c;
  background: rgba(240, 184, 76, 0.12);
  box-shadow: inset 0 0 0 1px rgba(240, 184, 76, 0.33);
}
.duration-estimate.duration-urgent {
  color: var(--bear);
  background: color-mix(in srgb, var(--bear) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bear) 30%, transparent);
}
.range-extrema-tooltip-note {
  margin: -1px -1px 7px;
  padding: 6px 8px;
  border-radius: 5px;
  font:
    800 11px "SF Mono",
    monospace;
  letter-spacing: 0.01em;
}
.range-extrema-tooltip-note.high {
  color: #ffcf69;
  border: 1px solid rgba(255, 207, 105, 0.62);
  background: rgba(255, 181, 45, 0.14);
}
.range-extrema-tooltip-note.low {
  color: #54d9f5;
  border: 1px solid rgba(84, 217, 245, 0.62);
  background: rgba(34, 211, 238, 0.13);
}
.signal-projection .help-dot {
  display: inline-grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  border: 1px solid var(--accent-cyan) !important;
  border-radius: 50% !important;
  font: 700 9px/1 system-ui !important;
  vertical-align: 1px !important;
  overflow: visible !important;
}
.metric .help-dot:after {
  width: min(300px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.5;
}
.pan-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 7px;
  background: var(--bg-surface-2);
}
.pan-tools button {
  padding: 4px 8px !important;
  font-size: 14px !important;
  line-height: 1;
}
.pan-tools button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.pan-tools span {
  display: grid;
  gap: 2px;
  min-width: 108px;
  text-align: center;
  color: var(--text-secondary);
  font:
    10px "SF Mono",
    monospace;
}
.pan-tools i {
  font-style: normal;
}
.pan-tools small {
  color: var(--text-muted);
  font:
    9px/1.2 ui-sans-serif,
    system-ui;
  white-space: nowrap;
}
/* 「横向移动」（v2.11.26）：默认只显示标题，把小字提示收起来；
   鼠标移到中间文字区（不含左右箭头）时，瞬间用提示替换掉标题。
   做法是让两层叠进同一格：命中区始终由 <i> 独占（只把它的文字调透明，
   元素盒不收缩），提示层 pointer-events:none —— 否则它浮上来后会截走
   hover，形成「显示↔隐藏」的高频闪烁。 */
.pan-tools #panLabel i,
.pan-tools #panLabel small {
  grid-area: 1 / 1;
  align-self: center;
}
.pan-tools #panLabel small {
  opacity: 0;
  visibility: hidden;
  transition: none;
  pointer-events: none;
}
.pan-tools #panLabel i:hover {
  color: transparent;
}
.pan-tools #panLabel i:hover + small {
  opacity: 1;
  visibility: visible;
}
.chart-pattern-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 2px 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}
.chart-pattern-legend b {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-right: 3px;
  border-radius: 50%;
  background: rgba(85, 217, 255, 0.16);
  color: #55d9ff;
  font: 700 9px/1 system-ui;
}
.chart-pattern-legend span + span b {
  background: rgba(255, 195, 91, 0.16);
  color: #ffc35b;
}
.signal-indicator {
  font: inherit;
  font-weight: 650;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.signal-indicator.sentiment-bull {
  color: var(--bull);
}
.signal-indicator.sentiment-bear {
  color: var(--bear);
}
.signal-indicator.sentiment-neutral {
  color: var(--text-secondary);
}
.primary-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border-subtle);
  font-size: 13px;
}
.primary-trend .muted {
  color: var(--text-muted);
}
.primary-trend .signal-indicator {
  font-weight: 650;
}
.primary-trend .pt-note {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: auto;
  text-align: right;
}
.signal-flash {
  animation: signalFlash 1.2s ease-out;
}
@keyframes signalFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 140, 220, 0);
  }
  18% {
    box-shadow: 0 0 0 4px rgba(40, 140, 220, 0.35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 140, 220, 0);
  }
}
#signalReason > .signal-summary > i {
  font-style: normal;
  color: var(--text-muted);
}
.signal-indicator {
  font-size: 1em;
  letter-spacing: -0.028em;
}
#signalReason > .signal-summary {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
#signalReason > .signal-summary > i {
  flex: 0 0 auto;
  margin: 0 1px;
}
.fixed-rule-control {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 10px;
}
.fixed-rule-control select {
  min-height: 26px;
  padding: 3px 7px;
  border-color: var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 11px;
}
.fixed-rule-basis {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}
@media (max-width: 680px) {
  .fixed-rule-control {
    position: static;
    margin: -2px 0 10px;
  }
}
.source-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.controls label:has(#sourcePicker) {
  position: relative;
}
.controls #sourcePicker {
  display: inline-block;
  position: relative;
}
.controls .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-size: 13px;
  cursor: default;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}
.controls .dropdown-container:hover .dropdown-trigger {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.controls .dropdown-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 50%;
  width: 148px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 15px;
  background: linear-gradient(
    145deg,
    rgba(35, 42, 52, 0.94),
    rgba(18, 23, 31, 0.97)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}
.controls .dropdown-container:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.controls .dropdown-menu button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: left;
}
.controls .dropdown-menu button:hover,
.controls .dropdown-menu button[aria-selected="true"] {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.11);
  color: var(--text-primary);
}
.controls .dropdown-menu button[aria-selected="true"]:after {
  content: "✓";
  float: right;
  color: var(--bull);
  font-weight: 800;
}
html[data-theme="light"] .controls .dropdown-trigger {
  border-color: rgba(64, 88, 119, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: #24364d;
}
html[data-theme="light"] .controls .dropdown-menu {
  border-color: rgba(64, 88, 119, 0.2);
  background: rgba(250, 253, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 30px rgba(38, 57, 82, 0.22);
}
html[data-theme="light"] .controls .dropdown-menu button {
  color: #40546c;
}
html[data-theme="light"] .controls .dropdown-menu button:hover,
html[data-theme="light"] .controls .dropdown-menu button[aria-selected="true"] {
  border-color: rgba(64, 88, 119, 0.18);
  background: rgba(219, 232, 246, 0.66);
  color: #17263b;
}
main > header {
  overflow: visible !important;
  z-index: 20;
}
main > header:before {
  border-radius: inherit;
}
.controls:has(#sourcePicker) {
  position: relative;
  z-index: 40;
}
.controls .dropdown-menu {
  z-index: 100 !important;
}
.pattern-analysis-card {
  display: grid;
  gap: 13px;
}
.pattern-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.pattern-head h2 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pattern-head p {
  margin: 3px 0 0;
  font-size: 11px;
}
.pattern-state {
  max-width: 44%;
  padding: 6px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pattern-grid article,
.pattern-levels span {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.pattern-grid small,
.pattern-levels small {
  color: var(--text-muted);
  font-size: 10px;
}
.pattern-grid b {
  font-size: 12px;
  line-height: 1.35;
}
.pattern-grid b i {
  font-style: normal;
  color: var(--text-muted);
  font-size: 10px;
}
.pattern-grid em {
  color: var(--text-secondary);
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
}
.pattern-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pattern-levels b {
  font:
    700 13px "SF Mono",
    monospace;
}
.pattern-scenario {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid var(--accent-cyan);
  border-radius: 5px;
  background: var(--bg-surface-2);
  font-size: 11px;
  line-height: 1.55;
}
.pattern-scenario b {
  color: var(--text-primary);
}
@media (max-width: 760px) {
  .pattern-head {
    display: grid;
  }
  .pattern-state {
    max-width: none;
    text-align: left;
    justify-self: start;
  }
  .pattern-grid {
    grid-template-columns: 1fr;
  }
  .pattern-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pattern-narrative {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 10px;
}
.pattern-narrative article {
  padding: 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.pattern-narrative h3 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-primary);
}
.pattern-narrative ol,
.pattern-narrative ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.6;
}
.pattern-narrative li + li {
  margin-top: 3px;
}
@media (max-width: 760px) {
  .pattern-narrative {
    grid-template-columns: 1fr;
  }
}
.chart-display-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: auto;
}
.chart-display-controls > span {
  font-size: 10px;
  color: var(--text-secondary);
  margin-right: 2px;
}
.chart-display-controls button {
  height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(122, 151, 190, 0.35);
  border-radius: 7px;
  background: rgba(123, 151, 190, 0.08);
  color: var(--text-secondary);
  font: 600 10px/1 system-ui;
  cursor: pointer;
  transition: 0.18s;
}
.chart-display-controls button:hover {
  border-color: #43c9ff;
  color: var(--text-primary);
}
.chart-display-controls button.active {
  border-color: #31b8ff;
  background: rgba(49, 184, 255, 0.15);
  color: #31c3ff;
}
.chart-line-toggles {
  display: flex;
  gap: 3px;
  padding-left: 5px;
  border-left: 1px solid var(--border-subtle);
}
.chart-display-controls button[data-line="price"] {
  color: #31b8ff;
}
.chart-display-controls button.off {
  opacity: 0.38;
  text-decoration: line-through;
}
@media (max-width: 850px) {
  .chart-display-controls {
    width: 100%;
    margin-left: 0;
    order: 3;
  }
  .chart-line-toggles {
    padding-left: 0;
    border-left: 0;
  }
}
.chart-legend-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 8px 2px 4px;
  margin: 0 0 6px;
}
.chart-legend-strip #chartPatternLegend,
.chart-legend-strip #chartLegend {
  margin: 0;
  padding: 0;
}
#chartLegend {
  flex: 0 0 auto;
  justify-content: flex-start;
}
@media (max-width: 860px) {
  .chart-legend-strip {
    gap: 10px 12px;
  }
  #chartLegend {
    justify-content: flex-start;
    width: 100%;
  }
}
.toolbar {
  justify-content: flex-start;
}
.toolbar .zoom-tools,
.toolbar .chart-display-controls,
#chartLegend {
  margin-left: 0 !important;
}
main > header h1 {
  display: flex;
  align-items: center;
  gap: 7px;
}
main > header h1::before {
  content: "";
  display: inline-block;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  background: url("/btc-indicator-mark.svg?v=1.1.1") center/contain no-repeat;
}
main > header h1::first-letter {
  color: inherit;
}
main > header p .latency {
  color: var(--accent-cyan);
  font:
    700 11px "SF Mono",
    monospace;
}
main > header p .latency-high {
  color: var(--bear);
  text-shadow: 0 0 9px rgba(255, 77, 106, 0.48);
}
main > header .controls #appVersion {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.08);
  color: var(--accent-cyan);
  font:
    700 11px/1 "SF Mono",
    monospace;
  white-space: nowrap;
}
@media (max-width: 640px) {
  main > header h1::before {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }
  main > header .controls {
    flex-wrap: wrap;
  }
  main > header .controls #appVersion {
    min-height: 30px;
  }
}
main > header > div:first-child {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}
main > header > div:first-child::before {
  content: "";
  grid-row: 1/3;
  width: 48px;
  height: 48px;
  background: url("/btc-indicator-mark.svg?v=1.3.0") center/contain no-repeat;
}
main > header > div:first-child h1,
main > header > div:first-child p {
  grid-column: 2;
}
main > header > div:first-child h1::before {
  display: none;
}
main > header > div:first-child h1 {
  min-width: 0;
}
main > header > div:first-child p {
  align-self: start;
}
@media (max-width: 640px) {
  main > header > div:first-child {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 8px;
  }
  main > header > div:first-child::before {
    width: 40px;
    height: 40px;
  }
}

/* 顶部连通性测试器 / Header connectivity tester. */
.connectivity-wrap {
  position: relative;
  display: inline-flex;
}
/* 连通性按钮的视觉风格由顶栏基类 main > header .controls button 统一保证；
   此处只额外覆盖 font/letter-spacing 让状态结果（10/10）跟按钮文本风格一致。
   The connectivity toggle inherits pill styling from the shared header button base.
   Only font tweaks are added here so data-result (10/10) matches the rest of the row. */
main > header .controls #connectivityToggle,
main > header .controls .connectivity-toggle {
  font:
    700 11px/1 "SF Mono",
    monospace;
  letter-spacing: 0.02em;
}
main > header .controls #connectivityToggle:hover,
main > header .controls .connectivity-toggle:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 14px rgba(117, 187, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
.connectivity-toggle:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 3px rgba(91, 101, 115, 0.14);
}
.connectivity-toggle:after {
  content: attr(data-result);
  color: var(--text-secondary);
  font:
    700 9px "SF Mono",
    monospace;
}
.connectivity-toggle.testing:before {
  background: var(--warn);
  animation: live-pulse 1s ease-in-out infinite;
}
.connectivity-toggle:not(.testing)[data-result]:before {
  background: var(--live);
  box-shadow: 0 0 7px rgba(61, 220, 132, 0.55);
}
.connectivity-toggle.has-error:before {
  background: var(--bear);
  box-shadow: 0 0 7px rgba(255, 77, 106, 0.45);
}
.connectivity-panel {
  position: absolute;
  z-index: 180;
  top: calc(100% + 10px);
  left: 50%;
  width: min(480px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(31, 38, 48, 0.98),
    rgba(14, 18, 25, 0.98)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  transform: translateX(-50%);
}
.connectivity-panel[hidden] {
  display: none;
}
.connectivity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.connectivity-head > div {
  display: grid;
  gap: 2px;
}
.connectivity-head b {
  font-size: 15px;
}
.connectivity-head small {
  color: var(--text-muted);
  font-size: 10px;
}
.connectivity-head button {
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
}
.connectivity-summary {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
}
.connectivity-summary.good {
  color: var(--bull);
  background: rgba(0, 212, 170, 0.08);
}
.connectivity-summary.warn,
.connectivity-summary.testing {
  color: var(--warn);
  background: rgba(255, 176, 32, 0.08);
}
.connectivity-summary.bad {
  color: var(--bear);
  background: rgba(255, 77, 106, 0.08);
}
.connectivity-rows {
  display: block;
  margin-top: 8px;
  max-height: min(62vh, 540px);
  overflow: auto;
  padding-right: 2px;
}
.connectivity-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.connectivity-group-body .connectivity-row:last-child {
  border-bottom: 0;
}
.connectivity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.connectivity-row > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 7px;
  min-width: 0;
}
.connectivity-row b {
  font-size: 11px;
}
.connectivity-row small {
  align-self: center;
  color: var(--text-muted);
  font:
    9px "SF Mono",
    monospace;
}
.connectivity-row em {
  grid-column: 1/3;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 9.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connectivity-row strong {
  font:
    800 11px "SF Mono",
    monospace;
  white-space: nowrap;
}
.connectivity-row.good .connectivity-dot {
  background: var(--bull);
}
.connectivity-row.good strong {
  color: var(--bull);
}
.connectivity-row.warn .connectivity-dot {
  background: var(--warn);
}
.connectivity-row.warn strong {
  color: var(--warn);
}
.connectivity-row.bad .connectivity-dot {
  background: var(--bear);
}
.connectivity-row.bad strong {
  color: var(--bear);
}
.connectivity-row.testing .connectivity-dot {
  background: var(--warn);
  animation: live-pulse 1s ease-in-out infinite;
}
.connectivity-panel > p {
  margin: 8px 2px 0;
  color: var(--text-muted);
  font-size: 9px;
}
/* 分组：把同类数据链路收进可折叠小节，API 增多也不撑爆面板。
   Groups: related data paths collapse into sections so the panel stays compact. */
.connectivity-group {
  border-bottom: 1px solid var(--border-subtle);
}
.connectivity-group:last-child {
  border-bottom: 0;
}
.connectivity-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  min-height: 0;
  padding: 9px 4px 7px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  color: var(--text-secondary);
  font: 700 11.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}
.connectivity-group-head:hover {
  color: var(--accent-cyan);
}
.connectivity-group-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.connectivity-group-title::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  opacity: 0.65;
  transition: transform 0.16s ease;
}
.connectivity-group.collapsed .connectivity-group-title::before {
  transform: rotate(0deg);
}
.connectivity-group:not(.collapsed) .connectivity-group-title::before {
  transform: rotate(90deg);
}
.connectivity-group-badge {
  flex: none;
  font: 800 10px "SF Mono", ui-monospace, monospace;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  white-space: nowrap;
}
.connectivity-group-badge.good {
  background: rgba(0, 212, 170, 0.16);
  color: var(--bull);
}
.connectivity-group-badge.warn {
  background: rgba(255, 176, 32, 0.16);
  color: var(--warn);
}
.connectivity-group-badge.bad {
  background: rgba(255, 77, 106, 0.16);
  color: var(--bear);
}
.connectivity-group-body {
  display: block;
  padding: 0 0 6px;
}
.connectivity-group.collapsed .connectivity-group-body {
  display: none;
}
html[data-theme="light"] .connectivity-panel {
  border-color: rgba(64, 88, 119, 0.22);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(236, 243, 250, 0.98)
  );
  box-shadow:
    inset 0 1px 0 #fff,
    0 20px 50px rgba(38, 57, 82, 0.24);
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .connectivity-panel {
    border-color: rgba(64, 88, 119, 0.22);
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(236, 243, 250, 0.98)
    );
    box-shadow:
      inset 0 1px 0 #fff,
      0 20px 50px rgba(38, 57, 82, 0.24);
  }
}
@media (max-width: 640px) {
  .connectivity-panel {
    position: fixed;
    top: 82px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 96px);
    overflow: auto;
    transform: none;
  }
  .connectivity-row > div {
    grid-template-columns: 1fr;
  }
  .connectivity-row small,
  .connectivity-row em {
    grid-column: 1;
  }
}

/* Right-side indicator card: contextual confirmation rather than a raw list. */
.trade-confirmation-metrics {
  display: block;
}
.trade-confirmation-row {
  grid-template-columns: minmax(92px, 1fr) auto auto !important;
  gap: 8px !important;
}
.trade-confirmation-row > small {
  grid-column: 1/4;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}
.trade-decision {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--text-muted);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.trade-decision > span {
  color: var(--text-muted);
  font-size: 10px;
}
.trade-decision > b {
  justify-self: start;
  grid-column: 1/-1;
  font-size: 22px;
  line-height: 1.1;
}
.trade-decision > p {
  grid-column: 1/3;
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.trade-decision.bull {
  border-left-color: var(--bull);
}
.trade-decision.bull > b {
  color: var(--bull);
}
.trade-decision.bear {
  border-left-color: var(--bear);
}
.trade-decision.bear > b {
  color: var(--bear);
}
@media (max-width: 680px) {
  .trade-confirmation-row {
    grid-template-columns: 1fr auto auto !important;
  }
  .trade-confirmation-row > small {
    font-size: 9px;
  }
}

/* Compact two-column grid keeps the details card level with the chart. */
#indicators.indicator-adaptive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  align-content: start;
  --indicator-font-scale: 1;
}
#indicators.indicator-adaptive-grid .compact-indicator {
  min-width: 0;
  padding: calc(9px * var(--indicator-font-scale)) 0;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: calc(7px * var(--indicator-font-scale)) !important;
}
#indicators.indicator-adaptive-grid .compact-indicator span {
  min-width: 0;
  font-size: calc(13px * var(--indicator-font-scale));
  white-space: nowrap;
}
#indicators.indicator-adaptive-grid .compact-indicator b {
  font-size: calc(14px * var(--indicator-font-scale));
  white-space: nowrap;
}
#indicators.indicator-adaptive-grid .compact-indicator .badge {
  font-size: calc(10px * var(--indicator-font-scale));
  padding: calc(3px * var(--indicator-font-scale))
    calc(6px * var(--indicator-font-scale));
  white-space: nowrap;
}
#indicators.indicator-adaptive-grid .trade-decision {
  grid-column: 1/-1;
  margin-top: calc(9px * var(--indicator-font-scale));
  padding: calc(10px * var(--indicator-font-scale));
}
#indicators.indicator-adaptive-grid .trade-decision > span,
#indicators.indicator-adaptive-grid .trade-decision > p {
  font-size: calc(10px * var(--indicator-font-scale));
}
#indicators.indicator-adaptive-grid .trade-decision > b {
  font-size: calc(22px * var(--indicator-font-scale));
  line-height: 1.1;
}
#indicators.indicator-adaptive-grid .indicator-neutral-group {
  grid-column: 1/-1;
  margin-top: 2px;
}
#indicators.indicator-adaptive-grid .indicator-neutral-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: calc(12px * var(--indicator-font-scale));
  cursor: pointer;
}
#indicators.indicator-adaptive-grid .indicator-neutral-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
#indicators.indicator-adaptive-grid .indicator-neutral-toggle b {
  font-size: inherit;
  font-weight: 600;
}
#indicators.indicator-adaptive-grid .indicator-neutral-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  margin-top: 5px;
}
#indicators.indicator-adaptive-grid .indicator-neutral-grid[hidden] {
  display: none !important;
}
#indicators.indicator-adaptive-grid .indicator-neutral-grid.is-collapsed {
  display: none !important;
}
@media (max-width: 760px) {
  #indicators.indicator-adaptive-grid .indicator-neutral-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  #indicators.indicator-adaptive-grid {
    grid-template-columns: 1fr;
  }
  #indicators.indicator-adaptive-grid .trade-decision {
    grid-column: auto;
  }
}

/* The sidebar can become narrow while the overall viewport remains wide.
   Respond to the card's own width rather than the window width. */
.card:has(#indicators.indicator-adaptive-grid) {
  container-type: inline-size;
}
@container (max-width:480px) {
  #indicators.indicator-adaptive-grid {
    grid-template-columns: 1fr;
  }
  #indicators.indicator-adaptive-grid .trade-decision {
    grid-column: auto;
  }
}
@container (max-width:420px) {
  #indicators.indicator-adaptive-grid .compact-indicator {
    gap: 5px !important;
  }
  #indicators.indicator-adaptive-grid .compact-indicator span {
    font-size: 11px;
  }
  #indicators.indicator-adaptive-grid .compact-indicator b {
    font-size: 12px;
  }
  #indicators.indicator-adaptive-grid .compact-indicator .badge {
    font-size: 9px;
    padding: 2px 5px;
  }
}

/* Pattern explanations must float above adjacent cards instead of being clipped. */
.pattern-analysis-card,
.pattern-analysis-card .pattern-head,
.pattern-analysis-card .pattern-grid,
.pattern-analysis-card .pattern-grid article,
.pattern-analysis-card .pattern-levels,
.pattern-analysis-card .pattern-levels span {
  overflow: visible !important;
}
.pattern-analysis-card {
  isolation: isolate;
  z-index: 2;
}
.pattern-analysis-card .help-dot {
  position: relative;
  z-index: 30;
}
.pattern-analysis-card .help-dot:focus:after,
.pattern-analysis-card .help-dot:hover:after {
  z-index: 200;
}

/* Connectivity diagnostics present the browser route and upstream route separately. */
.connectivity-row strong {
  display: grid;
  justify-items: end;
  font:
    800 10px "SF Mono",
    monospace;
  line-height: 1.35;
  white-space: nowrap;
}
.connectivity-row strong small {
  color: var(--text-muted);
  font:
    8.5px "SF Mono",
    monospace;
}
.connectivity-row.good strong > span {
  color: var(--bull);
}
.connectivity-row.warn strong > span {
  color: var(--warn);
}
.connectivity-row.bad strong > span {
  color: var(--bear);
}
#fullscreenToggle {
  min-width: 72px;
  white-space: nowrap;
}
/* 全屏模式下把页面顶部的 <header> 也藏起来（标题/账户/全屏按钮等）。
   由 app.js 的 syncFullscreenButton 在 fullscreenchange 时同步 .is-fullscreen
   class；ESC 退出全屏时浏览器会自动撤掉全屏并触发回调，header 自然回来。
   用 :fullscreen 伪类做兜底，防止 JS 未加载时也能生效。 */
html:fullscreen header,
html:fullscreen #marketClocks,
html.is-fullscreen > main > header,
html.is-fullscreen #marketClocks {
  display: none !important;
}
html:fullscreen,
html.is-fullscreen {
  /* 关掉页面级外边距，避免全屏时上下出现意外空隙 */
  background: var(--bg-app, #050816);
}

/* 恐惧贪婪仪表盘是低频市场环境面板，应保持稳定尺寸以避免加载跳动。
   The fear-and-greed gauge is a slow-moving context panel. Keep the
   compact indicator row hidden so sentiment has one clear visual home. */
.sentiment-indicator {
  display: none !important;
}
.fear-greed-gauge-card {
  grid-column: 1/-1;
  padding: 24px 28px 20px;
  overflow: hidden;
}
.fear-greed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.fear-greed-head h2 {
  margin: 0;
}
.fear-greed-head p {
  margin: 7px 0 0;
  color: var(--text-muted);
}
.fear-greed-head > span {
  font:
    700 12px "SF Mono",
    monospace;
  color: var(--text-muted);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.fear-greed-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(250px, 0.9fr);
  align-items: center;
  gap: 26px;
  margin-top: 6px;
}
.fear-greed-dial {
  position: relative;
  max-width: 470px;
  margin: auto;
  width: 100%;
}
.fear-greed-dial svg {
  display: block;
  width: 100%;
  height: auto;
}
.fear-greed-arc {
  fill: none;
  stroke: url(#fearGreedGradient);
  stroke-width: 7;
  stroke-linecap: round;
}
.fear-greed-tick {
  stroke: #617080;
  stroke-width: 2;
  opacity: 0.85;
}
.fear-greed-tick.major {
  stroke: #d7e1ed;
  stroke-width: 3;
}
.fear-greed-pointer {
  stroke: #f5f8fc;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.fear-greed-hub {
  fill: #f7fbff;
  stroke: #273b52;
  stroke-width: 3;
}
.fear-greed-reading {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 3px;
}
.fear-greed-reading strong {
  font:
    800 48px "SF Mono",
    monospace;
  letter-spacing: -2px;
  color: #f2f6fb;
}
.fear-greed-reading b {
  font-size: 21px;
}
.fear-greed-gauge-card.bull .fear-greed-reading b {
  color: var(--bull);
}
.fear-greed-gauge-card.bear .fear-greed-reading b {
  color: var(--bear);
}
.fear-greed-gauge-card.flat .fear-greed-reading b {
  color: var(--warn);
}
.fear-greed-summary {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.fear-greed-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.fear-greed-summary div:last-child {
  border-bottom: 0;
}
.fear-greed-summary span {
  color: var(--text-muted);
  font-weight: 700;
}
.fear-greed-summary b {
  font:
    700 12px "SF Mono",
    monospace;
  color: var(--text);
}
.fear-greed-gauge-card footer {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.fear-greed-gauge-card footer em {
  font-style: normal;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
html[data-theme="light"] .fear-greed-reading strong {
  color: #1d2b3b;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .fear-greed-reading strong {
    color: #1d2b3b;
  }
}
@media (max-width: 760px) {
  .fear-greed-gauge-card {
    padding: 20px 16px;
  }
  .fear-greed-head {
    display: block;
  }
  .fear-greed-head > span {
    display: inline-block;
    margin-top: 10px;
  }
  .fear-greed-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .fear-greed-dial {
    max-width: 390px;
  }
  .fear-greed-summary {
    grid-template-columns: 1fr 1fr;
  }
  .fear-greed-summary div:nth-last-child(1) {
    grid-column: 1/-1;
  }
  .fear-greed-summary div:nth-child(odd) {
    border-right: 1px solid var(--border);
  }
}

.fed-monitor-card {
  padding: 22px 28px;
}
.fed-monitor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.fed-monitor-head h2 {
  margin: 0;
}
.fed-monitor-head p {
  margin: 7px 0 0;
  color: var(--text-muted);
}
.fed-monitor-head > span {
  font:
    700 12px "SF Mono",
    monospace;
  color: var(--text-muted);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.fed-event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 17px;
}
.fed-event {
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  display: grid;
  gap: 6px;
}
.fed-event.near {
  border-color: rgba(255, 190, 71, 0.65);
  box-shadow: inset 3px 0 0 var(--warn);
}
.fed-event span {
  font-weight: 800;
  color: var(--text-muted);
}
.fed-event b {
  font:
    800 17px "SF Mono",
    monospace;
  color: var(--text);
}
.fed-event strong {
  font-size: 14px;
  color: var(--bull);
}
.fed-event.near strong {
  color: var(--warn);
}
.fed-event small {
  color: var(--text-muted);
}
.fed-monitor-card footer {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.fed-monitor-card footer em {
  font-style: normal;
  margin-left: 8px;
  font-weight: 700;
  color: var(--text);
}
@media (max-width: 760px) {
  .fed-monitor-card {
    padding: 20px 16px;
  }
  .fed-monitor-head {
    display: block;
  }
  .fed-monitor-head > span {
    display: inline-block;
    margin-top: 10px;
  }
  .fed-event-grid {
    grid-template-columns: 1fr;
  }
  .fed-event {
    grid-template-columns: 1fr auto;
  }
  .fed-event small {
    grid-column: 1/-1;
  }
}

.fed-market-panel {
  margin: 19px 0 15px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-subtle);
}
.fed-market-panel > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fed-market-panel h3 {
  margin: 0;
  font-size: 15px;
  color: var(--text-primary);
}
.fed-market-panel > div:first-child > span {
  color: var(--text-muted);
  font-size: 11px;
}
.fed-market-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.fed-market-signal {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 5px 10px;
  padding: 13px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-surface-2);
}
.fed-market-signal > span {
  color: var(--text-secondary);
  font-weight: 700;
}
.fed-market-signal > b {
  font:
    800 14px "SF Mono",
    monospace;
}
.fed-market-signal > strong {
  grid-column: 1/-1;
  color: var(--text-primary);
  font:
    800 20px "SF Mono",
    monospace;
  letter-spacing: -0.7px;
}
.fed-market-signal small {
  grid-column: 1/-1;
  color: var(--text-muted);
  font-size: 10px;
}
.fed-market-signal.unavailable {
  opacity: 0.8;
}
.fed-market-signal.unavailable strong {
  font:
    700 15px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0;
}
.fed-market-signal.unavailable small {
  line-height: 1.35;
}
.macro-update-age {
  color: var(--text-muted) !important;
  font:
    9px/1.3 "SF Mono",
    "JetBrains Mono",
    monospace !important;
  letter-spacing: 0;
}
.macro-update-age:before {
  content: "◷ ";
  color: var(--accent-cyan);
}
@media (max-width: 980px) {
  .fed-market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .fed-market-panel > div:first-child {
    display: block;
  }
  .fed-market-panel > div:first-child > span {
    display: block;
    margin-top: 5px;
  }
  .fed-market-grid {
    grid-template-columns: 1fr;
  }
  .fed-market-signal > strong {
    font-size: 19px;
  }
}

/* Light theme readability: override only the earlier dark-surface literals.
   Dark mode keeps its existing palette and contrast unchanged. */
html[data-theme="light"] .card h2,
html[data-theme="light"] .forecast-head h2,
html[data-theme="light"] .pattern-head h2,
html[data-theme="light"] .position-head h2,
html[data-theme="light"] .liq-prob-head h2,
html[data-theme="light"] .liq-prob-head h3 {
  color: #1f334a;
}
html[data-theme="light"] .levels,
html[data-theme="light"] .levels span,
html[data-theme="light"] .gauge-top span,
html[data-theme="light"] .gauge-strength span {
  color: #40566f;
}
html[data-theme="light"] .levels b {
  color: #162235;
}
html[data-theme="light"] p,
html[data-theme="light"] .pattern-grid small,
html[data-theme="light"] .pattern-levels small,
html[data-theme="light"] .pattern-grid b i,
html[data-theme="light"] .forecast-item small,
html[data-theme="light"] .vol-item small,
html[data-theme="light"] .horizon-forecasts span,
html[data-theme="light"] .horizon-forecasts small,
html[data-theme="light"] .lev-row span,
html[data-theme="light"] .liq-prob-output small {
  color: #536a83;
}
html[data-theme="light"] .chart-caption,
html[data-theme="light"] .chart-pattern-legend,
html[data-theme="light"] .fixed-rule-basis,
html[data-theme="light"] .signal-projection > span,
html[data-theme="light"] .signal-projection small {
  color: #526a83;
}
html[data-theme="light"] .help-dot:after {
  color: #f7fbff;
  background: #17263b;
  border-color: #52708e;
  box-shadow: 0 10px 24px rgba(27, 45, 67, 0.28);
}
html[data-theme="light"] #chartTooltip {
  color: #d8e2ee;
  border-color: #7892ae;
  background: rgba(28, 36, 48, 0.78) !important;
  box-shadow: 0 10px 28px rgba(43, 64, 88, 0.3);
}
html[data-theme="light"] #chartTooltip b {
  color: #fff;
}
html[data-theme="light"] #chartTooltip .chart-live-price {
  background: rgba(255, 255, 255, 0.16);
  color: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-theme="light"] #chartTooltip .chart-live-price .bull {
  color: #35dfb8;
}
html[data-theme="light"] #chartTooltip .chart-live-price .bear {
  color: #ff8193;
}
html[data-theme="light"] #selectionOverlay b {
  color: #18314d;
}
html[data-theme="light"] .range-extreme {
  background: rgba(20, 32, 48, 0.96) !important;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .card h2,
  html[data-theme="auto"] .forecast-head h2,
  html[data-theme="auto"] .pattern-head h2,
  html[data-theme="auto"] .position-head h2,
  html[data-theme="auto"] .liq-prob-head h2,
  html[data-theme="auto"] .liq-prob-head h3 {
    color: #1f334a;
  }
  html[data-theme="auto"] .levels,
  html[data-theme="auto"] .levels span,
  html[data-theme="auto"] .gauge-top span,
  html[data-theme="auto"] .gauge-strength span {
    color: #40566f;
  }
  html[data-theme="auto"] .levels b {
    color: #162235;
  }
  html[data-theme="auto"] p,
  html[data-theme="auto"] .pattern-grid small,
  html[data-theme="auto"] .pattern-levels small,
  html[data-theme="auto"] .pattern-grid b i,
  html[data-theme="auto"] .forecast-item small,
  html[data-theme="auto"] .vol-item small,
  html[data-theme="auto"] .horizon-forecasts span,
  html[data-theme="auto"] .horizon-forecasts small,
  html[data-theme="auto"] .lev-row span,
  html[data-theme="auto"] .liq-prob-output small {
    color: #536a83;
  }
  html[data-theme="auto"] .chart-caption,
  html[data-theme="auto"] .chart-pattern-legend,
  html[data-theme="auto"] .fixed-rule-basis,
  html[data-theme="auto"] .signal-projection > span,
  html[data-theme="auto"] .signal-projection small {
    color: #526a83;
  }
  html[data-theme="auto"] .help-dot:after {
    color: #f7fbff;
    background: #17263b;
    border-color: #52708e;
    box-shadow: 0 10px 24px rgba(27, 45, 67, 0.28);
  }
  html[data-theme="auto"] #chartTooltip {
    color: #d8e2ee;
    border-color: #7892ae;
    background: rgba(28, 36, 48, 0.78) !important;
    box-shadow: 0 10px 28px rgba(43, 64, 88, 0.3);
  }
  html[data-theme="auto"] #chartTooltip b {
    color: #fff;
  }
  html[data-theme="auto"] #chartTooltip .chart-live-price {
    background: rgba(255, 255, 255, 0.16);
    color: #f8fbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  html[data-theme="auto"] #chartTooltip .chart-live-price .bull {
    color: #35dfb8;
  }
  html[data-theme="auto"] #chartTooltip .chart-live-price .bear {
    color: #ff8193;
  }
  html[data-theme="auto"] #selectionOverlay {
    background: rgba(248, 251, 255, 0.45);
  }
  html[data-theme="auto"] #selectionOverlay b {
    color: #18314d;
  }
  html[data-theme="auto"] .range-extreme {
    background: rgba(20, 32, 48, 0.96) !important;
  }
}

/* 个人买入价：默认以报价形式展示，双击数字后才进入编辑 / Personal entry price: a quote-like display until its number is double-clicked. */
.personal-entry-card {
  flex: 1 1 250px;
  min-width: 220px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 7px 18px;
  border-left: 1px solid var(--border-subtle);
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.personal-entry-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font:
    700 11px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.personal-side-picker {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-style: normal;
}
.personal-side-picker button {
  min-height: 0;
  padding: 2px 6px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--text-muted) !important;
  font:
    700 9px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0;
  box-shadow: none !important;
}
.personal-side-picker button.active[data-entry-side="long"] {
  background: rgba(0, 212, 170, 0.16) !important;
  color: var(--bull) !important;
}
.personal-side-picker button.active[data-entry-side="short"] {
  background: rgba(255, 77, 106, 0.16) !important;
  color: var(--bear) !important;
}
.personal-entry-value {
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0;
  color: var(--text-primary) !important;
  font:
    800 26px/1.08 "SF Mono",
    "JetBrains Mono",
    monospace;
  letter-spacing: -1.3px;
  cursor: text;
  box-shadow: none !important;
}
.personal-entry-value:hover {
  color: var(--accent-cyan) !important;
}
.personal-entry-card > small {
  color: var(--text-muted);
  font:
    11px/1.25 ui-sans-serif,
    system-ui,
    sans-serif;
}
.personal-entry-card > b {
  font:
    800 15px/1.2 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.personal-entry-card > b i {
  margin-right: 6px;
  font:
    700 10px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.02em;
}
.personal-entry-card > b em {
  font: inherit;
  font-style: normal;
  margin-left: 5px;
}
.personal-entry-card.profit > b {
  color: var(--bull);
}
.personal-entry-card.loss > b {
  color: var(--bear);
}
.personal-entry-card.empty .personal-entry-value {
  color: var(--text-muted) !important;
}
.personal-entry-card input {
  width: 100%;
  min-width: 0;
  padding: 5px 0 6px;
  border: 0;
  border-bottom: 2px solid var(--accent-cyan);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  outline: 0;
  font:
    800 26px/1.08 "SF Mono",
    "JetBrains Mono",
    monospace;
  letter-spacing: -1.3px;
}
.personal-entry-card input::placeholder {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text-muted);
}
/* 持仓编辑表单：持仓量 / 保证金 / 杠杆 / 开仓均价 四个字段一行排布。 */
.personal-entry-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.personal-entry-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.personal-entry-form label small {
  color: var(--text-muted);
  font:
    600 9px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.personal-entry-form .personal-entry-input {
  width: 100%;
  min-width: 0;
  padding: 2px 0 3px;
  border: 0;
  border-bottom: 1.5px solid var(--accent-cyan);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  outline: 0;
  font:
    600 12px/1.2 "SF Mono",
    "JetBrains Mono",
    monospace;
  letter-spacing: -0.2px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.personal-entry-form .personal-entry-input::placeholder {
  font-size: 11px;
  letter-spacing: 0;
}
/* 保存 / 取消 / 清除 按钮行。 */
.personal-entry-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.personal-entry-btn {
  min-height: 0;
  padding: 3px 12px;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font:
    700 10px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  cursor: pointer;
}
.personal-entry-btn:hover {
  color: var(--text-primary) !important;
  border-color: var(--accent-cyan) !important;
}
.personal-entry-btn.primary {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}
.personal-entry-btn.danger {
  color: var(--bear) !important;
}
.personal-entry-btn.danger:hover {
  border-color: var(--bear) !important;
}
.personal-entry-form .personal-entry-input::-webkit-outer-spin-button,
.personal-entry-form .personal-entry-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 680px) {
  .personal-entry-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
@media (max-width: 1320px) {
  .personal-entry-card {
    order: 3;
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding: 12px 4px 0;
  }
  .hero {
    align-items: flex-start;
  }
}
@media (max-width: 680px) {
  .personal-entry-card {
    min-width: 0;
    flex-basis: 100%;
  }
  .personal-entry-value,
  .personal-entry-card input {
    font-size: 26px;
  }
}

/* Keep the live quote on one visual line at desktop widths; its metadata is
   intentionally compact so it no longer breaks the amount into two rows. */
@media (min-width: 1321px) {
  .hero > div:first-child {
    min-width: 530px;
  }
  .hero #change {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 18px;
    gap: 9px;
  }
  .hero #change .change-pct {
    font-size: 16px;
  }
  #priceTime,
  #priceSource {
    font-size: 9px;
  }
}
.personal-entry-value,
.personal-entry-card input {
  font-size: 23px;
  letter-spacing: -1.1px;
}
.personal-entry-card > b {
  font-size: 14px;
}
.personal-entry-card > b i {
  font-size: 9px;
}
@media (max-width: 680px) {
  .personal-entry-value,
  .personal-entry-card input {
    font-size: 23px;
  }
}
.personal-entry-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.personal-entry-status {
  font:
    700 10px ui-sans-serif,
    system-ui,
    sans-serif;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.personal-entry-card.profit .personal-entry-status {
  color: var(--bull);
}
.personal-entry-card.loss .personal-entry-status {
  color: var(--bear);
}

/* Phone-first reading order and touch layout.  Desktop composition deliberately
   stays untouched; these rules activate only for handset-width screens. */
@media (max-width: 760px) {
  main {
    padding: 14px 12px 30px;
    overflow: hidden;
  }
  header {
    display: grid;
    gap: 11px;
    padding: 0 2px 13px;
  }
  header h1 {
    font-size: 18px;
    line-height: 1.2;
  }
  header p {
    margin-top: 4px;
    font-size: 10px;
  }
  .controls {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 7px;
    border-radius: 10px;
  }
  .controls label {
    flex: 1 1 120px;
    min-width: 120px;
  }
  .controls select {
    width: 100%;
    min-height: 36px;
  }
  .controls button {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 11px;
  }
  .controls #langToggle {
    min-width: 52px;
  }
  .controls #themeToggle {
    min-width: 68px;
  }
  .controls #fullscreenToggle {
    min-width: 60px;
  }
  #appVersion {
    order: -1;
    font-size: 10px;
    padding: 5px 7px;
  }
  #marketClocks {
    margin: 0 2px 9px;
    line-height: 1.4;
  }
  .hero {
    display: grid;
    gap: 13px;
    padding: 13px 3px 16px;
  }
  .hero .muted {
    font-size: 10px;
  }
  .hero strong {
    font-size: 36px;
    letter-spacing: -1.8px;
  }
  .hero #change {
    margin-top: 7px;
    font-size: 18px;
    gap: 8px;
  }
  .hero #change .change-pct {
    font-size: 15px;
  }
  .personal-entry-card {
    order: 0;
    padding: 11px 0 0;
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }
  #exchangeMeta {
    order: 2;
    max-width: none;
    min-width: 0;
    width: 100%;
    margin-top: 0;
  }
  .exchange-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 9px;
    padding: 7px 0;
    font-size: 10px;
    line-height: 1.35;
  }
  .exchange-row span {
    overflow-wrap: anywhere;
  }
  .exchange-row span:first-child {
    grid-column: 1/-1;
  }
  .terminal-layout.mobile-reading-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
  }
  .terminal-layout.mobile-reading-layout > .card {
    width: 100%;
    margin: 0;
  }
  .terminal-layout.mobile-reading-layout > .side-stack[hidden] {
    display: none;
  }
  #ruleSignalCard {
    padding: 16px;
  }
  .side-stack .card:first-child {
    min-height: 0;
  }
  #ruleSignalCard .signal {
    font-size: 34px;
  }
  .signal-gauge {
    margin-top: 11px;
  }
  .levels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .levels span:last-child {
    text-align: right;
  }
  .chart-box {
    height: min(56vh, 355px);
    min-height: 285px;
    margin: 0 -5px;
    border-radius: 8px;
  }
  .toolbar {
    display: block;
    margin-bottom: 9px;
  }
  .toolbar #intervals,
  .toolbar #ranges {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .toolbar #intervals::-webkit-scrollbar,
  .toolbar #ranges::-webkit-scrollbar {
    display: none;
  }
  .toolbar #intervals button,
  .toolbar #ranges button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 10px;
  }
  .toolbar #ranges {
    margin-top: 7px;
  }
  .toolbar .control-label {
    flex: 0 0 auto;
  }
  .zoom-tools {
    width: 100%;
    margin: 8px 0 0 !important;
    justify-content: flex-end;
  }
  .zoom-tools button {
    min-height: 34px !important;
  }
  .chart-caption {
    padding-top: 10px;
    line-height: 1.55;
  }
  #indicatorDetailsCard {
    margin: 14px 0 0;
    padding: 16px;
  }
  #indicators.indicator-adaptive-grid .compact-indicator {
    padding: 10px 0;
  }
  #periodChangeCard {
    margin: 14px 0 0;
    padding: 16px;
  }
  .forecast-card,
  .optional,
  .correlation-card,
  .leverage-card,
  .fed-monitor-card,
  .fear-greed-gauge-card {
    margin-top: 14px !important;
  }
  .forecast-head,
  .fed-monitor-head {
    display: block;
  }
  .forecast-head button {
    margin-top: 11px;
    width: 100%;
    min-height: 40px;
  }
  .forecast-grid {
    gap: 7px;
  }
  .forecast-item {
    padding: 9px;
  }
  .forecast-item b {
    font-size: 14px;
  }
  .optional {
    display: grid;
    gap: 10px;
  }
  .optional button {
    width: 100%;
    min-height: 40px;
  }
  .pattern-head {
    display: block !important;
  }
  .pattern-state {
    display: block;
    margin-top: 10px;
    white-space: normal !important;
    line-height: 1.45;
  }
  .pattern-grid,
  .pattern-levels {
    grid-template-columns: 1fr !important;
  }
  .pattern-grid article,
  .pattern-levels span {
    min-width: 0;
  }
  .fed-market-grid {
    grid-template-columns: 1fr;
  }
  .fed-event-grid {
    grid-template-columns: 1fr;
  }
  .fear-greed-reading strong {
    font-size: 42px;
  }
  .fear-greed-reading b {
    font-size: 18px;
  }
  .correlation-output,
  .index-ticker-cards {
    grid-template-columns: 1fr;
  }
  .leverage-grid {
    overflow-x: auto;
  }
  .lev-row {
    min-width: 510px;
  }
  footer {
    font-size: 10px;
    line-height: 1.55;
  }
}

/* 宽屏桌面端将顶部和双栏仪表盘保持在同一容器节奏中。
   On wide desktop screens, keep the header and the two-column dashboard on
   one shared edge-to-edge canvas instead of stopping the dashboard at an
   earlier max-width and leaving a detached dark strip on the right. */
@media (min-width: 1025px) {
  main {
    width: calc(100% - 48px) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  main > header,
  .terminal-layout,
  #periodChangeCard,
  .pattern-analysis-card {
    max-width: none !important;
  }
}

.fear-greed-unavailable {
  display: grid;
  gap: 7px;
  min-height: 150px;
  place-content: center;
  padding: 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--bg-surface-2);
  text-align: center;
}
.fear-greed-unavailable b {
  color: var(--text-primary);
  font-size: 16px;
}
.fear-greed-unavailable p {
  max-width: 420px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}
.fear-greed-unavailable.is-error {
  border-color: rgba(255, 77, 106, 0.5);
}
.fear-greed-retry {
  justify-self: center;
  min-width: 86px;
  padding: 7px 12px;
  border: 1px solid var(--accent-cyan);
  border-radius: 7px;
  background: rgba(34, 211, 238, 0.08);
  color: var(--accent-cyan);
  font-weight: 700;
  cursor: pointer;
}
.fear-greed-retry:hover {
  background: rgba(34, 211, 238, 0.16);
  color: var(--text-primary);
}

/* A resizable browser often lands between phone and desktop widths.  Treat
   that range as a readable single-column dashboard rather than squeezing the
   chart, signal and indicator cards into a horizontal overflow strip. */
/* Prevent the detailed-indicator grid from imposing a fixed minimum width on
   the right column when labels and values are both present. */
#indicatorDetailsCard,
#indicatorDetailsCard .metrics,
#indicatorDetailsCard #indicators {
  min-width: 0;
}
#indicatorDetailsCard .metric {
  min-width: 0;
}
#indicatorDetailsCard .metric b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1800px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  main {
    width: 100% !important;
    max-width: none !important;
    padding: 18px 16px 30px !important;
  }
  main > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    border-radius: 28px;
    padding: 12px 14px !important;
  }
  main > header > div:first-child {
    min-width: 0;
  }
  main > header .controls {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    gap: 7px;
  }
  main > header .controls label {
    flex: 0 1 auto;
  }
  .hero {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero > div:first-child {
    min-width: 0 !important;
  }
  #exchangeMeta {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .terminal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }
  .terminal-layout > .side-stack {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }
  .terminal-layout > .side-stack > .card {
    min-width: 0 !important;
  }
  .terminal-layout > .side-stack > .card:first-child,
  .terminal-layout > .side-stack > .card:nth-child(2) {
    min-height: 0 !important;
    height: auto !important;
  }
  .chart-box {
    height: 440px;
  }
}
@media (max-width: 760px) {
  .chart-box {
    height: 315px;
  }
  main > header .controls button,
  main > header .controls select {
    font-size: 12px;
  }
}
@media (max-width: 390px) {
  main {
    padding-inline: 10px;
  }
  .hero strong {
    font-size: 33px;
  }
  .controls {
    gap: 5px;
  }
  .controls button {
    padding-inline: 7px;
  }
  #ruleSignalCard .signal {
    font-size: 31px;
  }
  .chart-box {
    height: 295px;
    min-height: 270px;
  }
  .personal-entry-value,
  .personal-entry-card input {
    font-size: 21px;
  }
  .personal-entry-card > b {
    font-size: 13px;
  }
}

/* OKX 公开衍生品证据独立成卡片，不与技术指标混排，便于区分数据性质。
   Public OKX derivatives evidence gets its own card rather than being mixed
   into the technical-indicator list. */
.okx-microstructure-card {
  margin-top: 18px;
  padding: 20px 22px;
}
.microstructure-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.microstructure-head h2 {
  margin: 0;
}
.microstructure-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.microstructure-head > span {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 999px;
  color: var(--accent-cyan);
  font:
    700 10px "SF Mono",
    monospace;
}
.microstructure-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 15px;
}
.microstructure-item {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
}
.microstructure-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.microstructure-item span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.microstructure-item b {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font:
    800 14px/1.2 "SF Mono",
    monospace;
  letter-spacing: -0.35px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.microstructure-item small {
  min-height: 29px;
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.4;
}
.microstructure-item > .help-dot {
  position: absolute;
  right: 9px;
  bottom: 8px;
  opacity: 0.7;
}
.microstructure-item.bull {
  border-top-color: rgba(0, 212, 170, 0.48);
}
.microstructure-item.bear {
  border-top-color: rgba(255, 77, 106, 0.48);
}
.microstructure-conclusion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--text-muted);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.microstructure-conclusion > span {
  color: var(--text-muted);
  font-size: 10px;
}
.microstructure-conclusion > b {
  font-size: 17px;
  justify-self: start;
}
.microstructure-conclusion p {
  grid-column: 1/-1;
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.microstructure-conclusion.bull {
  border-left-color: var(--bull);
}
.microstructure-conclusion.bull > b {
  color: var(--bull);
}
.microstructure-conclusion.bear {
  border-left-color: var(--bear);
}
.microstructure-conclusion.bear > b {
  color: var(--bear);
}
@media (max-width: 1080px) {
  .microstructure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .okx-microstructure-card {
    margin-top: 14px;
    padding: 16px;
  }
  .microstructure-head {
    display: block;
  }
  .microstructure-head > span {
    display: inline-block;
    margin-top: 9px;
  }
  .microstructure-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .microstructure-item {
    padding: 11px;
  }
  .microstructure-item b {
    font-size: 13px;
  }
  .microstructure-item small {
    min-height: 0;
    padding-right: 12px;
  }
  .microstructure-conclusion {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .microstructure-conclusion p {
    font-size: 10px;
  }
}
@media (max-width: 390px) {
  .microstructure-grid {
    grid-template-columns: 1fr;
  }
  .microstructure-item small {
    font-size: 10px;
  }
}

/* Explanations are rendered in a body-level layer, so they never get clipped by
   dashboard cards or compete with chart/canvas stacking contexts. */
.help-dot:after {
  display: none !important;
}
#globalHelpTooltip {
  position: fixed;
  z-index: 2147483647;
  max-width: min(340px, calc(100vw - 24px));
  /* 长说明（共振的用法）可能高于视口：给个上限并允许在浮层内滚动，别顶出屏幕。 */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: rgba(20, 27, 37, 0.985);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
  color: var(--text-primary);
  font:
    12px/1.55 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0;
  text-align: left;
  overflow-wrap: anywhere;
  /* 允许指针停在浮层上（长说明要在里面滚动）；离开浮层由脚本收起。 */
  pointer-events: auto;
}
#globalHelpTooltip[hidden] {
  display: none;
}
.help-dot {
  position: relative !important;
  inset: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  margin: 0 0 0 5px !important;
  padding: 0 !important;
  border: 1px solid var(--accent-cyan) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--accent-cyan) !important;
  font: 700 9px/1 system-ui !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  transform: none !important;
}
.help-dot:hover,
.help-dot:focus {
  background: rgba(34, 211, 238, 0.12) !important;
  color: #dffaff !important;
}
.pattern-grid small,
.pattern-levels small {
  display: inline-flex;
  align-items: center;
  align-self: start;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.microstructure-item > div > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}
.microstructure-item > .help-dot {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
}
.change-card,
#periodChangeCard {
  min-height: 0 !important;
  height: auto !important;
  align-content: start !important;
}
.change-card > div,
#periodChangeCard > div {
  min-height: 0 !important;
  align-content: start !important;
}
@media (max-width: 560px) {
  #globalHelpTooltip {
    max-width: calc(100vw - 20px);
    font-size: 11px;
    line-height: 1.5;
  }
  .microstructure-grid {
    grid-template-columns: 1fr !important;
  }
  .microstructure-item {
    padding: 12px;
  }
  .microstructure-item small {
    min-height: 0;
    padding-right: 0;
    font-size: 10px;
  }
  .microstructure-head h2 {
    font-size: 17px;
  }
  .microstructure-head p {
    font-size: 10px;
  }
  .microstructure-conclusion {
    padding: 10px;
  }
  .microstructure-conclusion > b {
    font-size: 16px;
  }
  .chart-periods > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Keep status badges as compact pills. They must never become narrow circles
   or wrap their two-character labels onto separate lines. */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
.microstructure-item > div {
  align-items: flex-start;
}
.microstructure-item > div > .badge {
  margin-top: 0;
}

/* The detail panel should end where its real content ends.  Period returns
   follows immediately instead of inheriting the chart column's height. */
@media (min-width: 1025px) {
  .terminal-layout {
    align-items: start !important;
  }
  .terminal-layout > .side-stack {
    height: auto !important;
    grid-template-rows: auto auto !important;
  }
  .terminal-layout > .side-stack > .card:nth-child(2) {
    height: auto !important;
    min-height: 0 !important;
  }
  .terminal-layout > .side-stack > .card:nth-child(2) .metrics {
    padding-bottom: 0 !important;
  }
}

/* ATR labels keep their explanation icon beside the label rather than below
   the calculated stop/target value. */
.levels > span {
  position: relative;
}
.levels .level-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.levels .level-label + .help-dot {
  margin-left: 5px !important;
}

/* Heading-level explanations are available for slow-moving sentiment and
   market-context panels, with the same compact visual rhythm as other cards. */
.fear-greed-head h2,
.fed-monitor-head h2,
.fed-market-panel h3 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.fed-market-signal > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* 周期涨幅位于实时证据与形态分析之间，维持从短期证据到研究结论的阅读路径。
   The return strip sits between the live-evidence card and pattern analysis.
   Its cells wrap by available width rather than forcing a horizontal scroll. */
#periodChangeCard.chart-periods {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 17px 19px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  background: var(--bg-surface) !important;
}
#periodChangeCard.chart-periods h2 {
  font-size: 15px;
  margin: 0 0 12px;
}
#periodChangeCard.chart-periods > #changeTags {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
#periodChangeCard.chart-periods #changeTags span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px !important;
  border-radius: 8px;
  background: var(--bg-surface-2);
}
#periodChangeCard.chart-periods #changeTags small {
  overflow-wrap: anywhere;
  line-height: 1.35;
}
#periodChangeCard.chart-periods #changeTags b {
  font-size: 13px;
  white-space: nowrap;
}

/* A small version dropdown keeps release notes available without consuming the
   dashboard itself. */
main > header .controls #appVersion {
  cursor: pointer;
  font:
    700 10px/1 "SF Mono",
    monospace;
}
#versionChangelog {
  position: fixed;
  z-index: 2147483646;
  top: 76px;
  right: 22px;
  width: min(480px, calc(100vw - 28px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: rgba(20, 27, 37, 0.985);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.48);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.55;
}
#versionChangelog[hidden] {
  display: none;
}
#versionChangelog > b {
  color: var(--accent-cyan);
}
#versionChangelog ol {
  margin: 7px 0 0;
  padding-left: 20px;
  color: var(--text-secondary);
}
#versionChangelog li + li {
  margin-top: 6px;
}
#versionChangelog hr {
  margin: 13px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
#versionChangelog dl {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 7px 10px;
  color: var(--text-secondary);
}
#versionChangelog dt {
  font-weight: 700;
  color: var(--text-primary);
}
#versionChangelog dd {
  margin: 0;
}
#versionChangelog .legacy-release {
  margin-top: 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}
#versionChangelog .legacy-release summary {
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 700;
  list-style: none;
}
#versionChangelog .legacy-release summary::-webkit-details-marker {
  display: none;
}
#versionChangelog .legacy-release summary:before {
  content: "›";
  display: inline-block;
  margin-right: 7px;
  color: var(--accent-cyan);
  font-size: 16px;
  line-height: 0.6;
  transform: translateY(1px);
}
#versionChangelog .legacy-release[open] summary {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
#versionChangelog .legacy-release[open] summary:before {
  transform: rotate(90deg) translateX(1px);
}
#versionChangelog .legacy-release dl {
  padding: 0 10px 10px;
  margin-top: 9px;
}
@media (max-width: 760px) {
  #periodChangeCard.chart-periods {
    margin: 0 !important;
    padding: 15px !important;
  }
  #periodChangeCard.chart-periods > #changeTags {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }
  #periodChangeCard.chart-periods #changeTags span {
    padding: 8px !important;
  }
  #versionChangelog {
    top: 70px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}
@media (max-width: 360px) {
  #periodChangeCard.chart-periods > #changeTags {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
}

/* 顶部与两列仪表盘共用同一桌面框架，避免各列边缘错位。
   Keep the header and both dashboard columns inside one shared desktop frame.
   The right stack must not create a second, wider visual edge. */
main {
  width: min(calc(100% - 48px), 1520px) !important;
  max-width: 1520px !important;
  margin-inline: auto !important;
}
main > header,
.terminal-layout {
  width: 100%;
  min-width: 0;
}
.terminal-layout {
  grid-template-columns: minmax(0, 68fr) minmax(360px, 32fr) !important;
}
.terminal-layout > .side-stack {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Tiny evidence cards retain one-line labels and compact status pills. */
.microstructure-item > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px !important;
}
.microstructure-item > div > span {
  min-width: 0;
  overflow: hidden;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
}
.microstructure-item > div > .badge {
  min-width: 32px !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}
.microstructure-item > div > span .help-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  margin-left: 3px !important;
  font-size: 7px !important;
}

/* 实时证据数值必须完整可读，不能以省略号截断 / Live evidence values must remain readable rather than being ellipsized. */
.microstructure-grid {
  gap: 8px !important;
}
.microstructure-item {
  gap: 5px !important;
  padding: 10px !important;
}
.microstructure-item b {
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  font-size: clamp(11px, 0.95vw, 14px) !important;
  letter-spacing: -0.65px !important;
  line-height: 1.22 !important;
}
.microstructure-item small {
  min-height: 0 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}
.microstructure-item b .microstructure-value-main {
  display: block;
  color: var(--text-primary);
  font:
    800 1em/1.15 "SF Mono",
    "JetBrains Mono",
    monospace;
  letter-spacing: inherit;
}
.microstructure-item.bull b .microstructure-value-main {
  color: var(--bull);
}
.microstructure-item.bear b .microstructure-value-main {
  color: var(--bear);
}
.microstructure-item b .microstructure-value-sub {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font:
    700 0.78em/1.2 ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0;
}
.microstructure-item b .microstructure-value-sub::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}

/* The horizontal return strip is always anchored directly before pattern
   analysis, even while the right column rerenders. */
#periodChangeCard.chart-periods {
  width: 100% !important;
  clear: both;
  order: initial !important;
}

@media (max-width: 760px) {
  main {
    width: 100% !important;
    padding-inline: 12px !important;
  }
  .terminal-layout {
    grid-template-columns: 1fr !important;
  }
  .microstructure-item > div > span {
    font-size: 10px !important;
  }
}

@media (min-width: 1025px) {
  main {
    width: calc(100% - 48px) !important;
    max-width: none !important;
  }
  main > header,
  .terminal-layout,
  #periodChangeCard,
  .pattern-analysis-card {
    max-width: none !important;
  }
}

/* Final responsive override: this must follow the desktop grid declarations
   above so a resized browser cannot retain their two-column minimum widths. */
#indicatorDetailsCard,
#indicatorDetailsCard .metrics,
#indicatorDetailsCard #indicators,
#indicatorDetailsCard .metric {
  min-width: 0;
}
#indicatorDetailsCard .metric b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1800px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  main {
    width: 100% !important;
    max-width: none !important;
    padding: 18px 16px 30px !important;
  }
  main > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    border-radius: 28px;
    padding: 12px 14px !important;
  }
  main > header > div:first-child {
    min-width: 0;
  }
  main > header .controls {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    gap: 7px;
  }
  main > header .controls label {
    flex: 0 1 auto;
  }
  .hero {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero > div:first-child {
    min-width: 0 !important;
  }
  #exchangeMeta {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .terminal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }
  .terminal-layout > .side-stack {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }
  .terminal-layout > .side-stack > .card {
    min-width: 0 !important;
  }
  .terminal-layout > .side-stack > .card:first-child,
  .terminal-layout > .side-stack > .card:nth-child(2) {
    min-height: 0 !important;
    height: auto !important;
  }
  .chart-box {
    height: 440px;
  }
}
@media (max-width: 760px) {
  .chart-box {
    height: 315px;
  }
  main > header .controls button,
  main > header .controls select {
    font-size: 12px;
  }
}

/* Tablet / narrowed desktop: retain a compact two-card row so the sentiment
   gauge remains near the signal instead of being pushed far below it. */
@media (min-width: 901px) and (max-width: 1800px) {
  .terminal-layout > .side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
  }
  .terminal-layout > .side-stack > #fearGreedGauge {
    grid-column: 1/-1;
  }
  .terminal-layout > .side-stack > .card {
    padding: clamp(14px, 1.5vw, 20px);
  }
  #ruleSignalCard .signal {
    font-size: clamp(30px, 3.4vw, 40px);
  }
  #indicatorDetailsCard .metric {
    font-size: clamp(11px, 1.05vw, 13px);
  }
  #indicatorDetailsCard .metric span {
    font-size: clamp(9px, 0.9vw, 11px);
  }
  .fear-greed-layout {
    gap: clamp(14px, 2vw, 26px);
  }
}
@media (max-width: 900px) {
  .terminal-layout > .side-stack {
    grid-template-columns: 1fr !important;
  }
  .terminal-layout > .side-stack > #fearGreedGauge {
    grid-column: auto;
  }
}

/* Compact sentiment card for resized desktop/tablet layouts. */
@media (min-width: 901px) and (max-width: 1800px) {
  .terminal-layout > .side-stack > #fearGreedGauge {
    width: min(100%, 720px);
    justify-self: start;
    padding: 16px;
  }
  .fear-greed-head {
    align-items: start;
  }
  .fear-greed-head h2 {
    font-size: 17px;
  }
  .fear-greed-head p {
    font-size: 11px;
  }
  .fear-greed-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 560px;
    margin-top: 4px;
  }
  .fear-greed-dial {
    max-width: 310px;
    margin: 0 auto;
  }
  .fear-greed-reading strong {
    font-size: 39px;
  }
  .fear-greed-reading b {
    font-size: 17px;
  }
  .fear-greed-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 0;
    background: transparent;
  }
  .fear-greed-summary div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 5px;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    background: var(--bg-surface-2);
  }
  .fear-greed-summary div span {
    font-size: 9px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .fear-greed-summary div b {
    font-size: 10px;
    white-space: nowrap;
  }
  .fear-greed-gauge-card footer {
    margin-top: 11px;
    font-size: 10px;
    line-height: 1.45;
  }
}

/* Restore the familiar chart-left / information-right dashboard as soon as
   there is enough real space for it.  Below this breakpoint the rules above
   keep all cards beneath the chart instead. */
@media (min-width: 1300px) {
  .terminal-layout {
    grid-template-columns: minmax(0, 68fr) minmax(300px, 32fr) !important;
    align-items: start !important;
  }
  .terminal-layout > .side-stack {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
  }
  .terminal-layout > .side-stack > #fearGreedGauge {
    grid-column: auto;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
  .terminal-layout > .side-stack > #fearGreedGauge .fear-greed-layout {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .terminal-layout > .side-stack > #fearGreedGauge .fear-greed-dial {
    max-width: 280px;
  }
  .terminal-layout > .side-stack > #fearGreedGauge .fear-greed-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .terminal-layout
    > .side-stack
    > #fearGreedGauge
    .fear-greed-summary
    div:last-child {
    grid-column: 1/-1;
  }
}

/* Restored dashboard behaviour: the desktop view remains a stable left/right
   workspace.  Only tablet and phone widths switch to the reading flow. */
@media (min-width: 1025px) {
  main {
    width: min(calc(100% - 48px), 1360px) !important;
    max-width: 1360px !important;
    padding: 20px 30px 32px !important;
  }
  main > header,
  .terminal-layout {
    width: 100%;
    min-width: 0;
  }
  .terminal-layout {
    grid-template-columns: minmax(0, 68fr) minmax(300px, 32fr) !important;
    align-items: start !important;
  }
  .terminal-layout > .side-stack {
    grid-template-columns: 1fr !important;
    align-items: start;
  }
  .terminal-layout > .side-stack > #fearGreedGauge {
    grid-column: auto;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}
@media (max-width: 1024px) {
  main {
    width: 100% !important;
    max-width: none !important;
    padding: 18px 16px 30px !important;
  }
  .terminal-layout {
    grid-template-columns: 1fr !important;
  }
  .terminal-layout > .side-stack {
    grid-template-columns: 1fr !important;
  }
}

/* Wide desktop: actions belong to the far end of the title bar, while the
   exchange comparison remains aligned to the far end of the price row. */
@media (min-width: 1200px) {
  main > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
  }
  main > header .controls {
    width: auto !important;
    max-width: none !important;
    margin-left: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .hero {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  #exchangeMeta {
    flex: 0 1 720px !important;
    width: min(55%, 720px) !important;
    max-width: 720px !important;
    margin-left: auto !important;
  }
}

/* 桌面行情栏：将时价、个人仓位和交易所报价保持在同一可扫描的横向区域。
   Desktop price strip: keep the quote, personal position and venue quotes in
   distinct columns.  This prevents the personal-card helper text from ever
   entering the live-price column, and anchors the venue rows to the right. */
@media (min-width: 1200px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.95fr) minmax(230px, 280px) minmax(
        410px,
        1.1fr
      );
    align-items: center !important;
    column-gap: 16px;
    row-gap: 0;
  }
  .hero > div:first-child {
    min-width: 0 !important;
  }
  .personal-entry-card {
    min-width: 0 !important;
    width: 100%;
    max-width: none !important;
    align-self: stretch;
    overflow: hidden;
    border-top: 0 !important;
    border-left: 1px solid var(--border-subtle) !important;
    padding: 8px 16px !important;
  }
  .personal-entry-card > small {
    align-self: end;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #exchangeMeta {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 720px !important;
    margin-left: 0 !important;
    justify-self: end;
    align-self: center;
  }
  .exchange-row {
    justify-content: flex-end;
    text-align: right;
  }
}
@media (min-width: 1200px) and (max-width: 1320px) {
  .hero {
    grid-template-columns: minmax(260px, 0.9fr) minmax(220px, 250px) minmax(
        390px,
        1.05fr
      );
    column-gap: 12px;
  }
  .personal-entry-card {
    padding-inline: 12px !important;
  }
  .personal-entry-card > small {
    font-size: 10px;
  }
  .exchange-row {
    gap: 3px 6px;
    padding-inline: 6px;
    font-size: 9px;
  }
}

/* Keep the relocated venue quote pinned to the far edge of the clock row. */
main > #marketClocks {
  position: relative;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
main > #marketClocks #exchangeMeta {
  position: absolute;
  top: 0;
  right: 14px;
  margin: 0 !important;
  justify-self: end;
}
main > #marketClocks #exchangeMeta .exchange-row {
  width: 100%;
}
@media (max-width: 680px) {
  main > #marketClocks #exchangeMeta {
    position: static;
  }
}

/* 周期涨幅属于 OKX 面板；内部网格按需要换行，不应撑高其他页面区域。
   Period returns live inside the OKX panel. Their own grid wraps as needed,
   while their parent stays in one predictable place during live refreshes. */
.okx-microstructure-card {
  display: flex;
  flex-direction: column;
}
.okx-microstructure-card > #periodChangeCard.chart-periods {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 15px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.okx-microstructure-card > #periodChangeCard.chart-periods h2 {
  font-size: 14px;
  margin: 0 0 10px;
}
.okx-microstructure-card > #periodChangeCard.chart-periods > #changeTags {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px;
}

/* Scale the sentiment gauge from the width of its actual side column. This
   avoids abrupt full-page layout switches when the browser is resized. */
.terminal-layout > .side-stack {
  container-type: inline-size;
}
@container (max-width:620px) {
  #fearGreedGauge {
    padding: clamp(14px, 3cqw, 20px) !important;
  }
  #fearGreedGauge .fear-greed-dial {
    max-width: min(280px, 82cqw) !important;
  }
  #fearGreedGauge .fear-greed-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #fearGreedGauge .fear-greed-summary div:last-child {
    grid-column: 1/-1;
  }
  #fearGreedGauge .fear-greed-reading strong {
    font-size: clamp(36px, 10cqw, 46px);
  }
  #fearGreedGauge .fear-greed-reading b {
    font-size: clamp(16px, 4cqw, 19px);
  }
}
@container (min-width:621px) {
  #fearGreedGauge .fear-greed-dial {
    max-width: min(360px, 48cqw) !important;
  }
  #fearGreedGauge .fear-greed-layout {
    grid-template-columns: minmax(250px, 0.9fr) minmax(230px, 1.1fr) !important;
  }
  #fearGreedGauge .fear-greed-summary {
    grid-template-columns: 1fr !important;
  }
  #fearGreedGauge .fear-greed-summary div:last-child {
    grid-column: auto;
  }
}

/* 涨跌幅优先显示，来源和刷新元数据置于下方 / Keep price change primary and place source / refresh metadata below it. */
.hero #change {
  display: grid !important;
  grid-template-columns: max-content max-content;
  align-items: baseline;
  gap: 2px 11px;
  white-space: normal !important;
}
.hero #change .price-market-meta {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
}
.hero #change .price-market-meta #priceTime {
  margin-left: 0;
}
.hero #change .price-market-meta #priceSource {
  margin-left: 8px;
}
.hero #change .price-market-meta #priceSource:before {
  content: "·";
  margin-right: 8px;
  color: var(--border-strong);
}

/* 两个独立个人买入价支持同时记录多头与空头 / Two independent personal entries allow a simultaneous long and short. */
.personal-entry-card {
  flex: 1 1 420px;
  min-width: 360px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 7px 18px;
  border-left: 1px solid var(--border-subtle);
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.personal-entry-slot {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 8px;
  cursor: grab;
}
.personal-entry-slot:active {
  cursor: grabbing;
}
.personal-entry-slot.is-dragging {
  opacity: 0.4;
  transform: scale(0.98);
}
.personal-entry-slot.drag-over {
  outline: 2px dashed var(--accent-cyan);
  outline-offset: -3px;
  background: rgba(0, 212, 170, 0.06);
}
.personal-entry-slot + .personal-entry-slot {
  border-left: 1px solid var(--border-subtle);
}
.personal-entry-heading {
  display: block;
  color: var(--text-secondary);
  font:
    700 11px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.06em;
}
.personal-entry-slot.long .personal-entry-heading:before,
.personal-entry-slot.short .personal-entry-heading:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--bull);
}
.personal-entry-slot.short .personal-entry-heading:before {
  background: var(--bear);
}
.personal-entry-value {
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0;
  color: var(--text-primary) !important;
  font:
    800 23px/1.08 "SF Mono",
    "JetBrains Mono",
    monospace;
  letter-spacing: -1.1px;
  cursor: text;
  box-shadow: none !important;
}
.personal-entry-value:hover {
  color: var(--accent-cyan) !important;
}
.personal-entry-slot > small {
  color: var(--text-muted);
  font:
    10px/1.25 ui-sans-serif,
    system-ui,
    sans-serif;
}
.personal-entry-slot > b {
  font:
    800 14px/1.2 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.personal-entry-slot > b em {
  font: inherit;
  font-style: normal;
  margin-left: 5px;
}
.personal-entry-slot.profit > b {
  color: var(--bull);
}
.personal-entry-slot.loss > b {
  color: var(--bear);
}
.personal-entry-slot.empty .personal-entry-value {
  color: var(--text-muted) !important;
}
.personal-entry-slot input {
  width: 100%;
  min-width: 0;
  padding: 5px 0 6px;
  border: 0;
  border-bottom: 2px solid var(--accent-cyan);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  outline: 0;
  font:
    800 20px/1.08 "SF Mono",
    "JetBrains Mono",
    monospace;
  letter-spacing: -1px;
}
.personal-entry-slot input::placeholder {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-muted);
}
@media (min-width: 1200px) {
  .hero {
    grid-template-columns: minmax(260px, 0.82fr) minmax(410px, 480px) minmax(
        330px,
        1fr
      );
  }
  .personal-entry-card {
    min-width: 0 !important;
    width: 100%;
    max-width: none !important;
    align-self: stretch;
    border-top: 0 !important;
    border-left: 1px solid var(--border-subtle) !important;
    padding: 8px 12px !important;
  }
  .personal-entry-card > small {
    display: none;
  }
}
@media (min-width: 1200px) and (max-width: 1320px) {
  .hero {
    grid-template-columns: minmax(240px, 0.8fr) minmax(390px, 440px) minmax(
        320px,
        1fr
      );
  }
}
@media (max-width: 680px) {
  .personal-entry-card {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .personal-entry-slot {
    padding: 7px 0;
  }
  .personal-entry-slot + .personal-entry-slot {
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }
  .personal-entry-value {
    font-size: 23px;
  }
}

/* 两个独立卡片均恢复原有买入价视觉样式 / Restore the original entry-card look in both independent slots. */
.personal-entry-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.personal-entry-slot {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 12px;
}
.personal-entry-slot + .personal-entry-slot {
  border-left: 1px solid var(--border-subtle);
}
.personal-entry-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font:
    700 11px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.personal-entry-slot.long .personal-entry-heading:before,
.personal-entry-slot.short .personal-entry-heading:before {
  display: none;
}
.personal-side-picker {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-style: normal;
}
.personal-side-picker button {
  min-height: 0;
  padding: 2px 6px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--text-muted) !important;
  font:
    700 9px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0;
  box-shadow: none !important;
}
.personal-side-picker button.active[data-entry-side="long"] {
  background: rgba(0, 212, 170, 0.16) !important;
  color: var(--bull) !important;
}
.personal-side-picker button.active[data-entry-side="short"] {
  background: rgba(255, 77, 106, 0.16) !important;
  color: var(--bear) !important;
}
.personal-entry-slot > small {
  color: var(--text-muted);
  font:
    10px/1.25 ui-sans-serif,
    system-ui,
    sans-serif;
}
.personal-entry-slot > b {
  font:
    800 14px/1.2 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.personal-entry-slot.profit > b {
  color: var(--bull);
}
.personal-entry-slot.loss > b {
  color: var(--bear);
}
.personal-entry-slot.profit .personal-entry-status {
  color: var(--bull);
}
.personal-entry-slot.loss .personal-entry-status {
  color: var(--bear);
}
@media (max-width: 680px) {
  .personal-entry-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .personal-entry-slot {
    padding: 7px 0;
  }
  .personal-entry-slot + .personal-entry-slot {
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }
}

/* 移动端帮助图标必须是不可伸缩的圆形；标题/工具栏的弹性或网格布局不能改变其比例。
   Mobile help icons must stay non-shrinking circles; flex/grid layout in headings and toolbars must not distort them. */
.help-dot,
.metric .help-dot,
.change-card .help-dot,
.card h2 .help-dot,
.levels .help-dot,
.toolbar .help-dot,
.signal-projection .help-dot {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 16px !important;
  align-self: center !important;
  padding: 0 !important;
  line-height: 14px !important;
  border-radius: 50% !important;
}

/* 历史与新闻研究预测：把方向、时间和预期 BTC 价格变化放在同一可核对的卡片中。
   History/news research outlook: keep direction, horizon, and expected BTC price movement together for review. */
.research-outlook-card {
  margin-top: 18px !important;
  padding: 18px !important;
  overflow: visible;
}
.research-outlook-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.research-outlook-head > div {
  min-width: 0;
}
.research-outlook-head h2 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.research-outlook-head p {
  max-width: 780px;
  line-height: 1.55;
}
.research-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}
.research-outlook-head button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.research-actions #trainResearchCandidate {
  border-color: rgba(245, 197, 78, 0.42);
  color: var(--warn);
}
.research-actions button:disabled {
  cursor: wait;
  opacity: 0.7;
}
.research-outlook-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 13px 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 10px;
}
.research-outlook-summary b {
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.research-window-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.research-window {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-muted);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.research-window.bull {
  border-color: color-mix(in srgb, var(--bull) 34%, var(--border-subtle));
  border-left-color: var(--bull);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bull) 10%, var(--bg-surface-2)),
    var(--bg-surface-2) 62%
  );
}
.research-window.bear {
  border-color: color-mix(in srgb, var(--bear) 34%, var(--border-subtle));
  border-left-color: var(--bear);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bear) 10%, var(--bg-surface-2)),
    var(--bg-surface-2) 62%
  );
}
.research-window.flat {
  border-color: var(--border-strong);
  border-left-color: var(--text-muted);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--text-muted) 8%, var(--bg-surface-2)),
    var(--bg-surface-2) 62%
  );
}
.research-window > span,
.research-window small {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}
.research-window > b {
  font-size: 15px;
}
.research-window.bull > b,
.research-window.bull > strong {
  color: var(--bull);
}
.research-window.bear > b,
.research-window.bear > strong {
  color: var(--bear);
}
.research-window.flat > b,
.research-window.flat > strong {
  color: var(--text-secondary);
}
.research-window > strong {
  font:
    800 11px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.research-window em {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font:
    700 10px/1.4 "SF Mono",
    "JetBrains Mono",
    monospace;
  font-style: normal;
}

/* Historical touch-count samples stay visible without competing with the probability value. / 历史触及样本数保持可见，但不抢占概率信息。 */
.liq-prob-output em {
  color: var(--text-muted);
  font:
    9px "SF Mono",
    "JetBrains Mono",
    monospace;
  font-style: normal;
}
.research-news {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
}
.research-news h3 {
  margin: 0 0 8px;
  font-size: 12px;
}
.research-news ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.research-news li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 10px;
}
.research-news li > i {
  min-width: 31px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-style: normal;
  text-align: center;
}
.research-news li.bull > i {
  background: rgba(0, 212, 170, 0.13);
  color: var(--bull);
}
.research-news li.bear > i {
  background: rgba(255, 77, 106, 0.13);
  color: var(--bear);
}
.research-news li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.research-news li > small {
  max-width: 150px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.research-news li > a {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.research-news li > a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}
.research-window > strong.bull {
  color: var(--bull) !important;
}
.research-window > strong.bear {
  color: var(--bear) !important;
}
.research-news-windows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.research-news-windows section {
  min-width: 0;
}
.research-news-windows h4 {
  margin: 0 0 7px;
  color: var(--accent-cyan);
  font-size: 10px;
}
.research-news-windows ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.research-derivatives {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.research-derivatives h3 {
  margin: 0;
  font-size: 12px;
}
.research-derivatives > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.research-derivatives span {
  display: grid;
  gap: 2px;
  color: var(--text-muted);
  font-size: 9px;
}
.research-derivatives b {
  overflow: hidden;
  color: var(--text-secondary);
  font:
    700 11px "SF Mono",
    "JetBrains Mono",
    monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.research-derivatives span.bull b {
  color: var(--bull);
}
.research-derivatives span.bear b {
  color: var(--bear);
}
.research-derivatives span.flat b {
  color: var(--text-secondary);
}
.research-derivatives > small {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
}
.research-derivatives.unavailable {
  border-style: dashed;
}
.research-event-risk {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 11px;
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  background: rgba(245, 197, 78, 0.08);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}
.research-event-risk b {
  flex: 0 0 auto;
  color: var(--warn);
}
.research-scorecard {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(88, 166, 255, 0.32);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(44, 88, 138, 0.12),
    var(--bg-surface-2) 60%
  );
}
.research-scorecard h3 {
  margin: 0;
  font-size: 12px;
}
.research-scorecard > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
}
.research-scorecard > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.research-scorecard article {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(3, 12, 23, 0.25);
}
.research-scorecard article > b {
  font:
    700 10px "SF Mono",
    "JetBrains Mono",
    monospace;
  color: var(--accent-cyan);
}
.research-scorecard article > span {
  color: var(--text-secondary);
  font:
    9px/1.45 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.research-ab-evaluation {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.research-ab-evaluation h3 {
  margin: 0;
  font-size: 12px;
}
.research-ab-evaluation.yellow {
  border-color: rgba(245, 197, 78, 0.36);
}
.research-ab-evaluation.green {
  border-color: rgba(0, 212, 170, 0.38);
}
.research-ab-evaluation.red {
  border-color: rgba(255, 77, 106, 0.38);
}
.research-ab-verdict {
  display: grid;
  gap: 3px;
}
.research-ab-verdict > b {
  font-size: 12px;
}
.research-ab-evaluation.yellow .research-ab-verdict > b {
  color: var(--warn);
}
.research-ab-evaluation.green .research-ab-verdict > b {
  color: var(--bull);
}
.research-ab-evaluation.red .research-ab-verdict > b {
  color: var(--bear);
}
.research-ab-verdict span,
.research-ab-evaluation > small {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
}
.research-ab-summary,
.research-ab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.research-ab-summary span,
.research-ab-grid article {
  display: grid;
  gap: 3px;
  padding: 7px;
  border-radius: 6px;
  background: rgba(3, 12, 23, 0.25);
  color: var(--text-muted);
  font-size: 9px;
}
.research-ab-summary b,
.research-ab-grid b {
  color: var(--text-secondary);
  font:
    700 10px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.research-ab-grid article > span {
  font:
    9px/1.35 "SF Mono",
    "JetBrains Mono",
    monospace;
  color: var(--text-secondary);
}
.ab-center-head {
  display: grid;
  gap: 8px;
}
.ab-center-head h2 {
  margin: 0;
  font-size: 14px;
}
.ab-center-head > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}
.ab-experiment-registry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.ab-experiment-registry span {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font-size: 9px;
}
.ab-experiment-registry b {
  color: var(--text-secondary);
  font-size: 10px;
}
.ab-experiment-registry span.active {
  border-color: rgba(0, 212, 170, 0.34);
}
.ab-experiment-registry span.active b {
  color: var(--bull);
}
.ab-experiment-registry span.na {
  opacity: 0.72;
}
.ab-experiment-registry .ab-experiment {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
}
.ab-experiment-registry .ab-experiment > b {
  color: var(--text-primary);
  font-size: 10px;
}
.ab-experiment-registry .ab-experiment > span {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.35;
}
.ab-experiment-registry .ab-experiment > small {
  color: var(--text-muted);
  font:
    9px/1.35 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.ab-experiment.yellow {
  border-color: rgba(245, 197, 78, 0.36);
}
.ab-experiment.green {
  border-color: rgba(0, 212, 170, 0.42);
}
.ab-experiment.green > b {
  color: var(--bull);
}
.ab-experiment.red {
  border-color: rgba(255, 77, 106, 0.42);
}
.ab-experiment.red > b {
  color: var(--bear);
}
.ab-experiment.flat {
  border-style: dashed;
  opacity: 0.82;
}
.research-governance {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(245, 197, 78, 0.24);
  border-radius: 8px;
  background: rgba(245, 197, 78, 0.04);
}
.research-governance h3 {
  margin: 0;
  font-size: 12px;
}
.research-governance > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.research-governance span {
  display: grid;
  gap: 3px;
  color: var(--text-muted);
  font-size: 9px;
}
.research-governance b {
  color: var(--text-secondary);
  font:
    700 10px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.research-governance small {
  font-size: 9px;
  line-height: 1.4;
}
.research-governance .research-training-status {
  display: grid;
  grid-column: 1/-1;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 197, 78, 0.18);
}
.research-training-status > b {
  color: var(--warn);
}
.research-training-status > small {
  color: var(--text-muted);
}
/* `.research-governance span` 是网格容器，会把这里的四个周期各自变成网格项而竖排；
   这里必须显式回到行内流，并整行占满，进度才能读成一行。 */
.research-training-status .research-horizon-progress {
  grid-column: 1/-1;
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}
.research-training-status .research-horizon-progress b {
  font-weight: 700;
}
.research-outlook-card footer {
  margin-top: 11px;
  padding-top: 10px;
  font-size: 9px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .research-outlook-card {
    padding: 15px !important;
  }
  .research-outlook-head {
    display: grid;
  }
  .research-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .research-outlook-head button {
    width: 100%;
  }
  .research-window-grid {
    grid-template-columns: 1fr;
  }
  .research-news li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .research-news li > small {
    display: none;
  }
  .research-window {
    padding: 10px;
  }
  .research-outlook-summary {
    display: grid;
    gap: 5px;
    margin-top: 10px;
  }
  .research-derivatives > div,
  .research-scorecard > div,
  .research-governance > div,
  .research-ab-summary,
  .research-ab-grid,
  .ab-experiment-registry,
  .research-news-windows {
    grid-template-columns: 1fr;
  }
  .research-event-risk {
    display: grid;
    gap: 3px;
  }
}
.data-cadence {
  display: block;
  margin-top: 8px;
  padding: 5px 7px;
  border: 1px solid rgba(85, 161, 213, 0.22);
  border-radius: 6px;
  background: rgba(68, 103, 143, 0.1);
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.terminal-layout .data-cadence {
  margin-top: 9px;
}
.side-stack > .optional > .data-cadence {
  grid-column: 1/-1;
  margin-top: -4px;
}
.research-outlook-card > .data-cadence,
.okx-microstructure-card > .data-cadence {
  margin-top: 12px;
}
.fear-greed-gauge-card > .data-cadence {
  margin-top: 10px;
}
@media (max-width: 760px) {
  .data-cadence {
    font-size: 9px;
    padding: 5px 6px;
    overflow-wrap: anywhere;
  }
}

/* Personal position calculator and server-side WeChat subscription status. */
.position-calculator {
  margin-top: 7px;
  border-top: 1px solid var(--border-subtle);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.position-calculator summary {
  padding: 6px 0 1px;
  cursor: pointer;
  color: var(--accent-cyan);
  font-size: 10px;
  font-weight: 700;
  list-style: none;
}
.position-calculator summary::-webkit-details-marker {
  display: none;
}
.position-calculator summary:after {
  content: "＋";
  margin-left: 5px;
}
.position-calculator[open] summary:after {
  content: "−";
}
.position-inputs {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 6px;
  margin-top: 6px;
}
.position-inputs label {
  position: relative;
  display: grid;
  gap: 3px;
  color: var(--text-muted);
  font-size: 9px;
}
.position-inputs input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 28px;
  padding: 4px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font:
    700 12px "SF Mono",
    "JetBrains Mono",
    monospace;
  outline: 0;
}
.position-inputs input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.12);
}
.position-inputs label:last-child input {
  padding-right: 19px;
}
.position-inputs label:last-child span {
  position: absolute;
  right: 7px;
  bottom: 6px;
  color: var(--text-muted);
  font-size: 11px;
}
.position-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.position-results span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 5px;
  background: var(--bg-surface-2);
  color: var(--text-muted);
  font-size: 9px;
}
.position-results b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font:
    700 11px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.position-results .profit b {
  color: var(--bull);
}
.position-results .loss b {
  color: var(--bear);
}
.position-empty,
.position-note {
  margin: 7px 0 2px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.38;
}
.position-note {
  color: var(--text-secondary);
}
.wechat-alert-card {
  margin-top: 18px !important;
}
.wechat-alert-card .forecast-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.wechat-key-form,
.wechat-alert-form {
  display: grid;
  gap: 7px;
  align-items: end;
  margin-top: 11px;
}
.wechat-key-form {
  grid-template-columns: minmax(200px, 1fr) auto auto auto auto;
}
.wechat-alert-form {
  grid-template-columns: 1fr 1fr 1fr auto;
}
.wechat-key-form label,
.wechat-alert-form label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 9px;
}
.wechat-alert-form label small {
  color: var(--text-muted);
  font-size: 8px;
}
.wechat-key-form input,
.wechat-alert-form input,
.wechat-alert-form select {
  box-sizing: border-box;
  min-width: 0;
  height: 31px;
  padding: 5px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font:
    600 11px ui-sans-serif,
    system-ui,
    sans-serif;
  outline: 0;
}
.wechat-key-form input:focus,
.wechat-alert-form input:focus,
.wechat-alert-form select:focus {
  border-color: var(--accent-cyan);
}
.wechat-key-form button,
.wechat-alert-form button {
  min-height: 31px;
  padding: 6px 9px;
  white-space: nowrap;
  font-size: 10px;
}
.wechat-key-form a {
  align-self: end;
  padding: 7px 0;
  color: var(--accent-cyan);
  font-size: 10px;
  white-space: nowrap;
}
.wechat-key-form .danger {
  border-color: rgba(255, 77, 106, 0.38);
  color: var(--bear);
}
.wechat-alert-detail {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.wechat-alert-detail p,
.wechat-alert-detail small {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.wechat-alert-detail small {
  color: var(--text-muted);
}
.notification-rule-list {
  display: grid;
  gap: 5px;
}
.notification-rule-list article {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-surface-2);
}
.notification-rule-list article > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.notification-rule-list b {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-rule-list small {
  font:
    9px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.notification-rule-list em {
  font-size: 9px;
  font-style: normal;
}
.notification-rule-list button {
  min-height: 27px;
  padding: 4px 7px;
  border-color: rgba(255, 77, 106, 0.38);
  color: var(--bear);
  font-size: 9px;
}
/* 语音规则列表：按钮按语义分色，已触发的整条弱化显示。 */
.notification-rule-list button.rule-test {
  border-color: rgba(85, 161, 213, 0.5);
  color: var(--accent-cyan);
}
.notification-rule-list button.rule-edit {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.notification-rule-list button.rule-remove {
  border-color: rgba(255, 77, 106, 0.38);
  color: var(--bear);
}
.notification-rule-list em.muted {
  color: var(--text-muted);
}
.notification-rule-list article.is-done {
  opacity: 0.55;
}
@media (max-width: 680px) {
  .position-calculator {
    margin-top: 8px;
  }
  .position-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .wechat-key-form,
  .wechat-alert-form {
    grid-template-columns: 1fr 1fr;
  }
  .wechat-key-form label,
  .wechat-alert-form button {
    grid-column: 1/-1;
  }
  .wechat-key-form button,
  .wechat-alert-form button {
    width: 100%;
  }
}

/* Browser-local alert composer: an exchange-style sheet for adding price alerts. */
.alert-rule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
}
.alert-rule-toolbar > b {
  color: var(--text-primary);
  font-size: 12px;
}
.alert-rule-toolbar button {
  min-height: 30px;
  padding: 5px 10px;
  border-color: rgba(85, 161, 213, 0.55);
  color: var(--accent-cyan);
  font-size: 10px;
}
.alert-composer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(5px);
}
.alert-composer[hidden] {
  display: none;
}
.alert-composer > section {
  box-sizing: border-box;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 18px 18px 10px 10px;
  background: var(--bg-surface);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.36);
}
.alert-composer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.alert-composer header > b {
  font-size: 16px;
}
.alert-composer header button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 28px;
  line-height: 1;
}
.alert-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0;
  color: var(--warn);
  font-size: 19px;
}
.alert-symbol b {
  color: var(--text-primary);
  font-size: 14px;
}
.alert-composer form {
  display: grid;
  gap: 13px;
}
.alert-composer label {
  position: relative;
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
}
.alert-composer select,
.alert-composer input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font:
    600 13px ui-sans-serif,
    system-ui,
    sans-serif;
  outline: 0;
}
.alert-composer select:focus,
.alert-composer input:focus {
  border-color: var(--accent-cyan);
}
.alert-composer label > em {
  position: absolute;
  right: 10px;
  bottom: 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}
.alert-composer label:has(em) input {
  padding-right: 52px;
}
.mark-price {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--text-muted);
  font-size: 10px;
}
.mark-price button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--text-muted);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font:
    600 11px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.frequency {
  display: grid;
  gap: 7px;
}
.frequency > b {
  color: var(--text-secondary);
  font-size: 11px;
}
.frequency > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.frequency button {
  min-height: 39px;
  border-color: transparent;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}
.frequency button.active {
  border-color: var(--accent-cyan);
  background: rgba(85, 161, 213, 0.12);
  color: var(--text-primary);
}
.alert-composer #localCooldown[hidden] {
  display: none;
}
.alert-submit {
  min-height: 44px;
  margin-top: 5px;
  border-color: var(--accent-cyan);
  background: var(--accent-cyan);
  color: #061019;
  font-size: 14px;
  font-weight: 800;
}
.notification-rule-list article {
  align-items: flex-start;
}
.notification-rule-list article > em {
  margin-top: 3px;
}
.notification-rule-list article button {
  align-self: center;
}
@media (max-width: 760px) {
  .alert-composer {
    padding: 0;
  }
  .alert-composer > section {
    width: 100%;
    max-height: 90vh;
    padding: 17px 16px 22px;
    border-radius: 20px 20px 0 0;
  }
  .alert-rule-toolbar {
    margin-top: 11px;
  }
  .alert-rule-toolbar > b {
    font-size: 11px;
  }
}
.alert-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 5px;
}
.alert-actions button {
  min-height: 44px;
  font-size: 13px;
  font-weight: 800;
}
.alert-actions #localRuleTest {
  border-color: rgba(85, 161, 213, 0.7);
  background: var(--bg-surface-2);
  color: var(--accent-cyan);
}
.alert-actions .alert-submit {
  margin-top: 0;
}
.voice-alert-panel {
  display: grid;
  gap: 10px;
  margin-top: 11px;
  padding: 13px 14px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 10px;
}
.voice-alert-panel > div {
  display: grid;
  gap: 2px;
  margin-right: auto;
}
.voice-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.voice-panel-head > div:first-child {
  display: grid;
  gap: 2px;
}
.voice-panel-head b {
  color: var(--text-primary);
  font-size: 13px;
}
.voice-panel-head small {
  color: var(--text-muted);
  font-size: 9.5px;
}
/* 播报进行中：状态行改显「正在播报：<规则名>」，高亮 + 呼吸圆点提示。 */
.voice-panel-head small.is-speaking-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bull, #2ecc71);
  font-weight: 600;
}
.voice-panel-head small.is-speaking-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bull, #2ecc71);
  animation: voiceSpeakingPulse 1.1s ease-in-out infinite;
}
@keyframes voiceSpeakingPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.voice-alert-panel .voice-panel-grid {
  display: grid;
  /* 三栏宽度由 --voice-col-left / --voice-col-mid 控制（JS 拖动写入，本地记忆）。 */
  grid-template-columns: var(--voice-col-left, 200px) 8px var(--voice-col-mid, 208px) 8px minmax(210px, 1fr);
  gap: 8px;
  align-items: stretch;
}
/* 栏间分割线：按住左右拖动调节栏宽，双击复位。 */
.voice-grid-resizer {
  align-self: stretch;
  width: 6px;
  margin: 0 -1px;
  border-radius: 3px;
  background: transparent;
  cursor: col-resize;
  transition: background 0.15s ease;
}
.voice-grid-resizer:hover,
.voice-grid-resizer:focus-visible,
.voice-grid-resizer.is-dragging {
  background: rgba(0, 200, 224, 0.4);
}
body.voice-grid-resizing {
  cursor: col-resize;
  user-select: none;
}
.voice-panel-group {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface);
  /* 关键：允许卡片收缩到栏宽以内，min-width:auto 会把内容顶出卡片压到相邻栏。 */
  min-width: 0;
}
/* 卡片内所有直接子项同样允许收缩，防止按钮/面板把卡片撑宽。 */
.voice-panel-group > * {
  min-width: 0;
}
.voice-panel-toggles {
  gap: 10px;
}
.voice-panel-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 118px;
}
.voice-panel-actions button {
  width: 100%;
}
.voice-alert-panel label {
  display: grid;
  gap: 4px;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 9.5px;
}
.voice-alert-panel select,
.voice-alert-panel button {
  min-height: 28px;
  padding: 4px 7px;
  border-color: var(--border-strong);
  border-radius: 5px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 10.5px;
}
.voice-alert-panel select:focus-visible {
  outline: 1px solid var(--accent-cyan);
  outline-offset: 1px;
}
.voice-alert-panel label:has(select:disabled) {
  opacity: 0.45;
}
/* 语音设置顶部开关组：把原生 checkbox 换成整齐的拨钮卡片。 */
.voice-panel-toggles {
  gap: 9px;
}
.voice-panel-toggles .voice-switch {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 11.5px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.voice-panel-toggles .voice-switch:hover {
  border-color: rgba(0, 212, 170, 0.4);
}
/* 「定时播报实时价精简版」：挂在主开关下的次级开关，缩小+缩进体现从属关系。 */
.voice-panel-toggles .voice-switch-sub {
  margin-left: 14px;
  padding: 7px 10px;
  font-size: 11px;
  background: transparent;
  border-style: dashed;
}
.voice-panel-toggles .voice-switch-sub:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
/* 拨钮本体：input 视觉化为轨道，::after 为滑块。 */
.voice-panel-toggles .voice-switch input[type="checkbox"] {
  position: relative;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 21px;
  margin: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.2s ease;
}
.voice-panel-toggles .voice-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.voice-panel-toggles .voice-switch input[type="checkbox"]:checked {
  background: var(--accent-cyan);
}
.voice-panel-toggles .voice-switch input[type="checkbox"]:checked::after {
  transform: translateX(17px);
}
.voice-panel-toggles .voice-live-interval {
  display: grid;
  /* minmax(0,1fr)：标签列允许收缩，避免下拉框把整行顶出卡片。 */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 7px 12px;
  border: 1px dashed var(--border-subtle);
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 11px;
}
.voice-panel-toggles .voice-live-interval select {
  width: auto;
  max-width: 100%;
  min-height: 24px;
  padding: 2px 6px;
  font-size: 10.5px;
}
.voice-panel-toggles .voice-live-interval .voice-last-spoken {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 10px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.voice-panel-actions button {
  border-color: rgba(85, 161, 213, 0.55);
  color: var(--accent-cyan);
}
/* 播报优先级：按住条目拖拽排序。 */
.voice-priority-list {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.voice-priority-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 10.5px;
  cursor: grab;
  user-select: none;
  min-width: 0;
  transition:
    border-color 0.15s,
    background 0.15s,
    opacity 0.15s;
}
.voice-priority-list li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.voice-priority-list li:hover {
  border-color: rgba(0, 212, 170, 0.4);
}
.voice-priority-list li.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
  border-color: var(--accent-cyan);
  background: rgba(0, 212, 170, 0.08);
}
.voice-priority-grip {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: -1px;
}
.voice-priority-index {
  min-width: 13px;
  color: var(--text-muted);
  font:
    600 9.5px ui-monospace,
    monospace;
}
.voice-alert-panel.is-enabled {
  border-color: rgba(0, 212, 170, 0.35);
  background: linear-gradient(
    90deg,
    rgba(0, 212, 170, 0.08),
    var(--bg-surface-2) 42%
  );
}
/* 窄屏退化为单列，避免控件挤压换行错位。 */
@media (max-width: 980px) {
  .voice-alert-panel .voice-panel-grid {
    grid-template-columns: 1fr;
  }
  .voice-grid-resizer {
    display: none;
  }
  .voice-panel-actions {
    flex-direction: row;
  }
  .voice-panel-actions button {
    width: auto;
    flex: 1;
  }
}
/* 规则触发时喇叭图标的声波闪烁动画。 */
.voice-quick-toggle.is-speaking svg {
  animation: voice-speaking-pulse 1.1s ease-in-out infinite;
  color: var(--accent-bull, #00d4aa);
}
@keyframes voice-speaking-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.12);
  }
}
.voice-switch input,
.voice-rule-option input {
  accent-color: var(--accent-cyan);
}
.voice-rule-option {
  display: flex !important;
  align-items: center;
  gap: 7px;
  font-size: 12px !important;
}
.voice-rule-option input {
  width: auto !important;
  height: auto !important;
}
.voice-alert-panel input[type="range"] {
  width: 100%;
  min-width: 110px;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}
.voice-alert-panel .voice-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 窄栏下允许换行，避免音量滑条（min-width 110px）把行顶出卡片。 */
  flex-wrap: wrap;
}
.voice-alert-panel .voice-volume-row output {
  flex: 0 0 auto;
}
.voice-alert-panel output {
  min-width: 30px;
  color: var(--accent-cyan);
  font:
    700 9px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.voice-alert-panel .voice-rule-note {
  flex-basis: 100%;
  line-height: 1.45;
}
.voice-alert-panel.uses-edge .system-voice-label {
  display: none;
}
.alert-composer .voice-rule-option {
  display: none !important;
}
.hero > div:first-child {
  position: relative;
}
.voice-quick-toggle {
  position: absolute;
  top: 5px;
  /* 主报价放大到 44px 后数字更宽，喇叭随之右移，保持与数字尾部留白
     / The 44px quote is wider, so the toggle shifts right to clear the digits. */
  left: min(300px, calc(100% - 38px));
  right: auto;
  display: grid;
  place-items: center;
  width: 31px;
  min-height: 31px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6f9de9;
  line-height: 1;
  box-shadow: none;
}
.voice-quick-toggle svg {
  width: 25px;
  height: 25px;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.voice-quick-toggle .voice-wave {
  fill: none;
}
.voice-quick-toggle .voice-mute {
  fill: none;
  stroke: #ff708a;
  stroke-width: 6;
  stroke-linecap: round;
  display: none;
}
/* 语音总开关关闭时：显示红色斜杠（表示已静音/关闭），并隐藏声波。 */
.voice-quick-toggle.is-muted .voice-wave {
  display: none;
}
.voice-quick-toggle.is-muted .voice-mute {
  display: inline;
}
.voice-quick-toggle:hover {
  transform: none;
  background: rgba(111, 157, 233, 0.12);
  color: #86b4ff;
  box-shadow: none;
}
/* 「播报中」标签：悬浮在按钮平行右侧，不挤占按钮内部空间。 */
.voice-quick-toggle .voice-quick-toggle-label {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--accent-bull, #00d4aa);
  font:
    700 11px ui-sans-serif,
    system-ui,
    sans-serif;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.voice-quick-toggle.is-muted {
  background: transparent;
  color: #728096;
}
.voice-quick-toggle.is-muted:hover {
  background: rgba(114, 128, 150, 0.12);
  color: #9aa9bd;
}
.voice-settings-modal {
  z-index: 1004;
  align-items: center;
  padding: 20px;
}
.voice-settings-modal > section {
  width: min(1040px, 100%);
  max-height: calc(100vh - 40px);
  padding: 20px;
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.52);
}
.voice-settings-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.voice-settings-modal .voice-alert-panel {
  margin: 0;
}
.voice-settings-modal .voice-rule-list {
  margin: 0;
}
.voice-settings-modal .voice-alert-panel > div {
  min-width: 105px;
}
@media (max-width: 680px) {
  .voice-quick-toggle {
    top: 1px;
    left: min(218px, calc(100% - 34px));
    width: 29px;
    min-height: 29px;
  }
  .voice-quick-toggle svg {
    width: 23px;
    height: 23px;
  }
  .voice-settings-modal {
    align-items: end;
    padding: 0;
  }
  .voice-settings-modal > section {
    width: 100%;
    max-height: 90vh;
    padding: 17px 16px 22px;
    border-radius: 20px 20px 0 0;
  }
  .voice-settings-modal .voice-alert-panel {
    align-items: flex-start;
  }
  .voice-settings-modal .voice-alert-panel > div {
    margin-right: 0;
    flex-basis: 100%;
  }
}
.voice-rule-composer {
  z-index: 1005;
  align-items: center;
}
.voice-rule-composer > section {
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.56);
}
.voice-rule-list {
  display: grid;
  /* align-content: start：容器被拉伸时多余高度不灌进标题行，避免标题下出现空白。 */
  align-content: start;
  gap: 7px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(0, 212, 170, 0.22);
  border-radius: 8px;
  background: rgba(0, 212, 170, 0.035);
}
.voice-rule-list > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.voice-rule-list b {
  color: var(--text-primary);
  font-size: 11px;
}
.voice-rule-list > small,
.voice-rule-list > div:first-child small {
  color: var(--text-muted);
  font-size: 9px;
}
.voice-rule-list .notification-rule-list article {
  padding: 6px 7px;
}
.voice-rule-list .notification-rule-list b {
  font-size: 10px;
}
.voice-rule-list .notification-rule-list [data-edit-voice-rule] {
  border-color: rgba(85, 161, 213, 0.56);
  color: var(--accent-cyan);
}
.voice-rule-composer [hidden] {
  display: none !important;
}
.voice-entry-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.voice-entry-summary > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  grid-column: 1/-1;
}
.voice-entry-summary b {
  font-size: 11px;
}
.voice-entry-summary strong {
  color: var(--accent-cyan);
  font:
    800 14px "SF Mono",
    "JetBrains Mono",
    monospace;
}
.voice-entry-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1/-1;
}
.voice-entry-values:empty {
  display: none;
}
.voice-entry-values span {
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(0, 212, 170, 0.1);
  color: var(--bull);
  font-size: 10px;
}
.voice-entry-values span.short {
  background: rgba(255, 77, 106, 0.1);
  color: var(--bear);
}
.voice-entry-values span b {
  margin-left: 3px;
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.voice-entry-summary strong {
  cursor: pointer;
}
.voice-entry-summary strong:focus {
  outline: 1px solid var(--accent-cyan);
  outline-offset: 3px;
  border-radius: 2px;
}
.alert-composer #voiceRuleCooldown[hidden] {
  display: none;
}
.alert-notice {
  z-index: 1001;
  align-items: center;
}
.alert-notice > section {
  width: min(470px, 100%);
  padding: 20px;
  border-radius: 16px;
}
.notice-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 17px 0;
}
.notice-body > span {
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.16);
  color: var(--bull);
  font-weight: 900;
}
.notice-body p {
  margin: 1px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
}
.alert-notice .alert-submit {
  width: 100%;
  margin: 0;
}

/* Shared confirmation and information dialog. */
.app-dialog {
  z-index: 1002;
}
.app-dialog .notice-body > span {
  background: rgba(85, 161, 213, 0.16);
  color: var(--accent-cyan);
}
.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.app-dialog-actions button {
  min-width: 96px;
}
.app-dialog .alert-submit {
  width: auto;
  margin: 0;
}
.app-dialog-cancel {
  border-color: var(--border-strong);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
}
.cloud-rule-form,
.cloud-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.cloud-rule-form input,
.cloud-rule-form select {
  min-height: 31px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  padding: 5px 7px;
}
.cloud-rule-form {
  align-items: center;
}
.cloud-rule-form label {
  font-size: 10px;
  color: var(--text-secondary);
}
.cloud-alert-actions {
  justify-content: flex-end;
}
.cloud-alert-actions .danger {
  border-color: rgba(255, 77, 106, 0.48);
  color: var(--bear);
}
@media (max-width: 760px) {
  .cloud-rule-form > * {
    flex: 1 1 45%;
  }
}

/* Keep rule-state labels vertically centered and expose one-shot executions. */
.alert-rule-toolbar > div {
  display: flex;
  gap: 7px;
}
.alert-rule-toolbar .danger {
  border-color: rgba(255, 77, 106, 0.48);
  color: var(--bear);
}
.notification-rule-list article {
  align-items: center;
}
.notification-rule-list article > em {
  display: grid;
  place-items: center;
  align-self: center;
  min-height: 27px;
  margin-top: 0;
  line-height: 1;
}
.notification-rule-list .notification-triggered {
  color: var(--warn);
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.notification-rule-list article.cloud-managed-rule {
  border-color: rgba(0, 212, 170, 0.34);
  background: linear-gradient(
    90deg,
    rgba(0, 212, 170, 0.075),
    var(--bg-surface-2) 42%
  );
}
.notification-rule-list .cloud-managed {
  color: var(--accent-cyan);
  font-weight: 800;
}
.cloud-alert-login {
  min-height: 28px;
  padding: 5px 9px;
  border-color: rgba(85, 161, 213, 0.55);
  color: var(--accent-cyan);
  font-size: 10px;
}
.cloud-alert-panel {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface-2);
}
.cloud-alert-panel[hidden] {
  display: none;
}
.account-service-card {
  z-index: 1003;
  align-items: center;
  padding: 20px;
}
.account-service-card > section {
  position: relative;
  width: min(430px, 100%);
  padding: 26px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
}
.account-service-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.account-service-card header > b {
  color: var(--text-primary);
  font-size: 16px;
}
.account-service-card header button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 27px;
  line-height: 1;
}
.account-service-desc {
  margin: 13px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}
.account-service-user {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-surface-2);
}
.asu-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.asu-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.12);
  color: var(--accent-cyan);
  font-size: 15px;
  font-weight: 800;
}
.asu-email {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 13px;
}
.asu-note {
  margin: 11px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.75;
}
.asu-actions {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}
.asu-actions button {
  flex: 1;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}
.asu-primary {
  border-color: var(--accent-cyan);
  background: var(--accent-cyan);
  color: #061019;
}
.asu-primary:hover {
  border-color: var(--accent-cyan);
  background: #48ddeb;
  color: #061019;
}
.asu-primary:disabled {
  opacity: 0.6;
}
.asu-ghost {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
}
.asu-ghost:hover {
  border-color: var(--bear);
  background: rgba(255, 82, 110, 0.1);
  color: var(--bear);
}
.account-auth {
  margin-top: 20px;
}
.account-auth-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.account-auth-tabs button {
  position: relative;
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 700;
}
.account-auth-tabs button.active {
  color: var(--text-primary);
  box-shadow: none;
}
.account-auth-tabs button.active:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--accent-cyan);
}
.account-service-card .account-auth-form {
  display: none;
  gap: 13px;
}
.account-service-card .account-auth-form.active {
  display: grid;
}
.account-auth-form label {
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
}
.account-auth-form input {
  height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 13px;
  outline: 0;
}
.account-auth-form input:focus {
  border-color: var(--accent-cyan);
}
.account-auth-submit {
  min-height: 40px;
  margin-top: 4px;
  border-color: var(--accent-cyan);
  border-radius: 7px;
  background: var(--accent-cyan);
  color: #061019;
  font-size: 13px;
  font-weight: 800;
}
.account-auth-submit:hover {
  border-color: var(--accent-cyan);
  background: #48ddeb;
  color: #061019;
}
.account-login-toggle {
  border-color: rgba(85, 161, 213, 0.55) !important;
  color: var(--accent-cyan) !important;
}
.account-login-toggle.active {
  border-color: var(--bull) !important;
  background: rgba(0, 212, 170, 0.12) !important;
  color: var(--bull) !important;
}
@media (max-width: 760px) {
  .account-service-card {
    align-items: center;
    padding: 16px;
  }
  .account-service-card > section {
    padding: 22px;
  }
  .account-auth {
    margin-top: 17px;
  }
}
.personal-entry-card {
  position: relative;
}
/* 每张持仓卡的同步状态与杠杆胶囊使用同一尺寸。 */
.personal-entry-heading .personal-entry-account-sync {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 18px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid rgba(85, 161, 213, 0.62);
  border-radius: 999px;
  background: rgba(85, 161, 213, 0.11);
  color: #55a1d5;
  font: 800 10px/1 "SF Mono", "JetBrains Mono", monospace;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  opacity: 1;
}
.personal-entry-heading .personal-entry-account-sync.is-unsynced {
  border-color: rgba(255, 184, 77, 0.72);
  background: rgba(255, 184, 77, 0.12);
  color: var(--warn);
  cursor: pointer;
}
.personal-entry-heading .personal-entry-account-sync.is-unsynced:hover {
  border-color: var(--warn);
  background: rgba(255, 184, 77, 0.2);
  color: var(--warn);
}
.cloud-status-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cloud-status-row p {
  display: grid;
  gap: 3px;
  margin: 0;
}
.cloud-status-row p span {
  color: var(--text-secondary);
  font-size: 10px;
}
.cloud-status-row .badge {
  flex: 0 0 auto;
}
.cloud-key-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.cloud-key-action .wechat-key-form {
  width: 100%;
}
.cloud-key-action .wechat-key-form[hidden] {
  display: none;
}
.cloud-key-action > button {
  min-height: 28px;
  padding: 5px 9px;
  border-color: rgba(85, 161, 213, 0.55);
  color: var(--accent-cyan);
  font-size: 10px;
}
@media (max-width: 680px) {
  .cloud-status-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

/* Deep navy terminal treatment: shared backdrop, restrained card borders, and compact information blocks. */
html[data-theme="dark"],
html[data-theme="auto"] {
  --bg-base: #070d19;
  --bg-surface: #121a2a;
  --bg-surface-2: #0d1524;
  --bg-elevated: #19243a;
  --border-subtle: #26344b;
  --border-strong: #3b5272;
  --text-primary: #e9effb;
  --text-secondary: #97a9c2;
  --text-muted: #64758f;
}
html[data-theme="dark"] body,
html[data-theme="auto"] body {
  background:
    radial-gradient(
      900px 720px at -8% 0%,
      rgba(22, 94, 139, 0.54),
      transparent 58%
    ),
    radial-gradient(
      900px 740px at 108% 4%,
      rgba(76, 43, 124, 0.44),
      transparent 58%
    ),
    linear-gradient(132deg, #0b2941 0%, #0b1322 38%, #111328 72%, #241842 100%);
  background-attachment: fixed;
}

/* Rule signal: use a restrained directional wash behind the headline instead
   of a fixed purple cast.  Neutral remains blue-violet for "观望". */
#ruleSignalCard {
  --rule-signal-wash: rgba(99, 82, 168, 0.18);
  --rule-signal-edge: rgba(134, 112, 208, 0.28);
  background:
    radial-gradient(420px 170px at 4% 6%, var(--rule-signal-wash), transparent 72%),
    linear-gradient(142deg, color-mix(in srgb, var(--rule-signal-wash) 30%, var(--bg-surface)) 0%, var(--bg-surface) 48%);
  border-color: var(--rule-signal-edge);
  transition: background 260ms ease, border-color 260ms ease;
}
#ruleSignalCard[data-signal-tone="bull"] {
  --rule-signal-wash: rgba(0, 212, 170, 0.2);
  --rule-signal-edge: rgba(0, 212, 170, 0.38);
}
#ruleSignalCard[data-signal-tone="bear"] {
  --rule-signal-wash: rgba(255, 77, 106, 0.2);
  --rule-signal-edge: rgba(255, 77, 106, 0.4);
}
html[data-theme="light"] #ruleSignalCard {
  --rule-signal-wash: rgba(117, 97, 194, 0.1);
  --rule-signal-edge: rgba(117, 97, 194, 0.28);
}
html[data-theme="light"] #ruleSignalCard[data-signal-tone="bull"] {
  --rule-signal-wash: rgba(0, 143, 112, 0.12);
  --rule-signal-edge: rgba(0, 127, 105, 0.35);
}
html[data-theme="light"] #ruleSignalCard[data-signal-tone="bear"] {
  --rule-signal-wash: rgba(209, 54, 79, 0.11);
  --rule-signal-edge: rgba(195, 52, 79, 0.38);
}
#ruleSignalCard h2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
}
.signal-basis-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--text-muted);
  color: #fff;
  font: 800 13px/1 ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  white-space: nowrap;
}
.signal-basis-chip[data-tone="bull"] { background: var(--bull); }
.signal-basis-chip[data-tone="bear"] { background: var(--bear); }
.signal-basis-chip[data-tone="flat"] { background: var(--text-muted); }
html[data-theme="light"] .signal-basis-chip[data-tone="bull"],
html[data-theme="light"] .signal-basis-chip[data-tone="bear"],
html[data-theme="light"] .signal-basis-chip[data-tone="flat"] {
  color: #fff;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .signal-basis-chip[data-tone="bull"],
  html[data-theme="auto"] .signal-basis-chip[data-tone="bear"],
  html[data-theme="auto"] .signal-basis-chip[data-tone="flat"] {
    color: #fff;
  }
}
html[data-theme="dark"] body:before,
html[data-theme="dark"] body:after,
html[data-theme="auto"] body:before,
html[data-theme="auto"] body:after {
  display: block;
  z-index: -1;
  filter: blur(70px);
  opacity: 0.55;
}
html[data-theme="dark"] body:before,
html[data-theme="auto"] body:before {
  width: 460px;
  height: 460px;
  left: -230px;
  top: 18%;
  background: rgba(15, 157, 175, 0.16);
}
html[data-theme="dark"] body:after,
html[data-theme="auto"] body:after {
  width: 520px;
  height: 520px;
  right: -260px;
  top: 8%;
  background: rgba(109, 58, 200, 0.19);
}

/* The open dashboard backdrop follows the same rule direction as the signal
   card.  This includes the otherwise empty area beside the price summary. */
html[data-theme="dark"],
html[data-theme="auto"] {
  --rule-page-glow: rgba(76, 43, 124, 0.44);
  --rule-page-orb: rgba(109, 58, 200, 0.19);
  --rule-page-end: #241842;
}
html[data-rule-signal-tone="bull"] {
  --rule-page-glow: rgba(0, 180, 140, 0.38);
  --rule-page-orb: rgba(0, 212, 170, 0.2);
  --rule-page-end: #0c2d31;
}
html[data-rule-signal-tone="bear"] {
  --rule-page-glow: rgba(210, 55, 84, 0.4);
  --rule-page-orb: rgba(255, 77, 106, 0.21);
  --rule-page-end: #301525;
}
html[data-theme="dark"] body,
html[data-theme="auto"] body {
  background:
    radial-gradient(900px 720px at -8% 0%, rgba(22, 94, 139, 0.54), transparent 58%),
    radial-gradient(900px 740px at 108% 4%, var(--rule-page-glow), transparent 58%),
    linear-gradient(132deg, #0b2941 0%, #0b1322 38%, #111328 72%, var(--rule-page-end) 100%);
  transition: background 320ms ease;
}
html[data-theme="dark"] body:after,
html[data-theme="auto"] body:after {
  background: var(--rule-page-orb);
  transition: background 320ms ease;
}
main > header {
  min-height: 70px;
  margin: 0 0 18px;
  padding: 12px 18px;
  border: 1px solid rgba(126, 161, 213, 0.25);
  border-radius: 19px;
  background: linear-gradient(
    100deg,
    rgba(43, 79, 111, 0.88),
    rgba(18, 27, 45, 0.91) 46%,
    rgba(51, 34, 88, 0.88)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(22px);
}
.terminal-layout > .card,
.side-stack > .card {
  border-radius: 16px;
}
.toolbar #ranges button.active {
  border-color: rgba(44, 206, 196, 0.55) !important;
  background: rgba(17, 112, 122, 0.32) !important;
  color: #49e1d1 !important;
}
.metric,
.change-card span,
.microstructure-item,
.corr-stat,
.fear-greed-compact-tile,
.research-window,
.research-scorecard,
.research-derivatives,
.research-ab-evaluation,
.fed-event,
.fed-market-signal,
.notification-rule-list article {
  border: 1px solid rgba(102, 132, 174, 0.2) !important;
  border-radius: 10px !important;
  background: linear-gradient(
    145deg,
    rgba(18, 29, 47, 0.86),
    rgba(10, 17, 30, 0.88)
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}
.metric {
  padding: 10px !important;
  margin-bottom: 7px;
  border-left: 1px solid rgba(102, 132, 174, 0.2) !important;
}
.metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.metric:last-child {
  border-bottom: 1px solid rgba(102, 132, 174, 0.2) !important;
}
.change-card {
  border-top: 0;
  padding-top: 2px;
}
.change-card > div {
  gap: 8px;
}
.change-card span {
  min-width: 112px;
}
.fear-greed-gauge-card.fear-greed-compact {
  background: linear-gradient(
    135deg,
    rgba(22, 33, 53, 0.96),
    rgba(12, 19, 33, 0.97)
  );
}
.macro-event-tile {
  background: linear-gradient(
    135deg,
    rgba(30, 62, 87, 0.62),
    rgba(11, 20, 34, 0.92)
  ) !important;
}
.signal-projection {
  border: 1px solid rgba(64, 177, 183, 0.38) !important;
  border-radius: 11px !important;
  background: linear-gradient(
    135deg,
    rgba(20, 61, 72, 0.45),
    rgba(11, 23, 37, 0.88)
  ) !important;
}
.gauge-track {
  background: linear-gradient(
    90deg,
    #b64c76,
    #754a70 43%,
    #31685f 60%,
    #35c899
  ) !important;
}
.chart-periods > div {
  gap: 8px;
}
.chart-periods span {
  border: 1px solid rgba(102, 132, 174, 0.2);
  background: rgba(9, 17, 30, 0.54);
}
@media (max-width: 680px) {
  main {
    width: 100% !important;
    padding: 14px 12px 28px !important;
  }
  main > header {
    border-radius: 15px;
  }
  .metrics {
    grid-template-columns: 1fr;
  }
  .change-card span {
    min-width: 0;
  }
  .card,
  .optional {
    border-radius: 13px;
  }
}

/* Fear & Greed is a compact market-context card, not a trading gauge. */
.fear-greed-gauge-card.fear-greed-compact {
  display: grid;
  gap: 14px;
  min-height: 0 !important;
  padding: 20px !important;
  background: linear-gradient(
    135deg,
    rgba(22, 31, 46, 0.95),
    rgba(14, 20, 32, 0.96)
  );
}
.fear-greed-compact .fear-greed-head {
  align-items: center;
}
.fear-greed-compact .fear-greed-head h2 {
  margin: 0;
  font-size: 17px;
}
.fear-greed-compact .fear-greed-head > span {
  padding: 0;
  border: 0;
  color: var(--text-secondary);
  font-size: 12px;
}
.fear-greed-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fear-greed-compact-tile {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(4, 10, 18, 0.3);
}
.fear-greed-compact-tile > span {
  color: var(--text-secondary);
  font-size: 12px;
}
.fear-greed-compact-tile > b {
  color: var(--text-primary);
  font:
    800 21px/1.2 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.fear-greed-compact-tile > b.bull {
  color: var(--bull);
}
.fear-greed-compact-tile > b.bear {
  color: var(--bear);
}
.fear-greed-compact-tile > b.flat {
  color: var(--text-secondary);
}
.fear-greed-compact-tile small {
  color: var(--text-muted);
  font-size: 11px;
}
.fear-greed-compact-tile .fear-greed-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.macro-event-tile {
  border-color: rgba(85, 161, 213, 0.3);
  background: linear-gradient(
    135deg,
    rgba(44, 88, 138, 0.12),
    rgba(4, 10, 18, 0.3) 66%
  );
}
.macro-event-tile.upcoming {
  border-color: rgba(245, 197, 78, 0.35);
}
.macro-event-tile > b {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
}
.macro-event-tile > strong {
  color: var(--text-secondary);
  font:
    700 11px/1.45 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.macro-event-tile.released > strong {
  color: var(--bull);
}

/* 关注宏观事件实时数据 v2.14.0：内部内容直接占满卡片，不再套一层 tile 与标签。 */
.macro-sentiment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.macro-sentiment-grid > .ms-pin,
.macro-sentiment-grid > .macro-cmp-empty {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.macro-sentiment-grid > .macro-cmp-empty {
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 12.5px;
}
.ms-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  align-content: start;
}
/* 恐惧贪婪小方块：固定宽度 + 1:1 比例，内容纵向居中。
   max-width 必须写死，否则在 ≤680px 的单列布局里会被拉成整行大正方形。 */
.fear-greed-compact-tile.fg-tile {
  display: grid;
  width: 100%;
  max-width: 138px;
  justify-self: start;
  aspect-ratio: 1 / 1;
  grid-template-rows: auto auto auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 2px;
  padding: 12px 10px;
}
.fg-tile .fear-greed-label {
  justify-self: center;
}
.fg-tile > b {
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.fg-word {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}
.fg-word.bull {
  color: var(--bull);
}
.fg-word.bear {
  color: var(--bear);
}
/* 关注事件 · 实时数据：不再套一层 tile，直接占满卡片 */
.ms-pick-release {
  align-content: start;
  gap: 0;
  min-height: 100%;
  padding: 0;
}
.ms-pick-release .macro-tile-label {
  display: none;
}
/* —— 关注事件 · 实时数据：倒计时 + 北京时间 + 预期/前值/实际 + 阈值解读 —— */
.ms-pin {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(64, 177, 183, 0.28);
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(20, 51, 62, 0.42), rgba(11, 21, 35, 0.72));
}
.ms-pin.bear {
  border-color: rgba(255, 77, 106, 0.32);
}
.ms-pin.bull {
  border-color: rgba(46, 204, 145, 0.32);
}
.ms-pin-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.ms-pin-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.ms-pin-title b {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}
.ms-pin-title span {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-pin-head .cal-impact {
  flex: none;
}
/* 倒计时行：大号等宽数字 + 北京时间 */
.ms-pin-when {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(4, 11, 20, 0.55);
}
.ms-pin-clock {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.ms-pin-clock b {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--accent-cyan, #38dfc4);
  font-variant-numeric: tabular-nums;
}
.ms-pin.is-released .ms-pin-clock b {
  color: var(--text-secondary);
}
.ms-pin-clock span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.ms-pin-datetime {
  display: grid;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}
.ms-pin-datetime b {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ms-pin-datetime span {
  font-size: 10px;
  color: var(--text-muted);
}
/* 预期 / 前值 / 实际 */
.ms-pin-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ms-pin-met {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ms-pin-met i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ms-pin-met b {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-pin-met b.empty {
  color: var(--text-muted);
  font-weight: 500;
}
.ms-pin-met.actual {
  justify-items: end;
  text-align: right;
}
.ms-pin-met.actual b.on {
  color: var(--warn, #f5b130);
  font-size: 18px;
}
.ms-pin-badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.12);
}
.ms-pin-badge.bear {
  color: var(--bear);
  background: rgba(255, 77, 106, 0.14);
}
.ms-pin-badge.bull {
  color: var(--bull);
  background: rgba(46, 204, 145, 0.14);
}
.ms-pin-badge.pending {
  color: var(--text-muted);
}
/* curated/定性事件：无预期/前值/实际时的利好利空标签条 */
.ms-pin-kindbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ms-pin-kindbar .ms-pin-badge {
  font-size: 11px;
  padding: 3px 10px;
}
/* 阈值解读 */
.ms-pin-analysis {
  display: grid;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--border-subtle);
}
.ms-pin-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}
.ms-pin-note em {
  font-style: normal;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9.5px;
  color: var(--accent-cyan, #38dfc4);
  background: rgba(56, 223, 196, 0.12);
}
.ms-pin-note em.bull {
  color: var(--bull);
  background: rgba(46, 204, 145, 0.12);
}
.ms-pin-note em.bear {
  color: var(--bear);
  background: rgba(255, 77, 106, 0.12);
}
.ms-pin-note em.flat {
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.12);
}
.ms-pin-analysis ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-pin-analysis li {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.ms-pin-analysis li::before {
  content: "·";
  color: var(--text-muted);
}
.ms-pin-analysis li.is-live {
  color: var(--text-primary);
  font-weight: 600;
}
.ms-pin-analysis li.is-live::before {
  content: "▸";
  color: var(--accent-cyan, #38dfc4);
}
.ms-pin-analysis li.is-flat {
  color: var(--text-muted);
}
.ms-pin-analysis li b {
  font-weight: 800;
}
.ms-pin-analysis li b.bull {
  color: var(--bull);
}
.ms-pin-analysis li b.bear {
  color: var(--bear);
}
.ms-pin-analysis li b.flat {
  color: var(--text-muted);
}
.ms-pin-tip {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
@media (max-width: 680px) {
  /* ≤680px 关注事件整块占满卡片。 */
  .ms-pick-release {
    padding: 14px;
  }
  .ms-pin {
    padding: 14px;
  }
  .ms-pin-clock b {
    font-size: 24px;
  }
}
/* 宏观经济数据独立成卡，位于「BTC 多因子研究」与「投资日历」之间 */
.released-data-card {
  display: grid;
  gap: 0;
}
.released-data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}
.released-data-head:has(~ .released-data-body) {
  margin-bottom: 12px;
}
.released-data-head h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.released-data-head span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.released-data-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 2px 0 0;
}
.released-data-fields {
  padding: 10px 0 2px;
}
.released-data-fields .ic-field {
  min-width: 0;
}
.released-data-body {
  display: grid;
  gap: 16px;
  min-height: 0;
}
.released-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 680px) {
  .released-data-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 宏观经济数据卡片内的「数据公布影响预测」 */
.released-impact-section {
  display: grid;
  gap: 10px;
}
.released-impact-section .ic-impact-head {
  margin: 0;
  border-top: none;
  padding-top: 0;
}
.released-impact-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.released-impact-grid .ic-impact-card {
  gap: 8px;
  padding: 11px 12px;
}
.released-impact-grid .ic-impact-top .cal-impact em {
  margin-left: 2px;
  font-size: 9.5px;
  font-weight: 700;
  font-style: normal;
  color: var(--cal-text-3);
}
.released-impact-grid .ic-impact-matrix th.asset-btc,
.released-impact-grid .ic-impact-matrix td.asset-btc {
  font-size: 14px;
  font-weight: 800;
}
.released-impact-grid .ic-impact-matrix th:not(.asset-btc),
.released-impact-grid .ic-impact-matrix td:not(.asset-btc) {
  font-size: 10.5px;
  font-weight: 650;
}
.released-actuals-head {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.ms-rel-imp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
}
.ms-rel-imp em {
  font-style: normal;
}
/* 关注事件 · 实时数据：整块放大 */
.ms-pick-release {
  align-content: start;
}
.ms-pick-release .macro-cmp { background:rgba(46,204,145,.06); border-color:rgba(46,204,145,.18); }
.ms-pick-release .macro-cmp.bear { background:rgba(255,77,106,.06); border-color:rgba(255,77,106,.18); }
.ms-pick-release .macro-cmp.flat { background:rgba(148,163,184,.05); border-color:rgba(148,163,184,.15); }
/* 左下「已公布数据」撑满左栏剩余高度，超出部分内部滚动，
   这样两列高度一致、不会在恐惧贪婪下方留一大块空白。 */
.ms-released {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}
.ms-released .macro-cmp-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.ms-released .macro-cmp-list::-webkit-scrollbar {
  width: 5px;
}
.ms-released .macro-cmp-list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--border-strong);
}
.ms-right {
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(4, 10, 18, 0.3);
  gap: 10px;
}
.ms-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  align-content: start;
}
.ms-right .ms-block + .ms-block {
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.ms-impact-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
}
/* —— 左下：已公布数据（竖排紧凑行） —— */
.ms-rel {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: rgba(4, 10, 18, 0.28);
}
.ms-rel.bear {
  border-color: rgba(255, 77, 106, 0.34);
}
.ms-rel.bull {
  border-color: rgba(46, 204, 145, 0.34);
}
.ms-rel-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.ms-rel-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-rel-metrics {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.ms-rel-met {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ms-rel-met i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ms-rel-met b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-rel-met b.empty {
  color: var(--text-muted);
  font-weight: 500;
}
.ms-rel-met.is-act b.on {
  color: var(--warn);
  font-weight: 800;
}
.ms-rel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.ms-rel-when {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-rel-foot .macro-cmp-tag {
  margin-left: 0;
  padding: 2px 7px;
  font-size: 10px;
}
/* 窄栏里的旗帜收窄，避免抢标题的宽度。 */
.ms-block .cal-flag,
.ms-rel-top .cal-flag {
  min-width: 26px;
  height: 18px;
  padding: 0 4px;
  font-size: 9.5px;
  flex: none;
}
/* —— 右下：实时数据 · 利好利空（沿用投资日历的影响卡，压缩版） —— */
.ms-impact .ic-impact-card {
  padding: 9px 10px;
  gap: 7px;
  border-radius: 10px;
  background: var(--cal-surface);
}
.ms-impact .ic-impact-title b {
  font-size: 12px;
}
.ms-impact .ic-impact-title span {
  font-size: 10px;
}
.ms-impact .ic-impact-matrix th,
.ms-impact .ic-impact-matrix td {
  padding: 3px 1px;
  font-size: 10px;
}
.ms-impact .ic-impact-matrix thead th:first-child,
.ms-impact .ic-impact-matrix tbody th {
  width: 46px;
  font-size: 9.5px;
}
.ms-impact .ic-impact-actual {
  font-size: 11px;
}
/* 复用投资日历的影响卡样式，但把 --cal-* 令牌映射到主题变量，
   这样明/暗主题下文字与涨跌色都保持可读（日历卡是强制深色，本卡不是）。 */
#fearGreedGauge {
  --cal-text: var(--text-primary);
  --cal-text-2: var(--text-secondary);
  --cal-text-3: var(--text-muted);
  --cal-line: var(--border-subtle);
  --cal-line-2: var(--border-strong);
  --cal-surface: var(--bg-surface-2);
  --cal-bull: var(--bull);
  --cal-bear: var(--bear);
  --cal-warn: var(--warn, #f5b130);
  --cal-accent: var(--accent-cyan, #38dfc4);
}
.macro-event-tile,
.macro-news-tile {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 0;
}
.macro-tile-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.macro-tile-label em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
}
.macro-tile-foot {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}
.macro-cmp-list {
  display: grid;
  gap: 8px;
}
.macro-cmp {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: rgba(4, 10, 18, 0.28);
}
.macro-cmp.bear {
  border-color: rgba(255, 77, 106, 0.34);
}
.macro-cmp.bull {
  border-color: rgba(46, 204, 145, 0.34);
}
.macro-cmp-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.macro-event-tile .cal-flag {
  min-width: 26px;
  height: 18px;
  padding: 0 4px;
  font-size: 9.5px;
  flex: none;
}
.macro-cmp-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.macro-cmp-time {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.macro-cmp-time i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.macro-cmp-time em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.macro-cmp.macro-cmp-compact { padding:7px 9px; gap:5px; }
.macro-cmp.macro-cmp-compact .macro-cmp-top { gap:6px; }
.macro-cmp.macro-cmp-compact .macro-cmp-title { font-size:11.5px; }
.macro-cmp.macro-cmp-compact .macro-cmp-time i { font-size:10px; }
.macro-cmp.macro-cmp-compact .macro-cmp-time em { font-size:9px; }
.macro-cmp.macro-cmp-compact .macro-cmp-metrics { gap:10px; }
.macro-cmp.macro-cmp-compact .macro-cmp-met i { font-size:8.5px; }
.macro-cmp.macro-cmp-compact .macro-cmp-met b { font-size:10.5px; }
.macro-cmp.macro-cmp-compact .macro-cmp-tag { font-size:9.5px; padding:2px 7px; }
.macro-cmp-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.macro-cmp-met {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.macro-cmp-met i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.macro-cmp-met b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.macro-cmp-met b.empty {
  color: var(--text-muted);
  font-weight: 500;
}
.macro-cmp-met.actual.is-released b {
  color: var(--warn);
  font-weight: 800;
}
.macro-cmp-tag {
  margin-left: auto;
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.macro-cmp-tag.bear {
  color: var(--bear);
  background: rgba(255, 77, 106, 0.12);
  border-color: rgba(255, 77, 106, 0.4);
}
.macro-cmp-tag.bull {
  color: var(--bull);
  background: rgba(46, 204, 145, 0.12);
  border-color: rgba(46, 204, 145, 0.4);
}
.macro-cmp-tag.flat {
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.32);
}
.macro-cmp-tag.muted {
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--border-subtle);
  font-weight: 700;
}
.macro-cmp-empty {
  margin: 0;
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 11.5px;
}
.ms-pick-release .macro-cmp-empty {
  padding: 14px 0;
  font-size: 13px;
}
.macro-news-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-item {
  border-left: 2px solid var(--border-strong);
  padding-left: 9px;
}
.news-item.bull {
  border-left-color: var(--bull);
}
.news-item.bear {
  border-left-color: var(--bear);
}
.news-item a {
  display: grid;
  gap: 3px;
  text-decoration: none;
}
.news-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-item a:hover .news-title {
  color: var(--accent, #49e1d1);
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.news-meta em {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 96px;
}
.news-meta i {
  font-style: normal;
}
.news-sent {
  margin-left: auto;
  font-style: normal;
  font-weight: 800;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
}
.news-sent.bull {
  color: var(--bull);
  background: rgba(46, 204, 145, 0.12);
}
.news-sent.bear {
  color: var(--bear);
  background: rgba(255, 77, 106, 0.12);
}
.news-sent.flat {
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.1);
}
.news-empty {
  color: var(--text-muted);
  font-size: 11.5px;
}
/* Signal validity: live price travels inside the band; endpoint meanings stay visually distinct. */
.signal-validity {
  overflow: visible !important;
  gap: 14px !important;
  padding: 16px !important;
  border-color: rgba(92, 130, 183, 0.44) !important;
  background: linear-gradient(
    135deg,
    rgba(12, 25, 43, 0.94),
    rgba(10, 19, 33, 0.97)
  ) !important;
}
.signal-validity-scale {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}
.signal-validity-ends {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 10px !important;
}
.signal-validity-label {
  gap: 5px !important;
}
.signal-validity-label small {
  font-size: 11px !important;
}
.signal-validity-label em {
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em;
}
.signal-validity-label.redeem em {
  color: #44d9a6;
}
.signal-validity-label.invalid em {
  color: #ff6685;
}
.signal-validity-track {
  height: 8px !important;
  background: linear-gradient(
    90deg,
    #42d8a0 0%,
    #4a86db 34%,
    #7e6bd0 50%,
    #b35c9a 68%,
    #ff6685 100%
  ) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    0 0 15px rgba(86, 118, 217, 0.2) !important;
}
.signal-validity-now {
  width: 18px !important;
  height: 18px !important;
  border: 4px solid #eef5ff !important;
  background: #172743 !important;
  box-shadow:
    0 0 0 3px #46d8ee,
    0 0 22px rgba(70, 216, 238, 0.9) !important;
  transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.signal-validity-now:before,
.signal-validity-now:after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(75, 218, 239, 0.65);
  border-radius: 50%;
  animation: signal-price-pulse 1.8s ease-out infinite;
}
.signal-validity-now:after {
  animation-delay: 0.9s;
}
.signal-validity-now-price {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  min-width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(92, 220, 239, 0.75);
  border-radius: 6px;
  background: rgba(10, 25, 46, 0.96);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.32);
  color: #eef8ff;
  font:
    800 10px/1 "SF Mono",
    "JetBrains Mono",
    monospace;
  transform: translateX(-50%);
  white-space: nowrap;
}
.signal-validity-now-price:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid rgba(92, 220, 239, 0.75);
  border-bottom: 1px solid rgba(92, 220, 239, 0.75);
  background: rgba(10, 25, 46, 0.96);
  transform: translate(-50%, -4px) rotate(45deg);
}
.signal-validity-foot {
  justify-content: flex-end !important;
  min-height: 14px;
}
.signal-validity-foot small {
  max-width: none !important;
  font-size: 11px !important;
}
.signal-validity.is-invalid .signal-validity-now {
  box-shadow:
    0 0 0 3px var(--text-muted),
    0 0 12px rgba(128, 143, 163, 0.45) !important;
}
.signal-validity.is-invalid .signal-validity-now:before,
.signal-validity.is-invalid .signal-validity-now:after {
  display: none;
}
@keyframes signal-price-pulse {
  0% {
    opacity: 0.9;
    transform: scale(0.72);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
@media (max-width: 680px) {
  .signal-validity {
    padding: 14px !important;
  }
  .signal-validity-scale {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  .signal-validity-ends {
    gap: 8px !important;
  }
  .signal-validity-label small {
    font-size: 11px !important;
  }
  .signal-validity-label em {
    font-size: 12px !important;
  }
  .signal-validity-now-price {
    font-size: 10px;
    padding: 4px 5px;
  }
}
.fear-greed-compact .fear-greed-retry {
  justify-self: start;
}
.fear-greed-details {
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.fear-greed-details summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.fear-greed-details p {
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}
@media (max-width: 680px) {
  .fear-greed-gauge-card.fear-greed-compact {
    padding: 16px !important;
  }
  .fear-greed-compact-grid {
    grid-template-columns: 1fr;
  }
  .fear-greed-compact-tile {
    min-height: auto;
  }
}

/* Microstructure panel: compact horizontal evidence cards.  This final layer
   deliberately wins over legacy meter/card experiments above. */
.okx-microstructure-card {
  padding: 20px !important;
}
.microstructure-conclusion {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 14px 0 0 !important;
  padding: 11px 13px !important;
  border-left: 4px solid var(--text-muted) !important;
  border-radius: 11px !important;
  background: rgba(11, 20, 35, 0.55) !important;
}
.microstructure-conclusion > span {
  display: none !important;
}
.microstructure-conclusion > b {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.microstructure-conclusion p {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.microstructure-conclusion.bull {
  border-left-color: var(--bull) !important;
}
.microstructure-conclusion.bear {
  border-left-color: var(--bear) !important;
}
#okxMicrostructureCard .microstructure-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}
#okxMicrostructureCard .microstructure-item {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 132px !important;
  padding: 14px !important;
  gap: 0 !important;
  border: 1px solid rgba(105, 138, 186, 0.28) !important;
  border-radius: 13px !important;
  background: linear-gradient(
    145deg,
    rgba(28, 40, 61, 0.82),
    rgba(14, 23, 39, 0.94)
  ) !important;
}
#okxMicrostructureCard .microstructure-item > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.microstructure-item > div:first-child > span {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.microstructure-item > div:first-child i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  border-radius: 7px !important;
  background: rgba(154, 164, 178, 0.14) !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.microstructure-item.bull > div:first-child i {
  background: rgba(0, 212, 170, 0.14) !important;
  color: var(--bull) !important;
}
.microstructure-item.bear > div:first-child i {
  background: rgba(255, 77, 106, 0.14) !important;
  color: var(--bear) !important;
}
#okxMicrostructureCard .microstructure-item > b {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 9px 0 4px !important;
  overflow: hidden !important;
  color: var(--text-primary) !important;
  font:
    800 clamp(20px, 1.55vw, 26px) / 1.15 "SF Mono",
    "JetBrains Mono",
    monospace !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.microstructure-item.bull > b {
  color: var(--bull) !important;
}
.microstructure-item.bear > b {
  color: var(--bear) !important;
}
.microstructure-item b .microstructure-value-main {
  display: inline !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}
.microstructure-item b .microstructure-value-sub {
  display: none !important;
}
#okxMicrostructureCard .microstructure-item > small {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#okxMicrostructureCard .microstructure-meter {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 4px !important;
  min-height: 4px !important;
  margin-top: auto !important;
  border-radius: 999px !important;
  background: rgba(123, 146, 179, 0.2) !important;
  overflow: hidden !important;
}
#okxMicrostructureCard .microstructure-meter:after,
#okxMicrostructureCard .microstructure-meter i {
  display: none !important;
}
#okxMicrostructureCard .microstructure-meter em {
  display: block !important;
  position: static !important;
  width: var(--micro-level) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--text-muted) !important;
  transform: none !important;
}
#okxMicrostructureCard .microstructure-item.bull .microstructure-meter em {
  background: var(--bull) !important;
}
#okxMicrostructureCard .microstructure-item.bear .microstructure-meter em {
  background: var(--bear) !important;
}
.microstructure-alert {
  min-width: 0 !important;
  margin: 12px 0 0 !important;
  overflow: hidden !important;
  color: var(--warn) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (max-width: 900px) {
  .microstructure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .microstructure-grid {
    grid-template-columns: 1fr !important;
  }
  .microstructure-conclusion {
    gap: 8px !important;
  }
  .microstructure-conclusion p {
    font-size: 11px !important;
  }
  .microstructure-item {
    height: 120px !important;
  }
}

/* A fixed centre mark makes every microstructure scale read as negative / zero / positive. */
.microstructure-meter {
  background: linear-gradient(
    90deg,
    rgba(255, 107, 139, 0.13),
    rgba(125, 145, 177, 0.13) 48%,
    rgba(62, 207, 174, 0.13)
  ) !important;
}
.microstructure-meter:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: #a9b9d0;
  box-shadow:
    0 0 0 1px rgba(10, 19, 33, 0.75),
    0 0 8px rgba(169, 185, 208, 0.28);
  transform: translate(-50%, -50%);
}
.microstructure-meter i {
  z-index: 3;
}
.microstructure-conclusion {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center;
  gap: 6px 12px;
  margin: 14px 0 0 !important;
  padding: 10px 13px !important;
  border-left-color: #7b91b4 !important;
  background: linear-gradient(
    90deg,
    rgba(54, 80, 115, 0.2),
    rgba(8, 16, 29, 0.34)
  ) !important;
}
.microstructure-conclusion > span {
  font-size: 10px !important;
}
.microstructure-conclusion > b {
  font-size: 17px !important;
}
.microstructure-conclusion p {
  grid-column: auto !important;
  margin: 0 !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}
.microstructure-conclusion.bull {
  border-left-color: var(--bull) !important;
}
.microstructure-conclusion.bear {
  border-left-color: var(--bear) !important;
}
@media (max-width: 1080px) {
  .microstructure-conclusion {
    grid-template-columns: auto 1fr !important;
  }
  .microstructure-conclusion p {
    grid-column: 1/-1 !important;
  }
}
@media (max-width: 680px) {
  .microstructure-conclusion {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .microstructure-conclusion p {
    grid-column: auto !important;
  }
}

/* The evidence sits inside the K-line card, immediately after the chart footer. */
#mainChartCard > .okx-microstructure-card {
  width: 100%;
  margin: 18px 0 0 !important;
}

/* Additional market-structure evidence stays in horizontal cards so values and
   zero-line meters retain their readable width. */
.microstructure-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.microstructure-item {
  grid-template-columns: minmax(0, 1.2fr) minmax(145px, 0.8fr) !important;
  grid-template-rows: auto 1fr !important;
  column-gap: 16px;
  min-height: 116px !important;
}
.microstructure-item > div:first-child {
  grid-column: 1/-1;
}
.microstructure-item > b {
  align-self: center;
}
.microstructure-item > .microstructure-meter {
  align-self: center;
}
.microstructure-item > small {
  grid-column: 1/-1;
  align-self: end;
}
.microstructure-item b .microstructure-value-sub {
  margin-top: 4px;
}
@media (max-width: 900px) {
  .microstructure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .microstructure-grid {
    grid-template-columns: 1fr !important;
  }
  .microstructure-item {
    grid-template-columns: minmax(0, 1fr) 120px !important;
  }
}

/* Stable, extensible alert slot below the signal gauge. It keeps its footprint
   even when no alert qualifies, so projections and validity ranges never jump. */
.signal-alert-slot {
  display: flex;
  align-items: center;
  min-height: 46px;
  margin: 8px 0 10px;
  padding: 0 2px;
}
.signal-alert-slot.is-empty {
  visibility: hidden;
}
.signal-alert {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 8px 11px 8px 16px;
  border: 1px solid rgba(245, 197, 78, 0.4);
  border-left: 3px solid #f5c54e;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    rgba(245, 197, 78, 0.12),
    rgba(245, 197, 78, 0.025)
  );
  box-shadow: inset 0 1px 0 rgba(255, 232, 154, 0.1);
  color: #d8e2f3;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.signal-alert:before {
  content: "";
  position: absolute;
  left: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd15d;
  box-shadow: 0 0 8px rgba(255, 209, 93, 0.95);
}
.signal-alert-slot.warning .signal-alert {
  border-color: rgba(255, 190, 74, 0.7);
  background: linear-gradient(
    90deg,
    rgba(255, 181, 54, 0.17),
    rgba(245, 197, 78, 0.035)
  );
}
.signal-alert-slot.caution .signal-alert {
  border-color: rgba(245, 197, 78, 0.48);
}
.signal-alert-slot.is-visible .signal-alert {
  animation: signal-alert-enter 0.28s ease-out;
}
@keyframes signal-alert-enter {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 680px) {
  .signal-alert-slot {
    min-height: 44px;
    margin: 7px 0 9px;
  }
  .signal-alert {
    min-height: 36px;
    font-size: 11px;
  }
}

/* Final microstructure layout contract: nine cards always remain a 3 × 3 grid. */
#okxMicrostructureCard .microstructure-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
#okxMicrostructureCard .microstructure-item {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: clamp(84px, 7cqw, 100px) !important;
  height: auto !important;
  padding: clamp(9px, 0.8cqw, 13px) clamp(10px, 0.9cqw, 14px) !important;
  gap: 0 !important;
  border: 1px solid rgba(190, 210, 240, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}
#okxMicrostructureCard .microstructure-item:hover {
  border-color: rgba(87, 220, 234, 0.5) !important;
}
#okxMicrostructureCard .microstructure-item > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-width: 0 !important;
}
#okxMicrostructureCard .microstructure-item > div:first-child > span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #8a9bb4 !important;
  font-size: clamp(10px, 0.4cqw + 7.6px, 12px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#okxMicrostructureCard .microstructure-item > div:first-child i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 199, 102, 0.14) !important;
  color: #ffc766 !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
/* 偏多=绿 / 偏空=红，与全站一致（--bull 绿、--bear 红），并与本卡下方进度条一致。
   Bull = green / bear = red, matching the site-wide convention and this card's meter. */
#okxMicrostructureCard .microstructure-item.bull > div:first-child i {
  background: rgba(22, 199, 132, 0.16) !important;
  color: #16c784 !important;
}
#okxMicrostructureCard .microstructure-item.bear > div:first-child i {
  background: rgba(246, 70, 93, 0.16) !important;
  color: #f6465d !important;
}
#okxMicrostructureCard .microstructure-item > b {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: clamp(5px, 0.55cqw, 8px) 0 3px !important;
  overflow: hidden !important;
  color: #eef3fb !important;
  font-family: "SF Mono", "JetBrains Mono", monospace !important;
  font-size: clamp(14px, 1cqw + 9px, 20px) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#okxMicrostructureCard .microstructure-item.bull > b {
  color: #16c784 !important;
}
#okxMicrostructureCard .microstructure-item.bear > b {
  color: #f6465d !important;
}
#okxMicrostructureCard .microstructure-item.unavailable > b {
  color: #8a9bb4 !important;
}
#okxMicrostructureCard .microstructure-item > small {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #8a9bb4 !important;
  font-size: clamp(10px, 0.3cqw + 7.8px, 11px) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#okxMicrostructureCard .microstructure-meter {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 4px !important;
  min-height: 4px !important;
  margin-top: auto !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}
#okxMicrostructureCard .microstructure-meter:after,
#okxMicrostructureCard .microstructure-meter i {
  display: none !important;
}
#okxMicrostructureCard .microstructure-meter em {
  display: block !important;
  position: static !important;
  width: var(--micro-level) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #ffc766 !important;
  transform: none !important;
}
#okxMicrostructureCard .microstructure-item.bull .microstructure-meter em {
  background: #16c784 !important;
}
#okxMicrostructureCard .microstructure-item.bear .microstructure-meter em {
  background: #f6465d !important;
}
#okxMicrostructureCard .microstructure-alert {
  min-width: 0 !important;
  margin: 12px 0 0 !important;
  overflow: hidden !important;
  color: #ffc766 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@media (max-width: 900px) {
  #okxMicrostructureCard .microstructure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  #okxMicrostructureCard .microstructure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #okxMicrostructureCard .microstructure-item {
    height: auto !important;
  }
}

/* OKX evidence uses compact instrument-like cards; period returns use a shared
   baseline so magnitude is readable at a glance without adding another chart. */
.okx-microstructure-card {
  padding: 20px !important;
  background: linear-gradient(
    135deg,
    rgba(18, 29, 47, 0.96),
    rgba(10, 17, 30, 0.97)
  ) !important;
}
.microstructure-head {
  align-items: center;
}
.microstructure-head p {
  margin-top: 5px !important;
}
.microstructure-grid {
  gap: 12px !important;
  margin-top: 16px !important;
}
.microstructure-item {
  display: grid !important;
  grid-template-rows: auto auto 8px 1fr;
  gap: 9px !important;
  min-height: 142px;
  padding: 16px !important;
  border-color: rgba(105, 138, 186, 0.25) !important;
  border-radius: 14px !important;
  background: linear-gradient(
    145deg,
    rgba(28, 40, 61, 0.82),
    rgba(14, 23, 39, 0.94)
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.12) !important;
}
.microstructure-item > div:first-child {
  display: flex !important;
  align-items: center !important;
}
.microstructure-item > div:first-child i {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
.microstructure-item.bull > div:first-child i,
.microstructure-item.bull b .microstructure-value-main {
  color: #43d3b3 !important;
}
.microstructure-item.bear > div:first-child i,
.microstructure-item.bear b .microstructure-value-main {
  color: #ff708a !important;
}
.microstructure-item b {
  font-size: 17px !important;
  letter-spacing: -0.55px !important;
}
.microstructure-item small {
  align-self: end;
  font-size: 10px !important;
}
.microstructure-meter {
  position: relative !important;
  display: block !important;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(123, 146, 179, 0.13) !important;
  overflow: visible;
}
.microstructure-meter em {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--micro-level);
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(129, 148, 178, 0.45),
    rgba(126, 159, 207, 0.82)
  );
}
.microstructure-meter i {
  position: absolute;
  top: 50%;
  left: var(--micro-level);
  width: 15px;
  height: 15px;
  border: 2px solid #f4f7fb;
  border-radius: 50%;
  background: #77869b;
  box-shadow:
    0 0 0 2px rgba(119, 134, 155, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
}
.microstructure-item.bull .microstructure-meter em {
  background: linear-gradient(90deg, rgba(70, 211, 179, 0.3), #3ac9a8);
}
.microstructure-item.bull .microstructure-meter i {
  background: #3bd1b0;
  box-shadow:
    0 0 0 2px rgba(59, 209, 176, 0.15),
    0 0 13px rgba(59, 209, 176, 0.58);
}
.microstructure-item.bear .microstructure-meter em {
  background: linear-gradient(90deg, rgba(255, 112, 138, 0.25), #ff6684);
}
.microstructure-item.bear .microstructure-meter i {
  background: #ff6a88;
  box-shadow:
    0 0 0 2px rgba(255, 106, 136, 0.15),
    0 0 13px rgba(255, 106, 136, 0.54);
}
.microstructure-conclusion {
  margin-top: 14px !important;
  padding: 10px 13px !important;
  background: rgba(8, 16, 29, 0.48) !important;
}
.microstructure-conclusion p {
  font-size: 10px !important;
}
.okx-microstructure-card > #periodChangeCard.chart-periods {
  margin: 18px 0 0 !important;
  padding: 16px 2px 0 !important;
  border-top: 1px solid rgba(112, 145, 189, 0.22) !important;
  background: transparent !important;
}
.okx-microstructure-card > #periodChangeCard.chart-periods h2 {
  margin: 0 0 12px;
  padding: 0 1px;
  font-size: 15px !important;
}
.okx-microstructure-card > #periodChangeCard.chart-periods > #changeTags {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  height: 178px;
}
.period-return-bar {
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  gap: 7px;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
}
.period-return-bar > b {
  font:
    800 13px/1 "SF Mono",
    "JetBrains Mono",
    monospace;
}
.period-return-bar > i {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  height: 100%;
  min-height: 70px;
  border-bottom: 1px solid rgba(133, 156, 192, 0.18);
}
.period-return-bar > i > em {
  display: block;
  width: min(58px, 72%);
  min-height: 4px;
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(180deg, #4bddc4, #239c91);
  box-shadow: 0 0 14px rgba(58, 205, 177, 0.18);
}
.period-return-bar.bear > i > em {
  background: linear-gradient(180deg, #ff718b, #dc4669);
  box-shadow: 0 0 14px rgba(255, 93, 126, 0.18);
}
.period-return-bar small {
  color: var(--text-secondary) !important;
  font:
    700 11px/1 "SF Mono",
    "JetBrains Mono",
    monospace !important;
}
@media (max-width: 1080px) {
  .microstructure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .okx-microstructure-card > #periodChangeCard.chart-periods > #changeTags {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    height: 156px;
    row-gap: 10px;
  }
  .period-return-bar > i {
    height: 80px;
  }
}
@media (max-width: 680px) {
  .okx-microstructure-card {
    padding: 16px !important;
  }
  .microstructure-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .microstructure-item {
    min-height: 134px;
    padding: 12px !important;
  }
  .microstructure-item b {
    font-size: 14px !important;
  }
  .okx-microstructure-card > #periodChangeCard.chart-periods > #changeTags {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 8px;
    height: auto;
    row-gap: 14px;
  }
  .period-return-bar > i {
    height: 66px;
    min-height: 66px;
  }
  .period-return-bar > b {
    font-size: 11px;
  }
}
@media (max-width: 390px) {
  .microstructure-grid {
    grid-template-columns: 1fr !important;
  }
}

/* OKX microstructure: neutral evidence stays out of the initial scan, while
   the visible card count determines the desktop grid (even: 2 columns; odd: 3). */
#okxMicrostructureCard .microstructure-grid.is-even {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#okxMicrostructureCard .microstructure-grid.is-odd {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#okxMicrostructureCard .microstructure-neutral-group {
  margin-top: 14px;
}
#okxMicrostructureCard .microstructure-neutral-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(105, 138, 186, 0.25);
  border-radius: 12px;
  background: rgba(8, 16, 29, 0.54);
  color: var(--text-secondary);
  cursor: pointer;
  font: 700 13px/1.2 system-ui, sans-serif;
}
#okxMicrostructureCard .microstructure-neutral-toggle b {
  color: var(--text-primary);
  font: inherit;
}
#okxMicrostructureCard .microstructure-neutral-toggle:hover,
#okxMicrostructureCard .microstructure-neutral-toggle:focus-visible {
  border-color: rgba(51, 213, 235, 0.7);
  color: #dffaff;
  outline: none;
}
#okxMicrostructureCard .microstructure-neutral-grid {
  margin-top: 12px !important;
}
#okxMicrostructureCard .microstructure-neutral-grid[hidden],
#okxMicrostructureCard .microstructure-neutral-grid.is-collapsed {
  display: none !important;
}

/* Card labels are flex rows, so explicitly lock their explanation controls to
   a square circle instead of allowing surrounding layout rules to stretch them. */
#okxMicrostructureCard .help-dot,
#okxMicrostructureCard .microstructure-item > div > span .help-dot {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  inline-size: 16px !important;
  block-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  aspect-ratio: 1 / 1 !important;
  align-self: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

/* Historical returns are intentionally their own evidence card, separate from
   the live order-book card. Keep it in the chart column on desktop. */
#mainChartCard > #periodChangeCard.chart-periods {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(105, 138, 186, 0.32) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(17, 29, 47, 0.98), rgba(10, 19, 33, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
#mainChartCard > #periodChangeCard.chart-periods h2 {
  margin: 0 0 14px !important;
  font-size: 16px !important;
}
#mainChartCard > #periodChangeCard.chart-periods > #changeTags {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  align-items: end;
  gap: 10px !important;
  height: 178px;
}
#mainChartCard > #periodChangeCard .period-return-bar > b {
  display: flex !important;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  width: 100% !important;
  min-width: 0;
  overflow: visible;
  text-align: center !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The quote container must never flash as a whole. Only .price-digit spans
   marked by the renderer as changed receive the directional animation. */
.hero #price.price-up,
.hero #price.price-down {
  animation: none !important;
}

/* Keep the current-price marker crisp, while a restrained breathing halo makes
   its live position easier to find on the signal range. The halo is a pseudo
   element because the marker's static outline intentionally uses !important. */
.signal-validity:not(.is-invalid) .signal-validity-now::before {
  inset: -14px !important;
  border: 0 !important;
  background: radial-gradient(
    circle,
    rgba(220, 251, 255, 0.42) 0%,
    rgba(70, 216, 238, 0.24) 32%,
    rgba(70, 216, 238, 0) 72%
  );
  filter: blur(2px);
  animation: signal-current-cursor-halo 2.4s ease-in-out infinite !important;
  pointer-events: none;
}
@keyframes signal-current-cursor-halo {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.78);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .signal-validity:not(.is-invalid) .signal-validity-now::before,
  .signal-validity:not(.is-invalid) .signal-validity-now::after {
    animation: none;
  }
}
@media (max-width: 1080px) {
  #mainChartCard > #periodChangeCard.chart-periods > #changeTags {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    height: 156px;
    row-gap: 10px !important;
  }
}
@media (max-width: 680px) {
  #mainChartCard > #periodChangeCard.chart-periods {
    padding: 14px !important;
  }
  #mainChartCard > #periodChangeCard.chart-periods > #changeTags {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    height: auto;
    row-gap: 14px !important;
  }
}

/* =================================================================
   Light-mode surface fixes: make dark-hardcoded cards, buttons and
   panels readable on the bright canvas without rewriting the entire
   dark-first stylesheet.
   ================================================================= */

html[data-theme="light"] .card,
html[data-theme="light"] .status,
html[data-theme="light"] .optional,
html[data-theme="light"] select,
html[data-theme="light"] button,
html[data-theme="light"] .metric,
html[data-theme="light"] pre,
html[data-theme="light"] .signal-basis-chip,
html[data-theme="light"] .signal-validity,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .control-popover-panel,
html[data-theme="light"] #versionLog,
html[data-theme="light"] .personal-entry-card,
html[data-theme="light"] .index-card {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

html[data-theme="light"] .metric,
html[data-theme="light"] pre,
html[data-theme="light"] .change-card span,
html[data-theme="light"] .chart-periods span,
html[data-theme="light"] .signal-validity-scale,
html[data-theme="light"] .signal-validity-track,
html[data-theme="light"] .fear-greed-summary div,
html[data-theme="light"] .personal-entry-card {
  background: var(--bg-surface-2);
}

html[data-theme="light"] .signal-projection,
html[data-theme="light"] .fear-greed-gauge-card.fear-greed-compact,
html[data-theme="light"] .macro-event-tile {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-2)) !important;
}

html[data-theme="light"] .chart-periods span,
html[data-theme="light"] .change-card span {
  border-color: var(--border-subtle);
}

html[data-theme="light"] .card h2,
html[data-theme="light"] .card h3,
html[data-theme="light"] .card strong,
html[data-theme="light"] .signal,
html[data-theme="light"] .hero strong,
html[data-theme="light"] .metric,
html[data-theme="light"] .change-card b,
html[data-theme="light"] .chart-periods b,
html[data-theme="light"] .signal-basis-chip,
html[data-theme="light"] .signal-validity-head > b,
html[data-theme="light"] .signal-validity-foot b,
html[data-theme="light"] .index-card b,
html[data-theme="light"] .personal-entry-card b {
  color: var(--text-primary);
}

html[data-theme="light"] p,
html[data-theme="light"] .muted,
html[data-theme="light"] .meta,
html[data-theme="light"] .status,
html[data-theme="light"] .metric span,
html[data-theme="light"] pre,
html[data-theme="light"] #coverage,
html[data-theme="light"] .chart-caption,
html[data-theme="light"] .chart-pattern-legend,
html[data-theme="light"] .change-card small,
html[data-theme="light"] .chart-periods small,
html[data-theme="light"] .signal-projection > span,
html[data-theme="light"] .signal-projection small,
html[data-theme="light"] .signal-validity-head > span,
html[data-theme="light"] .signal-validity-label small,
html[data-theme="light"] .signal-validity-label em,
html[data-theme="light"] .signal-validity-foot small,
html[data-theme="light"] .index-card span,
html[data-theme="light"] .personal-entry-card small,
html[data-theme="light"] .fear-greed-head p,
html[data-theme="light"] footer,
html[data-theme="light"] #signalReason {
  color: var(--text-secondary);
}

html[data-theme="light"] button:hover,
html[data-theme="light"] button.active,
html[data-theme="light"] select:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

html[data-theme="light"] .bull {
  color: var(--bull);
}
html[data-theme="light"] .bear {
  color: var(--bear);
}
html[data-theme="light"] .flat {
  color: var(--warn);
}

html[data-theme="light"] .help-dot:after {
  background: #17263b;
  color: #f7fbff;
  border-color: #52708e;
}

html[data-theme="light"] #chartTooltip {
  background: rgba(255, 255, 255, 0.80);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(43, 64, 88, 0.22);
}

html[data-theme="light"] #chartTooltip b {
  color: var(--text-primary);
}

html[data-theme="light"] .range-extreme {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

html[data-theme="light"] ::-webkit-scrollbar {
  background: var(--bg-surface-2);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

html[data-theme="light"] .gauge-strength {
  background: var(--bg-surface-2);
}
html[data-theme="light"] .signal-alert {
  color: var(--text-primary);
}

html[data-theme="light"] #okxMicrostructureCard .microstructure-item {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-subtle) !important;
}
html[data-theme="light"] #okxMicrostructureCard .microstructure-item > div:first-child > span {
  color: var(--text-secondary) !important;
}

html[data-theme="light"] .signal-validity-now-price {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: rgba(0, 150, 170, 0.45) !important;
  box-shadow: 0 7px 18px rgba(15, 30, 55, 0.12) !important;
}
html[data-theme="light"] .signal-validity-now-price:after {
  background: var(--bg-surface-2) !important;
  border-color: rgba(0, 150, 170, 0.45) !important;
}

/* Header utility buttons (#langToggle / #themeToggle) are styled with an ID
   selector in the base CSS, so the light override must out-specify it. */
html[data-theme="light"] .controls #langToggle,
html[data-theme="light"] .controls #themeToggle {
  color: var(--text-primary);
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
}

/* Toolbar chart controls keep dark glass surfaces in dark mode; lighten them
   for light mode. Foundation.css uses !important, so these must too. */
html[data-theme="light"] .toolbar .control-trigger,
html[data-theme="light"] .toolbar .chart-display-controls .control-trigger {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
html[data-theme="light"] .toolbar .control-trigger:hover,
html[data-theme="light"] .toolbar .control-popover.is-open .control-trigger,
html[data-theme="light"] .toolbar .chart-display-controls .control-trigger:hover,
html[data-theme="light"] .toolbar .chart-display-controls .control-popover.is-open .control-trigger {
  background: var(--bg-elevated) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="light"] .toolbar .control-trigger .control-label,
html[data-theme="light"] .toolbar .chart-display-controls .control-label,
html[data-theme="light"] .toolbar .control-trigger i,
html[data-theme="light"] .toolbar .chart-display-controls .control-trigger i {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .toolbar .control-trigger b,
html[data-theme="light"] .toolbar .chart-display-controls .control-trigger b {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .toolbar .zoom-tools {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-subtle) !important;
}
html[data-theme="light"] .toolbar .zoom-tools button,
html[data-theme="light"] .toolbar .zoom-tools span {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-color: var(--border-subtle) !important;
}
html[data-theme="light"] .toolbar .pan-tools {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-subtle) !important;
}
html[data-theme="light"] .toolbar .pan-tools button,
html[data-theme="light"] .toolbar .pan-tools #panLabel {
  color: var(--text-primary) !important;
}

/* OKX microstructure card: convert the dark instrument panel to a light
   surface in light mode so it reads on the bright canvas. */
html[data-theme="light"] .okx-microstructure-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
}
html[data-theme="light"] .microstructure-head p,
html[data-theme="light"] .microstructure-conclusion > span {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .microstructure-conclusion {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="light"] .microstructure-conclusion p {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .microstructure-item.bull > div:first-child i,
html[data-theme="light"] .microstructure-item.bull b .microstructure-value-main {
  color: var(--bull) !important;
}
html[data-theme="light"] .microstructure-item.bear > div:first-child i,
html[data-theme="light"] .microstructure-item.bear b .microstructure-value-main {
  color: var(--bear) !important;
}
html[data-theme="light"] #okxMicrostructureCard .microstructure-neutral-toggle {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
html[data-theme="light"] #okxMicrostructureCard .microstructure-neutral-toggle b {
  color: var(--text-primary) !important;
}
html[data-theme="light"] #okxMicrostructureCard .microstructure-neutral-toggle:hover,
html[data-theme="light"] #okxMicrostructureCard .microstructure-neutral-toggle:focus-visible {
  border-color: var(--accent-cyan) !important;
  color: var(--text-primary) !important;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .card,
  html[data-theme="auto"] .status,
  html[data-theme="auto"] .optional,
  html[data-theme="auto"] select,
  html[data-theme="auto"] button,
  html[data-theme="auto"] .metric,
  html[data-theme="auto"] pre,
  html[data-theme="auto"] .signal-basis-chip,
  html[data-theme="auto"] .signal-validity,
  html[data-theme="auto"] .dropdown-menu,
  html[data-theme="auto"] .control-popover-panel,
  html[data-theme="auto"] #versionLog,
  html[data-theme="auto"] .personal-entry-card,
  html[data-theme="auto"] .index-card {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }

  html[data-theme="auto"] .metric,
  html[data-theme="auto"] pre,
  html[data-theme="auto"] .change-card span,
  html[data-theme="auto"] .chart-periods span,
  html[data-theme="auto"] .signal-validity-scale,
  html[data-theme="auto"] .signal-validity-track,
  html[data-theme="auto"] .fear-greed-summary div,
  html[data-theme="auto"] .personal-entry-card {
    background: var(--bg-surface-2);
  }

  html[data-theme="auto"] .signal-projection,
  html[data-theme="auto"] .fear-greed-gauge-card.fear-greed-compact,
  html[data-theme="auto"] .macro-event-tile {
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-surface-2)) !important;
  }

  html[data-theme="auto"] .chart-periods span,
  html[data-theme="auto"] .change-card span {
    border-color: var(--border-subtle);
  }

  html[data-theme="auto"] .card h2,
  html[data-theme="auto"] .card h3,
  html[data-theme="auto"] .card strong,
  html[data-theme="auto"] .signal,
  html[data-theme="auto"] .hero strong,
  html[data-theme="auto"] .metric,
  html[data-theme="auto"] .change-card b,
  html[data-theme="auto"] .chart-periods b,
  html[data-theme="auto"] .signal-basis-chip,
  html[data-theme="auto"] .signal-validity-head > b,
  html[data-theme="auto"] .signal-validity-foot b,
  html[data-theme="auto"] .index-card b,
  html[data-theme="auto"] .personal-entry-card b {
    color: var(--text-primary);
  }

  html[data-theme="auto"] p,
  html[data-theme="auto"] .muted,
  html[data-theme="auto"] .meta,
  html[data-theme="auto"] .status,
  html[data-theme="auto"] .metric span,
  html[data-theme="auto"] pre,
  html[data-theme="auto"] #coverage,
  html[data-theme="auto"] .chart-caption,
  html[data-theme="auto"] .chart-pattern-legend,
  html[data-theme="auto"] .change-card small,
  html[data-theme="auto"] .chart-periods small,
  html[data-theme="auto"] .signal-projection > span,
  html[data-theme="auto"] .signal-projection small,
  html[data-theme="auto"] .signal-validity-head > span,
  html[data-theme="auto"] .signal-validity-label small,
  html[data-theme="auto"] .signal-validity-label em,
  html[data-theme="auto"] .signal-validity-foot small,
  html[data-theme="auto"] .index-card span,
  html[data-theme="auto"] .personal-entry-card small,
  html[data-theme="auto"] .fear-greed-head p,
  html[data-theme="auto"] footer,
  html[data-theme="auto"] #signalReason {
    color: var(--text-secondary);
  }

  html[data-theme="auto"] button:hover,
  html[data-theme="auto"] button.active,
  html[data-theme="auto"] select:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
  }

  html[data-theme="auto"] .bull {
    color: var(--bull);
  }
  html[data-theme="auto"] .bear {
    color: var(--bear);
  }
  html[data-theme="auto"] .flat {
    color: var(--warn);
  }

  html[data-theme="auto"] .help-dot:after {
    background: #17263b;
    color: #f7fbff;
    border-color: #52708e;
  }

  html[data-theme="auto"] #chartTooltip {
    background: rgba(255, 255, 255, 0.80);
    border-color: var(--border-strong);
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(43, 64, 88, 0.22);
  }

  html[data-theme="auto"] #chartTooltip b {
    color: var(--text-primary);
  }

  html[data-theme="auto"] .range-extreme {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--text-primary);
    border-color: var(--border-strong);
  }

  html[data-theme="auto"] ::-webkit-scrollbar {
    background: var(--bg-surface-2);
  }
  html[data-theme="auto"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
  }

  html[data-theme="auto"] .gauge-strength {
    background: var(--bg-surface-2);
  }
  html[data-theme="auto"] .signal-alert {
    color: var(--text-primary);
  }

  html[data-theme="auto"] #okxMicrostructureCard .microstructure-item {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-subtle) !important;
  }
  html[data-theme="auto"] #okxMicrostructureCard .microstructure-item > div:first-child > span {
    color: var(--text-secondary) !important;
  }

  html[data-theme="auto"] .signal-validity-now-price {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
    border-color: rgba(0, 150, 170, 0.45) !important;
    box-shadow: 0 7px 18px rgba(15, 30, 55, 0.12) !important;
  }
  html[data-theme="auto"] .signal-validity-now-price:after {
    background: var(--bg-surface-2) !important;
    border-color: rgba(0, 150, 170, 0.45) !important;
  }

  html[data-theme="auto"] .controls #langToggle,
  html[data-theme="auto"] .controls #themeToggle {
    color: var(--text-primary);
    background: var(--bg-surface-2);
    border-color: var(--border-strong);
  }

  html[data-theme="auto"] .toolbar .control-trigger,
  html[data-theme="auto"] .toolbar .chart-display-controls .control-trigger {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  }
  html[data-theme="auto"] .toolbar .control-trigger:hover,
  html[data-theme="auto"] .toolbar .control-popover.is-open .control-trigger,
  html[data-theme="auto"] .toolbar .chart-display-controls .control-trigger:hover,
  html[data-theme="auto"] .toolbar .chart-display-controls .control-popover.is-open .control-trigger {
    background: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
  }
  html[data-theme="auto"] .toolbar .control-trigger .control-label,
  html[data-theme="auto"] .toolbar .chart-display-controls .control-label,
  html[data-theme="auto"] .toolbar .control-trigger i,
  html[data-theme="auto"] .toolbar .chart-display-controls .control-trigger i {
    color: var(--text-secondary) !important;
  }
  html[data-theme="auto"] .toolbar .control-trigger b,
  html[data-theme="auto"] .toolbar .chart-display-controls .control-trigger b {
    color: var(--text-primary) !important;
  }
  html[data-theme="auto"] .toolbar .zoom-tools {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-subtle) !important;
  }
  html[data-theme="auto"] .toolbar .zoom-tools button,
  html[data-theme="auto"] .toolbar .zoom-tools span {
    color: var(--text-primary) !important;
    background: transparent !important;
    border-color: var(--border-subtle) !important;
  }
  html[data-theme="auto"] .toolbar .pan-tools {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-subtle) !important;
  }
  html[data-theme="auto"] .toolbar .pan-tools button,
  html[data-theme="auto"] .toolbar .pan-tools #panLabel {
    color: var(--text-primary) !important;
  }

  html[data-theme="auto"] .okx-microstructure-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
  }
  html[data-theme="auto"] .microstructure-head p,
  html[data-theme="auto"] .microstructure-conclusion > span {
    color: var(--text-secondary) !important;
  }
  html[data-theme="auto"] .microstructure-conclusion {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-strong) !important;
  }
  html[data-theme="auto"] .microstructure-conclusion p {
    color: var(--text-secondary) !important;
  }
  html[data-theme="auto"] .microstructure-item.bull > div:first-child i,
  html[data-theme="auto"] .microstructure-item.bull b .microstructure-value-main {
    color: var(--bull) !important;
  }
  html[data-theme="auto"] .microstructure-item.bear > div:first-child i,
  html[data-theme="auto"] .microstructure-item.bear b .microstructure-value-main {
    color: var(--bear) !important;
  }
  html[data-theme="auto"] #okxMicrostructureCard .microstructure-neutral-toggle {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
  }
  html[data-theme="auto"] #okxMicrostructureCard .microstructure-neutral-toggle b {
    color: var(--text-primary) !important;
  }
  html[data-theme="auto"] #okxMicrostructureCard .microstructure-neutral-toggle:hover,
  html[data-theme="auto"] #okxMicrostructureCard .microstructure-neutral-toggle:focus-visible {
    border-color: var(--accent-cyan) !important;
    color: var(--text-primary) !important;
  }
}

/* BTC investment calendar: a table-first risk window, intentionally separate
   from the compact macro-context tiles. */
.investment-calendar-card {
  overflow: visible;
  border: 1px solid rgba(66, 209, 191, .28) !important;
  background: linear-gradient(145deg, rgba(13, 28, 43, .98), rgba(10, 16, 28, .98)) !important;
}

/* Local API credential centre. Keys are write-only: the server reports only
   whether one is saved, never the secret itself. */
#apiCenterToggle { white-space:nowrap; }
.api-center-modal > section { width:min(760px,calc(100vw - 28px)); max-height:min(82vh,820px); display:flex; flex-direction:column; overflow:hidden; }
.api-center-modal header { flex-shrink:0; }
.api-center-modal header > div { display:grid; gap:3px; }.api-center-modal header small { color:var(--text-muted); font-size:11px; font-weight:400; }
.api-center-body { padding:16px 20px 20px; display:grid; gap:10px; flex:1 1 auto; min-height:0; overflow:auto; }.api-center-body h3 { margin:10px 0 2px; color:#cbd8e9; font-size:13px; }
.api-center-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px; border:1px solid rgba(137,166,199,.18); border-radius:10px; background:rgba(8,20,34,.62); }.api-center-row.free { background:rgba(25,103,93,.10); }.api-center-row.required { border-color:rgba(255,187,62,.38); }
.api-center-row > div { min-width:0; }.api-center-row b { display:block; color:var(--text-primary); font-size:13px; }.api-center-row b small { margin-left:7px; color:#ffcb69; font-size:10px; }.api-center-row span,.api-center-row p { display:block; margin:4px 0 0; color:var(--text-secondary); font-size:11px; line-height:1.45; }.api-center-row p { color:var(--text-muted); }.api-center-row em { color:#68ead7; font-style:normal; font-size:12px; white-space:nowrap; }
.api-center-row form { display:flex; flex:0 0 280px; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.api-center-row input { box-sizing:border-box; width:100%; min-width:0; padding:8px 9px; border:1px solid rgba(137,166,199,.28); border-radius:7px; color:var(--text-primary); background:rgba(3,12,23,.72); font-size:11px; }.api-center-row input::placeholder { color:#62748c; }.api-center-row button { padding:7px 10px; border:1px solid rgba(53,223,197,.45); border-radius:7px; color:#78f7e5; background:rgba(19,129,116,.16); font-size:11px; cursor:pointer; }.api-center-row .api-clear { border-color:rgba(255,119,119,.36); color:#ff9b9b; background:rgba(160,50,50,.12); }
.coingecko-usage { margin-top:9px; padding:9px; border-radius:7px; background:rgba(18,109,94,.12); }.coingecko-usage > div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.coingecko-usage strong { color:#72efd9; font-size:18px; }.coingecko-usage i { display:block; height:5px; margin:7px 0; overflow:hidden; border-radius:99px; background:rgba(174,194,215,.18); }.coingecko-usage i span { display:block; height:100%; min-width:2px; border-radius:inherit; background:#39d4b7; }.coingecko-usage p,.coingecko-usage small { margin:0; color:#aebed1; font-size:10px; line-height:1.55; }.coingecko-usage.muted { color:var(--text-muted); background:rgba(137,166,199,.08); }.coingecko-usage.error { color:#ffba8f; background:rgba(166,83,36,.12); }
.api-center-row .api-endpoint-note { margin-top:7px; color:#9fb3c8; font-size:10px; }.api-center-row .api-endpoint-note code { padding:1px 5px; border-radius:4px; color:#8fe6ff; background:rgba(40,120,160,.18); font-size:10px; word-break:break-all; }.api-center-row .api-endpoint-warn { margin-left:4px; color:#ff9b9b; font-weight:600; }.api-center-row code { padding:1px 4px; border-radius:4px; color:#8fe6ff; background:rgba(40,120,160,.18); }
@media (max-width:760px) { .api-center-row { display:block; }.api-center-row form { margin-top:10px; width:100%; flex-basis:auto; }.api-center-row em { display:block; margin-top:7px; } }
.api-qwen-quota { margin-top:9px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:8px 10px; border:1px solid rgba(137,166,199,.18); border-radius:8px; background:rgba(8,20,34,.45); }
.api-qwen-quota-bar { flex:1 1 100%; min-width:120px; height:6px; border-radius:3px; background:rgba(137,166,199,.16); overflow:hidden; position:relative; }
.api-qwen-quota-fill { position:absolute; inset:0; width:100%; background:var(--accent-purple,#a78bfa); transition:width .4s ease,background-color .3s ease; }
.api-qwen-quota-fill[data-level='mid'] { background:#f59e0b; }
.api-qwen-quota-fill[data-level='low'] { background:#ff4d6a; }
.api-qwen-quota-pct { font:500 12px/1 ui-monospace,SFMono-Regular,monospace; color:var(--text-primary); font-variant-numeric:tabular-nums; min-width:48px; text-align:right; }
.api-qwen-quota-meta { font:400 10px/1.4 system-ui,sans-serif; color:var(--text-secondary,#9aa4b2); flex:1 1 auto; word-break:break-word; }
.api-qwen-quota[data-empty='true'] .api-qwen-quota-pct { color:var(--text-muted); }
.api-qwen-quota-meta b { color:var(--text-primary); font-weight:500; }
.api-center-row.api-center-qwen { align-items:stretch; gap:20px; }
.api-center-row.api-center-qwen > div { flex:1 1 auto; }
.api-center-row.api-center-qwen form { display:flex; flex-direction:column; gap:8px; flex:0 0 340px; justify-content:flex-start; }
.api-center-row.api-center-qwen form label { display:flex; flex-direction:column; gap:4px; color:var(--text-secondary); font-size:10px; }
.api-center-row.api-center-qwen form select { box-sizing:border-box; width:100%; padding:8px 9px; border:1px solid rgba(137,166,199,.28); border-radius:7px; color:var(--text-primary); background:rgba(3,12,23,.72); font-size:11px; }
.api-center-row.api-center-qwen .api-qwen-actions { display:flex; gap:7px; flex-wrap:wrap; }
.api-center-row.api-center-qwen .api-qwen-actions button { flex:1 1 auto; }
.api-key-systems { display:flex; flex-direction:column; gap:3px; margin-top:7px; padding:8px 10px; border:1px solid rgba(137,166,199,.16); border-radius:8px; background:rgba(8,20,34,.45); }
.api-key-systems > b { color:var(--text-primary); font-size:11px; }
.api-key-systems > span { margin:0; }
.api-key-systems > small { color:var(--text-muted); font-size:10px; line-height:1.5; }
.api-key-systems code { white-space:nowrap; }
.investment-calendar-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:22px 24px 16px; border-bottom:1px solid rgba(137,166,199,.16); }
.investment-calendar-kicker { display:flex; gap:8px; align-items:center; margin-bottom:7px; color:#68ead7; font:700 11px/1 ui-monospace,SFMono-Regular,monospace; letter-spacing:.1em; text-transform:uppercase; }
.investment-calendar-kicker i { width:7px; height:7px; border-radius:99px; background:#38dfc4; box-shadow:0 0 12px #38dfc4; }
.investment-calendar-head h2 { margin:0; color:var(--text-primary); font-size:21px; }
.investment-calendar-head p { max-width:720px; margin:7px 0 0; color:var(--text-secondary); font-size:13px; line-height:1.55; }
.investment-calendar-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.investment-calendar-actions button { min-height:31px; padding:0 11px; border:1px solid rgba(135,164,199,.28); border-radius:8px; color:var(--text-secondary); background:rgba(11,24,39,.7); font-size:12px; cursor:pointer; }
.investment-calendar-actions button.active { border-color:rgba(53,223,197,.62); color:#78f7e5; background:rgba(19,129,116,.2); }
.investment-calendar-actions .calendar-expand { border-color:rgba(255,187,62,.42); color:#ffcb69; }
.investment-calendar-actions .calendar-source { color:var(--text-muted); font-size:11px; white-space:nowrap; }
.investment-calendar-toolbar { display:flex; justify-content:space-between; gap:12px; padding:13px 24px; background:rgba(4,12,23,.36); }
.calendar-risk-callout { display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-size:12px; }
.calendar-risk-callout b { padding:5px 8px; border-radius:6px; color:#ffcb69; background:rgba(245,177,48,.12); font:800 11px/1 ui-monospace,SFMono-Regular,monospace; }
.calendar-risk-callout b.safe { color:#68ead7; background:rgba(45,203,181,.1); }
.calendar-time-note { color:var(--text-muted); font-size:11px; text-align:right; }
.calendar-treasury-note { flex:1 1 100%; padding-top:2px; color:#8595aa; font-size:11px; line-height:1.45; }
.investment-calendar-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.investment-calendar-table th { padding:12px 14px; border-bottom:1px solid rgba(137,166,199,.17); color:#8d9bad; font-size:11px; letter-spacing:.04em; text-align:left; font-weight:650; white-space:nowrap; }
.investment-calendar-table td { padding:14px; border-bottom:1px solid rgba(137,166,199,.13); color:var(--text-primary); vertical-align:middle; font-size:13px; }
.investment-calendar-table tr:last-child td { border-bottom:0; }
.investment-calendar-table tr:hover td { background:rgba(42,104,130,.09); }
.investment-calendar-table .calendar-date-row td { padding:10px 14px; color:#bdcbe0; background:rgba(77,104,145,.09); font-size:13px; font-weight:750; }
.calendar-time { color:#e2ebf7; font:700 13px/1.35 ui-monospace,SFMono-Regular,monospace; }
.calendar-time small { display:block; margin-top:4px; color:var(--text-muted); font:11px/1.2 ui-monospace,SFMono-Regular,monospace; }
.calendar-market { display:flex; gap:7px; align-items:center; color:#cbd8e9; font-weight:700; }
.calendar-flag { display:grid; place-items:center; width:23px; height:17px; border-radius:3px; color:#f8fafc; font:800 9px/1 ui-monospace,SFMono-Regular,monospace; background:#285da3; }
.calendar-flag.btc { color:#241400; background:#f79a22; }
.calendar-event-title { display:flex; align-items:center; gap:8px; font-weight:750; }
.calendar-event-title small { color:var(--text-muted); font-weight:500; }
.calendar-impact { display:inline-flex; gap:2px; color:#516178; letter-spacing:1px; }
.calendar-impact b { color:#ffbb3e; font-size:14px; }.calendar-impact.medium b:nth-child(3),.calendar-impact.low b:nth-child(n+2){color:#45536a}
.calendar-value { color:#c9d4e1; font:650 12px/1.2 ui-monospace,SFMono-Regular,monospace; }.calendar-value.actual { color:#68ead7; }.calendar-value.empty { color:#526076; }
.calendar-btc-read { color:#aab8ca; font-size:12px; line-height:1.4; }.calendar-btc-read b { display:block; color:#d8e5f4; font-size:12px; }.calendar-btc-read.high b { color:#ffc258; }
.calendar-empty { padding:26px !important; color:var(--text-secondary) !important; text-align:center; }
.calendar-footer { display:flex; justify-content:space-between; gap:12px; padding:12px 24px 16px; color:var(--text-muted); border-top:1px solid rgba(137,166,199,.12); font-size:11px; line-height:1.45; }
@media (max-width: 760px) { .investment-calendar-head,.investment-calendar-toolbar,.calendar-footer { padding-left:15px; padding-right:15px; }.investment-calendar-head,.investment-calendar-toolbar,.calendar-footer { display:block; }.investment-calendar-actions { justify-content:flex-start; margin-top:14px; }.calendar-time-note { margin-top:9px; text-align:left; }.calendar-treasury-note { display:block; margin-top:9px; }.investment-calendar-table { min-width:810px; }.investment-calendar-scroll { overflow-x:auto; }.investment-calendar-table th,.investment-calendar-table td { padding:12px 10px; }.investment-calendar-head h2 { font-size:19px; } }

/* ===== 顶部三卡（价格卡 + 两个持仓卡）拖拽互换位置 =====
   仅桌面（≥1200px）布局启用：持仓容器 display:contents 透传，
   价格块与两个持仓槽成为 .hero 网格的同级单元，用 order 排序互换。
   窄屏保持原有卡片结构（价格卡固定在最左，两个持仓槽卡内互换）。 */
@media (min-width: 1200px) {
  #personalEntryCard {
    display: contents !important;
  }
  /* 三张可互换卡片等分整行：各占 1/3，分割线正好落在 1/3 和 2/3 处。 */
  .hero {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }
  #personalEntryCard .personal-entry-slot {
    min-width: 0;
    width: auto;
    align-self: stretch;
    padding: 8px 16px !important;
  }
  .hero [data-hero-unit] {
    min-width: 0;
    padding-inline: 16px;
    border-left: 1px solid var(--border-subtle);
  }
  .hero > div:first-child {
    min-width: 0 !important;
  }
  .hero [data-hero-unit].hero-unit-first {
    border-left: 0;
  }
  .hero [data-hero-unit].hero-unit-drag-over {
    outline: 2px dashed var(--accent-cyan);
    outline-offset: 3px;
    background: rgba(0, 212, 170, 0.06);
  }
  .hero > div:first-child {
    cursor: grab;
  }
  .hero > div:first-child:active {
    cursor: grabbing;
  }
}

/* ===== 投资日历 / Investment calendar redesign (v2.8.0) =====
   总是深色卡片：用卡片级变量锁定配色，避免跟随外层明/暗主题导致文字看不清。 */
.investment-calendar-card {
  padding: 22px 24px 20px;
  --cal-text: #e9effb;
  --cal-text-2: #9db0c9;
  --cal-text-3: #6b7d97;
  --cal-line: rgba(137, 166, 199, .16);
  --cal-line-2: rgba(137, 166, 199, .3);
  --cal-surface: rgba(6, 14, 25, .5);
  --cal-surface-2: rgba(255, 255, 255, .045);
  --cal-bull: #2ecc91;
  --cal-bear: #ff4d6a;
  --cal-warn: #f5b130;
  --cal-accent: #38dfc4;
}
.investment-calendar-card .ic-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:4px; }
.ic-title { min-width: 240px; }
.ic-kicker { display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cal-text-3); font-weight:700; }
.ic-kicker i { width:7px; height:7px; border-radius:50%; background:var(--cal-accent); box-shadow:0 0 8px var(--cal-accent); }
.ic-title h2 { margin:6px 0 6px; font-size:20px; font-weight:700; color:var(--cal-text); }
.ic-title p { margin:0 0 6px; font-size:12px; line-height:1.55; color:var(--cal-text-2); max-width:620px; }
.ic-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.ic-source { font-size:11px; font-weight:600; color:var(--cal-accent); background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.25); padding:3px 9px; border-radius:999px; white-space:nowrap; }
.ic-updated { font-size:11px; color:var(--cal-text-3); }

/* —— 时间范围 chips + 筛选器开关 —— */
.ic-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:16px 0 0; padding:12px 0; border-top:1px solid var(--cal-line); }
.ic-ranges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ic-range { font:inherit; font-size:12.5px; font-weight:650; color:var(--cal-text-2); background:transparent; border:1px solid var(--cal-line-2); padding:5px 13px; border-radius:999px; cursor:pointer; transition:all .15s; }
.ic-range:hover { color:var(--cal-text); border-color:var(--cal-accent); }
.ic-range.active { color:#06141b; background:var(--cal-accent); border-color:var(--cal-accent); box-shadow:0 0 14px rgba(56,223,196,.28); }
.ic-filter-toggle { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:650; color:var(--cal-accent); background:rgba(34,211,238,.09); border:1px solid rgba(34,211,238,.3); padding:5px 11px; border-radius:8px; cursor:pointer; }
.ic-filter-toggle:hover { background:rgba(34,211,238,.16); }
.ic-caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; transition:transform .15s; }
.ic-caret.up { transform:rotate(180deg); }

.ic-custom { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; }
.ic-custom label { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--cal-text-3); }
.ic-custom input[type="date"] { font:inherit; font-size:12px; color:var(--cal-text); background:var(--cal-surface); border:1px solid var(--cal-line-2); border-radius:7px; padding:5px 9px; color-scheme:dark; }

/* —— 三个多选筛选器 —— */
.ic-fields { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; padding:14px 0 4px; }
.ic-field { position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ic-field-label { font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--cal-text-3); text-transform:uppercase; }
.ic-select { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; font:inherit; font-size:12.5px; font-weight:600; color:var(--cal-text-2); background:var(--cal-surface); border:1px solid var(--cal-line-2); border-radius:9px; padding:9px 12px; cursor:pointer; text-align:left; }
.ic-select:hover { border-color:var(--cal-accent); color:var(--cal-text); }
.ic-select.has-value { color:var(--cal-accent); border-color:rgba(56,223,196,.45); background:rgba(34,211,238,.08); }
.ic-select-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ic-menu { position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; display:flex; flex-direction:column; max-height:330px; border:1px solid var(--cal-line-2); border-radius:11px; background:#0b1626; box-shadow:0 22px 48px rgba(2,8,18,.62); overflow:hidden; }
.ic-menu[hidden] { display:none; }
.ic-menu-head { padding:9px 10px; border-bottom:1px solid var(--cal-line); background:rgba(255,255,255,.03); }
.ic-menu-search { box-sizing:border-box; width:100%; font:inherit; font-size:12px; color:var(--cal-text); background:var(--cal-surface); border:1px solid var(--cal-line-2); border-radius:7px; padding:6px 9px; }
.ic-menu-search::placeholder { color:var(--cal-text-3); }
.ic-menu-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:7px; }
.ic-menu-actions button { font:inherit; font-size:11px; font-weight:650; color:var(--cal-accent); background:none; border:none; padding:0; cursor:pointer; }
.ic-menu-actions button:hover { text-decoration:underline; }
.ic-menu-list { list-style:none; margin:0; padding:6px; overflow-y:auto; display:grid; gap:1px; }
.ic-menu-list li[hidden] { display:none; }
.ic-opt { display:flex; align-items:center; gap:8px; padding:6px 7px; border-radius:7px; cursor:pointer; font-size:12.5px; color:var(--cal-text-2); }
.ic-opt:hover { background:var(--cal-surface-2); color:var(--cal-text); }
.ic-opt input { accent-color:#38dfc4; width:14px; height:14px; flex:none; }
.ic-opt-label { display:inline-flex; align-items:center; gap:7px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ic-opt-flag { font-style:normal; font-size:14px; line-height:1; }
.ic-opt-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.ic-opt-stars { display:inline-flex; gap:2px; }
.ic-opt-stars .ic-dot { width:6px; height:6px; }
/* 重要性下拉里的点阵必须自带颜色，否则 “on” 与 “off” 同为灰色、看不出档位。 */
.ic-opt-stars.imp-high .ic-dot.on { background:var(--cal-bear); box-shadow:0 0 6px rgba(255,77,106,.7); }
.ic-opt-stars.imp-medium .ic-dot.on { background:var(--cal-warn); }
.ic-opt-stars.imp-low .ic-dot.on { background:var(--cal-text-3); }
.ic-opt > em { margin-left:auto; font-style:normal; font-size:11px; color:var(--cal-text-3); font-variant-numeric:tabular-nums; }
.ic-menu-empty { padding:14px; text-align:center; font-size:12px; color:var(--cal-text-3); }

/* —— 副信息条：实时北京时间 + 参考时区 —— */
.ic-subbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 2px 12px; border-bottom:1px solid var(--cal-line); }
.ic-clock { font-size:12px; font-weight:600; color:var(--cal-text-2); }
.ic-clock b { font-size:13.5px; font-weight:800; color:var(--cal-accent); font-variant-numeric:tabular-nums; }
.ic-clock em { font-style:normal; font-size:10.5px; color:var(--cal-text-3); }
.ic-range-note { font-size:11.5px; color:var(--cal-text-3); }
.ic-tz-wrap { display:inline-flex; align-items:center; gap:5px; margin-left:auto; }
.ic-tz-wrap i { font-style:normal; font-size:11px; color:var(--cal-text-3); margin-right:2px; }
.ic-tz-btn { font:inherit; font-size:11px; font-weight:600; color:var(--cal-text-3); background:transparent; border:1px solid var(--cal-line-2); padding:3px 9px; border-radius:6px; cursor:pointer; }
.ic-tz-btn.active { color:var(--cal-text); border-color:#a78bfa; background:rgba(167,139,250,.16); }

.ic-risk { display:flex; align-items:baseline; gap:10px; padding:10px 14px; border-radius:10px; margin:12px 0; }
.ic-risk.is-hot { background:rgba(255,77,106,.1); border:1px solid rgba(255,77,106,.3); }
.ic-risk.is-safe { background:rgba(46,204,145,.08); border:1px solid rgba(46,204,145,.25); }
.ic-risk-label { font-size:13px; font-weight:800; white-space:nowrap; }
.ic-risk.is-hot .ic-risk-label { color:var(--cal-bear); }
.ic-risk.is-safe .ic-risk-label { color:var(--cal-bull); }
.ic-risk-text { font-size:12px; color:var(--cal-text-2); line-height:1.4; }

/* —— 表格：8 列，今值/预期/前值加宽，影响列收窄 —— */
.ic-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.ic-list > .cal-head,
.ic-list > .cal-event {
  display:grid;
  grid-template-columns: 88px 62px minmax(0, 1fr) 54px 100px 100px 100px 138px;
  align-items:center;
  gap:10px;
}
.ic-list > .cal-head {
  position:static;
  padding:6px 12px 9px;
  border-bottom:1px solid var(--cal-line-2);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cal-text-3);
}
.cal-day { display:flex; align-items:center; gap:10px; margin:14px 0 6px; padding:0 2px; }
.cal-day:first-child { margin-top:6px; }
.cal-day-name { font-size:12px; font-weight:700; color:var(--cal-text-2); }
.cal-day::after { content:""; flex:1; height:1px; background:var(--cal-line); }
.cal-day-today { font-size:10px; font-weight:800; color:#06141b; background:var(--cal-warn); padding:1px 7px; border-radius:999px; }

.cal-event { position:relative; padding:10px 12px; border-radius:9px; border:1px solid transparent; transition:background .15s, border-color .15s; }
.cal-event:hover { background:var(--cal-surface-2); border-color:var(--cal-line); }
.cal-event.is-hot { background:rgba(255,77,106,.07); border-color:rgba(255,77,106,.22); }
.cal-event.is-picked { background:rgba(46,204,145,.07); border-color:rgba(46,204,145,.25); }
.cal-pick { position:absolute; top:8px; right:10px; display:flex; align-items:center; gap:6px; cursor:pointer; font-size:10.5px; color:var(--cal-text-3); }
.cal-pick input { position:absolute; opacity:0; width:0; height:0; }
.cal-pick-ui { width:16px; height:16px; border-radius:5px; border:1px solid var(--cal-line-2); background:var(--cal-surface); display:grid; place-items:center; transition:background .15s, border-color .15s; }
.cal-pick input:checked + .cal-pick-ui { background:var(--cal-bull); border-color:var(--cal-bull); }
.cal-pick input:checked + .cal-pick-ui::after { content:""; width:8px; height:5px; border-left:2px solid #061015; border-bottom:2px solid #061015; transform:rotate(-45deg) translate(0px,-1px); }
.cal-pick::after { content:attr(data-pin-label); }
.cal-pick input:checked ~ .cal-pick-ui::before { content:attr(data-pinned-label); position:absolute; right:22px; color:var(--cal-bull); font-weight:700; }
@media (max-width: 720px) {
  .cal-pick { top:6px; right:8px; }
  .cal-pick::after { display:none; }
}
.cal-when { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cal-datetime { display:flex; align-items:baseline; gap:5px; font-variant-numeric:tabular-nums; }
.cal-date { font-size:11.5px; font-weight:600; color:var(--cal-text-2); }
.cal-time { font-size:14px; font-weight:800; color:var(--cal-text); letter-spacing:-.01em; }
.cal-localtime { font-size:10px; font-weight:500; color:var(--cal-text-3); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-countdown { font-size:10px; color:var(--cal-text-3); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cal-flag { display:inline-flex; align-items:center; gap:4px; padding:2px 6px 2px 5px; border-radius:5px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--flag-color, #64758f); white-space:nowrap; justify-self:start; }
.cal-flag-emoji { font-style:normal; font-size:13.5px; line-height:1; }
.cal-flag-code { font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.04em; color:var(--cal-text-2); }
.cal-flag.c-us{--flag-color:#3b82f6} .cal-flag.c-cn{--flag-color:#ef4444} .cal-flag.c-eu{--flag-color:#6366f1} .cal-flag.c-jp{--flag-color:#ec4899}
.cal-flag.c-uk{--flag-color:#0ea5e9} .cal-flag.c-de{--flag-color:#f59e0b} .cal-flag.c-fr{--flag-color:#8b5cf6} .cal-flag.c-br{--flag-color:#22c55e}
.cal-flag.c-au{--flag-color:#14b8a6} .cal-flag.c-sg{--flag-color:#eab308} .cal-flag.c-ca{--flag-color:#f97316} .cal-flag.c-kr{--flag-color:#06b6d4}
.cal-flag.c-in{--flag-color:#f43f5e} .cal-flag.c-ru{--flag-color:#64748b} .cal-flag.c-opec{--flag-color:#84cc16} .cal-flag.c-ch{--flag-color:#dc2626}
.cal-flag.c-it{--flag-color:#a855f7} .cal-flag.c-es{--flag-color:#f97316} .cal-flag.c-mx{--flag-color:#22c55e} .cal-flag.c-tr{--flag-color:#eab308}
.cal-flag.c-za{--flag-color:#10b981} .cal-flag.c-nz{--flag-color:#14b8a6} .cal-flag.c-hk{--flag-color:#ec4899} .cal-flag.c-tw{--flag-color:#ef4444}
.cal-flag.c-btc{--flag-color:#f7931a} .cal-flag.c-oil{--flag-color:#06b6d4} .cal-flag.c-global,.cal-flag.c-etc{--flag-color:#475569}

.cal-main { min-width:0; }
.cal-name { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:650; color:var(--cal-text); min-width:0; }
.cal-name > :last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-cat { flex:none; font-size:9.5px; font-weight:800; letter-spacing:.03em; padding:2px 6px; border-radius:4px; border:1px solid transparent; }
.cal-cat.cat-macro { color:#8ab6ff; background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.34); }
.cal-cat.cat-liquidity { color:#ffcb69; background:rgba(245,177,48,.13); border-color:rgba(245,177,48,.34); }
.cal-cat.cat-energy { color:#5ee7d0; background:rgba(20,184,166,.14); border-color:rgba(20,184,166,.34); }
.cal-cat.cat-risk { color:#c4b5fd; background:rgba(167,139,250,.14); border-color:rgba(167,139,250,.34); }
.cal-cat.cat-crypto, .cal-cat.cat-chain { color:#ffb85c; background:rgba(247,147,26,.15); border-color:rgba(247,147,26,.36); }
.cal-fallback { font-size:10px; font-weight:600; color:var(--cal-warn); margin-left:6px; font-style:normal; flex:none; }
.cal-sub { font-size:10.5px; color:var(--cal-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cal-impact { display:flex; gap:4px; align-items:center; justify-self:start; }
.ic-dot { width:7px; height:7px; border-radius:50%; background:rgba(137,166,199,.28); display:inline-block; }
.cal-impact.imp-high .ic-dot.on { background:var(--cal-bear); box-shadow:0 0 6px rgba(255,77,106,.7); }
.cal-impact.imp-medium .ic-dot.on { background:var(--cal-warn); }
.cal-impact.imp-low .ic-dot.on { background:var(--cal-text-3); }

.ic-met { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ic-met b { font-size:9.5px; font-weight:700; color:var(--cal-text-3); letter-spacing:.05em; }
.ic-met-val { font-size:12px; font-weight:650; color:var(--cal-text); font-variant-numeric:tabular-nums; line-height:1.28; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ic-met-val.empty { font-size:10.5px; font-weight:500; color:var(--cal-text-3); -webkit-line-clamp:2; }

.cal-read { display:flex; flex-direction:column; gap:3px; padding-left:10px; border-left:2px solid var(--cal-line-2); min-width:0; }
.cal-read b { font-size:11px; font-weight:800; color:var(--cal-text-2); }
.cal-read.is-hot { border-left-color:var(--cal-bear); }
.cal-read.is-hot b { color:var(--cal-bear); }
.cal-read span { font-size:10.5px; color:var(--cal-text-3); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.cal-empty { padding:26px; text-align:center; color:var(--cal-text-3); font-size:13px; }
.ic-list-more { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 0 2px; }
.ic-list-more button { appearance:none; border:1px solid rgba(56,223,196,.42); border-radius:8px; background:rgba(56,223,196,.1); color:var(--cal-accent); padding:7px 16px; font:inherit; font-size:12px; font-weight:750; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.ic-list-more button:hover { background:rgba(56,223,196,.17); border-color:rgba(56,223,196,.7); transform:translateY(-1px); }
.ic-list-more span { font-size:11px; color:var(--cal-text-3); font-variant-numeric:tabular-nums; }

/* —— 数据公布影响预测 —— */
.ic-impact { margin-top:18px; padding-top:16px; border-top:1px solid var(--cal-line); }
.ic-impact-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ic-impact-head h3 { margin:0; font-size:15px; font-weight:750; color:var(--cal-text); }
.ic-impact-head p { flex:1 1 320px; margin:0; font-size:11.5px; line-height:1.5; color:var(--cal-text-3); }
.ic-impact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:12px; }
.ic-impact-card { display:flex; flex-direction:column; gap:9px; padding:12px 13px; border:1px solid var(--cal-line-2); border-radius:12px; background:var(--cal-surface); }
.ic-impact-top { display:flex; align-items:center; gap:9px; }
.ic-impact-title { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ic-impact-title b { font-size:12.5px; font-weight:750; color:var(--cal-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ic-impact-title span { font-size:10.5px; color:var(--cal-text-3); font-variant-numeric:tabular-nums; }
.ic-impact-actual { margin:0; font-size:11.5px; color:var(--cal-text-2); }
.ic-impact-actual b { color:var(--cal-warn); }
.ic-impact-matrix { width:100%; border-collapse:collapse; table-layout:fixed; }
.ic-impact-matrix th, .ic-impact-matrix td { padding:6px 4px; text-align:center; font-size:11px; }
.ic-impact-matrix thead th { font-weight:700; color:var(--cal-text-3); border-bottom:1px solid var(--cal-line); font-size:10.5px; }
.ic-impact-matrix thead th:first-child, .ic-impact-matrix tbody th { text-align:left; width:74px; }
.ic-impact-matrix tbody th { font-weight:700; color:var(--cal-text-2); font-size:11px; }
.ic-impact-matrix tbody th em { display:block; font-style:normal; font-size:9.5px; font-weight:700; color:var(--cal-warn); }
.ic-impact-matrix td { font-weight:800; border-radius:5px; }
.ic-impact-matrix td.bull { color:var(--cal-bull); background:rgba(46,204,145,.11); }
.ic-impact-matrix td.bear { color:var(--cal-bear); background:rgba(255,77,106,.11); }
.ic-impact-matrix td.flat { color:var(--cal-text-3); background:rgba(148,163,184,.09); font-weight:650; }
.ic-impact-matrix tr.is-live th { color:var(--cal-text); }
.ic-impact-matrix tr.is-live td { box-shadow:inset 0 0 0 1px rgba(245,177,48,.4); }
.ic-impact-note { margin:0; font-size:10.5px; line-height:1.5; color:var(--cal-text-3); }
.ic-impact-empty { margin:0; padding:14px; border:1px dashed var(--cal-line-2); border-radius:10px; font-size:12px; color:var(--cal-text-3); }

.ic-foot { margin-top:16px; padding-top:12px; border-top:1px solid var(--cal-line); }
.ic-treasury-note { font-size:11px; color:var(--cal-text-3); line-height:1.5; }

/* 窄桌面：进一步压缩次要列，保证今值/预期/前值不被裁切。 */
@media (max-width: 1180px) {
  .ic-list > .cal-head,
  .ic-list > .cal-event { grid-template-columns: 84px 58px minmax(0, 1fr) 48px 92px 92px 92px 120px; gap:9px; }
  .ic-fields { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
}
@media (max-width: 980px) {
  .ic-fields { grid-template-columns:minmax(0, 1fr); }
  .ic-list > .cal-head,
  .ic-list > .cal-event { grid-template-columns: 84px 56px minmax(0, 1fr) 46px 88px 88px 88px; gap:8px; }
  .cal-read { display:none; }
  .ic-list > .cal-head > span:last-child { display:none; }
}
@media (max-width: 720px) {
  .investment-calendar-card { padding: 18px 14px 16px; }
  .ic-list > .cal-head { display:none; }
  .ic-list > .cal-event {
    grid-template-columns: 76px 52px minmax(0, 1fr);
    grid-template-areas: "when flag main" "metA metE metP" "read read read";
    gap:8px 10px; padding:11px 10px;
  }
  .cal-when { grid-area:when; } .cal-flag { grid-area:flag; } .cal-main { grid-area:main; }
  .cal-impact { display:none; }
  .ic-met.is-actual { grid-area:metA; } .ic-met.is-est { grid-area:metE; } .ic-met.is-prev { grid-area:metP; }
  .cal-read { grid-area:read; display:flex; padding-left:0; border-left:none; border-top:1px solid var(--cal-line); padding-top:6px; }
  .ic-impact-grid { grid-template-columns:minmax(0, 1fr); }
  .ic-tz-wrap { margin-left:0; }
  .ic-menu { left:auto; right:0; width:min(320px, 82vw); }
}

/* ===== 强平概率计算器 · 快捷操作条与窗口分组（v2.10.10） =====
   操作条：一键引用顶部持仓、做多/做空持仓价快选、手动计算。
   Action bar: pull the position card above, pick a saved long/short entry, calculate on demand. */
.liq-prob-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.liq-prob-actions > button,
.liq-entry-picker > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}
.liq-prob-actions > button:hover,
.liq-entry-picker > button:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.liq-prob-actions .liq-prob-compute {
  border-color: transparent;
  background: linear-gradient(135deg, #a294ff, #7c68f0 46%, #5f4be0);
  color: #fff;
  font-weight: 600;
}
.liq-prob-actions .liq-prob-compute.is-dirty {
  box-shadow: 0 0 0 3px rgba(124, 104, 240, 0.3);
}
.liq-entry-picker {
  position: relative;
}
.liq-entry-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 208px;
  padding: 5px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface);
  box-shadow: 0 14px 34px rgba(2, 8, 18, 0.42);
}
.liq-entry-menu[hidden] {
  display: none;
}
.liq-entry-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
}
.liq-entry-menu button:hover:not(:disabled) {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
.liq-entry-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.liq-entry-menu button b {
  font: 700 11px "SF Mono", "JetBrains Mono", monospace;
}
.liq-prob-hint {
  margin: 7px 0 0;
  color: var(--warn);
  font-size: 10px;
}
.liq-prob-hint[hidden] {
  display: none;
}
.liq-prob-flash {
  color: var(--bull);
  font-size: 10px;
}
.liq-prob-flash[hidden] {
  display: none;
}
/* 窗口分组：短线用 15 分钟 K 线，长线用日线样本。 */
.liq-prob-output > .liq-prob-windows {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 9px;
  background: rgba(3, 12, 23, 0.32);
}
.liq-prob-window-group h4 {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
}
.liq-prob-window-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.liq-prob-window {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 6px;
  background: var(--bg-surface-2);
}
.liq-prob-window small {
  font-size: 9px;
  color: var(--text-muted);
}
.liq-prob-window b {
  font: 700 12px "SF Mono", "JetBrains Mono", monospace;
}
.liq-prob-window em {
  color: var(--text-muted);
  font: 9px "SF Mono", "JetBrains Mono", monospace;
  font-style: normal;
}
/* 浅色主题：分组底板改成浅色，窗口小卡改白底描边，避免深底浅字互相压色。 */
html[data-theme="light"] .liq-prob-output > .liq-prob-windows {
  background: var(--bg-surface-2);
}
html[data-theme="light"] .liq-prob-window {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}
@media (max-width: 900px) {
  .liq-prob-window-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .liq-prob-window-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .liq-prob-actions > button,
  .liq-entry-picker > button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ===== 强平概率计算器 · 「填入我的持仓价」列出顶部两个舱段（v2.10.12） =====
   每行 = 舱段标题 + 开仓均价 + 元信息（持仓量 / 保证金 / 有效杠杆）。
   Each row = slot title + entry price + meta (size / margin / effective leverage). */
.liq-entry-menu {
  gap: 3px;
  min-width: 262px;
  max-width: min(340px, calc(100vw - 32px));
}
.liq-entry-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 12px;
  text-align: left;
}
.liq-entry-menu button .liq-entry-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.liq-entry-menu button .liq-entry-title em {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.6;
}
.liq-entry-menu button .liq-entry-title i {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.liq-entry-menu button.long .liq-entry-title i {
  color: var(--bull);
}
.liq-entry-menu button.short .liq-entry-title i {
  color: var(--bear);
}
.liq-entry-menu button > b {
  color: var(--text-primary);
  font: 700 12px "SF Mono", "JetBrains Mono", monospace;
  white-space: nowrap;
}
.liq-entry-menu button > small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.5;
}
.liq-entry-menu button:disabled > b {
  color: var(--text-muted);
}

/* ===== 消息推送 · 多渠道设置（v2.10.52，配 public/notification.js） ===== */
/* 总开关 / 渠道启用拨钮：沿用语音面板拨钮的轨道+滑块画法，局部复用不互相污染。 */
.push-switch input[type="checkbox"] {
  position: relative;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 21px;
  margin: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.2s ease;
}
.push-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.push-switch input[type="checkbox"]:checked {
  background: var(--accent-cyan);
}
.push-switch input[type="checkbox"]:checked::after {
  transform: translateX(17px);
}
.push-switch input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.push-master-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px;
  margin: 10px 0;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
}
.push-master-row .push-switch-row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.push-master-row small {
  color: var(--text-muted);
  font-size: 10.5px;
}
.channel-section {
  margin: 10px 0;
}
.channel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.channel-list > small {
  color: var(--text-muted);
  line-height: 1.6;
}
.channel-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
}
.channel-card.channel-disabled {
  opacity: 0.55;
}
.channel-card.channel-disabled .channel-main b {
  text-decoration: line-through;
}
.channel-card .channel-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.channel-card .channel-main b {
  color: var(--text-primary);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-card .channel-main small {
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-card button {
  padding: 4px 8px;
  font-size: 10.5px;
}
.channel-card .push-switch {
  display: inline-flex;
  align-items: center;
}
/* 渠道弹窗 */
#channelModal .channel-type-hint {
  margin: -4px 0 8px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.6;
}
#channelModal form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 11.5px;
}
#channelModal form input {
  padding: 7px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 12px;
}
#channelModal .channel-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
/* 亏损联动（与持仓联动） */
.loss-push-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px dashed var(--border-subtle);
  border-radius: 9px;
}
.loss-push-box .push-switch-row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.loss-push-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.loss-push-fields label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text-secondary);
  font-size: 10.5px;
}
.loss-push-fields input {
  width: 84px;
  padding: 5px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-size: 12px;
}
.loss-push-box > small {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.6;
}

/* ===== 消息推送设置 · 仿 8899 分渠道交互（v2.10.53，配 public/notification.js） =====
   设计取舍：沿用 btc 指示器自己的配色令牌（--bull/--bear/--warn/--accent-cyan 等），
   不照搬 8899 的 --ok/--danger/--muted 体系，保证明/暗主题下都统一。 */
.push-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 10px 0;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-surface-2);
}
.push-head-row .push-switch-row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.push-head-row small {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}
.push-settings-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.push-settings-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
}

/* 推送设置弹层 */
.push-settings-desc {
  margin: -2px 0 12px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}
/* 推送设置是「设置面板」，不是底部弹出的快捷输入表：基础 .alert-composer 用的是
   align-items:end（交易所风格 sheet，给「添加预警」那种一步输入用的），所以这里必须
   和 .voice-settings-modal / .account-service-card 一样用修饰类改回整屏居中。
   漏了这个类时弹层会贴着浏览器底部 —— 因为 align-items:end 是「底对齐」而非「居中」。 */
.push-settings-modal {
  z-index: 1004;
  align-items: center;
  padding: 20px;
}
.push-settings-modal > section {
  width: min(600px, 100%);
  max-height: calc(100vh - 40px);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.52);
}
.push-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.push-settings-footer button { min-height: 34px; }

/* 渠道块：标题行 + 状态徽章 + 开关；开关打开后展开表单 */
.ch-block {
  border-top: 1px solid var(--border-subtle);
  margin-top: 12px;
  padding-top: 2px;
}
.ch-block:first-of-type { border-top: none; margin-top: 2px; }
.ch-locked { opacity: 0.7; }
.ch-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.ch-head .grow { flex: 1; min-width: 0; }
.ch-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}
.ch-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: rgba(124, 135, 147, 0.14);
  color: var(--text-muted);
}
.ch-badge::before { content: '●'; font-size: 7px; line-height: 1; }
.ch-badge.ok { background: rgba(0, 212, 170, 0.14); color: var(--bull); }
.ch-badge.ok::before { content: '✓'; font-size: 10px; font-weight: 700; }
.ch-badge.danger { background: rgba(255, 77, 106, 0.14); color: var(--bear); }
.ch-badge.danger::before { content: '✕'; font-size: 10px; font-weight: 700; }
.ch-badge.warn { background: rgba(155, 98, 0, 0.14); color: var(--warn); }
.ch-badge.warn::before { content: '!'; font-size: 11px; font-weight: 700; }
.ch-badge.muted { background: rgba(124, 135, 147, 0.14); color: var(--text-muted); }
.ch-badge.muted::before { content: ''; }
.ch-badge:empty { display: none; }

.ch-body { padding: 4px 0 8px; }
.ch-sub {
  display: block;
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}
.ch-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
/* 验证通过后 JS 会给本容器加 hidden 来收起输入框；这里的 display:flex 属于作者样式，
   会盖掉浏览器对 [hidden] 的默认隐藏（UA 样式永远输给作者样式），于是 hidden 形同虚设。
   必须显式声明 hidden 时的隐藏，否则「已验证」的渠道仍会露出两行输入框。 */
.ch-fields[hidden] { display: none !important; }
.ch-fields .field { display: block; }
.ch-fields .field input { box-sizing: border-box; width: 100%; }
.ch-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}
.ch-actions button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ch-actions button:hover { border-color: var(--border-strong); }
.ch-primary {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: #fff !important;
}
.ch-primary:hover { filter: brightness(1.05); }
.ch-primary:disabled { opacity: 0.6; cursor: default; filter: none; }
.ch-actions .ch-clear {
  border-color: transparent;
  background: transparent;
}
.ch-clear { color: var(--bear) !important; }
.ch-clear:hover {
  background: rgba(255, 77, 106, 0.12) !important;
  border-color: var(--bear) !important;
  color: var(--bear) !important;
}
.ch-msg {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ch-msg.ok { color: var(--bull); }
.ch-msg.warn { color: var(--warn); }
.ch-msg.danger { color: var(--bear); }
.ch-msg:empty { display: none; }

/* 同一渠道的多个实例（如多个飞书机器人） */
.ch-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--border-subtle);
  margin: 4px 0 4px 2px;
}
.ch-extra .channel-main { flex: 1; min-width: 0; }
.ch-extra .ch-clear { margin-left: auto; }
.channel-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.channel-main b {
  color: var(--text-primary);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-main small {
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================== v2.11.0 宏观板块整合 ===================== */

/* —— 宏观事件中枢：「现在」时间流分隔线 —— */
.cal-now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  padding: 0 2px;
}
.cal-now::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cal-warn));
}
.cal-now::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--cal-warn), transparent);
}
.cal-now span {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cal-warn);
  padding: 2px 10px;
  border: 1px solid rgba(245, 177, 48, 0.45);
  border-radius: 999px;
  background: rgba(245, 177, 48, 0.1);
  font-variant-numeric: tabular-nums;
}

/* —— 事件行：已公布高亮 + 可展开 —— */
.cal-event.is-released { background: rgba(46, 204, 145, 0.045); }
.cal-event.is-released .ic-met.is-actual .ic-met-val:not(.empty) {
  color: var(--cal-bull);
  font-weight: 750;
}
.cal-event.is-expandable { cursor: pointer; }
.cal-event.is-expanded {
  border-color: var(--cal-line);
  background: var(--cal-surface-2);
}
.cal-expand-caret {
  flex: none;
  width: 0;
  height: 0;
  margin-top: 2px;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5px solid var(--cal-text-3);
  transition: transform 0.15s;
  align-self: center;
}
.cal-event.is-expanded .cal-expand-caret { transform: rotate(180deg); }
.cal-event:hover .cal-expand-caret { border-top-color: var(--cal-text-2); }

/* 事件名旁的利好/利空小标签（复用 macro-cmp-tag，缩小到行内） */
.cal-name .macro-cmp-tag {
  flex: none;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* —— 展开的「影响预测矩阵」详情行 —— */
.cal-detail {
  list-style: none;
  padding: 2px 12px 10px 0;
}
.cal-detail .ic-impact-card {
  background: var(--cal-surface-2);
}
/* 窄屏时事件行变 grid-areas 布局，详情行保持整宽 */
@media (max-width: 720px) {
  .cal-detail { padding: 2px 10px 10px 0; }
}

/* —— 宏观环境与跨市场联动：底部联动面板 —— */
.fed-corr-panel {
  --cal-text: var(--text-primary);
  --cal-text-2: var(--text-secondary);
  --cal-text-3: var(--text-muted);
  --cal-line: var(--border-subtle);
  --cal-line-2: var(--border-strong);
  --cal-accent: var(--accent-cyan, #38dfc4);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cal-line-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fed-corr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fed-corr-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: var(--cal-text);
}
.fed-corr-head p {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cal-text-3);
  max-width: 640px;
}
.fed-corr-head button {
  appearance: none;
  border: 1px solid rgba(56, 223, 196, 0.42);
  border-radius: 8px;
  background: rgba(56, 223, 196, 0.1);
  color: var(--cal-accent);
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fed-corr-head button:hover {
  background: rgba(56, 223, 196, 0.17);
  border-color: rgba(56, 223, 196, 0.7);
}
.fed-corr-panel .correlation-output { margin: 0; }
.fed-corr-panel .index-ticker-cards { margin: 0; }

/* ===== v2.10.69：图表悬浮缩略图 + 一键返回顶部 ===== */
#thumbToggle.is-active {
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.65);
  color: var(--accent-cyan, #22d3ee);
}

#chartThumb {
  position: fixed;
  z-index: 1150;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 920px;
  border-radius: 10px;
  border: 1px solid var(--border-strong, #3a434f);
  background: var(--bg-surface, #161a20);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}
#chartThumb[hidden] {
  display: none !important;
}
.ct-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px 5px 10px;
  background: var(--bg-elevated, #232a33);
  border-bottom: 1px solid var(--border-strong, #3a434f);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.ct-head:active {
  cursor: grabbing;
}
.ct-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ct-title {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-secondary, #9aa4b2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ct-price-lab {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #6b7684);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ct-price {
  display: flex;
  align-items: baseline;
  padding: 2px 0;
  font-size: 13.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-primary, #e8eaed);
}
/* 逐位跳动复用顶部 hero 大价格的 .price-digit / .changed-up / .changed-down
   （500ms 脉冲、涨绿跌红、放大 1.16 倍后回落），此处只补 baseline 对齐。 */
.ct-price .price-digit {
  display: inline-block;
  transform-origin: 50% 100%;
}
.ct-spacer {
  flex: 1;
}
.ct-btn {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--border-strong, #3a434f);
  background: transparent;
  color: var(--text-secondary, #9aa4b2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.ct-btn:hover {
  color: var(--text-primary, #e8eaed);
  border-color: var(--accent-cyan, #22d3ee);
}
.ct-body {
  position: relative;
  flex: none;
  min-height: 0;
  background: var(--bg-base, #0d1117);
}
#chartThumbCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: zoom-in;
}
#chartThumb.is-expanded #chartThumbCanvas {
  cursor: zoom-out;
}
.ct-rz {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(
    135deg,
    transparent 0 55%,
    var(--border-strong, #3a434f) 55% 65%,
    transparent 65% 78%,
    var(--border-strong, #3a434f) 78% 88%,
    transparent 88%
  );
}

#backToTop {
  position: fixed;
  right: 30px;
  bottom: 78px;
  z-index: 1150;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong, #3a434f);
  background: var(--bg-elevated, #232a33);
  color: var(--text-primary, #e8eaed);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.15s ease,
    background 0.15s ease;
}
#backToTop:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan, #22d3ee);
  color: var(--accent-cyan, #22d3ee);
}
#backToTop[hidden] {
  display: none !important;
}

/* ============================================================
   v2.11.10 · 智能顶部栏（滚动即隐 / 可唤回）
   Smart top bar: stows on scroll-down, returns on scroll-up, the top
   hover zone, or keyboard focus.

   栏体改为固定定位后，首屏由 JS 生成的 .header-slot 撑住原始高度，
   因此 scrollY=0 时与改造前逐像素一致；宽高与左边距由脚本按主内容区
   实时写入内联样式。固定后才会「滚动时仍可唤回」，这是本特性的前提。
   ============================================================ */
main > header.is-smart-bar {
  position: fixed;
  top: var(--smart-bar-top, 20px);
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 900;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    top 0.22s ease,
    visibility 0s linear 0s;
  will-change: transform;
}
/* 离开首屏后微微上浮，视觉上「脱开」页面边缘。 */
main > header.is-smart-bar.is-detached {
  top: 8px;
}
/* 收起态：整条滑出视口上方；visibility 延迟到滑出动画结束，
   顺带把这条栏移出命中测试与 Tab 顺序，不会挡住底下的内容。 */
main > header.is-smart-bar.is-stowed {
  transform: translateY(calc(-100% - 30px));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    visibility 0s linear 0.32s;
}
/* 占位块：栏体离流后由它保留首屏空间（高度 = 栏高 + 栏体原有的
   margin-bottom，由脚本实测写入），它只负责撑高，不接收指针事件。
   停在页面顶部静置收起时，脚本会把它收成 0 —— 内容因此整体上提。 */
.header-slot {
  margin: 0;
  pointer-events: none;
}
/* 高度过渡只在脚本加上 .is-animated 之后生效（首帧之后），
   否则开屏那次 0 → 栏高 的赋值会被当成动画，内容会跳一下。 */
.header-slot.is-animated {
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  main > header.is-smart-bar,
  main > header.is-smart-bar.is-stowed {
    transition: none;
  }
  .header-slot.is-animated {
    transition: none;
  }
}
/* 打印时栏体回归文档流：导出/存档里不应出现悬空的一条。 */
@media print {
  main > header.is-smart-bar {
    position: relative;
    top: 0 !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .header-slot {
    display: none;
  }
}

/* v2.11.10 历史回放面板：把已存 K 线重放成与实时同口径的三分类样本。
   文字一律 color:inherit 再靠 opacity 分层，避免全局 p/span 规则在深色主题下把它压成不可读。 */
.research-replay {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(128, 128, 128, 0.28);
  border-radius: 12px;
}
.research-replay h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.research-replay-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.research-replay-head small {
  flex: 1 1 320px;
}
.research-replay-head small,
.research-replay-result small {
  font-size: 12px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.72;
}
.research-replay-result small {
  display: block;
}
.research-replay-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.research-replay-grid article {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 10px;
  border: 1px solid rgba(128, 128, 128, 0.24);
  border-radius: 8px;
  font-size: 12px;
  color: inherit;
}
.research-replay-grid article b {
  min-width: 34px;
}
.research-replay-grid article span {
  display: inline;
}
/* v2.11.26：因子消融面板。判定结论要一眼可见，所以把 ΔM 与结论放在同一行并带色，而不是让读者自己
   在两列数字之间做心算。内联文字一律 color:inherit 再靠 opacity 分层，避免全局 p/span 规则在深色
   主题下把它压成不可读。 */
.research-ablation {
  margin: 0 0 12px;
}
.research-ablation h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.research-ablation-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.research-ablation-head small {
  flex: 1 1 320px;
  min-width: 0;
  opacity: 0.75;
  font-size: 12px;
  line-height: 1.6;
  color: inherit;
}
.research-ablation-result {
  font-size: 12px;
  color: inherit;
}
.research-ablation-result > small {
  display: block;
  opacity: 0.75;
  font-size: 11px;
  line-height: 1.6;
}
.research-ablation-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
/* 卡片从「一个周期一行读数」改成「一个因子一张卡，卡内每周期一行」，因此卡片本身纵向堆叠，
   行内再横向排列。栏宽交给外层 grid，卡内不再自己排流。 */
/* One card per factor with a row per horizon, so the card stacks vertically and each row flows
   horizontally. Outer grid owns the columns; the card no longer lays itself out. */
.research-ablation-grid article {
  display: block;
  font-size: 12px;
  color: inherit;
}
.research-ablation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 3px 0;
}
.research-ablation-row > b {
  min-width: 34px;
}
/* 子选择器限定 `>`：span 里还嵌着结论用的 `<b>`，用后代会把它也撑成固定宽度。 */
.research-ablation-row > span {
  display: inline;
  white-space: nowrap;
}
/* 标题行用一条分隔线与读数分开，否则因子名看起来只是第一行数据的标签。 */
.research-ablation-title {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}
.research-ablation-title > b {
  font-size: 13px;
  font-weight: 600;
}
/* 一个周期两行读数（方向 + 波动）。分组容器只负责把两行绑在一起，本身不参与横向排流 ——
   让它变成 flex/grid 会把两行并排，而不是上下叠。 */
/* Two readings per horizon (direction and volatility). The group only ties the two lines together
   and must not lay itself out: making it flex or grid puts the two lines side by side. */
.research-ablation-horizon {
  display: block;
}
/* 波动行整体降一级：它是同一个周期的第二个问题，不是新的一行周期。左侧细竖线让「两行同属一个
   周期」一眼可见，不必去数行。 */
/* The volatility line sits one level down: it is a second question about the same horizon, not a new
   horizon. The thin rule on its left makes that visible without counting lines. */
.research-ablation-vol {
  padding-left: 8px;
  margin-bottom: 4px;
  border-left: 2px solid rgba(127, 127, 127, 0.35);
  opacity: 0.92;
}
.research-ablation-dir {
  padding-left: 8px;
  margin-bottom: 6px;
  border-left: 2px solid rgba(64, 156, 255, 0.45);
  opacity: 0.94;
}
/* 第三档语气：既不是「好」也不是「坏」，而是「还不能判」。用 amber 而不是红/绿，是为了让「前后段反向」
   一眼区别于「有损害」—— 它说的是证据本身分裂，不是这个因子有害。 */
/* A third tone: neither good nor bad, but "not decidable yet". Amber rather than red or green so that
   "the halves disagree" cannot be misread as "this factor hurts" - the complaint is about the evidence,
   not about the factor. */
.research-ablation .warn {
  color: var(--warn, #e0a33a);
  font-weight: 600;
}
.research-ablation-howto {
  margin: 8px 0 0;
  font-size: 11.5px;
  opacity: 0.85;
}
.research-ablation-howto > summary {
  cursor: pointer;
  font-weight: 600;
}
.research-ablation-howto > ol {
  margin: 6px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}
.research-ablation-howto li {
  line-height: 1.55;
}
.research-ablation-method {
  margin: 8px 0 0;
  padding-left: 18px;
  opacity: 0.75;
  font-size: 11px;
  line-height: 1.7;
}

/* ===================== 参数与门槛（阶段 4）：单一配置源 =====================
   配置项按组铺开，每组一张卡，组内每项一行「路径 值」。被环境变量覆盖的项染成涨色并显式标注，
   这样「这次跑的和上次跑的规则不一样」是看得见的，不必只靠比对指纹才能察觉。
   子选择器限定 `>`，否则 span 里嵌的 `<b>` 也会被撑成固定宽度。 */
.research-tuning {
  margin: 0 0 12px;
}
.research-tuning h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.research-tuning-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.research-tuning-head small {
  flex: 1 1 320px;
  min-width: 0;
  opacity: 0.75;
  font-size: 12px;
  line-height: 1.6;
  color: inherit;
}
.research-tuning-result {
  font-size: 12px;
  color: inherit;
}
.research-tuning-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
}
.research-tuning-summary > span {
  display: inline;
  white-space: nowrap;
}
.research-tuning-grid {
  /* 卡片高度差异极大（「震荡带」3 项 vs 「周期定义」24 项）。用 grid 时同一行的行高由该行最高的
     那张卡决定，短卡下方会留下与它内容无关的大片空白 —— 单纯 `align-items: start` 只能阻止卡片
     被拉伸，挡不住这种行高空白。改成多列流动，卡片按内容高度依次排列，空白随之消失。 */
  /* Card heights differ wildly (3 leaves vs 24), and a grid row is as tall as its tallest card, so
     short cards leave a large gap that has nothing to do with their content. `align-items: start`
     stops the stretch but not the row height. Multi-column flow removes the gap entirely. */
  columns: 3 240px;
  column-gap: 8px;
}
.research-tuning-grid article {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.08);
  font-size: 12px;
  line-height: 1.5;
  color: inherit;
  /* 卡片不可跨列断开：一张卡被劈成两半会让「组名 + 它的项」分家。 */
  break-inside: avoid;
  margin-bottom: 8px;
}
/* 长路径不折行，超出就横向滚动：折行会让「路径 = 值」的对应关系变得难读。 */
.research-tuning-grid article > span {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}

/* ===================== 宏观事件因子（阶段 2）：CPI / 非农 / FOMC =====================
   每类事件一行，字段多、且末尾带一段精度说明，所以用 flex-wrap 自适应而不做固定列。
   子选择器限定 `>` ，否则 span 里的 `<small>n=…</small>` 也会吃到整行宽度。 */
.research-macro {
  margin: 0 0 12px;
}
.research-macro h3 {
  font-size: 14px;
  margin: 0 0 8px;
  color: inherit;
}
.research-macro-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.research-macro-head small {
  flex: 1 1 320px;
  min-width: 0;
  opacity: 0.75;
  font-size: 11px;
  line-height: 1.5;
  color: inherit;
}
.research-macro-result {
  font-size: 12px;
  color: inherit;
}
.research-macro-result > small {
  display: block;
  opacity: 0.75;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 8px;
  color: inherit;
}
.research-macro-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.research-macro-grid article {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 10px;
  border: 1px solid rgba(128, 128, 128, 0.24);
  border-radius: 8px;
  font-size: 12px;
  color: inherit;
}
.research-macro-grid article b {
  min-width: 88px;
}
.research-macro-grid article > span {
  display: inline;
  white-space: nowrap;
}
.research-macro-grid article > small {
  flex: 1 1 100%;
  opacity: 0.7;
  font-size: 11px;
  line-height: 1.5;
  color: inherit;
}
.research-macro-result details {
  margin-top: 10px;
  font-size: 11px;
  color: inherit;
}
.research-macro-result details summary {
  cursor: pointer;
  opacity: 0.8;
}
.research-macro-result details ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.6;
  opacity: 0.8;
}

/* ===================== v2.11.16 宏观事件列表：展开 / 收起控制条 ===================== */

/* 控制条常驻：只要列表长于折叠态就一直在，不再像旧版那样
   展开到底后连同统计一起消失。左右两段 —— 操作按钮组 / 进度。 */
.investment-calendar-card .ic-list-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  padding: 13px 0 2px;
  border-top: 1px dashed var(--cal-line-2);
}
.ic-more-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 主按钮：继续展开 N 条 */
.investment-calendar-card .ic-more-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(56, 223, 196, .42);
  border-radius: 8px;
  background: rgba(56, 223, 196, .1);
  color: var(--cal-accent);
  padding: 7px 15px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.investment-calendar-card .ic-more-btn:hover {
  background: rgba(56, 223, 196, .18);
  border-color: rgba(56, 223, 196, .72);
  transform: translateY(-1px);
}
.investment-calendar-card .ic-more-btn .ic-caret { margin: 0; border-top-color: currentColor; }

/* 次级按钮：全部展开 */
.investment-calendar-card .ic-more-btn.is-ghost {
  border-color: var(--cal-line-2);
  background: transparent;
  color: var(--cal-text-2);
}
.investment-calendar-card .ic-more-btn.is-ghost:hover {
  border-color: var(--cal-accent);
  background: rgba(56, 223, 196, .07);
  color: var(--cal-text);
}

/* 收起：展开后始终出现，中性色以便和「展开」区分开 */
.investment-calendar-card .ic-more-btn.is-less {
  border-color: rgba(148, 163, 184, .5);
  background: rgba(148, 163, 184, .1);
  color: var(--cal-text);
}
.investment-calendar-card .ic-more-btn.is-less:hover {
  border-color: rgba(148, 163, 184, .85);
  background: rgba(148, 163, 184, .18);
}

/* 进度：文字 + 细轨 */
.ic-more-progress { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.ic-more-progress > span {
  font-size: 11px;
  color: var(--cal-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ic-more-progress > span b { color: var(--cal-text-2); font-weight: 700; }
.ic-more-progress > span em {
  font-style: normal;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: var(--cal-accent);
  background: rgba(56, 223, 196, .13);
}
.ic-more-track {
  flex: 1;
  min-width: 60px;
  height: 3px;
  border-radius: 999px;
  background: var(--cal-line-2);
  overflow: hidden;
}
.ic-more-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cal-accent);
  transition: width .25s ease;
}

/* 展开到一定条数后改为框内滚动，避免把整页撑长 */
.ic-list.is-scrollable {
  max-height: min(62vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
/* 滚动时日期头吸顶，滚到哪一天一眼可见 */
.ic-list.is-scrollable .cal-day {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--cal-surface);
  backdrop-filter: blur(8px);
}
/* 框内滚动时列标题冗余（每行自带「今值/预期/前值」标签），让位给日期吸顶 */
.ic-list.is-scrollable > .cal-head { display: none; }

/* 滚动提示条 */
.ic-scroll-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--cal-surface-2);
  font-size: 11px;
  color: var(--cal-text-3);
}
.ic-scroll-bar button {
  appearance: none;
  flex: none;
  border: 1px solid var(--cal-line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--cal-text-2);
  padding: 4px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ic-scroll-bar button:hover { border-color: var(--cal-accent); color: var(--cal-text); }

@media (max-width: 720px) {
  .investment-calendar-card .ic-list-more { justify-content: flex-start; }
  .ic-more-progress { width: 100%; min-width: 0; }
}

/* ── 说明按钮「!」（2026-09-20 用户反馈）──────────────────────────────────
   原来 15px + 主题色描边太抢眼：它只是备注入口，不该跟内容抢注意力。
   现在 12px、默认 45% 不透明度，指针移上去或键盘聚焦时才恢复清晰。
   光标保持箭头（cursor: default）—— 问号光标传达的是「点我求助」，
   而这里既不是链接也不是帮助入口，主流产品的 tooltip 也不用问号光标。 */
:is(
  .help-dot,
  .metric .help-dot,
  .change-card .help-dot,
  .card h2 .help-dot,
  .levels .help-dot,
  .toolbar .help-dot,
  .signal-projection .help-dot,
  .microstructure-item > .help-dot,
  .microstructure-item > div > span .help-dot,
  #okxMicrostructureCard .help-dot,
  #okxMicrostructureCard .microstructure-item > div > span .help-dot
) {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  /* 别处有 min-height: 16px 的规则；不写这一条，高度会被它撑回去。 */
  min-height: 12px !important;
  /* 比例保险：将来哪条规则只改了宽或只改了高，也仍然是正圆而不是椭圆。 */
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  /* 居中三件套：flex + 双向居中 + 行高 1，「!」不会贴到圆底。 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  /* 与标题文字的中心线齐平。原来这里是 vertical-align: 0（＝贴基线），18px 行高的
     标题上图标中心会比文字中心**低约 2.5px**。`middle` 只能补回一半（还差 1.7px），
     所以直接按行基准上抬 2.5px —— 这个值是用 Range 量「文字中心线 vs 图标中心」
     校准出来的；flex 标题里的图标不受 vertical-align 影响，仍然走父级居中。 */
  vertical-align: 2.5px !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
  opacity: 0.45 !important;
  /* 卡片标题多是 flex 行，不锁住的话按钮会被 align-items: stretch 拉伸 ——
     表现就是「宽 12 / 高 16」那种竖椭圆。 */
  align-self: center !important;
  flex: none !important;
  cursor: default !important;
  transition:
    opacity 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
/* 小字号标签（指标明细等 12px / 行高 14.4px）：同一套抬升量会过头 ——
   它们只需要抬 1px。用 :is() 里带 id 的那条把整体特异度顶到 (1,3,2)，
   否则压不过上面那条基础块。 */
:is(
  .metrics .metric span .help-dot,
  .signal-projection strong .help-dot,
  .pattern-analysis-card .help-dot,
  #okxMicrostructureCard .microstructure-item > div > span .help-dot
) {
  vertical-align: 1px !important;
}
/* 悬停/聚焦：先把圈「点亮」给即时反馈（不延迟），停住 260ms 才弹说明 ——
   反馈与触发分开，鼠标扫过时也有交代，不会显得没反应。
   ⚠️ 选择器必须用 :is(…) 把整套列表带上：基础块里的 `.card h2 .help-dot` 特异度
   是 (0,2,1)，单写 `.help-dot:hover` (0,2,0) 压不过它，高亮会**静默失效**。 */
:is(.help-dot, .metric .help-dot, .change-card .help-dot, .card h2 .help-dot, .levels .help-dot, .toolbar .help-dot, .signal-projection .help-dot, .microstructure-item > .help-dot, .microstructure-item > div > span .help-dot, #okxMicrostructureCard .help-dot, #okxMicrostructureCard .microstructure-item > div > span .help-dot):hover,
:is(.help-dot, .metric .help-dot, .change-card .help-dot, .card h2 .help-dot, .levels .help-dot, .toolbar .help-dot, .signal-projection .help-dot, .microstructure-item > .help-dot, .microstructure-item > div > span .help-dot, #okxMicrostructureCard .help-dot, #okxMicrostructureCard .microstructure-item > div > span .help-dot):focus-visible {
  opacity: 1 !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  background-color: rgba(75, 159, 255, 0.16) !important;
  box-shadow:
    0 0 0 3px rgba(75, 159, 255, 0.14),
    0 0 10px rgba(75, 159, 255, 0.32) !important;
}

/* ══ 多币种：模式开关 + 币种切换器 ══════════════════════════════════════════
   只新增两类元素，不改动任何既有规则，因此比特币模式下的观感与之前完全一致。 */
.controls #coinModeToggle {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--border-subtle, #2a313b);
  background: var(--bg-surface-2, #0d1524);
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.controls #coinModeToggle button {
  flex: 1 1 auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #9aa4b2);
  font-size: 12px;
  line-height: 1;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.controls #coinModeToggle button:hover {
  color: var(--text-primary, #e6edf3);
  transform: translateY(-0.5px);
}
.controls #coinModeToggle button.is-active {
  background: var(--bg-elevated, #19243a);
  color: var(--text-primary, #e6edf3);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
html[data-theme="light"] .controls #coinModeToggle button.is-active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04) inset;
}
html[data-theme="light"] .controls #coinModeToggle {
  background: #eef2f6;
  border-color: #d6dde5;
}
html[data-theme="light"] .controls #coinModeToggle button { color: #56616e; }
html[data-theme="light"] .controls #coinModeToggle button:hover { color: #1a1d23; }
.coin-switcher {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}
.coin-switcher[hidden] { display: none; }
.coin-switcher .coin-chip {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, #2a313b);
  background: var(--bg-surface, #161a20);
  color: var(--text-secondary, #9aa4b2);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.coin-switcher .coin-chip:hover {
  border-color: var(--border-strong, #3a434f);
  transform: translateY(-1px);
}
.coin-switcher .coin-chip .coin-chip-mark {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--text-primary, #e6edf3);
}
.coin-switcher .coin-chip .coin-chip-name {
  font-size: 11px;
  color: var(--text-muted, #5b6573);
}
.coin-switcher .coin-chip.is-active {
  border-color: var(--accent-cyan, #22d3ee);
  background: color-mix(in srgb, var(--accent-cyan, #22d3ee) 16%, var(--bg-surface, #161a20));
  color: var(--accent-cyan, #22d3ee);
}
.coin-switcher .coin-chip.is-active .coin-chip-mark { color: var(--accent-cyan, #22d3ee); }
.coin-switcher .coin-chip.is-active .coin-chip-name { color: var(--accent-cyan, #22d3ee); opacity: .8; }
@media (max-width: 640px) {
  .coin-switcher { gap: 6px; }
  .coin-switcher .coin-chip { padding: 6px 10px; }
  .coin-switcher .coin-chip .coin-chip-name { display: none; }
}