/* ============================================================
   NOVAX 设计系统 · jzlx.lol 风格 · v6 手机端主题双保险
   修复清单：
   1) 主题变量完全解耦：默认兜底→light放前面→dark放后面（同属性靠后胜）
   2) 暗模式对比度AA+：t2=#dce3f0 t3=#b0bacd line=#354059 line2=#4e5a78
   3) 抽屉 animating class 分步触发 520ms cubic-bezier(.16,1,.3,1)
   4) light模式补齐：滚动条、skel、input hover/focus阴影、ann-bar文字
   5) 手机端主题不跟随：attribute + class 双通道选择器（data-theme= / .nx-theme-）
      且对所有常见组件补 *通配* 选择器，防止 DOM 子树里 CSS 变量未扩散
   ============================================================ */

/* ---- 默认兜底（极端情况：脚本都没执行时的基础色）
        套餐A · 对齐 jzlx.lol：青蓝主色 + 薄荷绿做多 + 蓝绿渐变CTA
        K线涨跌维持「蓝涨红跌」不变（--up/--dn/candle-up/down）
        做多/做空按钮新增 --long/--short 独立变量，不与涨跌颜色耦合 ---- */
:root {
  --bg:#000000; --bg2:#0b0e14; --bg3:#151b27; --bg4:#1d2536;
  --line:#2a2f3a; --line2:#3d4454;
  --t1:#ffffff; --t2:#e2e8f3; --t3:#9aa3b5;
  /* ===== 配色系统（套餐A · jzlx.lol） ===== */
  --brand:#22d3ee;          /* 主色高亮：青蓝 cyan-400（链接/Tab选中/底部导航高亮） */
  --brand2:#06b6d4;         /* 深色青蓝 cyan-500（hover/暗模式高亮） */
  --brand-dim:rgba(34,211,238,.18);  /* 低透明度高光（背景/阴影） */
  --brand-ring:rgba(34,211,238,.34); /* focus ring */
  --long:#10b981;           /* 做多/买入 · 薄荷绿 emerald-500（交易页按钮） */
  --long2:#059669;          /* 深薄荷绿（hover） */
  --long-dim:rgba(16,185,129,.20);
  --short:#ef4444;          /* 做空/卖出 · 红 */
  --short2:#dc2626;
  --short-dim:rgba(239,68,68,.22);
  /* 首页 CTA 按钮渐变（左 天蓝 cyan → 右 薄荷绿 emerald） */
  --cta-gradient: linear-gradient(90deg, #22d3ee 0%, #34d399 100%);
  --cta-gradient-dim: linear-gradient(90deg, rgba(34,211,238,.14) 0%, rgba(52,211,153,.14) 100%);
  /* ===== 涨跌 & K线（保持蓝涨红跌，与青蓝主色解耦） ===== */
  --up:#22d3ee;  --up2:#06b6d4;  --up-dim:rgba(34,211,238,.18);
  --dn:#ef4444;  --dn2:#dc2626;  --dn-dim:rgba(239,68,68,.22);
  --gold:var(--brand); --gold2:var(--brand2); --gold-dim:var(--brand-dim);
  --chart-bg:#000000; --chart-grid:rgba(86,98,127,.85);
  --chart-text:#cfd7e6; --chart-cross:#7583a2; --chart-cross-label:#0b0e14;
  --candle-up:#22d3ee; --candle-dn:#ef4444;
  --vol-up:rgba(34,211,238,.55); --vol-dn:rgba(239,68,68,.55);
  /* ===== 圆角策略（套餐A · 混合） ===== */
  --r-pill:9999px;  /* 胶囊完全圆角：首页CTA、搜索框、底部logo胶囊 */
  --r-md:12px;      /* 中等圆角：输入框、交易页按钮、面板弹窗 */
  --r-xs:8px;       /* 小圆角：小徽章、卡片内部 */
  --r:10px;         /* 默认卡片/面板 */
  --r2:6px;         /* 兼容旧变量（小按钮/小表格） */
  /* ===== UICraft 动效 tokens · 时长四档（100-150/200-300/300-500/500-800） ===== */
  --dur-100:100ms;   /* 即时反馈：按钮按压、toggle、颜色swap */
  --dur-150:150ms;
  --dur-200:200ms;   /* 状态切换：hover、菜单、tooltip */
  --dur-300:300ms;
  --dur-420:420ms;   /* 布局变化：accordion、modal、drawer */
  --dur-520:520ms;
  --dur-640:640ms;   /* 入场：page load、hero reveal */
  --dur-800:800ms;
  /* ===== UICraft 缓动曲线（禁用 bounce/elastic） ===== */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);     /* 精致均匀 · 默认 */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);    /* 略果断 */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);     /* 自信决绝 */
  --ease-in-quart:  cubic-bezier(0.7, 0, 0.84, 0);     /* 离场加速 */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);    /* 双向切换 */
  --ease: cubic-bezier(.16,1,.3,1);                    /* 兼容旧名 = ease-out-expo */
  /* 旧名兼容 */
  --dur-fast:160ms; --dur:300ms; --dur-slow:520ms;
  --mono:"SF Mono","Cascadia Code",Consolas,"Roboto Mono",monospace;
  /* stagger step */
  --stagger: 70ms;
}

