/* ============================================================
   GOLDEX · UI System v4
   ------------------------------------------------------------
   设计语言：冷色科技 / 克制辉光 / 清晰信息层级
   · 夜晚 = 深空近黑 + 蓝紫霓虹强调（默认，data-theme="dark"）
   · 白天 = 清爽白 + 薄荷绿强调（data-theme="light"）
   · 颜色全部走 CSS 变量，双主题通过变量覆盖完成
   兼容：index（交易端）与 admin（后台）共用本皮肤。
   类名沿用历史版本，JS 零改动。
   ============================================================ */

/* ================= 主题令牌：夜晚（默认） ================= */
:root, html[data-theme="dark"] {
  /* 画布 */
  --bg0: #07090f;
  --bg1: #0b0e16;
  --bg2: #0f1320;
  --grid-line: rgba(148, 163, 255, 0.045);

  /* 面板 / 表面 */
  --panel: rgba(18, 22, 34, 0.86);
  --panel-solid: #10141f;
  --panel-hi: rgba(255, 255, 255, 0.055);
  --panel2: rgba(255, 255, 255, 0.032);
  --panel3: rgba(255, 255, 255, 0.016);

  /* 边框 */
  --line: rgba(161, 176, 224, 0.10);
  --line2: rgba(255, 255, 255, 0.075);
  --line3: rgba(255, 255, 255, 0.17);

  /* 通用强调（导航/激活/按钮主调） */
  --acc: #4fb3ff;
  --acc-hi: #8ad2ff;
  --acc-deep: #2b7fd6;
  --acc-soft: rgba(79, 179, 255, 0.12);
  --acc-glow: rgba(79, 179, 255, 0.35);

  /* 板块语义色 */
  --metal: #e2b35c;          /* 贵金属 */
  --metal2: #f6d893;
  --oil: #f2a33c;            /* 原油现货 */
  --coin: #63a6ff;           /* 数字货币 */
  --fut: #9d7bff;            /* 永续合约 */
  --fut2: #57e0ff;

  /* 文本 */
  --txt: #eef1f8;
  --txt2: #9aa6bd;
  --txt3: #66708a;

  /* 行情涨跌 */
  --up: #15d18b;
  --down: #f2606f;
  --up-bg: rgba(21, 209, 139, 0.10);
  --down-bg: rgba(242, 96, 111, 0.10);
  --up-brd: rgba(21, 209, 139, 0.34);
  --down-brd: rgba(242, 96, 111, 0.34);

  /* 形状 / 字体 */
  --radius: 18px;
  --radius-s: 12px;
  --nav-h: 64px;
  --num: "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", "JetBrains Mono", monospace;
  --font: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;

  /* 阴影 */
  --sh-card: 0 18px 46px -22px rgba(0, 0, 0, 0.6);
  --sh-pop: 0 16px 44px -18px rgba(0, 0, 0, 0.65);
}

/* ================= 主题令牌：白天（绿·白） ================= */
html[data-theme="light"] {
  --bg0: #f2f6f1;
  --bg1: #eaf0ea;
  --bg2: #dfe8e0;
  --grid-line: rgba(0, 160, 100, 0.05);

  --panel: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  --panel-hi: rgba(255, 255, 255, 0.9);
  --panel2: rgba(0, 128, 80, 0.045);
  --panel3: rgba(0, 128, 80, 0.025);

  --line: rgba(30, 70, 55, 0.12);
  --line2: rgba(20, 90, 65, 0.13);
  --line3: rgba(20, 90, 65, 0.26);

  --acc: #00b26f;
  --acc-hi: #34c98d;
  --acc-deep: #04885a;
  --acc-soft: rgba(0, 178, 111, 0.11);
  --acc-glow: rgba(0, 178, 111, 0.28);

  --metal: #b07d1d;
  --metal2: #8a5f10;
  --coin: #2568e0;
  --fut: #6d4ee0;
  --fut2: #0c9ac7;

  --txt: #16251d;
  --txt2: #52705f;
  --txt3: #89a093;

  --up: #04a86a;
  --down: #e0414f;
  --up-bg: rgba(4, 168, 106, 0.10);
  --down-bg: rgba(224, 65, 79, 0.10);
  --up-brd: rgba(4, 168, 106, 0.36);
  --down-brd: rgba(224, 65, 79, 0.36);

  --sh-card: 0 14px 38px -24px rgba(20, 70, 50, 0.28);
  --sh-pop: 0 14px 34px -16px rgba(20, 70, 50, 0.26);
}

/* ================= 基础 ================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-color: var(--line3) transparent; }
body {
  font-family: var(--font);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 500px at 88% -12%, rgba(90, 120, 255, 0.10), transparent 60%),
    radial-gradient(760px 460px at -6% 2%, rgba(120, 80, 255, 0.06), transparent 58%),
    var(--bg0);
  background-attachment: fixed;
  transition: background .3s ease, color .3s ease;
}
html[data-theme="light"] body {
  background:
    radial-gradient(900px 500px at 88% -12%, rgba(0, 170, 110, 0.10), transparent 60%),
    radial-gradient(760px 460px at -6% 2%, rgba(0, 150, 95, 0.05), transparent 58%),
    var(--bg0);
}
/* 后台：与交易端同一张「深蓝金流」夜景纹理，保持暗色高级感 */
body[data-page="admin"] {
  background:
    radial-gradient(900px 500px at 88% -12%, rgba(90, 120, 255, 0.10), transparent 60%),
    radial-gradient(760px 460px at -6% 2%, rgba(120, 80, 255, 0.06), transparent 58%),
    linear-gradient(180deg, rgba(6, 8, 14, 0.66) 0%, rgba(6, 8, 14, 0.84) 55%, rgba(6, 8, 14, 0.94) 100%),
    url('/img/bg-trade-dark.png') center top / cover no-repeat,
    var(--bg0);
}
html[data-theme="light"] body[data-page="admin"] {
  background:
    radial-gradient(900px 500px at 88% -12%, rgba(0, 170, 110, 0.08), transparent 60%),
    radial-gradient(760px 460px at -6% 2%, rgba(0, 150, 95, 0.04), transparent 58%),
    var(--bg0);
}
a { color: var(--acc); text-decoration: none; }
button { font-family: inherit; }
input, select { font-family: inherit; }
::selection { background: var(--acc-soft); color: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--acc-soft); }
::-webkit-scrollbar-track { background: transparent; }

/* 极简氛围网格（仅顶部隐约可见） */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(1200px 560px at 50% -18%, rgba(0, 0, 0, 0.5), transparent 74%);
          mask-image: radial-gradient(1200px 560px at 50% -18%, rgba(0, 0, 0, 0.5), transparent 74%);
}
.topbar, .trade, .site-ft, .wrap, .grid-admin { position: relative; z-index: 1; }
#toasts, .cover { z-index: 300; }

/* ================= 顶栏 ================= */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--bg1) 78%, transparent);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acc-soft), transparent);
  opacity: .35;
}

