/* ===== 德州扑克 UI · 基础设计系统 ===== */
:root{
  --bg:#080b11;
  --bg2:#0d1219;
  --panel:#131a24;
  --panel2:#18212d;
  --panel3:#1f2a38;
  --line:#26313f;
  --line2:#33404f;
  --txt:#e8eef6;
  --txt2:#9fb0c3;
  /* ★ 2026-10-01 无障碍修复：原值 #6b7d92 在三种面板底上对比度全部不达标
     （panel3 3.44:1 / panel2 3.84:1 / panel 4.14:1，WCAG AA 正文要求 4.5:1），
     而它正是最小的字（.tiny 11px）所用的颜色，且 .tiny×.txt3 同现 103 处。
     新值 #93a6ba：panel3 5.81:1、panel 7.00:1、bg 7.88:1 —— 全部达标。
     视觉上仍是「次级灰」，不抢 --txt2 的位置。 */
  --txt3:#93a6ba;
  --gold:#f5c352;
  --gold2:#d99f2b;
  --green:#2ecc71;
  --green2:#19a05a;
  --red:#ff5a5f;
  --blue:#3b8cff;
  --purple:#a06bff;
  --pink:#ff6ba8;
  --orange:#ff9f43;
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:26px;
  --sh:0 8px 28px rgba(0,0,0,.5);
  --sh-gold:0 6px 18px rgba(245,195,82,.28);
  --maxw:1180px;
  /* ---------- 字号标尺（2026-10-01 重设）----------
     原来字号散落在各处写死（11 / 11.5 / 12 / 12.5 / 13 / 14 / 15.5…），
     基准 body 是 14px，对移动端偏小；最小一档只有 11px 又配最弱的颜色。
     现在收成 6 档，并整体上调一档：11→12、12→13、14→15。 */
  --fs-xs:12px;    /* 次级说明、时间戳 */
  --fs-sm:13px;    /* 列表副标题、标签 */
  --fs-md:15px;    /* 正文基准 */
  --fs-lg:17px;    /* 顶栏标题 */
  --fs-xl:22px;    /* 卡片主数值 */
  --fs-2xl:28px;   /* 大金额 */
  /* 触控：WCAG/移动端建议最小 44×44。视觉尺寸可小于 44，
     但可点区域用 ::after 撑满 48（见 .icon-btn）。 */
  --tap:44px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:
    radial-gradient(1200px 700px at 50% -10%, #16263a 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, #1b2a20 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:var(--fs-md);line-height:1.55;overflow:hidden;
  user-select:none;
}
/* 输入框与显式标注的地方要能选中/复制（例如自己的玩家 ID） */
input,textarea,.selectable{-webkit-user-select:text;user-select:text}

/* ---------- 无障碍：键盘焦点可见 + 尊重「减少动态效果」----------
   原来全站没有 :focus-visible 规则，键盘/无障碍设备完全看不出当前焦点在哪。 */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-s)}
/* 触摸设备上点按不该留焦点环，只有键盘导航才显示（:focus-visible 已隐含此语义） */
.btn:focus-visible,.icon-btn:focus-visible,.tab:focus-visible,.seg:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
#app{height:100%;position:relative;overflow:hidden}
.screen-root{height:100%;overflow:hidden;position:relative}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#2c3a4b;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 通用布局 ---------- */
.app-shell{height:100%;display:flex;flex-direction:column;max-width:var(--maxw);margin:0 auto;
  background:linear-gradient(180deg,rgba(19,26,36,.55),rgba(8,11,17,.82));
  border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#18212d,#131a24);flex:0 0 auto;position:relative;z-index:5}
.topbar .title{font-size:17px;font-weight:700;letter-spacing:.5px}
/* 顶栏「昵称 + VIP 徽章 / ID」这一列：昵称过长时必须省略号，不能挤成两行，
   也不能把右侧的消息、设置图标顶出去。 */
.topbar-who{min-width:0}
.topbar-who .row{min-width:0;flex-wrap:nowrap}
.topbar-who .b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-who .tag{flex:0 0 auto}
.topbar-who .tiny{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .spacer{flex:1}
.body{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px 20px}
.body.nopad{padding:0}
.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--panel2);
  border:1px solid var(--line);color:var(--txt2);cursor:pointer;transition:.15s;position:relative}