/* 生成属性 + class 双通道的简写：light 在前面 */
:root[data-theme="light"], html[data-theme="light"],body[data-theme="light"],:root.nx-theme-light,html.nx-theme-light,body.nx-theme-light,[data-theme="light"],.nx-theme-light,:root.nx-theme-light, html.nx-theme-light, body.nx-theme-light, [data-theme="light"], .nx-theme-light,:root.nx-theme-light, html.nx-theme-light, body.nx-theme-light, [data-theme="light"], .nx-theme-light,
:root.nx-theme-light, html.nx-theme-light, body.nx-theme-light,
[data-theme="light"], .nx-theme-light {
  --bg:#f4f6fb; --bg2:#ffffff; --bg3:#eef1f7; --bg4:#ffffff;
  --line:#e3e7ef; --line2:#c8cfdd;
  --t1:#090d16; --t2:#283246; --t3:#5b6881;
  /* 套餐A · light */
  --brand:#06b6d4; --brand2:#0891b2;
  --brand-dim:rgba(6,182,212,.12); --brand-ring:rgba(6,182,212,.28);
  --long:#059669; --long2:#047857;
  --long-dim:rgba(5,150,105,.12);
  --short:#dc2626; --short2:#b91c1c;
  --short-dim:rgba(220,38,38,.12);
  --cta-gradient: linear-gradient(90deg, #06b6d4 0%, #10b981 100%);
  --cta-gradient-dim: linear-gradient(90deg, rgba(6,182,212,.10) 0%, rgba(16,185,129,.10) 100%);
  --up:#06b6d4; --up2:#0891b2; --up-dim:rgba(6,182,212,.12);
  --dn:#dc2626; --dn2:#b91c1c; --dn-dim:rgba(220,38,38,.12);
  --gold:#06b6d4; --gold2:#0891b2; --gold-dim:rgba(6,182,212,.12);
  --chart-bg:#ffffff; --chart-grid:rgba(196,204,220,.8);
  --chart-text:#3c475a; --chart-cross:#8a96ad; --chart-cross-label:#eef1f6;
  --candle-up:#06b6d4; --candle-dn:#dc2626;
  --vol-up:rgba(6,182,212,.38); --vol-dn:rgba(220,38,38,.38);
  color-scheme: light;
}

/* Dark（放后面，必定胜过 light 的同名属性） */
:root[data-theme="dark"], html[data-theme="dark"],body[data-theme="dark"],:root.nx-theme-dark,html.nx-theme-dark,body.nx-theme-dark,[data-theme="dark"],.nx-theme-dark,:root.nx-theme-dark,  html.nx-theme-dark,  body.nx-theme-dark,  [data-theme="dark"],  .nx-theme-dark,:root.nx-theme-dark,  html.nx-theme-dark,  body.nx-theme-dark,  [data-theme="dark"],  .nx-theme-dark,
:root.nx-theme-dark, html.nx-theme-dark, body.nx-theme-dark,
[data-theme="dark"], .nx-theme-dark {
  --bg:#000000; --bg2:#0b0e14; --bg3:#151b27; --bg4:#1d2536;
  --line:#2a2f3a; --line2:#3d4454;
  --t1:#ffffff; --t2:#e2e8f3; --t3:#9aa3b5;
  /* 套餐A · dark */
  --brand:#22d3ee; --brand2:#06b6d4;
  --brand-dim:rgba(34,211,238,.18); --brand-ring:rgba(34,211,238,.34);
  --long:#10b981; --long2:#059669;
  --long-dim:rgba(16,185,129,.20);
  --short:#ef4444; --short2:#dc2626;
  --short-dim:rgba(239,68,68,.22);
  --cta-gradient: linear-gradient(90deg, #22d3ee 0%, #34d399 100%);
  --cta-gradient-dim: linear-gradient(90deg, rgba(34,211,238,.14) 0%, rgba(52,211,153,.14) 100%);
  --up:#22d3ee;  --up2:#06b6d4;  --up-dim:rgba(34,211,238,.18);
  --dn:#ef4444;  --dn2:#dc2626;  --dn-dim:rgba(239,68,68,.22);
  --gold:var(--brand); --gold2:var(--brand2); --gold-dim:var(--brand-dim);
  --chart-bg:#000000; --chart-grid:rgba(86,98,127,.85);
  --chart-text:#cfd7e6; --chart-cross:#7583a2; --chart-cross-label:#0b0e14;
  --candle-up:#22d3ee; --candle-dn:#ef4444;
  --vol-up:rgba(34,211,238,.55); --vol-dn:rgba(239,68,68,.55);
  color-scheme: dark;
}

/* ---- 全局 transition（排除高开销/动画组件） ---- */
*, *::before, *::after {
  transition-property: background-color, background, border-color, color, box-shadow, outline-color, fill, stroke, text-decoration-color, opacity;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
}
.toast, .modal, .skel, .tag-dot, .ann-bar, ::-webkit-scrollbar-thumb { transition-property: none; }
.drawer, .drawer-mask { transition-property: none; } /* 精确单独控制 */

/* ---- 手机端 Tab Bar 默认隐藏，PC 端不占位；仅在 ≤480px 显示 ---- */
.m-tabbar{display:none}
/* ---- 抽屉右上角关闭按钮（套餐A：绝对定位到右上角，带背景圆） ---- */
.drawer-close.top-right{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--bg3);color:var(--t1);display:inline-flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;transition:transform var(--dur-150) var(--ease),background var(--dur-150) var(--ease),color var(--dur-150) var(--ease)}
.drawer-close.top-right:hover{color:var(--brand);background:var(--brand-dim);transform:rotate(90deg)}
.drawer-close.top-right svg{width:16px;height:16px;display:block}
/* ---- 抽屉网格菜单高亮（选中态） ---- */
.mnu-grid .mi.on svg, .mnu-grid .mi.on .ic{color:var(--brand);stroke:var(--brand)}
.mnu-grid .mi.on .lbl{color:var(--brand);font-weight:800}
/* ---- 抽屉旧 head 在新布局下隐藏 ---- */
.drawer-head{display:none}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html,body{max-width:100vw;overflow-x:hidden}
html{background:var(--bg);color:var(--t1);-webkit-text-size-adjust:100%;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
body{background:var(--bg);color:var(--t1);font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",sans-serif;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;text-rendering:auto;letter-spacing:0;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav,.drawer,.panel,.modal,.dropdown-menu,.mask,.admin-side,.admin-main,.micro-chart,.trader-card,.fin-card,.stock-row,.ad-row,.order-card,.hero,.hero-tape,.feat,.flow,.step,.auth-body,.auth-side{background-color:var(--bg2)}
body.drawer-open{position:fixed;inset:0;overflow:hidden;touch-action:none}
a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--brand-ring);outline-offset:1px}
::selection{background:var(--brand-dim);color:var(--t1)}

/* ---- 滚动条（暗/亮独立） ·  双通道：attribute + class 均可命中 ---- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--t3) 60%, transparent);border-radius:999px;transition:background var(--dur) var(--ease)}
html[data-theme="light"] ::-webkit-scrollbar-thumb,
body[data-theme="light"] ::-webkit-scrollbar-thumb,:root.nx-theme-light ::-webkit-scrollbar-thumb,html.nx-theme-light ::-webkit-scrollbar-thumb,body.nx-theme-light ::-webkit-scrollbar-thumb,[data-theme="light"] ::-webkit-scrollbar-thumb,.nx-theme-light ::-webkit-scrollbar-thumb,
:root.nx-theme-light ::-webkit-scrollbar-thumb, html.nx-theme-light ::-webkit-scrollbar-thumb, body.nx-theme-light ::-webkit-scrollbar-thumb, .nx-theme-light ::-webkit-scrollbar-thumb{background:#c2cbdc}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--t3) 85%, transparent)}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
body[data-theme="light"] ::-webkit-scrollbar-thumb:hover,:root.nx-theme-light ::-webkit-scrollbar-thumb:hover,html.nx-theme-light ::-webkit-scrollbar-thumb:hover,body.nx-theme-light ::-webkit-scrollbar-thumb:hover,[data-theme="light"] ::-webkit-scrollbar-thumb:hover,.nx-theme-light ::-webkit-scrollbar-thumb:hover,
:root.nx-theme-light ::-webkit-scrollbar-thumb:hover, html.nx-theme-light ::-webkit-scrollbar-thumb:hover, body.nx-theme-light ::-webkit-scrollbar-thumb:hover, .nx-theme-light ::-webkit-scrollbar-thumb:hover{background:#a9b4ca}
::-webkit-scrollbar-track{background:transparent}

.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.up{color:var(--up)}.dn{color:var(--dn)}
.up-bg{background:var(--up-dim)}.dn-bg{background:var(--dn-dim)}
.mono{font-family:var(--mono)}
.muted{color:var(--t3);font-weight:500}.dim{color:var(--t2);font-weight:500}
.flex{display:flex;align-items:center}
.between{justify-content:space-between}
.gap8{gap:8px}.gap12{gap:12px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.hide{display:none!important}
.wrap-page{max-width:1240px;margin:0 auto;padding:24px 20px}
.page-fade{animation:pageFadeIn .5s var(--ease) both}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ================ 导航 ================ */
.nav{height:60px;display:flex;align-items:center;gap:28px;background:var(--bg2);border-bottom:1px solid var(--line);padding:0 28px;position:sticky;top:0;z-index:100;backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
html[data-theme="light"] .nav,body[data-theme="light"] .nav,:root.nx-theme-light .nav,html.nx-theme-light .nav,body.nx-theme-light .nav,[data-theme="light"] .nav,.nx-theme-light .nav,:root.nx-theme-light .nav,html.nx-theme-light .nav,body.nx-theme-light .nav,.nx-theme-light .nav{background:rgba(255,255,255,.88);border-bottom-color:var(--line)}
.nav .logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;letter-spacing:.06em}
.nav .logo svg,.nav .logo img{display:block;transition:transform var(--dur) var(--ease)}
.nav .logo:hover svg,.nav .logo:hover img{transform:rotate(-6deg) scale(1.04)}
.nav .logo em{font-style:normal;color:var(--brand)}
.nav .logo .logo-txt{background:linear-gradient(180deg,var(--t1),#bcc4d2 130%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.06em;position:relative}
html[data-theme="light"] .nav .logo .logo-txt,body[data-theme="light"] .nav .logo .logo-txt,:root.nx-theme-light .nav .logo .logo-txt,html.nx-theme-light .nav .logo .logo-txt,body.nx-theme-light .nav .logo .logo-txt,[data-theme="light"] .nav .logo .logo-txt,.nx-theme-light .nav .logo .logo-txt,:root.nx-theme-light .nav .logo .logo-txt,html.nx-theme-light .nav .logo .logo-txt,body.nx-theme-light .nav .logo .logo-txt,.nx-theme-light .nav .logo .logo-txt{background:linear-gradient(180deg,var(--t1),#47556b 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:2px;height:100%}
.nav-links a{display:flex;align-items:center;padding:0 16px;font-size:13px;color:var(--t2);border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);position:relative;font-weight:600}
.nav-links a:hover{color:var(--t1);background:var(--bg3)}
.nav-links a.on{color:var(--brand);border-bottom-color:var(--brand);background:var(--brand-dim);font-weight:800}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-search-wrap{position:relative;flex:0 1 280px;min-width:160px;max-width:320px}
.nav-search{height:38px;border-radius:var(--r-pill);background:var(--bg3);padding:0 14px;display:flex;align-items:center;gap:8px;color:var(--t3);font-size:13px;font-weight:500;border:1px solid transparent;transition:border-color var(--dur-150) var(--ease),background var(--dur-150) var(--ease)}
.nav-search:hover,.nav-search:focus-within{background:var(--bg4);border-color:var(--line2)}
.nav-search svg{width:15px;height:15px;flex:0 0 auto;color:var(--t3)}
.nav-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--t1);outline:none;font:inherit}
.nav-search input::placeholder{color:var(--t3)}
.nav-search-drop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:240;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:360px;overflow-y:auto;padding:6px}
.nav-search-item{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;background:none;border:0;color:var(--t1);padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;font:inherit}
.nav-search-item:hover{background:var(--bg3)}
.nav-search-item img,.nav-search-fb{width:28px;height:28px;border-radius:8px;object-fit:cover;flex-shrink:0}
.nav-search-fb{display:inline-flex;align-items:center;justify-content:center;background:var(--brand-dim);color:var(--brand);font-size:12px;font-weight:800}
.nav-search-item .n{min-width:0;display:flex;flex-direction:column;gap:1px}
.nav-search-item .n b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-search-item .n em{font-style:normal;font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-search-item .p{font-size:12px;font-weight:700;flex-shrink:0;white-space:nowrap}
.nav-search-empty{padding:12px;font-size:12px;color:var(--t3);text-align:center}
.nav-user{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 10px;border-radius:var(--r2);transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.nav-user:hover{background:var(--bg3)}
.nav-user:active{transform:translateY(1px)}
.nav-user .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#1e3a8a,#2a64fb 80%,#5b8bff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
html[data-theme="light"] .nav-user .av,body[data-theme="light"] .nav-user .av,:root.nx-theme-light .nav-user .av,html.nx-theme-light .nav-user .av,body.nx-theme-light .nav-user .av,[data-theme="light"] .nav-user .av,.nx-theme-light .nav-user .av,:root.nx-theme-light .nav-user .av,html.nx-theme-light .nav-user .av,body.nx-theme-light .nav-user .av,.nx-theme-light .nav-user .av{background:linear-gradient(135deg,#dbe6ff,#b7ccff);color:#1e3a8a;box-shadow:inset 0 0 0 1px rgba(42,100,251,.14)}
.nav-user .nm{font-size:13px;color:var(--t1);font-weight:700}
.nav-user .bal{font-size:11px;color:var(--t3);font-weight:600}
.nav-login{display:flex;gap:8px;align-items:center}
.nav-icon-btn{position:relative;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--t1);background:transparent;cursor:pointer;border:0;text-decoration:none;flex:0 0 auto}
.nav-icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.nav-bell{background:var(--bg3)}
.nav-bell #msgBadgeCount{display:none;position:absolute;top:-2px;right:-4px;background:#e94c4c;color:#fff;font-size:10px;padding:0 5px;border-radius:999px;line-height:16px;min-width:16px;text-align:center}
.tag-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);display:inline-block;box-shadow:0 0 0 3px var(--brand-dim);animation:tagPulse 1.8s infinite}
@keyframes tagPulse{0%,100%{box-shadow:0 0 0 3px var(--brand-dim);opacity:1}50%{box-shadow:0 0 0 5px rgba(42,100,251,.06);opacity:.85}}

/* ================ 公告条（强对比度） ================ */
.ann-bar{display:flex;align-items:center;gap:12px;padding:10px 20px;font-size:12.5px;color:#fff;background:linear-gradient(90deg,rgba(42,100,251,.20),rgba(42,100,251,.36));border-bottom:1px solid rgba(42,100,251,.48);overflow:hidden;position:relative;z-index:99}
.ann-bar .ann-ic{flex:0 0 auto;opacity:1}
.ann-bar .ann-txt{flex:1 1 auto;min-width:0;line-height:1.55;color:#eef2ff;font-weight:600}
.ann-bar .ann-txt a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:800}
.ann-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;cursor:pointer;transition:all .18s var(--ease)}
.ann-close:hover{background:rgba(255,255,255,.28);transform:rotate(90deg)}
.ann-close svg{width:13px;height:13px;display:block}
.ann-bar.ann-brand{background:linear-gradient(90deg,rgba(42,100,251,.20),rgba(42,100,251,.38));border-bottom-color:rgba(42,100,251,.52);color:#eef2ff}
.ann-bar.ann-up{background:linear-gradient(90deg,rgba(42,100,251,.16),rgba(91,139,255,.34));border-bottom-color:rgba(91,139,255,.50);color:#eef2ff}
.ann-bar.ann-dn{background:linear-gradient(90deg,rgba(239,68,68,.22),rgba(248,113,113,.38));border-bottom-color:rgba(248,113,113,.52);color:#fff1f1}
.ann-bar.ann-dn .ann-txt{color:#fff1f1;font-weight:600}
.ann-bar.ann-off{background:linear-gradient(90deg,rgba(125,134,151,.20),rgba(125,134,151,.36));border-bottom-color:rgba(150,158,175,.55);color:var(--t1)}
.ann-bar.ann-off .ann-txt{color:var(--t1);font-weight:700}
html[data-theme="light"] .ann-bar.ann-brand,body[data-theme="light"] .ann-bar.ann-brand,:root.nx-theme-light .ann-bar.ann-brand,html.nx-theme-light .ann-bar.ann-brand,body.nx-theme-light .ann-bar.ann-brand,[data-theme="light"] .ann-bar.ann-brand,.nx-theme-light .ann-bar.ann-brand{background:linear-gradient(90deg,rgba(42,100,251,.10),rgba(42,100,251,.24));border-bottom-color:rgba(42,100,251,.34);color:#0e1725}
html[data-theme="light"] .ann-bar.ann-brand .ann-txt,body[data-theme="light"] .ann-bar.ann-brand .ann-txt,:root.nx-theme-light .ann-bar.ann-brand .ann-txt,html.nx-theme-light .ann-bar.ann-brand .ann-txt,body.nx-theme-light .ann-bar.ann-brand .ann-txt,[data-theme="light"] .ann-bar.ann-brand .ann-txt,.nx-theme-light .ann-bar.ann-brand .ann-txt{color:#0e1725;font-weight:700}
html[data-theme="light"] .ann-bar.ann-up,body[data-theme="light"] .ann-bar.ann-up,:root.nx-theme-light .ann-bar.ann-up,html.nx-theme-light .ann-bar.ann-up,body.nx-theme-light .ann-bar.ann-up,[data-theme="light"] .ann-bar.ann-up,.nx-theme-light .ann-bar.ann-up{background:linear-gradient(90deg,rgba(42,100,251,.08),rgba(91,139,255,.20));border-bottom-color:rgba(42,100,251,.30);color:#0e1725}
html[data-theme="light"] .ann-bar.ann-dn,body[data-theme="light"] .ann-bar.ann-dn,:root.nx-theme-light .ann-bar.ann-dn,html.nx-theme-light .ann-bar.ann-dn,body.nx-theme-light .ann-bar.ann-dn,[data-theme="light"] .ann-bar.ann-dn,.nx-theme-light .ann-bar.ann-dn{background:linear-gradient(90deg,rgba(239,68,68,.10),rgba(248,113,113,.20));border-bottom-color:rgba(239,68,68,.30);color:#4a0808}
html[data-theme="light"] .ann-bar.ann-dn .ann-txt,body[data-theme="light"] .ann-bar.ann-dn .ann-txt,:root.nx-theme-light .ann-bar.ann-dn .ann-txt,html.nx-theme-light .ann-bar.ann-dn .ann-txt,body.nx-theme-light .ann-bar.ann-dn .ann-txt,[data-theme="light"] .ann-bar.ann-dn .ann-txt,.nx-theme-light .ann-bar.ann-dn .ann-txt{color:#4a0808;font-weight:700}
html[data-theme="light"] .ann-bar.ann-off,body[data-theme="light"] .ann-bar.ann-off,:root.nx-theme-light .ann-bar.ann-off,html.nx-theme-light .ann-bar.ann-off,body.nx-theme-light .ann-bar.ann-off,[data-theme="light"] .ann-bar.ann-off,.nx-theme-light .ann-bar.ann-off{background:linear-gradient(90deg,#f2f4f7,#e7ebf2);border-bottom-color:#dde2ec;color:#0e1725}

/* ================ 下拉菜单 ================ */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:6px;box-shadow:0 24px 48px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset;opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);display:block;z-index:120}
html[data-theme="light"] .dropdown-menu,body[data-theme="light"] .dropdown-menu,:root.nx-theme-light .dropdown-menu,html.nx-theme-light .dropdown-menu,body.nx-theme-light .dropdown-menu,[data-theme="light"] .dropdown-menu,.nx-theme-light .dropdown-menu{background:#fff;border-color:#e3e7ef;box-shadow:0 18px 40px rgba(15,23,34,.10)}
.dropdown.open .dropdown-menu{opacity:1;transform:none;pointer-events:auto;top:calc(100% + 8px)}
.dropdown-menu a,.dropdown-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:6px;font-size:13px;color:var(--t2);background:none;border:0;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);font-weight:600}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--bg3);color:var(--t1);transform:translateX(2px)}

/* ================ 按钮 ================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 18px;border-radius:var(--r2);border:1px solid var(--line2);background:var(--bg3);color:var(--t1);font-size:13px;font-weight:700;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform 80ms var(--ease),box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease);white-space:nowrap;user-select:none;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%);pointer-events:none}
.btn:hover{border-color:var(--brand);background:var(--bg3);color:var(--t1);box-shadow:0 6px 18px -8px rgba(42,100,251,.48)}
html[data-theme="light"] .btn:hover,body[data-theme="light"] .btn:hover,:root.nx-theme-light .btn:hover,html.nx-theme-light .btn:hover,body.nx-theme-light .btn:hover,[data-theme="light"] .btn:hover,.nx-theme-light .btn:hover{color:#0a0f1c;background:#eaf0ff;border-color:var(--brand)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--brand);border-color:var(--brand);color:#ffffff;box-shadow:0 8px 22px -10px rgba(42,100,251,.86)}
.btn-gold:hover{background:var(--brand2);border-color:var(--brand2);color:#ffffff;box-shadow:0 12px 28px -10px rgba(42,100,251,.96)}
.btn-up{background:var(--up);border-color:var(--up);color:#ffffff;box-shadow:0 8px 22px -10px rgba(42,100,251,.76)}
.btn-up:hover{background:var(--up2);border-color:var(--up2);color:#ffffff}
.btn-dn{background:var(--dn);border-color:var(--dn);color:#ffffff;box-shadow:0 8px 22px -10px rgba(239,68,68,.76)}
.btn-dn:hover{background:var(--dn2);border-color:var(--dn2);color:#ffffff}
.btn-ghost{background:transparent}
.btn-sm{height:32px;padding:0 12px;font-size:12px;border-radius:5px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:saturate(.6)}

/* ================ 表单（对比度强化） ================ */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-weight:800}
.field input,.field select,.field textarea{width:100%;min-height:40px;background:var(--bg4);border:1px solid var(--line2);border-radius:var(--r2);padding:0 12px;font-size:14px;outline:none;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);color:var(--t1);font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
html[data-theme="light"] .field input,body[data-theme="light"] .field input,:root.nx-theme-light .field input,html.nx-theme-light .field input,body.nx-theme-light .field input,[data-theme="light"] .field input,.nx-theme-light .field input,html[data-theme="light"] .field select,body[data-theme="light"] .field select,:root.nx-theme-light .field select,html.nx-theme-light .field select,body.nx-theme-light .field select,[data-theme="light"] .field select,.nx-theme-light .field select,html[data-theme="light"] .field textarea,body[data-theme="light"] .field textarea,:root.nx-theme-light .field textarea,html.nx-theme-light .field textarea,body.nx-theme-light .field textarea,[data-theme="light"] .field textarea,.nx-theme-light .field textarea{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.field textarea{padding:10px 12px;min-height:96px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{background:var(--bg3);border-color:var(--line2)}
html[data-theme="light"] .field input:hover,body[data-theme="light"] .field input:hover,:root.nx-theme-light .field input:hover,html.nx-theme-light .field input:hover,body.nx-theme-light .field input:hover,[data-theme="light"] .field input:hover,.nx-theme-light .field input:hover,html[data-theme="light"] .field select:hover,body[data-theme="light"] .field select:hover,:root.nx-theme-light .field select:hover,html.nx-theme-light .field select:hover,body.nx-theme-light .field select:hover,[data-theme="light"] .field select:hover,.nx-theme-light .field select:hover,html[data-theme="light"] .field textarea:hover,body[data-theme="light"] .field textarea:hover,:root.nx-theme-light .field textarea:hover,html.nx-theme-light .field textarea:hover,body.nx-theme-light .field textarea:hover,[data-theme="light"] .field textarea:hover,.nx-theme-light .field textarea:hover{background:#fff;border-color:#9aa5bb}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring),inset 0 0 0 1px var(--brand-dim);background:var(--bg3);color:var(--t1)}
html[data-theme="light"] .field input:focus,body[data-theme="light"] .field input:focus,:root.nx-theme-light .field input:focus,html.nx-theme-light .field input:focus,body.nx-theme-light .field input:focus,[data-theme="light"] .field input:focus,.nx-theme-light .field input:focus,html[data-theme="light"] .field select:focus,body[data-theme="light"] .field select:focus,:root.nx-theme-light .field select:focus,html.nx-theme-light .field select:focus,body.nx-theme-light .field select:focus,[data-theme="light"] .field select:focus,.nx-theme-light .field select:focus,html[data-theme="light"] .field textarea:focus,body[data-theme="light"] .field textarea:focus,:root.nx-theme-light .field textarea:focus,html.nx-theme-light .field textarea:focus,body.nx-theme-light .field textarea:focus,[data-theme="light"] .field textarea:focus,.nx-theme-light .field textarea:focus{background:#fff;color:var(--t1)}
.field input::placeholder{color:var(--t3);font-weight:500}
.field .suffix{position:relative}
.field .suffix input{padding-right:64px}
.field .suffix span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.frow{display:flex;gap:12px}.frow>.field{flex:1}

/* ================ 面板 / 表格 ================ */
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.panel:hover{border-color:var(--line2)}
.panel-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:12px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.12em}
.panel-bd{padding:18px}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:11px;color:var(--t2);font-weight:800;text-align:left;padding:11px 16px;border-bottom:1px solid var(--line2);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;background:var(--bg3)}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--t1);white-space:nowrap;font-weight:500}
html[data-theme="light"] .tbl th,body[data-theme="light"] .tbl th,:root.nx-theme-light .tbl th,html.nx-theme-light .tbl th,body.nx-theme-light .tbl th,[data-theme="light"] .tbl th,.nx-theme-light .tbl th{background:#f9fafc}
.tbl tbody tr{transition:background var(--dur-fast) var(--ease)}
.tbl tbody tr:hover td{background:var(--bg3)}
html[data-theme="light"] .tbl tbody tr:hover td,body[data-theme="light"] .tbl tbody tr:hover td,:root.nx-theme-light .tbl tbody tr:hover td,html.nx-theme-light .tbl tbody tr:hover td,body.nx-theme-light .tbl tbody tr:hover td,[data-theme="light"] .tbl tbody tr:hover td,.nx-theme-light .tbl tbody tr:hover td{background:#f3f6fb}
.tbl .r{text-align:right}
.empty-tip{padding:40px 0;text-align:center;color:var(--t3);font-size:13px;font-weight:500}

/* ================ Tabs ================ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;padding:12px 18px;font-size:13px;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);font-weight:600;position:relative}
.tabs button:hover{color:var(--t1);transform:translateY(-1px)}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:800;background:var(--brand-dim)}

/* ================ Toast ================ */
#toasts{position:fixed;top:74px;right:22px;z-index:9000;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{background:var(--bg2);border:1px solid var(--line2);border-left:3px solid var(--brand);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--t1);box-shadow:0 22px 44px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;animation:toastIn .4s var(--ease) both;word-break:break-all;font-weight:500}
html[data-theme="light"] .toast,body[data-theme="light"] .toast,:root.nx-theme-light .toast,html.nx-theme-light .toast,body.nx-theme-light .toast,[data-theme="light"] .toast,.nx-theme-light .toast{box-shadow:0 16px 36px rgba(15,23,34,.14)}
.toast.ok{border-left-color:var(--up)}
.toast.err{border-left-color:var(--dn)}
.toast .tt{font-weight:800;font-size:12px;margin-bottom:4px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em}
.toast.out{animation:toastOut .34s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px) scale(.98)}}

/* ================ Modal ================ */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(6px) saturate(180%);-webkit-backdrop-filter:blur(6px) saturate(180%);z-index:8000;display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease),-webkit-backdrop-filter var(--dur) var(--ease)}
.mask.open{display:flex;opacity:1}
html[data-theme="light"] .mask,body[data-theme="light"] .mask,:root.nx-theme-light .mask,html.nx-theme-light .mask,body.nx-theme-light .mask,[data-theme="light"] .mask,.nx-theme-light .mask{background:rgba(15,23,34,.58)}
.modal{width:100%;max-width:440px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:24px;color:var(--t1);box-shadow:0 34px 68px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset;transform:translateY(14px) scale(.98);opacity:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mask.open .modal{transform:none;opacity:1}
.modal h3{font-size:16px;margin-bottom:10px;font-weight:800}
.modal p,.modal .modal-body{font-size:13.5px;color:var(--t2);line-height:1.8;font-weight:500}
.modal .modal-body .field{margin:12px 0 0;text-align:left}
.modal .modal-body .field label{text-transform:none;letter-spacing:.04em}
.modal .acts{display:flex;gap:10px;margin-top:22px}
.modal .acts .btn{flex:1}

/* ================ Footer ================ */
.footer{border-top:1px solid var(--line);background:var(--bg);padding:32px 24px;color:var(--t3);font-size:12.5px;line-height:1.8}
.footer .fin{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer b{color:var(--t2);letter-spacing:.14em;font-size:12px}

/* ================ 骨架屏 ================ */
.skel{background:linear-gradient(90deg,color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 25%, var(--bg3) 50%, color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 75%);background-size:200% 100%;animation:skel 1.4s infinite ease-in-out;border-radius:6px}
html[data-theme="light"] .skel,body[data-theme="light"] .skel,:root.nx-theme-light .skel,html.nx-theme-light .skel,body.nx-theme-light .skel,[data-theme="light"] .skel,.nx-theme-light .skel{background:linear-gradient(90deg,#eef1f6 25%,#e2e7ef 50%,#eef1f6 75%);background-size:200% 100%}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ================ 主题切换按钮 ================ */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--line2);color:var(--t2);cursor:pointer;transition:all var(--dur) var(--ease);position:relative}
.theme-toggle::before{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 0 var(--brand-ring);transition:box-shadow var(--dur) var(--ease);pointer-events:none}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-dim)}
.theme-toggle:hover::before{box-shadow:0 0 0 6px var(--brand-ring)}
.theme-toggle svg{width:17px;height:17px;display:block;transition:transform var(--dur-slow) var(--ease)}
.theme-toggle:hover svg{transform:rotate(22deg)}
.theme-toggle .ic-sun{display:block}
.theme-toggle .ic-moon{display:none}
html[data-theme="light"] .theme-toggle .ic-sun,body[data-theme="light"] .theme-toggle .ic-sun,:root.nx-theme-light .theme-toggle .ic-sun,html.nx-theme-light .theme-toggle .ic-sun,body.nx-theme-light .theme-toggle .ic-sun,[data-theme="light"] .theme-toggle .ic-sun,.nx-theme-light .theme-toggle .ic-sun{display:none}
html[data-theme="light"] .theme-toggle .ic-moon,body[data-theme="light"] .theme-toggle .ic-moon,:root.nx-theme-light .theme-toggle .ic-moon,html.nx-theme-light .theme-toggle .ic-moon,body.nx-theme-light .theme-toggle .ic-moon,[data-theme="light"] .theme-toggle .ic-moon,.nx-theme-light .theme-toggle .ic-moon{display:block}
.theme-toggle.wide{width:100%;height:44px;border-radius:var(--r2);gap:10px;justify-content:flex-start;padding:0 14px;font-size:13px;font-weight:800}
.theme-toggle.wide::before{display:none}
.theme-toggle.wide svg{width:17px;height:17px;flex:0 0 auto}
.theme-toggle.wide .ttl{color:var(--t2)}
.theme-toggle.wide .v-dark{display:none}
.theme-toggle.wide .v-light{display:inline}
html[data-theme="light"] .theme-toggle.wide .v-dark,body[data-theme="light"] .theme-toggle.wide .v-dark,:root.nx-theme-light .theme-toggle.wide .v-dark,html.nx-theme-light .theme-toggle.wide .v-dark,body.nx-theme-light .theme-toggle.wide .v-dark,[data-theme="light"] .theme-toggle.wide .v-dark,.nx-theme-light .theme-toggle.wide .v-dark{display:inline}
html[data-theme="light"] .theme-toggle.wide .v-light,body[data-theme="light"] .theme-toggle.wide .v-light,:root.nx-theme-light .theme-toggle.wide .v-light,html.nx-theme-light .theme-toggle.wide .v-light,body.nx-theme-light .theme-toggle.wide .v-light,[data-theme="light"] .theme-toggle.wide .v-light,.nx-theme-light .theme-toggle.wide .v-light{display:none}

/* ================ 汉堡按钮 ================ */
.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:none;border:1px solid var(--line2);color:var(--t2);cursor:pointer;transition:all var(--dur) var(--ease);flex:0 0 auto;position:relative}
.hamburger:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-dim)}
.hamburger svg{width:18px;height:18px;display:block;transition:transform var(--dur) var(--ease)}
.hamburger:hover svg{transform:scale(1.1)}

/* ================ 抽屉（丝滑 520ms 精确分步） ================ */
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(82vw,320px);z-index:9100;background:var(--bg2);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-right:1px solid var(--line2);display:none;flex-direction:column;transform:translateX(-104%);opacity:0;box-shadow:0 0 0 rgba(0,0,0,0);padding-bottom:env(safe-area-inset-bottom,0);will-change:transform,opacity,box-shadow}
.drawer.animating{transition:transform 520ms cubic-bezier(.16,1,.3,1),opacity 420ms cubic-bezier(.16,1,.3,1) 40ms,box-shadow 520ms cubic-bezier(.16,1,.3,1)}
.drawer.open{transform:translateX(0);opacity:1;box-shadow:40px 0 120px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.03) inset}
html[data-theme="light"] .drawer,body[data-theme="light"] .drawer,:root.nx-theme-light .drawer,html.nx-theme-light .drawer,body.nx-theme-light .drawer,[data-theme="light"] .drawer,.nx-theme-light .drawer{background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
html[data-theme="light"] .drawer.open,body[data-theme="light"] .drawer.open,:root.nx-theme-light .drawer.open,html.nx-theme-light .drawer.open,body.nx-theme-light .drawer.open,[data-theme="light"] .drawer.open,.nx-theme-light .drawer.open{box-shadow:30px 0 80px rgba(15,23,34,.22), 0 0 0 1px rgba(42,100,251,.05) inset}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px;border-bottom:1px solid var(--line)}
.drawer-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:.06em;color:var(--t1)}
.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:none;border:1px solid var(--line2);color:var(--t2);cursor:pointer;transition:all var(--dur) var(--ease)}
.drawer-close:hover{color:var(--brand);background:var(--brand-dim);border-color:var(--brand);transform:rotate(90deg)}
.drawer-close svg{width:15px;height:15px;display:block}
.drawer-user{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);animation:drawerSlideUp .44s var(--ease) both .06s}
.drawer-user .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#1e3a8a,#2a64fb 80%,#5b8bff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff}
html[data-theme="light"] .drawer-user .av,body[data-theme="light"] .drawer-user .av,:root.nx-theme-light .drawer-user .av,html.nx-theme-light .drawer-user .av,body.nx-theme-light .drawer-user .av,[data-theme="light"] .drawer-user .av,.nx-theme-light .drawer-user .av{background:linear-gradient(135deg,#dbe6ff,#b7ccff);color:#1e3a8a;box-shadow:inset 0 0 0 1px rgba(42,100,251,.14)}
.drawer-user .nm{font-size:14px;color:var(--t1);font-weight:800}
.drawer-user .uid{font-size:11.5px;color:var(--t3);margin-top:2px;font-weight:600}
.drawer-list{list-style:none;padding:10px 10px 4px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.drawer-list li{margin-bottom:2px}
.drawer-item{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:8px;color:var(--t2);font-size:14px;font-weight:600;position:relative;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.drawer-list li{animation:drawerSlideUp .44s var(--ease) both}
.drawer-list li:nth-child(1){animation-delay:.08s}.drawer-list li:nth-child(2){animation-delay:.11s}.drawer-list li:nth-child(3){animation-delay:.14s}.drawer-list li:nth-child(4){animation-delay:.17s}.drawer-list li:nth-child(5){animation-delay:.20s}.drawer-list li:nth-child(6){animation-delay:.23s}.drawer-list li:nth-child(7){animation-delay:.26s}.drawer-list li:nth-child(8){animation-delay:.29s}.drawer-list li:nth-child(9){animation-delay:.32s}.drawer-list li:nth-child(10){animation-delay:.35s}
@keyframes drawerSlideUp{from{opacity:0;transform:translateY(12px) translateX(-8px)}to{opacity:1;transform:none}}
.drawer-item:hover{background:var(--bg3);color:var(--t1);transform:translateX(3px)}
.drawer-item.on{background:var(--brand-dim);color:var(--brand);font-weight:800;box-shadow:inset 0 0 0 1px rgba(42,100,251,.22)}
.drawer-item .ic{width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg4);color:var(--t2);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.drawer-item:hover .ic{transform:scale(1.08)}
.drawer-item.on .ic{background:var(--brand-dim);color:var(--brand)}
.drawer-item .ic svg{width:16px;height:16px;display:block}
.drawer-item .lb{flex:1 1 auto;white-space:nowrap;text-align:left}
.drawer-item .on-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)}
.drawer-foot{padding:14px 14px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.drawer-logout{margin-top:0}
/* 遮罩：分步 show → animating → open */
.drawer-mask{position:fixed;inset:0;z-index:9050;background:rgba(0,0,0,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);visibility:hidden;opacity:0}
.drawer-mask.show{visibility:visible;display:block}
.drawer-mask.animating{transition:opacity 500ms cubic-bezier(.16,1,.3,1),background-color 500ms cubic-bezier(.16,1,.3,1),backdrop-filter 560ms cubic-bezier(.16,1,.3,1),-webkit-backdrop-filter 560ms cubic-bezier(.16,1,.3,1)}
.drawer-mask.open{opacity:1;background:rgba(0,0,0,.68);backdrop-filter:blur(8px) saturate(170%);-webkit-backdrop-filter:blur(8px) saturate(170%)}
html[data-theme="light"] .drawer-mask.open,body[data-theme="light"] .drawer-mask.open,:root.nx-theme-light .drawer-mask.open,html.nx-theme-light .drawer-mask.open,body.nx-theme-light .drawer-mask.open,[data-theme="light"] .drawer-mask.open,.nx-theme-light .drawer-mask.open{background:rgba(15,23,34,.52)}

/* ============================================================
   UICraft 动效系统 v1
   · 进场动画（fail-open：CSS 原生 keyframes 终止在 visible，脚本失败不黑屏）
   · 交互反馈（按钮按压/hover scale、输入框focus、链接下划线生长）
   · 状态过渡（展开收起、成功失败脉冲、空状态浮动）
   · prefers-reduced-motion（MANDATORY：约35% 40+岁前庭敏感）
   ============================================================ */

/* ---- 1) 无障碍：reduced-motion 必须支持（除进度条/焦点/加载等信息类动画） ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* 保留视觉信息，但去除空间位移 */
  .on-enter, .reveal, .stagger > * { animation-name: dissolve !important; }
  .skel { animation-duration: 0.01ms !important; }
  .tag-dot { animation: none !important; }
}
@keyframes dissolve { from { opacity: 0; } to { opacity: 1; } }

/* ---- 2) 进场动画（FAIL-OPEN 纯CSS，不依赖JS成功） ---- */
/* 基础 lift：淡入 + 上移 16px */
.on-enter { animation: enterLift var(--dur-640) var(--ease-out-quart) both; }
@keyframes enterLift {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* 温和版：仅淡入（适合表格行/列表） */
.on-fade { animation: enterFade var(--dur-520) var(--ease-out-quart) both; }
@keyframes enterFade { from { opacity: 0; } to { opacity: 1; } }
/* 向右滑入（侧边栏项/抽屉） */
.on-slide-x { animation: enterSlideX var(--dur-520) var(--ease-out-quart) both; }
@keyframes enterSlideX {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}
/* 缩放淡入（卡片/弹窗） */
.on-pop { animation: enterPop var(--dur-420) var(--ease-out-quart) both; }
@keyframes enterPop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Hero 级：大幅上移（首页主视觉） */
.on-hero { animation: enterHero var(--dur-800) var(--ease-out-expo) both; }
@keyframes enterHero {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 2.1) Stagger 序列：--i 驱动偏移（10项内建议，之后停止 stagger） ---- */
.stagger { display: contents; }
.stagger > * { animation: enterLift var(--dur-520) var(--ease-out-quart) both;
  animation-delay: calc(var(--i, 0) * var(--stagger, 70ms)); }
/* 限制：第8项后不再延迟，避免总时长过久 */
.stagger > *:nth-child(n+8) { animation-delay: calc(7 * var(--stagger, 70ms)); }

/* ---- 2.2) 导航 choreography：页面加载时逐块登场 ---- */
.nav        { animation: navSlide var(--dur-520) var(--ease-out-quart) both; animation-delay: 20ms; }
.ann-bar    { animation: navSlide var(--dur-520) var(--ease-out-quart) both; animation-delay: 40ms; }
.page-fade, .wrap-page, .mod-page, .home-sec { animation-delay: 120ms !important; }
@keyframes navSlide {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 3) 交互反馈：按钮（物理按压 + 悬浮抬升 + 涟漪容器） ---- */
.btn {
  /* 已有 transition 基础；补充 will-change 只在 hover 期间开启 */
  transform-origin: center;
}
.btn:hover:not([disabled]) {
  transform: translateY(-1px);
}
.btn:active:not([disabled]) {
  transform: translateY(1.5px) scale(.985);
  transition-duration: var(--dur-100) !important;
}
/* 涟漪点容器：::before 用来在 click 时扩散（JS 挂 --rx/--ry） */
.btn::before {
  content: "";
  position: absolute;
  left: var(--rx, 50%);
  top:  var(--ry, 50%);
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width var(--dur-520) var(--ease-out-quart),
              height var(--dur-520) var(--ease-out-quart),
              opacity var(--dur-520) var(--ease-out-quart);
  opacity: 0;
}
.btn.rippling::before {
  width: 240px; height: 240px;
  opacity: 1;
}
.btn-gold:hover:not([disabled]), .btn-up:hover:not([disabled]), .btn-dn:hover:not([disabled]) {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
/* 次要幽灵按钮 hover 微亮 */
.btn-ghost:hover:not([disabled]) { background: var(--bg3); }

/* ---- 3.1) 链接：下划线从左生长（inline 文本链接） ---- */
a.link-underline, .prose a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-200) var(--ease-out-quart), color var(--dur-150) var(--ease-out-quart);
}
a.link-underline:hover, .prose a:hover { background-size: 100% 1px; color: var(--brand); }

/* ---- 3.2) 输入框：错误抖动 / 成功脉冲 ---- */
.field input.shake, .field textarea.shake, .field select.shake {
  animation: shakeX var(--dur-420) var(--ease-out-quart);
  border-color: var(--dn) !important;
  box-shadow: 0 0 0 4px var(--dn-dim) !important;
}
@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(2px); }
}
.field input.ok-pulse, .field textarea.ok-pulse, .field select.ok-pulse {
  animation: okPulse var(--dur-420) var(--ease-out-quart);
}
@keyframes okPulse {
  0%   { box-shadow: 0 0 0 0 var(--brand-ring); }
  100% { box-shadow: 0 0 0 8px rgba(42,100,251,0); }
}
/* check 自定义 checkbox 勾画 */
.custom-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--t2);
  font-weight: 500;
}
.custom-check input { position: absolute; opacity: 0; pointer-events: none; }
.custom-check .chk {
  width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: 5px; border: 1.5px solid var(--line2);
  background: var(--bg4);
  transition: all var(--dur-200) var(--ease-out-quart);
  position: relative;
}
.custom-check .chk::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center center;
  transition: transform var(--dur-300) var(--ease-out-quart);
  opacity: 0;
}
.custom-check input:checked + .chk {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 12px -6px rgba(42,100,251,.8);
}
.custom-check input:checked + .chk::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}