/* 品牌 */
.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo-badge {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; flex: none;
  font-style: normal; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--fut));
  box-shadow: 0 6px 18px -8px var(--acc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-size: 18px; line-height: 1;
}
html[data-theme="light"] .logo-badge { background: linear-gradient(135deg, var(--acc-hi), var(--acc-deep)); box-shadow: 0 6px 16px -8px var(--acc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.logo b {
  display: block; font-size: 18px; font-weight: 800; letter-spacing: 2.6px; line-height: 1.05;
  color: var(--txt); white-space: nowrap;
}
.logo small { display: block; color: var(--txt3); font-size: 9px; letter-spacing: 3px; margin-top: 3px; white-space: nowrap; }
.logo-tx { min-width: 0; }

/* 板块导航（简洁胶囊） */
.mnav-shell {
  display: flex; align-items: center; gap: 4px;
  padding: 3px; margin-left: 4px;
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.nav-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; background: transparent;
  color: var(--txt2); font-size: 13px; font-weight: 600;
  padding: 7px 15px; border-radius: 10px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
.nav-tab:hover { color: var(--txt); background: var(--panel-hi); }
.nav-tab .gi {
  font-style: normal; width: 17px; height: 17px; border-radius: 6px;
  display: grid; place-items: center; font-weight: 800; font-size: 10px; flex: none;
  background: var(--panel3); border: 1px solid var(--line2);
  transition: .15s;
}
.nav-tab[data-g="metal"] .gi { color: var(--metal); border-color: color-mix(in srgb, var(--metal) 40%, transparent); }
.nav-tab[data-g="oil"]   .gi { color: var(--oil); border-color: color-mix(in srgb, var(--oil) 40%, transparent); }
.nav-tab[data-g="coin"]  .gi { color: var(--coin); border-color: color-mix(in srgb, var(--coin) 40%, transparent); }
.nav-tab[data-g="fut"]   .gi { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 40%, transparent); }
.nav-tab .cnt {
  font-style: normal; font-size: 9.5px; font-weight: 800;
  border-radius: 999px; padding: 1.5px 7px; letter-spacing: .4px;
  background: var(--panel3); color: var(--txt3); transition: .15s;
}
.nav-tab[data-g="metal"] .cnt { color: var(--metal); background: var(--panel3); }
.nav-tab[data-g="oil"]   .cnt { color: var(--oil); }
.nav-tab[data-g="coin"]  .cnt { color: var(--coin); }
.nav-tab[data-g="fut"]   .cnt { color: var(--fut); }
.nav-tab.active { color: var(--txt); transform: translateY(0); }
.nav-tab.active[data-g="metal"] { background: color-mix(in srgb, var(--metal) 15%, transparent); border-color: color-mix(in srgb, var(--metal) 28%, transparent); }
.nav-tab.active[data-g="oil"]   { background: color-mix(in srgb, var(--oil) 15%, transparent); border-color: color-mix(in srgb, var(--oil) 28%, transparent); }
.nav-tab.active[data-g="coin"]  { background: color-mix(in srgb, var(--coin) 16%, transparent); border-color: color-mix(in srgb, var(--coin) 30%, transparent); }
.nav-tab.active[data-g="fut"]   { background: color-mix(in srgb, var(--fut) 16%, transparent); border-color: color-mix(in srgb, var(--fut) 30%, transparent); }
.nav-tab.active .gi { box-shadow: 0 0 0 1px currentColor inset; }
@media (max-width: 800px) { .mnav-shell { order: 5; width: 100%; margin: 0; overflow-x: auto; } }

/* 公告 / 状态 / 时钟 */
.announce {
  display: flex; align-items: center; gap: 7px; max-width: 260px; min-width: 0;
  color: var(--acc-hi); font-size: 12px;
  background: var(--acc-soft); border: 1px solid var(--acc-soft);
  border-radius: 10px; padding: 5px 11px; white-space: nowrap;
}
.announce i { font-style: normal; flex: none; }
#annText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  border: 1px solid var(--line2); background: var(--panel2);
  border-radius: 999px; padding: 4px 11px; color: var(--txt2); font-size: 11px;
}
.demo-pill em { font-style: normal; } .demo-pill b { font-weight: 800; letter-spacing: 1px; color: var(--acc); }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 9px var(--up-brd); flex: none; }
.demo-pill.off .pdot { background: var(--down); box-shadow: 0 0 9px var(--down-brd); }
.clock { text-align: right; flex: none; }
.clock .tm { font-variant-numeric: tabular-nums; font-family: var(--num); font-size: 14px; letter-spacing: 1px; font-weight: 600; }
.clock .dt { font-size: 10px; color: var(--txt3); letter-spacing: .7px; }
.grow { flex: 1; }
.topbar .grow { flex: 1; }

/* 主题切换按钮 */
.theme-btn {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line2); background: var(--panel2);
  color: var(--txt2); transition: .16s;
}
.theme-btn:hover { color: var(--acc); border-color: var(--acc-soft); background: var(--acc-soft); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .ic-sun { display: none; }
.theme-btn.light .ic-sun { display: block; }
.theme-btn.light .ic-moon { display: none; }

/* 语言切换按钮（8 语，与主题切换并排） */
.langbox { position: relative; flex: none; }
.lang-btn {
  height: 36px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 11px; cursor: pointer; color: var(--txt2);
  border: 1px solid var(--line2); background: var(--panel2);
  font-family: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: color .16s, border-color .16s, background .16s;
}
.lang-btn:hover { color: var(--acc); border-color: var(--acc-soft); background: var(--acc-soft); }
.lang-btn .lg-ic { width: 15px; height: 15px; flex: none; opacity: .92; }
.lang-btn .lg-arr { width: 10px; height: 10px; flex: none; opacity: .55; transition: transform .16s; }
.lang-btn[aria-expanded="true"] .lg-arr { transform: rotate(180deg); opacity: .92; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; min-width: 176px;
  padding: 6px; border-radius: 14px; box-sizing: border-box;
  background: var(--bg2); border: 1px solid var(--line3);
  box-shadow: var(--sh-pop); display: grid; gap: 2px;
}
.lang-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px;
  border: none; background: transparent; border-radius: 9px; cursor: pointer;
  color: var(--txt2); font-size: 12.5px; font-weight: 650;
  font-family: inherit; text-align: left; white-space: nowrap;
}
.lang-menu button:hover { background: var(--panel-hi); color: var(--txt); }
.lang-menu button.on { color: var(--acc); background: var(--acc-soft); }
.lang-menu button.on::after { content: "\2713"; margin-left: auto; color: var(--acc); font-weight: 800; }

/* ================= 交易页三栏 ================= */
.trade {
  max-width: 1720px; margin: 0 auto;
  padding: 18px 20px 26px;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr) 352px;
  gap: 14px; align-items: start;
}
@media (max-width: 1440px) { .trade { grid-template-columns: 264px minmax(0, 1fr) 336px; } }
@media (max-width: 1240px) { .trade { grid-template-columns: 1fr; } }

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel2), transparent 26%), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-width: 0;
}
.panel::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--panel-hi), transparent);
  pointer-events: none;
}
@media (max-width: 1240px) { .panel.mkts { display: block; } }

/* ---- 左栏：行情列表 ---- */
.mkts { position: sticky; top: calc(var(--nav-h) + 14px); max-height: calc(100vh - var(--nav-h) - 32px); }
.mkt-hd { padding: 15px 15px 11px; border-bottom: 1px solid var(--line); flex: none; }
.ph { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.ph b { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ph .gi {
  font-style: normal; display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 6px; font-size: 10px; font-weight: 800; flex: none;
  background: var(--panel3); border: 1px solid var(--line2);
}
.ph[data-g="metal"] .gi, .ph:not([data-g="coin"]):not([data-g="fut"]) .gi { color: var(--metal); border-color: color-mix(in srgb, var(--metal) 38%, transparent); }
.ph[data-g="coin"] .gi { color: var(--coin); border-color: color-mix(in srgb, var(--coin) 38%, transparent); }
.ph[data-g="fut"] .gi { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 38%, transparent); }
.ph em {
  font-style: normal; font-weight: 600; font-size: 10px; color: var(--txt3);
  background: var(--panel3); border-radius: 999px; padding: 2px 8px;
}
.mkt-search {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  background: var(--bg0); border: 1px solid var(--line2);
  border-radius: 10px; padding: 7px 11px; color: var(--txt3);
  transition: border-color .16s, box-shadow .16s;
}
.mkt-search svg { width: 13px; height: 13px; flex: none; }
.mkt-search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); color: var(--acc); }
.mkt-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--txt); font-size: 12px; min-width: 0; }
.mkt-search input::placeholder { color: var(--txt3); }

.mkt-list { overflow-y: auto; min-height: 0; padding: 7px 8px 12px; flex: 1; }
.trow {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 9px;
  padding: 9px 10px; margin: 1.5px 0; border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.trow:hover { background: var(--panel-hi); }
.trow.active { box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .35); }
.trow .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 12px; flex: none; overflow: hidden; background: var(--panel2);
  border: 1px solid var(--line2); }
.trow .nm { min-width: 0; }
.trow .nm b { display: block; font-size: 13.5px; letter-spacing: .2px; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 5px; }
.trow .nm b .fut-tag {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .6px;
  padding: 1px 5px; border-radius: 4px; color: var(--fut);
  background: var(--panel3); border: 1px solid color-mix(in srgb, var(--fut) 36%, transparent);
}
.trow .nm b .fut-tag.stop { color: var(--down); border-color: var(--down-brd); }
.trow .nm small { display: block; color: var(--txt3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .pr { text-align: right; font-variant-numeric: tabular-nums; }
.trow .pr b { display: block; font-size: 13px; font-weight: 650; font-family: var(--num); }
.trow .pr small { font-size: 10.5px; font-weight: 700; }
.trow.stop { opacity: .55; }
.up { color: var(--up); }
.down { color: var(--down); }

/* ---- 中栏：报价头 ---- */
.mid { padding-bottom: 6px; }
.quote-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 20px 22px 14px; flex-wrap: wrap; }
.qh-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; width: 100%; }
.cur-line { display: flex; align-items: center; gap: 9px; font-size: 13px; min-width: 0; }
.ctag { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 800; overflow: hidden;
  border: 1px solid var(--line2); background: var(--panel2); }
