/* ══════════════════════════════════════════════════════════════
   CoinKip — 明暗主题切换
   默认暗色 → [data-theme="light"] 明色
   ══════════════════════════════════════════════════════════════ */

/* 明色主题覆盖 */
[data-theme="light"] {
  --bg-primary:     #F2F3F5;
  --bg-secondary:   #FFFFFF;
  --bg-tertiary:    #F7F8FA;
  --bg-hover:       #E8E9EC;
  --bg-active:      #DDDFE3;

  --sidebar-bg:     #FFFFFF;
  --topbar-bg:      rgba(255, 255, 255, 0.90);

  --text-primary:   #1D2129;
  --text-secondary: #4E5969;
  --text-tertiary:  #86909C;
  --text-disabled:  #C9CDD4;

  --border-primary:   rgba(0, 0, 0, 0.06);
  --border-secondary: rgba(0, 0, 0, 0.10);
  --border-hover:     rgba(0, 0, 0, 0.15);

  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-dropdown:0 4px 16px rgba(0, 0, 0, 0.10);
}

/* ── 主题切换动画 ── */
html {
  transition: background-color var(--transition-slow);
}

html * {
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* 切换按钮样式 */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* 涨跌色切换按钮 */
.color-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
  background: transparent;
  cursor: pointer;
  font-size: var(--font-xs);
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
}

.color-mode-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-secondary);
}

.color-mode-toggle .up-sample {
  color: var(--color-up);
}

.color-mode-toggle .down-sample {
  color: var(--color-down);
}

/* ── 连接状态指示 ── */
.connection-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(0, 181, 120, 0.06);
  border: 1px solid rgba(0, 181, 120, 0.15);
}

.connection-status.disconnected {
  background: rgba(245, 63, 63, 0.06);
  border-color: rgba(245, 63, 63, 0.15);
}

/* ── 时钟 ── */
.topbar-clock {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  min-width: 60px;
  text-align: right;
}