/* ---- 4) 状态过渡：展开/收起（grid-rows 0fr → 1fr，性能优于 height） ---- */
.collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-420) var(--ease-out-quart);
}
.collapse > .collapse-inner { overflow: hidden; min-height: 0; }
.collapse.open { grid-template-rows: 1fr; }
/* 指示器旋转 */
.caret { display: inline-block; transition: transform var(--dur-200) var(--ease-out-quart); }
.caret.open, .collapse.open ~ .caret, [aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ---- 5) 成功/错误/警告 · 彩色脉冲反馈（toast 之外的即时提示） ---- */
.status-pop { animation: statusPop var(--dur-420) var(--ease-out-quart) both; }
@keyframes statusPop {
  0%   { opacity: 0; transform: scale(.92) translateY(4px); }
  60%  { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.glow-pulse { animation: glowPulse 2.4s var(--ease-in-out) infinite; }
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--brand-ring); }
  50%     { box-shadow: 0 0 0 10px rgba(42,100,251,0); }
}

/* ---- 6) Delight 层：空状态微浮动、价格数字位数跳动、卡片 hover 倾斜 ---- */
.float-y { animation: floatY 5s var(--ease-in-out) infinite; }
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
/* 数字切换：从下向上滑动（可选：给 .num-roll 容器） */
.num-roll { display: inline-block; overflow: hidden; vertical-align: bottom; }
.num-roll .digit { display: inline-block; transition: transform var(--dur-300) var(--ease-out-quart); }