.cur-line b { font-size: 16px; letter-spacing: .2px; }
.vsym { color: var(--txt2); font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  background: var(--panel3); border: 1px solid var(--line2); border-radius: 8px; padding: 2px 8px; font-family: var(--num); }
.gline { width: 1px; height: 13px; background: var(--line3); }
.gname { color: var(--txt3); font-size: 11px; }
.qtag {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  border-radius: 999px; padding: 3.5px 11px; cursor: pointer; user-select: none; transition: .15s;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--txt2);
}
.qtag.spot { color: var(--acc); border-color: var(--acc-soft); background: var(--acc-soft); }
.qtag.fut { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 32%, transparent); background: color-mix(in srgb, var(--fut) 10%, transparent); }
.qtag:hover { filter: brightness(1.08); }

.price-line { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.big-price {
  font-size: 42px; font-weight: 750; line-height: 1; font-family: var(--num);
  font-variant-numeric: tabular-nums; letter-spacing: .3px; color: var(--txt);
}
.big-price .unit { font-size: 13px; color: var(--txt3); font-weight: 600; margin-left: 9px; }
.chg-pill { font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 10px;
  font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg-pill.up { color: var(--up); background: var(--up-bg); border: 1px solid var(--up-brd); }
.chg-pill.down { color: var(--down); background: var(--down-bg); border: 1px solid var(--down-brd); }

.mini-stats { display: flex; gap: 24px; padding-bottom: 2px; margin-left: auto; }
.mini-stats .ms b { display: block; font-size: 14.5px; font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.mini-stats .ms span { font-size: 10px; color: var(--txt3); display: block; text-align: right; letter-spacing: .6px; margin-bottom: 3px; }

/* 后台报价头兼容 */
.quote-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.price-block { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.sub-p { font-size: 12px; color: var(--txt3); margin-top: 5px; }

.chart-box { width: 100%; border-top: 1px solid var(--line); position: relative; }
#chart, #adminChart { display: block; width: 100%; }

/* ---- 现货持仓横条 ---- */
.band {
  display: grid; grid-template-columns: auto repeat(4, minmax(110px, 1fr));
  gap: 14px; align-items: center;
  margin: 0 18px; padding: 14px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-l { padding-right: 16px; border-right: 1px solid var(--line); }
.band-l span { font-size: 10px; color: var(--txt3); letter-spacing: 1.4px; display: block; font-weight: 700; }
.band-l b { font-size: 15px; margin-top: 3px; display: block; }
.bcell span { font-size: 10px; color: var(--txt3); display: block; letter-spacing: .4px; }
.bcell b { font-size: 15.5px; font-weight: 700; font-family: var(--num); font-variant-numeric: tabular-nums; display: block; margin-top: 3px; }
.bcell .mb { height: 4px; background: var(--panel-hi); border-radius: 4px; overflow: hidden; margin: 7px 0 2px; width: 100px; }
.bcell .mb i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc-deep), var(--acc-hi)); border-radius: 4px; transition: width .5s; }
.bpos b { color: var(--acc); }

/* ---- 合约资金小结 ---- */
.ft-sum { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 20px 2px; }
.ft-sum .fpill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--txt2);
  background: var(--panel3); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.ft-sum .fpill b { font-family: var(--num); }
.ft-sum .fpill.gl { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 34%, transparent); }

.ft-wrap { overflow: auto; margin: 0 18px 6px; }
.ft-cols { display: grid; grid-template-columns: minmax(126px, 1.4fr) repeat(6, minmax(78px, 1fr)) auto;
  gap: 8px; padding: 4px 10px 0; font-size: 9px; color: var(--txt3); letter-spacing: .8px; font-weight: 800; }
.ft-cols span:not(:first-child), .ft-cols b { text-align: right; }
.ft-cols span:first-child { text-align: left; }
.ft-row { display: grid; grid-template-columns: minmax(126px, 1.4fr) repeat(6, minmax(78px, 1fr)) auto;
  gap: 8px; align-items: center; padding: 8px 10px; font-size: 12px; border-radius: 12px; margin: 3px 0;
  border: 1px solid transparent; transition: background .15s; }
.ft-row:hover { background: var(--panel-hi); }
.ft-row.long { background: linear-gradient(90deg, var(--up-bg), transparent 60%); border-color: var(--up-brd); }
.ft-row.short { background: linear-gradient(90deg, var(--down-bg), transparent 60%); border-color: var(--down-brd); }
.ft-row.long:hover { background: linear-gradient(90deg, var(--up-bg), var(--panel-hi) 70%); }
.ft-row.short:hover { background: linear-gradient(90deg, var(--down-bg), var(--panel-hi) 70%); }
.ft-row .fname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ft-row .fname i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 10px; flex: none; overflow: hidden; background: var(--panel2); }
.ft-row .fname b { display: block; font-size: 13px; }
.ft-row .fname small { display: block; color: var(--txt3); font-size: 9.5px; font-weight: 600; }
.ft-row .fnum { font-family: var(--num); font-weight: 650; }
.ft-row .fcell span { display: block; font-size: 9px; color: var(--txt3); letter-spacing: .3px; margin-bottom: 1px; }
.ft-row .fcell b { font-family: var(--num); font-weight: 650; font-size: 12px; }
.ft-row .fcell .pnl { font-size: 12px; font-weight: 750; font-family: var(--num); }
.ft-liq-warn { color: var(--down) !important; animation: blink 1s infinite; }
.ft-close { border: 1px solid var(--line2); background: var(--panel2); color: var(--txt2);
  border-radius: 9px; padding: 6px 14px; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: .15s; white-space: nowrap; }
.ft-close:hover { border-color: var(--down-brd); color: var(--down); background: var(--down-bg); }
.ft-close.f-close-long:hover { border-color: var(--up-brd); color: var(--up); background: var(--up-bg); }

/* ---- 区块标题 / 分段 ---- */
.sec-head { display: flex; align-items: center; gap: 8px; padding: 15px 20px 9px; font-size: 13.5px; font-weight: 700; }
.sq { width: 3px; height: 14px; border-radius: 3px; background: var(--acc); box-shadow: 0 0 10px var(--acc-glow); }
.sub-dim { font-size: 11px; color: var(--txt3); font-weight: 600; }
.mini-seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line2); border-radius: 999px; padding: 2px; margin-left: 6px; }
.mini-seg button { border: none; background: transparent; color: var(--txt3); font-size: 10.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; cursor: pointer; transition: .13s; }
.mini-seg button:hover { color: var(--txt); }
.mini-seg button.on { color: #fff; background: var(--acc); box-shadow: 0 2px 10px -2px var(--acc-glow); }
html[data-theme="light"] .mini-seg button.on { color: #fff; }
.mini-seg button.on.spot { background: var(--acc); }
.mini-seg button.on.fut { background: var(--fut); }

/* 成交记录表 */
.tbl-wrap { overflow: auto; padding: 4px 8px 10px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--txt3); font-weight: 700; font-size: 10px; letter-spacing: 1px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--panel2); }
.side-buy, .side-long { color: var(--up); font-weight: 750; }
.side-sell, .side-short { color: var(--down); font-weight: 750; }
.side-mid { color: var(--fut); font-weight: 750; }
.tag-k { font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 1.5px 6px; letter-spacing: .4px; vertical-align: 1px; }
.tag-spot { color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-soft); }
.tag-fut { color: var(--fut); background: color-mix(in srgb, var(--fut) 10%, transparent); border: 1px solid color-mix(in srgb, var(--fut) 30%, transparent); }
.ta-right { text-align: right; }
.empty { text-align: center; color: var(--txt3); padding: 36px 0 !important; font-size: 12.5px; }
.hide { display: none !important; }

