/* ============================================================================
   BNtrade 皮肤层 — 现代金融终端
   ----------------------------------------------------------------------------
   ★ 设计约束 (来自 index.html 数据链路审计):
     这一层只允许改「视觉属性」, 严禁碰以下任何东西 ——
       · 任何 id 选择器 (页面里 57 个 id 全是 JS 锚点)
       · 任何类名 (JS 用 querySelector / className 字符串拼接依赖它们)
       · display 属性 (JS 用内联 style.display 控制 #symbolDropdown / #loadCredForm,
         .modal-overlay 则用 .active 类切 display, 两套机制并存, 碰了就崩)
       · 布局结构相关的 grid-template / flex-direction (JS 有层级依赖:
         [data-pos-key] 子树、#logBox 直接子元素、.position-action-grid 三层链)

     所以本文件做的是: 重定义 CSS 变量 + 调色、质感、字体、间距、移动端断点。
     全部可逆 —— 删掉引入它的那一行 <link> 就完全回到原样。

   引入方式: 必须放在页面内联 <style> 之后 (同优先级, 后加载者胜)
       <link rel="stylesheet" href="/static/shared/skin.css">
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 变量重定义 — 保持原有变量名不变, 只换值。
      原配色是偏蓝的玻璃拟态, 新配色更深、更中性, 长时间盯盘负担更小,
      同时把涨跌色调到在深底上对比度更高的位置。
   --------------------------------------------------------------------------- */
:root {
  /* ---- index.html (交易终端) 的变量名 ---- */
  --bg:           #0A0E16;
  --bg-soft:      #10151F;
  --panel:        #10151F;
  --panel-2:      #161C28;
  --line:         rgba(255, 255, 255, 0.10);
  --line-strong:  rgba(255, 255, 255, 0.18);
  --text:         #E7ECF5;
  --muted:        #A3B0C4;

  --cyan:         #38BDF8;
  --teal:         #22D3C5;
  --lime:         #5BE49B;
  --amber:        #FFB343;
  --red:          #FF5C7C;
  --red-strong:   #FF4368;
  --green:        #2BD98A;
  --green-strong: #14C878;

  --shadow:       0 14px 38px rgba(0, 0, 0, 0.46);
  --radius:       14px;

  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* ---- herd.html 的变量名 (与上面不冲突, 各页各取所需) ----
     原值: bg#090c12 bg2#0e131b panel#121826 panel2#161d2c line#232c3d
           ink#dbe2ee dim#7b879c faint#4a5468
           long#37d495 short#ff5f6d amber#f5a623 fire#ffd23f cyan#39c5e0     */
  --bg2:    #10151F;
  --panel2: #161C28;
  --ink:    #E7ECF5;
  --dim:    #A3B0C4;
  --faint:  #6E7C93;
  --long:   #2BD98A;
  --short:  #FF5C7C;
  --fire:   #FFD75E;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
          'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* ---- trend_mart.html 的变量名 ----
     原值: bg#0b0e13 panel#12161f panel2#171c27 line#232a38 line2#2c3547
           text#e8ecf3 dim#8b95a7 green#2fd08c red#ff5d6c amber#ffc14d
           blue#5ea2ff purple#b18cff                                        */
  --line2:  rgba(255, 255, 255, 0.18);
  --blue:   #5B8CFF;
  --purple: #A894FF;

  /* ---- chart.html 的变量名 ---- */
  --bg0:      #0A0E16;
  --bg1:      #10151F;
  --txt:      #E7ECF5;
  --accent:   #38BDF8;
  --accent-2: #22D3C5;
  --ok:       #2BD98A;
  --bad:      #FF5C7C;
  --line-2:   rgba(255, 255, 255, 0.18);

  /* ---- ib_console.html 的变量名 ---- */
  --bg-deep:      #070A11;
  --bg-surface:   #10151F;
  --bg-elevated:  #161C28;
  --border:       rgba(255, 255, 255, 0.10);
  --border-soft:  rgba(255, 255, 255, 0.055);
  --accent-dim:   rgba(56, 189, 248, 0.14);
  --accent-glow:  rgba(56, 189, 248, 0.26);
  --indigo:       #7C8CFF;
  --indigo-dim:   rgba(124, 140, 255, 0.14);
  --live:         #2BD98A;
  --live-dim:     rgba(43, 217, 138, 0.14);
  --loss:         #FF5C7C;

  /* ---- strategy_dashboard.html 的变量名 (Tailwind 自有的 --tw-* 一律不碰) ---- */
  --bg3:       #1D2432;
  --text2:     #A3B0C4;
  --text3:     #6E7C93;
  --green-dim: rgba(43, 217, 138, 0.14);
  --red-dim:   rgba(255, 92, 124, 0.14);
  --yellow:    #FFB343;

  /* ---- pump_dashboard.html ---- */
  --gold: #FFC96B;

  /* ---- adaptive_live.html ---- */
  --violet: #A894FF;
}

/* ---------------------------------------------------------------------------
   2. 底层 — 去掉原来的大面积径向光晕, 换成克制的顶部冷光。
      金融终端的高级感来自克制, 不是发光。
   --------------------------------------------------------------------------- */
body {
  background: var(--bg);
  background-image:
    radial-gradient(1100px 460px at 50% -12%, rgba(56, 189, 248, 0.055), transparent 68%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 滚动条 — 默认的在深色终端里太扎眼 */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: content-box; }

::selection { background: rgba(56, 189, 248, 0.24); }

/* ---------------------------------------------------------------------------
   3. 面板 — 从半透明玻璃改成实心, 层次靠描边和微妙内高光, 不靠透明度
   --------------------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel-head {
  padding: 12px 15px;
  background: var(--panel-2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.panel-title { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.panel-body { padding: 15px; }

/* ---------------------------------------------------------------------------
   4. 交易舞台 — 保留主视觉地位, 但把光效收敛成一道顶部弧光
   --------------------------------------------------------------------------- */
.stage {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(560px 200px at 50% -10%, rgba(56,189,248,.10), transparent 72%),
    linear-gradient(180deg, #131A27, #0D121C);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.stage::after { opacity: .4; }

/* ---------------------------------------------------------------------------
   5. 价格 — 终端第一视觉焦点。等宽 + tabular-nums, 位数变化时不跳动
   --------------------------------------------------------------------------- */
.price-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: clamp(36px, 5.2vw, 60px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #F4F8FF;
  text-shadow: 0 0 32px rgba(56,189,248,.16);
}
/* 涨跌闪烁保留原类名与原语义, 只换颜色 */
.price-value.flash-up   { color: #5BE49B; }
.price-value.flash-down { color: #FF8098; }
.price-label { letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }

/* ---------------------------------------------------------------------------
   6. 全局数字等宽 — 金融界面的地基。
      不加这个, $1,111.11 会显得比 $999.99 短, 列对不齐。
   --------------------------------------------------------------------------- */
.calc-row .v,
.kv-item .v,
.result-pill .v,
.position-pill .v,
.mini-cell .v,
.list-row .quote,
.symbol-quote,
input[type="number"],
.log-box {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------------------------------------------------------------------------
   7. 按钮
   --------------------------------------------------------------------------- */
.btn {
  border-radius: 10px;
  font-family: var(--ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .22s ease, transform .12s ease, color .18s ease;
}
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn-secondary {
  background: rgba(255,255,255,.035);
  border-color: var(--line);
  color: var(--text);
}
.btn-secondary:hover { background: rgba(255,255,255,.075); border-color: var(--line-strong); }
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--teal));
  color: #04202E;
  box-shadow: 0 4px 16px rgba(56,189,248,.24);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 22px rgba(56,189,248,.32); }

/* 买卖按钮 — 语义色, 绝不可与主按钮混淆 */
.btn-buy {
  background: rgba(43,217,138,.13);
  border-color: rgba(43,217,138,.36);
  color: var(--green);
}
.btn-buy:hover { background: rgba(43,217,138,.22); }
.btn-buy.strong {
  background: linear-gradient(135deg, var(--green), var(--green-strong));
  color: #032015; border-color: transparent;
  box-shadow: 0 4px 18px rgba(43,217,138,.26);
}
.btn-sell {
  background: rgba(255,92,124,.13);
  border-color: rgba(255,92,124,.36);
  color: var(--red);
}
.btn-sell:hover { background: rgba(255,92,124,.22); }
.btn-sell.strong {
  background: linear-gradient(135deg, var(--red), var(--red-strong));
  color: #2A0510; border-color: transparent;
  box-shadow: 0 4px 18px rgba(255,92,124,.26);
}

/* ---------------------------------------------------------------------------
   8. 徽章 — 类名由 JS 字符串拼接 (badge / badge online / warning / error / loaded),
      这里只换配色, 一个类名都不动
   --------------------------------------------------------------------------- */
.badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.badge.online, .badge.loaded { color: var(--green); border-color: rgba(43,217,138,.34); background: rgba(43,217,138,.11); }
.badge.warning { color: var(--amber); border-color: rgba(255,179,67,.34); background: rgba(255,179,67,.11); }
.badge.error   { color: var(--red);   border-color: rgba(255,92,124,.34); background: rgba(255,92,124,.11); }

/* ---------------------------------------------------------------------------
   9. 表单 — 输入框是下单参数入口, 视觉上要明确"可编辑"
   --------------------------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  background: #070A11;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(56,189,248,.42);
  box-shadow: 0 0 0 3px rgba(56,189,248,.14);
}
input::placeholder { color: #4A566B; }

.chip {
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover { background: rgba(56,189,248,.11); color: var(--cyan); border-color: rgba(56,189,248,.34); }

/* ---------------------------------------------------------------------------
   10. 计算板 / 列表 / 日志
   --------------------------------------------------------------------------- */
.calc-board {
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0B0F18;
}
.calc-row { border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12.5px; }
.calc-row .k { color: var(--muted); }
.calc-row .v { color: #EEF4FF; }
.calc-row .v.warn { color: var(--amber); }

.list-row {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: #0D121C;
  transition: border-color .18s ease, background .18s ease;
}
.list-row:hover { border-color: var(--line-strong); background: #111825; }

.log-box {
  background: #070A11;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  font-size: 11.5px;
  line-height: 1.66;
}
.log-line.success { color: var(--green); }
.log-line.warn    { color: var(--amber); }
.log-line.error   { color: var(--red); }
.log-line.info    { color: var(--muted); }

.result-card {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0D121C;
}
.position-pill .v.ok  { color: var(--green); }
.position-pill .v.bad { color: var(--red); }

/* 币种下拉 —— ⚠️ 只改配色, 绝不碰 display:
   JS 用内联 style.display = 'block'/'none' 控制它的显隐, 这里若设 display 会被打架 */
.symbol-dropdown {
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: #141A26;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.symbol-item { border-radius: 8px; transition: background .14s ease; }
.symbol-item:hover, .symbol-item.active { background: rgba(56,189,248,.13); }

/* 模态 —— 同样只改配色, .active 切 display 的机制原样保留 */
.modal { border-radius: 16px; border: 1px solid var(--line-strong); background: #10151F; }
.modal-header { border-bottom: 1px solid rgba(255,255,255,.07); }

/* ---------------------------------------------------------------------------
   11. 顶栏
   --------------------------------------------------------------------------- */
.brand-mark {
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan), var(--teal));
  color: #04202E;
  box-shadow: 0 3px 14px rgba(56,189,248,.26);
}
.brand h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.brand p  { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   12. 移动端 — 原页面在窄屏下三栏挤成一条, 这里补齐可用性。
       只调间距/字号/换行, 不改 grid 结构本身 (JS 无关, 但保守起见仍不动 columns)
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app { padding: 12px; }
  .panel-body { padding: 13px; }
  .stage { border-radius: 15px; }
  .brand p { display: none; }          /* 副标题在窄屏没有信息价值, 让位给操作 */
  .brand h1 { font-size: 15px; }
}

@media (max-width: 640px) {
  .app { padding: 10px 10px 28px; }
  .price-value { font-size: clamp(30px, 11vw, 44px); }
  .panel-head { padding: 10px 12px; }
  .panel-body { padding: 12px; }
  .calc-row { font-size: 12px; }
  .log-box { max-height: 180px; }
  .list-table { max-height: 300px; }
  /* iOS Safari 在 font-size < 16px 的输入框聚焦时会强制放大整页 */
  input[type="text"], input[type="number"], input[type="password"], select, textarea {
    font-size: 16px;
  }
  /* 触摸目标不小于 40px */
  .btn { min-height: 40px; }
  .chip { min-height: 30px; padding: 6px 10px; }
}

/* 触摸设备: 去掉 hover 残留态 */
@media (hover: none) and (pointer: coarse) {
  .btn:hover, .chip:hover, .list-row:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   13. herd.html / trend_mart.html 特化
   ----------------------------------------------------------------------------
   这两页的配色几乎全走 CSS 变量, 上面第 1 节已把变量换完, 这里只补质感与可用性。

   ⚠️ 审计红线, 以下一律不碰:
     · .trow 的 grid-template-columns —— 三套列宽靠 .pos/.log/.rec 祖先 class 生效
     · .card > h3 直接子选择器 —— 加任何层级都会断
     · .dial 的 --score / --dial-color 变量与 .dial:before 内圈遮罩
     · .eco-mod-head b:last-child —— 靠"最后一个 b"取分数
     · .rank-wrap thead 的 sticky 层级、.ev-wrap table 结构
     · 任何由 JS 插值产生的状态类 (badge ${state} / ev-${event} / chan ${A|B} …)
   ============================================================================ */

/* 卡片 — herd 与 tmart 共有 */
.card {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.03);
}

/* herd: 状态横幅 / 账本 / 轴卡 */
.rc, .book, .axis-card, .coin-ledger, .ledger-table-wrap, .banwrap {
  border-radius: 12px;
}
.status-card.hunt { box-shadow: inset 0 0 0 1px rgba(43,217,138,.24); }
.status-card.stir { box-shadow: inset 0 0 0 1px rgba(255,179,67,.24); }
.dot.g { background: var(--long); }
.dot.a { background: var(--amber); }
.dot.d { background: var(--faint); }
.zfill { border-radius: 999px; }
.tag { border-radius: 5px; font-family: var(--mono); font-weight: 700; letter-spacing: .04em; }
.tag.long  { color: var(--long);  background: rgba(43,217,138,.13); }
.tag.short { color: var(--short); background: rgba(255,92,124,.13); }
.seg { border-radius: 8px; font-weight: 600; }
.up { color: var(--long, var(--green)); }
.dn { color: var(--short, var(--red)); }

/* tmart: 评分环外圈配色 (只换色, 不动 --score / :before 几何) */
.dial-wrap, .eco-panel, .rank-wrap, .pool-wrap, .cfg-sec { border-radius: 12px; }
.gatechip { border-radius: 5px; font-family: var(--mono); }
.gatechip.on { color: var(--green); background: rgba(43,217,138,.13); }
.chan { border-radius: 5px; font-family: var(--mono); font-weight: 700; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.exit-chip { border-radius: 5px; }
.mchip, .cliff-chip { border-radius: 7px; }

/* 两页共有: 数字等宽 */
.mono, .num, .big, .book-num, .ledger-kpi b, .stat .v, .mstat .v, .kv b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* 两页共有: 移动端补强 (原页面已有断点, 这里只补被漏掉的可用性项) */
@media (max-width: 640px) {
  /* iOS Safari 在 font-size < 16px 的输入框聚焦时会强制放大整页 —— 两页原本都没处理 */
  .cfg-grid input, .cfg-grid select, .cfg-grid textarea,
  .banwrap textarea, .token-bar input, .ledger-select,
  #cfgNotional, #cfgLev, #cfgMax, #cfgBan, #rank-search, #ledgerSearch {
    font-size: 16px;
  }
  /* 触摸目标 */
  .btn, .seg, .actions .btn { min-height: 38px; }
  /* 宽表格横滑, 不让页面整体横向滚动 */
  .ledger-table-wrap, .rank-wrap, .pool-wrap, .ev-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 全站: 焦点可见 (键盘可达性, 三页原本都缺) */
.btn:focus-visible, .seg:focus-visible, button:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan, #38BDF8);
  outline-offset: 2px;
}

/* 全局导航条注入后, 给页面顶部留出呼吸 (nav 是 sticky, 不占文档流高度问题) */
body > .wrap:first-of-type,
body > .app:first-of-type { padding-top: 14px; }