/* ---- 7) 骨架屏 shimmer 已存在；补充 skel 失败时的 fallback ---- */
/* (skel keyframes 已在 base.css ~255 行) */

/* ---- 8) Tabs 激活下划线滑动指示：给 .tabs.slide-indicator ---- */
.tabs.slide-indicator { position: relative; }
.tabs.slide-indicator .tab-bar {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--brand);
  transition: transform var(--dur-300) var(--ease-out-quart), width var(--dur-300) var(--ease-out-quart);
  will-change: transform, width;
}

/* ---- 9) Dropdown / Tooltip 出场方向增强 ---- */
.tooltip {
  position: absolute; z-index: 200;
  background: var(--bg2); color: var(--t1);
  border: 1px solid var(--line2); border-radius: 8px;
  padding: 8px 12px; font-size: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--dur-200) var(--ease-out-quart), transform var(--dur-200) var(--ease-out-quart);
  white-space: nowrap;
}
.has-tip:hover .tooltip { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---- 10) 图片/容器占位 渐入 ---- */
.fade-img { opacity: 0; transition: opacity var(--dur-420) var(--ease-out-quart); }
.fade-img.loaded { opacity: 1; }

/* ============================================================
   UICraft 动效系统 v2 · 深度增强
   · 路由/页面切换（fail-open：纯 CSS 关键帧，不依赖 JS）
   · Toast 细粒度类型（图标/进度条/进度关闭）
   · Modal 2.0：弹入/关闭节奏 + 背景遮罩焦点
   · 空状态 empty：微浮动 + 柔和呼吸
   · 通用 copy-flash / save-flash / 按钮 loading（通用 btn 级）
   · 数字动画计数器占位（count-up 容器）
   · Side/Type tabs 下划线滑动指示器（JS 不工作时仍用 border-bottom 兜底）
   · Badge / chip / 链接 tag 的即时反馈
   ============================================================ */