/* 契约表列宽固定，保证「进行中」与「已结束记录」上下列对齐 */
.tbl-contract { table-layout: fixed; min-width: 1080px; }
.tbl-contract col.cc-user  { width: 92px; }
.tbl-contract col.cc-sym   { width: 58px; }
.tbl-contract col.cc-dir   { width: 46px; }
.tbl-contract col.cc-amt  { width: 78px; }
.tbl-contract col.cc-rate { width: 64px; }
.tbl-contract col.cc-price { width: 86px; }
.tbl-contract col.cc-time  { width: 104px; }
.tbl-contract col.cc-res   { width: 88px; }
.tbl-contract col.cc-op    { width: 220px; }
.tbl-contract col.cc-settle { width: 86px; }
.tbl-contract col.cc-pnl    { width: 82px; }
.tbl-contract col.cc-bal    { width: 106px; }

/* 现货控制表列宽 */
.tbl-spot { table-layout: fixed; min-width: 980px; }
.tbl-spot col.sc-user  { width: 92px; }
.tbl-spot col.sc-sym   { width: 58px; }
.tbl-spot col.sc-dir   { width: 46px; }
.tbl-spot col.sc-qty   { width: 86px; }
.tbl-spot col.sc-avg   { width: 86px; }
.tbl-spot col.sc-price { width: 86px; }
.tbl-spot col.sc-mv    { width: 92px; }
.tbl-spot col.sc-float { width: 92px; }
.tbl-spot col.sc-force { width: 84px; }
.tbl-spot col.sc-op    { width: 220px; }
.tbl-spot col.sc-pnl   { width: 86px; }
.tbl-spot col.sc-res   { width: 80px; }
.tbl-spot col.sc-src   { width: 82px; }
.tbl-spot col.sc-time  { width: 130px; }

/* 在线状态指示点（后台用户表）：在线绿色闪烁 / 离线灰色 */
.ol-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #79808c; flex: none; }
.ol-dot.on { background: var(--up, #2ebd85); animation: olBlink 1.5s ease-out infinite; }
@keyframes olBlink {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up, #2ebd85) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--up, #2ebd85) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up, #2ebd85) 0%, transparent); }
}

/* ================= 右栏：下单 / 资产 ================= */
.side > div { padding: 16px 18px; }
.vline { height: 1px; background: linear-gradient(90deg, transparent, var(--line3), transparent); margin: 0 18px; flex: none; }
.sub-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sub-hd .ph { font-size: 15px; }
.mini-link { font-size: 11.5px; color: var(--txt3); cursor: pointer; transition: .15s; text-decoration: none; }
.mini-link:hover { color: var(--down); }

/* 下单页签 */
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--bg0); border: 1px solid var(--line2); border-radius: 13px; }
.mode-tabs button { border: none; background: transparent; color: var(--txt3); font-size: 13px; font-weight: 700;
  padding: 8px 0; border-radius: 9px; cursor: pointer; transition: .16s; letter-spacing: 1px; }
.mode-tabs button:hover { color: var(--txt); }
.mode-tabs button .dx { font-style: normal; font-size: 8.5px; letter-spacing: .4px; opacity: .7; font-weight: 600; }
.mode-tabs button.on.spot { color: #fff; background: var(--acc); box-shadow: 0 4px 16px -6px var(--acc-glow); }
.mode-tabs button.on.fut { color: #fff; background: linear-gradient(135deg, var(--fut), #6f5bff); box-shadow: 0 4px 16px -6px rgba(157, 123, 255, .4); }

/* 买卖 / 多空 分段 */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  background: var(--bg0); padding: 4px; border-radius: 13px; border: 1px solid var(--line2); }
.seg button { border: none; background: transparent; color: var(--txt3); font-size: 13.5px; font-weight: 750;
  padding: 8px 0; border-radius: 9px; cursor: pointer; transition: .16s; letter-spacing: 2px; }
.seg button:not(.on-buy):not(.on-sell):hover { color: var(--txt); }
.seg button.on-buy { color: #fff; background: linear-gradient(135deg, #21d894, #0aa872);
  box-shadow: 0 5px 18px -8px rgba(21, 209, 139, .55); }
.seg button.on-sell { color: #fff; background: linear-gradient(135deg, #ff7a89, #e64557);
  box-shadow: 0 5px 18px -8px rgba(242, 96, 111, .5); }
html[data-theme="light"] .seg button.on-buy { background: linear-gradient(135deg, #12c97e, #04a86a); box-shadow: 0 5px 16px -8px rgba(4,168,106,.4); }
html[data-theme="light"] .seg button.on-sell { background: linear-gradient(135deg, #ee5c69, #d83848); }

/* 杠杆 */
.lev-block { margin-top: 13px; }
.lev-top { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--txt3); margin-bottom: 8px; }
.lev-top b { font-size: 12px; color: var(--fut); font-weight: 800; font-family: var(--num); }
.lev-top b i { font-style: normal; color: var(--txt3); font-weight: 600; font-family: var(--font); }
.lev-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.lev-pill { flex: 1; min-width: 42px; border: 1px solid var(--line2); background: var(--panel2);
  color: var(--txt2); border-radius: 8px; padding: 5px 0; font-size: 11px; font-weight: 750; cursor: pointer; transition: .14s; }
.lev-pill:hover { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 40%, transparent); }
.lev-pill.on { color: #fff; background: var(--fut); border-color: var(--fut); }
.lev-range { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.lev-range input[type=range] { flex: 1; height: 4px; accent-color: var(--fut); cursor: pointer; }
.lev-range .lval { font-size: 13px; font-weight: 750; color: var(--fut); font-family: var(--num); min-width: 40px; text-align: right; }

/* 表单字段 */
.field { margin-top: 13px; }
.field label { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--txt3); margin-bottom: 6px; }
.field label b { color: var(--txt2); font-weight: 650; font-family: var(--num); font-variant-numeric: tabular-nums; }
.input-wrap { display: flex; align-items: center; background: var(--bg0);
  border: 1px solid var(--line2); border-radius: 11px; overflow: hidden; transition: border-color .16s, box-shadow .16s; }
.input-wrap:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.input-wrap input { flex: 1; background: transparent; border: none; outline: none; color: var(--txt);
  font-size: 18px; font-weight: 650; padding: 10px 13px; font-family: var(--num); font-variant-numeric: tabular-nums; min-width: 0; }
.input-wrap .suf { padding: 0 13px; color: var(--txt3); font-size: 11.5px; flex: none; font-weight: 650; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.quick button { border: 1px solid var(--line2); background: var(--panel2); color: var(--txt2);
  border-radius: 8px; padding: 6px 0; font-size: 11.5px; cursor: pointer; transition: .14s; font-weight: 700; }
.quick button:hover { color: var(--acc); border-color: var(--acc-soft); background: var(--acc-soft); }

/* 预估面板 */
.est-panel { margin-top: 13px; background: var(--bg0); border: 1px solid var(--line2);
  border-radius: 12px; padding: 10px 13px; display: grid; gap: 7px; }
.est-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--txt3); }
.est-row b { color: var(--txt); font-family: var(--num); font-weight: 650; font-size: 13px; }
.est-row .dng { color: var(--down); } .est-row .ok { color: var(--up); } .est-row .gl { color: var(--fut); }

/* 下单主按钮 */
.trade-btn { width: 100%; margin-top: 15px; border: none; border-radius: 12px; padding: 13px 0;
  font-size: 15px; font-weight: 750; letter-spacing: 2px; cursor: pointer; transition: filter .15s, transform .1s, box-shadow .15s; color: #fff; }
.trade-btn:hover { filter: brightness(1.06); }
.trade-btn:active { transform: scale(.99); }
.trade-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.trade-btn.buy, .trade-btn.long { background: linear-gradient(135deg, #21d894, #0aa872); box-shadow: 0 10px 26px -12px rgba(21, 209, 139, .6); }
.trade-btn.sell, .trade-btn.short { background: linear-gradient(135deg, #ff7a89, #e64557); box-shadow: 0 10px 26px -12px rgba(242, 96, 111, .55); }
html[data-theme="light"] .trade-btn.buy, html[data-theme="light"] .trade-btn.long { box-shadow: 0 8px 22px -12px rgba(4,168,106,.45); }
html[data-theme="light"] .trade-btn.sell, html[data-theme="light"] .trade-btn.short { box-shadow: 0 8px 22px -12px rgba(224,65,79,.4); }

/* 合约暂停提示 */
.fut-off { display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--down);
  background: var(--down-bg); border: 1px solid var(--down-brd); border-radius: 10px; padding: 7px 10px; }
.fut-off i { font-style: normal; }

/* 资产卡 */
.asset-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ah-k { font-size: 11px; color: var(--txt3); display: flex; align-items: baseline; gap: 6px; letter-spacing: .8px; }
.ah-k em { font-style: normal; font-size: 9px; color: var(--txt3); letter-spacing: 1.4px; }
.equity { font-size: 30px; font-weight: 750; font-family: var(--num); font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--txt); letter-spacing: .2px; }
.asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.ai { background: var(--panel3); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; }
.ai .k { font-size: 10px; color: var(--txt3); letter-spacing: .4px; }
.ai .v { font-size: 15px; font-weight: 750; margin-top: 3px; font-family: var(--num); font-variant-numeric: tabular-nums; }
.ai .v.up { color: var(--up); } .ai .v.down { color: var(--down); }
.ai .v.gl { color: var(--fut); }
.asset-ft { margin-top: 12px; display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--txt3); border-top: 1px dashed var(--line2); padding-top: 11px; }
.asset-ft .pdot { width: 6px; height: 6px; }

/* ================= 页脚 ================= */
.site-ft { text-align: center; color: var(--txt3); font-size: 11px; padding: 8px 20px 28px; line-height: 1.9; }
.site-ft a { color: var(--txt3); }
.site-ft a:hover { color: var(--acc); }

/* ================= 通用小件 ================= */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; white-space: nowrap; border: 1px solid var(--line2); background: var(--panel2); color: var(--txt2); }
.pill .ldot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up-brd); }
.pill.gold { color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc-deep)); border: none; font-weight: 800; box-shadow: 0 4px 14px -6px var(--acc-glow); }

