/* 云朵电竞 · 暗色主题令牌层（单一暗色，取消日/夜切换）
   2026-09-30 三端 UI 改造批 1：本层数值逐条取自 YUNDUOUI/DESIGN-SYSTEM.md v1.1 的 §2 tokens 与 §10.3 可粘贴片段，
   基准从旧那套「深蓝底 + 电光蓝→青」换成「深蓝黑底 + 蓝紫霓虹 + 银白高光」的电竞 HUD 语言。
   兼容策略：旧变量名（--bg/--card/--tx/--gold/--purple…）全部保留并改指新值，
   所以 styles.css 与各页内联 <style> 里的几百处 var() 一行不用改就跟着换皮。
   要新增颜色请用新令牌名，不要再往旧名上挂新语义。 */

/* ---------- 1. 规范令牌（DESIGN-SYSTEM §2.1 / §2.2）---------- */
:root{
  color-scheme:dark;
  /* 底色三段 + 面板四档（面板必须带透明度，底纹网格才透得出来） */
  --bg-0:#04060d; --bg-1:#070b16; --bg-2:#0b1020;
  --panel:rgba(16,23,44,.74); --panel-2:rgba(11,16,32,.62); --panel-3:rgba(22,31,58,.55); --panel-4:rgba(8,12,24,.86);
  --line:rgba(122,160,255,.14); --line-2:rgba(122,160,255,.30);
  /* 霓虹五色 + 语义色：金色只做排名/金额/警示，不做主色、不做正文色 */
  --cyan:#35e8ff; --blue:#4a7cff; --violet:#9b5cff; --magenta:#ff3d8b;
  --gold:#ffcb5c; --green:#33e59b; --red:#ff5d6c; --orange:#ff9d4d;
  --txt:#eaf0ff; --txt-2:#a7b3d4; --txt-3:#6c7999;
  --grad-neon:linear-gradient(115deg,var(--cyan),var(--blue) 45%,var(--violet));
  --grad-gold:linear-gradient(120deg,#ffe9a8,var(--gold) 55%,#ff9d4d);
  --grad-band:linear-gradient(90deg,rgba(74,124,255,.92),rgba(155,92,255,.86) 60%,rgba(53,232,255,.7));
  --r-s:8px; --r-m:14px; --r-l:20px;
  --f-cn:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --f-num:"Bahnschrift","DIN Alternate","Rajdhani","Segoe UI Variable Display",var(--f-cn);
  --ease:cubic-bezier(.22,.86,.28,1); --ease-snap:cubic-bezier(.7,.3,.1,1);
  --shadow-neon:0 0 0 1px rgba(53,232,255,.10),0 10px 30px -12px rgba(74,124,255,.55);
  /* §4 状态色调（三端同一张表的文字档）*/
  --tone-pending:#ffd48a; --tone-done:#7ff0c4; --tone-warn:#ffb4d0; --tone-bad:#ff9ba6; --tone-cyan:#8ceaff;
}

/* ---------- 2. 旧变量名 → 新值（兼容层，各页组件靠它跟着换皮；删了会整站回白底）---------- */
:root{
  --radius:14px; --radius-lg:20px; --pill:999px;
  --nav-h:52px; --tab-h:58px;
  --ease-md:cubic-bezier(.645,.045,.355,1); --ease-out:cubic-bezier(.2,.8,.2,1);
  --font:var(--f-cn);
  --bg:var(--bg-1); --bg2:var(--bg-2);
  --card:var(--panel); --card2:var(--panel-3); --elev:rgba(30,40,70,.72);
  --surface-glass:rgba(11,16,32,.78);
  --purple:var(--blue); --purple-l:#7fa6ff;        /* 旧「主色」槽位→蓝，亮一档走淡蓝紫 */
  --accent:var(--cyan); --accent-l:#8ceaff;
  --gold-l:#ffd48a;                                /* 金的亮档（§4 待处理态的正文色就是它）*/
  --silver:#d9e2ee; --cloud:var(--txt);
  --tx:var(--txt); --tx2:var(--txt-2); --tx3:var(--txt-3);
  --line-gold:rgba(255,203,92,.28);                /* 从青色改回真金：金额与排名描边 */
  --ok:var(--green); --warn:#ff7a86;
  --on-accent:#08101f; --on-btn:#08101f;           /* 霓虹实心按钮上永远深底字 */
  --fill:rgba(122,160,255,.08); --fill2:rgba(122,160,255,.14); --input-bg:rgba(5,9,18,.7);
  --nav-bg:rgba(7,11,22,.72); --tab-bg:var(--panel-4);
  --glow1:rgba(74,124,255,.30); --glow2:rgba(155,92,255,.20); --glow3:rgba(53,232,255,.18);
  --grad-accent:linear-gradient(140deg,rgba(74,124,255,.20),rgba(155,92,255,.12) 55%,rgba(53,232,255,.10));
  --hero-grad:linear-gradient(135deg,rgba(23,34,66,.92),rgba(9,14,28,.94) 55%,rgba(11,30,58,.96));
  --shadow:0 14px 34px -18px rgba(0,0,0,.75);
  --shadow-glow:var(--shadow-neon);
  --ring:rgba(53,232,255,.09);                     /* focus 外发光（§5.2：用发光不用粗边框，不撑动布局）*/
  --primary-soft:rgba(74,124,255,.16); --primary-soft2:rgba(74,124,255,.32); --accent-soft:rgba(255,203,92,.14);
  --avatar-grad:linear-gradient(150deg,var(--blue),var(--cyan));
  --btn-grad:var(--grad-neon);
  --deco-cloud:rgba(74,124,255,.10);
  /* 霓虹小标签色板 */
  --b-blue:#4a7cff; --b-cyan:#35e8ff; --b-purple:#9b5cff; --b-pink:#ff3d8b; --b-gold:#ffcb5c; --b-orange:#ff9d4d;
}

/* ---------- 全局底色与底纹（§6.2）---------- */
/* 底纹只叠在 html 上，不在 body 开定位伪元素：
   负 z-index 的伪元素会被 body 自己的底色压住，正 z-index 的又会盖在正文上面（两种都要现场翻车）；
   多层 background 的第一层画在最上，所以顺序是 扫描高光 → 网格 → 三团光斑 → 径向底。
   background-attachment:fixed 是因为 body 只有视口高（height:100%）而内容会滚动，不固定就滚到下面没底纹。
   scrollbar-gutter:stable —— 预留滚动条槽位。
   否则内容不足一屏时滚动条会收回去，.wrap 宽度突变导致整页横移
   （商品页切到短图 tab 时实测到 CLS 0.04+，元素 = DIV.foot.wrap w487>0）。 */
html{
  background-color:var(--bg-0);
  background-image:
    linear-gradient(180deg,rgba(53,232,255,.05),transparent 260px),
    linear-gradient(rgba(122,160,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,160,255,.045) 1px,transparent 1px),
    radial-gradient(420px 420px at 8% 6%,rgba(42,92,255,.26),transparent 66%),
    radial-gradient(380px 380px at 92% 18%,rgba(139,61,255,.22),transparent 66%),
    radial-gradient(340px 340px at 50% 96%,rgba(0,200,230,.14),transparent 68%),
    radial-gradient(120% 90% at 50% -10%,#101a38 0%,var(--bg-1) 45%,var(--bg-0) 100%);
  background-size:100% 100%,44px 44px,44px 44px,auto,auto,auto,auto;
  background-attachment:fixed;
  background-repeat:no-repeat;
  scrollbar-gutter:stable;
}
body{background:transparent;color:var(--tx)}
/* 金额/编号/时间统一走等宽拉丁数字体（§2.3）*/
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- 去掉浏览器原生点击/聚焦的轮廓框（老板 09-30 令：所有可点元素的系统蓝色方框全部关）----------
   注意：DESIGN-SYSTEM §10.5 原本要求 :focus-visible 留可见轮廓，这里按老板明令关掉；
   反馈改由 hover / :active 的位移与发光承担（不是“点了没反应”）。键盘用户会失去焦点框，已记在文档里。 */
*{-webkit-tap-highlight-color:transparent;}
:focus{outline:none;}
:focus-visible{outline:none !important;border-color:inherit}
::selection{background:rgba(74,124,255,.38);color:#fff}

/* ---------- 高级线性图标（内联 SVG 通用样式，描边随 currentColor）---------- */
.ic-svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.14em;flex:none}

/* ---------- 云朵 / 光晕装饰工具 ---------- */
.clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.clouds::before,.clouds::after{content:"";position:absolute;border-radius:50%;filter:blur(30px);opacity:.9;}
.clouds::before{width:46%;padding-top:46%;left:-8%;top:-12%;background:radial-gradient(circle,var(--glow1),transparent 70%);}
.clouds::after{width:40%;padding-top:40%;right:-6%;top:6%;background:radial-gradient(circle,var(--glow2),transparent 70%);}
.cloud-puff{position:absolute;border-radius:50%;background:var(--deco-cloud);filter:blur(14px);}
.glass{background:var(--surface-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ---------- 减少动效降级（§8.4：新增动效必须落在这个网里）---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* 长按选中与点击高亮的补强（老板 09-30 令）：只关控件，输入框留着 */
button,a,.tabbar,.nav,.btn,.chip,.st,.badge,.card,.cat,.pcard,.prow,.ocard,.mcard,.amt,.tier,.menu a,.frow,.rk,.gitem{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}