/*
 * BitDa shared design tokens.
 *
 * Product CSS must use these semantic names for new or migrated interface
 * work.  Legacy recovered XM reference rules deliberately remain untouched
 * until their replacement has passed visual regression; this file is the
 * destination for that gradual migration, not another visual-override layer.
 */
:root {
  color-scheme: dark;
  --ui-font-sans: Inter, BinancePlex, Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ui-color-canvas: #0c0819;
  --ui-color-canvas-deep: #070b14;
  --ui-color-surface: #101722;
  --ui-color-surface-raised: #151f2e;
  --ui-color-field: #0b111c;
  --ui-color-border: #263348;
  --ui-color-border-strong: #31516a;
  --ui-color-text: #eef4ff;
  --ui-color-text-secondary: #b8c4d8;
  --ui-color-text-muted: #8997ad;

  --ui-color-accent: #6eecfc;
  --ui-color-accent-strong: #24d3c4;
  --ui-color-accent-contrast: #04110f;
  --ui-color-positive: #43d17d;
  --ui-color-negative: #ff6577;
  --ui-color-warning: #f4b740;

  --ui-radius-control: 8px;
  --ui-radius-panel: 12px;
  --ui-control-height: 44px;
  --ui-touch-target: 48px;
  --ui-focus-ring: 0 0 0 2px rgb(110 236 252 / 18%);
  --ui-shadow-dialog: 0 20px 60px rgb(0 0 0 / 55%);
}

/* ============================================================
   品牌主色收口
   ------------------------------------------------------------
   此前全站有 8 个各自为政的 accent：
     --terminal-accent      #63ddea   交易页
     --ui-color-accent      #6eecfc   通用组件
     --security-accent      #18c995   账户安全（绿）
     --ieo-accent           #35d39d   IEO（绿）
     --content-accent       #63ddea / #19c99a   内容（自己就两个值）
     --s-accent             #63ddea / #00f0ff   首页（自己也两个值）
     --platform-accent      #f0b429   上币（橙）
   于是首页是青、交易页是另一个青、安全和 IEO 是绿、上币是橙 —— 同一个产品
   看起来像四个产品拼的。

   这里定一个唯一真源 --brand-accent = #00F0FF，各模块 token 全部指向它。
   以后换主色只改这一行。

   注意：这只统一"品牌强调色"。绿色的成功态、红色的危险态属于**语义色**，
   不能被品牌色覆盖（否则用户分不清"这是主色"还是"这是成功了"），不动。
   ============================================================ */
:root{
  --brand-accent:#00F0FF;
  --brand-accent-strong:#00c3d1;   /* 按下 / 悬停的加深态 */
  --brand-accent-contrast:#04121c; /* 主色底上的文字 */
}
:root,
.terminal-surface,
.desktop-delivery,
.mobile-contract-portal,
.loan-portal.terminal-surface{
  --admin-accent:var(--brand-accent);--terminal-accent:var(--brand-accent);
  --terminal-accent-strong:var(--brand-accent-strong);
  --ui-color-accent:var(--brand-accent);
  --ui-color-accent-strong:var(--brand-accent-strong);
  --ui-color-accent-contrast:var(--brand-accent-contrast);
  --security-accent:var(--brand-accent);
  --ieo-accent:var(--brand-accent);
  --content-accent:var(--brand-accent);
  --s-accent:var(--brand-accent);
  --platform-accent:var(--brand-accent);
}

/* ------------------------------------------------------------
   涨跌色与品牌色分离
   "涨"此前画成青色 —— 和品牌主色同色，用户分不清「这是上涨」还是
   「这是可点的主色元素」。改成绿涨红跌（交易所通行做法），青色专供品牌。
   语义 token 早就有（--ui-color-positive/negative），只是没人用；这里把
   实际渲染涨跌的那些选择器接到它们上面。
   ------------------------------------------------------------ */