.mkt-dot { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  font-style: normal; font-size: 9.5px; font-weight: 800; margin-right: 5px; vertical-align: middle; overflow: hidden; background: var(--panel2); }
.pos-cell { max-width: 360px; }
.pos-item { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0;
  background: var(--panel3); border: 1px solid var(--line2); border-radius: 8px;
  padding: 2.5px 8px; font-size: 11px; color: var(--txt2); font-family: var(--num); }
.pos-item i { font-style: normal; }
.pos-item.pos-fut { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 30%, transparent); }
.pos-item.long { color: var(--up); border-color: var(--up-brd); background: var(--up-bg); }
.pos-item.short { color: var(--down); border-color: var(--down-brd); background: var(--down-bg); }
.dim { color: var(--txt3); }

/* ============================================================
   后台（admin）
   ============================================================ */
.wrap { max-width: 1680px; margin: 0 auto; padding: 20px 24px 70px; }
.grid-admin { display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .grid-admin { grid-template-columns: 1fr; } }
.grid-admin section, .grid-admin aside { display: flex; flex-direction: column; gap: 16px; }

.card { background: linear-gradient(180deg, var(--panel2), transparent 24%), var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-card); position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--panel-hi), transparent); pointer-events: none; }
.card .card-body { padding: 16px 18px; position: relative; }
.card-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px;
  border-bottom: 1px solid var(--line); }
.card-hd .t { font-size: 13px; letter-spacing: .6px; font-weight: 750; color: var(--txt);
  display: flex; align-items: center; gap: 8px; }
.card-hd .t .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 10px var(--acc-glow); animation: pulse 1.6s infinite; }
.card-hd .t .dot.fut { background: var(--fut); box-shadow: 0 0 10px rgba(157, 123, 255, .5); }

/* 后台：叠放式操控面板（手风琴） */
.acc.card { transition: border-color .2s, box-shadow .2s; }
.acc.card.open { border-color: color-mix(in srgb, var(--acc) 26%, var(--line)); }
.acc-hd { width: 100%; font: inherit; text-align: left; cursor: pointer;
  border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: inherit; -webkit-appearance: none; appearance: none; }
.acc-hd::-moz-focus-inner { border: 0; }
.acc-hd:hover { background: linear-gradient(90deg, var(--panel-hi), transparent 70%); }
.acc-hd:focus-visible { outline: 1.5px solid var(--acc); outline-offset: -3px; border-radius: var(--radius); }
.acc:not(.open) .acc-hd { border-bottom-color: transparent; }
.acc-sub { font-size: 10px; color: var(--txt3); font-weight: 600; letter-spacing: .3px; margin-left: 2px; }
.acc-side { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: 8px; }
.acc-arrow { width: 7px; height: 7px; border-right: 2px solid var(--txt3); border-bottom: 2px solid var(--txt3);
  transform: rotate(45deg); transition: transform .2s ease; margin-top: -3px; opacity: .9; }
.acc.open .acc-arrow { transform: rotate(-135deg); margin-top: 3px; }
.acc-bd { display: none; }
.acc.open .acc-bd { display: block; animation: accIn .22s ease; }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 合约价格 · 涨跌控制（溢价） */
.pill.fut-pill { color: var(--fut); font-weight: 750;
  background: color-mix(in srgb, var(--fut) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fut) 34%, transparent); }
.ctl-btn.fut-up { color: var(--fut);
  border-color: color-mix(in srgb, var(--fut) 36%, transparent);
  background: color-mix(in srgb, var(--fut) 7%, transparent); }
.ctl-btn.fut-up:hover { color: #fff; background: linear-gradient(135deg, #6a55e8, #9b7dff); border-color: transparent; }
.ctl-btn.fut-dn { color: var(--down);
  border-color: color-mix(in srgb, var(--down) 40%, transparent);
  background: var(--down-bg); }
.ctl-btn.fut-dn:hover { color: #fff; background: linear-gradient(135deg, #d93a52, #ff7380); border-color: transparent; }
.prem-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line2); border-radius: 13px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--fut) 8%, transparent), transparent 70%); }
.prem-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; color: var(--txt3); min-width: 0; }
.prem-line b { font-family: var(--num); font-size: 16px; color: var(--txt); font-weight: 800; }
.prem-line i { font-style: normal; opacity: .72; }
.prem-num { font-family: var(--num); font-size: 25px; font-weight: 900; letter-spacing: .5px; white-space: nowrap; }
.prem-num.up { color: var(--up); }
.prem-num.down { color: var(--down); }
.prem-num.off { color: var(--txt3); }
.ftm-prem { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.ftm-prem em { font-style: normal; font-size: 10px; color: var(--txt3); }
.ftm-prem b { font-family: var(--num); font-weight: 800; font-size: 13px; }
.ftm-prem b.plus { color: var(--fut); }
.ftm-prem b.minus { color: var(--down); }
.prem-ctr { display: inline-flex; gap: 5px; margin-left: auto; }
.prem-ctr .mini-btn { padding: 2px 8px; font-size: 10px; line-height: 1.5; border-radius: 7px; }
.mini-btn.prem-up:hover { color: var(--fut);
  border-color: color-mix(in srgb, var(--fut) 45%, transparent);
  background: color-mix(in srgb, var(--fut) 10%, transparent); }
.mini-btn.prem-dn:hover { color: var(--down); border-color: var(--down-brd); background: var(--down-bg); }


/* 后台按钮 */
.ctl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--txt2);
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: .15s; }
.ctl-btn:hover { border-color: var(--acc-soft); color: var(--acc); background: var(--acc-soft); }
.ctl-btn.blue:hover { color: var(--coin); border-color: color-mix(in srgb, var(--coin) 40%, transparent); background: color-mix(in srgb, var(--coin) 10%, transparent); }
.ctl-btn.danger { color: var(--down); }
.ctl-btn.danger:hover { border-color: var(--down-brd); background: var(--down-bg); color: var(--down); }
.ctl-btn.armed { border-color: var(--up-brd); color: var(--up); background: var(--up-bg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.btn-block { width: 100%; }
.slider-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--acc); height: 4px; }
.slider-row input[type=range].fut { accent-color: var(--fut); }
.slider-row .val { min-width: 44px; text-align: right; font-weight: 750; color: var(--acc); font-family: var(--num); }
input[type=number].ctl, input[type=text].ctl {
  background: var(--bg0); border: 1px solid var(--line2); color: var(--txt);
  border-radius: 9px; padding: 8px 11px; font-size: 13px; outline: none; width: 138px;
  font-family: var(--num); font-variant-numeric: tabular-nums; transition: .15s;
}
input.ctl:focus, .row-num:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }

/* 模式徽标 */
.mode-badge { font-size: 11px; font-weight: 750; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; }
.mode-badge.auto { color: var(--coin); background: color-mix(in srgb, var(--coin) 10%, transparent); border-color: color-mix(in srgb, var(--coin) 28%, transparent); }
.mode-badge.rise, .mode-badge.soar { color: var(--up); background: var(--up-bg); border-color: var(--up-brd); }
.mode-badge.fall, .mode-badge.crash { color: var(--down); background: var(--down-bg); border-color: var(--down-brd); }
.mode-badge.osc, .mode-badge.hold { color: var(--metal); background: color-mix(in srgb, var(--metal) 12%, transparent); border-color: color-mix(in srgb, var(--metal) 30%, transparent); }
.mode-badge.goto { color: var(--fut); background: color-mix(in srgb, var(--fut) 12%, transparent); border-color: color-mix(in srgb, var(--fut) 30%, transparent); }

/* 分组 */
.grp { margin-bottom: 16px; }
.grp:last-child { margin-bottom: 0; }
.gh { font-size: 11px; color: var(--txt3); letter-spacing: 1px; margin-bottom: 2px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; }
.gh::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--line2), transparent); }

.board-mini { margin-bottom: 14px; }
.board-mini:last-child { margin-bottom: 0; }
.board-hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 750;
  letter-spacing: 1.2px; color: var(--txt2); margin: 2px 2px 8px; }
.board-hd .bd-ic { width: 16px; height: 16px; border-radius: 6px; display: grid; place-items: center;
  font-size: 9px; font-style: normal; background: var(--panel3); border: 1px solid var(--line2); }
.board-hd .en { color: var(--txt3); font-size: 9px; letter-spacing: 2.4px; font-weight: 700; margin-left: 2px; }
.board-hd.metal { color: var(--metal); } .board-hd.metal .bd-ic { color: var(--metal); border-color: color-mix(in srgb, var(--metal) 40%, transparent); }
.board-hd.oil { color: var(--oil); } .board-hd.oil .bd-ic { color: var(--oil); border-color: color-mix(in srgb, var(--oil) 40%, transparent); }
.board-hd.coin { color: var(--coin); } .board-hd.coin .bd-ic { color: var(--coin); border-color: color-mix(in srgb, var(--coin) 40%, transparent); }
.board-hd.fut { color: var(--fut); } .board-hd.fut .bd-ic { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 40%, transparent); }

/* 受控品种 chips */
.ctrl-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.ctrl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 11px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--txt2);
  cursor: pointer; font-size: 11.5px; transition: .15s; }
.ctrl-chip .chip-i { width: 21px; height: 21px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10px; font-style: normal; font-weight: 800; flex: none; overflow: hidden; background: var(--panel3); border: 1px solid var(--line2); }
.ctrl-chip .nm { font-weight: 750; }
.ctrl-chip b { font-family: var(--num); font-variant-numeric: tabular-nums; }
.ctrl-chip small { font-size: 10px; }
.ctrl-chip:hover { border-color: var(--acc-soft); color: var(--txt); background: var(--panel-hi); }
.ctrl-chip.on { border-color: var(--acc-soft); background: var(--acc-soft); color: var(--txt); box-shadow: 0 3px 14px -8px var(--acc-glow); }
.ctrl-chip.on .nm { color: var(--acc); }

/* 行内操作 */
.row-op { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.row-op input { width: 92px; background: var(--bg0); border: 1px solid var(--line2); color: var(--txt);
  border-radius: 8px; padding: 5px 7px; font-size: 11.5px; outline: none; font-family: var(--num); }
.mini-btn { border: 1px solid var(--line2); background: var(--panel2); color: var(--txt2);
  border-radius: 8px; padding: 5px 9px; font-size: 11.5px; cursor: pointer; transition: .13s; white-space: nowrap; font-weight: 700; }
.mini-btn:hover { color: var(--acc); border-color: var(--acc-soft); background: var(--acc-soft); }
.mini-btn.danger:hover { color: var(--down); border-color: var(--down-brd); background: var(--down-bg); }
.mini-btn.fut:hover { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 40%, transparent); background: color-mix(in srgb, var(--fut) 10%, transparent); }

/* 新增用户弹窗 */
.add-form { margin-top: 8px; }
.add-form label { display: block; font-size: 11.5px; color: var(--txt3); margin: 14px 2px 3px; font-weight: 700; letter-spacing: .5px; }
.add-form .login-input { margin-top: 0; letter-spacing: 0; text-align: left; padding: 11px 12px; }
.add-user-ok { margin-top: 18px; }

/* 登录 */
.cover { position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg0); backdrop-filter: blur(6px); }
.cover-card { width: 384px; text-align: center; padding: 36px 32px; }
.cover-card .logo-badge { margin: 0 auto 16px; width: 56px; height: 56px; font-size: 24px; border-radius: 17px; }
.login-input { width: 100%; background: var(--bg0); border: 1px solid var(--line2); color: var(--txt);
  border-radius: 11px; padding: 12px 14px; font-size: 14px; outline: none; margin-top: 16px;
  letter-spacing: 2px; text-align: center; transition: .15s; }
.login-input:focus { border-color: var(--acc); box-shadow: 0 0 0 3.5px var(--acc-soft); }
.login-btn { width: 100%; margin-top: 13px; border: none; border-radius: 11px; padding: 13px 0;
  font-size: 14px; font-weight: 750; letter-spacing: 3px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--acc), var(--acc-deep)); box-shadow: 0 10px 26px -10px var(--acc-glow); transition: filter .15s; }
.login-btn:hover { filter: brightness(1.07); }
.login-hint { margin-top: 12px; font-size: 11.5px; color: var(--txt3); }
.err { color: var(--down); font-size: 12px; min-height: 17px; margin-top: 7px; }

/* Toast */
#toasts { position: fixed; top: calc(var(--nav-h) + 12px); right: 20px; display: flex;
  flex-direction: column; gap: 9px; z-index: 400; }
.toast { min-width: 250px; max-width: 400px; padding: 12px 15px; border-radius: 12px; font-size: 12.5px;
  display: flex; gap: 9px; align-items: center; background: var(--panel-solid);
  border: 1px solid var(--line3); box-shadow: var(--sh-pop); animation: slideIn .22s ease;
  backdrop-filter: blur(12px); }
html[data-theme="light"] .toast { background: rgba(255,255,255,.97); }
.toast.ok { border-left: 3px solid var(--up); } .toast.ok i { color: var(--up); }
.toast.bad { border-left: 3px solid var(--down); } .toast.bad i { color: var(--down); }
.toast.warn { border-left: 3px solid var(--metal); } .toast.warn i { color: var(--metal); }

.footer-note { margin-top: 22px; text-align: center; color: var(--txt3); font-size: 11.5px; line-height: 1.9; }

/* ================= 币种真实 logo 尺寸矩阵 ================= */
.clg { display: block; width: 100%; height: 100%; object-fit: contain; }
.ico .clg { width: 34px; height: 34px; }
.ctag .clg { width: 26px; height: 26px; }
.chip-i .clg { width: 21px; height: 21px; }
.ft-ic { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; }
.ft-ic .clg { width: 26px; height: 26px; }
.mkt-dot .clg { width: 17px; height: 17px; }
.pos-ic { display: inline-flex; width: 15px; height: 15px; vertical-align: -3px; flex: none; }
.pos-ic .clg { width: 15px; height: 15px; }
.ftm-logo .clg { width: 26px; height: 26px; }