.icon-btn:hover{color:var(--txt);background:var(--panel3);border-color:var(--line2)}
.icon-btn:active{transform:scale(.93)}
/* ★ 触控修复：视觉仍是 36px（直接放大到 44 会挤坏顶栏），
   但把可点区域用 ::after 撑到 44×44。
   用 44 而不是 48：顶栏图标间距是 36+10=46px，48 会与相邻按钮重叠抢点击。 */
.icon-btn::after{content:"";position:absolute;left:50%;top:50%;
  width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}
.icon-btn.gold{color:var(--gold)}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column}
/* ★ min-width:0 必不可少：flex 子项默认 min-width:auto（= 内容最小宽度），
   文字一长就撑破容器、溢到相邻按钮底下。顶栏昵称被挤成两行、
   牌桌说明文字压到「进入」按钮上，根因都是缺这一行。 */
.grow{flex:1;min-width:0}
.center{display:grid;place-items:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.gap6{gap:6px}.gap8{gap:8px}.gap12{gap:12px}
.txt2{color:var(--txt2)}.txt3{color:var(--txt3)}
.gold{color:var(--gold)}.green{color:var(--green)}.red{color:var(--red)}.blue{color:var(--blue)}
.b{font-weight:700}.small{font-size:var(--fs-sm)}.tiny{font-size:var(--fs-xs)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- 头像 ---------- */
.avatar{position:relative;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-weight:700;color:#fff;overflow:hidden;background:#33404f;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.avatar.sm{width:34px;height:34px;font-size:12px}
.avatar.md{width:46px;height:46px;font-size:15px}
.avatar.lg{width:64px;height:64px;font-size:20px}
.avatar.xl{width:86px;height:86px;font-size:26px}
.avatar.online::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;
  background:var(--green);border:2px solid var(--panel)}
.avatar.offline::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;
  background:#5a6a7c;border:2px solid var(--panel)}
/* ★ 2026-10-03：头像内容是「程序化 SVG」或「玩家上传的图片」——
   两者都要撑满圆形并裁掉方角（以前是纯文字首字母，没有这层）。 */
.avatar>svg,.avatar>img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
.avatar-frame{position:relative;display:inline-flex;padding:2px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--gold),#fff3c4,var(--gold2),var(--gold));box-shadow:0 0 12px rgba(245,195,82,.35)}
.avatar-frame.plain{background:none;box-shadow:none;padding:0}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;
  /* ★ 触控修复：40px → 44px（移动端最小可点高度）。用 min-height 而非 height，
     避免内容换行时被裁切；.sm / .xs 这类明确的小尺寸按钮不受影响。 */
  padding:0 16px;min-height:44px;border-radius:12px;font-size:var(--fs-md);font-weight:600;color:#fff;
  background:var(--panel3);transition:.15s;white-space:nowrap}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.gold{background:linear-gradient(180deg,#ffd970,var(--gold2));color:#3a2604;box-shadow:var(--sh-gold)}
.btn.green{background:linear-gradient(180deg,#3ce08a,#12a35c);box-shadow:0 6px 16px rgba(46,204,113,.28)}
.btn.red{background:linear-gradient(180deg,#ff7478,#e03a3f);box-shadow:0 6px 16px rgba(255,90,95,.28)}
.btn.blue{background:linear-gradient(180deg,#5aa2ff,#2a6fd8);box-shadow:0 6px 16px rgba(59,140,255,.25)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--txt2)}
.btn.ghost:hover{color:var(--txt);border-color:var(--txt3)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:10px}
.btn.xs{height:26px;padding:0 10px;font-size:11.5px;border-radius:8px}
.btn.lg{height:48px;font-size:15.5px;border-radius:14px;padding:0 22px}
.btn.block{width:100%}
.btn.round{border-radius:999px}
.btn.icon{width:40px;padding:0}

/* ---------- 卡片 / 列表 ---------- */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r-l);padding:12px}
.card.pad0{padding:0;overflow:hidden}
.card.gold{border-color:rgba(245,195,82,.35);background:linear-gradient(180deg,rgba(245,195,82,.10),rgba(19,26,36,.9))}
.list{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:.12s}
.li:last-child{border-bottom:none}
.li:hover{background:var(--panel2)}
.li:active{background:var(--panel3)}
.li .li-title{font-weight:600}
.li .li-sub{font-size:var(--fs-sm);color:var(--txt3);margin-top:3px;
  /* 说明行可能很长（盲注/抽水/入池率…）；在 flex 项已可收缩的前提下换行。
     .st 保证每个统计项不被拆开（中文默认可在任意两字间断行，
     会把「均池 425」断成「均」/「池 425」）；.sep 是项之间的分隔点。 */
  overflow-wrap:break-word}
.li .li-sub .st{white-space:nowrap}
.li .li-sub .sep{font-style:normal;opacity:.55;margin:0 5px;white-space:nowrap}
.li .chev{color:var(--txt3)}
.section-title{font-size:13px;color:var(--txt3);font-weight:600;margin:16px 2px 8px;display:flex;align-items:center;gap:6px}
.section-title .more{margin-left:auto;color:var(--gold);font-size:12px;cursor:pointer}

/* ---------- 标签 / 徽章 ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--panel3);color:var(--txt2);border:1px solid var(--line2)}
.tag.gold{background:rgba(245,195,82,.16);color:var(--gold);border-color:rgba(245,195,82,.35)}
.tag.green{background:rgba(46,204,113,.14);color:var(--green);border-color:rgba(46,204,113,.3)}
.tag.red{background:rgba(255,90,95,.14);color:var(--red);border-color:rgba(255,90,95,.3)}
.tag.blue{background:rgba(59,140,255,.14);color:#7fb6ff;border-color:rgba(59,140,255,.3)}
.tag.purple{background:rgba(160,107,255,.14);color:#c3a3ff;border-color:rgba(160,107,255,.3)}
.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--panel)}

/* ---------- 表单 ---------- */
.input-wrap{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:0 12px;height:44px;transition:.15s}
.input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,195,82,.12)}
.input-wrap input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:14px;height:100%}
.input-wrap input::placeholder{color:var(--txt3)}
.input-wrap .clear{color:var(--txt3);cursor:pointer}
.field{margin-bottom:12px}
.field .lb{font-size:12px;color:var(--txt3);margin-bottom:6px;display:block}
textarea.inp{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;color:var(--txt);
  padding:10px 12px;outline:none;resize:none;font-family:inherit;font-size:14px}
textarea.inp:focus{border-color:var(--gold)}
.switch{width:46px;height:26px;border-radius:999px;background:#33404f;position:relative;cursor:pointer;transition:.2s;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch.on{background:linear-gradient(90deg,#3ce08a,#12a35c)}
.switch.on::after{left:23px}
.segment{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
/* white-space:nowrap：分段的标签不能被折行（「奥马哈」曾被折成「奥马」+「哈」）。
   容器本来就是横向可滚动的，窄屏时滚动比折行更符合预期。 */
.segment .seg{flex:1;text-align:center;padding:7px 6px;border-radius:9px;font-size:13px;color:var(--txt2);
  cursor:pointer;transition:.15s;font-weight:600;white-space:nowrap}
.segment .seg.on{background:linear-gradient(180deg,#2b3a4d,#212d3c);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.segment.gold .seg.on{background:linear-gradient(180deg,#ffd970,var(--gold2));color:#3a2604}
input[type=range]{-webkit-appearance:none;width:100%;height:22px;background:none;outline:none}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--p,50%),#2b3a4d var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
  border:3px solid var(--gold);margin-top:-7px;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer}
.checkbox{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.checkbox.on{background:var(--gold);border-color:var(--gold);color:#3a2604}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 6px;background:var(--panel);position:sticky;top:0;z-index:4}
.tabs .tab{padding:11px 12px;font-size:14px;font-weight:600;color:var(--txt3);cursor:pointer;position:relative;transition:.15s}
.tabs .tab.on{color:var(--gold)}
.tabs .tab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* ---------- 弹窗 / 底部抽屉 / Toast ---------- */
.mask{position:fixed;inset:0;background:rgba(3,6,10,.72);backdrop-filter:blur(3px);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.modal{width:100%;max-width:400px;background:linear-gradient(180deg,#1b2531,#131a24);border:1px solid var(--line2);
  border-radius:22px;box-shadow:var(--sh);animation:pop .22s cubic-bezier(.2,1.2,.4,1);overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.modal.wide{max-width:640px}
.modal.full{max-width:940px}
.modal-head{padding:16px 18px 10px;text-align:center}
.modal-head h3{margin:0;font-size:17px}
.modal-head .sub{font-size:12.5px;color:var(--txt3);margin-top:4px}
.modal-body{padding:4px 18px 16px;overflow-y:auto}
.modal-foot{display:flex;gap:10px;padding:12px 18px 18px}
.modal-foot .btn{flex:1}
.modal-close{position:absolute;top:12px;right:12px;z-index:3}
.sheet-mask{position:fixed;inset:0;background:rgba(3,6,10,.7);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fade .18s}
.sheet{width:100%;max-width:var(--maxw);background:linear-gradient(180deg,#1b2531,#101720);border-top:1px solid var(--line2);
  border-radius:22px 22px 0 0;animation:slideUp .24s cubic-bezier(.2,1,.4,1);max-height:84vh;display:flex;flex-direction:column;overflow:hidden}
.sheet-head{padding:14px 16px 10px;display:flex;align-items:center;border-bottom:1px solid var(--line);flex:0 0 auto}
.sheet-head h3{margin:0;font-size:16px;flex:1}
.sheet-body{overflow-y:auto;padding:12px 16px 18px}
.toast-root{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:18px;pointer-events:none}
.toast{background:rgba(24,33,45,.96);border:1px solid var(--line2);border-radius:12px;padding:10px 16px;font-size:13.5px;
  box-shadow:var(--sh);animation:pop .2s;display:flex;align-items:center;gap:8px;max-width:80vw}
.toast.ok{border-color:rgba(46,204,113,.5);color:#8ff0bb}
.toast.err{border-color:rgba(255,90,95,.5);color:#ffa4a7}
.toast.gold{border-color:rgba(245,195,82,.5);color:var(--gold)}

/* ---------- 底部导航 ---------- */
.navbar{flex:0 0 auto;display:flex;border-top:1px solid var(--line);background:linear-gradient(180deg,#131a24,#0b1017);padding:6px 0 8px;z-index:6}
.navbar .nav{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--txt3);cursor:pointer;position:relative;padding:2px 0}
.navbar .nav.on{color:var(--gold)}
.navbar .nav .lb{font-size:11px;font-weight:600}
.navbar .nav.on .ico{transform:translateY(-2px)}
.navbar .nav .ico{transition:.18s}

/* ---------- 资产条 ---------- */
.asset-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip-pill{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:4px 10px 4px 4px;font-weight:700;font-size:13px}
.chip-pill .coin{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#3a2604;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold2));font-weight:800}
.chip-pill .plus{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#3a2604;display:grid;place-items:center;
  font-weight:800;cursor:pointer;font-size:15px;line-height:1}
.chip-pill.diamond .coin{background:radial-gradient(circle at 35% 30%,#b8f0ff,#3aa8d8);color:#063048}

/* ---------- 进度条 ---------- */
.bar{height:6px;border-radius:4px;background:#26313f;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),#ffe6a0);transition:width .5s}
.bar.green > i{background:linear-gradient(90deg,#3ce08a,#a9f5cb)}
.bar.blue > i{background:linear-gradient(90deg,#5aa2ff,#b6d6ff)}

/* ---------- 空状态 / 网格 ---------- */
.empty{padding:50px 20px;text-align:center;color:var(--txt3)}
.empty .ico{opacity:.35;margin-bottom:10px}
.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}

/* ---------- 浮动金币动画 ---------- */
.fx{position:fixed;z-index:400;pointer-events:none;font-weight:800;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.6);
  animation:fly 1.1s ease-out forwards;font-size:20px}
@keyframes fly{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1;transform:translateY(-14px) scale(1.15)}
  100%{opacity:0;transform:translateY(-90px) scale(.9)}}

/* ---------- Banner ---------- */
.banner{position:relative;border-radius:var(--r-l);overflow:hidden;height:130px;flex:0 0 auto}
.banner .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.banner .slide.on{opacity:1}
.banner .slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banner .slide-mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,16,.55) 0%,rgba(6,10,16,.22) 45%,rgba(6,10,16,.12) 100%);z-index:1}
.banner .slide-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 22px;z-index:2}
.banner .dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:3}
.banner .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:.3s}
.banner .dots i.on{width:16px;background:#fff;border-radius:3px}

/* ---------- 其它 ---------- */
.divider{height:1px;background:var(--line);margin:12px 0}
.hl{color:var(--gold);font-weight:700}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.hscroll::-webkit-scrollbar{height:0}
.shadow-text{text-shadow:0 2px 6px rgba(0,0,0,.6)}
.press{transition:.1s}.press:active{transform:scale(.94)}
.float-btn{position:absolute;right:14px;bottom:20px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#ffd970,var(--gold2));color:#3a2604;box-shadow:0 8px 20px rgba(245,195,82,.4);cursor:pointer;z-index:8}

/* ================= GU9 · 视觉增强 ================= */
:root{
  --sh-card:0 10px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.055);
  --sh-pop:0 20px 54px rgba(0,0,0,.58);
  --gold-grad:linear-gradient(180deg,#ffe08a,var(--gold2));
}

/* 品牌标识 */
.brand-mark{width:48px;height:48px;flex:0 0 auto;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(245,195,82,.20),rgba(255,255,255,.05));
  border:1px solid rgba(245,195,82,.32);
  box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16);
  display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:13px}

/* 顶栏：毛玻璃 + 层次 */
.topbar{background:linear-gradient(180deg,rgba(26,35,48,.96),rgba(14,20,29,.92));
  backdrop-filter:blur(12px);box-shadow:0 8px 22px rgba(0,0,0,.40)}
.topbar .title{background:linear-gradient(180deg,#fff,#c7d4e2);-webkit-background-clip:text;background-clip:text;color:transparent}
.icon-btn{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.10);box-shadow:0 3px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.09)}
.icon-btn:hover{border-color:rgba(245,195,82,.45);color:var(--gold)}
.lang-mark{font-size:13px;font-weight:800;letter-spacing:.5px;pointer-events:none}
/* ★ 2026-10-08：语言切换钮只保留在大厅顶栏；子页面（整屏或浮层）一律隐藏 */
body:not(.on-lobby) .icon-btn[data-lang-open="1"],
body.overlay-open .icon-btn[data-lang-open="1"]{display:none!important}

/* 卡片 / 列表：玻璃质感 */
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:var(--sh-card);transition:transform .18s,box-shadow .18s,border-color .18s}
.card[style*="cursor:pointer"]:hover{border-color:rgba(245,195,82,.35);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 0 1px rgba(245,195,82,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.card:active{transform:scale(.985)}
.list{box-shadow:var(--sh-card)}
.li{transition:background .15s}
.li:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,0))}
.li:active{background:rgba(255,255,255,.07)}
.section-title{letter-spacing:.4px}

/* 卡片式入口（大厅快捷格） */
.grid.g4 .card,.grid.g2 .card{border-radius:16px}

/* 按钮：内高光 + 落影 */
.btn{box-shadow:0 5px 14px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.12);letter-spacing:.2px}
.btn.gold{background:var(--gold-grad);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* 标签更精致 */
.tag{border-radius:999px;letter-spacing:.2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.tag.gold{background:linear-gradient(180deg,rgba(245,195,82,.24),rgba(245,195,82,.12));
  box-shadow:0 0 0 1px rgba(245,195,82,.22),inset 0 1px 0 rgba(255,255,255,.12)}

/* 分段控件 */
.segment{background:rgba(0,0,0,.28);box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.segment .seg.on{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:0 2px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16)}

/* 弹窗 / 抽屉 */
.modal{box-shadow:var(--sh-pop);border:1px solid rgba(255,255,255,.08)}
.modal-head h3{background:linear-gradient(180deg,#fff,#c3d0de);-webkit-background-clip:text;background-clip:text;color:transparent}
.sheet{border-radius:22px 22px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.6);border-top:1px solid rgba(255,255,255,.1)}
.sheet-head{padding-bottom:10px}

/* Banner 更有质感 */
.banner{box-shadow:var(--sh-card);border:1px solid rgba(255,255,255,.07)}

/* Toast */
.toast{box-shadow:0 10px 30px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}

/* 滚动条 */
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3d4d61,#2a3544);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#4a5b70}

/* 底部导航 */
.navbar{backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(19,26,36,.96),rgba(9,13,19,.98));
  border-top:1px solid rgba(255,255,255,.07);box-shadow:0 -8px 22px rgba(0,0,0,.4)}

/* 数字/金额强调 */
.mono{letter-spacing:.2px}

/* 页面入场更顺滑 */
.screen-root{animation:none}

/* ================= 科技感升级 · 2.0 ================= */

/* 全局：科技网格微光 + 极光 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(140,190,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(1100px 760px at 50% 18%,#000 0%,transparent 74%);
          mask-image:radial-gradient(1100px 760px at 50% 18%,#000 0%,transparent 74%)}
#app{z-index:1}
.app-shell{position:relative;z-index:1}

/* 顶栏：底部流光分隔线 */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(245,195,82,.5) 28%,rgba(59,140,255,.35) 62%,transparent)}

/* 品牌标识：透明背景，让上传的透明 Logo 图标直接浮在顶栏上 */
.brand-mark{background:transparent;border:none;box-shadow:none}
.brand-mark img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

/* 主按钮：顶部高光 + 霓虹描边 */
.btn.gold{box-shadow:0 6px 18px rgba(245,195,82,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.green{box-shadow:0 6px 18px rgba(46,204,113,.35),inset 0 1px 0 rgba(255,255,255,.30)}
.btn.red{box-shadow:0 6px 18px rgba(255,90,95,.32),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.blue{box-shadow:0 6px 18px rgba(59,140,255,.30),inset 0 1px 0 rgba(255,255,255,.22)}

/* 卡片：霓虹悬停光晕 */
.card[style*="cursor:pointer"]:hover{border-color:rgba(245,195,82,.42);
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 22px rgba(245,195,82,.12),inset 0 1px 0 rgba(255,255,255,.10)}

/* 分段控件选中项：金色辉光 */
.segment.gold .seg.on{box-shadow:0 3px 12px rgba(245,195,82,.45),inset 0 1px 0 rgba(255,255,255,.5)}

/* 底部导航：顶部流光线 */
.navbar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(245,195,82,.35) 30%,rgba(59,140,255,.25) 70%,transparent)}
.navbar{position:relative}

/* 资产条筹码：辉光 */
.chip-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 10px rgba(0,0,0,.35)}
.chip-pill .coin{box-shadow:0 0 10px rgba(245,195,82,.5)}

/* 输入框聚焦：蓝色科技辉光备选 */
.input-wrap:focus-within{border-color:rgba(245,195,82,.75);box-shadow:0 0 0 3px rgba(245,195,82,.14),0 0 18px rgba(245,195,82,.10)}

/* 进度条：流光 */
.bar > i{position:relative;overflow:hidden}
.bar > i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:barShine 2.4s linear infinite}
@keyframes barShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* 弹窗标题下的金色分隔 */
.modal-head{position:relative}
.modal-head::after{content:"";position:absolute;left:22%;right:22%;bottom:2px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,195,82,.55),transparent)}