/* Polymarket/Kalshi 风格暗色 UI —— 移动端优先，桌面自适应 */
:root{
  /* color-scheme：让浏览器**自己画的那些东西**（表单控件、原生滚动条、
     日期选择器、autofill 底色）跟着主题走。不写这一行，日间模式下
     会冒出深色的原生下拉框 —— 典型的"不是我画的所以忘了"那类破绽。 */
  color-scheme:dark;
  --bg:#0b0e14; --bg2:#111621; --bg3:#171d2b; --line:#222a3a;
  /*
   * --ink3 是三级文字（说明、标签、时间戳、hint），字号普遍只有 8.5~12px。
   * 原来的 #5d6880 在 --bg2 上对比度只有 **3.31:1**，低于 WCAG AA 正文的 4.5:1 ——
   * 在手机、亮环境或低端屏上基本看不清（这类小字恰恰最需要看清）。
   * 提到 #7b879f = 4.98:1（在更浅的 --bg3 上也有 4.68:1），
   * 与二级文字 --ink2(#98a2b8) 仍有明显层级差，颜色语言不变。
   */
  --ink:#e8ecf3; --ink2:#98a2b8; --ink3:#7b879f;
  --up:#0ecb81; --dn:#f6465d; --acc:#4d7cff; --warn:#eda100;
  --r:12px;

  /* ══ 需求161：日间模式所需的"角色"变量 ═══════════════════════════════
   * 暗色这一份的取值 = **改动前逐个像素抄下来的**，所以开着夜间模式的用户
   * 一个像素都不会变（这是能安全铺开的前提）。日间那份在下面的
   * `[data-theme="light"]` 里重新**配**出来 —— 不是把暗色反相：
   * 亮底上的绿/红/蓝必须压暗才够 4.5:1，而实心按钮上的同一族颜色又必须保持鲜艳，
   * 所以文字色与实心填充色**拆成两套 token**（--up / --up-solid …）。
   */
  /* 表面 */
  --surf-top:rgba(11,14,20,.92);   /* 顶栏/底部操作栏（半透明 + 模糊）*/
  --surf-sunken:#0d1219;           /* 比卡片更"凹"：图表框、代码块、确认框 */
  --surf-raise:#1a2233;            /* 悬停抬起 */
  --line2:#37415a;                 /* 悬停/强调分隔线 */
  --scroll:#2c3549; --scroll-h:#3a465f;
  --scrim:rgba(0,0,0,.7);          /* 模态遮罩 */
  --shadow:rgba(0,0,0,.45);
  /* 语义实心：用作**填充**时的颜色（前景色由各自站点写死，别改）*/
  --acc-solid:#4d7cff; --up-solid:#0ecb81; --dn-solid:#f6465d; --warn-solid:#eda100;
  /* 语义浅底 + 描边：提示条、徽章、选中态 */
  --tint-acc:rgba(77,124,255,.12);  --tint-acc-line:rgba(77,124,255,.32);
  --tint-up:rgba(14,203,129,.12);   --tint-up-line:rgba(14,203,129,.30);
  --tint-dn:rgba(246,70,93,.10);    --tint-dn-line:rgba(246,70,93,.34);
  --tint-warn:rgba(237,161,0,.10);  --tint-warn-line:rgba(237,161,0,.32);
  --tint-lime:#1d2413; --tint-lime-line:#3d4d1c; --tint-lime-ink:#cfe07a;
  /* 语义**不透明**底：整条横幅、选中卡片、已关闭工单。
     半透明叠出来的底会随父底漂移，整条铺开的横幅必须给死色。 */
  --surf-acc:#16203a;  --surf-acc2:#1a2440;  --surf-acc-line:#24365c;
  --surf-warn:#241f13; --surf-warn2:#2a2313;
  --surf-dn:#241417;   --surf-dn2:#2a1418;   --surf-dn-line:#4a2129; --surf-dn-ink:#f0a0ad;
  --grad-a:#141b2b; --grad-b:#111621;            /* 资产页顶部余额条 */
  --surf-hero-a:#151a26; --surf-hero-b:#0e121b;  /* 赌场大厅 hero */
  --bar-neutral:#39435a;                         /* 分红柱状图里的空柱 */
  /* 行情页底部主按钮「交易」：暗色下是白边白字的玻璃按钮 —— 那是压在暗底上才成立的做法，
     日间必须换成实心强调色，否则白字白边直接消失在浅色底栏里。 */
  --fct-bg:rgba(255,255,255,.06); --fct-line:#fff; --fct-ink:#fff;
  --fct-hover:rgba(255,255,255,.14);
  /* 站名字标：jef=象牙白 / chain=古董金（与品牌图标同色）。
     日间模式下这两色压在白顶栏上只有 1.2:1 与 2.2:1 —— 字标会直接消失，
     所以浅色那套换成"同一个层级关系、但压得住白底"的深墨 + 深金。 */
  --logo-a:#efe7d6; --logo-b:#c9a961;
  /* 金色：全站第三个语义色（返佣/开奖中/分红收益）。#f0b90b 压在浅底上只有 1.5:1 */
  --gold:#f0b90b;
  /* 压在"涨绿/跌红实心"上的字色。暗色沿用白字（原样）；日间的荧光绿太亮，
     白字只有 2.1:1，必须换成近黑 —— 与资产页那颗绿色「充值」按钮同一口径。 */
  --on-up:#fff; --on-dn:#fff;
  /* 我发的聊天气泡 */
  --bubble-mine:#1d3a72;
  /* Google 登录按钮：品牌规范自带深/浅两版，跟着主题走 */
  --gsi-bg:#131314; --gsi-line:#8e918f; --gsi-ink:#e3e3e3; --gsi-hover:#1c1c1d;
  /*
   * 赌桌：**两个主题都保持暗色**。轮盘的红/黑格、扑克牌背、老虎机滚轮
   * 是一整套自成体系的桌面图形，跟着页面变白只会让它们互相打架 ——
   * 牌桌本来就是暗的，这是有意保留，不是漏改。
   */
  --table:#0a0d14; --table2:#141922; --table-line:#2b3650; --table-ink:#e8ecf3;
  /*
   * K 线上那些"没有底色、直接压在蜡烛上"的字（左下角实时下注浮层）用的描边光晕。
   * 暗色 = 黑光晕（原样抄自改动前）；日间图表底是**纯白**（chart.jsx 的 THEMES.light.bg），
   * 黑光晕糊在白底上会让每个字都带一圈脏边 —— 看起来就是"字虚了、看不清"。
   * 所以它必须是**跟着主题走的 token**，不能写死颜色。
   */
  --chart-halo:rgba(0,0,0,.95); --chart-halo2:rgba(0,0,0,.85);
}

/* ══ 日间模式 ══════════════════════════════════════════════════════════
 * 场景：白天、户外、亮屏手机 —— 所以底不是纯白（长时间盯着刺眼），
 * 而是一层很轻的冷灰 #f4f6fa，卡片才是纯白，层级靠"卡片比底更亮"建立
 * （暗色里正好相反：卡片比底更亮一点点，靠的是抬高明度）。
 * 三档文字与四个语义色都按 WCAG AA 复核过（脚本 audit-contrast.mjs 实测，非目测）。
 */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6fa; --bg2:#ffffff; --bg3:#e9edf4; --line:#d9e0ea;
  --ink:#0f1723; --ink2:#48546a; --ink3:#5e6a83;
  /* 亮底上的语义**文字**色：原来的荧光绿/红/蓝在白底只有 2~3:1，必须压暗 */
  --up:#04794a; --dn:#c01330; --acc:#1e51d6; --warn:#8a5a00;
  /* 同一族颜色用作**实心填充**时保持鲜艳（前景是白字或近黑字，各自已写死）*/
  --acc-solid:#2f5fe0; --up-solid:#0ecb81; --dn-solid:#dd2440; --warn-solid:#eda100;
  --surf-top:rgba(255,255,255,.9);
  --surf-sunken:#eef1f7; --surf-raise:#eef2f8;
  --line2:#b9c4d6; --scroll:#c4cddc; --scroll-h:#a7b3c8;
  --scrim:rgba(15,22,35,.45);
  --shadow:rgba(15,23,42,.14);
  --tint-acc:rgba(47,95,224,.10);   --tint-acc-line:rgba(47,95,224,.28);
  --tint-up:rgba(4,140,86,.12);     --tint-up-line:rgba(4,140,86,.30);
  --tint-dn:rgba(192,19,48,.09);    --tint-dn-line:rgba(192,19,48,.28);
  --tint-warn:rgba(180,118,0,.12);  --tint-warn-line:rgba(180,118,0,.30);
  --tint-lime:#f2f7e0; --tint-lime-line:#cfdca4; --tint-lime-ink:#4a5c15;
  --surf-acc:#e6ecfd;  --surf-acc2:#dde6fc;  --surf-acc-line:#c3d2f7;
  --surf-warn:#fdf4de; --surf-warn2:#fbecc6;
  --surf-dn:#fdecee;   --surf-dn2:#fbdfe3;   --surf-dn-line:#f2c2ca; --surf-dn-ink:#a5122c;
  --grad-a:#ffffff; --grad-b:#eaf0fb;
  --surf-hero-a:#eef2fa; --surf-hero-b:#e3e9f6;
  --bar-neutral:#aeb9cc;
  --fct-bg:var(--acc-solid); --fct-line:var(--acc-solid); --fct-ink:#fff;
  --fct-hover:#2450cc;
  --logo-a:#141c2b; --logo-b:#7d5f1c;
  --gold:#8a6008;
  --on-up:#04241a; --on-dn:#fff;
  --bubble-mine:#dbe6ff;
  --gsi-bg:#ffffff; --gsi-line:#747775; --gsi-ink:#1f1f1f; --gsi-hover:#f2f2f2;
  /* 日间图表底是纯白：光晕换成白色才起"把字从蜡烛里托出来"的作用（黑光晕在这里只会糊脏）*/
  --chart-halo:rgba(255,255,255,.98); --chart-halo2:rgba(255,255,255,.92);
}

/*
 * 赌桌是**有意保留的一块暗色岛**：轮盘的红/黑格、扑克牌背、老虎机滚轮、
 * 扫雷格子是一整套自成体系的桌面图形（真实赌桌本来就是暗的）。
 * 让它跟着页面变白，只会让这些死色图形和浅色底互相打架。
 * 所以日间模式下把这一块的 token **钉回暗色**，桌面内部的文字/描边照旧成立 ——
 * 这比逐个游戏重画一套浅色图形可靠得多，也不会动到夜间模式的任何一像素。
 */
:root[data-theme="light"] .cs-stage,
:root[data-theme="light"] .cs-hero{
  --bg2:#111621; --bg3:#171d2b; --line:#222a3a; --line2:#37415a;
  --ink:#e8ecf3; --ink2:#98a2b8; --ink3:#7b879f;
  --surf-hero-a:#151a26; --surf-hero-b:#0e121b;
  color:var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK SC","PingFang SC",sans-serif;
  -webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit;background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;width:100%;outline:none}
input:focus{border-color:var(--acc)}
a{color:var(--acc);text-decoration:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ── 浏览器自带的那几块「没人设计过」的表面 ──────────────────────
   滚动条、选中高亮、键盘焦点圈，默认都是浅色系统样式，
   压在这套暗色盘上非常突兀（尤其滚动条，一眼像是别的网站的零件）。
   全部按调色板重新上色 —— 纯新增，不影响任何既有布局。 */
::selection{background:rgba(77,124,255,.35);color:var(--ink)}
*{scrollbar-color:var(--scroll) transparent}          /* Firefox */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-h);background-clip:content-box}
/* 键盘焦点：只在**键盘**导航时出现（:focus-visible），鼠标点击不会闪一圈 */
button:focus-visible,a:focus-visible,select:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* ── 顶栏 ───────────────────────────────── */
/*
 * 需求138：手机顶部那条状态栏（信号/电量/刘海）会**盖住**页面第一行。
 * index.html 用了 viewport-fit=cover（PWA 全面屏必须），页面因此铺到屏幕最顶端，
 * 于是登录/语言/玩法介绍那一行正好躲在状态栏底下，点都点不到。
 *
 * 修法：把 `env(safe-area-inset-top)`（各家手机自报的"安全区高度"，无刘海的机型是 0）
 * 加进顶栏的内边距 —— 背景照样铺到屏幕最顶（好看），但**内容从安全区下沿开始**。
 * 变量化是因为：维护横幅出现时它才是最顶端那一条，安全区归它吃，
 * 顶栏必须让出来（SiteNotice 会把 --safeTop 临时置 0，见 main.jsx）。
 */
:root{--safeTop:env(safe-area-inset-top,0px)}
.top{position:sticky;top:0;z-index:50;background:var(--surf-top);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{max-width:1440px;margin:0 auto;padding:calc(10px + var(--safeTop)) 16px 10px;
  display:flex;align-items:center;gap:16px}
/*
 * 站名 jefcoin（改名史：kkgat → jefchain → jefcoin）。
 * 字标的拆法 **照抄图标的层级**：`jef`（人名，象牙白，最响）+ `chain`（古董金，副名）——
 * 顶栏文字与图标于是是同一套语言，而不是各说各话。
 * 字重/字号/字距一概不动，只换文字与颜色，布局零改动。
 */
.logo{font-weight:800;font-size:18px;letter-spacing:-.3px;white-space:nowrap}
.logo i{font-style:normal;color:var(--logo-a)}  /* jef：象牙白，与图标里的字同色 */
.logo span{color:var(--logo-b);font-weight:700} /* coin：古董金，与图标金框同色 */
.nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav button{padding:8px 14px;border-radius:999px;color:var(--ink2);
  font-weight:600;font-size:14px;white-space:nowrap;transition:.15s}
.nav button:hover{color:var(--ink);background:var(--bg3)}
.nav button.on{background:var(--acc-solid);color:#fff}
.top-right{display:flex;align-items:center;gap:10px;white-space:nowrap}
/* 余额同时是「我的账户」入口（需求49）：给出可点的手感，不改尺寸不动布局 */
.bal{background:var(--bg3);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-weight:700;font-size:14px;transition:.15s}
.bal:hover{border-color:var(--acc);color:var(--acc)}
.loginb .lb-short{display:none}          /* 默认（宽屏）显示完整"登录 / 注册" */
.bal.on{border-color:var(--acc);color:var(--acc)}
.btn{background:var(--acc-solid);color:#fff;padding:8px 16px;border-radius:999px;
  font-weight:700;font-size:14px;white-space:nowrap;flex-shrink:0}
.btn.ghost{background:var(--bg3);border:1px solid var(--line);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── 需求77：右上角图标按钮（通知铃铛 / 推荐返佣小礼物）────────────────── */
.iconbtn{display:flex;align-items:center;gap:5px;color:var(--ink2);
  background:var(--bg3);border:1px solid var(--line);border-radius:999px;
  padding:6px 9px;transition:.15s;flex-shrink:0}
.iconbtn:hover{color:var(--ink);border-color:var(--acc)}
.iconbtn.on{color:var(--acc);border-color:var(--acc)}
/* 有待提取返佣时，金额直接挂在礼物图标旁边（需求77），并整枚按钮转成金色 */
.iconbtn.gift b{font-size:12.5px;font-weight:800;letter-spacing:-.2px}
.iconbtn.gift:has(b){color:var(--gold);border-color:rgba(240,185,11,.5);
  background:rgba(240,185,11,.10)}
.iconbtn.gift:has(b):hover{border-color:var(--gold)}
/* 被"小礼物"滚动定位到的返佣面板：闪一下，让用户知道落点在哪 */
#ref-panel.flash{animation:refflash 1.8s ease}
@keyframes refflash{
  0%,100%{box-shadow:0 0 0 0 rgba(240,185,11,0)}
  15%,60%{box-shadow:0 0 0 2px rgba(240,185,11,.55)}
}

.wrap{max-width:1440px;margin:0 auto;padding:16px}

/* ── 需求76：退出登录（从右上角挪进「资产」页，充值/提款下面，小一号）── */
.logoutrow{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.logoutb{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
  color:var(--ink3);background:var(--bg3);border:1px solid var(--line);transition:.15s}
.logoutb:hover{color:var(--dn);border-color:rgba(246,70,93,.5)}
/* 页内返回入口（原「跟单」页用过，仍被其它子页复用） */
.backlink{display:inline-block;margin-bottom:12px}

/* ══════════════════════════════════════════════════════════════════════
   需求78-1：手机端底部固定导航（市场 / 排行榜 / 聊天室 / 资产）
   ----------------------------------------------------------------------
   ⚠️ z-index 60：要盖住页面内容，但**必须低于**全屏看图(140)与交易弹窗(150)，
      否则在全屏看图里底栏会浮在上面。
   ⚠️ 高度写进 --botnavH：交易页量首屏可用高度时要减掉它（见 main.jsx 的 fit()），
      否则 K 线/下单面板会被底栏压住最后一截。
   ══════════════════════════════════════════════════════════════════════ */
.botnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--surf-top);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.bn-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px 6px;color:var(--ink3);font-size:11px;font-weight:600;min-width:0}
.bn-item.on{color:var(--acc)}
.bn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-item .bn-bal{font-size:12px;font-weight:800;letter-spacing:-.2px}
.bn-item.on .bn-bal{color:var(--up)}

/* ── 币种卡片 ───────────────────────────── */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;cursor:pointer;transition:.15s}
.card:hover{border-color:var(--acc);transform:translateY(-2px)}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.sym{font-weight:800;font-size:16px}
.chip{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--bg3);color:var(--ink2)}
.px{font-size:24px;font-weight:800;letter-spacing:-.5px}
.chg{font-size:13px;font-weight:700;margin-top:2px}
.up{color:var(--up)} .dn{color:var(--dn)}
.card-f{display:flex;gap:6px;margin-top:12px}
.card-f div{flex:1;text-align:center;padding:6px;border-radius:8px;
  background:var(--bg3);font-size:12px;font-weight:700}