/* ================= 后台：品种合约 · 逐市场控制 ================= */
.ftm-list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.ftm-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--panel3);
  transition: border-color .15s, background .15s;
}
.ftm-row:hover { border-color: color-mix(in srgb, var(--fut) 32%, transparent); background: var(--panel2); }
.ftm-c { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; }
.ftm-logo { width: 26px; height: 26px; flex: none; border-radius: 50%; overflow: hidden; background: var(--panel2); border: 1px solid var(--line2); }
.ftm-tx b { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ftm-tx em { display: block; font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--txt3); }
.ftm-sw-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.ftm-sw {
  border: 1px solid var(--line2); background: transparent; cursor: pointer;
  border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 750;
  color: var(--txt2); transition: .15s; letter-spacing: .3px;
}
.ftm-sw.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #22cf8f, #0ba96e);
  box-shadow: 0 4px 12px -4px rgba(11, 169, 110, .55);
}
.ftm-sw.off { color: var(--down); border-color: var(--down-brd); background: var(--down-bg); }
.ftm-sw-wrap small { font-size: 9px; color: var(--txt3); white-space: nowrap; }
.ftm-lev { display: flex; align-items: center; gap: 6px; flex: none; }
.ftm-lev .row-num { width: 68px; }
.row-num { background: var(--bg0); border: 1px solid var(--line2); color: var(--txt);
  border-radius: 8px; padding: 5px 7px; font-size: 12px; outline: none; font-family: var(--num); }
.ftm-stat { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 10px; color: var(--txt3); padding-top: 2px; }
.ftm-stat b { color: var(--txt2); font-family: var(--num); font-weight: 700; }
.ftm-stat em { font-style: normal; margin-left: auto; color: var(--fut); font-family: var(--num); font-weight: 700; }

/* ================= 动画 & 响应式 ================= */
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@media (max-width: 1240px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--nav-h); padding: 8px 16px; row-gap: 8px; }
  .mkts { position: static; max-height: none; }
  .mkts .mkt-list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 8px; }
  .mkts .mkt-list .trow { flex: 0 0 232px; }
  .quote-head { padding: 16px 16px 12px; }
  .band { grid-template-columns: 1fr 1fr; margin: 0 12px; padding: 12px 2px; }
  .band-l { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 8px; grid-column: 1 / -1; }
  .bcell .mb { width: 100%; }
  .topbar .announce { display: none; }
}
@media (max-width: 700px) {
  .big-price { font-size: 31px; }
  .clock { display: none; }
  .demo-pill em { display: none; }
  .mini-stats { gap: 14px; width: 100%; justify-content: space-between; }
  .trade { padding: 10px; gap: 11px; }
  .side > div { padding: 14px 12px; }
}

/* ============================================================
   后台：分类导航 + 模块化（每个模块独立显示）
   ============================================================ */
.con-admin { display: flex; gap: 16px; align-items: flex-start; }

/* ---- 左侧分类导航栏 ---- */
.adm-nav { position: sticky; top: calc(var(--nav-h) + 16px); flex: none; width: 240px;
  display: flex; flex-direction: column; padding: 14px 12px 16px; z-index: 5; }
.adm-nav-hd { display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.adm-nav-hd .t { font-size: 14px; font-weight: 850; letter-spacing: 1.2px; color: var(--txt); }
.adm-nav-hd .en { font-size: 9px; letter-spacing: 2.4px; color: var(--txt3); font-weight: 800; }

.nav-sec + .nav-sec { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.nav-t { display: flex; align-items: center; gap: 8px; padding: 0 8px 7px;
  font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--txt3); }
.nav-t i { width: 5px; height: 5px; border-radius: 1.5px; flex: none;
  background: linear-gradient(135deg, var(--acc), var(--fut)); opacity: .9; }

.nav-i { position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 1px 0; padding: 8px 10px 8px 8px; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--txt2); background: transparent;
  border: 0; border-radius: 11px; transition: background .14s, color .14s; -webkit-appearance: none; }
.nav-i:hover { background: var(--panel-hi); color: var(--txt); }
.nav-i i { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 12px; font-weight: 800; color: var(--txt3);
  border-radius: 8px; border: 1px solid var(--line2); background: var(--panel3); transition: .15s; }
.nav-i span { font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.nav-i.fut i { color: color-mix(in srgb, var(--fut) 70%, var(--txt3));
  border-color: color-mix(in srgb, var(--fut) 26%, var(--line2)); }

.nav-i.on { background: linear-gradient(90deg, var(--acc-soft), transparent 90%); color: var(--txt); }
.nav-i.on::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 3px; border-radius: 3px;
  background: var(--acc); box-shadow: 0 0 9px var(--acc-glow); }
.nav-i.on i { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  background: color-mix(in srgb, var(--acc) 15%, var(--panel3)); }
.nav-i.fut.on { background: linear-gradient(90deg, color-mix(in srgb, var(--fut) 15%, transparent), transparent 90%); color: var(--txt); }
.nav-i.fut.on::before { background: var(--fut); box-shadow: 0 0 9px color-mix(in srgb, var(--fut) 60%, transparent); }
.nav-i.fut.on i { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 45%, transparent);
  background: color-mix(in srgb, var(--fut) 18%, var(--panel3)); }

/* ---- 右侧模块内容区 ---- */
.adm-view { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mod { display: none; }
.mod.active { display: block; animation: modIn .22s ease; }
@keyframes modIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.adm-view .mod[data-v="trend"] > .card,
.adm-view .mod[data-v="goto"] > .card,
.adm-view .mod[data-v="burst"] > .card,
.adm-view .mod[data-v="ann"] > .card,
.adm-view .mod[data-v="prem"] > .card,
.adm-view .mod[data-v="ftrisk"] > .card { max-width: 880px; }

/* ---- 全局受控品种条（各模块共享，始终可见） ---- */
.adm-gbar { display: flex; align-items: center; gap: 12px 18px; padding: 12px 16px; flex-wrap: wrap; }
.adm-gbar .gbar-lb { display: flex; align-items: center; gap: 8px; flex: none;
  font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.adm-gbar .gbar-lb .dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--acc), var(--fut));
  box-shadow: 0 0 9px color-mix(in srgb, var(--acc) 55%, transparent); animation: pulse 1.6s infinite; }
.adm-gbar .gbar-lb .acc-sub { font-size: 10px; font-weight: 600; color: var(--txt3); letter-spacing: .3px; margin-left: 4px; }
.adm-gbar #ctrlBar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0; align-items: stretch; }
.adm-gbar .board-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin: 0; padding: 9px 14px 10px;
  border: 1px solid var(--line2); border-radius: 13px; background: var(--panel3); }
.adm-gbar .board-mini.metal { border-top: 2px solid color-mix(in srgb, var(--metal) 55%, transparent); }
.adm-gbar .board-mini.oil { border-top: 2px solid color-mix(in srgb, var(--oil) 55%, transparent); }
.adm-gbar .board-mini.coin { border-top: 2px solid color-mix(in srgb, var(--coin) 55%, transparent); }
.adm-gbar .board-hd { margin: 0; white-space: nowrap; }
.adm-gbar .ctrl-chips { margin-top: 0; }

@media (max-width: 1180px) {
  .con-admin { flex-direction: column; }
  .adm-nav { position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 8px 6px; padding: 10px 12px; }
  .adm-nav-hd { display: none; }
  .nav-sec { margin: 0 !important; padding: 0 !important; border: 0 !important;
    display: flex; align-items: center; gap: 5px; }
  .nav-t { padding: 0 6px 0 2px; font-size: 9px; letter-spacing: 1.4px; }
  .nav-t i { display: none; }
  .nav-i { width: auto; margin: 0; padding: 6px 10px; border-radius: 9px; }
  .nav-i::before { display: none; }
  .nav-i i { width: 21px; height: 21px; font-size: 11px; }
  .nav-i span { font-size: 12.5px; }
}

/* 后台：在线账户表 —— 字号整体放大一档 */
#userTbl { font-size: 13.5px; }
#userTbl th { font-size: 10.5px; padding: 10px 12px; }
#userTbl td { padding: 11px 12px; }
#userTbl .row-num { font-size: 13px; width: 108px; padding: 6px 8px; }
#userTbl .mini-btn { font-size: 12.5px; padding: 6px 10px; }
#userTbl .tag-k { font-size: 10px; padding: 2px 7px; }

/* ================= 顶栏 · 全局搜索（跨板块搜品种 / 板块） ================= */
.top-search { position: relative; flex: 0 1 240px; min-width: 176px; height: 38px;
  display: flex; align-items: center; gap: 7px; padding: 0 10px 0 12px;
  background: var(--panel3); border: 1px solid var(--line2); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.top-search:focus-within { border-color: var(--acc-soft); background: var(--panel-hi);
  box-shadow: 0 0 0 3px var(--acc-soft), 0 8px 20px -12px var(--acc-glow); }
.ts-ic { width: 14px; height: 14px; flex: none; color: var(--txt3); pointer-events: none; transition: color .15s; }
.top-search:focus-within .ts-ic { color: var(--acc); }
#tsInput { flex: 1; min-width: 60px; background: transparent; border: 0; outline: 0; padding: 0;
  color: var(--txt); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; }
#tsInput::placeholder { color: var(--txt3); font-weight: 500; }
.ts-kbd { flex: none; font-size: 9.5px; font-weight: 700; color: var(--txt3); font-family: var(--num);
  border: 1px solid var(--line2); border-radius: 5px; padding: 1px 5px; line-height: 1.4; }
.ts-drop { position: absolute; top: calc(100% + 9px); right: 0; width: 300px; max-height: 400px;
  overflow-y: auto; padding: 6px; z-index: 90; text-align: left;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: 0 26px 52px -20px rgba(0, 0, 0, .55); }
html[data-theme="light"] .ts-drop { box-shadow: 0 22px 44px -22px rgba(20, 40, 90, .28); }
.ts-drop[hidden] { display: none; }
.ts-sec { display: flex; align-items: center; gap: 8px; margin: 6px 8px 4px;
  color: var(--txt3); font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; }
.ts-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ts-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer; text-align: left;
  color: var(--txt); transition: background .12s; }
.ts-it:hover, .ts-it.hl { background: var(--panel-hi); }
.ts-it .tg { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 11px;
  border: 1px solid var(--line2); background: var(--panel2); }
.ts-it[data-g="metal"] .tg { color: var(--metal); border-color: color-mix(in srgb, var(--metal) 45%, transparent); background: color-mix(in srgb, var(--metal) 10%, transparent); }
.ts-it[data-g="coin"]  .tg { color: var(--coin); border-color: color-mix(in srgb, var(--coin) 45%, transparent); background: color-mix(in srgb, var(--coin) 10%, transparent); }
.ts-it[data-g="fut"]   .tg { color: var(--fut); border-color: color-mix(in srgb, var(--fut) 45%, transparent); background: color-mix(in srgb, var(--fut) 10%, transparent); }
.ts-it .tn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ts-it .tn b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-it .tn em { font-style: normal; font-size: 10px; color: var(--txt3); letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-it .tu, .ts-it .tk { flex: none; font-size: 10px; color: var(--txt3); max-width: 118px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-it .tu i { font-style: normal; margin: 0 3px; color: var(--line2); }
.ts-it.gp .tk { color: var(--acc); font-weight: 700; }
.ts-it.on { background: color-mix(in srgb, var(--acc) 9%, transparent); }
.ts-empty { padding: 18px 10px; text-align: center; color: var(--txt3); font-size: 12px; }

@media (max-width: 900px) {
  .top-search { flex: 0 1 200px; }
}
@media (max-width: 700px) {
  .ts-kbd { display: none; }
  .ts-drop { right: auto; left: 0; width: min(320px, calc(100vw - 150px)); }
}

/* ============================================================
   GOLDEX 用户端 · 登录 / 注册（顶栏用户区、登录引导卡、弹窗）
============================================================ */
.userzone { display: flex; align-items: center; gap: 8px; flex: none; margin-left: 8px; }
.auth-btn { height: 33px; display: inline-flex; align-items: center; gap: 7px; padding: 0 15px 0 13px;
  border-radius: 11px; cursor: pointer; border: 1px solid transparent; color: #fff; font-size: 12.5px;
  font-weight: 750; letter-spacing: .4px; font-family: inherit;
  background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  box-shadow: 0 6px 16px -7px var(--acc-glow), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .15s, transform .06s; }
.auth-btn:hover { filter: brightness(1.08); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn svg { flex: none; }
.userchip { display: flex; align-items: center; gap: 7px; height: 34px; padding: 3px 7px 3px 4px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); }
.uav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-style: normal; font-weight: 800; font-size: 12px; color: #071b33;
  background: linear-gradient(135deg, #7cc4ff, #a489ff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.unm { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 750; color: var(--txt); }
.uo { flex: none; border: none; background: transparent; color: var(--txt3); font-size: 11px; font-weight: 700;
  padding: 5px 7px; border-radius: 8px; cursor: pointer; transition: .13s; }
.uo:hover { color: var(--down); background: var(--down-bg); }

/* 未登录：资产引导卡 */
body[data-page="trade"] .o-guest { display: flex; flex-direction: column; }
.guest-main { display: flex; gap: 12px; align-items: center; margin-top: 2px; }
.gm-emblem { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex: none;
  font-size: 21px; color: #ffd97a; text-shadow: 0 0 14px rgba(255, 217, 122, .55);
  border: 1px solid rgba(245, 197, 66, .35);
  background: radial-gradient(circle at 32% 26%, rgba(255, 217, 122, .16), rgba(245, 165, 66, .04) 70%); }
.gm-t b { display: block; font-size: 15px; font-weight: 800; }
.gm-t span { display: block; margin-top: 3px; font-size: 11px; color: var(--txt3); }
.gm-perks { list-style: none; margin: 13px 0 2px; padding: 0; border-top: 1px dashed var(--line2); }
.gm-perks li { display: flex; align-items: center; gap: 9px; padding: 8px 2px; font-size: 12px; color: var(--txt2); }
.gm-perks li i { flex: none; font-style: normal; width: 18px; height: 18px; border-radius: 6px;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
  color: var(--acc); background: var(--acc-soft); }
.gm-btn { margin-top: 6px; width: 100%; padding: 12px 0; border: none; border-radius: 12px; cursor: pointer;
  color: #fff; font-size: 14px; font-weight: 750; letter-spacing: 2px; font-family: inherit;
  background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  box-shadow: 0 10px 24px -10px var(--acc-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: filter .15s; }
.gm-btn:hover { filter: brightness(1.08); }

/* 登录 / 注册 弹窗 */
@keyframes amFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes amPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.amask { position: fixed; inset: 0; z-index: 380; display: grid; place-items: center; padding: 22px;
  background: rgba(3, 6, 12, .55); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  animation: amFade .16s ease; }
.amodal { width: min(408px, 100%); position: relative; overflow: hidden;
  padding: 22px 24px 18px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line3);
  box-shadow: var(--sh-pop); animation: amPop .18s ease; }
.amodal::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--fut), transparent); }
.am-hd { display: flex; align-items: center; justify-content: space-between; }
.am-title { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.am-logo { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-style: normal; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--acc-hi), var(--acc-deep));
  box-shadow: 0 5px 14px -6px var(--acc-glow); }
.am-x { width: 30px; height: 30px; border: none; border-radius: 9px; background: transparent;
  color: var(--txt3); font-size: 18px; line-height: 1; cursor: pointer; transition: .13s; }
.am-x:hover { color: var(--txt); background: var(--panel2); }
.am-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0 6px; padding: 4px;
  background: var(--bg0); border: 1px solid var(--line2); border-radius: 12px; }
.am-tab { border: none; background: transparent; color: var(--txt3); font-size: 13px; font-weight: 750;
  padding: 9px 0; border-radius: 9px; cursor: pointer; transition: .15s; font-family: inherit; }
.am-tab.on { color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  box-shadow: 0 4px 14px -6px var(--acc-glow); }
.am-lb { display: block; margin: 12px 0 5px; font-size: 11px; font-weight: 750; letter-spacing: .8px; color: var(--txt3); }
.am-in { box-sizing: border-box; width: 100%; padding: 11px 13px; font-size: 13.5px; color: var(--txt);
  background: var(--bg0); border: 1px solid var(--line2); border-radius: 11px; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.am-in::placeholder { color: var(--txt3); }
.am-in:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.am-err { min-height: 19px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--down); }
.am-sub { box-sizing: border-box; width: 100%; margin-top: 6px; padding: 12px 0; border: none;
  border-radius: 12px; cursor: pointer; color: #fff; font-size: 14.5px; font-weight: 800;
  letter-spacing: 3px; font-family: inherit;
  background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  box-shadow: 0 10px 24px -10px var(--acc-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: filter .15s, opacity .15s; }
.am-sub:hover:not(:disabled) { filter: brightness(1.07); }
.am-sub:disabled { opacity: .6; cursor: default; }
.am-tip { margin-top: 12px; font-size: 11px; line-height: 1.8; text-align: center; color: var(--txt3); }

@media (max-width: 760px) {
  .unm { max-width: 70px; }
  .auth-btn span { display: none; }
  .auth-btn { padding: 0 12px; }
}