/* ---- 11) 路由切换：点击链接后 body 淡出，下一个页面首帧淡入（入场 on-enter 已存在）
         通过 on-beforeunload 给 body 加 .page-leaving 触发；
         下一页面因 page-enter keyframes 一定会以可见态收尾（FAIL-OPEN）。 */
body.page-leaving {
  opacity: 0 !important;
  transform: translateY(6px);
  transition: opacity 260ms var(--ease-in-quart), transform 260ms var(--ease-in-quart) !important;
}
body > .wrap-page, body > .mod-page, body > .admin-shell, body > .terminal-wrap {
  animation: pageEnter var(--dur-640) var(--ease-out-quart) both;
  animation-delay: 10ms;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* prefers-reduced-motion 下用纯 crossfade */
@media (prefers-reduced-motion: reduce) {
  body > .wrap-page, body > .mod-page, body > .admin-shell, body > .terminal-wrap {
    animation-name: dissolve !important;
    animation-duration: 240ms !important;
  }
}

/* ---- 12) Toast 2.0：顶部进度条 + 图标 + 点击可关 + 出场节奏 ---- */
#toasts { pointer-events: none; }
#toasts .toast { pointer-events: auto; }
.toast {
  --_tint: var(--brand);
  position: relative;
  overflow: hidden;
  padding-right: 40px;
  min-width: 260px;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
}
.toast::before { /* 左侧图标色带 */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--_tint);
  opacity: 0;
}
.toast.ok    { --_tint: var(--up); }
.toast.err   { --_tint: var(--dn); }
.toast .tx { line-height: 1.6; }
.toast-close-x {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 0; background: transparent; color: var(--t3); cursor: pointer;
  transition: background var(--dur-150) var(--ease-out-quart), color var(--dur-150) var(--ease-out-quart), transform var(--dur-100) var(--ease-out-quart);
}
.toast-close-x:hover { background: var(--bg3); color: var(--t1); transform: rotate(90deg); }
.toast-close-x svg { width: 13px; height: 13px; display: block; }
/* Toast 底部倒计时进度条（由 JS 驱动 data-life ms，或自动根据 duration 走） */
.toast .progress {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--_tint); opacity: .75;
  transform-origin: left;
  animation: toastProgress linear forwards;
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ---- 13) Modal 2.0：出场节奏（退场 75% 时长于入场）+ 焦点框 + 内容 scale ---- */
.mask { will-change: opacity, backdrop-filter; }
.mask .modal {
  transform-origin: 50% 40%;
  will-change: transform, opacity;
}
.mask.leave {
  /* 退场：先移除 open 再补 leave，触发 0.24s 加速淡出 */
  opacity: 0 !important;
  transition-duration: 240ms !important;
  transition-timing-function: var(--ease-in-quart) !important;
}
.mask.leave .modal {
  transform: translateY(8px) scale(.985) !important;
  opacity: 0 !important;
  transition-duration: 240ms !important;
  transition-timing-function: var(--ease-in-quart) !important;
}
.modal .acts .btn { transition: transform 80ms var(--ease-out-quart), box-shadow var(--dur-200) var(--ease-out-quart), filter var(--dur-200) var(--ease-out-quart); }
.modal .acts .btn:active { transform: translateY(1.5px) scale(.985); }
/* Modal 标题左侧色条，呼应 toast/状态 */
.modal h3 {
  position: relative;
  padding-left: 12px;
}
.modal h3::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand), transparent 120%);
}

/* ---- 14) 空状态 2.0：浮动物料 + 轻呼吸 + 链接引导色 ---- */
.empty-tip {
  position: relative;
  animation: emptyFloat 6s var(--ease-in-out) infinite;
}
@keyframes emptyFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.empty-tip::before {
  content: "";
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, var(--brand-dim), transparent 70%),
    var(--bg3);
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
}
.empty-tip::after {
  content: "";
  position: absolute;
  left: 50%; top: 22px;
  width: 20px; height: 20px;
  margin-left: -10px;
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2px 12px, 12px 2px;
  opacity: .35;
  color: var(--t3);
  mask:
    linear-gradient(#000,#000);
  -webkit-mask:
    linear-gradient(#000,#000);
}
/* +号作为空状态图标：用两条交叉 border 实现（用 box-shadow 避免 background-image 的 mask 兼容） */
.empty-tip { padding-top: 18px; }
.empty-tip .plus {
  position: absolute;
  left: 50%; top: 32px;
  width: 22px; height: 22px; margin-left: -11px;
  pointer-events: none;
}
.empty-tip .plus::before, .empty-tip .plus::after {
  content: ""; position: absolute; background: var(--t3); opacity: .45; border-radius: 2px;
}
.empty-tip .plus::before { left: 10px; top: 2px; width: 2px; height: 18px; }
.empty-tip .plus::after  { left: 2px;  top: 10px; width: 18px; height: 2px; }

/* ---- 15) 通用 save-flash / copy-flash：任意元素可挂 ---- */
.save-flash { animation: saveFlash var(--dur-520) var(--ease-out-quart); }
@keyframes saveFlash {
  0%   { background: color-mix(in srgb, var(--up) 20%, transparent); box-shadow: 0 0 0 0 var(--up-dim); }
  80%  { box-shadow: 0 0 0 8px rgba(42,100,251,0); }
}
.copy-flash { animation: copyFlashPop var(--dur-520) var(--ease-out-quart); }
@keyframes copyFlashPop {
  0%   { transform: scale(.98); background: var(--brand-dim); }
  40%  { transform: scale(1.01); }
}

/* ---- 16) 通用 btn[loading]：文字淡出 + spinner（在 submit-btn 之外，通用 .btn 也可用） ---- */
.btn[loading] {
  pointer-events: none;
  filter: saturate(.7);
  position: relative;
}
.btn[loading]::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 680ms linear infinite;
  vertical-align: middle;
  margin-right: 8px;
  opacity: .85;
}
.btn[loading].btn-ghost::before,
.btn[loading]:not(.btn-gold):not(.btn-up):not(.btn-dn)::before {
  border-top-color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  border-top-color: var(--brand);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 17) tabs.slide-indicator：下划线指示器（配合 JS 移动 transform/width）
         若 JS 未运行，原有 .tabs button.on 的 border-bottom 仍起作用，FAIL-OPEN。 */
.tabs.slide-indicator button { border-bottom-color: transparent; }
.tabs.slide-indicator { position: relative; }

/* ---- 18) Pills/Badges 的出现动画（统一 new-pop） ---- */
.pill, .st-pill, .tag {
  transition: transform var(--dur-200) var(--ease-out-quart), filter var(--dur-200) var(--ease-out-quart);
}
.pill:hover, .st-pill:hover, .tag:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ---- 19) nav-links：on 态下划线滑入（已有 border-bottom，补缓动曲线） ---- */
.nav-links a { transition-timing-function: var(--ease-out-quart); }

/* ---- 20) 主题切换瞬时切换的内容闪烁保护：
         * 主题切换时将 --dur 临时缩短并在 1 帧后恢复。
         * 这层只过渡颜色/背景，空间属性不动画，已在顶部全局 * {} 排除 transform。 */

/* ---- 21) 复制按钮 copy-btn 组件（后台/资产页） ---- */
button.copy-btn {
  position: relative;
  overflow: hidden;
}
button.copy-btn.copied svg { color: var(--up); }
button.copy-btn .copied-tip {
  position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--up); color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-200) var(--ease-out-quart), transform var(--dur-200) var(--ease-out-quart);
  white-space: nowrap;
}
button.copy-btn.copied .copied-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ============================================================
   UICraft 动效系统 v3 · 深度增强
   · has-js reveal 增强：滚动入场 fail-open（has-js 才进入初始隐藏态）
   · 涟漪点：亮色主题重着色 + 防 overflow:hidden 破坏 padding
   · 骨架屏组件：skel-text / skel-box / skel-avatar / skel-row
   · 链接下划线生长：默认 a 文本链接可选 underline-grow class
   · on-pop stagger：--i 驱动的子卡片弹跳入场
   · Toast 进度条自动播放：animation-duration 取 --life
   · Price 数字 flash：.price-flash-up / .price-flash-dn 文本色瞬时
   · btn focus ring：统一 focus-visible 抬升
   · Mod-hd / panel-hd 入场：标题左条生长 + 副标题淡入
   ============================================================ */

/* ---- v3-1) has-js reveal 增强：只有 has-js 存在时才设置初始隐藏（Option-B FAIL-OPEN）
         不影响纯 CSS on-enter，因为 on-enter 用的是 @keyframes both 已经把最终态锁在 visible。
         这里是给 .reveal 类做 IntersectionObserver 渐进增强的钩子。 */
.has-js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-520) var(--ease-out-quart), transform var(--dur-520) var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * var(--stagger, 60ms));
}
.has-js .reveal.shown {
  opacity: 1;
  transform: none;
}
.has-js .reveal.on-fade { transform: none; }
/* Stagger 容器里 reveal 子项的 --i 自动延到第 8 项 */
.has-js .reveal:nth-child(n+8) { transition-delay: calc(7 * var(--stagger, 60ms)); }
/* prefers-reduced-motion 下 has-js reveal 不做位移只淡入 120ms，且不延迟 */
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- v3-2) 涟漪点细节：亮色主题 / 暗色下渐变 / 防止按钮 overflow:hidden 影响文本裁剪 ---- */
.btn { overflow: hidden; }
.btn::before {
  /* 暗色下默认用白色径向渐变；亮色主题改为蓝色径向（更贴近白底感知） */
  background: radial-gradient(circle,
    rgba(255,255,255,.32) 0%,
    rgba(255,255,255,0) 70%);
}
html[data-theme="light"] .btn::before,
body[data-theme="light"] .btn::before,
:root.nx-theme-light .btn::before,
html.nx-theme-light .btn::before,
body.nx-theme-light .btn::before,
[data-theme="light"] .btn::before,
.nx-theme-light .btn::before {
  background: radial-gradient(circle,
    rgba(42,100,251,.18) 0%,
    rgba(42,100,251,0) 70%);
}
/* 主色按钮：涟漪更明显 */
.btn-gold::before, .btn-up::before, .btn-dn::before,
.submit-btn::before {
  background: radial-gradient(circle,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,0) 70%);
}

/* ---- v3-3) 骨架屏组件：skel-text / skel-box / skel-avatar / skel-row ---- */
.skel-text {
  height: 12px;
  background: linear-gradient(90deg,color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 25%, var(--bg3) 50%, color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s infinite ease-in-out;
  border-radius: 4px;
  width: 100%;
  display: block;
}
.skel-text.short { width: 40%; }
.skel-text.mid   { width: 65%; }
.skel-text.long  { width: 92%; }
.skel-box {
  aspect-ratio: 16/9;
  background: linear-gradient(90deg,color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 25%, var(--bg3) 50%, color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s infinite ease-in-out;
  border-radius: var(--r2);
}
.skel-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(90deg,color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 25%, var(--bg3) 50%, color-mix(in srgb, var(--bg2) 86%, var(--bg3)) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s infinite ease-in-out;
  flex: 0 0 auto;
}
.skel-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.skel-row .skel-avatar { flex: 0 0 auto; }
.skel-row .skel-cols { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
/* light 主题下 skel 统一用亮色渐变 */
html[data-theme="light"] .skel-text,
body[data-theme="light"] .skel-text,
:root.nx-theme-light .skel-text, html.nx-theme-light .skel-text,
body.nx-theme-light .skel-text,
[data-theme="light"] .skel-text, .nx-theme-light .skel-text,
html[data-theme="light"] .skel-box,
body[data-theme="light"] .skel-box,
:root.nx-theme-light .skel-box, html.nx-theme-light .skel-box,
body.nx-theme-light .skel-box,
[data-theme="light"] .skel-box, .nx-theme-light .skel-box,
html[data-theme="light"] .skel-avatar,
body[data-theme="light"] .skel-avatar,
:root.nx-theme-light .skel-avatar, html.nx-theme-light .skel-avatar,
body.nx-theme-light .skel-avatar,
[data-theme="light"] .skel-avatar, .nx-theme-light .skel-avatar {
  background: linear-gradient(90deg,#eef1f6 25%,#e2e7ef 50%,#eef1f6 75%);
  background-size: 200% 100%;
}

/* ---- v3-4) 可选链接下划线生长：.underline-grow（普通 a 链接也可手动挂）
         默认 nav-links a 已用 color 过渡；这里补 underline 从 0 到 100%。 */
.underline-grow {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size var(--dur-200) var(--ease-out-quart),
              color var(--dur-150) var(--ease-out-quart);
}
.underline-grow:hover { background-size: 100% 1px; color: var(--brand); }

/* ---- v3-5) on-pop stagger：卡片堆叠弹出（.card-grid.stagger > .card 也可直接挂） ---- */
.on-pop.stagger, .stagger.pop > * {
  animation: enterPop var(--dur-420) var(--ease-out-quart) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.on-pop.stagger > *:nth-child(n+8), .stagger.pop > *:nth-child(n+8) { animation-delay: calc(7 * 70ms); }

/* ---- v3-6) Toast 进场/退场更丝滑（入场带 slide-in 微位移 + 进度条 --life） ---- */
#toasts .toast {
  animation: toastInV2 var(--dur-420) var(--ease-out-quart) both;
}
#toasts .toast.out {
  animation: toastOutV2 var(--dur-200) var(--ease-in-quart) forwards !important;
}
@keyframes toastInV2 {
  from { opacity: 0; transform: translateX(22px); }
  60%  { transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOutV2 {
  to { opacity: 0; transform: translateX(30px); height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
/* Toast 进度条 --life：data-life 为毫秒时设置 */
.toast[data-life] .progress {
  animation-duration: attr(data-life ms, 2600ms);
}

/* ---- v3-7) 价格数字 flash：.num 字段挂 .flash-up / flash-dn 时颜色瞬变 + 文字阴影 ---- */
.num.flash-up { animation: numFlashUp .6s var(--ease-out-quart); }
.num.flash-dn { animation: numFlashDn .6s var(--ease-out-quart); }
@keyframes numFlashUp {
  0%   { color: var(--up); text-shadow: 0 0 12px var(--up-dim); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes numFlashDn {
  0%   { color: var(--dn); text-shadow: 0 0 12px var(--dn-dim); }
  100% { color: inherit; text-shadow: none; }
}

/* ---- v3-8) 按钮 focus ring：键盘操作可见（统一为焦点环 + 微抬升） ---- */
.btn:focus-visible:not([disabled]) {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring), 0 8px 24px -10px var(--brand);
  transform: translateY(-1px);
}

/* ---- v3-9) Mod-hd / panel-hd 入场：标题左条生长 + 副标题淡入 stagger ---- */
.mod-hd, .panel-hd, .home-sec > .in > .hd {
  position: relative;
  padding-left: 14px;
}
.mod-hd::before, .panel-hd::before, .home-sec > .in > .hd::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand), transparent 120%);
  transform-origin: top;
  animation: lineGrow var(--dur-520) var(--ease-out-quart) both;
  animation-delay: 60ms;
}
.home-sec > .in > .hd-sub {
  animation: enterFade var(--dur-520) var(--ease-out-quart) both;
  animation-delay: 140ms;
}
@keyframes lineGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ---- v3-10) Modal 入场（配合 .mask.open 的已有 display:flex，加 1 帧 reflow 激活）
         内容区：先 .96 再 1.01 再 1，精致弹性（非 bounce/elastic，仅 1% 过冲）。 */
.mask.open .modal {
  animation: modalIn var(--dur-420) var(--ease-out-quart) both;
}
@keyframes modalIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); }
  68%  { transform: translateY(-1px) scale(1.008); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   UICraft · A11y：全站 prefers-reduced-motion 统一降级
   (core.js 会在 :root 注入 .nx-reduced-motion，匹配系统设置)
   ============================================================ */
:root.nx-reduced-motion,
:root.nx-reduced-motion *,
html.nx-reduced-motion,
html.nx-reduced-motion *,
body.nx-reduced-motion *,
.nx-reduced-motion * {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
:root.nx-reduced-motion .skel-text,
:root.nx-reduced-motion .skel-box,
:root.nx-reduced-motion .skel-avatar,
html.nx-reduced-motion .skel-text,
html.nx-reduced-motion .skel-box,
html.nx-reduced-motion .skel-avatar {
  animation: none !important;
}
:root.nx-reduced-motion .hero-bg-blur,
:root.nx-reduced-motion .hero-tape,
html.nx-reduced-motion .hero-bg-blur,
html.nx-reduced-motion .hero-tape {
  animation: none !important;
}

/* ============================================================
   套餐A · jzlx.lol 组件样式（按钮变体/Tab/网格/空状态/Hero）
   ============================================================ */

/* ---------- 1. 按钮新变体 ---------- */
.btn-pill{border-radius:var(--r-pill)}
/* 首页大 CTA：蓝→绿渐变实底 */
.btn-cta{height:54px;padding:0 28px;border:0;border-radius:var(--r-pill);background:var(--cta-gradient);color:#ffffff;font-size:16px;font-weight:800;letter-spacing:.03em;box-shadow:0 16px 40px -18px rgba(34,211,238,.78), 0 16px 40px -18px rgba(16,185,129,.68);transition:filter var(--dur-200) var(--ease), transform 80ms var(--ease), box-shadow var(--dur-200) var(--ease)}
.btn-cta:hover{filter:brightness(1.05);box-shadow:0 22px 54px -18px rgba(34,211,238,.88), 0 22px 54px -18px rgba(16,185,129,.78)}
.btn-cta:active{transform:translateY(1px)}
/* 空心描边渐变（币币交易按钮）：渐变 border 用伪元素模拟 */
.btn-outline-grad{position:relative;height:54px;padding:0 28px;border-radius:var(--r-pill);background:var(--bg2);color:var(--brand);font-size:16px;font-weight:800;letter-spacing:.03em;border:1px solid transparent;background-clip:padding-box;transition:background var(--dur-200) var(--ease),transform 80ms var(--ease)}
.btn-outline-grad::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--cta-gradient);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1;pointer-events:none}
.btn-outline-grad:hover{background:var(--cta-gradient-dim);color:var(--t1)}
.btn-outline-grad:active{transform:translateY(1px)}
/* 交易页：做多/提交（薄荷绿） */
.btn-long{background:var(--long);border-color:var(--long);color:#ffffff;box-shadow:0 10px 28px -14px rgba(16,185,129,.88)}
.btn-long:hover{background:var(--long2);border-color:var(--long2);color:#ffffff;filter:brightness(1.05)}
/* 交易页：做空（红） */
.btn-short{background:var(--short);border-color:var(--short);color:#ffffff;box-shadow:0 10px 28px -14px rgba(239,68,68,.82)}
.btn-short:hover{background:var(--short2);border-color:var(--short2);color:#ffffff;filter:brightness(1.05)}
/* 输入框统一：12px 中等圆角，描边 1px，占位符颜色 */
input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],select,textarea{border-radius:var(--r-md);border:1px solid var(--line2);background:var(--bg2);color:var(--t1);padding:10px 14px;font-size:13.5px;outline:none;transition:border-color var(--dur-150) var(--ease),box-shadow var(--dur-150) var(--ease),background var(--dur-150) var(--ease);width:100%;display:block;appearance:none;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-dim)}
input::placeholder,textarea::placeholder{color:var(--t3)}

/* ---------- 2. Tab 斜切梯形（买入/卖出 Tab）---------- */
.tabs-clip{display:flex;gap:2px}
.tabs-clip button{flex:1 1 0;height:50px;font-size:15px;font-weight:700;border:0;background:var(--bg3);color:var(--t3);cursor:pointer;transition:all var(--dur-200) var(--ease);clip-path:polygon(0 0,100% 0,92% 100%,0 100%);position:relative;overflow:hidden}
.tabs-clip button + button{clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.tabs-clip button.on.long{background:var(--long);color:#ffffff;box-shadow:0 10px 28px -14px rgba(16,185,129,.7)}
.tabs-clip button.on.short{background:var(--short);color:#ffffff;box-shadow:0 10px 28px -14px rgba(239,68,68,.7)}
.tabs-clip button:active{transform:translateY(1px)}
/* 非 clip 版水平下划 Tab（持仓/资产等）：用 underline-grow 类即可 */

/* ---------- 3. 功能入口网格 feat-icons-grid（首页 Hero 下 5 个） ---------- */
.feat-icons-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:10px 6px}
.feat-icons-grid .fi{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-200) var(--ease),transform var(--dur-200) var(--ease)}
.feat-icons-grid .fi:hover{background:var(--bg3)}
.feat-icons-grid .fi:active{transform:translateY(1px)}
.feat-icons-grid .fi svg, .feat-icons-grid .fi .ic{width:40px;height:40px;stroke:var(--t1);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;color:var(--t1)}
.feat-icons-grid .fi .lbl{font-size:12px;color:var(--t1);font-weight:600;text-align:center;white-space:nowrap}

/* ---------- 4. 抽屉分组网格 mnu-group（登录后侧边栏） ---------- */
.drawer-mnu{padding:0 16px 18px}
.mnu-group{margin-top:22px}
.mnu-group .ttl{font-size:14.5px;font-weight:800;color:var(--t1);margin:0 0 14px 4px;letter-spacing:.02em}
.mnu-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px 6px}
.mnu-grid.col-3{grid-template-columns:repeat(3, 1fr)}
.mnu-grid.col-2{grid-template-columns:repeat(2, 1fr)}
.mnu-grid .mi{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px;cursor:pointer;border-radius:var(--r-md);transition:background var(--dur-150) var(--ease),transform var(--dur-150) var(--ease)}
.mnu-grid .mi:hover{background:var(--bg3)}
.mnu-grid .mi:active{transform:translateY(1px)}
.mnu-grid .mi svg, .mnu-grid .mi .ic{width:36px;height:36px;stroke:var(--t1);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;color:var(--t1)}
.mnu-grid .mi .lbl{font-size:12px;color:var(--t1);font-weight:600;text-align:center}

/* ---------- 5. 抽屉顶部：用户头像/ID 区 ---------- */
.drawer-user{display:flex;align-items:center;gap:12px;padding:20px 18px 10px;border-bottom:1px solid var(--line);cursor:pointer;transition:background var(--dur-150) var(--ease)}
.drawer-user:hover{background:var(--bg3)}
.drawer-user .av{width:52px;height:52px;border-radius:50%;background:conic-gradient(from 210deg,#22d3ee,#34d399,#f472b6,#22d3ee);padding:2px;box-shadow:0 0 0 3px var(--brand-dim)}
.drawer-user .av .inner{width:100%;height:100%;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--t1);background-image:var(--cta-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.drawer-user .meta{flex:1;min-width:0}
.drawer-user .nm{font-size:16px;font-weight:800;color:var(--t1);line-height:1.25}
.drawer-user .id{font-size:12px;color:var(--t3);font-weight:600;margin-top:3px}
.drawer-user .chev{width:20px;height:20px;color:var(--t3);flex:0 0 auto}

/* ---------- 6. 抽屉底部：logo 胶囊品牌条 ---------- */
.drawer-brand{padding:28px 18px 22px;display:flex;align-items:center;justify-content:center;gap:10px}
.drawer-brand .logo-mark{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t1)}
.drawer-brand .logo-mark svg{width:100%;height:100%;display:block}
.drawer-brand .site-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-pill);background:rgba(150,158,175,.12);color:var(--t1);font-size:13px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(8px)}
.drawer-brand .site-pill svg{width:14px;height:14px;color:var(--t3)}

/* ---------- 7. 空状态插画 empty-box（打印机/暂无数据） ---------- */
.empty-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;text-align:center;gap:14px;color:var(--t3)}
.empty-box .illus{width:120px;height:110px;display:block;opacity:.95}
.empty-box .illus path, .empty-box .illus rect, .empty-box .illus circle, .empty-box .illus line{stroke:var(--t3)}
.empty-box .illus path.fg-fill, .empty-box .illus .fg{fill:var(--brand-dim)}
.empty-box .txt{font-size:13px;color:var(--t3);font-weight:600}

/* ---------- 8. 首页 Hero 大字排版 ---------- */
.hero-big{padding:10px 0 6px;text-align:center}
.hero-big .hero-illus{width:min(72vw,360px);height:min(72vw,360px);margin:0 auto;display:block;max-height:380px}
.hero-big h1{margin:10px auto 0;font-size:28px;line-height:1.25;font-weight:900;letter-spacing:.04em;color:var(--t1)}
.hero-big h2{margin:8px auto 0;font-size:15px;color:var(--t3);font-weight:500;letter-spacing:.04em}
.hero-big .cta-row{margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:420px}

/* ============================================================
   END · UICraft 动效系统 v3
   ============================================================ */

/* ================ 响应式：≤960px 抽屉启用 ================ */
@media (max-width:960px){
  .hamburger{display:inline-flex}
  .nav-links{display:none!important}
  .drawer{display:flex}
  .nav{gap:8px;padding:0 12px}
  .nav-search-wrap{flex:1 1 auto;min-width:0;max-width:none}
  .nav-search-drop{position:fixed;left:8px;right:8px;top:58px;width:auto;max-height:min(70vh,420px);z-index:260}
  .nav-search-item{grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:10px 8px}
  .nav-right a[href="agent.php"],
  .nav-right .nav-icon-btn.dot{display:none!important}
}

/* ================ 响应式：≤480px 竖屏真机 ================ */
@media (max-width:480px){
  body{font-size:12.5px}
  /* 若存在底部 Tab Bar，body 底部留白，防止内容被挡 */
  body.has-m-tabbar{padding-bottom:78px}
  /* trade 终端的底 Tab（持仓/委托）需内嵌，避免和全局 Tab Bar 冲突
     trade.php <body> 有 .page-trade 标记，此 class 下额外抬高原有 bottom 面板 */
  body.page-trade.has-m-tabbar .bottom{margin-bottom:8px}
  /* === 顶部导航（套餐A手机版） === */
  .nav{height:56px;padding:0 12px;gap:8px}
  /* 左：九宫格汉堡按钮（3x3 圆点） */
  .hamburger{width:38px;height:38px;border-radius:50%}
  .hamburger .dots{width:18px;height:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
  .hamburger .dots i{display:block;width:4px;height:4px;border-radius:50%;background:var(--t1)}
  /* 中：搜索胶囊（占据剩余宽度） */
  .nav-search-wrap{flex:1 1 auto;min-width:0;max-width:none}
  .nav-search{display:flex;height:40px}
  .nav-search input{font-size:14px}
  .nav-search-drop{top:54px;left:8px;right:8px}
  .nav-search-item{grid-template-columns:24px minmax(0,1fr) auto;gap:8px}
  .nav-search-item img,.nav-search-fb{width:24px;height:24px}
  .nav-search-item .n b{font-size:13px}
  .nav-search-item .p{font-size:12px}
  /* 右侧只留铃铛和主题，邀请/假聊天放到抽屉，避免搜索被挤没 */
  .nav-right a[href="agent.php"],
  .nav-right .nav-icon-btn.dot{display:none!important}
  /* 右：3 图标（扫码/聊天/主题） */
  .nav-right{gap:4px;flex:0 0 auto}
  .nav-icon-btn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--t1);background:transparent;cursor:pointer;border:0;transition:background var(--dur-150) var(--ease)}
  .nav-icon-btn:hover{background:var(--bg3)}
  .nav-icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
  .nav-icon-btn.dot:after{content:"";position:absolute;top:9px;right:11px;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--bg2)}
  /* 导航原元素（logo/登录按钮）在手机端隐藏（由九宫格+底部Tab接管导航） */
  .nav .logo{display:none}
  .nav-login .btn-sm{display:none}
  .theme-toggle{width:36px;height:36px;border-radius:50%}
  .theme-toggle.wide{display:none}
  .nav-links{display:none!important}
  .nav-user{display:none}
  /* 通用 */
  .btn-sm{height:32px;padding:0 10px;font-size:11.5px}
  .wrap-page{padding:16px 14px;max-width:100%}
  .panel{max-width:100%}
  .panel-bd{padding:14px}
  .tbl th,.tbl td{padding:9px 11px;font-size:11.5px}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .btn{height:42px;padding:0 14px;font-size:13px;border-radius:var(--r-md);white-space:nowrap}
  .modal{padding:18px 16px;border-radius:16px;max-width:calc(100vw - 28px)}
  .modal .acts{gap:8px}
  #toasts{top:66px;right:10px;left:10px;max-width:none}
  /* 抽屉：宽度 86vw，新分组布局（替代旧 .drawer-list） */
  .drawer{width:86vw;padding:0;border-radius:0 22px 22px 0}
  .drawer-list{display:none}  /* 旧竖排列表在套餐A网格下隐藏 */
  .drawer-scroll{padding:0;overflow-y:auto;flex:1}
  .drawer-close.top-right{width:34px;height:34px;right:10px;top:10px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);color:var(--t1)}
  .drawer-close.top-right svg{width:16px;height:16px}
  .drawer-foot{display:none}  /* 旧 drawer-foot 在套餐A下用 drawer-brand */
  .frow{flex-direction:column;gap:0}
  .feat-grid,.funds-grid,.flow{max-width:100%;overflow-x:hidden}

  /* === 底部 Tab Bar（套餐A手机版全局导航） === */
  .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:98;height:62px;background:var(--bg2);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;padding:0 0 8px;backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
  .m-tabbar .it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--t3);cursor:pointer;transition:color var(--dur-150) var(--ease);position:relative;padding-top:6px;border:0;background:transparent}
  .m-tabbar .it svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
  .m-tabbar .it .lb{font-size:10.5px;font-weight:700;letter-spacing:.01em}
  .m-tabbar .it.on{color:var(--brand)}
  .m-tabbar .it.on:after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:14px;height:2px;border-radius:2px;background:var(--brand);box-shadow:0 0 8px var(--brand-dim)}
  /* 中间 FAB 悬浮大圆交易按钮 */
  .m-tabbar .it.fab{position:relative;overflow:visible}
  .m-tabbar .it.fab button{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;border:0;background:#ffffff;color:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -10px rgba(34,211,238,.78), 0 0 0 4px var(--bg2);cursor:pointer;transition:transform 80ms var(--ease),box-shadow var(--dur-200) var(--ease)}
  .m-tabbar .it.fab button:hover{box-shadow:0 16px 40px -10px rgba(34,211,238,.92), 0 0 0 4px var(--bg2)}
  .m-tabbar .it.fab button:active{transform:translateX(-50%) translateY(1px)}
  .m-tabbar .it.fab button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .m-tabbar .it.fab .lb{margin-top:34px;font-size:10.5px}

  /* 首页 Hero：5 功能入口网格适配（默认就是 repeat(5,1fr) 够用） */
  .hero-big{padding:6px 0 2px}
  .hero-big h1{font-size:24px}
  .hero-big h2{font-size:14px}
  .hero-big .cta-row{gap:12px}
  .feat-icons-grid{gap:12px 4px;margin-top:4px}
  .feat-icons-grid .fi svg, .feat-icons-grid .fi .ic{width:34px;height:34px}
  .feat-icons-grid .fi .lbl{font-size:11px}
}

/* 电脑端字体锐化：半像素字号 + grayscale 抗锯齿 + 入场 transform 残留都会发糊 */
@media (hover: hover) and (pointer: fine) {
  html, body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
  }
  body { font-size: 14px; line-height: 1.6; letter-spacing: 0; }
  .auth, .on-enter, .on-pop, .on-hero, .on-fade, .page-fade,
  .nav, .ann-bar, .stagger > *,
  .tickerbar .tk, .wrap-page, .mod-page, .home-sec,
  .op-hd, .op-balance, .side-tabs, .type-tabs, .lev-row,
  .oi, .pct-slider, .tp-sl, .est-box, .submit-btn-wrap,
  .hero .badge, .hero p.lead, .hero .cta,
  .home-sec h2, .home-sec > p,
  .auth-side .lg, .auth-side h2, .auth-side p,
  .auth-form h3, .auth-form .subti, .auth-form .field, .auth-form .acts,
  [id^="pane-"] {
    animation: none !important;
  }
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav .logo .logo-txt {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--t1) !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}