:root{
  --market-up:var(--ui-color-positive,#43d17d);
  --market-down:var(--ui-color-negative,#ff6577);
}
/* 首页行情跑马灯 */
.home-ticker .home-market-card.positive span,
.home-ticker .home-market-card.positive small,
.home-ticker .home-market-card.positive .home-market-price,
.home-market-card.positive .home-market-price{color:var(--market-up)!important}
.home-ticker .home-market-card.negative span,
.home-ticker .home-market-card.negative small,
.home-ticker .home-market-card.negative .home-market-price,
.home-market-card.negative .home-market-price{color:var(--market-down)!important}
/* 行情列表 / 盘口的涨跌 */
.up span:nth-child(2),.market-up,[data-trend="up"]{color:var(--market-up)}
.down span:nth-child(2),.market-down,[data-trend="down"]{color:var(--market-down)}

/* ── K线工具栏（对齐正规交易所形态）────────────────────────────
   周期胶囊在上、指标条在下，主图指标与副图指标用竖线分隔。
   颜色全部走品牌 token，不写死。 */
.kline-pro{display:flex;flex-direction:column;min-height:0}
.kline-pro .kline-canvas{flex:1 1 auto;min-height:0}
.kline-period-bar,.kline-indicator-bar{display:flex;align-items:center;gap:4px;flex:0 0 auto;
  overflow-x:auto;scrollbar-width:none}
.kline-period-bar::-webkit-scrollbar,.kline-indicator-bar::-webkit-scrollbar{display:none}
.kline-period-bar{padding:6px 4px 8px}
.kline-period-bar button{flex:0 0 auto;height:26px;padding:0 12px;border:0;border-radius:13px;
  background:transparent;color:var(--terminal-text-muted,#8aa0b8);font-size:12px;cursor:pointer;
  transition:background .12s ease,color .12s ease}
.kline-period-bar button:hover{color:var(--brand-accent,#00F0FF)}
.kline-period-bar button.active{background:var(--brand-accent,#00F0FF);color:var(--brand-accent-contrast,#04121c);font-weight:600}
.kline-indicator-bar{padding:6px 4px;border-top:1px solid var(--terminal-border,#22364c)}
.kline-indicator-bar button{flex:0 0 auto;height:24px;padding:0 8px;border:0;background:transparent;
  color:var(--terminal-text-muted,#8aa0b8);font-size:11px;letter-spacing:.02em;cursor:pointer;
  transition:color .12s ease}
.kline-indicator-bar button:hover{color:var(--brand-accent,#00F0FF)}
.kline-indicator-bar button.active{color:var(--brand-accent,#00F0FF);font-weight:700}
.kline-bar-split{flex:0 0 auto;width:1px;height:12px;margin:0 6px;background:var(--terminal-border,#22364c)}
@media (max-width:820px){
  .kline-period-bar{padding:4px 2px 6px}
  .kline-period-bar button{height:24px;padding:0 10px;font-size:11px}
  .kline-indicator-bar button{padding:0 7px;font-size:10px}
}

/* K线是交易页的主体，不是配角。
   原来手机端容器只有 170–260px，减去周期条与指标条后画布不足 150px，
   副图再分掉一半 —— 主图只剩 90px，蜡烛细得看不清。参考正规交易所（Bitget）
   的比例：图表约占屏幕 60%，成交量只是底部一条窄带。
   这里按视口高度给，小屏也保证主图有足够高度。 */
[data-mobile-contract-chart].kline-pro,
[data-mobile-contract-chart]{height:min(58vh,470px)!important;min-height:380px}
.mobile-spot-chart.kline-pro,#mspot-kline.kline-pro,
.mobile-spot-chart .kline-pro,#mspot-kline{height:min(52vh,420px);min-height:340px}
.delivery-chart.kline-pro{height:min(52vh,420px)!important;min-height:340px}

/* 倒计时走完后置灰：保留该单的档位秒数（如「60秒」），而不是显示无意义的 0，
   灰色表示这一档已经走完、正在等结算。 */
[data-countdown][data-countdown-done="true"]{color:var(--terminal-text-muted,#8aa0b8);opacity:.65}

/* 盘口行（按行原地更新用的统一结构）。
   深度条走绝对定位垫在文字底下，改宽度不会引起重排；
   占位空行只用来撑住高度，不显示内容也不可点。 */
.book-line{position:relative;display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:0 8px;border:0;background:transparent;color:inherit;font:inherit;
  line-height:22px;min-height:22px;cursor:pointer;text-align:left}
.book-line>span{position:relative;z-index:1;font-variant-numeric:tabular-nums}
.book-line>span:first-of-type{flex:0 0 auto}
.book-line>span:last-of-type{flex:0 0 auto;color:var(--terminal-text-muted,#8aa0b8)}
.book-line .book-depth{position:absolute;inset:1px auto 1px 0;z-index:0;width:0;
  border-radius:2px;transition:width .18s ease;pointer-events:none}
.book-line.ask>span:first-of-type{color:var(--market-down,#ff6577)}
.book-line.bid>span:first-of-type{color:var(--market-up,#43d17d)}
.book-line.ask .book-depth{background:color-mix(in srgb,var(--market-down,#ff6577) 16%,transparent)}
.book-line.bid .book-depth{background:color-mix(in srgb,var(--market-up,#43d17d) 16%,transparent)}
.book-line.is-placeholder{cursor:default;pointer-events:none}

/* 永续「U本位」标识：保证金、盈亏、手续费本来就全走 USDT 结算，
   之前界面上没有一处写出来，看不出计价币是什么。 */
.contract-margin-kind{display:inline-flex;align-items:center;height:20px;margin-left:8px;padding:0 8px;
  border:1px solid var(--brand-accent,#00F0FF);border-radius:10px;
  color:var(--brand-accent,#00F0FF);font-size:11px;font-style:normal;letter-spacing:.02em;white-space:nowrap}

/* K线周期条：左侧周期胶囊可横向滚，右侧固定两个工具按钮（分时切换 / 全屏）。 */
.kline-period-bar{justify-content:space-between}
.kline-period-list{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.kline-period-list::-webkit-scrollbar{display:none}
.kline-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding-left:6px}
.kline-tools button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;
  padding:0;border:0;border-radius:6px;background:transparent;color:var(--terminal-text-muted,#8aa0b8);cursor:pointer}
.kline-tools button:hover{color:var(--brand-accent,#00F0FF);background:rgba(255,255,255,.04)}

/* 全屏：用定位铺满视口。不用 Fullscreen API —— iOS 内嵌页里不可靠，
   退出手势会被系统接管，用户容易退不出来。 */
.kline-pro.kline-fullscreen{position:fixed;inset:0;z-index:1200;height:100dvh!important;max-height:none!important;
  margin:0;padding:0 8px env(safe-area-inset-bottom);background:var(--terminal-surface-bg,#071016)}
.kline-pro.kline-fullscreen .kline-canvas{flex:1 1 auto}
body.kline-fullscreen-open{overflow:hidden}

/* 手机端图表上方的占位：交易对卡片和三个统计块原来吃掉约 200px，
   K线只能挤在下面。压缩它们，把高度让给图表本身。 */
@media (max-width:820px){
  .mobile-contract-market>select,.mobile-contract-market [data-mobile-contract-symbol]{height:34px;margin-bottom:4px}
  .mobile-contract-market{padding-top:6px;padding-bottom:4px;gap:4px}
  .mobile-contract-market .contract-stat,.mobile-contract-market dl{margin:0;padding:2px 0}
  .mobile-contract-market dl dt{font-size:10px;line-height:1.2}
  .mobile-contract-market dl dd{font-size:12px;line-height:1.25;margin:0}
}

/* 交割/合约页头：交易对选择框原来 285px 宽（占屏 73%），把价格挤到边上，
   自己却只显示一个 8 字符的交易对名 —— 空得发虚，也不好看。
   收成内容宽度、文字居中，让实时价格占据视觉中心。
   永续那一版没有 <header>，选择框、价格都是 .mobile-contract-market 的直接子元素，
   所以后代选择器点名 header 会整条落空 —— 两种结构都要覆盖。 */
.delivery-market>header{
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.delivery-market>header .terminal-select,
.mobile-contract-market>.terminal-select{
  flex:0 0 auto;justify-self:center;width:auto;min-width:126px;max-width:46%;height:36px;
  /* 基础样式是 grid: 1fr 18px，文字被箭头挤得偏左。这里改成居中的 flex，
     箭头绝对定位贴右边，交易对名就正正落在框的中心。 */
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:0 20px;text-align:center}
.delivery-market>header .terminal-select>span,
.mobile-contract-market>.terminal-select>span{
  flex:0 1 auto;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.delivery-market>header .terminal-select>i,
.mobile-contract-market>.terminal-select>i{
  position:absolute;inset-inline-end:8px;top:50%;
  transform:translateY(calc(-50% - 2px)) rotate(45deg)}
.delivery-market>header [data-delivery-price],
.mobile-contract-market>[data-mobile-contract-last]{
  flex:1 1 auto;text-align:center;font-size:22px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
@media (max-width:820px){
  .delivery-market>header .terminal-select,
  .mobile-contract-market>.terminal-select{min-width:118px;max-width:44%;height:34px;font-size:13px}
  .delivery-market>header [data-delivery-price],
  .mobile-contract-market>[data-mobile-contract-last]{font-size:20px}
}

/* 上面那组规则被各端 styles.css 里的
   `.mobile-contract-portal .delivery-market header{display:grid}` 和
   `... .delivery-market strong{font-size:16px}` 压过去了（同权重、后加载），
   所以交割头还是网格布局、价格还是贴右边的小字。这里把权重提上去。
   永续区同理：`.mobile-contract-market{grid-template-columns:1fr auto}`
   把价格挤到右列，改成三列让它落在正中。 */
:is(.mobile-contract-portal,.desktop-delivery,.mobile-spot-trade) .delivery-market.terminal-surface>header{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
/* 三列而不是 flex：左右两列各占 1fr，中间列宽度随内容，价格因此正好落在整行的中线上。
   flex 做不到这一点 —— 左边的选择框 118px、右边的涨跌幅 32px，宽度不等，
   中间那块被推着走，价格会偏出去 40 多像素。 */
:is(.mobile-contract-portal,.desktop-delivery,.mobile-spot-trade) .delivery-market.terminal-surface>header>.terminal-native-select,
:is(.mobile-contract-portal,.desktop-delivery,.mobile-spot-trade) .delivery-market.terminal-surface>header>.terminal-select{
  grid-area:1/1/2/2;justify-self:start}
:is(.mobile-contract-portal,.desktop-delivery,.mobile-spot-trade) .delivery-market.terminal-surface>header>[data-delivery-price]{
  grid-area:1/2/2/3;justify-self:center;min-width:0;text-align:center;
  font-size:20px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
:is(.mobile-contract-portal,.desktop-delivery,.mobile-spot-trade) .delivery-market.terminal-surface>header>.delivery-meta{
  grid-area:1/3/2/4;justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}
/* 桌面屏宽，价格本来就是 24px，别被上面的手机尺寸压小。 */
.desktop-delivery .delivery-market.terminal-surface>header>[data-delivery-price]{font-size:24px}

.mobile-contract-market.terminal-surface{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.mobile-contract-market.terminal-surface>.terminal-native-select{grid-area:1/1/2/2}
.mobile-contract-market.terminal-surface>.terminal-select{grid-area:1/1/2/2;justify-self:start}
.mobile-contract-market.terminal-surface>[data-mobile-contract-last]{grid-area:1/2/2/3;justify-self:center}
.mobile-contract-market.terminal-surface>[data-mobile-contract-socket]{grid-area:1/3/2/4;justify-self:end}
.mobile-contract-market.terminal-surface>[data-mobile-contract-chart]{grid-column:1/-1}