/* ── 币种图标 ───────────────────────────── */
.coin{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.coin b{font-weight:800}
.coin .q{color:var(--ink3);font-weight:500;font-size:12px}
.coin.sm{gap:5px;font-size:13px}
.sym{display:flex;align-items:center;gap:8px}

/* ── 交易页布局 ─────────────────────────────
   桌面：[盘口 260 | 图表/持仓/历史 | 下注/聊天 340]
   窄屏：图表 → 下注 → 我的持仓 → 历史场次 → 盘口 → 聊天
   （下注模块必须紧跟图表，否则手机端要划过一整屏历史才够得着）*/
.trade-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.trade-top .btn{margin-top:4px}

.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel-h{padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel-b{padding:16px}

/* ── 24h 行情条（币安同款字段）── */
.ticker{flex:1;min-width:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px}
.tk-name{display:flex;align-items:center;gap:10px}
.tk-sym{font-weight:800;font-size:16px;line-height:1.2}
.tk-sub{font-size:11px;color:var(--ink3)}
.tk-px{font-size:24px;font-weight:800;letter-spacing:-.5px;display:flex;
  flex-direction:column;line-height:1.1}
.tk-usd{font-size:12px;color:var(--ink2);font-weight:600}
.tk-stats{display:flex;gap:22px;flex-wrap:wrap;flex:1}
.tk-stats>div{display:flex;flex-direction:column;gap:2px}
.tk-stats span{font-size:11px;color:var(--ink3);white-space:nowrap}
.tk-stats b{font-size:13px;font-weight:700;white-space:nowrap}

/* ── 图表 + 指标 ── */
.prochart{position:relative}
.ind-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ind-left{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ind-bar button{padding:4px 10px;border-radius:6px;background:var(--bg3);
  border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink2)}
.ind-bar button.on{background:var(--acc-solid);border-color:var(--acc);color:#fff}
.ind-bar .sep{width:1px;height:16px;background:var(--line);margin:0 2px}
.ind-right{font-size:12px;color:var(--ink3)}
.ohlc{display:flex;gap:14px;flex-wrap:wrap;padding:6px 12px;font-size:11.5px;
  color:var(--ink2);border-bottom:1px solid var(--line)}
.ohlc b{font-weight:700}
.ma-legend{display:flex;gap:10px;flex-wrap:wrap}
.ma-legend em{font-style:normal;font-weight:700}
.chart-wrap{position:relative}
.chart-main{width:100%;height:400px}
.chart-sub{width:100%;height:120px;border-top:1px solid var(--line)}
@media(max-width:1179px){.chart-main{height:300px}.chart-sub{height:100px}}

/* ── 需求39：副图（MACD / RSI）的显隐 ──
   显隐**只由组件的 .has-sub 类决定**，不再写行内 display，也不再有任何
   `display:none!important` 把它按死。以前手机端被一条 !important 一刀切藏掉，
   用户点 MACD / RSI 按钮完全没反应 —— 那正是这条需求要修的 bug。 */
.prochart .chart-sub{display:none}
.prochart.has-sub .chart-sub{display:block}

/* 需求44：万一某个图表实例走了旧路径没吃到 attributionLogo:false，这里兜底 */
#tv-attr-logo{display:none!important}

/* 面板标题里的「最后一根 12:00–12:01 实时」 */
.cur-win{font-size:12.5px;font-weight:700;color:var(--ink2);margin-left:8px;
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:2px 8px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cur-win em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--gold)}

/* 标题栏右侧「最后一根 12:00–12:01 实时·剩 23s」 */
.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ink3);margin-right:6px;vertical-align:middle}
.livedot.on{background:var(--up-solid);box-shadow:0 0 0 3px rgba(14,203,129,.18);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.live-tag{font-style:normal;margin-left:6px;padding:1px 6px;border-radius:5px;
  background:rgba(240,185,11,.16);color:var(--gold);font-weight:700;font-size:11px}
.live-tag.done{background:var(--bg3);color:var(--ink3)}

/* 图表左侧竖标：右轴是价格，左边这条告诉你"正在跳的这根是哪一分钟的盘口" */
/* 需求157.1：第二枚水印 —— 小字角标，默认右上角。
   位置/字号是容器固定值（缩放平移都不动）；`pointer-events:none` 保证它
   永远不拦图表手势；z-index 压在 .livebar/.betflow 之下（那两个是要读的信息，
   水印只是署名）。具体位置由 chart.jsx 的 cornerStyle() 算成行内样式。 */
.wm2{position:absolute;z-index:2;pointer-events:none;user-select:none;
  font-weight:700;letter-spacing:.06em;line-height:1;white-space:nowrap}
.livebar{position:absolute;left:0;top:10px;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;padding:7px 10px 7px 8px;
  background:linear-gradient(90deg,rgba(240,185,11,.16),rgba(240,185,11,.02));
  border-left:3px solid var(--gold);border-radius:0 8px 8px 0}
.livebar.closed{background:linear-gradient(90deg,rgba(93,104,128,.18),transparent);
  border-left-color:var(--ink3)}
.lb-cap{font-size:10px;font-weight:800;color:var(--gold);letter-spacing:.3px}
.livebar.closed .lb-cap{color:var(--ink3)}
.lb-win{font-size:14px;font-weight:800;letter-spacing:-.2px}
.lb-left{font-size:10.5px;color:var(--ink2)}
.lb-px{font-size:12px;font-weight:700}
@media(max-width:700px){
  .livebar{top:6px;padding:5px 8px 5px 6px}
  .lb-win{font-size:12.5px} .lb-cap,.lb-left{font-size:9.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   需求74：K 线左下角的实时下注浮层（参考 Polymarket 的成交流）
   ----------------------------------------------------------------------
   动画曲线是刻意调的：**快进（0.18s）、久留、慢出（末段 35%）** ——
   进得快才有"刚刚发生"的感觉，出得慢才不会让人觉得数字在闪。
   全程只用 transform + opacity（合成器属性），不触发重排，
   所以哪怕同时挂着 10 条，K 线也一帧都不会掉。
   ══════════════════════════════════════════════════════════════════════ */
/*
 * 需求75 修订：**去掉胶囊、缩小、限高**。
 * 第一版是「深色胶囊 + 13.5px 大字」，条数一多就糊住半张图：
 *   ① 胶囊有不透明底色 → 直接把后面的蜡烛遮死；
 *   ② 10 条 × 约 24px = 240px，几乎顶到 K 线顶部。
 * 现在：纯文字（无底色/无边框，靠 text-shadow 保证在蜡烛上也读得清）、
 * 字号砍到 10.5px、**整条浮层最高只占图表高度的 1/6**（max-height:16.6%），
 * 超出的部分由 overflow:hidden 裁掉，并用 mask 让最上面一条淡出 ——
 * 硬裁会露出半行字，很脏。
 */
/* ⚠️ bottom 要避开图表底部那条时间轴（lightweight-charts 约 26px 高），
   否则数字会压在 "13:00 / 14:30" 这些刻度上，两层字叠在一起谁也读不清 */
.betflow{position:absolute;left:7px;bottom:28px;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
  pointer-events:none;              /* 永远不挡图表手势 */
  max-width:min(46%,180px);
  /* ★ 需求75：只占 K 线高度的 1/6。百分比相对 .chart-wrap 的高度解析，
     三档断点下它都是 flex:1 的确定高度（已实测 334/265/210px），能正常生效 */
  max-height:16.6%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 68%,rgba(0,0,0,.35) 88%,transparent);
          mask-image:linear-gradient(to top,#000 68%,rgba(0,0,0,.35) 88%,transparent)}
.bf-item{display:flex;align-items:baseline;gap:4px;white-space:nowrap;line-height:1.3;
  /* 没有底色 → 全靠描边式阴影在蜡烛/网格线上也读得清。
     ⚠️ 光晕颜色必须跟着主题走（--chart-halo）：日间图表底是纯白，
        黑光晕会让每个字带一圈脏边 —— 用户报的"左下角字幕特别模糊看不清"就是它。 */
  text-shadow:0 1px 2px var(--chart-halo),0 0 3px var(--chart-halo2);
  animation:bfpop 7s cubic-bezier(.22,.9,.3,1) forwards}
.bf-arrow{font-size:8px;line-height:1}
.bf-item.up .bf-arrow,.bf-item.up .bf-amt,.bf-item.up .bf-side{color:var(--up)}
.bf-item.dn .bf-arrow,.bf-item.dn .bf-amt,.bf-item.dn .bf-side{color:var(--dn)}
/* 金额仍是主角，但只比旁边的字大一点点 */
.bf-amt{font-size:10.5px;font-weight:800;letter-spacing:-.2px}
.bf-side{font-size:9px;font-weight:700;opacity:.9}
.bf-who{font-size:8.5px;color:var(--ink3);opacity:.8;
  overflow:hidden;text-overflow:ellipsis}
/* 纯文字了，就不再做 scale 弹跳（小字缩放会发虚）：只上浮 + 淡入淡出 */
@keyframes bfpop{
  0%   {opacity:0;transform:translateY(7px)}
  4%   {opacity:1;transform:translateY(0)}    /* ≈0.28s 进场，"刚刚发生"的感觉 */
  70%  {opacity:1;transform:translateY(0)}
  100% {opacity:0;transform:translateY(-5px)} /* 慢慢淡掉并上浮 */
}
/* 手机屏图更矮（实测主图约 210px → 1/6 只有 35px，放得下 2~3 条），
   字再小一号、名字直接不显示 —— 首要目标是别糊住蜡烛 */
@media(max-width:767px){
  .betflow{left:5px;bottom:24px;max-width:52%}
  .bf-amt{font-size:9.5px}
  .bf-side{font-size:8px}
  .bf-who{display:none}
}
/* 全屏看图的主图高得多，1/6 自然就能放下更多条，不用另设规则 */
.fullchart .betflow{max-width:220px}
@media(prefers-reduced-motion:reduce){
  .bf-item{animation:bffade 7s linear forwards}
  @keyframes bffade{0%{opacity:0}3%{opacity:1}70%{opacity:1}100%{opacity:0}}
}

/* 近期走势：并进 K 线面板底部 */
.trend{padding:10px 14px 14px;border-top:1px solid var(--line)}
.trend-h{display:flex;justify-content:space-between;align-items:center;gap:8px;
  flex-wrap:wrap;margin-bottom:6px}
.trend-h b{font-size:13px}
.trend-h span{font-size:11px;color:var(--ink3)}

/* ── 我的持仓小视图：固定 5 行高，内部滚动 ── */
.pos-view{max-height:238px;overflow-y:auto;overflow-x:auto}
.pos-view table{font-size:13px}
.pos-view thead th{position:sticky;top:0;background:var(--bg2);z-index:2}
.pos-view td,.pos-view th{padding:8px 10px}
/* 历史场次同样收成小视图：30 场铺开会把页面拉到 2400px，右侧聊天被顶出屏外 */
.hist-view{max-height:420px;overflow:auto}
.hist-view thead th{position:sticky;top:0;background:var(--bg2);z-index:2}
@media(max-width:700px){.pos-view{max-height:226px}.hist-view{max-height:340px}}

/* ── 盘口 ── */
.book .panel-h{padding:10px 12px}
.stepsel{background:var(--bg3);border:1px solid var(--line);color:var(--ink2);
  border-radius:6px;padding:3px 6px;font-size:11px;outline:none}
.book-head{display:grid;grid-template-columns:1.1fr .9fr .7fr;gap:4px;
  padding:6px 12px;font-size:10.5px;color:var(--ink3)}
.book-head span:nth-child(2),.book-head span:nth-child(3){text-align:right}
.book-side{padding:0 4px}
.brow{position:relative;display:grid;grid-template-columns:1.1fr .9fr .7fr;gap:4px;
  padding:2px 8px;font-size:12px;line-height:17px}
.brow i{position:absolute;right:0;top:0;bottom:0;border-radius:2px}
.brow.ask i{background:rgba(246,70,93,.13)}
.brow.bid i{background:rgba(14,203,129,.13)}
.brow span{position:relative;z-index:1}
.brow .q,.brow .c{text-align:right;color:var(--ink2)}
.brow .c{color:var(--ink3)}
.book-mid{display:flex;align-items:baseline;gap:10px;padding:7px 12px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0}
.mid-px{font-size:17px;font-weight:800}
.mid-sp{font-size:11px;color:var(--ink3)}
.bs-bar{position:relative;display:flex;height:20px;margin:8px 10px 10px;
  border-radius:4px;overflow:hidden;background:var(--bg3)}
.bs-b{background:rgba(14,203,129,.4)} .bs-s{background:rgba(246,70,93,.4)}
.bs-bar em{position:absolute;top:2px;font-size:10.5px;font-weight:800;font-style:normal}
.bs-bar em:first-of-type{left:6px} .bs-bar em:last-of-type{right:6px}
.trades{max-height:220px;overflow-y:auto;padding:0 4px 8px}
.bookwrap .trades{padding:0 4px 6px}
.trow{display:grid;grid-template-columns:1.1fr .9fr .7fr;gap:4px;
  padding:2px 8px;font-size:12px;line-height:17px}
.trow span:nth-child(2){text-align:right;color:var(--ink2)}
.trow .tm{text-align:right;color:var(--ink3);font-size:11px}

.cd{text-align:center;padding:14px;border-radius:var(--r);background:var(--bg3);margin-bottom:14px}
.cd-lbl{font-size:12px;color:var(--ink2);margin-bottom:4px}
.cd-t{font-size:34px;font-weight:800;letter-spacing:-1px}
.cd.lock .cd-t{color:var(--warn)}
.cd-sub{font-size:12px;color:var(--ink3);margin-top:4px}

.sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.side{padding:14px 10px;border-radius:var(--r);border:2px solid var(--line);
  background:var(--bg3);text-align:center;transition:.15s}
.side .n{font-size:17px;font-weight:800}
.side .o{font-size:13px;color:var(--ink2);margin-top:3px;font-weight:700}
.side .p{font-size:11px;color:var(--ink3);margin-top:2px}
.side.up.on{border-color:var(--up);background:rgba(14,203,129,.12)}
.side.up .n{color:var(--up)}
.side.dn.on{border-color:var(--dn);background:rgba(246,70,93,.12)}
.side.dn .n{color:var(--dn)}

.amts{display:flex;gap:6px;margin:10px 0}
.amts button{flex:1;padding:8px;border-radius:8px;background:var(--bg3);
  border:1px solid var(--line);font-size:13px;font-weight:700}
.amts button:hover{border-color:var(--acc)}
.est{background:var(--bg3);border-radius:var(--r);padding:12px;margin:12px 0;font-size:13px}
.est .row{display:flex;justify-content:space-between;padding:3px 0}
.est .row b{font-size:15px}
.big{width:100%;padding:14px;border-radius:var(--r);font-weight:800;font-size:16px;
  background:var(--acc-solid);color:#fff;margin-top:4px}
.big.up{background:var(--up-solid);color:var(--on-up)}
.big.dn{background:var(--dn-solid);color:var(--on-dn)}
.big:disabled{opacity:.4}

.hist{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.hist i{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;
  font-size:10px;font-weight:800;font-style:normal;flex:0 0 auto}
/* 需求68：标注「从左到右 = 从旧到新」，两端各写出是哪一场 */
.trend-axis{display:flex;align-items:center;gap:8px;margin-top:6px;
  font-size:10.5px;color:var(--ink3);white-space:nowrap}
.trend-axis b{color:var(--ink2);font-weight:700}
.trend-axis em{font-style:normal;margin-left:4px;color:var(--ink2)}
.trend-axis > i{flex:1;min-width:12px;height:1px;background:var(--line)}
.hist i.u{background:rgba(14,203,129,.2);color:var(--up)}
.hist i.d{background:rgba(246,70,93,.2);color:var(--dn)}
.hist i.v{background:var(--bg3);color:var(--ink3)}

/* ── 表格 ───────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:10px 12px;color:var(--ink2);font-size:12px;
  font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:hover td{background:var(--bg3)}
.scroll{overflow-x:auto}
.me-row td{background:rgba(77,124,255,.12)!important;font-weight:700}
.rk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--bg3);font-weight:800;font-size:12px}
.rk.g1{background:#c9971b;color:#000}.rk.g2{background:#9aa3b2;color:#000}
.rk.g3{background:#a0672e;color:#fff}

.tabs{display:flex;gap:6px}
.tabs button{padding:6px 14px;border-radius:8px;background:var(--bg3);
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink2)}
.tabs button.on{background:var(--acc-solid);border-color:var(--acc);color:#fff}

/* ── 聊天 ───────────────────────────────── */
.chat{display:flex;flex-direction:column;height:min(560px,68vh)}
.msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{background:var(--bg3);border-radius:10px;padding:8px 11px;max-width:80%}
.msg .who{font-size:11px;color:var(--acc);font-weight:800;margin-bottom:2px}
.msg .tm{font-size:10px;color:var(--ink3);margin-left:6px}
/* 需求123：来源标的小标签。刻意做得比昵称弱、比正文小 ——
   它是"这句话在说哪只"的旁注，不该抢正文的视觉重量。可点，所以给 hover 反馈。 */
.msg .msg-sym{margin-left:6px;padding:1px 6px;border-radius:999px;
  background:rgba(77,124,255,.16);border:1px solid rgba(77,124,255,.32);
  color:var(--ink2);font-size:10px;font-weight:700;line-height:1.6;
  cursor:pointer;vertical-align:1px}
.msg .msg-sym:hover{background:rgba(77,124,255,.3);color:#fff}
/* 交易页里的聊天要点明这是**大类**频道，否则用户看到别的标的会以为串台 */
.chat-scope{padding:6px 11px;font-size:11.5px;color:var(--ink3);
  border-bottom:1px solid var(--line);background:var(--bg2)}
.chat-in{border-top:1px solid var(--line);padding:10px;display:flex;gap:8px;align-items:center}
.chat-in input{min-width:0}
.cool{background:var(--bg3);border-radius:8px;padding:10px 12px;text-align:center;
  color:var(--warn);font-weight:700;font-size:13px;flex:1}

/* ── 杂项 ───────────────────────────────── */
.grid2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat .k{font-size:12px;color:var(--ink2)}
.stat .v{font-size:26px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.empty{padding:44px 20px;text-align:center;color:var(--ink3)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:200;
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:12px 18px;font-weight:700;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.toast.err{border-color:var(--dn);color:var(--dn)}
.toast.ok{border-color:var(--up);color:var(--up)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:150;
  display:grid;place-items:center;padding:16px}
.modal .box{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;width:min(400px,100%)}
.modal h3{margin-bottom:14px;font-size:19px}
.modal input{margin-bottom:10px}
.hint{font-size:12px;color:var(--ink3);margin-top:8px;line-height:1.6}
/* 需求162：提款提示里唯一「错了就找不回」的那一句。压在三级灰里会被当套话读过去，
   所以提到二级文字 + 一条警示色左标；不整段变红 —— 整段红等于没有重点。 */
.hint-warn{display:inline-block;color:var(--ink2);font-weight:700;
  border-left:2px solid var(--warn);padding-left:7px;margin:3px 0}
/* 需求134.2：中文系统合规提示（英文在上、中文在下，必须二选一） */
.cnnotice{z-index:400}                       /* 压在所有弹层之上：这是进站第一句话 */
.cnnotice .box{width:min(520px,100%)}
.cnnotice .cn-en{font-size:13.5px;line-height:1.75;color:var(--ink2)}
.cnnotice .cn-zh{font-size:14px;line-height:1.85;color:var(--ink);margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.cnnotice .cn-acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.cnnotice .cn-acts .btn{flex:1 1 160px;padding:11px 14px;font-size:14px}
@media(max-width:520px){.cnnotice .cn-acts .btn{flex:1 1 100%}}
.badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:800}
.badge.w{background:rgba(14,203,129,.2);color:var(--up)}
.badge.l{background:rgba(246,70,93,.2);color:var(--dn)}
.badge.p{background:var(--bg3);color:var(--ink2)}
.badge.o{background:rgba(237,161,0,.18);color:var(--warn)}
.lnk{color:var(--acc);font-size:inherit;font-weight:600}
.lnk:hover{text-decoration:underline}
.codeline{display:flex;gap:8px;margin-bottom:10px;align-items:stretch}
.codeline input{margin-bottom:0;flex:1;min-width:0}
.codeline .btn{white-space:nowrap;padding:10px 12px;font-size:13px}
/* 图形验证码：SVG 内联渲染，点一下换一张 */
/* 尺寸必须和 captcha.ts 里的 width/height 一致，否则 SVG 被拉伸变形更难认 */
.capimg{flex-shrink:0;width:150px;height:48px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg3);overflow:hidden;display:grid;place-items:center;padding:0}
.capimg:hover{border-color:var(--acc)}
.capimg svg{display:block;width:100%;height:100%}
.cap-load{font-size:11px;color:var(--ink3)}
/* 密码框小眼睛 */
.pwbox{position:relative;margin-bottom:10px}
.pwbox input{padding-right:42px;margin-bottom:0}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;color:var(--ink3);border-radius:6px}
.eye:hover{color:var(--ink);background:var(--bg2)}

/* ── 存证详情弹窗 ── */
.modal .box.wide{width:min(1000px,100%);max-height:90vh;overflow-y:auto;padding:18px}
.ev-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.ev-h h3{display:flex;align-items:center;gap:10px;margin:0}
.ev-sum{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  background:var(--bg3);border-radius:10px;padding:12px;margin-bottom:12px}
.ev-sum>div{display:flex;flex-direction:column;gap:3px}
.ev-sum span{font-size:11px;color:var(--ink3)}
.ev-sum b{font-size:14px;font-weight:700}
.ev-chart{width:100%;height:280px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--surf-sunken)}
.ev-note{font-size:12px;color:var(--ink3);margin:10px 0;line-height:1.8}
.ev-note code{background:var(--bg3);padding:1px 5px;border-radius:4px}
.ev-note .lnk{margin-left:8px}
.ev-raw{background:var(--bg3);border-radius:8px;padding:10px;font-size:11px;
  max-height:200px;overflow:auto;color:var(--ink2);white-space:pre-wrap;word-break:break-all}
.ev-sec{font-weight:800;font-size:14px;margin:16px 0 8px;
  display:flex;align-items:baseline;gap:8px}
.ev-tip{font-size:11px;color:var(--ink3);font-weight:500}
.ev-tbl{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.ev-tbl thead th{position:sticky;top:0;background:var(--bg2);z-index:2}
.post{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:12px}
.post h4{font-size:17px;margin-bottom:6px}
.post .ex{color:var(--ink2);font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── 玩法介绍（需求51/52）──────────────────────────────────
   顶栏入口刻意做轻：三级文字 + 细描边问号，认得出可点，但不与余额/登录抢注意力。
   （--ink3 在顶栏底色上 ~5:1，仍过 AA；不能再往下压。） */
.howto-btn{display:flex;align-items:center;gap:5px;color:var(--ink3);
  font-size:12px;font-weight:600;padding:6px 8px;border-radius:999px;
  white-space:nowrap;transition:.15s}
.howto-btn:hover{color:var(--acc);background:var(--bg3)}
.howto-btn svg{flex-shrink:0}

.modal .box.howto{width:min(480px,100%);max-height:92vh;padding:0;
  display:flex;flex-direction:column;overflow:hidden}
.ht-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.ht-head h3{margin:0;font-size:17px}
.ht-x{width:32px;height:32px;display:grid;place-items:center;color:var(--ink3);
  border-radius:8px;transition:.15s}
.ht-x:hover{color:var(--ink);background:var(--bg3)}
/* 内容区是唯一可滚的部分 —— 底部按钮永远在，不会被文字顶出去 */
.ht-body{padding:16px 18px 6px;overflow-y:auto;flex:1;min-height:0;
  animation:ht-in .22s cubic-bezier(.16,1,.3,1)}
@keyframes ht-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.ht-artbox{background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:10px;margin-bottom:14px}
.ht-art{display:block;width:100%;height:auto}
.ht-t{font-size:16px;font-weight:800;margin-bottom:7px;line-height:1.4}
.ht-p{font-size:13.5px;color:var(--ink2);line-height:1.75;margin:0}
.ht-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px 16px;flex-shrink:0}
.ht-dots{display:flex;gap:7px}
.ht-dots button{width:7px;height:7px;border-radius:99px;background:var(--line);
  transition:.15s}
.ht-dots button:hover{background:var(--ink3)}
.ht-dots button.on{background:var(--acc-solid);width:20px}
.ht-acts{display:flex;gap:8px}
@media(prefers-reduced-motion:reduce){.ht-body{animation:none}}

/* ══════════════════════════════════════════════════════════════════════
   需求78：手机档（<768，与 JS 里的 PHONE_MAX_W 保持一致）
   顶栏那条导航整体挪到屏幕底部（.botnav），顶栏只留 logo + 图标 + 余额/登录。
   ⚠️ 断点必须用 767 而不是 700：布局的手机档是 <768，用 700 会让 701~767
      这一段既没有顶栏导航也没有底栏（实测过的坑，别再改回去）。
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  .nav{display:none}
  .botnav{display:flex}
  /* 需求78-4：跟单入口只在手机出现（桌面顶栏本来就有"跟单"，不重复放两个） */
  /* ⚠️ 这里必须写**完整简写**：下面 max-width:700 那段有 `.wrap{padding:12px}`，
     它在文件里更靠后、特异性相同 —— 只写 padding-bottom 会被它整条盖掉
     （实测现象：滚到底时聊天面板被底栏压住 41px）。 */
  .wrap{padding:12px 12px calc(var(--botnavH,58px) + 12px)}
}

/* ── 移动端顶栏：改两行，导航独占一行可横滑（否则被 logo+登录挤没）── */
@media(max-width:700px){
  /*
   * 手机顶栏压成**一行**：原来导航换行到第二行，整条 96px。
   * 交易页首屏要同时装下 K线/走势/盘口+下单/持仓标题，96px 的顶栏是最大的一块浪费。
   * 导航改成横向可滚 —— 一个入口都没少，只是不再占一整行。
   */
  /* ⚠️ 需求138：这里重写 padding 时**必须把安全区带上**，
     否则手机上又被状态栏/刘海盖住第一行（这条覆盖曾把上面的修复整个吃掉）。 */
  .top-in{flex-wrap:nowrap;gap:8px;padding:calc(6px + var(--safeTop)) 10px 6px;min-width:0}
  .logo{font-size:15px;flex:0 0 auto}
  .top-right{margin-left:auto;flex:0 0 auto;gap:6px}
  /*
   * 需求78：手机端导航整条挪到**屏幕底部**（.botnav），顶栏这条就不要了 ——
   * 两条导航并存等于同一件事占两处，还白吃掉顶栏 36px。
   * 顶栏保留：logo + 玩法介绍 + 通知铃铛 + 返佣小礼物 + 余额/登录（需求78-3）。
   */
  .btn{padding:7px 12px;font-size:13px}
  .bal{padding:6px 10px;font-size:13px}
  .howto-btn{font-size:11px;padding:5px 6px;gap:4px}   /* 手机顶栏寸土寸金 */
  /*
   * 需求138：≤430px 时这一行原来**总宽 412px 也塞不下** —— 余额/登录那颗按钮
   * 被挤出屏幕右侧，用户根本点不到（这正是用户报的"点不了登录"）。
   * 处理顺序按"丢得起"排：先只留玩法介绍的图标（问号本身就认得出来），
   * 再让余额按钮可收缩+省略号，保证**最右边那颗永远在屏幕内**。
   */
  .top-right{min-width:0}
  .bal{min-width:0;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:430px){
  .howto-btn .hb-txt{display:none}
  .howto-btn{padding:6px 7px}
  .loginb .lb-full{display:none}
  .loginb .lb-short{display:inline}
}
/* 360px 以下（老 SE、部分安卓小屏）再收一档间距，仍旧一个入口都不砍 */
@media(max-width:365px){
  .top-in{gap:5px;padding-left:6px;padding-right:6px}
  .top-right{gap:4px}
  .iconbtn{padding:4px}
  .iconbtn svg{width:15px;height:15px}
  .bal{padding:6px 9px;font-size:12.5px;max-width:30vw}
  .logo{font-size:14px}
  .iconbtn{padding:5px 7px}
  .iconbtn svg{width:17px;height:17px}
  .iconbtn.gift b{font-size:11.5px}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card{padding:12px}
  .px{font-size:19px}
  .card-f div{font-size:11px;padding:5px}
  .cd-t{font-size:30px}
  table{font-size:13px}
  th,td{padding:8px 9px}
  .trade-top{flex-wrap:wrap;gap:8px}
  .ticker{gap:12px;padding:10px 12px}
  .tk-px{font-size:20px}
  .tk-stats{gap:14px}
  .tk-stats b{font-size:12px}
  .ohlc{gap:9px;font-size:11px}
  .ind-bar{padding:7px 10px}
  .book-head,.brow,.trow{font-size:11.5px}
  .ev-chart{height:200px}
}
@media(max-width:420px){
  .cards{grid-template-columns:1fr}
}

/* ── 修横向溢出：grid/flex 子项默认 min-width:auto，宽表格会把轨道撑破 ── */
.trade > *{min-width:0}
.panel{min-width:0}
.scroll{max-width:100%}
.est .row{gap:10px}
.est .row span:first-child{flex:1;min-width:0}
@media(max-width:700px){
  .amts{flex-wrap:wrap}
  .amts button{flex:1 1 28%}
  .est{font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   账户中心（需求 11~15）：充提 / 推荐 / 工单 / 资料安全
   ══════════════════════════════════════════════════════════════════════ */

/* ── 余额 + 充值/提款（页面最显眼位置） ── */
/* 需求138：余额卡右上角再放一个**小号**语言按钮 —— 手机顶栏太挤，
   这里是进站后最常来的一屏，换语言不用再去顶栏找那个小地球。 */
.wb-lang{position:absolute;top:10px;right:12px;z-index:2}
.wb-lang .iconbtn.lang{padding:4px 9px;border-radius:999px;background:var(--bg3);
  border:1px solid var(--line)}
.wb-lang .iconbtn.lang svg{width:13px;height:13px}
.wb-lang .lang-cur{display:inline;font-size:11px;max-width:88px}
.walletbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.wb-bal .k{color:var(--ink2);font-size:12px}
.wb-bal .v{font-size:34px;font-weight:800;line-height:1.15;margin:2px 0 4px}
.wb-bal .tiny{color:var(--ink3)}
.wb-acts{display:flex;gap:10px;flex-wrap:wrap}
.wb-acts .big{width:auto;min-width:132px;padding:13px 26px;font-size:15px;font-weight:700}
.wb-acts .dep{background:var(--up-solid);color:#04150d}
.wb-acts .wd{background:var(--bg3);border:1px solid var(--line);color:var(--ink)}
.wb-acts .dep:hover{filter:brightness(1.08)}
.wb-acts .wd:hover{border-color:var(--acc)}

/* ── 弹窗内的分步表单 ── */
.box.wide{max-width:520px}
.steplab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:16px 0 8px;font-size:13px;font-weight:700;color:var(--ink)}
.steplab em{font-style:normal;font-weight:500;font-size:11.5px;color:var(--warn)}
.stepn{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--acc-solid);color:#fff;font-size:11px;font-weight:800}

.pickgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pickgrid.net{grid-template-columns:1fr 1fr}
.pickcard{display:flex;align-items:center;gap:10px;text-align:left;padding:11px 12px;
  background:var(--bg3);border:1.5px solid var(--line);border-radius:10px;position:relative;
  transition:border-color .12s,background .12s}
.pickcard:hover{border-color:var(--line2)}
.pickcard.on{border-color:var(--acc);background:var(--surf-acc)}
.pk-txt{display:flex;flex-direction:column;min-width:0}
.pk-txt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-txt span{font-size:11px;color:var(--ink3)}
.pk-ok{position:absolute;top:7px;right:8px;color:var(--acc)}

.addrbox{display:flex;align-items:center;gap:8px;background:var(--bg3);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.addrbox .addr{flex:1;min-width:0;word-break:break-all;font-size:13px;line-height:1.45}
.addrbox .btn{white-space:nowrap;flex-shrink:0}

.amtrow{display:flex;gap:8px}
.amtrow input{flex:1}
.amtrow .btn{white-space:nowrap}

.matchline{font-size:12px;margin-top:-2px;padding:2px 0}
.matchline.ok{color:var(--up)}
.matchline.bad{color:var(--dn)}

.confirmbox{background:var(--surf-sunken);border:1px dashed var(--line);border-radius:10px;
  padding:12px 14px;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.confirmbox > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.confirmbox span{color:var(--ink3);font-size:12px;flex-shrink:0}
.confirmbox b{font-size:13px;text-align:right;word-break:break-all}
.confirmbox b.tiny{font-size:11px;line-height:1.4}

/* ── 需求53 风控：账户冻结告警（每页常驻，不是一次性弹窗）───────────────
   冻结是**持续状态**，弹窗关掉就没了，用户随时会忘记自己为什么下不了注。
   用危险色但不刺眼：只在左侧一条实边 + 极淡底色，不抢走页面主内容的注意力。 */
.freezebar{background:rgba(246,70,93,.10);border-bottom:1px solid rgba(246,70,93,.35)}
.freezebar-in{max-width:1240px;margin:0 auto;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.freezebar b{color:var(--dn);font-size:14px}
.freezebar p{font-size:12.5px;line-height:1.6;color:var(--ink2);margin:0}
.freezebar .fz-debt{color:var(--warn)}
.freezebar .btn{margin-top:2px}

/* ── 需求53 充值：专属地址 + 二维码 ──────────────────────────────────────
   二维码底色必须是白的（相机对"暗底亮码"识别率明显更差），所以这块白面板是
   功能决定的，不是配色失误 —— 给它明确的容器边界，读起来才像刻意为之。 */
.qrrow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:12px}
.qrcard{background:#fff;border-radius:8px;padding:8px;line-height:0;flex-shrink:0}
.qrcard svg{width:100%;height:100%;display:block}
.qrside{min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.qrlabel{font-size:12px;color:var(--ink3)}
.qraddr{font-size:13px;line-height:1.45;word-break:break-all;color:var(--ink);
  user-select:all}                        /* 点一下即可全选，手机上比长按顺手 */
.qraddr.skel,.qrcard.skel{background:var(--bg2);border-radius:8px;min-height:20px;
  animation:pulse 1.2s ease-in-out infinite}

.notelist{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.notelist li{position:relative;padding-left:14px;font-size:12px;line-height:1.6;color:var(--ink3)}
.notelist li::before{content:'';position:absolute;left:3px;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--ink3)}
.notelist li b{color:var(--ink2);font-weight:700}
.notelist li.warn{color:var(--warn)}
.notelist li.warn::before{background:var(--warn-solid)}

.deplist{display:flex;flex-direction:column;gap:6px}
.deprow{display:flex;align-items:center;gap:10px;background:var(--bg3);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px}
.deprow em{font-style:normal;font-size:11.5px;color:var(--ink3);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deprow .tiny{font-size:11px;flex-shrink:0}
.deprow.skel{animation:pulse 1.2s ease-in-out infinite}

.emptybox{background:var(--bg3);border:1px dashed var(--line);border-radius:10px;
  padding:14px;font-size:12.5px;line-height:1.6;color:var(--ink3)}

.linkbtn{margin-top:14px;font-size:13px;color:var(--acc);padding:6px 0}
.linkbtn:hover{text-decoration:underline}
.manualbox{margin-top:14px;background:var(--bg3);border:1px solid var(--line);
  border-radius:10px;padding:12px}
.rowbtns{display:flex;gap:8px;justify-content:flex-end}

@media (max-width:460px){
  .qrrow{grid-template-columns:1fr;justify-items:center;text-align:center}
  .qrside{align-items:center}
  .deprow em{display:none}          /* 窄屏优先保金额与状态，币种链名让位 */
}

/* ── 推荐 ── */
.progwrap{margin:14px 0 10px}
.progbar{height:8px;background:var(--bg3);border-radius:99px;overflow:hidden;margin-bottom:6px}
.progfill{height:100%;background:linear-gradient(90deg,#f0b90b,#ffd75e);
  border-radius:99px;transition:width .35s}
.refnote{background:var(--tint-lime);border:1px solid var(--tint-lime-line);color:var(--tint-lime-ink);
  border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:10px}

/* ── 工单 ── */
.salesnote{background:var(--surf-acc);border:1px solid var(--surf-acc-line);border-radius:10px;
  padding:11px 13px;font-size:12.5px;line-height:1.7;color:var(--ink2);margin-bottom:12px}
.salesnote b{color:var(--ink)}
.newticket{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.newticket textarea{font:inherit;color:inherit;background:var(--bg3);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;
  outline:none;resize:vertical}
.newticket textarea:focus{border-color:var(--acc)}

/* ── 需求45：工单三分组（未处理 / 正在处理中 / 已处理完成），默认全折叠 ──
   视觉沿用页面既有的「面板 + 一条分隔线」语言，不新造样式体系。 */
.tkgroup{border:1px solid var(--line);border-radius:10px;background:var(--bg3);
  margin-bottom:8px;overflow:hidden}
.tkgroup-h{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:11px 13px;font:inherit;color:inherit;background:none;cursor:pointer;
  transition:background .12s}
.tkgroup-h:hover{background:var(--surf-raise)}
.tkgroup-h:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.tkgroup-h b{font-size:13.5px}
.tkg-caret{color:var(--ink3);font-size:12px;width:10px;flex-shrink:0}
.tkg-hint{margin-left:auto;color:var(--ink3);flex-shrink:0}
.tkgroup.on{background:var(--bg2)}
.tkgroup .tklist{padding:0 10px 10px}
.tkg-empty{padding:16px 10px;font-size:12.5px}

.tklist{display:flex;flex-direction:column;gap:7px}
.tkrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;text-align:left;width:100%}
.tkrow:hover{border-color:var(--acc)}
.tk-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.tk-main b{font-size:13.5px}
.tk-main .tiny{color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.tk-side{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tk-side .tiny{color:var(--ink3)}
.dot-unread{background:var(--dn-solid);color:#fff;border-radius:99px;min-width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;
  font-weight:800;padding:0 5px}

.tkdetail{display:flex;flex-direction:column;gap:10px}
.tk-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tk-head b{font-size:14px}
.tkchat{display:flex;flex-direction:column;gap:10px;max-height:380px;overflow-y:auto;
  background:var(--surf-sunken);border:1px solid var(--line);border-radius:10px;padding:12px}
.tkmsg{max-width:78%;display:flex;flex-direction:column;gap:3px}
.tkmsg.mine{align-self:flex-end;align-items:flex-end}
.tkmsg.them{align-self:flex-start}
.tkm-who{font-size:11px;color:var(--ink3)}
.tkm-body{background:var(--bg3);border-radius:10px;padding:9px 12px;font-size:13.5px;
  line-height:1.6;white-space:pre-wrap;word-break:break-word}
.tkmsg.mine .tkm-body{background:var(--bubble-mine)}
.tkm-meta{color:var(--ink3)}
.tksend{display:flex;gap:8px;align-items:flex-end}
.tksend textarea{flex:1;font:inherit;color:inherit;background:var(--bg3);
  border:1px solid var(--line);border-radius:8px;padding:9px 12px;outline:none;resize:none}
.tksend textarea:focus{border-color:var(--acc)}
.tkclosed{background:var(--surf-dn);border:1px solid var(--surf-dn-line);color:var(--surf-dn-ink);
  border-radius:9px;padding:10px 13px;font-size:12.5px}
.tkacts{display:flex;gap:8px;justify-content:flex-end}

/* ── 资料与安全 ── */
.panel-b.twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel-b.twocol input{margin-bottom:8px}
.panel-b.twocol .btn{width:100%}

/* ── 登录框底部链接 ── */
/* 第三方登录：Google 官方深色规格（#131314 底 / #8E918F 描边 / #E3E3E3 字 + 四色 G 标）。
   品牌按钮不按自己的调色板改色 —— 认得出才是它的价值。 */
.authsep{text-align:center;margin:12px 0;color:var(--ink3);font-size:13px}
.oauth-g{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--gsi-bg);border:1px solid var(--gsi-line);color:var(--gsi-ink);font-weight:600;
  font-size:15px;margin-bottom:10px;transition:.15s}
.oauth-g:hover{background:var(--gsi-hover);border-color:var(--gsi-line)}
.oauth-g svg{flex-shrink:0}
/* Telegram 按钮：与 .oauth-g **逐项同形**（同高、同字号、同圆角、同图标尺寸、同间距），
   只有配色按品牌来 —— 对称感来自形状一致，辨识度来自配色不同。
   （原先用的是 Telegram 官方 iframe 组件，宽度和配色都无法覆盖，永远对不齐。） */
.oauth-tg{display:flex;align-items:center;justify-content:center;gap:10px;
  background:#229ED9;border:1px solid #229ED9;color:#fff;font-weight:600;
  font-size:15px;margin-bottom:10px;transition:.15s}
.oauth-tg:hover{background:#1c8dc4;border-color:#1c8dc4}
.oauth-tg svg{flex-shrink:0}
/* 需求65：完全隐身账户入口 —— 与两个第三方按钮同形（同高/同字号/同圆角），
   配色走自家中性色：它不是品牌按钮，也不该比 Google/Telegram 更抢眼。 */
.oauth-anon{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg3);border:1px solid var(--line);color:var(--ink);font-weight:600;
  font-size:15px;margin-bottom:10px;transition:.15s}
.oauth-anon:hover{border-color:var(--acc)}
.anon-mark{font-size:17px;line-height:1;flex-shrink:0}
.authlinks{display:flex;justify-content:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.authlinks button{color:var(--acc);font-size:13px}

/* ── 需求65：隐身账户的告知与确认 ───────────────────────────────────── */
/* 注册表单里的事前提醒（黄色 = 警告，但不阻断） */
.anon-note{margin:-2px 0 10px;padding:9px 11px;border-radius:9px;font-size:12px;
  line-height:1.65;color:var(--ink2);
  background:rgba(237,161,0,.10);border:1px solid rgba(237,161,0,.32)}
.anon-note b{color:var(--warn)}
/* 注册成功后的强制确认弹窗。
   ⚠️ 必须能自己滚：iPhone SE(667) 这类矮屏上整块内容约 640px，
   不给 max-height 的话「我已保存」勾选框和确认按钮会被挤出视口 = 永远进不去。 */
.modal .box.anonbox{max-width:440px;max-height:calc(100vh - 32px);overflow-y:auto}
.anon-warn{padding:11px 13px;border-radius:10px;margin-bottom:14px;
  background:rgba(246,70,93,.10);border:1px solid rgba(246,70,93,.34)}
.anon-warn > b{display:block;font-size:14px;color:var(--dn);margin-bottom:5px}
.anon-warn p{font-size:12.5px;line-height:1.7;color:var(--ink2)}
.anon-warn p b{color:var(--ink)}
/* 账户名：全场最显眼的一块 —— 用户要照着它抄 */
.anon-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-radius:10px;margin-bottom:12px;
  background:var(--bg3);border:1px solid var(--acc)}
.anon-name > span{font-size:11.5px;color:var(--ink3);width:100%}
.anon-name > b{font-size:22px;font-weight:800;letter-spacing:.5px;
  word-break:break-all;flex:1;min-width:0}
.anon-name .btn{flex:0 0 auto;margin-top:0}
.anon-tips{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;
  font-size:12px;line-height:1.6;color:var(--ink3)}
.anon-tips b{color:var(--ink2)}
.anon-ack{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;
  font-size:12.5px;line-height:1.6;color:var(--ink2);cursor:pointer}
.anon-ack input{width:17px;height:17px;margin:1px 0 0;flex-shrink:0;accent-color:var(--acc)}
.anon-ack b{color:var(--dn)}

@media(max-width:700px){
  .walletbar{flex-direction:column;align-items:stretch;gap:12px}
  .wb-acts{display:grid;grid-template-columns:1fr 1fr}
  .wb-acts .big{min-width:0;width:100%}
  .wb-bal .v{font-size:29px}
  .panel-b.twocol{grid-template-columns:1fr;gap:18px}
  /*
   * 网络卡在窄屏下保持**单列大按钮**：选错网络是资金安全问题，触摸目标要大、说明要看得全。
   * 币种卡则改回两列 —— 需求53 之后 USDT/USDC 打到同一个地址都会被自动识别，
   * 选哪个都不影响到账，没有必要占掉两整行、把二维码挤出首屏。
   */
  .pickgrid.net{grid-template-columns:1fr}
  .tk-main .tiny{max-width:38vw}
  .tkmsg{max-width:88%}
}
.nowrap{white-space:nowrap}

/* ── 需求25：交易记录一屏只显示 5 条，其余下滑查看 ──
   高度 = 表头 + 5 行，数值是实测的（桌面 38.5+5×43，手机 34.5+5×38.2）。
   表头 sticky，所以不能只按行高算 5 行 —— 少算表头会把第 5 行切掉一半。 */
.rows5{max-height:256px;overflow-y:auto;overflow-x:auto}
.rows5 thead th{position:sticky;top:0;z-index:2;background:var(--bg2)}
@media(max-width:700px){.rows5{max-height:228px}}

/* ── 需求27：下注金额校验提示 ── */
.amt-err{color:var(--dn);font-size:12px;margin:-4px 0 8px;line-height:1.5}

/* ── 需求27：下单成功「对勾 + 烟花」（屏幕正中，手机/PC 同款） ── */
.burst{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  pointer-events:none;background:rgba(4,7,13,.42);
  animation:burst-bg .28s ease-out both, burst-bg-out .4s ease-in 1.7s both}
@keyframes burst-bg{from{opacity:0}to{opacity:1}}
@keyframes burst-bg-out{to{opacity:0}}
.burst-core{position:relative;display:grid;place-items:center;
  width:230px;height:230px}
.burst-check{filter:drop-shadow(0 6px 26px rgba(14,203,129,.55))}
.bc-ring{stroke:#0ecb81;stroke-dasharray:145;stroke-dashoffset:145;
  animation:bc-ring .5s cubic-bezier(.2,.8,.3,1) .05s forwards}
.bc-tick{stroke:#0ecb81;stroke-dasharray:44;stroke-dashoffset:44;
  animation:bc-tick .34s cubic-bezier(.2,.8,.3,1) .42s forwards}
@keyframes bc-ring{to{stroke-dashoffset:0}}
@keyframes bc-tick{to{stroke-dashoffset:0}}
/* 烟花粒子：沿 --a 角度飞出 --d 距离，边飞边缩小淡出 */
.spark{position:absolute;width:8px;height:8px;border-radius:50%;opacity:0;
  animation:spark .95s cubic-bezier(.15,.7,.3,1) .38s forwards}
@keyframes spark{
  0%  {opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}
  18% {opacity:1}
  70% {opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.15)}
}
.burst-txt{position:absolute;bottom:-6px;text-align:center;
  animation:burst-txt .4s ease-out .55s both}
.burst-txt b{display:block;font-size:19px;font-weight:800;color:#0ecb81}
.burst-txt span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink2)}
@keyframes burst-txt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 尊重系统「减少动态效果」设置 */
@media(prefers-reduced-motion:reduce){
  .bc-ring,.bc-tick,.spark,.burst-txt,.burst{animation-duration:.01s!important}
  .spark{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   矮屏手机（iPhone SE 667 / 小安卓）：K线的"外壳"要让位给图本身。
   实测 SE 上 指标条43 + OHLC图例60 + 副图 会把主图压到只剩 60px = 没法看。
   这里按视口高度分档把外壳收掉，优先保证三张图**能看清**而不只是"塞得下"。
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️ 这两个比例**必须加起来正好 = 1**（外加 12px 间距已在 calc 里扣掉）。
   之前只把 K线 调到 .63 却忘了同步把盘口行从 .40 调小 → 1.03，溢出 3~4px。 */
/*
 * 矮屏降级：**只调"外壳"（内边距/字号/是否显示副图）**，
 * ⚠️ 绝不在这里写 height —— `.trade.tight .a-chart` 特异性 (0,3,0) 高于
 * 布局块里的 `.a-chart` (0,1,0)，写了高度会把新布局的公式整个盖掉，
 * 造成「K线用旧公式、盘口用新公式」两边对不上（实测踩过一次）。
 */
/*
 * 🔴 需求40：整段降级**只对手机宽度生效**（JS 那边也加了同样的宽度闸，双保险）。
 * 以前这些规则只看实测高度：一台 1366×768 的笔记本（浏览器带书签栏 → 视口 660）
 * 也会命中 xtight，把 MA/BOLL/MACD/RSI 按钮、OHLC 图例、左侧「最后一根是哪一场」
 * 全收掉 —— 用户看到的就是「网页端各项参数按钮都显示不出来」。
 * 这套降级本来就是给 iPhone SE 那种**又窄又矮**的手机准备的，宽屏不缺横向空间。
 */
@media(max-width:767px){
  .trade.tight .ind-bar{padding:4px 8px}
  .trade.tight .ind-bar button{padding:3px 7px;font-size:11px}
  .trade.tight .ohlc{gap:7px;font-size:10px;padding:4px 8px}
  .trade.tight .ohlc .ma-legend{display:none}
  .trade.tight .cur-win{display:none}
  .trade.tight .livebar{transform:scale(.75);transform-origin:top left}
  /* 图很矮时这块浮层会把整张图糊住 —— 直接不显示（信息在面板标题里都有） */
  .trade.xtight .livebar{display:none}
  /* ⚠️ 这里原来还有一条 `.trade.xtight .a-chart .chart-sub{display:none!important}`。
     已按需求39 删除：用户点了副图就必须显示，矮屏改为给它一个更小的高度（见下面 --subOn）。 */
  .trade.xtight .ohlc{display:none}
  /*
   * 最矮的一档（如 iPhone SE）：指标切换条以前是**整条 display:none**。
   * 按需求39 改掉了 —— 这条是**唯一**能开关 MA/BOLL/MACD/RSI 的入口，
   * 藏掉等于在小屏上直接砍掉功能（用户点不到，也就永远看不到副图）。
   * 现在只是压到最扁（34px → 24px），功能一个不少。
   */
  .trade.xtight .ind-bar{padding:2px 8px;gap:4px}
  .trade.xtight .ind-bar button{padding:1px 6px;font-size:10px}
  /* 只把「1m」这两个字让出来 —— 「全屏」按钮必须留着，
     矮屏恰恰是最需要放大看图的那一档 */
  .trade.xtight .ind-tf{display:none}
  .trade.xtight .a-trend .hist{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .trade.xtight .a-trend .hist::-webkit-scrollbar{display:none}
  .trade.xtight .bk-body .brow{min-height:10px;line-height:10px;font-size:9.5px}
  /* SE 这类超矮屏：中间价那行也收掉（价格顶部行情条里已经有了），把空间还给档位 */
  .trade.xtight .bk-body .book-mid{display:none}
}

/* 可折叠面板标题（历史场次） */
.panel-h.foldable{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.panel-h.foldable:hover{background:var(--bg3)}
.foldcaret{color:var(--ink3);font-size:12px}
@media(min-width:1180px){.panel-h.foldable{cursor:default}.panel-h.foldable:hover{background:none}}

/* ══════════════════════════════════════════════════════════════════════
   交易页布局（需求 26 / 28 / 29）
   桌面：  book | chart | bet        ← 三者等高，占满首屏
           book | trend | bet
           pos  | pos   | chat       ← 持仓/历史宽度 = book+chart，聊天 = bet 宽
           hist | hist  | chat
   手机：  chart / trend / (book|bet) / pos…   ← 首屏到「我的持仓」标题为止
   高度全部由 JS 实测的 --tradeH（可用高度）与 --trendH（近期走势自然高度）推导，
   ⚠️ 绝不用 100vh 或视口媒体查询去猜（顶栏会换行、行情条高度会变）。
   ══════════════════════════════════════════════════════════════════════ */
.trade{display:grid;gap:12px;
  grid-template-columns:1fr;
  grid-template-areas:"chart" "trend" "book" "bet" "pos" "hist" "chat";
  /* 需求39：副图开着时要给它腾出的高度。--subOn 各档自己定（手机小一点、桌面大一点），
     没开副图就是 0，布局公式里直接 + var(--subH) 即可，不用写两份公式。 */
  --subH:0px}
.trade:has(.prochart.has-sub){--subH:var(--subOn,110px)}
.a-chart{grid-area:chart} .a-bet{grid-area:bet}  .a-pos{grid-area:pos}
.a-hist{grid-area:hist}   .a-book{grid-area:book} .a-chat{grid-area:chat}
.a-trend{grid-area:trend}

.bookwrap{display:flex;gap:10px;min-height:0;height:100%}
.bk-depth{display:flex;flex-direction:column;min-height:0;flex:1 1 0}
/* 需求28/29：6 档全部固定显示，**不滚动**。行用 flex 均分，把面板填满不留空白 */
.bk-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.bk-body .book-side{flex:1;min-height:0;display:flex;flex-direction:column}
.bk-body .brow{flex:1;min-height:16px;display:grid;align-items:center}
.bk-body .book-mid{flex:0 0 auto}
.bk-body .bs-bar{flex:0 0 auto}

/* ══════════════════════════════════════════════════════════════════════
   ① 手机 + 平板/窄桌面 **共用**的结构管道（只负责「面板填满自己的格子」）
   具体高度公式各档自己写：手机在 ②，平板/窄桌面在 ③，桌面在 ④。
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:1179px){
  /* 盘口与下单并排（需求29-2）：下单更宽 */
  /* 下单列越宽，里面的内容折行越少、面板越矮 → 留给 K线 的空间越多。
     盘口 0.72fr 在 390px 屏上仍有 ~148px，6 档看得清。 */
  .trade{grid-template-columns:0.72fr 1.28fr;
    grid-template-areas:
      "chart chart"
      "trend trend"
      "book  bet"
      "pos   pos"
      "hist  hist"
      "chat  chat"}
  /*
   * 需求144：非数字货币那一格不是盘口而是「市场信息」（整句文案），
   * 挤在 0.72fr 的盘口列里一行只放得下两三个词。这类市场改成：
   * 下单占满整行、市场信息自己单独一整行 —— 文案有地方铺开，
   * 下单面板也顺带变宽（折行更少）。首屏公式不受影响：--betH 仍是下单那一行的高度。
   */
  .trade.no-book{
    grid-template-areas:
      "chart chart"
      "trend trend"
      "bet   bet"
      "book  book"
      "pos   pos"
      "hist  hist"
      "chat  chat"}
  .trade.no-book .a-book{height:auto}
  /* K线面板的 flex 管道：面板→prochart→chart-wrap→chart-main 层层 min-height:0，
     主图吃掉「面板高度 − 指标条 − 图例 − 副图」的剩余。少一层 min-height:0 就会撑破。 */
  .a-chart{min-height:0;display:flex}
  .a-chart > .panel{height:100%;display:flex;flex-direction:column;min-height:0}
  .a-chart .prochart{flex:1;min-height:0;display:flex;flex-direction:column}
  .a-chart .chart-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  .a-chart .chart-main{flex:1;height:auto}
  /* 需求39：副图开着时按固定高度占位（--subOn 各档自己定），主图吃剩下的 */
  .a-chart .chart-sub{flex:0 0 auto;height:var(--subOn,110px)}
  .a-book > .bookwrap,.a-bet > .panel{height:100%}
  .a-bet > .panel{display:flex;flex-direction:column;min-height:0}
  .a-bet .panel-b{flex:1;min-height:0;overflow:visible}   /* 需求34/47：面板自己不滚动 */
  /* 需求29-4：历史场次可折叠（手机默认折叠，平板/桌面默认展开） */
  .a-hist.folded .hist-view{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ② 手机（<768）：首屏要同时装下 K线 + 走势 + (盘口|下单)，底部露出「我的持仓」标题。
      这一档才允许 tight/xtight 逐级收外壳。
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  .trade{--subOn:86px}   /* 手机屏矮，副图给 86px 就够看形状 */
  /*
   * 首屏 = K线 + 近期走势 + (盘口|下单)，**底部要露出「我的持仓」标题**（需求29-3）。
   * 所以可用高度要先扣掉 46px 的持仓标题 + 三处 12px 间距。
   */
  /*
   * 需求34：下单面板按**自然高度** --betH 给格子（不滚动），
   * K线 拿剩下的（保底 150px）。以前是先按比例切给 K线、下单自己滚 —— 用户不接受。
   * 82px = 我的持仓标题(46) + 三处间距(36)，用来保证首屏底部露出持仓标题。
   */
  /*
   * 需求39：公式末尾多加一个 + var(--subH)。
   * 没开副图 --subH = 0 → 与原来完全一致（零回归）；
   * 点开 MACD / RSI 后整块 K线面板长高 86px 把副图装进去，
   * 而**不是**去挤压主图（主图本来就只有 140 多像素，再挤就没了）。
   * 代价：首屏会多出 86px 需要轻微下滑 —— 这是用户明确要的「点了必须显示出来」。
   */
  /* 需求30：手机端 K线 的文字信息要与 PC **完全一致**，不能少。
     只缩字号、允许横向滚动，不做任何隐藏。 */
  /*
   * 🔴 需求67：**K 线优先**，「下单模块必须首屏不滑动全露出」这条让位。
   * 原来的保底只有 150px：机型一矮（或副图/走势稍高一点），公式算出来的余量就掉到
   * 一两百像素，主图画布只剩几十像素 —— 蜡烛全叠在一起，看着就是"一条线"，
   * 而且**不同手机型号高度不同 → 有的正常有的被压扁**，正是用户说的现象。
   * 现在保底抬到 --chartMinH(300px)：可用高度不够时**宁可把下单面板挤到折叠线以下**
   * （手指往下滑一点就能看到下单按钮），也不再压缩 K 线。
   * 空间富余的机型公式仍然生效，行为与以前完全一致（零回归）。
   */
  /* 保底不写死 300px：超矮机型上 300px 会把首屏整个占满。
     取「300px 与首屏 62% 的较小者」—— 高屏拿满 300，矮屏按比例退让，
     两种机型都不会退化成一条线。 */
  .trade{--chartMinH:min(300px, calc(var(--tradeH,560px) * 0.62))}
  .a-chart{height:calc(max(var(--chartMinH), calc(var(--tradeH,560px)
           - var(--trendH,40px) - var(--betH,340px) - 82px)) + var(--subH))}
  /* 保底高度是给**面板**的，画布还要扣掉标题/指标条/图例（约 72px），
     所以主图自身再压一道下限，确保蜡烛永远有得画 */
  .a-chart .chart-main{min-height:150px}
  .a-chart .panel-h{padding:5px 9px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;gap:8px}
  .a-chart .panel-h::-webkit-scrollbar{display:none}
  .a-chart .panel-h b{font-size:12px;white-space:nowrap}
  .a-chart .panel-h > span{font-size:9.5px;white-space:nowrap;flex:0 0 auto}
  .a-chart .cur-win{font-size:9.5px}
  .a-chart .ohlc{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:8px;padding:3px 9px;font-size:9.5px}
  .a-chart .ohlc::-webkit-scrollbar{display:none}
  .a-chart .ohlc > span,.a-chart .ma-legend{flex:0 0 auto;white-space:nowrap}
  .a-chart .ma-legend{display:flex;gap:8px}
  /* ⚠️ 必须 nowrap：基础样式是 flex-wrap:wrap，加了「全屏」按钮之后
     360px 宽的手机上这条会折成两行（34px → 56px），直接从主图身上偷走 22px
     （实测主图从 70px 掉到 44px）。改成**一行横向可滚**，按钮一个不少。 */
  .ind-bar{padding:4px 9px;gap:5px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .ind-bar::-webkit-scrollbar{display:none}
  .ind-left{flex-wrap:nowrap}
  .ind-right{flex:0 0 auto}
  .ind-bar button{padding:3px 7px;font-size:11px;flex:0 0 auto}
  .a-book,.a-bet{height:var(--betH,340px);min-height:0}
  /* 盘口在窄格子里要瘦身，才能把 6+6 档全塞进去且**不滚动** */
  /* 窄列里「盘口深度」+ 精度下拉会换行，占掉 64px（面板才 160~220px）→ 压成一行 */
  .a-book .panel-h{padding:5px 8px;flex-wrap:nowrap;gap:6px}
  .a-book .panel-h b{font-size:12px;white-space:nowrap}
  .a-book .stepsel{padding:1px 3px;font-size:10px;max-width:64px}
  .a-book .book-head{padding:2px 8px;font-size:9px;white-space:nowrap}
  .bk-body .brow{min-height:12px;font-size:10.5px;line-height:12px;padding:0 8px}
  .bk-body .book-mid{padding:2px 8px;margin:1px 0}
  .bk-body .mid-px{font-size:12.5px}
  .bk-body .mid-sp{font-size:9.5px}
  .bk-body .bs-bar{display:none}       /* B/S 比例条：小屏优先让位给档位 */
  /* （面板 flex 管道已提到上面①「共用结构管道」里，这里不再重复） */

  /*
   * 需求34：下单面板要**完整展示不滚动**，同时首屏还得留出 K线 和持仓标题，
   * 所以这里逐项压扁。实测自然高度从 552px 压到 ~360px。
   */
  .a-bet .panel-b{padding:8px;gap:6px;display:flex;flex-direction:column}
  .a-bet .cd{padding:5px 8px;display:grid;grid-template-columns:1fr auto;
    align-items:baseline;gap:2px 8px}
  .a-bet .cd-lbl{font-size:10.5px;grid-column:1}
  .a-bet .cd-t{font-size:21px;grid-column:2;grid-row:1}
  .a-bet .cd-sub{font-size:9.5px;grid-column:1/3}
  .a-bet .sides{gap:6px;margin:0}
  .a-bet .side{padding:5px 4px}
  .a-bet .side .n{font-size:12.5px}
  .a-bet .side .o{font-size:15px}
  .a-bet .side .p{display:none}          /* 池子金额：小屏让位 */
  .a-bet #amt{padding:7px 10px}
  /* 快捷金额：默认 flex-wrap 会在 202px 宽的列里折成两行(57px) → 固定 5 列一行 */
  .a-bet .amts{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:0}
  .a-bet .amts button{padding:4px 2px;font-size:10.5px}
  /* 预估区 4 行原本 122px（每行 30px），压到每行 ~16px */
  .a-bet .est{font-size:10.5px;padding:5px 8px;gap:0}
  .a-bet .est .row{gap:6px;line-height:1.5;padding:1px 0}
  .a-bet .est .row b{font-size:11px}
  .a-bet .cd{padding:4px 8px}
  .a-bet .cd-t{font-size:19px}
  .a-bet .side{padding:4px}
  .a-bet .side .n{font-size:12px}
  .a-bet .side .o{font-size:14px}
  .a-bet .est .row{line-height:1.4}
  .a-bet .panel-b > .big{padding:10px;font-size:14px}
  .a-bet > .panel > .panel-b > .hint{display:none}   /* 长段免责声明占地太大 */
  /* 面板已按自然高度完整展示（需求34），不再需要吸底 */

  /*
   * 近期走势（需求31 → 需求68 修订）
   * 需求31 当初为了省高度，把标题、说明全收掉，方块压到 13px 并用 `font-size:0`
   * 把「涨/跌」两个字压没了 —— 结果手机上只剩一排红绿色块，颜色又是半透明，
   * 用户根本分不清哪个是涨哪个是跌，更看不出哪一头是最新的。
   * 需求68 改回：**文字与色块一起显示**，并保留一行极窄的标题 + 一行左右两端标注。
   * 代价约 34px 高度，由需求67 的「K 线优先」保底高度来兜（K 线不会因此被压扁）。
   */
  .a-trend > .panel{background:none;border:none}
  .a-trend .trend{padding:0}
  .a-trend .trend-h{margin-bottom:3px;gap:6px;flex-wrap:nowrap;overflow:hidden}
  .a-trend .trend-h b{font-size:11.5px;white-space:nowrap}
  .a-trend .trend-h span{font-size:10px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .a-trend .trend .hint{display:none}
  .a-trend .hist{gap:3px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:0}
  .a-trend .hist::-webkit-scrollbar{display:none}
  /* 18px 是实测能把「涨/跌」放清楚的最小方块（10px 字 + 上下 4px） */
  .a-trend .hist i{width:18px;height:18px;min-width:18px;font-size:10px;line-height:18px;
    border-radius:4px}
  .a-trend .trend-axis{margin-top:3px;font-size:9.5px;gap:6px}

  /* 需求32：币种信息不用「块」，直接纯文本两行，去掉边框/背景，尽量矮 */
  .trade-top{align-items:center;gap:8px;margin-bottom:8px}
  .trade-top .btn{padding:5px 10px;font-size:12px;margin-top:0}
  .ticker{display:grid;grid-template-columns:auto auto 1fr;
    grid-template-rows:auto auto;gap:0 8px;padding:0;align-items:center;
    background:none;border:none;border-radius:0}
  /* 第二行让给统计项**整行铺满**：原来它只占右侧两列(~195px)，
     5 个字段挤不下必被裁 —— 这正是用户说的「没有显示完全」 */
  .tk-name{grid-row:1;grid-column:1;gap:6px}
  .tk-name svg{width:20px;height:20px}
  .tk-name .tk-sub{display:none}
  .tk-sym{font-size:12px}
  .tk-px{grid-row:1;font-size:15px;line-height:1.2}
  .tk-usd{display:none}
  .tk-m{grid-row:1;font-size:12px;font-weight:700}
  /* 第二行：高/低/量/额/网络**全部显示完**，不横向滚动、不裁切 */
  .tk-stats{grid-row:2;grid-column:1/4;display:flex;flex-wrap:nowrap;gap:6px;
    overflow:hidden;min-width:0}
  .tk-stats > div{flex:0 1 auto;min-width:0;display:flex;gap:2px;align-items:baseline;
    white-space:nowrap;overflow:hidden}
  .tk-stats span{font-size:8.5px;color:var(--ink3);flex:0 0 auto}
  .tk-stats b{font-size:9.5px;overflow:hidden;text-overflow:ellipsis}
  .tk-stats > div:first-child{display:none}      /* 涨跌已在第一行 */
  .lb-l{display:none}                             /* 长标签：手机隐藏 */
  .lb-s{font-style:normal}

  /* （历史场次折叠规则已提到上面①「共用结构管道」） */
  /* 行内 height:320 已移到这里，手机端要放大到能装 6 条 */
  .a-chat .chat.compact{height:auto}
  /* 需求29-4：手机端聊天一次显示 6 条，再多要滑动。
     实测：单条 57px、间距 8px、容器上下内边距各 12px
     → 6×57 + 5×8 + 24 = 406px。
     ⚠️ 消息很长会换行、可见条数自然变少 —— 这是内容决定的，
     固定高度无法同时保证「正好 6 条」和「不裁字」，优先不裁字。 */
  .a-chat .msgs{max-height:406px}
}

/* ══════════════════════════════════════════════════════════════════════
   ③ 平板 / **被缩窄的桌面窗口**（768 ~ 1179）—— 需求41
   ----------------------------------------------------------------------
   以前只有 1180 一个断点：窗口宽度一掉到 1179，整页立刻套用**手机**那套
   「首屏必须装下一切」的公式：
       K线高度 = 可用高度 − 走势 − 下单面板自然高度 − 82
   在一个 800×900 的窗口上，下单面板自然高度就有 377px，
   于是 K线 只剩 158px 画布 —— 用户看到的就是「K线被压成一条直线」。
   窄 ≠ 矮。这一档窗口**竖直方向很宽裕**，根本不需要为首屏牺牲图表：
   图表按可用高度的固定比例拿一个体面的高度（有上下限兜底），
   盘口/下单按自然高度排在下面，页面正常滚动。
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1179px){
  /*
   * 版式 = 桌面少一栏：左边主列（图表→走势→盘口），右边固定 320px 的下单栏。
   * 为什么不沿用手机那套「图表整行 + 盘口|下单并排在下面」：
   * 那样一旦把图表调到该有的高度，下单模块就被推到 1300px 开外，
   * 用户每次下注都得先滚半页 —— 窄窗口不等于要按手机的方式用。
   */
  .trade{grid-template-columns:minmax(0,1fr) 320px;
    grid-template-areas:
      "chart bet"
      "trend bet"
      "book  bet"
      "pos   pos"
      "hist  hist"
      "chat  chat";
    --subOn:90px}
  /*
   * 窄栏里「面板标题 + 数据源说明」「OHLC 图例」会折成两三行，
   * 一口气吃掉 140px（相当于半张图）。改成**一行横向可滚**：
   * 一个字都不少（需求30 的口径），但不再从主图身上抢高度。
   */
  .a-chart .panel-h{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px}
  .a-chart .panel-h::-webkit-scrollbar{display:none}
  .a-chart .panel-h b,.a-chart .panel-h > span{white-space:nowrap;flex:0 0 auto}
  .a-chart .ohlc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .a-chart .ohlc::-webkit-scrollbar{display:none}
  .a-chart .ohlc > span,.a-chart .ma-legend{flex:0 0 auto;white-space:nowrap}
  /*
   * 图表高度 = 可用高度的 58%（副图开着再加 --subH），下限 340 / 上限 560。
   * 下限保证再矮的窗口也不会退化成一条线（这就是需求41 的核心）；
   * 上限避免很高的窗口上图表把盘口整个顶出首屏。
   */
  .a-chart{height:calc(clamp(340px, calc(var(--tradeH,700px) * 0.58), 560px)
           + var(--subH))}
  .a-chart .chart-main{min-height:180px}
  /* 下单栏按自然高度贴顶 —— 跨三行但不拉伸，免得下面留一大块空白 */
  .a-bet{align-self:start}
  .a-bet > .panel{height:auto}
  .a-book{min-height:0}
  /* 档位行在这一档有的是空间，恢复到看得清的行高 */
  .bk-body .brow{min-height:22px;line-height:22px;font-size:12px}
}

/* 平板与桌面：行情条用完整标签，隐藏手机版的精简涨跌与短标签。
   ⚠️ 这里从 1180 放宽到 768 —— 手机版那套两行压缩布局只属于 <768 那一档了。 */
@media(min-width:768px){
  .tk-m{display:none}
  .lb-l{display:inline;font-style:normal}
  .lb-s{display:none}
}

/* ── 桌面 ─────────────────────────────────────────────────────── */
@media(min-width:1180px){
  .trade{grid-template-columns:290px minmax(0,1fr) 340px;
    grid-template-areas:
      "book chart bet"
      "book trend bet"
      "pos  pos   chat"
      "hist hist  chat";
    /*
     * 两行都给**显式高度**。之前是 auto —— 下单面板内容一高（1280×800 上 655px），
     * 就把整行撑大，book/bet 变 655 而 .a-chart 还是算出来的 474，三者不再等高且首屏溢出。
     * ⚠️ 第二行也必须显式给 --trendH：只固定第一行的话，下单面板多出来的内容
     *    会被塞进 auto 的第二行 → 走势被撑高 → --trendH 变大 → 第一行更矮 →
     *    又有更多内容挤进第二行…… 实测直接死循环到 K线 高度 = 0。
     */
    /*
     * 🔴 需求47：第一行高度 = max(窗口可用高度, 下单面板完整展示所需高度 --betNatH)。
     * 以前只有前半截：窗口一矮（1366×768 的笔记本可用高度只有 464px，
     * 而下单面板内容有 653px），面板放不下就靠 `.panel-b{overflow-y:auto}` 内部滚动，
     * **下单按钮直接被挡在看不见的地方**，用户必须在面板里下滑才能下单。
     * 现在改成：装不下就让第一行长高（顶多整页滚一点），
     * 面板本身**永远不滚动**（见下面 overflow:visible）—— 按钮任何时候都露在外面。
     * 副作用是 K线 也跟着变高，正好也把「窄窗口图表被压扁」一起改善了。
     */
    grid-template-rows:max(calc(var(--tradeH,600px) - var(--trendH,150px) - 12px),
                           var(--betNatH,320px))
                       var(--trendH,150px) auto auto;
    align-content:start}
  .a-chart{min-height:0;display:flex;overflow:hidden}
  .a-trend{min-height:0;overflow:hidden}
  .a-bet,.a-book{overflow:hidden}
  .a-chart > .panel{flex:1;display:flex;flex-direction:column;min-height:0}
  .a-chart .prochart{flex:1;display:flex;flex-direction:column;min-height:0}
  .a-chart .chart-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  .a-chart .chart-main{flex:1;min-height:180px;height:auto}
  .a-chart .chart-sub{height:22%;min-height:70px;max-height:150px}
  .a-book,.a-bet{min-height:0}
  .a-bet > .panel{height:100%;display:flex;flex-direction:column;min-height:0}
  /* 需求47：面板内部**绝不滚动**（行高已由上面的 max() 保证装得下） */
  .a-bet .panel-b{flex:1;min-height:0;overflow:visible}
  /*
   * 需求47 配套：桌面端下单面板做一轮**温和压缩**（只动内边距/字号/行高，
   * 不隐藏任何一项信息），自然高度从实测 653px 降到 ~540px。
   * 这样 1280×720 / 1366×768 这类常见笔记本窗口，整块下单模块（含按钮和免责声明）
   * 一屏就能看完，不需要滚动；再矮的窗口才靠上面的 max() 让整页滚一点。
   */
  .a-bet .panel-b{padding:13px}
  .a-bet .cd{padding:9px 12px;margin-bottom:10px;
    display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px}
  .a-bet .cd-lbl{grid-column:1;margin-bottom:0}
  .a-bet .cd-t{grid-column:2;grid-row:1;font-size:30px}
  .a-bet .cd-sub{grid-column:1/3;margin-top:2px}
  .a-bet .sides{margin-bottom:10px;gap:8px}
  .a-bet .side{padding:10px 8px}
  .a-bet .amts{margin:8px 0}
  .a-bet .est{padding:10px 12px;margin:10px 0}
  .a-bet .est .row{padding:2px 0}
  .a-bet .panel-b > .hint{margin-top:10px;line-height:1.55}
  .bookwrap{flex-direction:column}
  /* 聊天高度 = 持仓 + 历史（跨两行），内部自己滚。
     ⚠️ 必须 overflow:hidden —— 否则消息一多，聊天的 min-content 会把
     第 3/4 行撑高（实测 13 条消息就把面板顶到 1131px），持仓/历史跟着变形。 */
  /*
   * 聊天绝对定位撑满自己的格子。
   * 只写 overflow:hidden 不够 —— auto 行会按子项的 **max-content** 撑大，
   * 消息一多就把第 3/4 行顶高（实测 15 条 → 991px），持仓/历史跟着变形。
   * 绝对定位的子元素完全不参与父级尺寸计算，行高就只由持仓+历史决定。
   */
  .a-chat{min-height:0;position:relative}
  .a-chat > .panel{position:absolute;inset:0}
  .a-chat > .panel{height:100%;display:flex;flex-direction:column;min-height:0}
  .a-chat .chat{height:100%!important;display:flex;flex-direction:column;min-height:0}
  .a-chat .msgs{flex:1;min-height:0;overflow-y:auto}
}

/* 聊天紧凑模式（嵌在交易页里）的默认高度；桌面被布局块的 height:100% 覆盖 */
.chat.compact{height:320px}

/* ══════════════════════════════════════════════════════════════════════
   全屏看图 + 全屏交易弹窗（手机 / 窄屏）
   ----------------------------------------------------------------------
   动机：手机首屏要同时装下 K线 / 走势 / 盘口 / 下单 / 持仓标题，
   分给图表的只有一百多像素，蜡烛根本看不清。与其在首屏里互相抢地盘，
   不如给一个「专门看图」的地方 —— 首屏布局一个像素都不用改。
   ══════════════════════════════════════════════════════════════════════ */
/* 指标条右侧的全屏入口。桌面图本来就大，只在 <1180 显示。 */
.fullbtn{display:none;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;
  background:var(--bg3);border:1px solid var(--line);color:var(--ink2);
  font-size:11px;font-weight:700;line-height:1}
.fullbtn:hover{border-color:var(--acc);color:var(--ink)}
.ind-right{display:flex;align-items:center;gap:8px}
@media(max-width:1179px){.fullbtn{display:inline-flex}}

.fullchart,.betsheet{position:fixed;inset:0;z-index:140;background:var(--bg);
  display:flex;flex-direction:column;min-height:0;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.fc-hidden{display:none}   /* 交易弹窗打开时，把底下的全屏看图整层藏起来 */

/* 顶部信息条：币种 / 本场时间窗 / 数据源 */
.fc-head{display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.fc-sym{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.fc-win{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink2);
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:3px 9px;white-space:nowrap}
.fc-src{font-size:11px;color:var(--ink3);white-space:nowrap}
@media(max-width:520px){.fc-src{display:none}}

/* 图表占满剩余高度；底栏是 fixed 的，所以这里要自己留出等高的空档 */
/* ⚠️ 这个留白必须 ≥ 底栏实际高度（10+46+10 内边距 + 1px 上边框 = 67px）。
   原来写 66px 差 1px，需求69 把走势条挂到最底下之后，那 1px 就变成
   「最后一行标注被底栏压住」——图表时代看不出来，一加内容就露馅。取 72px 留余量。 */
.fc-body{flex:1;min-height:0;display:flex;flex-direction:column;
  padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.fc-body .prochart{flex:1;min-height:0;display:flex;flex-direction:column}
.fc-body .chart-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.fc-body .chart-main{flex:1;min-height:120px;height:auto}
.fc-body .chart-sub{flex:0 0 auto;height:132px}
/* 全屏就是为了「看全」：这里**不做任何降级**，
   指标条、OHLC 图例、左侧竖标一律用正常尺寸显示 */
.fc-body .ind-bar{padding:8px 12px;flex-wrap:wrap}
.fc-body .ind-bar button{padding:5px 11px;font-size:12px}
.fc-body .ohlc{display:flex;flex-wrap:wrap;gap:12px;padding:7px 12px;font-size:11.5px}
.fc-body .ma-legend{display:flex;gap:10px;flex-wrap:wrap}
.fc-body .livebar{display:flex;transform:none}
/* 需求69：全屏看图底部挂一条「历史涨跌场次」。
   flex:0 0 auto —— 只占自然高度，剩下全给 K 线（图仍然是全屏的主角）。
   横向可滚：30 场 × 22px 在 360px 宽的手机上放不下，但**一个字都不砍**。 */
.fc-trend{flex:0 0 auto;border-top:1px solid var(--line);background:var(--bg2);
  padding:7px 12px 9px}
.fc-trend .trend{padding:0;border-top:none}
.fc-trend .trend-h{margin-bottom:4px}
.fc-trend .trend-h b{font-size:12px}
.fc-trend .trend-h span{font-size:10.5px}
.fc-trend .trend .hint{display:none}       /* 免责声明在交易页已有，全屏只留数据 */
.fc-trend .hist{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:3px;margin-top:0}
.fc-trend .hist::-webkit-scrollbar{display:none}
.fc-trend .hist i{width:20px;height:20px;min-width:20px;font-size:10px;border-radius:4px}
.fc-trend .trend-axis{margin-top:4px;font-size:10px}

/* ── 底部操作栏：固定在视口底，不随页面滚动 ── */
.fc-bar{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;gap:10px;
  align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--surf-top);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
/* 返回：次要动作，窄、低调 */
.fc-back{flex:1 1 0;min-height:46px;border-radius:10px;background:var(--bg3);
  border:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:700}
.fc-back:hover{border-color:var(--line2)}
/* 交易：主动作 —— 明显更宽更大 + 白色边框，一眼就找得到 */
.fc-trade{flex:2.2 1 0;min-height:46px;border-radius:10px;
  background:var(--fct-bg);border:2px solid var(--fct-line);color:var(--fct-ink);
  font-size:17px;font-weight:800;letter-spacing:.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 20px rgba(0,0,0,.45)}
.fc-trade:hover{background:var(--fct-hover)}
.fc-trade:active{transform:scale(.985)}

/* ── 全屏交易弹窗：上图 / 中表单（可滚）/ 下按钮（固定） ── */
.betsheet{z-index:150}
.bs-back{flex-shrink:0;padding:6px 12px;min-height:34px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--line);color:var(--ink);
  font-size:13.5px;font-weight:700}
.bs-back:hover{border-color:var(--acc)}
.betsheet .fc-sym{margin-left:4px}
/* 图表：给一块固定比例的高度，剩下全留给交易模块 */
/* 弹窗里的图是「下注时瞄一眼」用的参考，要看细节点返回进全屏图。
   27vh 是实测出来的：再高一点，360×800 的手机上「预估回款」那块就会掉到折线下面。 */
.bs-chart{flex:0 0 auto;height:clamp(170px,27vh,290px);
  border-bottom:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.bs-chart .prochart{flex:1;min-height:0;display:flex;flex-direction:column}
.bs-chart .chart-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.bs-chart .chart-main{flex:1;min-height:100px;height:auto}
.bs-chart .ind-bar{padding:5px 10px}
.bs-chart .ind-bar button{padding:3px 8px;font-size:11px}
.bs-chart .ohlc{padding:4px 10px;font-size:10.5px;gap:8px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.bs-chart .ohlc::-webkit-scrollbar{display:none}
.bs-chart .ohlc > span,.bs-chart .ma-legend{flex:0 0 auto;white-space:nowrap}
/* 表单区：内容多就自己滚，**下注按钮永远在下面那条里，不参与滚动** */
.bs-form{flex:1;min-height:0;overflow-y:auto;padding:12px 14px}
/* 倒计时压成「标签左 / 数字右」两列（同手机端下注面板的做法），省下约 58px */
.bs-form .cd{margin-bottom:10px;padding:8px 12px;
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px}
.bs-form .cd-lbl{grid-column:1;margin-bottom:0}
.bs-form .cd-t{grid-column:2;grid-row:1;font-size:28px}
.bs-form .cd-sub{grid-column:1/3;margin-top:2px}
/* 快捷金额 5 个一行 —— 默认 flex-wrap 在 360px 宽下会折成 3+2 两行，白吃 45px */
.bs-form .amts{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:8px 0}
.bs-form .amts button{padding:7px 2px;font-size:12px}
.bs-form .sides{margin-bottom:10px}
.bs-form .side{padding:10px 8px}
.bs-form .est{margin:10px 0;padding:9px 12px}
.bs-form .est .row{padding:2px 0}
.bs-form .hint{margin-top:10px}
.bs-act{flex:0 0 auto;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--bg2)}
.bs-act .big{margin-top:0;min-height:50px;font-size:17px}

/* 需求33：持仓折叠 + 「展开已结算」按钮 */
.a-pos.folded .pos-view,.a-pos.folded .posmore{display:none}
.posmore{width:100%;padding:8px;text-align:center;font-size:12.5px;color:var(--acc);
  border-top:1px solid var(--line);background:none}
.posmore:hover{background:var(--bg3)}
@media(min-width:1180px){.a-pos .panel-h.foldable{cursor:default}}

/* ── 需求56：用钱包直接转账 ─────────────────────────────────────────── */
.wdep{margin-top:4px}
.wdep-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.wdep-row span{color:var(--ink3);font-size:12px}
.wdep-row em{font-style:normal;color:var(--ink3)}
.wdep .amtrow{margin-top:10px}
.wdep .big{margin-top:10px}
.wdep-ok{margin-top:10px;padding:10px 12px;border-radius:8px;
  background:rgba(14,203,129,.12);border:1px solid rgba(14,203,129,.3);font-size:12.5px}
.wdep-ok .tiny{color:var(--ink3);margin-top:4px}

/* 需求56：钱包选择器（EIP-6963 发现到的每个钱包一行） */
.wpick{display:flex;flex-direction:column;gap:8px}
.wpick-b{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.wpick-b:hover:not(:disabled){border-color:var(--acc)}
.wpick-b:disabled{opacity:.5;cursor:not-allowed}
.wpick-b img{border-radius:6px;flex-shrink:0}
.wpick-b b{font-size:14px}
.wpick-b em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ink3)}
.wpick-dot{width:22px;height:22px;border-radius:6px;background:var(--acc-solid);flex-shrink:0}
.wname{color:var(--ink3);font-weight:600;margin-right:6px}

/* ── 需求58：充值方式二选一 ─────────────────────────────────────────── */
.modepick{display:flex;flex-direction:column;gap:10px}
.modeb{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
  background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:15px 16px;
  transition:border-color .15s,background .15s}
.modeb:hover{border-color:var(--acc);background:var(--surf-raise)}
.modeb-t{font-size:15px;font-weight:800}
.modeb-s{font-size:12px;line-height:1.6;color:var(--ink3)}

/* 返回上一步：放在标题左侧，不抢标题的位置 */
h3 .backb{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-right:8px;border-radius:7px;
  background:var(--bg3);border:1px solid var(--line);color:var(--ink2);vertical-align:-5px}
h3 .backb:hover{border-color:var(--acc);color:var(--ink)}

/* 需求59：充值无上限（两条路共用同一段文案） */
.capnote{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:11px 13px;
  border-radius:10px;background:rgba(14,203,129,.10);border:1px solid rgba(14,203,129,.28)}
.capnote b{font-size:13px;color:var(--up)}
.capnote span{font-size:12px;color:var(--ink2)}

/* 需求61：到账时效（两条充值路径共用同一个组件，所以样式也只有这一处） */
.creditnote{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:11px 13px;
  border-radius:10px;background:rgba(77,124,255,.10);border:1px solid rgba(77,124,255,.30)}
.creditnote b{font-size:13px;color:var(--acc)}
.creditnote span{font-size:12px;color:var(--ink2);line-height:1.6}
.creditnote .sub{font-size:11.5px;color:var(--ink3)}

/* 需求60：币种/网络分两步 —— 选定后收成一行，把版面让给下一步 */
.pickdone{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;
  background:var(--surf-acc);border:1px solid var(--acc)}
.pickdone b{font-size:14px}
.pickdone em{font-style:normal;font-size:12px;color:var(--ink3)}
.steplab .linkbtn.inline{margin-top:0;margin-left:auto;font-size:12px;padding:0}

/* 钱包清单：未安装的压暗但仍可点（点了给安装引导） */
.wpick-b.off{opacity:.62}
.wpick-b.off:hover{opacity:1;border-color:var(--warn)}
.wpick-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.wpick-txt .wnote{font-style:normal;font-size:11px;color:var(--warn);line-height:1.4}
.wmono{width:26px;height:26px;border-radius:7px;flex-shrink:0;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.installbox{margin-top:10px;padding:13px 14px;border-radius:10px;
  background:rgba(237,161,0,.10);border:1px solid rgba(237,161,0,.32)}
.installbox b{font-size:13.5px;color:var(--warn)}
.installbox p{font-size:12px;line-height:1.6;color:var(--ink2);margin:6px 0}
.installbox .btn{margin-top:4px;display:inline-block}
.installbox .tiny{color:var(--ink3)}
.emptybox.warnbox{background:rgba(237,161,0,.10);border-color:rgba(237,161,0,.32);
  border-style:solid}
.emptybox.warnbox b{color:var(--warn);font-size:13.5px}
.emptybox.warnbox p{margin-top:6px;color:var(--ink2)}
.emptybox.warnbox .tiny{color:var(--ink3);font-size:11.5px}

/* ══════════════════════════════════════════════════════════════
   需求81/82：多市场（美股/港股/ETF/全球指数/A股/外汇/黄金/石油/天然气）
   ══════════════════════════════════════════════════════════════ */

/* ── 分类导航（需求84）──────────────────────────────
   同一份 DOM 两种形态：
     ≥768px  左侧竖排，跟随页面滚动（sticky），右侧是该类的标的卡片
     <768px  吸附在顶栏下方的横条，可左右滑；两端渐隐 + 箭头，提示还有被挡住的分类
   ------------------------------------------------ */
.mkt{display:grid;gap:16px;
  /* ⚠️ 必须显式给一列 minmax(0,1fr)：不写的话 grid 的自动列 = 内容最大宽度，
     手机端 13 个分类横排就把整页撑到 1400px 宽（页面出现横向滚动）。 */
  grid-template-columns:minmax(0,1fr)}
.mkt-title{margin:4px 0 12px;font-size:20px}
.mkt-body{min-width:0}

.rail-track{display:flex;gap:6px;min-width:0}
.rail-item{display:flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink2);background:var(--bg2);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  transition:background .15s,border-color .15s,color .15s}
.rail-item:hover{color:var(--ink);border-color:var(--acc)}
.rail-item.on{background:var(--acc-solid);border-color:var(--acc);color:#fff}
.rail-item i{font-style:normal;font-size:11px;font-weight:700;opacity:.65;
  font-variant-numeric:tabular-nums}
.rail-lb,.rail-lb-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-lb-s{display:none}
.rail-nudge{display:none}

/* ── PC：左侧竖排 ── */
@media(min-width:768px){
  .mkt{grid-template-columns:210px minmax(0,1fr);gap:20px;align-items:start}
  .mkt-rail{position:sticky;top:calc(var(--topH,56px) + 12px)}
  .rail-track{flex-direction:column;gap:3px}
  .rail-item{width:100%;justify-content:space-between;border-color:transparent;
    background:transparent;border-radius:9px;padding:9px 11px;text-align:left}
  .rail-item:hover{background:var(--bg2);border-color:transparent}
  .rail-item.on{background:var(--bg2);border-color:transparent;color:var(--ink)}
  /* 选中态用左侧一道强调色竖条，比整块反白更安静，也不会在长列表里跳来跳去 */
  .rail-item.on{box-shadow:inset 3px 0 0 var(--acc)}
  .rail-item.on i{opacity:.8;color:var(--acc)}
}
@media(min-width:1180px){ .mkt{grid-template-columns:228px minmax(0,1fr)} }

/* ── 手机：吸顶横条 ── */
@media(max-width:767px){
  .mkt-title{display:none}                 /* 分类条要顶在第一屏最上面（需求84-2）*/
  /* 通栏铺满：用 100vw + 居中平移，而不是 margin:0 -16px ——
     手机端 .wrap 的内边距是 12px 不是 16px，写死负边距会左右各多出 4px，
     整页因此出现 4px 横向滚动（已实测）。这个写法与父级内边距无关，永远贴边。 */
  .mkt-rail{position:sticky;top:var(--topH,52px);z-index:40;
    width:100vw;margin-left:50%;transform:translateX(-50%);margin-bottom:2px;
    padding:8px 0 7px;background:var(--bg);border-bottom:1px solid var(--line)}
  .rail-track{overflow-x:auto;padding:0 12px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-padding:0 34px}
  /* 出现翻页箭头时给轨道留出位置：否则最边上那个分类会被箭头压住，只露出半个字 */
  .mkt-rail.more-l .rail-track{padding-left:36px}
  .mkt-rail.more-r .rail-track{padding-right:36px}
  .rail-track::-webkit-scrollbar{display:none}
  .rail-item{padding:7px 11px;font-size:12.5px}
  .rail-lb{display:none}
  .rail-lb-s{display:inline}
  /* 右端渐隐 = "右边还有"。用 mask 而不是盖一层渐变色块：
     色块要和背景色永远对齐，主题一变就露馅；mask 直接把像素淡掉，永远对得上。 */
  .mkt-rail.more-r .rail-track{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);
    mask-image:linear-gradient(to right,#000 82%,transparent)}
  .mkt-rail.more-l .rail-track{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%);
    mask-image:linear-gradient(to right,transparent,#000 12%)}
  .mkt-rail.more-l.more-r .rail-track{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 82%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 12%,#000 82%,transparent)}
  /* 渐隐只是提示，还得能按：右下角一个小箭头，点一下翻一屏 */
  .rail-nudge{display:none;position:absolute;top:50%;transform:translateY(-50%);
    width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
    background:var(--bg2);color:var(--ink2);font-size:15px;line-height:1;
    align-items:center;justify-content:center;padding:0;cursor:pointer}
  .mkt-rail.more-r .rail-nudge.r{display:flex;right:4px}
  .mkt-rail.more-l .rail-nudge.l{display:flex;left:4px}
}
.mkt-desc{font-size:12px;color:var(--ink3);line-height:1.6;margin:0 0 12px}

/* 休市的卡片压暗一点，但仍可点进去看图（行情/历史照常显示） */
.card.closed{opacity:.72}
.card.closed:hover{opacity:1}
.card-closed{margin-top:12px;text-align:center;font-size:11.5px;color:var(--ink3);
  background:var(--bg3);border-radius:8px;padding:6px}
/* 卡片标题：代码在上、名称在下，名称过长直接省略（卡片宽度是固定网格） */
.sym-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.sym-txt b{font-weight:800;font-size:15px;line-height:1.15}
.sym-txt .q{font-style:normal;color:var(--ink3);font-weight:500;font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:126px}

/* 非数字货币没有逐笔盘口，那一格改放市场信息 */
.mkt-info .panel-b{display:flex;flex-direction:column;gap:9px;
  /* 桌面 .a-book 是 290px 定宽且 overflow:hidden —— 内容一长会被裁掉，
     这里自己滚，信息不会消失（需求144） */
  overflow-y:auto;min-height:0}
/*
 * 需求144：这一行原来是「标签固定宽 + 值挤剩下」的一行式布局。
 * 中文标签只有 3~4 个字还看得过去，换成英文（Data source / Trading hours）
 * 标签就吃掉大半宽度，「Yahoo Finance」「Mon–Fri 09:30–16:00 ET」这种值
 * 被压成一行两三个字母、断得七零八落，和左边标签也对不齐。
 * 改法：允许换行 —— 值有 min-width 兜底，标签+值在 290px 里放不下时
 * 值整体掉到下一行、独占整行显示，不再逐字母折行。
 */
.mi-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:2px 10px;font-size:12.5px}
.mi-row span{color:var(--ink3);flex:0 0 auto;white-space:nowrap}
.mi-row b{font-weight:700;text-align:right;flex:1 1 auto;min-width:10em;
  overflow-wrap:anywhere;line-height:1.45}
.mi-note{margin-top:2px;padding:9px 10px;border-radius:8px;background:var(--bg3);
  font-size:11.5px;line-height:1.6;color:var(--ink2)}
.mi-live{font-size:11px;padding:3px 8px;border-radius:999px;font-weight:700}
.mi-live.on{background:rgba(46,190,120,.14);color:var(--up)}
.mi-live.off{background:var(--bg3);color:var(--ink3)}

@media (max-width:767px){
  .mkt-desc{margin-bottom:10px}
  .sym-txt .q{max-width:96px}
}

/* ═══════════════ 需求95：铃铛未读角标 + 消息中心 ═══════════════ */
.iconbtn{position:relative}
/* 角标压在铃铛右上角。用数字不用小红点：用户能判断值不值得现在点开 */
.dotbadge{position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:#f6465d;color:#fff;font-size:10px;font-weight:800;
  font-style:normal;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--bg1)}
.secttl{font-size:14px;font-weight:700;color:var(--ink2);margin:0 0 10px}
.post.msg .msgh{display:flex;align-items:center;gap:6px;margin-bottom:6px}
/* 未读用左侧色条标出来 —— 不改背景色，避免整屏花掉 */
.post.msg.unread{box-shadow:inset 3px 0 0 var(--acc)}

/* ═══════════════ 需求101：全站维护通知横幅（PC + 手机同一套）═══════════════
   固定在屏幕最顶端，压在导航条之上；页面整体下移 --noticeH（由 JS 实测写入，
   见 SiteNotice —— 横幅内容长度不定，猜一个固定高度必然在某个屏宽下压住导航）。 */
body{padding-top:var(--noticeH,0px)}
.top{top:var(--noticeH,0px)}                 /* sticky 的导航条要落在横幅下沿 */
.sitenotice{position:fixed;top:0;left:0;right:0;z-index:120;
  background:linear-gradient(90deg,var(--surf-acc2),var(--surf-acc));border-bottom:1px solid var(--acc)}
.sitenotice.warn{background:linear-gradient(90deg,var(--surf-warn2),var(--surf-warn));border-bottom-color:var(--warn)}
.sitenotice.critical{background:linear-gradient(90deg,var(--surf-dn2),var(--surf-dn));border-bottom-color:var(--dn)}
.sn-in{max-width:1440px;margin:0 auto;padding:calc(9px + env(safe-area-inset-top,0px)) 14px 9px;
  display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.5}
.sn-ico{flex:0 0 auto}
/* 标题过长时截断，完整内容在「查看详情」里 —— 横幅绝不允许长到把半屏吃掉 */
.sn-txt{flex:1;min-width:0;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sn-more{flex:0 0 auto;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.12);color:var(--ink);white-space:nowrap}
.sn-more:hover{background:rgba(255,255,255,.2)}
.sn-x{flex:0 0 auto;width:26px;height:26px;border-radius:8px;color:var(--ink2);
  font-size:15px;line-height:1}
.sn-x:hover{background:rgba(255,255,255,.12);color:var(--ink)}
@media (max-width:700px){
  .sn-in{padding:8px 10px;gap:8px;font-size:12.5px}
  .sn-more{padding:3px 8px;font-size:11.5px}
}

/* ═══════════════ 需求109：聊天频道公告 + 需求108：违规提示 ═══════════════ */
.chatrules{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12.5px;
  background:rgba(240,185,11,.10);border-bottom:1px solid rgba(240,185,11,.28)}
.cr-ico{flex:0 0 auto}
.cr-t{flex:1;min-width:0;font-weight:600;color:var(--warn);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-more{flex:0 0 auto;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700;
  background:rgba(240,185,11,.2);color:var(--warn)}
.cr-x{flex:0 0 auto;width:22px;height:22px;border-radius:6px;color:var(--ink3);font-size:13px}
.cr-x:hover{background:rgba(255,255,255,.1);color:var(--ink)}
/* 违规警告只有发言者本人看得到，挂在他自己那条消息下面 */
.msgwarn{margin-top:6px;padding:6px 8px;border-radius:7px;font-size:11.5px;line-height:1.6;
  background:rgba(246,70,93,.14);border:1px solid rgba(246,70,93,.4);color:#f0a0ad}
.msgwarn b{display:block;color:var(--dn);margin-bottom:2px}

/* ═══════════════ 需求112：预测时长板块（1分钟 / 15分钟 / 30分钟 / 1天） ═══════════════
   放在市场列表最上面 —— 它决定"你在玩哪一种游戏"，比"看哪个大类"更上位。
   形制刻意与下面的分类条区分（这里是分段控件，那里是列表），免得两条横条看着像一条。 */
.durtabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;
  padding:5px;margin:0 0 14px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px}
.durtab{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:8px 6px;border-radius:9px;background:transparent;border:0;color:var(--ink2);
  transition:background .15s,color .15s}
.durtab b{font-size:14px;font-weight:800;white-space:nowrap}
.durtab i{font-style:normal;font-size:11px;opacity:.7;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.durtab:hover{color:var(--ink)}
.durtab.on{background:var(--acc-solid);color:#fff}
.durtab.on i{opacity:.85}
@media(max-width:767px){
  /* 手机端：分类条是吸顶的，时长条排在它上面，两者都要贴住第一屏 */
  .durtabs{margin:0 0 8px;padding:4px;border-radius:10px}
  .durtab{padding:6px 4px}
  .durtab b{font-size:13px}
  .durtab i{font-size:10px}
}

/* ═══════════════ 需求110：大类里再按板块分组 ═══════════════ */
.sec-h{display:flex;align-items:center;gap:8px;margin:16px 0 8px;
  font-size:13px;font-weight:800;color:var(--ink2)}
.sec-h:first-child{margin-top:4px}
.sec-h b{font-weight:800}
.sec-h i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink3);
  padding:1px 6px;border-radius:99px;background:var(--bg2);
  font-variant-numeric:tabular-nums}
/* 板块标题右侧拉一道细线，把同一板块的卡片"框"在一起，比只有文字更好扫读 */
.sec-h::after{content:'';flex:1;height:1px;background:var(--line)}


/* ═══════════════ 需求114~117：异议与判定更正 ═══════════════ */
/* 历史场次里「已更正」的标记 —— 所有人可见（需求116） */
.badge.fix{margin-left:6px;background:rgba(240,185,11,.2);color:var(--warn);cursor:help}

/*
 * ⚠️ 2026-08-12 修：`.modal-b / .modal-h / .modal-c / .x` **从来没有基础样式**
 *    （只有下面那行 max-width），所以需求114~117 的「提交异议」与「判定已更正」
 *    两个弹窗一直是"没有底色的裸内容"浮在遮罩上 —— 遮罩是半透明的，
 *    背后的页面直接透过来，文字叠在 K 线上。这里把这一套壳补齐，
 *    形制与全站通行的 `.modal > .box` 保持一致（底色/描边/圆角/滚动/贴顶标题栏）。
 */
.modal-b{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  width:min(460px,100%);max-height:min(92vh,860px);overflow-y:auto;padding:0;
  box-shadow:0 18px 48px rgba(0,0,0,.55)}
.modal-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:16px 18px 12px;
  background:var(--bg2);border-bottom:1px solid var(--line)}
.modal-h b{font-size:17px}
.modal-h .x{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  color:var(--ink3);font-size:20px;line-height:1}
.modal-h .x:hover{color:var(--ink);background:var(--bg3)}
.modal-c{padding:16px 18px 18px}
/* `.btn.primary` 同样没定义过 —— `.btn` 本身就是主按钮，这里只把它显式化，
   免得下次有人以为 primary 会带来别的样式 */
.btn.primary{background:var(--acc-solid);color:#fff}

.modal-b.dispute,.modal-b.verdict{max-width:420px}
.disp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.disp-facts>div{background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;min-width:0}
.disp-facts span{display:block;font-size:11px;color:var(--ink3);margin-bottom:3px}
.disp-facts b{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;
  display:block;white-space:nowrap}
.disp-q{font-size:13px;color:var(--ink2);margin-bottom:8px}
.disp-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.disp-side{padding:12px;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer;
  background:var(--bg2);border:1px solid var(--line);color:var(--ink2)}
.disp-side.up.on{background:rgba(14,203,129,.18);border-color:var(--up);color:var(--up)}
.disp-side.dn.on{background:rgba(246,70,93,.18);border-color:var(--dn);color:var(--dn)}
.disp-reason{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:13px;
  padding:9px 10px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);
  color:var(--ink)}
.disp-tip{margin:10px 0 14px;font-size:11.5px;line-height:1.7;color:var(--ink3)}
/* 历史表「异议」列：本场没下过注的人显示这个。
   刻意做成**不像按钮**（无下划线、无主色、默认光标），但保留 title 说明原因 ——
   只把按钮藏掉而不给理由，用户会以为是坏了 */
.disp-na{font-size:11.5px;color:var(--ink3);cursor:help;border-bottom:1px dotted var(--line)}

.vd-head{font-size:13px;color:var(--ink2);margin-bottom:12px}
.vd-flip{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.vd-flip i{font-style:normal;font-size:18px;color:var(--ink3)}
.vd-flip .badge{font-size:15px;padding:6px 14px;border-radius:8px}
.vd-amt{text-align:center;font-size:22px;font-weight:800;margin-bottom:12px}
.vd-amt.up{color:var(--up)} .vd-amt.dn{color:var(--dn)}
.vd-meta{font-size:12.5px;line-height:1.75;color:var(--ink2);margin-bottom:8px}
.vd-note{font-size:12.5px;line-height:1.7;color:var(--ink2);background:var(--bg2);
  border-radius:9px;padding:9px 11px;margin-bottom:14px}
.btn.wide{width:100%;justify-content:center}

/* ══════════════════════════════ 需求124：铃铛下拉（只列未读）══════════════════ */
/* 定位父级 —— 面板挂在铃铛正下方，不是整屏跳转 */
.bellwrap{position:relative;display:flex}
.notifpop{position:absolute;right:0;top:calc(100% + 8px);
  width:min(340px,calc(100vw - 24px));
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);overflow:hidden;
  /* 在顶栏这个 z-index:50 的层里往上垫一点即可；全屏看图(140)/弹窗(150) 仍在它之上 */
  z-index:5;animation:npin .14s ease-out}
@keyframes npin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.np-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.np-all{font-size:12px;color:var(--acc);font-weight:700}
.np-all:hover{text-decoration:underline}
/* 一屏最多铺 4~5 条，再多就滚 —— 它是"扫一眼"的地方，不是消息中心 */
.np-list{max-height:min(56vh,380px);overflow-y:auto}
.np-item{display:block;width:100%;text-align:left;padding:10px 12px 10px 22px;
  position:relative;border-bottom:1px solid var(--line);transition:.12s}
.np-item:hover{background:var(--bg3)}
/* 需求164：铃铛现在列的是最近 20 条（读过的也留着），未读靠**左侧一颗圆点**认。
   左内边距对所有行统一留出 22px：只给未读加缩进的话，点一下已读，整行会横向跳一下。 */
.np-item.unread{background:var(--tint-acc)}
.np-item.unread::before{content:"";position:absolute;left:9px;top:16px;
  width:6px;height:6px;border-radius:50%;background:var(--acc-solid)}
.np-item.unread .np-t{color:var(--ink)}
.np-item:not(.unread) .np-t{color:var(--ink2);font-weight:600}
.np-top{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.np-tm{margin-left:auto;font-size:11px;color:var(--ink3)}
.np-t{font-size:13px;font-weight:700;line-height:1.45}
.np-b{margin-top:2px;font-size:12px;color:var(--ink3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-empty{padding:26px 12px;text-align:center;color:var(--ink3);font-size:13px}
.np-f{padding:8px 12px;border-top:1px solid var(--line);text-align:center}
.np-more{font-size:12.5px;color:var(--ink2);font-weight:600}
.np-more:hover{color:var(--acc)}
/*
 * 手机：**不能**再挂在铃铛下面（`right:0` 是相对铃铛算的）——
 * 铃铛右边还有"余额/登录"，锚点离右边缘 100 多像素，370px 宽的面板往左一撑
 * 左边就露到屏幕外去了（实测 x=-89）。所以窄屏改成相对**视口**定位：
 * 左右各留 10px，顶部落在（维护横幅 + 顶栏）下沿 —— 这两个高度页面里已经实测写进
 * --noticeH / --topH，直接用，别猜常数。
 */
@media (max-width:520px){
  .notifpop{position:fixed;left:10px;right:10px;width:auto;
    top:calc(var(--noticeH,0px) + var(--topH,52px) + 6px)}
}

/* ══════════════════════════════ 需求125：装 App（PWA）══════════════════════ */
/* 顶栏入口。比「玩法介绍」重一点（带边框+主色），因为这是要引导用户去做的动作，
   但仍然是个小按钮 —— 不做成横幅去挡行情。 */
.inst-btn{display:flex;align-items:center;gap:5px;color:var(--acc);
  font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(77,124,255,.45);background:rgba(77,124,255,.10);
  white-space:nowrap;transition:.15s}
.inst-btn:hover{background:rgba(77,124,255,.22)}
.inst-btn svg{flex-shrink:0}
/* 手机顶栏本来就挤（玩法介绍/铃铛/返佣/余额），窄屏只留图标 */
@media (max-width:560px){
  .inst-btn span{display:none}
  .inst-btn{padding:6px 7px}
}

.modal .box.installbox{width:min(400px,100%);text-align:center}
.installbox h3{margin-bottom:6px;font-size:18px}
.ig-sub{color:var(--ink3);font-size:12.5px;line-height:1.7;margin-bottom:14px}
/* 二维码给白底容器（暗底二维码识别率差，与充值页同一套做法） */
.ig-qr{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.ig-url{font-size:11.5px;color:var(--ink3);word-break:break-all}
.ig-steps{text-align:left;margin:0 0 14px;padding-left:22px;color:var(--ink2);
  font-size:13px;line-height:1.95}
.ig-steps li::marker{color:var(--acc);font-weight:800}
.ig-note{text-align:left;background:var(--bg3);border-radius:8px;padding:10px 12px;
  color:var(--ink3);font-size:12px;line-height:1.7;margin-bottom:4px}
.btn.wide{width:100%}
/* 次要出路（复制网址）：不做成第三个通栏按钮 —— 那会把主按钮的分量摊平 */
.ig-link{display:block;width:100%;margin-top:9px;color:var(--ink3);font-size:12px;
  text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.ig-link:hover{color:var(--acc)}

/* ── 需求160：安装方式清单（类型徽章 / 体积 / 机型要求）──────────────────
   ⚠️ 类名一律带 `appdl-` 前缀。这份 style.css 是**单文件全局样式**，
      2026-08-16 已经踩过一次撞车（`.cd` 同名静默生效，倒计时被扑克牌样式压坏）。 */
.appdl{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;text-align:left}
.appdl-row{display:flex;align-items:center;gap:10px;background:var(--bg3);
  border:1px solid var(--line);border-radius:10px;padding:10px 11px}
/* 装不了的那一行**留着**并弱化：直接藏起来，用户只会以为是自己没找到入口。
   ⚠️ 弱化只用「虚线 + 无填充」，**不用 opacity** —— 整行调透明会把本来
      刚过 4.5:1 的说明文字一起拉到看不清（那行恰恰是"为什么装不了"）。 */
.appdl-row.off{background:transparent;border-style:dashed}
/* App 图标：下载列表里安卓给所有 .apk 一个通用占位图（浏览器不会去解包读图标），
   所以**下载前唯一能让用户看见"装的是哪个 App"的地方就是这里**。
   36px 且 flex-shrink:0：窄屏挤的是文字不是图标（图标一缩就糊）。 */
.appdl-ico{flex-shrink:0;width:36px;height:36px;border-radius:9px;
  border:1px solid var(--line);object-fit:cover;background:var(--bg2)}
/* 装不了的那一行连图标一起弱化 —— 这里可以用 opacity，它不是文字 */
.appdl-row.off .appdl-ico{filter:grayscale(1);opacity:.5}
.appdl-main{flex:1;min-width:0}
.appdl-t{font-size:13.5px;font-weight:700;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap}
/* 类型徽章 = 用户问的第一个问题「这到底是什么」，所以和名字同一行、不折到下面。
   ⚠️ 文字用 #8fb0ff 而不是 --acc：10.5px 的小字，纯 --acc 压在这块蓝底上只有
      约 4:1，达不到正文 4.5:1（站内 `.bc-banner.player` 用的就是这个更亮的蓝）。 */
.appdl-tag{font-size:10.5px;font-weight:600;color:#8fb0ff;
  background:rgba(77,124,255,.14);border-radius:5px;padding:2px 6px;white-space:nowrap}
.appdl-row.off .appdl-tag{color:var(--ink3);background:var(--bg3)}
.appdl-meta{font-size:11.5px;color:var(--ink3);margin-top:4px;line-height:1.5}
.appdl-meta b{color:var(--ink2);font-weight:700}
.appdl-no{font-size:11.5px;color:var(--ink3);line-height:1.65;margin-top:5px}
.appdl-act{flex-shrink:0;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--acc-solid);border-radius:8px;padding:8px 12px;white-space:nowrap;
  transition:filter .15s}
.appdl-act:hover{filter:brightness(1.12)}
/* 没有一键安装事件时给的是**提示**不是按钮：长得像按钮却点不动最气人。
   指向下方的箭头把视线接到紧跟其后的步骤上。 */
.appdl-hint{font-size:11.5px;color:var(--ink3);margin-top:5px}
.appdl-tip{font-size:11.5px;color:var(--ink3);line-height:1.7}
.appdl-sum{font-size:10.5px;color:var(--ink3);opacity:.75;word-break:break-all}
.appdl-h{text-align:left;font-size:12px;font-weight:700;color:var(--ink2);
  margin:2px 0 6px}
/* 窄屏：按钮换到下一行通栏，别把标题挤成一列竖字 */
@media (max-width:400px){
  .appdl-row{flex-wrap:wrap}
  .appdl-act{width:100%;text-align:center}
}

/* ── 需求125b：内嵌浏览器（微信/QQ/抖音…）跳出去的引导蒙层 ────────────────
   装不了 App 是这些 App 的硬限制，用户唯一的出路是点**它自己右上角**的「⋯」——
   那个位置在我们所有 UI 之外，所以只能让开屏幕、直接指过去。
   z-index 190：盖住弹窗(150)，但让 toast(200) 仍能浮在上面。 */
.escmask{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.94);
  padding:calc(env(safe-area-inset-top,0px) + 126px) 26px 26px;
  display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.esc-arrow{position:absolute;top:calc(env(safe-area-inset-top,0px) + 2px);right:6px;
  color:var(--acc);animation:escpt 1.5s ease-in-out infinite}
/* 全屏就这一处动效，作用是"看这里"：小幅、慢、只沿箭头方向 */
@keyframes escpt{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-5px)}}
/* 整块靠右（贴着箭头），但**块内文字左对齐** ——
   右对齐的多行中文每行起点都在跳，最后一行还常剩一两个字吊在那儿。 */
.esc-copy{max-width:300px;text-align:left}
.esc-t{font-size:19px;font-weight:800;color:#fff;margin-bottom:8px}
.esc-d{font-size:13px;line-height:1.85;color:rgba(255,255,255,.72)}
.esc-d b,.esc-d .nm{color:#fff}
/* 浏览器名：西文名两侧留空，中文名不留（.lat 由 JS 按首字母判） */
.nm{font-weight:600;color:var(--ink2)}
.nm.lat{margin:0 .22em}   /* 中西文之间约 1/4 em，是排版惯例；.12em 在 12px 字号上看不出来 */
.esc-tap{margin-top:auto;align-self:center;font-size:12px;color:rgba(255,255,255,.5)}
@media (prefers-reduced-motion:reduce){.esc-arrow{animation:none}}

/* ══════════════════════════════════════════════════════════════════════
   分成（分红）板块 —— 本轮需求 124/125/126（web/src/dividend.jsx）
   ----------------------------------------------------------------------
   配色沿用全站三色（--acc 蓝 / --up 绿 / #f0b90b 金）。金色在这一页承担
   「钱」的语义，但只出现在**首屏与收益数字**上，不铺满整页 ——
   全页金色会让人一眼想到菠菜站，反而不敢投。
   ══════════════════════════════════════════════════════════════════════ */
.dv-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:26px;
  align-items:center;
  padding:26px 24px;margin-bottom:22px;border-radius:16px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(240,185,11,.13), transparent 58%),
    radial-gradient(90% 120% at 0% 100%, rgba(77,124,255,.12), transparent 60%),
    var(--bg2);
  border:1px solid var(--line)}
.dv-hero h1{font-size:30px;line-height:1.25;letter-spacing:-.6px;margin-bottom:12px}
.dv-lead{font-size:14.5px;line-height:1.85;color:var(--ink2);max-width:60ch}
.dv-lead b{color:var(--ink)}
.dv-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dv-cta .btn{padding:11px 22px;font-size:15px}
/* 全平台累计数字：投资池 / 已返还。首屏一条，投资弹窗里再来一条（同一个组件） */
.dv-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.dv-stats>div{padding:11px 14px;border-radius:12px;background:var(--bg3);
  border:1px solid var(--line);min-width:0}
.dv-stats span{display:block;font-size:11.5px;color:var(--ink3);margin-bottom:4px}
.dv-stats b{font-size:21px;font-weight:800;letter-spacing:-.4px;display:block;
  overflow:hidden;text-overflow:ellipsis}
.dv-mc .dv-stats{margin:0 0 12px}
.dv-mc .dv-stats b{font-size:16px}

/* 五个档位的收益率：首屏就把最硬的数字亮出来，不用往下滚 */
.dv-kv{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line)}
.dv-kv>div{display:flex;flex-direction:column;gap:2px;padding:7px 13px;border-radius:10px;
  background:rgba(240,185,11,.09);border:1px solid rgba(240,185,11,.22)}
.dv-kv b{font-size:16px;font-weight:800;color:var(--gold);letter-spacing:-.3px}
.dv-kv span{font-size:11px;color:var(--ink3)}
.dv-art{width:100%;height:auto;display:block}
.dv-art-t{fill:var(--ink2);font-size:13px;font-weight:700}
.dv-art-s{fill:var(--ink3);font-size:11px}

.dv-sec{margin-bottom:26px}
.dv-p{font-size:14px;line-height:1.95;color:var(--ink2);max-width:46em;margin-bottom:12px}
.dv-p b{color:var(--ink)}
.dv-rules{list-style:none;display:flex;flex-direction:column;gap:9px;max-width:46em}
.dv-rules li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.8;
  color:var(--ink2)}
.dv-rules li::before{content:'';position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--acc-solid)}
.dv-rules b{color:var(--ink)}

/* 档位表：这一页最硬的信息，用真数字而不是形容词 */
.dv-table{width:100%;border-collapse:collapse;margin-bottom:16px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dv-table th{font-size:11.5px;font-weight:700;color:var(--ink3);text-align:left;
  padding:10px 14px;background:var(--bg3);white-space:nowrap}
.dv-table td{padding:12px 14px;font-size:14px;border-top:1px solid var(--line)}
.dv-table .ta-r{text-align:right}
.dv-gain{display:block;font-style:normal;font-size:11.5px;color:var(--up);margin-top:2px}
.mono.up,.dv-table .up{color:var(--up)}
.mono.dn{color:var(--dn)}

/* 我的投资 */
.dv-mysum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-bottom:12px}
.dv-mysum>div{background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px}
.dv-mysum span{display:block;font-size:11.5px;color:var(--ink3);margin-bottom:4px}
.dv-mysum b{font-size:18px;font-weight:800;letter-spacing:-.3px}
.dv-list{display:flex;flex-direction:column;gap:8px}
.dv-item{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.dv-item.paid{opacity:.72}
.dv-i1{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dv-i1 b{font-size:16px;font-weight:800}
.dv-i2{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink3)}

/* ── 弹窗（外壳沿用 .modal > .box）────────────────────────────────────── */
.modal .box.dv-box{width:min(460px,100%);max-height:min(92vh,860px);overflow-y:auto;
  padding:0}
.dv-mh{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:16px 18px 12px;
  background:var(--bg2);border-bottom:1px solid var(--line)}
.dv-mh b{font-size:17px}
.dv-x{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  color:var(--ink3);font-size:20px;line-height:1}
.dv-x:hover{color:var(--ink);background:var(--bg3)}
.dv-mc{padding:16px 18px 18px}
.dv-lb{font-size:12px;font-weight:700;color:var(--ink3);margin:14px 0 7px;display:block}
.dv-wide{width:100%;justify-content:center;margin-top:14px;padding:12px}

/* 收益图表：柱高 = 到期收益，点柱子即选档位 */
.dv-chart{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px}
.dv-chart-h{display:flex;justify-content:space-between;align-items:baseline;
  font-size:11.5px;color:var(--ink3);margin-bottom:10px}
.dv-chart-h b{font-size:12.5px;color:var(--ink2)}
.dv-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end}
.dv-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:5px;padding:4px 2px 6px;border-radius:9px;transition:background .15s}
.dv-bar:hover{background:rgba(255,255,255,.04)}
.dv-bv{font-size:10.5px;color:var(--ink3);white-space:nowrap}
/* 柱子的数据端做 4px 圆角、底端贴基线（不是整根胶囊） */
.dv-bcol{width:100%;max-width:34px;border-radius:4px 4px 0 0;background:var(--bar-neutral);
  transition:background .15s,box-shadow .15s}
.dv-bar.on .dv-bcol{background:linear-gradient(180deg,#ffd975,#e0a70b)}
.dv-bar.on .dv-bv{color:var(--gold);font-weight:800}
.dv-bl{font-size:11px;color:var(--ink2);white-space:nowrap}
.dv-bar.on .dv-bl{color:var(--ink);font-weight:700}
.dv-br{font-size:10px;color:var(--ink3)}
/* 基线：柱子站在一条线上，比悬空更好读 */
.dv-bars{border-bottom:1px solid var(--line);padding-bottom:0}

.dv-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-2px 0 2px}
.dv-qb{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;
  color:var(--ink2);background:var(--bg3);border:1px solid var(--line);transition:.15s}
.dv-qb:hover{color:var(--acc);border-color:var(--acc)}
.dv-bal{margin-left:auto;font-size:12px;color:var(--ink3)}
.dv-bal b{color:var(--ink2)}
.dv-terms{display:flex;gap:7px;flex-wrap:wrap}
.dv-tchip{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 13px;border-radius:10px;background:var(--bg3);border:1px solid var(--line);
  transition:.15s}
.dv-tchip b{font-size:13px;font-weight:700;color:var(--ink2)}
.dv-tchip em{font-style:normal;font-size:11px;color:var(--ink3)}
.dv-tchip:hover{border-color:var(--acc)}
.dv-tchip.on{background:rgba(240,185,11,.12);border-color:rgba(240,185,11,.55)}
.dv-tchip.on b{color:var(--gold)}
.dv-tchip.on em{color:#c99a10}

.dv-sum{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;
  background:var(--bg3);border-radius:11px;padding:12px}
.dv-sum>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.dv-sum span{font-size:11px;color:var(--ink3)}
.dv-sum b{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dv-fine{margin-top:12px;font-size:11.5px;line-height:1.85;color:var(--ink3)}
.dv-fine b{color:var(--ink2)}
.dv-note{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:12.5px;
  line-height:1.7;color:var(--ink2);background:rgba(240,185,11,.10);
  border:1px solid rgba(240,185,11,.28)}

/* 交易者资格判定 */
.dv-check{border-radius:12px;padding:13px 14px;border:1px solid var(--line);
  background:var(--bg3);margin-bottom:14px}
.dv-check.ok{background:rgba(14,203,129,.10);border-color:rgba(14,203,129,.35)}
.dv-check.no{background:rgba(246,70,93,.09);border-color:rgba(246,70,93,.32)}
.dv-check-t{font-size:14px;font-weight:800;margin-bottom:10px}
.dv-check.ok .dv-check-t{color:var(--up)}
.dv-check.no .dv-check-t{color:var(--dn)}
.dv-check-n{display:grid;gap:8px}
.dv-check-n>div{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--ink3)}
.dv-check-n span{flex:1;min-width:0}
.dv-check-n b{font-size:14px;font-weight:800}
.dv-check-n em{font-style:normal;font-size:11px;color:var(--ink3)}

/* ── 手机：首屏改单列，图放到文字下面 ── */
@media(max-width:900px){
  .dv-hero{grid-template-columns:1fr;padding:20px 16px;gap:16px}
  .dv-hero h1{font-size:23px}
  .dv-art{max-width:380px;margin:0 auto}
}
@media(max-width:520px){
  /* 5 个档位在窄屏排成 3+2，比 flex 换行后剩一个孤零零的第 5 个整齐 */
  .dv-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .dv-cta{flex-direction:column}
  .dv-cta .btn{width:100%}
  .dv-sum{grid-template-columns:1fr}
  .dv-bl{font-size:10px}
  .dv-bv{font-size:9.5px}
  .dv-table th,.dv-table td{padding:9px 10px;font-size:13px}
}

/* 需求131：K 线面板上标明"图上的时间是你本地时区的" */
.tzchip{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:var(--bg3);border:1px solid var(--line);color:var(--ink2);
  font-size:11px;font-weight:600;white-space:nowrap}

/* ── 需求133：K 线图右上角的「提交 Bug」小图标 ── */
.bugbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;
  border-radius:7px;color:var(--ink2);transition:.15s;flex-shrink:0}
/* ⚠️ 必须钉死 flex 尺寸：外层是 flex 容器，svg 会被压成 6px 宽（高还是 16）——
   看起来就是"一个小黑点"，实测截图才发现 */
.bugbtn svg{flex:0 0 16px;width:16px;height:16px}
.bugbtn:hover{color:var(--warn);background:rgba(240,185,11,.12)}
.bug-scope{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;
  border-radius:10px;background:var(--bg3);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink2)}
.bug-scope b{color:var(--ink)}
.bug-scope .mono{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.bug-text{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--ink);font:inherit;line-height:1.7;resize:vertical}
.bug-text:focus{border-color:var(--acc);outline:none}

/* ══════════════════ 需求159 第二期：博客 ══════════════════ */
.blogwrap{max-width:760px;margin:0 auto;padding:4px 0 24px}
.blog-t{font-size:22px;margin:10px 0 6px}
.blog-sub{color:var(--ink3);font-size:13.5px;margin:0 0 16px}
.blog-meta{color:var(--ink3);font-size:12px;margin-top:6px}
/* 正文经 minimd.js 渲染：只放行 ## / - / **粗体** / [文字](链接)，其余原样转义显示 */
.blog-body{line-height:1.9;font-size:14.5px;color:var(--ink2);margin-top:14px}
.blog-body p{margin:10px 0}
.blog-body h2{font-size:16px;color:var(--ink);margin:20px 0 8px;font-weight:700}
.blog-body ul{margin:8px 0;padding-left:22px}
.blog-body li{margin:5px 0}
.blog-body b{color:var(--ink);font-weight:700}
.blog-body a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.blog-body a:hover{color:var(--acc-solid)}
.blog-item{display:block;width:100%;text-align:left}
.blog-item h4{margin:6px 0 4px}
.sf-links a{color:var(--ink2);font-size:13px;text-decoration:none}
.sf-links a:hover{color:var(--ink)}

/* ══════════════════ 需求132：语言切换 ══════════════════ */
.langwrap{position:relative;display:flex}
.iconbtn.lang{gap:6px}
.lang-cur{font-size:12px;font-weight:700;max-width:96px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.langpop{position:absolute;right:0;top:calc(100% + 8px);z-index:120;
  width:min(230px,calc(100vw - 24px));max-height:min(60vh,420px);overflow-y:auto;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.langitem{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--ink2);text-align:left}
.langitem:hover{background:var(--bg3);color:var(--ink)}
.langitem.on{background:rgba(77,124,255,.14);color:var(--ink);font-weight:700}
.langitem .tick{color:var(--acc)}
/* 首访提示：一条不挡路的小条，问一次就再也不出现 */
.langask{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--botnavH,16px) + 16px);
  z-index:180;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
  background:var(--bg2);border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.5);
  font-size:13px;color:var(--ink2);max-width:calc(100vw - 24px)}
.langask .btn{padding:6px 14px;font-size:13px}
/* 手机顶栏很挤：只留地球图标，语言名藏起来（点开的下拉里有全名） */
@media(max-width:700px){ .lang-cur{display:none} }
/* 需求156：登录/注册弹窗右上角的语言入口（复用顶栏那颗 LangPicker）。
   ⚠️ 这一格要**逆着**上面那条手机规则来：顶栏挤，弹窗不挤 —— 而恰恰是没登录、
      看不懂界面的人最需要一眼认出这是"换语言"，所以窄屏也把语言名留着。 */
.auth-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.auth-head h3{margin:0;flex:1;min-width:0}
.auth-head .langwrap{flex:none;margin-left:auto}
.auth-head .iconbtn.lang{padding:5px 10px;border-radius:999px;background:var(--bg3)}
.auth-head .lang-cur{display:inline;font-size:11.5px;max-width:92px}
/* 阿拉伯语/波斯语/乌尔都语：整站从右到左 */
html[dir='rtl'] .top-in,html[dir='rtl'] .wrap{direction:rtl}
html[dir='rtl'] .mono{direction:ltr;unicode-bidi:embed}

/* 只在别的时长开盘的大类（如大宗商品只有 30 分钟盘）：淡一点，右侧标出去哪看 */
.rail-item.elsewhere{opacity:.72}
.rail-item.elsewhere .railgo{font-style:normal;font-size:10.5px;font-weight:700;
  color:var(--warn);background:rgba(240,185,11,.14);border-radius:6px;padding:1px 6px}
.rail-item.elsewhere:hover{opacity:1}

/* ═══════════════════ 需求135/136：站点页脚 + 官方文档 ═══════════════════════
   页脚是"这站靠不靠谱"的判断依据之一，所以给足留白、别做成一行小字。
   文档三栏：左章目录 / 中正文 / 右小节导航 —— 手机上塌成一栏（第三栏必须让路，
   小屏再塞一栏正文就只剩一条缝了）。 */
.sitefoot{border-top:1px solid var(--line);background:var(--bg2);margin-top:40px;
  padding:34px 16px calc(26px + var(--botnavH,0px))}
.sf-in{max-width:1440px;margin:0 auto;display:flex;gap:34px;flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between}
.sf-brand{max-width:420px}
.sf-brand .logo{font-size:19px;display:block;margin-bottom:8px}
.sf-brand p{color:var(--ink3);font-size:13px;line-height:1.75;margin:0}
.sf-links{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:flex-start}
.sf-links button{color:var(--ink2);font-size:13.5px;font-weight:600;padding:3px 0;
  border-bottom:1px solid transparent;transition:.15s}
.sf-links button:hover{color:var(--acc);border-bottom-color:var(--acc)}
.sf-bottom{max-width:1440px;margin:26px auto 0;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  color:var(--ink3);font-size:12px}
.sf-cr{font-weight:600;color:var(--ink2)}

/* ── 文档三栏 ── */
.docs{display:grid;grid-template-columns:216px minmax(0,1fr) 186px;gap:30px;
  align-items:start;padding:8px 0 40px;max-width:1200px;margin:0 auto}
.doc-side{position:sticky;top:78px;display:flex;flex-direction:column;gap:2px}
.doc-side-h,.doc-toc-h{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px}
.doc-chap{display:flex;gap:9px;align-items:baseline;text-align:left;width:100%;
  padding:8px 11px;border-radius:9px;color:var(--ink2);font-size:14px;line-height:1.5;
  transition:.14s}
.doc-chap i{font-style:normal;font-size:11px;font-weight:800;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.doc-chap:hover{background:var(--bg3);color:var(--ink)}
.doc-chap.on{background:rgba(77,124,255,.13);color:var(--ink);font-weight:700}
.doc-chap.on i{color:var(--acc)}
.doc-back{margin-top:14px;align-self:flex-start;color:var(--ink3);font-size:12.5px;padding:6px 11px}
.doc-back:hover{color:var(--acc)}

.doc-main{min-width:0;max-width:74ch}
.doc-head{padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.doc-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc)}
.doc-main h1{font-size:clamp(26px,4vw,36px);line-height:1.2;font-weight:800;margin:10px 0 12px;
  letter-spacing:-.02em}
.doc-lede{color:var(--ink2);font-size:16px;line-height:1.85;margin:0}
.doc-sec{padding-top:30px;scroll-margin-top:90px}
.doc-sec h2{font-size:20px;font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.doc-main p{font-size:15px;line-height:1.95;color:var(--ink2);margin:0 0 15px}
.doc-main b{color:var(--ink);font-weight:700}
.doc-ul,.doc-ol{margin:0 0 16px;padding-left:20px;color:var(--ink2);font-size:15px;line-height:1.9}
.doc-ul li,.doc-ol li{margin-bottom:8px}
.doc-ul li::marker{color:var(--acc)}
.doc-steps{list-style:none;padding:0;margin:0 0 18px;counter-reset:ds}
.doc-steps li{counter-increment:ds;position:relative;padding:0 0 14px 40px;line-height:1.85}
.doc-steps li::before{content:counter(ds);position:absolute;left:0;top:1px;width:26px;height:26px;
  border-radius:50%;background:rgba(77,124,255,.14);color:var(--acc);font-size:12.5px;
  font-weight:800;display:grid;place-items:center}
.doc-steps li b{display:block;font-size:15px;margin-bottom:2px}
.doc-steps li span{display:block;color:var(--ink2);font-size:14.5px}
.doc-kv{margin:0 0 18px;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.doc-kv > div{display:grid;grid-template-columns:190px minmax(0,1fr);background:var(--bg2)}
.doc-kv dt{padding:12px 14px;font-weight:700;font-size:14px;color:var(--ink);background:var(--bg3)}
.doc-kv dd{padding:12px 16px;margin:0;color:var(--ink2);font-size:14.5px;line-height:1.85}
.doc-tw{overflow-x:auto;border:1px solid var(--line);border-radius:11px;margin:0 0 18px}
.doc-table{border-collapse:collapse;width:100%;font-size:14px;background:var(--bg2)}
.doc-table th,.doc-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  line-height:1.7;vertical-align:top}
.doc-table th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);
  font-weight:800;background:var(--bg3);white-space:nowrap}
.doc-table tr:last-child td{border-bottom:0}
.doc-note{border-radius:11px;padding:14px 16px;margin:0 0 18px;border:1px solid var(--line);
  background:var(--bg2)}
.doc-note b{display:block;font-size:14px;margin-bottom:5px}
.doc-note p{margin:0;font-size:14.5px;line-height:1.85}
.doc-note.info{border-color:rgba(77,124,255,.4);background:rgba(77,124,255,.07)}
.doc-note.info b{color:var(--acc)}
.doc-note.ok{border-color:rgba(14,203,129,.4);background:rgba(14,203,129,.07)}
.doc-note.ok b{color:var(--up)}
.doc-note.warn{border-color:rgba(240,185,11,.42);background:rgba(240,185,11,.08)}
.doc-note.warn b{color:var(--warn)}
.doc-note.danger{border-color:rgba(246,70,93,.42);background:rgba(246,70,93,.08)}
.doc-note.danger b{color:var(--dn)}
.doc-pager{display:flex;gap:12px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  flex-wrap:wrap}
.doc-pager button{flex:1 1 200px;text-align:left;padding:12px 15px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg2);transition:.15s}
.doc-pager button:hover{border-color:var(--acc)}
.doc-pager button.next{text-align:right}
.doc-pager em{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);margin-bottom:3px}
.doc-pager b{font-size:14.5px;color:var(--ink)}

.doc-toc{position:sticky;top:78px;display:flex;flex-direction:column;gap:1px}
.doc-toc button{text-align:left;font-size:12.5px;line-height:1.55;color:var(--ink3);
  padding:6px 10px;border-left:2px solid var(--line);border-radius:0 6px 6px 0;transition:.14s}
.doc-toc button:hover{color:var(--ink2);background:var(--bg2)}
.doc-toc button.on{color:var(--acc);border-left-color:var(--acc);font-weight:700}

/* 玩法介绍弹窗顶部的文档入口 */
.ht-doclink{margin-left:auto;margin-right:8px;font-size:12.5px;font-weight:700;color:var(--acc);
  padding:4px 10px;border-radius:999px;background:rgba(77,124,255,.12);white-space:nowrap}
.ht-doclink:hover{background:rgba(77,124,255,.22)}

@media(max-width:1100px){
  .docs{grid-template-columns:200px minmax(0,1fr)}
  .doc-toc{display:none}          /* 中屏先砍右栏，正文宽度优先 */
}
@media(max-width:760px){
  /* 手机：章目录变成顶部一条可横滑的标签，正文独占一屏 */
  .docs{grid-template-columns:1fr;gap:16px}
  .doc-side{position:static;flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;
    padding-bottom:4px;border-bottom:1px solid var(--line)}
  .doc-side::-webkit-scrollbar{display:none}
  .doc-side-h,.doc-back{display:none}
  .doc-side nav{display:flex;gap:6px}
  .doc-chap{white-space:nowrap;padding:7px 12px;border-radius:999px;background:var(--bg2);
    border:1px solid var(--line);font-size:13px}
  .doc-chap i{display:none}
  .doc-kv > div{grid-template-columns:1fr}
  .doc-kv dt{padding-bottom:2px;background:var(--bg2)}
  .doc-kv dd{padding-top:0}
  .sf-in{gap:22px}
}

/* ═════════════ 需求139：卡片右侧一天走势 + 可下注下面的呼吸灯 ═════════════
   布局：价格与涨跌在左（保持原来的层级），曲线在右，两边基线对齐。
   曲线宽度固定 116px —— 卡片本身是自适应的，但曲线**不能跟着拉伸**：
   同一屏里几十条线若各有各的横向比例，形状就没法互相比较了。 */
.card-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.card-px{min-width:0}
 /* ⚠️ 类名叫 .sparkline 不叫 .spark —— 「下单成功」烟花早就占了 .spark
      （那条规则是 position:absolute;width:8px 的小圆点），撞名会把曲线压成 8×8 */
.sparkline{flex:0 0 auto;display:block;overflow:visible}
/* 还没取到数据时的占位：一条极淡的横线，卡片高度不跳 */
.sparkline.ph{border-bottom:1px solid var(--line);opacity:.5}

/* 可下注 + 下面那枚呼吸灯（右上角一列） */
.chipwrap{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
/* 标的名可以被压缩，右上角这一列不行 —— 否则"实时"两个字会被挤出卡片右边缘 */
.card-h .sym{flex:1 1 auto;min-width:0}
.card-h .sym-txt{min-width:0;overflow:hidden}
.card-h .sym-txt b,.card-h .sym-txt .q{display:block;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
 /* ⚠️ 类名叫 .card-live 不叫 .livedot —— 顶栏那颗"连接状态"小圆点早就占了 .livedot
      （width:7px 的固定尺寸），撞名会把这一整行压成 7px，文字直接溢出卡片。
      这是本次第二次撞名了（上一次是 .spark），加通用类名前务必先 grep 一遍。 */
.card-live{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
  color:var(--up);letter-spacing:.02em;white-space:nowrap}
/*
 * ⚠️ 呼吸灯的光晕是 box-shadow 扩散出去的，**它不占布局宽度** ——
 * 所以间距不能只按圆点的 7px 算，必须留出"最大光晕半径 + 一点余量"，
 * 否则动画扩到最大的那一帧会盖到「实时」两个字上（PC 上肉眼可见的重叠）。
 * 做法：圆点外面套一个固定 18px 宽的盒子，光晕在盒子里扩散，文字从 18px 之后开始排。
 */
.card-live i{position:relative;flex:0 0 18px;width:18px;height:12px;display:block}
 .card-live i::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--up-solid);
  box-shadow:0 0 0 0 rgba(14,203,129,.55);animation:breathe 2.2s ease-out infinite}
@keyframes breathe{
  0%  {box-shadow:0 0 0 0 rgba(14,203,129,.5);   opacity:1}
  70% {box-shadow:0 0 0 6px rgba(14,203,129,0);  opacity:.55}
  100%{box-shadow:0 0 0 0 rgba(14,203,129,0);    opacity:1}
}
/* 系统开了"减少动态效果"就只留一枚静态绿点 —— 呼吸灯对前庭敏感的人是负担 */
@media (prefers-reduced-motion:reduce){ .card-live i::before{animation:none} }

@media(max-width:560px){
  /* 手机卡片更窄：曲线收一档，别把价格挤成两行 */
  .sparkline{width:88px;height:34px}
  /* 手机只留那枚点，"实时"两个字在小屏是噪音；点自己也不用再留文字的间距了 */
  .card-live span{display:none}
  .card-live i{flex:0 0 12px;width:12px}
}


/* 存证：原始快照过了保留期时的说明（不是错误，别用红色） */
.ev-exp{font-style:normal;color:var(--ink3)}

/* ══════════════════════════════════════════════════════════════════════════
   需求140/141/142：博彩板块
   --------------------------------------------------------------------------
   设计约定（8 款游戏共用，改一处全站一致）：
   · 每款游戏一个色相 `--hue`（服务端 registry.ts 下发），页面的高光、按钮、
     选中态全部由它派生 —— 于是 8 个页面各有各的气质，版式却完全一致。
   · 桌面：舞台在左、操作区在右（cs-body.with-side）；手机：上下堆叠，
     操作区吸在下面（拇指区），舞台可以滚。
   · 动画一律用 transform / opacity（合成层），不动 width/top/left 这类会触发
     重排的属性 —— 老虎机 5 轴同时转 + 手机上，重排会直接掉到 20fps。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 大厅 ─────────────────────────────────────────────────────────────── */
.cs-lobby{padding:4px 0 26px}
.cs-hero{border-radius:18px;overflow:hidden;margin-bottom:18px;
  background:radial-gradient(1200px 300px at 15% -20%,rgba(237,161,0,.22),transparent 60%),
             linear-gradient(160deg,var(--surf-hero-a),var(--surf-hero-b));border:1px solid var(--line)}
.cs-hero-in{padding:26px 22px}
.cs-hero h2{font-size:26px;letter-spacing:-.6px;margin-bottom:6px}
.cs-hero p{color:var(--ink2);font-size:13.5px;max-width:640px;line-height:1.75}
.cs-fairbar{display:grid;gap:10px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cs-fairbar>div{display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.cs-fairbar b{flex:0 0 20px;height:20px;border-radius:6px;background:var(--warn-solid);color:#20160a;
  font-size:11px;display:grid;place-items:center;font-weight:900}
.cs-fairbar span{font-size:11.5px;color:var(--ink2);line-height:1.6}

.cs-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.cs-card{text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  padding:16px;position:relative;overflow:hidden;transition:transform .18s,border-color .18s}
.cs-card::after{content:'';position:absolute;inset:-40% -30% auto auto;width:180px;height:180px;
  border-radius:50%;background:hsl(var(--hue) 75% 55%/.16);filter:blur(20px);pointer-events:none}
.cs-card:hover{transform:translateY(-3px);border-color:hsl(var(--hue) 70% 55%/.6)}
.cs-card.off{opacity:.5}
.cs-card.off:hover{transform:none}
.cs-art{color:hsl(var(--hue) 75% 62%);height:44px;margin-bottom:10px}
.cs-art svg{height:44px;width:auto}
.cs-cname{display:flex;align-items:baseline;gap:7px}
.cs-cname b{font-size:17px}
.cs-cname em{font-style:normal;font-size:10.5px;color:var(--ink3);letter-spacing:.4px}
.cs-card p{font-size:12px;color:var(--ink2);margin:6px 0 12px;line-height:1.6;min-height:34px}
.cs-cmeta{display:flex;gap:12px;font-size:11px;color:var(--ink3)}
.cs-soon{color:var(--warn)}
.cs-daily{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  font-size:11.5px;color:var(--ink3);background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px}
.cs-daily b{color:var(--ink2);font-size:12px}
.cs-closed{padding:48px 20px;text-align:center;color:var(--ink3);font-size:14px}
.cs-need{padding:56px 20px;text-align:center}
.cs-need p{color:var(--ink2);margin-bottom:14px}

/* ── 游戏页外壳 ───────────────────────────────────────────────────────── */
.cs-page{--tone:hsl(var(--hue) 72% 58%);padding-bottom:20px}
.cs-top{display:flex;align-items:center;gap:10px;padding:4px 0 14px;flex-wrap:wrap}
.cs-back{width:34px;height:34px;border-radius:11px;background:var(--bg2);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2)}
.cs-back:hover{color:var(--ink);border-color:var(--tone)}
.cs-title{display:flex;align-items:baseline;gap:8px}
.cs-title b{font-size:19px}
.cs-title em{font-style:normal;font-size:10.5px;color:var(--ink3);letter-spacing:.4px}
/* 需求152 加了「玩法说明」后这一排是 3 个胶囊 + 余额：窄机型必须允许折行，
   否则右端会被挤出屏幕（.cs-top 自己会折，但折下来的这一整块仍可能超宽）*/
.cs-topr{margin-left:auto;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;justify-content:flex-end}
.cs-chip{font-size:11.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink2);display:inline-flex;align-items:center;gap:5px}
.cs-chip:hover{color:var(--ink);border-color:var(--tone)}
.cs-chip.fair{color:var(--tone);border-color:hsl(var(--hue) 70% 55%/.45)}
.cs-bal{font-size:13px;font-weight:800;background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px}

.cs-body{display:grid;gap:16px}
@media(min-width:900px){.cs-body.with-side{grid-template-columns:1fr 320px;align-items:start}}
.cs-stage{background:linear-gradient(170deg,hsl(var(--hue) 40% 12%),var(--bg2));
  border:1px solid var(--line);border-radius:18px;padding:18px;min-height:280px}
.cs-side{display:flex;flex-direction:column;gap:12px}
/* 舞台内的缩放层：桌面 --csFit 恒为 1，等于不存在（需求145）*/
.cs-fit{width:100%}

/*
 * 需求145：手机端「动画区」与「下单按钮」必须同屏。
 * 以前是纯上下堆叠 —— 下滑够到按钮，动画就出屏；把动画拉回来，按钮又没了。
 *
 *   ① 舞台吸顶：钉在顶栏下方，往下滑看赔率表/倍率阶梯时动画始终在视线里。
 *      ⚠️ 必须先把 .cs-body 从 grid 改成 flex —— 网格项的包含块是它自己那一行，
 *         sticky 在里面**根本没有可移动的范围**（改 top 也没用，实测不吸）。
 *   ② 舞台高度上限 = 视口 − 顶栏 − 底部导航 − 下注区(--csActionH)，
 *      于是「动画 + 下注条 + 主按钮」正好凑一屏；
 *      装不下的舞台由 useFitScale 等比缩进来（8 款共用，不逐个调死数字）。
 *   --csActionH 是下注条+主按钮的实测高度；带额外选项行的游戏（扫雷的雷数、
 *   花旗骰的注型）可能还差几十像素，那时靠 ① 的吸顶保证两者仍然同时可见。
 */
@media(max-width:899px){
  .cs-body{display:flex;flex-direction:column}
  .cs-stage{position:sticky;top:calc(var(--noticeH,0px) + var(--topH,52px) + 6px);z-index:5;
    padding:12px;min-height:200px;
    max-height:max(240px, calc(100dvh - var(--noticeH,0px) - var(--topH,52px)
      - var(--botnavH,58px) - var(--csActionH,230px)));
    display:flex;align-items:flex-start;justify-content:center;
    /* 缩放到下限仍装不下（矮机型 + 轮盘那种整张下注桌）就让舞台自己滚，
       而不是把下半截**裁掉**。缩放后的可滚范围由 transform 的包围盒算出来，
       所以 origin 必须是 top —— center 会让内容同时溢出上下两边，
       上边那半截滚不到（overflow 只朝下可滚）。 */
    overflow:auto;overscroll-behavior:contain;
    box-shadow:0 10px 20px -16px #000}
  .cs-fit{transform:scale(var(--csFit,1));transform-origin:top center}
}

/* ── 下注条 / 主按钮 / 结果条 ─────────────────────────────────────────── */
.cs-stake{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:13px}
.cs-stakel{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--ink2);margin-bottom:9px}
.cs-stakel em{font-style:normal;font-size:10.5px;color:var(--ink3)}
.cs-stakerow{display:flex;gap:7px}
.cs-sbtn{flex:0 0 auto;padding:0 11px;border-radius:9px;background:var(--bg3);
  border:1px solid var(--line);font-size:12px;color:var(--ink2)}
.cs-sbtn:hover:not(:disabled){color:var(--ink);border-color:var(--tone)}
.cs-amt{flex:1;display:flex;align-items:center;background:var(--bg3);
  border:1px solid var(--line);border-radius:9px;padding:0 10px}
.cs-amt i{font-style:normal;color:var(--ink3);font-size:13px}
.cs-amt input{background:none;border:none;padding:9px 6px;font-size:15px;font-weight:700}
.cs-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.cs-qb{font-size:11.5px;padding:5px 10px;border-radius:8px;background:var(--bg3);
  border:1px solid var(--line);color:var(--ink3)}
.cs-qb.on{border-color:var(--tone);color:var(--ink);background:hsl(var(--hue) 70% 55%/.14)}

.cs-play{width:100%;border-radius:14px;padding:15px 12px;font-weight:900;
  background:linear-gradient(140deg,hsl(var(--hue) 78% 56%),hsl(var(--hue) 72% 44%));
  color:#0b0e14;display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 8px 24px hsl(var(--hue) 70% 40%/.32);transition:transform .12s,filter .12s}
.cs-play:hover:not(:disabled){filter:brightness(1.08)}
.cs-play:active:not(:disabled){transform:scale(.985)}
.cs-play:disabled{opacity:.45;box-shadow:none}
.cs-play b{font-size:16px;letter-spacing:1px}
.cs-play em{font-style:normal;font-size:11.5px;opacity:.78}
.cs-play.cash{background:linear-gradient(140deg,#ffd24a,#e79a00)}

.cs-payline{border-radius:12px;padding:12px 14px;display:flex;align-items:baseline;gap:10px;
  border:1px solid var(--line);background:var(--bg2);animation:csPop .32s cubic-bezier(.2,1.5,.4,1)}
.cs-payline.win{border-color:rgba(237,161,0,.55);background:rgba(237,161,0,.10)}
.cs-payline.win b{color:var(--warn);font-size:19px}
.cs-payline.push{border-color:var(--line)}
.cs-payline.lose b{color:var(--ink3)}
.cs-payline em{font-style:normal;font-size:11.5px;color:var(--ink2)}
.cs-payline i{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--ink3)}
@keyframes csPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ── 弹层（公平性 / 历史）────────────────────────────────────────────── */
.cs-modal{position:fixed;inset:0;z-index:160;background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:700px){.cs-modal{align-items:center}}
.cs-sheet{background:var(--bg2);border:1px solid var(--line);border-radius:18px 18px 0 0;
  width:100%;max-width:620px;max-height:86vh;display:flex;flex-direction:column;
  animation:csUp .24s ease-out}
@media(min-width:700px){.cs-sheet{border-radius:18px}}
@keyframes csUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.cs-sh{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.cs-sh b{font-size:15px}
.cs-x{color:var(--ink3);font-size:16px;padding:4px 8px}
.cs-sb{padding:16px;overflow:auto}
.cs-fair-int{font-size:12.5px;color:var(--ink2);line-height:1.8;margin-bottom:14px}
.cs-fair-note{font-size:11.5px;color:var(--ink3);line-height:1.7;margin-top:8px}
.cs-field{margin-bottom:10px}
.cs-field>span{display:block;font-size:11px;color:var(--ink3);margin-bottom:4px}
.cs-fv{display:flex;gap:8px;align-items:center;background:var(--bg3);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.cs-fv code{flex:1;font-size:11px;word-break:break-all;color:var(--ink2)}
.cs-fv button{font-size:11px;color:var(--acc);flex:0 0 auto}
.cs-rot{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cs-rot input{flex:1;min-width:180px}
.cs-reveal{margin-top:14px;border:1px solid rgba(237,161,0,.4);border-radius:12px;
  padding:12px;background:rgba(237,161,0,.07)}
.cs-reveal>b{display:block;font-size:12.5px;margin-bottom:8px;color:var(--warn)}
.cs-revlist{margin-top:14px}
.cs-revlist>b{display:block;font-size:12.5px;margin-bottom:6px}
.cs-revrow{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);
  padding:5px 0;border-bottom:1px solid var(--line)}
.cs-load{padding:26px;text-align:center;color:var(--ink3);font-size:12.5px}
.cs-htbl{width:100%;border-collapse:collapse;font-size:12px}
.cs-htbl th{text-align:left;font-size:10.5px;color:var(--ink3);padding:5px 6px;
  border-bottom:1px solid var(--line)}
.cs-htbl td{padding:5px 6px;border-bottom:1px solid var(--line);color:var(--ink2)}
.cs-htbl tr.win td{color:var(--warn)}
.cs-htbl tr.lose td{color:var(--ink3)}

/* ── 玩法说明（需求152）───────────────────────────────────────────────
   一屏能读完的说明书：开头一句话讲清在干什么，紧跟一排"这一桌的真实配置"，
   再分节给步骤/赔付/返还率/要点。全部沿用弹层既有的排版尺度，
   只多了标题的分隔线与表格 —— 不引入第二套视觉语言。 */
.csr-lead{font-size:13px;line-height:1.85;color:var(--ink);margin-bottom:14px}
.csr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.csr-facts>div{background:var(--bg3);padding:9px 11px}
.csr-facts dt{font-size:10.5px;color:var(--ink3);margin-bottom:3px}
.csr-facts dd{font-size:12.5px;font-weight:700;color:var(--ink2)}
.csr-sec{margin-top:24px}
.csr-sec h4{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:10px;
  display:flex;align-items:center;gap:9px}
.csr-sec h4::after{content:'';flex:1;height:1px;background:var(--line)}
.csr-sec p{font-size:12.5px;line-height:1.85;color:var(--ink2);margin-bottom:8px}
.csr-list{margin:0 0 8px;padding-left:19px}
.csr-list li{font-size:12.5px;line-height:1.8;color:var(--ink2);margin-bottom:7px}
.csr-list li::marker{color:var(--tone)}
.csr-note{font-size:11.5px;line-height:1.75;color:var(--ink3);margin-top:2px;
  padding-left:10px;border-left:1px solid hsl(var(--hue) 70% 55%/.5)}
.csr-tw{overflow-x:auto;margin:2px 0 8px}
.csr-tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:270px}
.csr-tbl th{text-align:left;font-size:10.5px;font-weight:600;color:var(--ink3);
  padding:6px 9px 6px 0;border-bottom:1px solid var(--line);white-space:nowrap}
/* ⚠️ white-space 必须显式写回 normal：本文件第 403 行有一条全局 `td{white-space:nowrap}`
   （给数据表用的）。不覆盖它，说明书里的整句话就不折行 —— 手机上要横向拖着读。 */
.csr-tbl td{padding:7px 9px 7px 0;border-bottom:1px solid var(--line);
  color:var(--ink2);line-height:1.6;vertical-align:top;white-space:normal}
.csr-tbl td:first-child{color:var(--ink)}
.csr-tbl tr:last-child td{border-bottom:none}
.csr-fair{margin-top:24px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg3);font-size:11.5px;line-height:1.8;color:var(--ink3)}

/* ══════════════════════════════ 老虎机 ══════════════════════════════ */
.sl-machine{position:relative}
.sl-frame{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  background:#0a0d14;border:2px solid hsl(var(--hue) 60% 32%);border-radius:14px;padding:8px}
.sl-reel{overflow:hidden;height:calc(3 * var(--cell,64px));border-radius:9px;
  background:linear-gradient(180deg,#11151f,#161b28 40%,#161b28 60%,#11151f);
  box-shadow:inset 0 10px 16px -10px #000,inset 0 -10px 16px -10px #000}
.sl-cell{height:var(--cell,64px);display:grid;place-items:center;font-size:30px}
.sl-reel.spin .sl-cell{filter:blur(1.5px) brightness(1.05)}
.sl-cell.lit{background:radial-gradient(circle,hsl(var(--hue) 90% 55%/.32),transparent 70%);
  animation:slLit .55s ease-in-out infinite alternate}
@keyframes slLit{from{transform:scale(1)}to{transform:scale(1.14)}}
.sl-lineoverlay{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
  pointer-events:none}
.sl-lineoverlay polyline{fill:none;stroke:hsl(var(--hue) 90% 60%);stroke-width:1.4;
  stroke-linejoin:round;filter:drop-shadow(0 0 3px hsl(var(--hue) 90% 60%));
  animation:slDraw .5s ease-out}
@keyframes slDraw{from{opacity:0}to{opacity:1}}
.sl-banner{height:44px;display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:10px;opacity:0;transition:opacity .25s}
.sl-banner.on{opacity:1}
.sl-banner b{font-size:19px}
.sl-banner span{color:var(--warn);font-size:17px;font-weight:800}
.sl-banner em{font-style:normal;font-size:11px;color:var(--ink3)}
.sl-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);
  padding:0 3px}
.sl-pt{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px}
.sl-pttbl{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:9px}
.sl-pttbl th{color:var(--ink3);font-size:10px;padding:3px 5px;text-align:right}
.sl-pttbl th:first-child{text-align:left}
.sl-pttbl td{padding:3px 5px;text-align:right;color:var(--ink2)}
.sl-pttbl td:first-child{text-align:left}
.sl-ptn{font-size:10.5px;color:var(--ink3);line-height:1.6;margin-top:7px}
@media(max-width:520px){.sl-frame{--cell:52px}.sl-cell{font-size:24px}}

/* ══════════════════════════════ 轮盘 ══════════════════════════════ */
.rl-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.rl-wheelwrap{position:relative;width:min(300px,74vw);aspect-ratio:1}
.rl-wheel{position:absolute;inset:0}
.rl-wheel svg{width:100%;height:100%}
.rl-rim{fill:none;stroke:hsl(var(--hue) 45% 30%);stroke-width:3}
.rl-sec.red{fill:#b4243a}.rl-sec.black{fill:#171c26}.rl-sec.green{fill:#0e8a55}
.rl-sec{stroke:#0b0e14;stroke-width:.6}
.rl-num{fill:#fff;font-size:7px;text-anchor:middle;dominant-baseline:middle;font-weight:700}
.rl-hub{fill:#1b2231;stroke:hsl(var(--hue) 45% 34%);stroke-width:1.5}
.rl-hub2{fill:#232c3e}
.rl-pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;
  border-top:14px solid var(--warn);filter:drop-shadow(0 2px 4px #000)}
.rl-ballorbit{position:absolute;inset:0;z-index:2}
.rl-ball{position:absolute;left:50%;top:5%;width:11px;height:11px;border-radius:50%;
  transform:translateX(-50%);background:radial-gradient(circle at 35% 30%,#fff,#b9c2d4);
  box-shadow:0 1px 4px #000}
.rl-ball.dropping{animation:rlDrop 4.2s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes rlDrop{0%{top:5%}70%{top:9%}100%{top:19%}}
.rl-result{height:44px;min-width:64px;padding:0 16px;border-radius:12px;display:grid;
  place-items:center;font-size:24px;font-weight:900;opacity:0;transform:scale(.8);
  transition:opacity .25s,transform .25s;background:var(--bg3)}
.rl-result.on{opacity:1;transform:scale(1)}
.rl-result.red{background:#b4243a}.rl-result.black{background:#171c26}
.rl-result.green{background:#0e8a55}
.rl-table{width:100%;display:grid;gap:4px;
  grid-template-columns:44px 1fr 52px;grid-template-areas:'zero nums cols' 'out out out'}
.rl-zero{grid-area:zero;display:flex;flex-direction:column;gap:4px}
.rl-nums{grid-area:nums;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.rl-cols{grid-area:cols;display:grid;grid-template-rows:repeat(3,1fr);gap:4px}
.rl-outside{grid-area:out;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px}
.rl-cell{position:relative;border-radius:7px;border:1px solid var(--line);background:var(--bg3);
  font-size:12px;font-weight:700;padding:9px 2px;color:var(--ink2);min-height:34px}
.rl-cell.red{background:#8d1c2d;color:#fff;border-color:#a5233a}
.rl-cell.black{background:#141922;color:#fff}
.rl-cell.green{background:#0c6f45;color:#fff}
.rl-cell.tall{flex:1}
.rl-cell.out{background:var(--bg3);font-size:11px}
.rl-cell.out.red{background:#8d1c2d}.rl-cell.out.black{background:#141922}
.rl-cell.has{outline:2px solid var(--warn);outline-offset:-2px}
.rl-cell.hit{animation:rlHit .6s ease-in-out 3}
@keyframes rlHit{50%{box-shadow:0 0 0 3px var(--warn);transform:scale(1.06)}}
.rl-bet{position:absolute;right:2px;bottom:2px;font-size:9px;font-style:normal;
  background:var(--warn-solid);color:#20160a;border-radius:5px;padding:0 3px;font-weight:800}
.rl-nodouble{font-size:8.5px;color:var(--ink3);text-align:center;line-height:1.2}
.rl-chips,.rl-sum,.rl-recent,.bc-road,.dc-histr{background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;font-size:11.5px;color:var(--ink3)}
.rl-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rl-chip{width:42px;height:42px;border-radius:50%;border:2px dashed rgba(255,255,255,.25);
  background:var(--bg3);font-size:11px;font-weight:800;color:var(--ink2)}
.rl-chip.on{border-style:solid;border-color:var(--warn);color:var(--warn);
  background:rgba(237,161,0,.14)}
.rl-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rl-sum b{font-size:15px;color:var(--ink)}
.rl-sum .cs-chip{margin-left:auto}
.rl-wins{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rl-winrow{display:flex;justify-content:space-between;font-size:12px;padding:3px 0}
.rl-winrow b{color:var(--warn)}
.rl-recent>div,.bc-road>div,.dc-histr>div{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.rl-rn{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  font-size:10.5px;font-style:normal;font-weight:800;color:#fff}
.rl-rn.red{background:#b4243a}.rl-rn.black{background:#171c26}.rl-rn.green{background:#0e8a55}
/*
 * 需求145：轮盘舞台的自然高度接近 1000px（轮子 289 + 整张下注桌 ~570），
 * 光靠 useFitScale 会一路压到缩放下限 0.5 —— 桌上的数字就看不清了，
 * 而且到了下限仍有一小截被裁。手机端先把轮子和格子本身收一收，
 * 让自动缩放停在 0.6+ 这个还读得动的区间（其余 7 款不需要，别一起动）。
 */
@media(max-width:899px){
  .rl-stage{gap:9px}
  .rl-wheelwrap{width:min(210px,54vw)}
  .rl-result{height:36px;font-size:20px}
  .rl-cell{min-height:26px;padding:5px 2px;font-size:11.5px}
  .rl-table,.rl-nums,.rl-cols,.rl-zero,.rl-outside{gap:3px}
}

/* ══════════════════════════════ 扑克牌（21点 / 百家乐）═════════════════
   ⚠️ 类名必须是 `.pcd` 而**不是** `.cd` —— `.cd` 早就被交易页的「距封盘倒计时」
   容器占了（本文件 349 行）。两者同名同权重，本节在后面 → 卡牌的
   width:52px/height:74px + 卡面渐变**赢下**倒计时容器，把倒计时和它下面那行
   「预测 HH:MM–HH:MM 这根 K 线的方向」一起压成一张 52×74 的扑克牌（需求143 的真因）。
   新增博彩样式一律用自己的前缀，别再占通用短名。 */
.pcd{width:52px;height:74px;border-radius:8px;background:linear-gradient(160deg,#fdfdfd,#e7ebf2);
  color:#141922;position:relative;flex:0 0 auto;box-shadow:0 4px 12px rgba(0,0,0,.45);
  animation:cdDeal .42s cubic-bezier(.2,.9,.3,1.2) both}
.pcd b{position:absolute;top:4px;left:6px;font-size:14px;line-height:1}
.pcd i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:26px;
  font-style:normal}
.pcd em{position:absolute;bottom:4px;right:6px;font-size:14px;font-style:normal;
  transform:rotate(180deg)}
.pcd.red{color:#c62b45}
.pcd.back{background:repeating-linear-gradient(45deg,#233152,#233152 5px,#1a2540 5px,#1a2540 10px);
  border:2px solid #33456e}
.pcd.flip{animation:cdFlip .5s ease-out both}
@keyframes cdDeal{from{opacity:0;transform:translate(90px,-70px) rotate(18deg) scale(.85)}
  to{opacity:1;transform:none}}
@keyframes cdFlip{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}

.bj-table{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:26px;min-height:340px}
.bj-shoe{position:absolute;right:-4px;top:-6px;width:34px;height:50px;border-radius:6px;
  background:repeating-linear-gradient(45deg,#233152,#233152 4px,#1a2540 4px,#1a2540 8px);
  border:1px solid #33456e;opacity:.55}
.bj-side{display:flex;flex-direction:column;gap:8px}
.bj-side.dealer{align-items:center}
.bj-side.player{align-items:center}
.bj-lbl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2)}
.bj-lbl b{font-size:16px;color:var(--ink)}
.bj-cards{display:flex;gap:7px;min-height:74px;align-items:center}
.bj-hands{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.bj-hand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 10px;
  border-radius:12px;border:1px solid transparent}
.bj-hand.active{border-color:var(--tone);background:hsl(var(--hue) 70% 50%/.08)}
.bj-tag{font-style:normal;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:5px;
  background:var(--bg3);color:var(--ink3)}
.bj-tag.bj{background:var(--warn-solid);color:#20160a}
.bj-tag.bust,.bj-tag.lose{background:rgba(246,70,93,.2);color:var(--dn)}
.bj-tag.win{background:rgba(14,203,129,.2);color:var(--up)}
.bj-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;padding:12px}
.bj-act{padding:14px 8px;border-radius:11px;background:var(--bg3);border:1px solid var(--line);
  font-weight:800;font-size:14px;color:var(--ink2)}
.bj-act.pri{background:linear-gradient(140deg,hsl(var(--hue) 78% 56%),hsl(var(--hue) 72% 44%));
  color:#0b0e14;border:none}
.bj-act:disabled{opacity:.35}
.bj-hint{grid-column:1/-1;font-size:10.5px;color:var(--ink3);line-height:1.6}
.bj-rules{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px;
  display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--ink3)}
.bj-rules b{flex:1 0 100%;color:var(--ink2);font-size:12px}
.bj-msg{font-size:11.5px;color:var(--warn)}

/* ── 百家乐 ─────────────────────────────────────────────────────────── */
.bc-table{display:flex;flex-direction:column;gap:16px;align-items:center}
.bc-hands{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;width:100%}
.bc-hand{flex:1;min-width:150px;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.bc-hand.p.win{border-color:#4d7cff;box-shadow:0 0 0 1px #4d7cff inset}
.bc-hand.b.win{border-color:#f6465d;box-shadow:0 0 0 1px #f6465d inset}
.bc-hl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.bc-hl b{font-size:20px;color:var(--ink)}
.bc-cards{display:flex;gap:6px;min-height:74px}
.bc-banner{font-size:20px;font-weight:900;padding:8px 22px;border-radius:12px;
  animation:csPop .35s cubic-bezier(.2,1.5,.4,1)}
.bc-banner.player{background:rgba(77,124,255,.18);color:#8fb0ff}
.bc-banner.banker{background:rgba(246,70,93,.18);color:#ff8b9c}
.bc-banner.tie{background:rgba(14,203,129,.18);color:#5be0aa}
.bc-spots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%}
.bc-spot{position:relative;border-radius:11px;border:1px solid var(--line);background:var(--bg3);
  padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:3px}
.bc-spot b{font-size:15px}
.bc-spot em{font-style:normal;font-size:10px;color:var(--ink3)}
.bc-spot i{font-style:normal;position:absolute;top:3px;right:5px;font-size:9.5px;
  background:var(--warn-solid);color:#20160a;border-radius:5px;padding:0 4px;font-weight:800}
.bc-spot.has{outline:2px solid var(--warn);outline-offset:-2px}
.bc-spot.hit{animation:rlHit .6s ease-in-out 3}
.bc-spot.p{color:#8fb0ff}.bc-spot.b{color:#ff8b9c}.bc-spot.t{color:#5be0aa}
.bc-spot.pp,.bc-spot.bp{font-size:12px}
.bc-rd{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-style:normal;font-weight:800;color:#fff}
.bc-rd.player{background:#3a63d8}.bc-rd.banker{background:#c62b45}.bc-rd.tie{background:#0e8a55}

/* ══════════════════════════════ 花旗骰 ══════════════════════════════ */
.dc-stage{display:flex;flex-direction:column;gap:14px}
.dc-phase{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.dc-puck{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:900;background:#1a2130;border:2px solid #33405a;color:var(--ink3)}
.dc-puck.on{background:#fff;color:#0b0e14;border-color:#fff}
.dc-dice{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 0;
  position:relative}
.dc-die{width:74px;height:74px}
.dc-die svg{width:100%;height:100%}
.dc-die rect{fill:#f2f5fa;stroke:#c8d0de;stroke-width:2}
.dc-die circle{fill:#141922}
.dc-die.rolling{animation:dcRoll .3s linear infinite}
@keyframes dcRoll{0%{transform:rotate(0) translateY(0)}25%{transform:rotate(90deg) translateY(-8px)}
  50%{transform:rotate(180deg) translateY(0)}75%{transform:rotate(270deg) translateY(-6px)}
  100%{transform:rotate(360deg) translateY(0)}}
.dc-sum{font-size:30px;font-weight:900;color:var(--tone);min-width:44px;text-align:center}
.dc-sum.hide{opacity:0}
.dc-board{display:flex;flex-direction:column;gap:10px}
.dc-gt{font-size:11px;color:var(--ink3);margin-bottom:5px}
.dc-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.dc-cell{position:relative;border-radius:10px;border:1px solid var(--line);background:var(--bg3);
  padding:9px 4px;display:flex;flex-direction:column;gap:2px;align-items:center}
.dc-cell b{font-size:12.5px}
.dc-cell em{font-style:normal;font-size:9.5px;color:var(--ink3)}
.dc-cell i{font-style:normal;position:absolute;top:2px;right:3px;font-size:9px;
  background:var(--warn-solid);color:#20160a;border-radius:4px;padding:0 3px;font-weight:800}
.dc-cell.has{outline:2px solid var(--warn);outline-offset:-2px}
.dc-cell.win{border-color:var(--up);background:rgba(14,203,129,.12)}
.dc-cell.lose{opacity:.4}
.dc-note{font-size:10.5px;color:var(--ink3);line-height:1.7}
.dc-live{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px}
.dc-lrow{display:flex;align-items:baseline;gap:8px;font-size:12px;padding:4px 0;
  border-bottom:1px solid var(--line)}
.dc-lrow em{font-style:normal;color:var(--ink3);font-size:10.5px}
.dc-lrow b{margin-left:auto;color:var(--ink3)}
.dc-lrow.win b{color:var(--warn)}
.dc-lrow.lose{opacity:.45}
.dc-h{width:22px;height:22px;border-radius:6px;background:var(--bg3);display:grid;
  place-items:center;font-size:10.5px;font-style:normal;color:var(--ink2)}
.dc-h.seven{background:rgba(246,70,93,.22);color:#ff8b9c}

/* ══════════════════════════════ Plinko ══════════════════════════════ */
.pk-board{position:relative;aspect-ratio:1.15;max-width:520px;margin:0 auto;width:100%}
.pk-pegs{position:absolute;inset:0 0 34px 0;display:flex;flex-direction:column;
  justify-content:space-between;padding:6px 0;overflow:hidden}
/* 钉子间距**必须**等于小球横坐标的一格（= 板宽/行数）。
   两者不一致时小球看起来会从钉子中间穿过去 —— 这类"差一点点"的错位最难查，
   所以这里的 5px 与下面 gap 里的 5px 是同一个数，改一个必须改另一个。 */
.pk-row{display:flex;justify-content:center;gap:calc(100% / var(--rows) - 5px)}
.pk-row i{width:5px;height:5px;border-radius:50%;background:#39445c;flex:0 0 auto}
.pk-row.lit i{background:hsl(var(--hue) 80% 60%);box-shadow:0 0 6px hsl(var(--hue) 80% 60%)}
.pk-ball{position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,hsl(var(--hue) 80% 55%));
  box-shadow:0 0 10px hsl(var(--hue) 80% 55%/.8);transform:translate(-50%,-50%);
  pointer-events:none;z-index:2}
.pk-buckets{position:absolute;left:0;right:0;bottom:0;display:flex;gap:2px}
.pk-bk{flex:1;border-radius:6px;text-align:center;font-size:9.5px;font-weight:800;padding:6px 0;
  background:hsl(var(--hue) 60% calc(26% + var(--k) * 30%));color:#0b0e14;
  transition:transform .15s}
.pk-bk.cold{color:var(--ink2);background:#232c3e}
.pk-bk.hit{animation:pkHit .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pkHit{0%{transform:translateY(0)}40%{transform:translateY(7px) scale(1.12)}
  100%{transform:translateY(0)}}
.pk-opt{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pk-opt>span{display:block;font-size:11px;color:var(--ink3);margin-bottom:7px}
.pk-seg{display:flex;gap:5px}
.pk-seg.wrap{flex-wrap:wrap}
.pk-seg button{flex:1;min-width:34px;padding:8px 4px;border-radius:8px;background:var(--bg3);
  border:1px solid var(--line);font-size:11.5px;color:var(--ink3)}
.pk-seg button.on{border-color:var(--tone);color:var(--ink);background:hsl(var(--hue) 70% 55%/.16)}
.pk-note{font-size:10.5px;color:var(--ink3);line-height:1.7}

/* ══════════════════════════════ 扫雷 ══════════════════════════════ */
.mn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:420px;margin:0 auto}
.mn-grid.shake{animation:mnShake .5s}
@keyframes mnShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.mn-t{aspect-ratio:1;border-radius:12px;background:linear-gradient(160deg,#232c3e,#1a2130);
  border:1px solid #2e3a52;display:grid;place-items:center;font-size:26px;
  transition:transform .3s,background .3s;transform-style:preserve-3d}
.mn-t:hover:not(:disabled){background:linear-gradient(160deg,#2b3650,#1f2739)}
.mn-t.open{transform:rotateY(180deg)}
.mn-t.open .mn-face{transform:rotateY(180deg)}
.mn-t.gem{background:linear-gradient(160deg,hsl(var(--hue) 60% 30%),hsl(var(--hue) 55% 20%));
  border-color:hsl(var(--hue) 70% 45%)}
.mn-t.boom{background:linear-gradient(160deg,#5e1a26,#3a1019);border-color:#a5233a}
.mn-t:disabled{cursor:default}
.mn-live{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.mn-live span{display:block;font-size:10.5px;color:var(--ink3)}
.mn-live b{font-size:17px}
.mn-live b.next{color:var(--tone)}
.mn-cap{font-size:10.5px;color:var(--warn);text-align:center}
.mn-ladder{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-size:11px;color:var(--ink3)}
.mn-ladder>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.mn-ladder i{font-style:normal;font-size:10.5px;background:var(--bg3);border-radius:6px;
  padding:3px 6px;color:var(--ink2)}
.mn-ladder i.on{background:hsl(var(--hue) 70% 50%/.22);color:var(--ink)}
.mn-ladder em{font-style:normal;color:var(--ink3);margin-right:4px}

/* ══════════════════════════════ 基诺 ══════════════════════════════ */
.kn-stage{display:flex;flex-direction:column;gap:12px}
.kn-status{text-align:center;font-size:13px;color:var(--ink2)}
.kn-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.kn-n{aspect-ratio:1;border-radius:8px;background:var(--bg3);border:1px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--ink3);transition:transform .18s,background .18s}
.kn-n.pick{background:hsl(var(--hue) 70% 45%/.35);border-color:hsl(var(--hue) 75% 60%);
  color:var(--ink)}
.kn-n.drawn{background:#2b3650;color:var(--ink2)}
.kn-n.hit{background:var(--warn-solid);color:#20160a;border-color:var(--warn);
  animation:knHit .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes knHit{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.kn-picked{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink3)}
.kn-picked .cs-chip:first-of-type{margin-left:auto}
.kn-table{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-size:11px;color:var(--ink3)}
.kn-table>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.kn-table i{font-style:normal;font-size:10.5px;background:var(--bg3);border-radius:6px;
  padding:3px 6px;color:var(--ink2)}
.kn-table i.on{background:var(--warn-solid);color:#20160a}
.kn-table em{font-style:normal;margin-right:4px;color:var(--ink3)}
.kn-table i.on em{color:#20160a}
@media(max-width:560px){.kn-grid{grid-template-columns:repeat(8,1fr)}}

/* 动画偏好：系统开了"减少动态效果"就只留最基本的状态变化 */
@media(prefers-reduced-motion:reduce){
  .pcd,.cs-payline,.bc-banner,.kn-n.hit,.pk-bk.hit,.mn-grid.shake,.dc-die.rolling,
  .rl-cell.hit,.bc-spot.hit,.sl-cell.lit,.rl-ball.dropping{animation:none!important}
  .sl-strip,.rl-wheel,.rl-ballorbit{transition-duration:.4s!important}
}

/* ══════════════════════ 需求140：离线复算页（可验证公平的第三步）══════════════
   两种形态共用一套样式：
     · 整页（大厅进来）—— 有标题、算法说明、可复制脚本
     · compact（嵌在游戏页的「公平性」面板里）—— 只留自检与复算，因为那里空间小，
       而且用户此刻手里正好有种子，最需要的就是"立刻拿它算一遍"
   ══════════════════════════════════════════════════════════════════════════ */
.vf{--tone:#4d7cff;display:flex;flex-direction:column;gap:12px;padding-bottom:22px}
.vf.compact{gap:10px;padding:0;margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.vf-head{display:flex;gap:12px;align-items:flex-start;padding:4px 0 6px}
.vf-head h2{font-size:22px;letter-spacing:-.4px}
.vf-head p{color:var(--ink2);font-size:12.5px;margin-top:4px;line-height:1.7}
.vf-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px}
.vf.compact .vf-card{background:var(--bg3);padding:12px}
.vf-card>b{display:block;font-size:13.5px;margin-bottom:10px}
.vf-h2{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:10px}
.vf-h2 b{font-size:13.5px}

.vf-card.algo ol{list-style:none;display:flex;flex-direction:column;gap:10px}
.vf-card.algo li{display:grid;gap:3px;padding-left:12px;border-left:2px solid var(--tone)}
.vf-card.algo li>span{font-size:12px;font-weight:700;color:var(--tone)}
.vf-card.algo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--ink);background:var(--bg3);border-radius:6px;padding:5px 8px;
  overflow-x:auto;white-space:pre}
.vf-card.algo li>em{font-style:normal;font-size:11px;color:var(--ink3);line-height:1.6}
.vf-note{font-size:11px;color:var(--ink3);line-height:1.7;margin-top:9px}

.vf-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.vf-row label,.vf-full{display:block;font-size:11.5px;color:var(--ink3);margin-bottom:8px}
.vf-row input,.vf-full input,.vf-row select{width:100%;margin-top:5px;font-size:12px;padding:8px 10px}
.vf-row select{background:var(--bg3);border:1px solid var(--line);border-radius:8px;color:inherit}

.vf-verdict{margin-top:10px;border-radius:10px;padding:10px 12px;background:var(--bg3);
  border:1px solid var(--line);font-size:12px;display:flex;flex-direction:column;gap:6px}
.vf-verdict.ok{border-color:rgba(14,203,129,.5);background:rgba(14,203,129,.08)}
.vf-verdict.ok b{color:var(--up)}
.vf-verdict.bad{border-color:rgba(246,70,93,.5);background:rgba(246,70,93,.08)}
.vf-verdict.bad b{color:var(--dn)}
.vf-verdict>div{display:flex;flex-direction:column;gap:3px}
.vf-verdict span{color:var(--ink3);font-size:11px}
.vf-verdict code{font-size:11px;word-break:break-all;color:var(--ink2)}

.vf-list{display:flex;flex-direction:column;gap:5px;max-height:260px;overflow:auto}
.vf-item{display:grid;grid-template-columns:auto auto 1fr auto;gap:9px;align-items:baseline;
  text-align:left;padding:8px 10px;border-radius:9px;background:var(--bg3);
  border:1px solid transparent;font-size:11.5px;color:var(--ink2)}
.vf-item:hover{border-color:var(--tone)}
.vf-item.on{border-color:var(--tone);background:rgba(77,124,255,.12)}
.vf-item .vf-g{font-weight:700;color:var(--ink)}
.vf-item em,.vf-item i,.vf-item u{font-style:normal;text-decoration:none;color:var(--ink3);font-size:11px}
.vf-item u{text-align:right}
.vf-empty{font-size:11.5px;color:var(--ink3);line-height:1.8;padding:6px 2px}

.vf-bulk{margin-top:10px;border-radius:10px;padding:11px 13px;font-size:12px;
  display:flex;flex-direction:column;gap:5px;border:1px solid var(--line)}
.vf-bulk.ok{border-color:rgba(14,203,129,.5);background:rgba(14,203,129,.08)}
.vf-bulk.ok b{color:var(--up);font-size:14px}
.vf-bulk.bad{border-color:rgba(246,70,93,.5);background:rgba(246,70,93,.08)}
.vf-bulk.bad b{color:var(--dn);font-size:14px}
.vf-bulk span{color:var(--ink3);font-size:11px}
.vf-badrow{font-size:11px;color:var(--dn)}

.vf-out{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.vf-out>div{display:flex;flex-direction:column;gap:4px}
.vf-out span{font-size:11px;color:var(--ink3)}
.vf-out code{font-size:12px;background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;word-break:break-all;color:var(--ink)}
.vf-toggle{margin-top:10px;font-size:11.5px;color:var(--acc)}
.vf-bytes{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.vf-bytes p{font-size:11px;color:var(--ink3)}
.vf-bytes>div{display:flex;flex-direction:column;gap:2px}
.vf-bytes code{font-size:10.5px;color:var(--ink3);word-break:break-all}
.vf-bytes code.val{color:var(--ink2)}
.vf-code{background:var(--surf-sunken);border:1px solid var(--line);border-radius:10px;padding:12px;
  font-size:10.5px;line-height:1.65;overflow-x:auto;color:var(--ink2);white-space:pre;
  max-height:420px;overflow-y:auto}

.cs-preview{margin-bottom:12px;border-radius:12px;padding:10px 14px;font-size:12px;
  background:rgba(237,161,0,.10);border:1px solid rgba(237,161,0,.4);color:var(--warn)}

/* 大厅里的入口卡 */
.cs-verify{margin-top:14px;width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  color:var(--ink2);transition:border-color .18s,transform .18s}
.cs-verify:hover{border-color:#4d7cff;transform:translateY(-1px)}
.cs-verify>svg{color:#4d7cff;flex:0 0 auto}
.cs-verify b{display:block;font-size:14px;color:var(--ink)}
.cs-verify em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.cs-verify i{margin-left:auto;font-style:normal;color:var(--ink3)}