/* Sora 自托管：v2.css:7 的 font-family:Sora 依赖这两段。取自 Google Fonts css2 响应 （上游 v17），unicode-range 逐字抄，url() 改指向本站。族名必须与 :7 完全一致， 否则文件下得下来、@font-face 也在，渲染却一个字形都不换。 */ @font-face{font-family:Sora;font-style:normal;font-weight:400 800;font-display:swap; src:url("/games-assets/f74f4b0d9751e1205fd3f21f8da0554634e09b0c48c18f3dd66b4f18cb2fc003/public/trade/fonts/sora-latin-ext-v17.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:Sora;font-style:normal;font-weight:400 800;font-display:swap; src:url("/games-assets/f74f4b0d9751e1205fd3f21f8da0554634e09b0c48c18f3dd66b4f18cb2fc003/public/trade/fonts/sora-latin-v17.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} *{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#0b0c11; --surface:#14161f; --card:#1b1d27; --edge:#282b39; --edge2:#343849; --fg:#eef0f7; --dim:#9096ab; --faint:#666c82; --up:#3ddc97; --down:#ff5d73; --gold:#ffc94d; --accent:#8b8fff; } html,body{background:var(--bg);color:var(--fg);font-family:Sora,system-ui,sans-serif;-webkit-font-smoothing:antialiased} body{padding-bottom:96px} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} /* ---------------- 顶栏 ---------------- */ .top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;height:60px;padding:0 22px; background:rgba(11,12,17,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--edge)} .brand{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:.02em;font-size:17px} .nav{display:flex;gap:4px;margin-left:8px} .nav a{padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--dim);text-decoration:none;transition:.16s} .nav a:hover{color:var(--fg)} .nav a.on{background:var(--surface);color:var(--fg)} .mobilenav{display:none} /* NAV-V2-03：三页统一的账户位。四态（未登录 / 已登录未绑 / 已绑 / loading·gated）由 wallet-connect.js 的 walletConnectView() 决定，这里只管长相。 🔴 一律用嵌套选择器：再写一条裸 .top{...} 就是第二条同名规则，NAV-10 那套层序判据 按选择器全等取 .top，多一条只会让层序读数变得说不清。 🔴 v2.css 没有全局 a{color:inherit;text-decoration:none}（另外两张表有），所以别处靠它 兜住的 color / text-decoration 在这里一律显式写死——否则同一份 markup 在投注页渲染不一样。 🔴 375px 的顶栏内容宽只有 331px（.top 三表逐字节相同、没有任何 media 覆写）。投注页那一格 还并排着 17 条声明的余额胶囊（自然宽 88px），brand 103.34 + 两个 gap 40 + 胶囊 88 只剩 100px 给入口——padding 用 14px 时入口自然宽恰好 100.00px，差 0.34px 就整行一起换行、胶囊被挤成两行。 所以这里 padding 收到 13px（与 .wallet 同值）并写死 flex:none + white-space:nowrap： 实测 329.34 ≤ 331，三页在 375px 都不换行。余量只有 1.66px，见报告里的越界登记。 */ .top .acct{margin-left:auto;flex:none;display:flex;align-items:center;gap:9px} .top .acct button{min-height:44px;padding:7px 13px;border-radius:999px;border:1px solid var(--edge2);font-size:14px;font-weight:600;color:var(--fg);text-decoration:none;white-space:nowrap;transition:.16s} .top .acct button:hover{border-color:var(--accent);color:var(--accent)} .top .acct button:disabled{opacity:.5;cursor:default} .top .acct .addr{font-size:13px;font-weight:700;color:var(--dim);text-decoration:none;font-variant-numeric:tabular-nums} /* NAV-V2-04：投注页顶栏有两个 auto 边距——.wallet{margin-left:auto}（v2.css 既有）与上面这条 .top .acct{margin-left:auto}。flex 把剩余空间在两个 auto 之间**均分**，余额胶囊因此停在正中 （1990px 实测 x=1055.67，右边空出一大片），而账户位修前修后一直贴右——它是最后一个 flex 项， 后面没有 auto 边距。把 .acct 这一侧的 auto 收成 0，剩余空间就全归 .wallet，两者贴右相邻， 间距＝.top 的 gap 20。 🔴 用相邻兄弟选择器而不是动 .wallet：.wallet 只在投注页存在，这条在另外两页与三份原型里 一次都不会命中，三张表因此仍能逐字节相同，.wallet 自己的声明一个字节都不用改。 🔴 NAV-13 那条跨表比对按 ".top .acct" 前缀取规则，取不到这一条 ⇒ 它自己的守卫是 NAV-14/15。 🔴 markup 里 .wallet 与 .acct 之间隔着一段注释：+ 只看元素兄弟，注释不算。哪天有元素插进 这两者之间，这条会静默失效，而 NAV-14/15 钉的是规则文本、看不见——那件事只能在真浏览器里量。 */ .top .wallet + .acct{margin-left:0} /* NAV-V2-03：状态位。投注页原先一条 .note 规则都没有（钱包页 7 条、持仓页 5 条）， 而三页要用同一份 markup 说同一句失败话 ⇒ 整套引进来，与另外两张表逐字节相同。 */ .note{display:flex;gap:9px;padding:11px 13px;border-radius:12px;margin-bottom:12px;font-size:12px;line-height:1.6} .note .mk{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:800} .note.amber{background:rgba(255,201,77,.09);border:1px solid rgba(255,201,77,.26);color:var(--gold)} .note.amber .mk{background:var(--gold);color:#22180a} .note.grey{background:#191b24;border:1px solid var(--edge);color:var(--dim)} .note.grey .mk{background:#2a2d3a;color:var(--dim)} /* [hidden] 是 UA 表里的规则，而 .note{display:flex} 是作者表、特异度相同 ⇒ 作者表胜出。 补这一条，hidden 属性才真的能把提示条隐掉。 */ .note[hidden]{display:none} /* WALLET-V2-04：无 provider 时状态位里那两条并列的建议，以及手机那条的钱包 App 深链。 v2.css 没有全局 a{}，另外两张表有 a{color:inherit;text-decoration:none} ⇒ 这里必须把 color 与 text-decoration 都显式写死，否则同一份 markup 在三页上渲染成两个样子。 类名刻意不以 .note 开头：navV2.test.js 的 NAV-13 断言每张表 .note 家族恰好 7 条。 */ .wpath{display:block;margin-top:6px} .wlink{color:var(--gold);text-decoration:underline;margin-left:8px} /* WALLET-V2-07：手机那条的深链从文字链接改成**真按钮**（owner 的反馈是「移动端体验还是太差」： 深链本身能用，形态却是一大段灰字里埋两个 .wlink——amber 下划线、margin-left:8px， 不像按钮，点击区只有一行文字那么高）。RECHARGE-WALLET-ONLY-01 之后充值抽屉也改用 .wbtn， .wlink 从此没有任何使用者；规则本身留着——删它要同时动六份样式、三份原型与两份 *Styles 的声明数。 🔴 min-height:44px 是触控目标的通行下限；*{box-sizing:border-box} 下 border 计进这 44px。 本仓一条读渲染几何的断言都没有 ⇒ 这个高度只能在真浏览器里量，是一次性证据不是守卫。 🔴 v2.css 没有全局 a{}，另外两张表有 a{color:inherit;text-decoration:none} ⇒ color 与 text-decoration 同样必须在这里显式写死，否则同一份 markup 在投注页渲染成另一个样子。 类名同样不以 .note 开头：navV2.test.js 的 NAV-13 断言每张表 .note 家族恰好 7 条。 */ .wbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .wbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px; border-radius:12px;background:var(--surface);border:1px solid var(--edge2);color:var(--fg); text-decoration:none;font-size:13px;font-weight:700} .wbtn:hover{border-color:var(--accent);color:var(--accent)} .wallet{margin-left:auto;display:flex;align-items:center;gap:9px;padding:7px 13px;border-radius:999px; background:var(--surface);border:1px solid var(--edge)} .wallet small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700} .wallet b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums} /* HEADER-BALANCE-INT-01（owner 2026-11-04）：窄屏顶栏余额只显示整数美元，截断不进位。setHeaderBalance() （wallet-connect.js）把小数部分放进 .hb-wide；两位小数进位跨过整数美元时（$999.995 写作 $1,000.00） 另放一份 .hb-narrow。断点跟顶栏自己的手机断点 720（nav 在同一处藏起来）。 */ .hb-narrow{display:none} @media(max-width:720px){.wallet .hb-wide{display:none}.wallet .hb-narrow{display:inline}} /* ---------------- 页头与筛选 ---------------- */ .page{max-width:1120px;margin:0 auto;padding:26px 22px 0} .hero{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px} .hero h1{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1} .hero .count{font-size:12px;color:var(--dim);font-weight:500} .hero .count b{color:var(--fg);font-weight:700} /* 脉搏条与文案【上下堆叠】，不是并排。 并排时 .lab 是 nowrap、.track 是 flex:1 ⇒ 文案越长、条越短；而最长的两句恰好是 「疑似断开」与「行情源 N 秒前仍在推送」——实测把 track 挤到 2px 和 16px， 那条会呼吸/放缓/衰竭的脉搏，在最该被看见的两个态里等于不存在。 堆叠之后条恒定占满整宽，文案要多长有多长，两者互不侵占。 */ .pulse{margin-left:auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:264px;max-width:340px} .pulse .track{width:100%;height:5px;border-radius:999px;background:#20232f;overflow:hidden;position:relative} .pulse .fill{position:absolute;inset:0;transform-origin:left;border-radius:999px} .pulse .lab{font-size:11px;font-weight:600;color:var(--dim);line-height:1.45} .pulse[data-s=live] .fill{background:linear-gradient(90deg,#3ddc97,#8affc9);animation:refill 3.6s linear infinite} .pulse[data-s=quiet] .fill{background:linear-gradient(90deg,#ffc94d,#ffe6a3);animation:refill 9s linear infinite} .pulse[data-s=suspect] .fill{background:#4b5164;animation:drain 2.6s ease-in-out infinite} .pulse[data-s=down] .fill{background:var(--down);animation:crack 1.4s steps(2) infinite} .pulse[data-s=none]{display:none} @media(prefers-reduced-motion:reduce){.pulse .fill{animation:none!important;transform:scaleX(.85)}} @keyframes refill{0%{transform:scaleX(1)}92%{transform:scaleX(.06)}92.5%{transform:scaleX(1)}100%{transform:scaleX(.97)}} @keyframes drain{0%,100%{transform:scaleX(.22)}50%{transform:scaleX(.12)}} @keyframes crack{0%,100%{transform:scaleX(.1);opacity:.9}50%{transform:scaleX(.1);opacity:.3}} .filt{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px; background:var(--surface);border:1px solid var(--edge);font-size:13px;font-weight:600;color:var(--dim);transition:.16s} .filt:hover{color:var(--fg);border-color:var(--edge2)} .filt svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .filt b{color:var(--fg);font-weight:700} .filt[aria-expanded=true]{background:var(--fg);color:#14161f;border-color:var(--fg)} .filt[aria-expanded=true] b{color:#14161f} .filt i{width:6px;height:6px;border-radius:999px;background:var(--up);display:none} .filt.on i{display:block} .scrim{position:fixed;inset:0;z-index:80;background:rgba(11,12,17,.62);backdrop-filter:blur(3px); opacity:0;pointer-events:none;transition:opacity .16s ease} .scrim.open{opacity:1;pointer-events:auto} .fsheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:var(--surface); border-top:1px solid var(--edge2);border-radius:20px 20px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px)); transform:translateY(100%);visibility:hidden;transition:transform .24s cubic-bezier(.16,1,.3,1),visibility 0s .24s;max-height:78vh;overflow-y:auto} .fsheet.open{transform:translateY(0);visibility:visible;transition:transform .24s cubic-bezier(.16,1,.3,1),visibility 0s} .fsheet .grab{width:38px;height:4px;border-radius:999px;background:var(--edge2);margin:0 auto 14px} .fsheet .shead{display:flex;align-items:center;margin-bottom:18px} .fsheet .shead b{font-size:17px;font-weight:800;letter-spacing:-.01em} .fsheet .shead button{margin-left:auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--faint);font-size:17px;line-height:1} .fsheet .shead button:hover{background:var(--card);color:var(--fg)} .fgrp{margin-bottom:20px} .fgrp .lab{font-size:12px;font-weight:700;color:var(--faint);margin-bottom:9px;letter-spacing:.04em} .fsheet .opts{display:flex;flex-wrap:wrap;gap:8px} .fsheet .opts button{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;background:var(--card);border:1px solid var(--edge);color:var(--dim);transition:.16s} .fsheet .opts button:hover:not(:disabled){color:var(--fg);border-color:var(--edge2)} .fsheet .opts button[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:#14161f} .fsheet .opts button:disabled{opacity:.42;cursor:not-allowed} .fsheet .opts button .soon{font-size:11px;font-weight:600;color:var(--faint);margin-left:6px} .sfoot{display:flex;gap:10px;align-items:center;padding-top:16px;border-top:1px solid var(--edge)} .sfoot .apply{margin-left:auto;padding:12px 22px;border-radius:12px;font-size:15px;font-weight:700;background:var(--fg);color:#14161f} @media(min-width:721px){.fsheet{left:auto;right:24px;bottom:24px;width:420px;border-radius:20px;border:1px solid var(--edge2)}} @media(prefers-reduced-motion:reduce){.fsheet,.fsheet.open{transition:none}.scrim{transition:none}} .bars{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} .chips{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--edge)} .chips button{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--dim);transition:.16s} .chips button:hover{color:var(--fg)} .chips button[aria-pressed=true]{background:var(--fg);color:#14161f} .amount{margin-left:auto;display:flex;align-items:center;gap:10px;padding:4px 4px 4px 15px;border-radius:999px; background:var(--surface);border:1px solid var(--edge)} .amount>span{font-size:12px;color:var(--dim);font-weight:600;white-space:nowrap} .amount .chips{background:none;border:0;padding:0} /* ---------------- 比赛 ---------------- */ .match{margin-bottom:14px;border-radius:20px;border:1px solid var(--edge);background:var(--surface);overflow:hidden} .mhead{display:flex;align-items:center;gap:12px;padding:15px 18px;flex-wrap:wrap} .mhead .teams{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px} .mhead .teams em{font-style:normal;color:var(--faint);font-weight:600;font-size:13px} .mhead .crest{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#0b0c11} .mhead .meta{margin-left:auto;font-size:12px;color:var(--dim);font-weight:500} .mhead .tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px} .fav{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;color:var(--faint);transition:color .16s,background .16s} .fav:hover{background:var(--card);color:var(--dim)} .fav svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round} .fav[aria-pressed=true]{color:var(--gold)} .fav[aria-pressed=true] svg{fill:currentColor} .fav-empty{padding:54px 20px;text-align:center;font-size:13px;color:var(--dim);line-height:1.8} .tag.ended{background:#2a2d3a;color:var(--faint)} .tag.soon{background:rgba(255,201,77,.14);color:var(--gold)} .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 12px 12px} .cards.two{grid-template-columns:repeat(2,minmax(0,1fr))} .c{position:relative;display:flex;flex-direction:column;gap:9px;min-height:200px;padding:15px 14px 13px; border-radius:16px;background:var(--card);border:1px solid var(--edge); transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s} .c::before{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;opacity:.45; background:radial-gradient(120% 78% at 50% 0%,color-mix(in srgb,var(--tone) 40%,transparent),transparent 62%)} .c{--tone:var(--gold)} .c.hot{--tone:var(--up)} .c.held{--tone:var(--accent)} .c.dead{--tone:transparent} /* 持仓卡的底边流光：持仓刻意是紫的，所以这里读 var(--tone)（.c.held 上它就是 --accent）， 不写死颜色——与上面 .c::before 的顶部氛围光同一个思路。动画复用下面那条 @keyframes sweep， 不新增。类名不叫 rail：rail 是下单等待进度条的名字，而那条进度条就渲染在同一张持仓卡的 .panel 里，重名就是当场撞。 */ .c.held .hem{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none; border-radius:0 0 16px 16px} .c.held .hem::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,var(--tone),transparent);animation:sweep 2.6s linear infinite} @media(prefers-reduced-motion:reduce){.c.held .hem::after{animation:none;background:var(--tone);opacity:.5}} .c .nm{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px} .c .lead{display:block;font-size:11px;color:var(--dim);margin-top:5px;font-weight:500} .c .money{position:relative} .c .roll{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1;transition:color .5s ease} .c.up .roll{color:var(--up)} .c.down .roll{color:var(--down)} .c.dead .roll{color:var(--faint);font-size:30px} /* 已结束的比赛：不再显示置灰按钮。灰按钮既点不动、又一直在说「这里本来有个按钮」， 等于把一块注意力浪费在一个不能做的动作上。那块空间改成说结果——赢的是谁，页面本来就知道。 */ .c.dead{min-height:150px} .c.dead .verdict{margin-top:auto;display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:11px; background:#191b24;border:1px solid var(--edge)} .c.dead .verdict .mark{display:grid;place-items:center;width:26px;height:26px;border-radius:8px; font-size:12px;font-weight:800;flex:none} .c.dead .verdict .txt{font-size:12px;font-weight:600;color:var(--dim)} .c.dead .verdict .txt b{display:block;font-size:14px;font-weight:800;color:var(--fg);margin-top:1px} .c.win{--tone:var(--up)} .c.win .verdict{background:rgba(61,220,151,.08);border-color:rgba(61,220,151,.28)} .c.win .verdict .mark{background:var(--up);color:#04120e} .c.win .verdict .txt b{color:var(--up)} .c.lose{opacity:.62} .c.lose .verdict .mark{background:#2a2d3a;color:var(--faint)} .c .act{margin-top:auto;display:grid;grid-template-columns:1fr;gap:6px} /* 持仓卡曾经是两个按钮上下堆叠，比别的卡高出一截、上面还留一块空。 改成同一行两列：加仓是压缩的次要动作，管理持仓是主动作。三张卡因此同构、等高。 */ .c.held .act{grid-template-columns:auto 1fr} .c.held .act .add{padding:11px 14px;border-radius:11px;font-size:13px;font-weight:700;white-space:nowrap; background:transparent;border:1px solid var(--edge2);color:var(--fg)} .c.held .act .add:hover{border-color:var(--accent);color:var(--accent)} .c .go{padding:11px 0;border-radius:11px;font-size:14px;font-weight:700; background:linear-gradient(180deg,#f4f6ff,#cfd6f0);color:#14161f;transition:filter .16s,transform .1s} .c .go:hover{filter:brightness(1.06)} .c .go:active{transform:scale(.97)} .c .go.ghost{background:transparent;border:1px solid var(--edge2);color:var(--fg)} .c .go[disabled]{opacity:.36;cursor:not-allowed;filter:none;transform:none} /* 别人的动作：游戏里最便宜也最有效的临场感 */ .tick{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums} .tick i{font-style:normal;display:flex;gap:6px} .tick b{color:var(--up);font-weight:700} .tick.sell b{color:var(--down)} /* 持仓统计格 */ .stat{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:10px;overflow:hidden;background:var(--edge)} .stat div{display:flex;flex-direction:column;gap:3px;padding:7px 9px;background:#20222c} .stat .k{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:700} .stat .v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1} .stat .v.live-v{transition:color .5s ease} .stat .v.live-v.up{color:var(--up)} .stat .v.live-v.down{color:var(--down)} /* 增量气泡 */ .delta{position:absolute;right:0;top:-18px;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums; opacity:0;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.55)} .delta.up{color:var(--up)} .delta.down{color:var(--down)} @media(prefers-reduced-motion:no-preference){ .delta.show{animation:float 1.9s cubic-bezier(.16,1,.3,1)} .c.bump{animation:bump .48s cubic-bezier(.16,1,.3,1)}} @keyframes float{0%{opacity:0;transform:translateY(10px) scale(.9)}12%{opacity:1;transform:none}62%{opacity:1}100%{opacity:0;transform:translateY(-26px)}} @keyframes bump{0%{transform:none}34%{transform:translateY(-7px) scale(1.028)}100%{transform:none}} /* 逐位滚动 */ .roll{display:inline-flex;align-items:flex-start;font-variant-numeric:tabular-nums;line-height:1} .roll .col{display:inline-block;overflow:hidden;height:1em;line-height:1} .roll .col:has(i){-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent); mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)} .roll .col i{display:block;font-style:normal;transition:transform .38s cubic-bezier(.22,1,.28,1)} .roll .col b{display:block;height:1em;line-height:1;font-weight:inherit} @media(prefers-reduced-motion:reduce){.roll .col i{transition:none}} .stat .roll{font-size:1em;font-weight:inherit;letter-spacing:0} /* ---------------- 卡内面板（买入 / 平仓 同一套） ---------------- */ .panel{display:none;flex-direction:column;gap:9px;margin-top:auto} .c[data-state]:not([data-state=idle]) .panel{display:flex} .c[data-state]:not([data-state=idle]) .act{display:none} .c[data-state]:not([data-state=idle]){box-shadow:0 20px 46px -20px rgba(0,0,0,.9)} .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px} .opts.three{grid-template-columns:repeat(3,1fr)} /* 买入金额只在页头那一条里决定。卡内不再放第二套档位——同一个决定出现在两个地方、 而且两处档位还不一样（$10/$50/$100 vs $5/$10/$25），那是让人犹豫，不是让人自由。 想改金额就回页头改，改完对所有卡生效；卡内只显示当前用的是多少。 */ .amtline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);font-weight:600} .amtline b{color:var(--fg);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums} .amtline a{margin-left:auto;font-size:11px;color:var(--accent);text-decoration:none;font-weight:600} .amtline a:hover{text-decoration:underline} /* 就地改金额：同一个值，两个地方都能编辑，卡内改完会写回页头。 不是两套档位——那才是重复。 */ .amtline input{width:96px;padding:5px 8px;border-radius:8px;border:1px solid var(--accent); background:#12141d;color:var(--fg);font:inherit;font-size:15px;font-weight:800; font-variant-numeric:tabular-nums;text-align:right;outline:none} .amtline input::-webkit-outer-spin-button,.amtline input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .amtline .err{margin-left:auto;font-size:11px;color:var(--down);font-weight:600} .opts button{padding:8px 0;border-radius:9px;font-size:12px;font-weight:700;color:var(--dim); border:1px solid var(--edge2);transition:.15s} .opts button:hover{color:var(--fg);border-color:#4b5060} .opts button[aria-pressed=true]{background:var(--fg);color:#14161f;border-color:var(--fg)} .qline{font-size:11px;line-height:1.6;color:var(--dim);min-height:34px} .qline b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums} .qline .warn{color:var(--gold)} .qline .bad{color:var(--down)} .hold{position:relative;overflow:hidden;padding:13px 0;border-radius:11px;font-size:14px;font-weight:800; background:#2a2d3a;color:var(--fg);touch-action:none;user-select:none;-webkit-user-select:none} .hold[disabled]{opacity:.45;cursor:not-allowed} .hold .fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#3ddc97,#8affc9)} .hold .lbl{position:relative;z-index:1;mix-blend-mode:difference;color:#fff} .c[data-state=ready] .hold{background:linear-gradient(180deg,#f4f6ff,#cfd6f0)} .c[data-state=ready] .hold .lbl{mix-blend-mode:normal;color:#14161f} .c[data-state=ready].sell .hold{background:linear-gradient(180deg,#ffd9de,#ffb3bd)} .c[data-state=charging] .hold{box-shadow:0 0 0 2px var(--up),0 0 26px -4px var(--up)} .c[data-state=charging].sell .hold{box-shadow:0 0 0 2px var(--down),0 0 26px -4px var(--down)} .c[data-state=charging].sell .hold .fill{background:linear-gradient(90deg,#ff5d73,#ffa3b0)} .c[data-state=done] .hold{background:var(--up)} .c[data-state=done] .hold .lbl{mix-blend-mode:normal;color:#04120e} .c[data-state=done].sell .hold{background:var(--down)} .c[data-state=done].sell .hold .lbl{color:#2a0007} .cancel{padding:6px 0;font-size:11px;color:var(--dim)} .cancel:hover{color:var(--fg)} @media(prefers-reduced-motion:no-preference){.c[data-state=done]{animation:pop .5s cubic-bezier(.16,1,.3,1)}} @keyframes pop{0%{transform:none}38%{transform:scale(1.035)}100%{transform:none}} /* ============ 下单后：等待与结论 ============ 这不是一个转圈。实测轮询 1 秒一次、超时 30 秒（orderConclusionTimeoutMs()：FOK 的 20 秒 加 maker 腿的 N=10 秒；FOK_CONCLUSION_TIMEOUT_MS 本身只是那 20 秒）， 而 execute_user_order 本身要 3.7~6.9 秒，加上写入 worker 5 秒一跳的排队 ⇒ 典型 5~12 秒、最坏等满 30 秒。这么久的空转会让人以为卡死了，所以： ① 进度条走的是【真实状态位】（已提交 → 排队中 → 撮合中 → 结论），不是假动画； ② 秒数照实显示，不掩饰； ③ 页面其余部分照常跳动，用户不被锁在一个静止的世界里。 */ .wait{display:flex;flex-direction:column;gap:9px} .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .rail i{height:4px;border-radius:999px;background:#262a37;position:relative;overflow:hidden} .rail i.on{background:var(--up)} .rail i.now::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--up),transparent); animation:sweep 1.1s linear infinite} @media(prefers-reduced-motion:reduce){.rail i.now::after{animation:none;background:var(--up);opacity:.5}} @keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}} .wait .step{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700} .wait .step small{margin-left:auto;font-size:11px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums} .wait .hint{font-size:11px;color:var(--dim);line-height:1.6} /* 五种结论（orderOutcomeNotice 的五个 kind）各有自己的样子，不共用一句话 */ .res{display:flex;gap:10px;padding:12px;border-radius:12px;border:1px solid var(--edge);background:#191b24} .res .mk{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;font-size:13px;font-weight:800;flex:none} .res .tx{font-size:12px;line-height:1.6;color:var(--dim)} .res .tx b{display:block;font-size:14px;font-weight:800;color:var(--fg);margin-bottom:2px} .res.ok{background:rgba(61,220,151,.09);border-color:rgba(61,220,151,.3)} .res.ok .mk{background:var(--up);color:#04120e} .res.ok .tx b{color:var(--up)} .res.bad{background:rgba(255,93,115,.09);border-color:rgba(255,93,115,.3)} .res.bad .mk{background:var(--down);color:#2a0007} .res.bad .tx b{color:var(--down)} .res.warn{background:rgba(255,201,77,.09);border-color:rgba(255,201,77,.3)} .res.warn .mk{background:var(--gold);color:#22180a} .res.warn .tx b{color:var(--gold)} .res.neutral .mk{background:#2a2d3a;color:var(--dim)} .res .fix{margin-top:7px;display:inline-block;font-size:12px;font-weight:700;color:var(--accent);text-decoration:none} .res .fix:hover{text-decoration:underline} /* 成交的那一刻：卡片翻成持仓形态。这不是装饰——用户【确实】从"没有仓"变成了"有仓"， 原来那种「3 秒后收回原样、继续显示预计净赚」是在说一件已经不成立的事。 */ .c.filling{animation:land .72s cubic-bezier(.16,1,.3,1)} @keyframes land{0%{transform:scale(1)}26%{transform:scale(1.05)}60%{transform:scale(.995)}100%{transform:scale(1)}} .burst{position:absolute;inset:-1px;border-radius:16px;pointer-events:none;opacity:0;z-index:2; background:radial-gradient(70% 50% at 50% 55%,rgba(61,220,151,.55),transparent 70%)} @media(prefers-reduced-motion:no-preference){.c.filling .burst{animation:burst .9s ease-out}} @keyframes burst{0%{opacity:0;transform:scale(.82)}18%{opacity:1}100%{opacity:0;transform:scale(1.18)}} .c.filling .roll{color:var(--up)} .ring{position:absolute;left:50%;top:52%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%; border:2px solid var(--up);pointer-events:none;opacity:0;z-index:2} @media(prefers-reduced-motion:no-preference){.c.filling .ring{animation:ring .85s cubic-bezier(.16,1,.3,1)}} @keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(15)}} .gotit{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--up)} .gotit .k{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--up);color:#04120e;font-size:11px} /* ===== CRYPTO-BTC-5M-CARD-WIRE-01：BTC 5 分钟盘的 .round 带 ===== 声明逐条来自 docs/design/btc-updown-card/merged.html:116-141，并与 docs/design/trade-v2-prototypes/b-fullpage.html 逐字节同步（V2-STYLE-1 / V2-STYLE-2 双向钉着， 任何单边改动当场红）。这两个文件是一个原子单位，永远同卡同提交。 🚫 没搬 merged.html 那段里的 `.mhead .teams em{display:none}`：它坐在同一个 @media(max-width:560px) 里，但作用的是卡头，照搬会在 ≤560px 静默隐藏【全部】足球／电竞／ 篮球卡头的「vs」。那一条与本带无关。 🚫 没搬 merged.html:74-75 那两条 `.c.held .hem`：那里把既有键的【值】改掉了，照搬会杀掉所有 持仓卡的底边流光——而逐字节门禁看不见这种改法（它比对的是键在不在、值等不等，两边一起改 就一起绿）。 🚫 没搬 merged.html