/* ==========================================================================
   飞翔科技频道 — 设计令牌
   深色科技风：深蓝墨底 + 青绿强调，涨绿跌红（国内习惯）
   ========================================================================== */
:root {
  /* 背景层次 */
  --bg:        #0A101C;
  --bg-elev:   #101A2C;
  --bg-hover:  #16233A;
  --bg-sunken: #070C16;

  /* 描边 */
  --border:        rgba(45, 212, 191, .14);
  --border-strong: rgba(45, 212, 191, .30);
  --border-plain:  rgba(255, 255, 255, .07);

  /* 文字 */
  --text:      #E6EDF7;
  --text-dim:  #8FA3BF;
  --text-mute: #5C7091;

  /* 强调色 */
  --accent:   #2DD4BF;
  --accent-2: #22D3EE;
  --link:     #4CC9F0;

  /* 涨跌：国内习惯涨绿跌红 */
  --up:      #16C784;
  --down:    #EA3943;
  --flat:    #E9EFF7;   /* 不涨不跌用近白色，与涨绿跌红区分开 */
  --up-bg:   rgba(22, 199, 132, .12);
  --down-bg: rgba(234, 57, 67, .12);

  /* 提示 */
  --warn:    #F0B90B;
  --warn-bg: rgba(240, 185, 11, .12);

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num:  ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo,
               Consolas, monospace;

  /* 尺寸 */
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 8px 24px rgba(0, 0, 0, .4);
  --wrap:      1280px;
  --gap:       20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.7 var(--font-sans);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; display: block; }

/* 所有数字都要等宽，否则每次刷新都会左右抖动 */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

.chip-up   { background: var(--up-bg);   color: var(--up);   }
.chip-down { background: var(--down-bg); color: var(--down); }
.chip-flat { background: rgba(143,163,191,.1); color: var(--flat); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.muted  { color: var(--text-dim); }
.mute2  { color: var(--text-mute); }
.small  { font-size: 12.5px; }
.nowrap { white-space: nowrap; }

/* 价格变动闪烁。只在数值真的变化时加这个 class */
@keyframes flash-up {
  0%   { background: rgba(22,199,132,.32); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0%   { background: rgba(234,57,67,.32); }
  100% { background: transparent; }
}
.flash-up   { animation: flash-up .7s ease-out; }
.flash-down { animation: flash-down .7s ease-out; }

/* 数据延迟时整体降低存在感，但不隐藏 —— 有旧数据也比空白好 */
.is-stale { opacity: .55; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-sunken); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 5px;
  border: 2px solid var(--bg-sunken);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }