/* ==================================================================================
   OASIS · 色板 v3 —— 全站唯一颜色来源
   ==================================================================================
   为什么推倒重建
   --------------
   前几轮是"打补丁"：每次只调几个变量，没人说得清最终值从哪来，结果色值越改越多
   （92 → 129），观感越改越花。这次不再增量修补，而是照成熟设计系统的方法
   **从零建一套完整色阶**：

        中性色阶（页面/面板/边线/文字） + 1 个强调色 + 2 个语义色（涨/跌）

   方法论（与主流交易终端一致，色值全部自建）
   -------------------------------------------
     1. 底色**中性**（纯灰），不偏绿不偏蓝 —— 偏色会让整屏"脏"，也压缩层次空间
     2. 层次只靠**明度**：页面 → 面板 → 浮层逐级提亮
     3. 边线用**同族灰**，不用彩色 —— 彩色边线是最常见的"花"的来源
     4. 文字三级灰，覆盖 4.5:1 与 3:1 两档对比度
     5. **颜色只留给"数据的好坏"**：涨绿、跌红，其余全部灰阶
     6. 强调色只出现在"可点 / 选中 / 主操作"，面积越小越高级

   关键约束：本文件是全站唯一定义颜色的地方。
   其它 CSS 只允许 `var(--token)`，不得再出现硬编码色值 —— 这是不再"越改越乱"的前提。
   ================================================================================== */

/* ==================================================================================
   一、深色主题（默认）
   ================================================================================== */
:root,
body[data-theme="deep"],
body:not([data-theme]) {
  /* ---- 中性底：**真正的纯灰**（R=G=B），饱和度 0，杜绝任何偏色 ----
     为什么用纯灰而不是"带一点冷调"：低明度下肉眼对色相不敏感，但一旦某个面板
     偏蓝、另一个偏绿，整屏就会显得"脏"，且层次关系会被色相干扰。纯灰最稳。 */
  --o-void:   #0A0A0A;
  --o-bg:     #101010;
  --o-panel:  #171717;
  --o-panel2: #1D1D1D;
  --o-field:  #0D0D0D;
  --o-float:  #202020;

  /* ---- 边线：同族灰，同样纯中性 ---- */
  --o-line:   #262626;
  --o-line2:  #323232;
  --o-line3:  #424242;
  --hair:     #1C1C1C;

  /* ---- 强调色上的前景：主按钮 / 选中标签里的文字 ---- */
  --o-on-accent: #06170F;

  /* ---- 唯一强调色 ---- */
  --o-green:  #22C55E;
  --o-green2: #16A34A;
  --o-green-d:#0E2A1C;      /* 选中底：低饱和深绿，不抢眼 */

  /* ---- 文字三级灰（纯灰；对比度 13.7:1 / 7.7:1 / 4.9:1）---- */
  --o-white:  #E8E8E8;
  --o-white2: #A8A8A8;
  --o-white3: #808080;

  /* ---- 语义色：只有两个，只给数据 ---- */
  --up:       #26D07C;
  --down:     #F6465D;
  --o-red:    #F6465D;
  --o-amber:  #F0B90B;

  /* ---- 青/紫退出语义：保留名指向中性，避免旧代码取空 ---- */
  --o-cyan:   #808080;
  --o-violet: #808080;

  /* ---- 形状与阴影 ---- */
  --radius: 6px;
  --radius-s: 4px;
  --shadow: none;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-pop:  0 16px 40px rgba(0, 0, 0, .58);
  --glass: rgba(22, 26, 31, .92);

  /* ---- 图表专用：装饰一律灰阶 ---- */
  --chart-grid:  #1C1C1C;
  --chart-grid2: #262626;
  --chart-axis:  #808080;
  --chart-text:  #A8A8A8;
  --chart-deco:  #666666;
  --chart-deco2: #808080;

  /* ---- 字体 ---- */
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  --sans: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;

  /* ---- 间距（app.css 沿用，集中在此以便统一调）---- */
  --gap: 5px;
  --pad: 7px;
  /* 兼容别名：app.css 历史引用 */
  --o-hair: var(--hair);
}

/* ==================================================================================
   二、浅色主题（不是反相，是重排层次）
   ================================================================================== */
body[data-theme="light"] {
  --o-void:   #FFFFFF;
  --o-bg:     #F2F2F2;      /* 页面底：必须明显区别于白色面板，否则两者会糊在一起 */
  --o-panel:  #FFFFFF;
  --o-panel2: #EAEAEA;
  --o-field:  #F7F7F7;
  --o-float:  #FFFFFF;

  --o-line:   #DCDCDC;
  --o-line2:  #C8C8C8;
  --o-line3:  #A6A6A6;
  --hair:     #E6E6E6;

  --o-on-accent: #FFFFFF;

  --o-green:  #0E8C4A;
  --o-green2: #0B7040;
  --o-green-d:#E6F4EC;

  --o-white:  #171717;      /* 15.5:1 */
  --o-white2: #4D4D4D;      /*  7.6:1 */
  --o-white3: #6E6E6E;      /*  4.6:1 */

  --up:       #0A8F52;
  --down:     #D93A4E;
  --o-red:    #D93A4E;
  --o-amber:  #9A6B00;

  --o-cyan:   #6E6E6E;
  --o-violet: #6E6E6E;

  --shadow-card: 0 1px 2px rgba(20, 24, 29, .06);
  --shadow-pop:  0 16px 40px rgba(20, 24, 29, .16);
  --glass: rgba(255, 255, 255, .94);

  --chart-grid:  #EDEDED;
  --chart-grid2: #E2E2E2;
  --chart-axis:  #6E6E6E;
  --chart-text:  #4D4D4D;
  --chart-deco:  #9A9A9A;
  --chart-deco2: #6E6E6E;
}

/* ==================================================================================
   三、落地：只用令牌，不再出现硬编码色值
   ================================================================================== */

/* ---- 页面与面板层次 ---- */
body { background: var(--o-bg); color: var(--o-white); }

.topbar { background: var(--glass); border-bottom: 1px solid var(--o-line); }
.tabs { background: var(--o-panel); border-bottom: 1px solid var(--o-line); }

.card {
  background: var(--o-panel);
  border: 1px solid var(--o-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card-head { background: var(--o-panel2); border-bottom: 1px solid var(--o-line); }
.card-title { color: var(--o-white); }
/* 装饰标记一律中性；只有悬停才亮强调色 */
.card-title::before { background: var(--o-line3); }
.card:hover .card-title::before { background: var(--o-green); }
.card-sub { color: var(--o-white3); }

.sidebar { background: var(--o-panel); border-right: 1px solid var(--o-line); }
.sub-head { background: var(--o-panel2); color: var(--o-white2); }
.side-title { color: var(--o-white3); }
.statusbar {
  background: var(--o-panel2);
  border-top: 1px solid var(--o-line);
  color: var(--o-white3);
}

.modal { background: color-mix(in srgb, var(--o-void) 74%, transparent); }
.modal-box {
  background: var(--o-float);
  border: 1px solid var(--o-line2);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}
.modal-head {
  background: var(--o-panel2);
  border-bottom: 1px solid var(--o-line);
  border-radius: 10px 10px 0 0;
}
.modal-title { color: var(--o-white); }
.toast {
  background: var(--o-float);
  border: 1px solid var(--o-line2);
  box-shadow: var(--shadow-pop);
}

/* ---- 功能键：选中靠"底色 + 底部指示线"，不整块上色 ---- */
.tab { color: var(--o-white2); }
.tab:hover { background: var(--o-panel2); color: var(--o-white); }
.tab.active { background: var(--o-green-d); color: var(--o-white); font-weight: 600; }
.tab.active::after { background: var(--o-green); }
.tab.active i { color: var(--o-green); }
.tab-group { color: var(--o-white3); }

/* ---- 按钮：三态明确 ---- */
.btn { background: var(--o-panel2); border: 1px solid var(--o-line2); color: var(--o-white); }
.btn:hover { background: var(--o-line); border-color: var(--o-line3); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--o-panel2); }
.btn.primary {
  background: var(--o-green);
  border-color: var(--o-green);
  color: #FFFFFF;
  font-weight: 600;
}
body[data-theme="deep"] .btn.primary,
body:not([data-theme]) .btn.primary { color: #06170F; }
.btn.primary:hover { background: var(--o-green2); border-color: var(--o-green2); }
.btn.danger { color: var(--o-red); border-color: color-mix(in srgb, var(--o-red) 45%, var(--o-line2)); }
.btn.danger:hover { background: color-mix(in srgb, var(--o-red) 12%, transparent); }

/* ---- 输入与下拉 ---- */
.input, .select, select.select, .seg-ctl {
  background: var(--o-field);
  border: 1px solid var(--o-line2);
  color: var(--o-white);
}
.input:hover, .select:hover { border-color: var(--o-line3); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--o-green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--o-green) 24%, transparent);
}
.seg-ctl button { color: var(--o-white2); border-right: 1px solid var(--o-line); }
.seg-ctl button:hover { background: var(--o-panel2); color: var(--o-white); }
.seg-ctl button.on { background: var(--o-green-d); color: var(--o-green); font-weight: 600; }

/* ---- 表格 ---- */
table.tbl th {
  background: var(--o-panel2);
  color: var(--o-white2);
  border-bottom: 1px solid var(--o-line2);
  font-weight: 600;
}
table.tbl td { border-bottom: 1px solid var(--hair); }
table.tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--o-white) 2%, transparent); }
table.tbl tbody tr:hover { background: var(--o-panel2); }

/* ---- 侧栏列表 ---- */
.srow:hover { background: var(--o-panel2); }
.srow.active { background: var(--o-green-d); box-shadow: inset 2px 0 0 var(--o-green); }
.chip { background: var(--o-panel2); border: 1px solid var(--o-line2); color: var(--o-white2); }
.chip:hover { color: var(--o-white); border-color: var(--o-line3); }
.chip.active { background: var(--o-green-d); border-color: var(--o-green); color: var(--o-green); }

/* ---- 指标格：默认中性，只有涨跌才着色 ---- */
.tile { background: var(--o-panel); }
.tile:hover { background: var(--o-panel2); }
.tile .l, .tile .s { color: var(--o-white3); }
.tile .v { color: var(--o-white); font-weight: 600; }

/* ---- 徽章：通过=绿、告警=琥珀、其余中性 ---- */
.badge { background: var(--o-panel2); border: 1px solid var(--o-line2); color: var(--o-white2); }
.badge.ok {
  background: color-mix(in srgb, var(--o-green) 14%, transparent);
  border-color: color-mix(in srgb, var(--o-green) 40%, transparent);
  color: var(--o-green);
}
.badge.warn {
  background: color-mix(in srgb, var(--o-amber) 14%, transparent);
  border-color: color-mix(in srgb, var(--o-amber) 40%, transparent);
  color: var(--o-amber);
}

/* ---- 滚动条：中性 ---- */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--o-line2);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--o-line3); background-clip: padding-box; }

/* ==================================================================================
   四、热力图：单色场（绿/红 × 幅度），文字统一高对比
   ================================================================================== */
.heat-cell { border-radius: 3px; border: 1px solid var(--hair); }
body[data-theme="deep"] .heat-cell,
body:not([data-theme]) .heat-cell {
  background: color-mix(in srgb, var(--up) var(--hc-a, 0%), var(--o-panel2));
}
body[data-theme="deep"] .heat-cell.dn,
body:not([data-theme]) .heat-cell.dn {
  background: color-mix(in srgb, var(--down) var(--hc-a, 0%), var(--o-panel2));
}
body[data-theme="light"] .heat-cell {
  background: color-mix(in srgb, var(--up) var(--hc-a, 0%), var(--o-panel2));
}
body[data-theme="light"] .heat-cell.dn {
  background: color-mix(in srgb, var(--down) var(--hc-a, 0%), var(--o-panel2));
}
body[data-theme="deep"] .heat-cell .hc, body[data-theme="deep"] .heat-cell .hp,
body:not([data-theme]) .heat-cell .hc, body:not([data-theme]) .heat-cell .hp { color: #F5F7F9; }
body[data-theme="deep"] .heat-cell .hs,
body:not([data-theme]) .heat-cell .hs { color: rgba(245, 247, 249, .62); }
body[data-theme="light"] .heat-cell .hc, body[data-theme="light"] .heat-cell .hp { color: #14181D; }
body[data-theme="light"] .heat-cell .hs { color: rgba(20, 24, 29, .58); }
.heat-cell:hover { border-color: var(--o-line3); }

/* ==================================================================================
   五、登录页 / 引导页：品牌渐变走令牌，不引入新色
   ================================================================================== */
body[data-theme="deep"] .gate, body:not([data-theme]) .gate,
body[data-theme="deep"] #boot, body:not([data-theme]) #boot {
  background: radial-gradient(1200px 700px at 50% 8%,
    color-mix(in srgb, var(--o-green) 8%, var(--o-void)) 0%,
    var(--o-bg) 60%, var(--o-void) 100%);
}
body[data-theme="light"] .gate, body[data-theme="light"] #boot {
  background: radial-gradient(1200px 700px at 50% 8%,
    color-mix(in srgb, var(--o-green) 7%, var(--o-void)) 0%,
    var(--o-bg) 60%, var(--o-void) 100%);
}
.gate-card {
  background: var(--o-float);
  border: 1px solid var(--o-line2);
  box-shadow: var(--shadow-pop);
}
.gate-name { color: var(--o-white); letter-spacing: 6px; }

.firstrun-hero {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--o-green) 7%, var(--o-panel)),
    var(--o-panel) 62%);
  border: 1px solid var(--o-line2);
  border-radius: 8px;
}
.firstrun-card { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 6px; }
.firstrun-card:hover { border-color: var(--o-line3); }
.firstrun-card .n { background: var(--o-green-d); color: var(--o-green); }
.firstrun-card .t { color: var(--o-white); }
.firstrun-card .d { color: var(--o-white2); }
.firstrun-card .k {
  background: var(--o-panel2);
  border: 1px solid var(--o-line2);
  color: var(--o-white2);
}

/* ==================================================================================
   六、最终覆盖：确保"颜色只给数据"（压掉历史遗留的彩色硬编码）
   ================================================================================== */
.sub-head, .card-sub, .tab-group, .side-title,
.statusbar, .statusbar .clock,
.peek-title, .embed-title {
  color: var(--o-white3);
}
.card-title, .modal-title, .about-sec { color: var(--o-white); }
.tile .v, .stats-ribbon .v { color: var(--o-white); }
.heat-cell .hp.up { color: var(--up); }
.heat-cell .hp.down { color: var(--down); }

.mono, .tile .v, table.tbl, .kvlist, .ladder-row, .statusbar, .stats-ribbon, .mid-price {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
b, strong { font-weight: 600; color: var(--o-white); }

/* ==================================================================================
   托管模式：拟态数据视觉区分
   ---------------------------------------------------------------------------------
   服务端能取到真实行情的标的有限，其余仍是本地拟态引擎合成。
   交易场景里把合成价格当真实行情用是严重误导，所以拟态数据必须可区分。

   做法：拟态格加斜纹 + 降饱和度 + 角标「拟」—— 不隐藏（客户仍能看到完整市场），
   但一眼能看出"这不是真实数据"。真实数据保持原样，不加任何额外装饰。
   ================================================================================== */
.heat-cell.synth {
  position: relative;
  opacity: .72;
}
.heat-cell.synth::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 3px;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(128, 128, 128, .10) 4px,
    rgba(128, 128, 128, .10) 5px
  );
}
.heat-cell.synth .hc::after {
  content: " 拟";
  font-size: 8.5px;
  opacity: .55;
  vertical-align: super;
}