/* POSITION-V2-01 §1.1：这份表是 docs/design/trade-v2-prototypes/b-positions.html 的 <style> 块
   剔掉 .demo 演示控制条之后的逐字搬运，由 tests/positionV2Styles.test.js 双向比对钉住。
   不能与 v2.css 合表（|.page|max-width 1120px/860px、|body|padding-bottom 96px/90px 同键异值），
   也不能与 wallet.css 合表（|.page|max-width 820px/860px、|.empty|padding 34px/38px，
   以及 @keyframes transit 的终点 translateX(420%)/(430%) —— 那一条重名而值不同，
   各自独立加载没事，任何一天把两张表放进同一页就是静默串味）。
   body{padding-bottom:90px} 是原型给 .demo 底栏让的位，照 wallet.css 的先例原样保留。
   .gold / .note[hidden] / .p .side button:disabled 三条是 §2 修掉原型自身缺陷时补的真规则，
   原型与本表逐字节同改——不许退回内联 style。 */

/* Sora 自托管：下面 html,body 的 font-family:Sora 依赖这两段，与 public/trade/v2.css 逐字同源。
   原型是从 fonts.googleapis.com 拿的；本站不引外部来源。@font-face 块体里没有 `{`，
   tests/positionV2Styles.test.js 的 parseCss 递归进去立刻返回空 Map ⇒ 它对逐字节门禁贡献 0 条声明。 */
@font-face{font-family:Sora;font-style:normal;font-weight:400 800;font-display:swap;
src:url("/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("/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:90px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
.up{color:var(--up)} .down{color:var(--down)}   /* 红跌绿涨，与钱包页、交易页一致 */
/* 待到账那格是金色的，原先只能靠 render() 里的内联 style.color 上色：全文没有裸金色文字类
   （.badge.stale / .badge.claim 都自带 background）。补一条真规则，内联那行随之删掉。 */
.gold{color:var(--gold)}

.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;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);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}

.page{max-width:860px;margin:0 auto;padding:26px 22px 0}
.head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.head h1{font-size:30px;font-weight:800;letter-spacing:-.02em}
.head .back{font-size:12px;color:var(--accent);font-weight:600}
.head .back:hover{text-decoration:underline}

.sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--edge);
  border-radius:16px;overflow:hidden;margin-bottom:14px}
.sum div{background:var(--card);padding:15px 14px;display:flex;flex-direction:column;gap:6px}
.sum .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.sum .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}

.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} 是作者表、特异度相同 ⇒ 作者表胜出，
   render() 里那句 .hidden=!un 一直是无效代码。补这一条，它才真的能把提示条隐掉。 */
.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)}

.tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--edge);
  margin-bottom:14px;width:max-content;max-width:100%;flex-wrap:wrap}
.tabs button{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--dim);transition:.16s}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-pressed=true]{background:var(--fg);color:#14161f}

.grp{margin-bottom:18px}
.grp h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 9px 2px}
.p{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;
  padding:15px 16px;border-radius:16px;border:1px solid var(--edge);background:var(--card);margin-bottom:9px;position:relative}
.p .q{font-size:11px;color:var(--faint);font-weight:500;margin-bottom:4px}
.p .o{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p .badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.badge.hold{background:rgba(139,143,255,.16);color:var(--accent)}
.badge.lock{background:#2a2d3a;color:var(--dim)}
.badge.stale{background:rgba(255,201,77,.14);color:var(--gold)}
.badge.claim{background:rgba(255,201,77,.16);color:var(--gold)}
.badge.done{background:rgba(61,220,151,.14);color:var(--up)}
.badge.lost{background:#2a2d3a;color:var(--faint)}
.p .nums{display:flex;gap:22px;margin-top:11px;flex-wrap:wrap}
.p .n{display:flex;flex-direction:column;gap:3px}
.p .n span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.p .n b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.p .n b.na{color:var(--faint);font-weight:700}
.p .side{display:flex;flex-direction:column;gap:7px;align-items:stretch;min-width:120px}
.p .side button{min-height:44px;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap}
.p .side .main{background:linear-gradient(180deg,#f4f6ff,#cfd6f0);color:#14161f}
.p .side .main:hover{filter:brightness(1.06)}
.p .side .ghost{border:1px solid var(--edge2);color:var(--fg)}
.p .side .ghost:hover{border-color:var(--accent);color:var(--accent)}
/* :17 的 button{cursor:pointer} 盖掉了 UA 的 disabled 默认，所以 disabled 按钮原先只靠内联 style
   与可用按钮区分，去掉内联就与旁边的 .ghost 逐像素相同。补一条真规则，内联那处随之删掉。 */
.p .side button:disabled{opacity:.5;cursor:default}
.p .foot{grid-column:1/-1;font-size:11px;color:var(--faint);line-height:1.6;border-top:1px solid var(--edge);padding-top:9px;margin-top:2px}
.p .foot b{color:var(--dim);font-weight:700}
/* 待到账：与钱包页同一套语言——路上的钱 */
.p.claimable{background:linear-gradient(180deg,rgba(255,201,77,.06),var(--card));border-color:rgba(255,201,77,.24)}
.p.claimable .rail{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;border-radius:0 0 16px 16px}
.p.claimable .rail i{position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
@media(prefers-reduced-motion:no-preference){.p.claimable .rail i{animation:transit 1.9s linear infinite}}
@keyframes transit{from{transform:translateX(-120%)}to{transform:translateX(430%)}}
.p.settled{opacity:.78}
.empty{padding:38px 18px;text-align:center;color:var(--faint);font-size:13px;
  border:1px dashed var(--edge2);border-radius:16px}

@media(max-width:720px){
  .page{padding:18px 13px 0}
  .sum{grid-template-columns:1fr 1fr}
  .p{grid-template-columns:1fr}
  .p .side{flex-direction:row}
  .p .side button{flex:1}
  .tabs button{padding:8px 12px}
  .nav{display:none}
  .mobilenav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:rgba(11,12,17,.9);backdrop-filter:blur(16px);border-top:1px solid var(--edge);padding-bottom:env(safe-area-inset-bottom,0px)}
  /* 逐字节相同 ≠ 渲染相同：三张表的层叠环境不一样。text-decoration:none 在 positions/wallet
     里本可由全局 a{} 兜住，v2.css 没有那条全局——不写死它，投注页的 tab 就是带下划线的。
     padding-bottom 那个 env(safe-area-inset-bottom) 今天恒取兜底 0px：三页的 viewport meta
     都没有 viewport-fit=cover。写法是对的，但它此刻没有在挡任何东西，别当它在承重。 */
  .mobilenav a{display:grid;place-items:center;height:64px;font-size:13px;font-weight:600;color:var(--dim);text-decoration:none}
  .mobilenav a.on{color:var(--fg)}
  .mobilenav a[hidden]{display:none}
}