/* ============================================================
   闪电云用户后台 SPA 样式 —— 浅色·蓝色科技风(基于 ui-kit 设计令牌)
   依赖:design-tokens.css(需在本文件之前引入)
   布局:固定侧边栏 + 顶栏 + 内容区;hash 路由单页
   说明:保留全部既有类名与 JS 钩子(#authView/.app/.active、
        .nav-item[data-view]、.tab/.active、.stat-card、.plan、
        .toast/.show、.modal-mask/.show 等)
   ============================================================ */

:root{
  /* 旧变量名向新设计令牌的映射(供 JS 内联样式与既有引用复用) */
  --grad:var(--grad-text);
  --grad-soft:linear-gradient(135deg,rgba(93,135,255,.08),rgba(14,165,233,.08));
  --green:var(--success);
  --red:var(--danger);
  --amber:var(--warning);
  --cyan:var(--accent);
  --indigo:var(--primary);
  --panel:#ffffff;
  --glow:var(--shadow-hover);
  --border-strong:#cbd5e1;
  --radius:14px;
  --radius-sm:10px;
  --mono:var(--font-mono);
  --font:var(--font-sans);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;outline:none}
::selection{background:var(--primary-light)}

/* ==================== 登录 / 注册 / 找回(左右分栏) ==================== */
/* 页面容器:浅色科技背景,居中承载分栏卡片 */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:34px 28px;position:relative;overflow:hidden;background:var(--grad-hero)}
.auth-page::before{content:"";position:absolute;inset:0;background:
  radial-gradient(680px 360px at 12% 4%,rgba(59,130,246,.16),transparent 65%),
  radial-gradient(760px 420px at 90% 18%,rgba(14,165,233,.14),transparent 66%);pointer-events:none}
.auth-page::after{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(93,135,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(93,135,255,.05) 1px,transparent 1px);
  background-size:50px 50px;-webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 38%,#000 12%,transparent 80%);mask-image:radial-gradient(ellipse 72% 62% at 50% 38%,#000 12%,transparent 80%);pointer-events:none}

/* 分栏卡片:左品牌 + 右表单,圆角阴影 */
.auth-card{position:relative;z-index:2;width:100%;max-width:960px;min-height:600px;display:grid;grid-template-columns:0.8fr 1.2fr;background:var(--card);border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-hover);animation:authCardIn .6s cubic-bezier(.4,0,.2,1) both}
@keyframes authCardIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}

/* ---------- 左侧品牌区 ---------- */
.auth-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:34px 30px;color:#fff;background:linear-gradient(155deg,#1d4ed8 0%,#2563eb 46%,#0ea5e9 100%)}
/* 动态背景:两团漂移光斑 + 细网格,全部装饰不响应交互 */
.auth-aside-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.aa-blob{position:absolute;border-radius:50%;filter:blur(12px);will-change:transform,opacity}
.aa-b1{width:300px;height:300px;left:-90px;top:-70px;background:radial-gradient(circle,rgba(147,197,253,.55),transparent 70%);animation:aaFloat1 17s ease-in-out infinite}
.aa-b2{width:320px;height:320px;right:-120px;bottom:-90px;background:radial-gradient(circle,rgba(103,232,249,.5),transparent 70%);animation:aaFloat2 21s ease-in-out infinite}
@keyframes aaFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,38px)}}
@keyframes aaFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-42px,-30px)}}
.aa-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(ellipse 80% 78% at 50% 30%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 80% 78% at 50% 30%,#000 10%,transparent 78%)}

/* 顶部品牌行 */
.auth-aside-top{position:relative;z-index:2;display:flex;align-items:center;gap:11px}
.aa-logo{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.aa-logo img{width:26px;height:26px;object-fit:contain}
.aa-name{font-size:18px;font-weight:800;letter-spacing:.5px}

/* 中部轨道动效:双环旋转 + 核心脉冲 + 节点环绕(尺寸按收窄后的左栏缩放) */
.auth-orbit{position:relative;z-index:2;flex:1;min-height:190px;margin:10px 0}
.ao-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);transform:translate(-50%,-50%)}
.ao-r1{width:168px;height:168px;border-style:dashed;animation:aoSpin 26s linear infinite}
.ao-r2{width:110px;height:110px;border-color:rgba(255,255,255,.5);animation:aoSpinRev 18s linear infinite}
@keyframes aoSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes aoSpinRev{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.ao-core{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 38% 32%,#bfdbfe,#60a5fa 62%,#3b82f6);box-shadow:0 0 30px rgba(147,197,253,.7);animation:aoPulse 3.2s ease-in-out infinite}
@keyframes aoPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}
.ao-node{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:6px;background:#fff;box-shadow:0 4px 12px rgba(30,64,175,.4)}
/* 以各环半径为环绕半径,随环匀速旋转 */
.n1{--r:84px;animation:nodeOrbit 26s linear infinite}
.n2{--r:55px;animation:nodeOrbit 18s linear infinite reverse}
.n3{--r:84px;animation:nodeOrbit 26s linear infinite;animation-delay:-13s}
@keyframes nodeOrbit{from{transform:rotate(0deg) translateX(var(--r)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--r)) rotate(-360deg)}}

/* 文案区 */
.auth-aside-copy{position:relative;z-index:2}
.auth-aside-copy h2{font-size:20px;line-height:1.5;font-weight:800;margin-bottom:9px}
.auth-aside-copy p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.82)}

/* 特性条 */
.auth-aside-feats{position:relative;z-index:2;display:flex;gap:10px;margin-top:20px}
.aaf-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:13px;font-size:12.5px;font-weight:600;backdrop-filter:blur(8px);transition:transform .25s,background .25s}
.aaf-item:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}
.aaf-ico{font-size:19px;line-height:1}

/* ---------- 右侧表单区 ---------- */
.auth-panel{position:relative;display:flex;flex-direction:column;padding:44px 40px 26px;background:var(--card)}
.auth-panel-inner{width:100%;max-width:340px;margin:auto}
/* 返回首页:左上角轻量按钮 */
.auth-back{position:absolute;top:22px;left:24px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--text-2);background:var(--bg-soft);transition:all .2s}
.auth-back:hover{color:var(--primary);background:var(--primary-light)}

.auth-panel .tabs{margin-bottom:16px}
.auth-panel h1{font-size:26px;margin-bottom:6px;color:var(--text);animation:authFadeUp .5s .05s ease both}
.auth-panel .sub{font-size:13.5px;color:var(--text-3);margin-bottom:22px;animation:authFadeUp .5s .12s ease both}
.auth-panel form{animation:authFadeUp .5s .18s ease both}
.auth-panel .auth-foot{animation:authFadeUp .5s .26s ease both}
@keyframes authFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 版权条:表单区底部 */
.auth-panel-copy{text-align:center;font-size:11.5px;line-height:1.8;color:var(--text-3)}
.auth-panel-copy a{color:inherit}

/* ---------- 响应式:窄屏隐藏左侧品牌区,仅保留居中表单 ---------- */
@media(max-width:860px){
  .auth-page{padding:20px 16px}
  .auth-card{grid-template-columns:1fr;max-width:440px;min-height:0}
  .auth-aside{display:none}
  .auth-panel{padding:40px 30px 24px}
}
@media(max-width:480px){
  .auth-page{padding:0}
  .auth-card{border:none;border-radius:0;box-shadow:none}
  .auth-panel{min-height:100vh;justify-content:center}
}

/* 侧边栏小徽标:圆形图标填满容器 */
.mark img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
/* ---------- 认证表单控件(登录/注册/找回共用) ---------- */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:18px}
.tab{padding:10px 2px;margin-right:26px;font-size:15px;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;transition:all .2s}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.field{margin-bottom:12px}
/* 字段标签:视觉隐藏(隐藏式提示由占位符承载),但保留给屏幕阅读器,保障无障碍 */
.field label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.field input,.field select{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--border);border-radius:11px;background:var(--card);color:var(--text);transition:border .2s,box-shadow .2s;box-sizing:border-box}
.field input:hover:not(:disabled),.field select:hover:not(:disabled){border-color:var(--border-strong)}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.field input::placeholder{color:var(--text-3)}
.field .row{display:flex;gap:10px}
.field .row input{flex:1}
.btn-code{white-space:nowrap;padding:0 16px;background:var(--primary-light);border:1px solid rgba(93,135,255,.3);color:var(--primary-dark);border-radius:11px;font-size:13px;font-weight:600;transition:all .2s}
.btn-code:hover{background:rgba(93,135,255,.16)}
.btn-code:disabled{opacity:.5;cursor:not-allowed}
/* 协议区:纵向排列,上方为换行链接分组,下方为整行勾选 */
.agree{display:flex;flex-direction:column;align-items:stretch;margin:14px 0 4px}
.agree-links{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:11px}
.agree-links a{font-size:12.5px;font-weight:500;line-height:1.8;color:var(--text-2)}
.agree-links a:hover{color:var(--primary)}
/* 协议勾选:自定义复选框(原生 input 仅视觉隐藏,保留键盘焦点与状态) */
.agree-check{position:relative;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer}
.agree-check input{position:absolute;opacity:0;width:0;height:0}
.agree-check-box{flex:none;width:18px;height:18px;border:1px solid var(--border-strong);border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.agree-check-box svg{opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s}
.agree-check input:checked + .agree-check-box{background:var(--primary);border-color:var(--primary)}
.agree-check input:checked + .agree-check-box svg{opacity:1;transform:scale(1)}
.agree-check input:focus-visible + .agree-check-box{box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.btn-primary{width:100%;padding:13px;background:var(--grad-primary);color:#fff;border-radius:12px;font-size:15px;font-weight:700;box-shadow:var(--shadow-3d);transition:all .25s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow-blue-strong)}
/* 认证页提交按钮:统一 48px 与输入框等高;提交中追加旋转等待图标 */
.auth-panel .btn-primary{height:48px;padding:0;border-radius:11px}
.auth-panel .btn-primary.is-loading{pointer-events:none;opacity:.9}
.auth-panel .btn-primary.is-loading::before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:authSpin .7s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}
/* 密码强度条:三段细条,弱红/中黄/强绿,仅在输入密码时显示 */
.strength{display:flex;gap:6px;margin-top:9px}
.strength i{flex:1;height:4px;border-radius:2px;background:#e2e8f0;transition:background .2s}
.strength.weak i:nth-child(1){background:#e5484d}
.strength.mid i:nth-child(-n+2){background:#f5a623}
.strength.strong i{background:#27ae60}
.auth-foot{text-align:center;margin-top:17px;font-size:13px;color:var(--text-2)}
.auth-foot a{color:var(--primary);font-weight:600;cursor:pointer}
.auth-links{font-size:13px;text-align:right;margin:-2px 0 10px}
.auth-links a{color:var(--primary);font-weight:600;cursor:pointer}


/* ==================== 应用主框架 ==================== */
.app{display:none;min-height:100vh}
.app.active{display:flex}
.sidebar{width:228px;background:var(--sidebar-bg);border-right:1px solid rgba(148,163,184,.12);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50}
.sidebar .brand{padding:21px 22px;display:flex;align-items:center;gap:11px;font-weight:800;font-size:16.5px;color:#fff;border-bottom:1px solid rgba(148,163,184,.12)}
.sidebar .brand .mark{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.sidebar .brand em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar nav{flex:1;padding:14px 12px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:11.5px 15px;font-size:14px;font-weight:500;color:#94a3b8;cursor:pointer;transition:all .18s;border-radius:11px;margin-bottom:3px;border:1px solid transparent;border-left:3px solid transparent}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item:hover{color:#fff;background:var(--sidebar-hover)}
.nav-item-link{text-decoration:none;box-sizing:border-box}
.nav-item-link:visited{color:#94a3b8}
.nav-item-link:hover{color:#fff}
.nav-item.active{color:#fff;background:var(--sidebar-hover);border-left-color:var(--primary)}
.sidebar .user{padding:16px 18px;border-top:1px solid rgba(148,163,184,.12);font-size:13px}
.sidebar .user .name{color:#fff;font-weight:700}
.sidebar .user button{margin-top:8px;color:#94a3b8;font-size:12.5px;padding:3px 0}
.sidebar .user button:hover{color:var(--danger)}

.main{flex:1;margin-left:228px;padding:18px 22px;min-height:100vh;position:relative;z-index:1}

/* ---------- 应用主区柔和科技光晕背景(固定不随滚动) ----------
 * 三团蓝青光斑 + 顶部渐隐细网格;登录页 .auth-page 自带不透明背景,
 * 不受影响。.main 内容 z-index:1 浮于装饰层之上。 */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(560px 300px at 4% -4%,rgba(93,135,255,.10),transparent 70%),
  radial-gradient(640px 340px at 98% 0%,rgba(14,165,233,.09),transparent 70%),
  radial-gradient(520px 300px at 50% 110%,rgba(59,130,246,.07),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
 background-image:linear-gradient(rgba(93,135,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(93,135,255,.04) 1px,transparent 1px);
 background-size:54px 54px;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 42%);
 mask-image:linear-gradient(to bottom,#000 0%,transparent 42%)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.topbar h2{font-size:18px;font-weight:800;color:var(--text)}
.topbar .balance{background:var(--primary-light);border:1px solid rgba(93,135,255,.3);color:var(--primary-dark);padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.view{display:none;animation:fadeIn .3s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mobile-menu-btn{display:none}

/* ==================== 卡片与统计 ==================== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.card h3{font-size:15px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--text)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px;transition:all .25s;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.stat-card:hover{border-color:rgba(93,135,255,.35);box-shadow:var(--shadow-hover)}
.stat-card .label{font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:8px}
.stat-card .label .ic{width:26px;height:26px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.stat-card .label .ic svg{width:14px;height:14px}
.stat-card .num{font-size:24px;font-weight:800;margin:5px 0 2px;font-variant-numeric:tabular-nums;color:var(--text)}
.stat-card .delta{font-size:12px;color:var(--success)}
.stat-card .delta.warn{color:var(--warning)}

/* ---------- 工作台紧凑快捷条 ---------- */
.quick-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.quick-bar .qb-label{font-size:13px;font-weight:700;color:var(--text-3);margin-right:2px}

/* ==================== 卡内通用高密度元素 ==================== */
.card h3 .h3-note{font-size:12px;font-weight:400;color:var(--text-3);margin-left:10px}
.card-note{font-size:12.5px;color:var(--text-3);margin-top:10px;line-height:1.7}
.card-foot{margin-top:12px;text-align:right}
.field input[readonly]{background:var(--bg-soft);color:var(--text-2)}

/* ---------- 钱包充值单行工具条 ---------- */
.recharge-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rc-amounts{display:flex;gap:9px;flex-wrap:wrap}
.rc-amounts .rc-btn{min-width:64px}
.rc-go{margin-left:auto;padding:10px 28px}

/* ---------- 分销推广链接条 ---------- */
.inv-code-chip{font-size:12px;font-weight:400;color:var(--text-3)}
.inv-code-chip b{color:var(--primary);font-family:var(--font-mono);font-size:13px;letter-spacing:2px;margin-left:4px}
.invite-bar{display:flex;gap:10px;flex-wrap:wrap}
.invite-bar input{flex:1;min-width:240px;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg-soft);color:var(--text-2);font-size:13px}

/* ---------- API 密钥条 / 提取表单一行化 ---------- */
.key-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.key-bar .code-box{flex:1;min-width:240px;padding:11px 14px}
.api-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.api-form .api-url{flex:1;min-width:260px;margin-bottom:0}
.api-form .api-fmt{width:230px;margin-bottom:0}
.api-go{padding:11px 26px}

/* ==================== 表格 ==================== */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:9px 11px;color:var(--text-3);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;font-size:12.5px;letter-spacing:.4px}
td{padding:9px 11px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:hover td{background:var(--bg-soft)}
.mono{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2)}
.tag{display:inline-block;padding:2px 11px;border-radius:999px;font-size:12px;font-weight:600}
.tag-green{background:var(--success-light);color:var(--success)}
.tag-red{background:var(--danger-light);color:var(--danger)}
.tag-blue{background:var(--primary-light);color:var(--primary-dark)}
.tag-orange{background:var(--warning-light);color:var(--warning)}
.tag-cyan{background:#e0f2fe;color:#0369a1}
.btn-sm{padding:7px 15px;border-radius:9px;font-size:12.5px;font-weight:600;transition:all .2s;white-space:nowrap}
a.btn-sm{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-blue{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-3d)}
.btn-blue:hover{box-shadow:var(--glow-blue);transform:translateY(-1px)}
.btn-outline{background:var(--card);border:1px solid var(--border-strong);color:var(--text-2)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{background:var(--danger-light);border:1px solid rgba(220,38,38,.35);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}

/* ==================== 筛选栏 ==================== */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filter-bar select,.filter-bar input{padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:13px;transition:border .2s}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--primary)}

/* ==================== 套餐卡片 ==================== */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 18px;position:relative;transition:all .3s;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(93,135,255,.4)}
.plan.hot{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-light),var(--shadow)}
.plan .badge{position:absolute;top:-11px;right:16px;background:var(--grad-primary);color:#fff;font-size:12px;padding:3px 13px;border-radius:999px;font-weight:700;box-shadow:var(--shadow-3d)}
.plan h4{font-size:16px;margin-bottom:3px;color:var(--text)}
.plan .tier-sub{font-size:12px;color:var(--text-3);margin-bottom:10px}
.plan .price{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--primary)}
.plan .price small{font-size:13px;color:var(--text-3);-webkit-text-fill-color:var(--text-3);font-weight:400}
.plan .list-price{font-size:12.5px;color:var(--text-3);text-decoration:line-through;margin:2px 0 10px}
.plan ul{list-style:none;margin:0 0 14px;font-size:13px;color:var(--text-2);flex:1}
.plan li{padding:3.5px 0}
.plan li::before{content:"✓";color:var(--success);font-weight:700;margin-right:9px}
.plan .stock{font-size:11.5px;color:var(--text-3);margin-bottom:10px}
.plan .buy{width:100%}

/* ==================== 密钥/代码(深色代码块,浅色页面中的对比区) ==================== */
.code-box{background:#0f172a;border:1px solid #1e293b;color:#7dd3fc;font-family:var(--font-mono);font-size:13px;padding:14px 16px;border-radius:11px;overflow-x:auto}
.code-box .k{color:#a5b4fc}
pre.sample{background:#0f172a;border:1px solid #1e293b;color:#cbd5e1;padding:16px 18px;border-radius:11px;font-size:12.5px;overflow-x:auto;font-family:var(--font-mono);line-height:1.8}

/* ==================== Toast ==================== */
.toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%) translateY(120px);background:#0f172a;border:1px solid rgba(148,163,184,.2);backdrop-filter:blur(12px);color:#fff;padding:13px 26px;border-radius:12px;font-size:14px;z-index:999;opacity:0;transition:all .3s;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ==================== 模态框(下单确认) ==================== */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(6px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-mask.show{display:flex}
.modal{width:100%;max-width:430px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px;animation:fadeIn .25s ease;box-shadow:var(--shadow-card)}
.modal h3{font-size:17px;margin-bottom:20px;color:var(--text)}
.modal .row-item{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;border-bottom:1px solid var(--bg-soft)}
.modal .row-item .k{color:var(--text-2)}
.modal .row-item .v{font-weight:600;color:var(--text)}
.modal .row-item .v.hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:17px;font-weight:800}
.modal .btns{display:flex;gap:12px;margin-top:22px}
.modal .btns .btn-primary{flex:1}

/* ==================== 空状态 ==================== */
.empty{padding:44px 20px;text-align:center;color:var(--text-3);font-size:13.5px}

/* ==================== 响应式 ==================== */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:18px 16px}
  .mobile-menu-btn{display:block;color:var(--text);font-size:20px;padding:2px 8px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card .num{font-size:20px}}

/* ==================== 新模块:白名单/公告/工单/账户 ==================== */
/* 侧栏分组分隔线 */
.nav-item.nav-sep{margin-top:8px;padding-top:14px;border-top:1px solid rgba(148,163,184,.18)}

/* 卡片内两列表单 */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;max-width:760px}
.form-grid .full{grid-column:1/-1}
.section-sub{font-size:12.5px;color:var(--text-3);margin:-4px 0 14px;line-height:1.8}
.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:11px;background:var(--card);color:var(--text);transition:border .2s,box-shadow .2s;resize:vertical;min-height:120px;font-family:inherit;font-size:14px;line-height:1.7}
.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}

/* 白名单额度条 */
.quota-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13px;color:var(--text-2)}
.quota-track{flex:1;max-width:260px;height:8px;background:var(--bg-soft);border-radius:99px;overflow:hidden}
.quota-fill{height:100%;background:var(--grad-primary);border-radius:99px;transition:width .4s}
.quota-bar b{color:var(--primary-dark)}

/* 消息公告卡片 */
.notice-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px 20px;margin-bottom:11px;transition:all .2s;box-shadow:var(--shadow-sm)}
.notice-card:hover{border-color:rgba(93,135,255,.35);box-shadow:var(--shadow-hover)}
.notice-head{display:flex;align-items:center;gap:11px;margin-bottom:6px;flex-wrap:wrap}
.notice-head h4{font-size:14.5px;font-weight:700;color:var(--text)}
.notice-card p{font-size:13px;color:var(--text-2);line-height:1.75}
.notice-date{margin-left:auto;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* 工单楼层 */
.ticket-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--bg-soft)}
.tk-floors{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.tk-floor{display:flex;flex-direction:column;max-width:78%}
.tk-floor.meck{align-self:flex-end;align-items:flex-end}
.tk-floor .who{font-size:12px;color:var(--text-3);margin-bottom:5px;padding:0 4px}
.tk-floor .bubble{padding:12px 16px;border-radius:13px;font-size:13.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.tk-floor.admin .bubble{background:var(--bg-soft);border:1px solid var(--border);color:var(--text-2);border-top-left-radius:4px}
.tk-floor.meck .bubble{background:var(--grad-primary);color:#fff;border-top-right-radius:4px;box-shadow:var(--shadow-3d)}
.tk-reply{border-top:1px solid var(--bg-soft);padding-top:16px}
.modal.modal-wide{max-width:560px;width:100%}

/* 智能助手/系统通知楼层:与客服楼层再做区分,会员可一眼识别非人工回复 */
.tk-floor.tk-bot .bubble{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3}
.tk-floor.tk-system .bubble{background:#f1f5f9;border:1px dashed var(--border);color:var(--text-3)}
/* 工单提交弹窗内的 FAQ 关键词推荐列表 */
.tk-faq-item{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;
  padding:10px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .2s,background .2s}
.tk-faq-item:hover{border-color:var(--primary);background:#fff}
.tk-faq-item b{font-size:13.5px;color:var(--text)}
.tk-faq-item span{font-size:12px;color:var(--text-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* 实名认证状态块 */
.rn-done{display:flex;align-items:center;gap:14px;background:var(--success-light);border:1px solid rgba(34,197,94,.25);border-radius:12px;padding:15px 18px;font-size:13.5px;color:var(--text-2);max-width:560px}
.rn-done svg{width:30px;height:30px;color:var(--success);flex-shrink:0}
.rn-done b{color:var(--text)}
.set-submit{max-width:240px;margin-top:4px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.tk-floor{max-width:92%}}

/* ============================================================
   闪电云商业版扩展样式(向导/节点/通知/命令面板等)
   ============================================================ */

/* ---------- 登录页扩展 ---------- */
.captcha-img{height:48px;width:120px;object-fit:cover;border:1.5px solid var(--border);border-radius:11px;cursor:pointer;background:#f8fafc}
.captcha-row input{flex:1}
.auth-links{font-size:13px;text-align:right;margin:-2px 0 10px}
.auth-links a{color:var(--primary);font-weight:600;cursor:pointer}

/* ---------- 顶栏扩展 ---------- */
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--text-2);position:relative;transition:all .2s}
.icon-btn:hover{border-color:var(--primary);color:var(--primary)}
.cmdk-btn{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text-3);font-size:13px;min-width:190px;justify-content:flex-start}
.cmdk-btn:hover{border-color:var(--primary);color:var(--primary)}
.cmdk-btn kbd{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--bg-soft);border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:var(--text-3)}
.topbar-title{white-space:nowrap}
.money-chip{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:#fff7ed;border:1px solid #fed7aa;color:#c2410c}
.money-chip.primary{background:var(--primary-light);border-color:rgba(93,135,255,.3);color:var(--primary-dark)}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.top-actions{display:flex;align-items:center;gap:10px}

/* ---------- 侧栏折叠 ---------- */
body.sidebar-collapsed .sidebar{width:64px}
body.sidebar-collapsed .main{margin-left:64px}
body.sidebar-collapsed .brand-text,body.sidebar-collapsed .nav-item span,body.sidebar-collapsed .user{display:none}
body.sidebar-collapsed .brand{justify-content:center;padding:21px 0}
body.sidebar-collapsed .nav-item{justify-content:center;padding:12px 0}

/* ---------- 通知面板 ---------- */
.notify-panel{position:fixed;top:64px;right:22px;width:380px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);z-index:90;display:none;overflow:hidden}
.notify-panel.show{display:block;animation:fadeIn .2s ease}
.np-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px}
.np-head a{color:var(--primary);font-size:12.5px;cursor:pointer;font-weight:600}
.np-list{max-height:420px;overflow-y:auto}
.np-item{padding:12px 16px;border-bottom:1px solid var(--bg-soft);cursor:pointer;transition:background .15s}
.np-item:hover{background:var(--bg-soft)}
.np-item.unread{background:#f0f7ff}
.np-title{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:3px}
.np-item p{font-size:12.5px;color:var(--text-2);line-height:1.6}
.np-time{font-size:11.5px;color:var(--text-3);margin-top:3px}
.np-foot{padding:10px;text-align:center;border-top:1px solid var(--border)}
.np-foot a{font-size:13px;color:var(--primary);cursor:pointer;font-weight:600}

/* ---------- 工作台 ---------- */
.compliance-banner{display:flex;align-items:center;gap:9px;background:#fffbeb;border:1px solid #fcd34d;color:#92400e;padding:11px 16px;border-radius:12px;font-size:13px;margin-bottom:14px;line-height:1.7}
.welcome-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.welcome-row h3{font-size:21px;margin-bottom:3px}
.welcome-row p{font-size:13px;color:var(--text-3)}
.welcome-actions{display:flex;gap:10px}
.num.sc-blue{color:var(--primary)}.num.sc-cyan{color:#0284c7}.num.sc-green{color:var(--success)}.num.sc-orange{color:#ffae1f}
.line-panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.line-panel{border:1.5px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:all .25s;background:var(--card)}
.line-panel:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.lp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.lp-top b{font-size:15px}
.lp-proto{font-size:11px;font-weight:700;color:var(--primary-dark);background:var(--primary-light);padding:2px 9px;border-radius:99px}
.line-panel p{font-size:12.5px;color:var(--text-3);min-height:38px;line-height:1.6;margin-bottom:10px}
.lp-meta{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text-2)}
.lp-meta b{color:var(--text);font-variant-numeric:tabular-nums}
.lp-meta .warn{color:var(--warning);font-weight:700}
.lp-meta .ok{color:var(--success)}
.lp-meta .muted{color:var(--text-3)}

/* ---------- 步骤条 ---------- */
.steps{display:flex;align-items:center;justify-content:center;margin:2px 0 18px}
.step{display:flex;align-items:center;gap:9px;color:var(--text-3);font-size:14px;font-weight:600}
.step-no{width:30px;height:30px;border-radius:50%;background:var(--bg-soft);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.step.active{color:var(--primary-dark)}
.step.active .step-no{background:var(--grad-primary);border-color:transparent;color:#fff;box-shadow:var(--shadow-3d)}
.step.done{color:var(--success)}
.step.done .step-no{background:var(--success);border-color:transparent;color:#fff}
.step-line{width:70px;height:2px;background:var(--border);margin:0 16px;border-radius:2px}

/* ---------- 业务线 Tab / 项目卡 ---------- */
.line-tabs{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.line-tab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 20px;border:1.5px solid var(--border);border-radius:13px;background:var(--card);transition:all .2s;min-width:150px}
.line-tab b{font-size:14px;color:var(--text)}
.line-tab span{font-size:11.5px;color:var(--text-3)}
.line-tab.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 2px rgba(93,135,255,.12)}
.line-tab.active span{color:var(--primary-dark)}
.letter-bar{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.letter{min-width:24px;height:24px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-3);border-radius:6px;cursor:pointer;font-weight:600}
.letter:hover{background:var(--primary-light);color:var(--primary-dark)}
.letter.active{background:var(--primary);color:#fff}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.project-card{border:1.5px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:all .25s;background:var(--card);position:relative}
.project-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.project-card.soldout{opacity:.6;cursor:not-allowed;background:var(--bg-soft)}
.project-card.soldout:hover{transform:none;box-shadow:none;border-color:var(--border)}
.pc-head{display:flex;justify-content:space-between;margin-bottom:10px}
.pc-letter{width:30px;height:30px;border-radius:9px;background:var(--grad-primary);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.pc-device{font-size:11.5px;color:var(--text-3);background:var(--bg-soft);padding:3px 10px;border-radius:99px;height:fit-content}
.project-card h4{font-size:15px;margin-bottom:6px;line-height:1.4}
.pc-region{font-size:12.5px;color:var(--text-3);margin-bottom:14px}
.pc-foot{display:flex;justify-content:space-between;align-items:center}
.pc-stock{font-size:12.5px;color:var(--text-3)}
.pc-stock.ok{color:var(--success);font-weight:600}
.pc-go{font-size:12.5px;color:var(--primary);font-weight:700}

/* ---------- 已选项目 / 价档芯片 ---------- */
.selected-project{background:var(--bg-soft);border-radius:12px;padding:14px 16px}
.sp-row{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.sp-name{font-size:15px;font-weight:700}
.sp-sub{font-size:12.5px;color:var(--text-3)}
.plan-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px}
.plan-chip{border:1.5px solid var(--border);border-radius:13px;padding:14px;text-align:center;cursor:pointer;transition:all .2s;background:var(--card)}
.plan-chip:hover{border-color:var(--primary)}
.plan-chip.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 2px rgba(93,135,255,.15)}
.plan-chip.disabled{opacity:.5;cursor:not-allowed;background:var(--bg)}
.plan-chip.disabled:hover{border-color:var(--border)}
.pc-sub-warn{margin-top:6px;font-size:12px;color:#d97706;line-height:1.3}
.pc-label{font-size:13px;font-weight:700;margin-bottom:6px}
.pc-price b{font-size:18px;color:var(--primary);font-variant-numeric:tabular-nums}
.pc-price del{font-size:12px;color:var(--text-3);margin-left:4px}

/* ---------- 数量步进 / 自选资源 / 结算栏 ---------- */
.qty-stepper{display:flex;align-items:center;gap:0;width:fit-content}
.qty-stepper button{width:40px;height:42px;border:1.5px solid var(--border);background:var(--card);font-size:18px;color:var(--text-2);border-radius:10px 0 0 10px}
.qty-stepper button:last-child{border-radius:0 10px 10px 0}
.qty-stepper button:hover{border-color:var(--primary);color:var(--primary)}
.qty-stepper input{width:64px;height:42px;border:1.5px solid var(--border);border-left:none;border-right:none;border-radius:0;text-align:center;font-weight:700}
.resource-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:220px;overflow-y:auto;border:1.5px solid var(--border);border-radius:11px;padding:10px}
.res-item{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:7px 9px;border:1px solid var(--border);border-radius:9px;cursor:pointer}
.res-item:hover{border-color:var(--primary)}
.res-item input{accent-color:var(--primary)}
.settle-bar{position:sticky;bottom:14px;display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:14px 22px;box-shadow:var(--shadow-card);margin-top:6px;gap:16px;flex-wrap:wrap}
.settle-total b{font-size:24px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:6px}
.settle-meta{font-size:12.5px;color:var(--text-3)}
.settle-btn{width:auto;padding:13px 34px}

/* ==================== 选购:用途场景入口(第一步) ==================== */
/* 场景卡 2×2 网格大按钮 */
.scene-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.scene-card{display:flex;align-items:center;gap:15px;text-align:left;padding:20px 22px;border:1.5px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm);transition:all .25s}
.scene-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.sc-icon{width:50px;height:50px;border-radius:14px;background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-3d);flex:none}
.sc-icon svg{width:24px;height:24px}
.sc-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.sc-body b{font-size:16px;color:var(--text)}
.sc-body span{font-size:12.5px;color:var(--text-2);line-height:1.55}
.sc-meta{font-size:11.5px;color:var(--text-3);background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;padding:4px 12px;white-space:nowrap}
.sc-go{font-size:12.5px;font-weight:700;color:var(--primary);white-space:nowrap}

/* ---------- 第二步:当前场景说明条 ---------- */
.scene-current{display:flex;align-items:center;gap:13px;padding:14px 18px;border:1.5px solid rgba(93,135,255,.22);background:var(--grad-soft);border-radius:14px;margin-bottom:14px}
.sc-c-icon{width:40px;height:40px;border-radius:11px;background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.sc-c-icon svg{width:20px;height:20px}
.sc-c-body{display:flex;flex-direction:column;gap:1px}
.sc-c-body b{font-size:14.5px}
.sc-c-body span{font-size:12px;color:var(--text-2)}
.sc-c-durs{margin-left:auto;font-size:12px;color:var(--text-3);white-space:nowrap}

/* ---------- 分区二级筛选胶囊 ---------- */
.zone-pick-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.zp-item{padding:6px 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);font-size:12.5px;font-weight:600;color:var(--text-2);transition:all .18s}
.zp-item:hover{border-color:var(--primary);color:var(--primary-dark)}
.zp-item.on{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}

/* ---------- 专线选择行 ---------- */
.line-pick{display:flex;flex-direction:column;gap:9px}
.lp-row{display:flex;align-items:center;gap:13px;padding:12px 16px;border:1.5px solid var(--border);border-radius:13px;background:var(--card);text-align:left;transition:all .2s}
.lp-row:hover{border-color:var(--primary)}
.lp-row.on{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 2px rgba(93,135,255,.12)}
.lp-badge{width:40px;height:40px;border-radius:11px;background:var(--grad-primary);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none}
.lp-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lp-main b{font-size:14px}
.lp-main span{font-size:12px;color:var(--text-3)}
.lp-stock-ok{color:var(--success);font-style:normal;font-weight:600}
.lp-stock-no{color:var(--amber);font-style:normal;font-weight:600}
.lp-go{font-size:12.5px;font-weight:700;color:var(--primary);white-space:nowrap}

/* ---------- 卡内数量行 ---------- */
.qty-inline{display:flex;align-items:center;gap:14px;margin-top:14px}
.qty-inline label{font-size:13px;font-weight:600;color:var(--text-2)}

/* ---------- 高级选项折叠(默认收起) ---------- */
.adv-box{border:1.5px solid var(--border);border-radius:14px;background:var(--card);margin-bottom:14px;overflow:hidden}
.adv-box>summary{display:flex;align-items:center;gap:9px;padding:14px 18px;font-size:14px;font-weight:700;cursor:pointer;list-style:none;user-select:none}
.adv-box>summary::-webkit-details-marker{display:none}
.adv-box>summary svg{width:18px;height:18px;color:var(--text-3);flex:none}
.adv-box[open]>summary{border-bottom:1px solid var(--border)}
.adv-inner{padding:16px 18px 4px}

/* ---------- 子页签 ---------- */
.sub-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.sub-tabs-inner{margin-bottom:14px}
.sub-tab{padding:10px 18px;font-size:14px;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.sub-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ---------- 节点表格内元素 ---------- */
.cell-main{font-size:13px}
.cell-sub{font-size:11.5px;color:var(--text-3);margin-top:2px}
.link-btn{font-size:12px;color:var(--primary);font-weight:600;padding:2px 6px;margin-right:2px}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--danger)}
.row-actions{white-space:nowrap}
.amount-plus{color:var(--success);font-variant-numeric:tabular-nums}
.amount-minus{color:var(--danger);font-variant-numeric:tabular-nums}
.batch-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--primary-light);border:1px solid rgba(93,135,255,.3);border-radius:12px;padding:10px 14px;margin-bottom:12px}
.batch-bar span{font-size:13px;color:var(--primary-dark);font-weight:600}
.stat-grid-5{grid-template-columns:repeat(5,1fr)}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;gap:7px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.pager-info{font-size:12.5px;color:var(--text-3);margin-right:auto}
.pager button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 批量任务 ---------- */
.task-item{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.task-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.task-head .cell-sub{margin-left:auto}
.task-progress{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-2)}
.task-progress .track{flex:1;max-width:340px;height:8px;background:var(--bg-soft);border-radius:99px;overflow:hidden}
.task-progress .fill{height:100%;background:var(--grad-primary);border-radius:99px}

/* ---------- 导出格式选择 ---------- */
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.fmt-btn{border:1.5px solid var(--border);border-radius:10px;padding:10px;font-size:13px;font-weight:600;color:var(--text-2);background:var(--card);transition:all .15s}
.fmt-btn:hover{border-color:var(--primary);color:var(--primary)}
.fmt-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}
.success-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.success-ic{width:52px;height:52px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- 订单详情 ---------- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:18px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.detail-row{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--bg-soft);font-size:13px;gap:12px}
.detail-row .k{color:var(--text-3);white-space:nowrap}
.detail-row .v{text-align:right}
.detail-h3{font-size:14px;margin:16px 0 10px}

/* ---------- 充值 ---------- */
.rc-btn{min-width:74px}
.modal-text{font-size:13px;color:var(--text-2);line-height:1.8}
.modal .modal-text{margin-bottom:14px}
.modal-sm{max-width:380px}

/* ---------- 二维码 ---------- */
.qr-box{display:flex;align-items:center;justify-content:center;min-height:210px;margin:12px 0}
.qr-box canvas,.qr-box img{border:8px solid #fff;outline:1px solid var(--border);border-radius:6px}

/* ---------- 指南文章 ---------- */
.guide-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 4px;border-bottom:1px solid var(--bg-soft);cursor:pointer;transition:background .15s}
.guide-item:hover{background:var(--bg-soft);border-radius:10px}
.guide-item h4{font-size:14.5px;margin-bottom:4px}
.guide-item p{font-size:12.5px;color:var(--text-3)}
.gi-side{display:flex;align-items:center;gap:12px;white-space:nowrap}
.gi-arrow{font-size:12.5px;color:var(--primary);font-weight:600}
.guide-content{font-size:14px;line-height:1.9;color:var(--text-2);max-height:60vh;overflow-y:auto}
.guide-content h4{font-size:15px;color:var(--text);margin:14px 0 6px}
.guide-content p{margin:8px 0}
.guide-content ul{padding-left:22px;margin:8px 0}

/* ---------- 客服渠道 ---------- */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.svc-item{border:1px solid var(--border);border-radius:12px;padding:15px 17px}
.svc-item h4{font-size:13.5px;color:var(--text-3);margin-bottom:7px;font-weight:600}
.svc-value{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px}
.svc-item button,.svc-item a{margin-top:9px;display:inline-block}

/* ---------- 命令面板 ---------- */
.cmdk-box{width:100%;max-width:520px;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card)}
#cmdkModal{align-items:flex-start;padding-top:120px}
.cmdk-box input{width:100%;padding:18px 20px;border:none;border-bottom:1px solid var(--border);font-size:15px;outline:none}
.cmdk-list{max-height:340px;overflow-y:auto;padding:8px}
.cmdk-item{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:10px;cursor:pointer;font-size:14px}
.cmdk-item:hover{background:var(--primary-light)}
.cmdk-hint{font-size:11.5px;color:var(--text-3)}

/* ---------- 表格复选框 ---------- */
td input[type=checkbox]{accent-color:var(--primary);width:15px;height:15px;cursor:pointer}

/* ---------- 响应式补充 ---------- */
@media(max-width:1200px){
  .line-panel-grid,.project-grid,.plan-chips{grid-template-columns:repeat(2,1fr)}
  .stat-grid-5{grid-template-columns:repeat(3,1fr)}
  .resource-pick{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .line-panel-grid,.project-grid,.plan-chips,.fmt-grid,.service-grid,.detail-grid,.scene-pick{grid-template-columns:1fr}
  .stat-grid-5{grid-template-columns:1fr 1fr}
  .cmdk-btn span,.cmdk-btn kbd{display:none}
  .cmdk-btn{min-width:0}
  .topbar-title{font-size:16px}
  .money-chip{padding:6px 10px;font-size:12px}
  .letter-bar{width:100%;margin-left:0}
  .settle-btn{width:100%}
}

/* ============================================================
   企业级精致化增强(20260923):统一侧栏层次、焦点环与版权排版
   仅做增量增强,不改动既有布局结构
   ============================================================ */
/* 侧栏由纯黑改为深蓝渐变,与管理后台保持同一视觉语言 */
.sidebar{background:var(--grad-sidebar)}
.nav-item.active{background:linear-gradient(135deg,rgba(93,135,255,.95),rgba(14,165,233,.85));box-shadow:0 8px 18px -8px rgba(93,135,255,.65)}
/* 登录/注册卡片底部备案信息:居中、可换行、链接悬停高亮 */
.auth-copyright{max-width:340px;margin-left:auto;margin-right:auto;line-height:1.9}
.auth-copyright a:hover{color:var(--primary)}
/* 文本输入控件聚焦统一焦点环(鼠标点击不显示,键盘导航可见) */
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--ring)}

/* ============================================================
   节点选购(shop)—— 两步选购流程(20260927)
   业务线横切 / 项目库 / 筛选 pills / 节点卡片 / 吸底下单栏 /
   批量预估 / 进度弹窗 / 成功交付弹窗;全部引用设计令牌。
   ============================================================ */

/* ---------- 业务线横切条 ---------- */
.shop-linebar{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.shop-line-chip{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;min-width:172px;padding:11px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer;transition:all var(--transition-fast);text-align:left}
.shop-line-chip:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.shop-line-chip.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 4px 14px -8px rgba(93,135,255,.5)}
.slb-name{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slb-meta{display:flex;align-items:center;gap:8px;font-size:11.5px}
.slb-proto{background:var(--bg-soft);color:var(--text-2);border-radius:6px;padding:1px 7px;font-weight:700}
.slb-stock-ok{color:var(--success);font-weight:700}
.slb-stock-none{color:var(--text-3)}
/* 真实上家:即时开通状态 + 在线圆点(在线/维护/探测中) */
.slb-upstream{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--success)}
.slb-upstream .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-light)}
.slb-upstream.off{color:var(--warning)}
.slb-upstream.off .dot{background:var(--warning);box-shadow:0 0 0 3px var(--warning-light)}
.slb-upstream.wait{color:var(--text-3)}
.slb-upstream.wait .dot{background:var(--text-3);box-shadow:0 0 0 3px var(--bg-soft)}

/* ---------- 步骤条 + 业务告知 ---------- */
.shop-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.shop-steps{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.shop-step{display:flex;align-items:center;gap:8px;border:none;background:none;cursor:pointer;padding:4px;font-size:15px;font-weight:700;color:var(--text-3)}
.shop-step:disabled{cursor:default}
.shop-step .ss-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--bg-soft);color:var(--text-3);font-size:13px}
.shop-step.active{color:var(--primary-dark)}
.shop-step.active .ss-num{background:var(--grad-primary);color:#fff;box-shadow:0 4px 10px -4px rgba(93,135,255,.6)}
.ss-line{display:block;width:72px;height:2px;background:var(--border-strong);border-radius:2px}
.shop-notice{flex:1;min-width:260px;display:flex;gap:8px;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:9px 13px;font-size:12.5px;line-height:1.7}
.shop-notice svg{flex:0 0 auto;margin-top:3px}
.shop-notice b{font-weight:700}

/* ---------- 第一步:项目库工具行 ---------- */
.shop-lib-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.shop-search{display:flex;align-items:center;gap:8px;flex:1;min-width:260px;max-width:420px;border:1.5px solid var(--border);border-radius:10px;padding:7px 8px 7px 12px;background:var(--card);transition:border .2s}
.shop-search:focus-within{border-color:var(--primary)}
.shop-search svg{color:var(--text-3);flex:0 0 auto}
.shop-search input{flex:1;border:none;outline:none;font-size:14px;background:transparent;min-width:0}
.shop-search .btn-sm{flex:0 0 auto}
.shop-lib-meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text-2);flex-wrap:wrap}
.shop-lib-meta b{color:var(--primary-dark);font-size:14.5px}
.shop-device-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.sd-btn{border:none;background:var(--card);padding:6px 15px;font-size:12.5px;color:var(--text-2);cursor:pointer}
.sd-btn.active{background:var(--primary);color:#fff;font-weight:600}
.shop-stock-toggle{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.shop-stock-toggle input{accent-color:var(--primary);width:14px;height:14px;cursor:pointer}

/* ---------- 字母索引 ---------- */
.shop-letters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.shop-letter{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text-2);font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--transition-fast)}
.shop-letter:hover{border-color:var(--primary);color:var(--primary)}
.shop-letter.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---------- 项目卡片网格 ---------- */
.shop-project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-height:280px}
.shop-project{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 15px;border:1.5px solid var(--border);border-radius:11px;background:var(--card);cursor:pointer;transition:all var(--transition-fast);text-align:left}
.shop-project:hover{border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.shop-project.soldout{cursor:not-allowed;opacity:.62;background:var(--bg-soft)}
.shop-project.soldout:hover{transform:none;box-shadow:none;border-color:var(--border)}
.pj-name{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-dev{font-style:normal;color:var(--text-3);font-weight:400;margin-left:4px}
.pj-right{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.pj-badge{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
.pj-badge.ok{background:var(--success-light);color:var(--success)}
.pj-badge.none{background:var(--bg-soft);color:var(--text-3)}
.pj-hot{font-size:10.5px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:6px;padding:2px 6px}

/* ---------- 第二步:筛选区 ---------- */
.shop-step2-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.shop-step2-head h3{margin:0;font-size:16px}
.shop-filter-block{margin-bottom:13px}
.shop-filter-row{display:flex;gap:24px;flex-wrap:wrap}
.shop-city-block{flex:0 0 170px}
.sfb-label{font-size:12.5px;font-weight:700;color:var(--text-3);margin-bottom:8px}
.shop-pills{display:flex;flex-wrap:wrap;gap:8px}
.shop-pill{border:1.5px solid var(--border);background:var(--card);color:var(--text-2);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:7px}
.shop-pill:hover{border-color:var(--primary);color:var(--primary)}
.shop-pill.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}
.shop-duration-pills .spd-label{font-weight:700}
.spd-price{color:var(--primary);font-weight:800;font-size:12.5px}
.spd-price.free{color:var(--success)}
.spd-trial{background:var(--success-light);border-radius:6px;padding:1px 6px;margin-left:5px;font-weight:600;font-size:11px}
.shop-prov-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.shop-prov{flex:0 0 auto;border:1.5px solid var(--border);background:var(--card);border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all var(--transition-fast)}
.shop-prov:hover{border-color:var(--primary)}
.shop-prov.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark)}
.spv-cnt{color:var(--success);font-weight:800}
.shop-prov.active .spv-cnt{color:var(--primary)}
.shop-city-block select{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);font-size:13px;cursor:pointer}

/* ---------- 节点卡片 ---------- */
.shop-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;min-height:260px}
.shop-card-grid.is-loading{align-content:start}
.shop-card-grid.is-loading::after{content:"";display:block;grid-column:1/-1;min-height:220px}
.shop-empty-box{min-height:220px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:13px}
.shop-node-card{position:relative;border:1.5px solid var(--border);border-radius:13px;padding:14px 15px;background:var(--card);transition:all var(--transition-fast)}
.shop-node-card:hover{border-color:var(--primary-border);box-shadow:var(--shadow-sm)}
.shop-node-card.selected{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 6px 18px -12px rgba(93,135,255,.55)}
.nc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.nc-head b{font-size:14px}
.nc-isp{font-size:11px;font-weight:700;color:var(--primary-dark);background:var(--primary-light);border-radius:6px;padding:2px 8px;white-space:nowrap}
.nc-sub{font-size:12px;color:var(--text-3);margin-bottom:11px}
.nc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nc-stock{font-size:12px;color:var(--text-2)}
.nc-stock b{color:var(--success);font-size:13.5px}
/* 即时开通节点卡片:标签与卡片底色 */
.nc-instant-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--success)}
.nc-instant-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-light)}
.instant-card{background:linear-gradient(180deg,#f8faff,var(--card))}
.instant-card.selected{background:var(--primary-soft)}
.nc-price{font-size:15px;font-weight:800;color:var(--danger)}
.nc-price.none{font-size:12px;color:var(--text-3);font-weight:600}
.nc-stepper{position:absolute;top:12px;right:13px;display:none;align-items:center;gap:6px}
.shop-node-card.selected .nc-stepper{display:inline-flex}
.nc-stepper button{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--primary);background:var(--card);color:var(--primary);font-size:14px;font-weight:800;line-height:1;cursor:pointer;transition:all .12s}
.nc-stepper button:hover{background:var(--primary);color:#fff}
.nc-stepper b{min-width:18px;text-align:center;font-size:13.5px;color:var(--primary-dark)}
.nc-stepper.disabled{position:static;display:inline-flex;opacity:.5}
/* 未选中时把「+」放到价格行,保持芒果云式的紧凑交互 */
.shop-node-card:not(.selected) .nc-stepper{position:static;display:inline-flex;margin-top:10px}
.shop-node-card:not(.selected) .nc-stepper b{display:none}

/* ---------- 吸底下单栏 ---------- */
.shop-orderbar{position:sticky;bottom:10px;z-index:var(--z-sticky);display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-hover);padding:12px 16px;margin-top:10px}
/* 步骤2:给吸底栏留出空间,避免 sticky 与内容互相挤压跳动 */
#view-shop.step2-on{padding-bottom:88px}
#view-shop .view,#view-shop>.card,#view-shop .shop-pane{scroll-margin-top:72px}
.sob-left{display:flex;align-items:baseline;gap:14px;flex:0 0 auto}
.sob-count{font-size:13.5px;color:var(--text-2)}
.sob-count b{font-size:18px;color:var(--primary-dark)}
.sob-amount{font-size:13.5px;color:var(--text-2)}
.sob-amount b{font-size:20px;color:var(--danger);font-weight:800}
.sob-balance{font-size:12px;color:var(--text-3)}
.sob-fields{display:flex;align-items:center;gap:8px;flex:1;min-width:320px;flex-wrap:wrap}
.sob-fields input,.sob-fields select{padding:8px 11px;border:1.5px solid var(--border);border-radius:9px;font-size:12.5px;background:var(--card);min-width:0}
.sob-fields input{width:118px}
.sob-fields select{width:108px;cursor:pointer}
.sob-port-sep{color:var(--text-3)}
.sob-submit{flex:0 0 auto;padding:11px 26px;font-size:14px}
.sob-submit:disabled{opacity:.5;cursor:not-allowed}

/* ---------- 批量预估弹窗 ---------- */
.bb-estimate{margin-top:6px}
.bbe-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:10px}
.bbe-cell{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg-soft);display:flex;flex-direction:column;gap:4px}
.bbe-cell span{font-size:11.5px;color:var(--text-3)}
.bbe-cell b{font-size:16px;color:var(--text)}
.bbe-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.7;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bbe-warn.bbe-balance{background:var(--danger-light);border-color:#fca5a5;color:var(--danger)}

/* ---------- 进度弹窗 ---------- */
.pg-ring{width:56px;height:56px;border-radius:50%;border:4px solid var(--bg-soft);border-top-color:var(--primary);margin:6px auto 0;animation:pgSpin .8s linear infinite}
.pg-ring.fail{border-color:var(--danger-light);border-top-color:var(--danger);animation:none}
@keyframes pgSpin{to{transform:rotate(360deg)}}
.pg-detail{font-size:12.5px;color:var(--text-3);min-height:18px}

/* ---------- 成功交付弹窗 ---------- */
.ss-success-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px}
.ss-success-head h3{margin:0}
.ss-order-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2);background:var(--bg-soft);border-radius:9px;padding:8px 12px;margin-bottom:14px}
.ss-order-row code{font-family:var(--font-mono);font-weight:700;color:var(--text)}
.ss-foot-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* ---------- 选购页响应式 ---------- */
@media(max-width:1200px){
  .shop-project-grid{grid-template-columns:repeat(3,1fr)}
  .bbe-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .shop-project-grid{grid-template-columns:repeat(2,1fr)}
  .shop-head{gap:10px}
  .ss-line{width:36px}
  .sob-left{width:100%}
  .sob-fields{min-width:0}
  .sob-fields input{width:calc(50% - 26px);flex:1}
  .sob-submit{width:100%}
  .bbe-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==================== 节点中心增强(三列筛选/倒计时/导入/任务) ==================== */

/* 筛选项较多时允许两行排布,日期标签与输入框紧凑成组 */
.filter-bar-2{flex-wrap:wrap;gap:8px}
.filter-bar-2 input[type=text]{min-width:130px}
.nf-date{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-2);white-space:nowrap}
.nf-date input{padding:8px 10px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;color:var(--text-1)}

/* 节点标签行 */
.node-tag-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}

/* 密码显示切换 */
.pwd-toggle{margin-left:4px;padding:0;font-size:12px}

/* 剩余时间倒计时三态 */
.countdown-ok{color:var(--text-2);font-size:12px;white-space:nowrap}
.countdown-warn{color:#d97706;font-weight:600;font-size:12px;white-space:nowrap}
.countdown-danger{color:#ff4d4f;font-weight:700;font-size:12px;white-space:nowrap}

/* 导入节点页 */
.ni-textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;
  font-family:ui-monospace,Consolas,monospace;font-size:13px;line-height:1.7;resize:vertical;background:#fafafa}
.ni-textarea:focus{outline:none;border-color:var(--primary);background:#fff}
.ni-summary{cursor:pointer;padding:8px 10px;font-size:13px;color:var(--text-2);user-select:none}
.ni-pre{max-height:220px;overflow:auto;margin:6px 0 0}

/* 批量任务明细 */
.task-extra{font-size:12.5px;color:var(--text-2);margin-top:6px}
.task-stop{font-size:12.5px;color:#ff4d4f;margin-top:3px}
#taskList .task-head{gap:10px}
#taskList .task-head .btn-sm{margin-left:auto}

/* 订单详情连接信息复制按钮 */
.od-copy-all{margin:8px 0}

/* ==================== 分销批发价/代注册/额度 + 线路检测 ==================== */

/* 弹窗内复选框说明文字 */
.chk-label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);cursor:pointer}
.chk-label input{width:16px;height:16px;accent-color:var(--primary)}

/* 分销规则/下级表行内操作按钮间距 */
#rrTable .row-actions{display:flex;gap:10px;white-space:nowrap}
.link-btn.danger{color:var(--danger)}

/* 额度弹窗宽表格 */
#quotaTable input[type=number]{min-width:0}
#quotaModal .modal-wide{max-width:880px}

/* 代注册成功凭据 */
#srOkBody .detail-row .v b{color:#b45309;letter-spacing:.5px}

/* 线路检测统计卡与表格 */
#pcResult{margin-top:14px}
#pcTable td,#pcTable th{white-space:nowrap}
#pcTable td.cell-sub{white-space:normal;color:var(--text-3);font-size:12.5px}

/* ============================================================
   20260928 控制台对标芒果云(mangguoip)布局重做
   ------------------------------------------------------------
   仅在 /app 用户中心生效(app.css 只被会员端引入),
   不影响 www 官网与 console 后台共用的 design-tokens.css。
   视觉基线:芒果云主色 #5D87FF、页面底 #fafbfc、
   边框 #e2e8ee、卡片圆角 8px、白色 230px 侧栏。
   ============================================================ */

/* ---------- app 作用域设计令牌覆盖(后加载,覆盖 design-tokens) ---------- */
:root{
  /* 品牌主色:芒果云 #5D87FF 及其 light/dark 派生(对齐 --el-color-primary 体系) */
  --primary:#5D87FF;                 /* --el-color-primary */
  --primary-hover:#8dabff;           /* light-3(悬停) */
  --primary-dark:#4a6ccc;            /* dark-2(按下) */
  --primary-darker:#415eb2;          /* dark-3 */
  --primary-light:#eef3ff;           /* light-9:选中菜单/页签/标签浅底 */
  --primary-soft:#eef3ff;
  --primary-border:#aec3ff;          /* light-5 */
  --primary-light-1:#6d93ff;
  --primary-light-3:#8dabff;
  --primary-light-5:#aec3ff;
  --primary-light-7:#cedbff;
  --primary-light-8:#dee7ff;
  --primary-light-9:#eef3ff;
  --primary-dark-2:#4a6ccc;
  /* 语义色(芒果云实测值) */
  --success:#13deb9;
  --success-light:#e7fcf8;           /* rgb(231,252,248) */
  --warning:#ffae1f;
  --warning-light:#fff7e9;           /* rgb(255,247,233) */
  --danger:#ff4d4f;
  --danger-light:#ffeded;            /* rgb(255,237,237) */
  --error:#fa896b;
  --info:#909399;
  --text:#303133;                    /* Element 主文字色 */
  --text-2:#606266;
  --text-3:#909399;
  --text-placeholder:#a8abb2;
  --text-disabled:#c0c4cc;
  --border:#e2e8ee;                  /* 芒果实测默认边框(--art-border-color) */
  --border-strong:#d0d7de;
  --bg:#fafbfc;                      /* 芒果页面底色(--default-bg-color) */
  --bg-soft:#f5f7fa;                 /* 表格行悬停(--el-fill-color-light) */
  --sidebar-bg:#ffffff;
  --sidebar-hover:#f2f4f5;           /* art-gray-200 菜单 hover */
  /* art 中性灰阶(对齐芒果云自研 art-* 色板) */
  --art-gray-100:#f9fafb; --art-gray-200:#f2f4f5; --art-gray-300:#e6eaeb;
  --art-gray-400:#9aa1b1; --art-gray-500:#79839b; --art-gray-600:#646f88;
  --art-gray-700:#4d5875; --art-gray-800:#383853; --art-gray-900:#323251;
  --art-card-border:rgba(0,0,0,.08);
  --art-border-color:#e2e8ee;
  --art-main-bg-color:#fafbfc;
  --art-hover-color:#edeff0;
  --art-active-color:#f2f4f5;
  /* 圆角体系:单一 --custom-radius 派生(卡 8 / 弹窗 12 / 菜单 6) */
  --custom-radius:12px;
  --radius-sm:6px;
  --radius:8px;                      /* 卡片/表格卡 */
  --radius-lg:10px;
  --sidebar-w:230px;
  --header-h:60px;                   /* 顶栏主行 60px(芒果 h-15) */
  --font-sans:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei",微软雅黑,Arial,sans-serif;
  --grad-primary:#5D87FF;            /* 芒果按钮为纯色,不用渐变 */
  --grad-sidebar:#ffffff;
  --grad-text:#5D87FF;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 4px 16px -8px rgba(16,24,40,.10);
  --shadow-card:0 1px 2px #1018280a,0 6px 16px -12px #10182824; /* 统计卡/指标条 */
  --shadow-hover:0 2px 6px #1018280d,0 14px 28px -14px #10182833;
  --shadow-3d:0 4px 12px -4px rgba(93,135,255,.35);
  --glow-blue:0 0 0 rgba(0,0,0,0);
  --glow-blue-strong:0 4px 14px -2px rgba(93,135,255,.45);
  --ring:0 0 0 3px rgba(93,135,255,.18);
  /* 动效(对齐芒果云交互动效清单) */
  --transition-fast:.15s cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
/* 主区科技光斑/网格在芒果白底风格下去除 */
body::before,body::after{display:none!important}
body{background:#fafbfc}

/* 通用按钮:主按钮纯色化、悬停抬升收敛 */
.btn-primary{background:#5D87FF;box-shadow:none;border-radius:6px;font-weight:600}
.btn-primary:hover{background:#8dabff;transform:none;box-shadow:none}
.btn-blue{background:#5D87FF;box-shadow:none;border-radius:6px;font-weight:500}
.btn-blue:hover{background:#8dabff;box-shadow:none;transform:none}
.btn-outline{border-radius:6px;border-color:#dcdfe6;color:#606266;background:#fff}
.btn-outline:hover{border-color:#5D87FF;color:#5D87FF;background:#fff}
.btn-danger{border-radius:6px}
.btn-sm{border-radius:6px}
.card{border-radius:8px;border-color:#f2f4f5;box-shadow:none}
.field input,.field select,.field textarea{border-radius:6px}
.filter-bar select,.filter-bar input{border-radius:6px}
input,select,textarea{color:#303133}
input:focus,select:focus,textarea:focus{border-color:#5D87FF!important;box-shadow:0 0 0 2px rgba(93,135,255,.14)!important}
.sub-tab.active,.shop-step.active{color:#5D87FF}
.sub-tab.active{border-bottom-color:#5D87FF}
.tag-blue{background:#eef3ff;color:#5D87FF}
a{color:#5D87FF}
.stat-card{border-color:#f2f4f5;border-radius:8px;padding:16px 18px}
.stat-card:hover{border-color:#aec3ff;box-shadow:none;transform:none}
.stat-card .label .ic{background:#eef3ff;color:#5D87FF;border-radius:6px}
.num.sc-blue,.num.sc-cyan{color:#5D87FF}
.batch-bar{background:#eef3ff;border:1px solid #cedbff;border-radius:8px}
.batch-bar span{color:#4a6ccc}
/* 旧渐变文字全部收成主色纯色 */
.sidebar .brand em,.modal .row-item .v.hl,.plan .price,.settle-total b,.pc-price b{
  -webkit-text-fill-color:currentColor;color:#5D87FF;background:none}
.sob-amount b{color:#ff4d4f}
.shop-pill.active,.shop-prov.active,.shop-line-chip.active,.zp-item.on,.plan-chip.active,
.line-tab.active,.sd-btn.active,.shop-letter.active,.fmt-btn.active{
  border-color:#5D87FF;background:#eef3ff;color:#5D87FF;box-shadow:none}
.sd-btn.active{background:#5D87FF;color:#fff}
.shop-step.active{color:#5D87FF}
.shop-step.active .ss-num{background:#5D87FF;box-shadow:none}
.nc-isp{background:#eef3ff;color:#5D87FF}

/* ============================================================
   白色侧栏 + 分组菜单
   ============================================================ */
.app .sidebar{width:230px;background:#fff;border-right:1px solid var(--art-card-border);
  display:flex;flex-direction:column}
.app .main{margin-left:230px;padding:0 20px 24px}
.sidebar .brand{padding:0 18px;height:60px;box-sizing:border-box;
  border-bottom:1px solid var(--art-card-border);color:#303133;font-size:16px;gap:10px}
.sidebar .brand .mark{width:30px;height:30px}
.sidebar .brand em{font-style:normal;color:#5D87FF}
.sidebar nav{padding:10px 8px;flex:1;overflow-y:auto}
/* 菜单项(无分组的一级入口:总览/指南/个人中心/SK5检测)
   规格:42px 高 / 6px 圆角 / 20px 图标 / 4px 下间距 / 选中 #eef3ff 无边框 */
.sidebar .nav-item{display:flex;align-items:center;gap:10px;padding:0 12px;height:42px;
  font-size:14px;font-weight:500;color:#303133;border-radius:6px;margin-bottom:4px;
  border:none;transition:background .15s,color .15s}
.sidebar .nav-item svg{width:20px;height:20px;color:#606266;flex-shrink:0}
.sidebar .nav-item:hover{background:var(--art-gray-200);color:#303133}
.sidebar .nav-item.active{background:#eef3ff;color:#5D87FF;font-weight:600;
  box-shadow:none;border:none}
.sidebar .nav-item.active svg{color:#5D87FF}
.sidebar .nav-item.nav-sep{margin-top:8px;padding-top:0;border-top:none}
/* 菜单分组(节点选购/订单中心/...) */
.nav-group{margin-bottom:4px}
.nav-group-head{display:flex;align-items:center;gap:10px;padding:0 12px;height:42px;
  font-size:14px;font-weight:600;color:#303133;cursor:pointer;border-radius:6px;
  user-select:none;transition:background .15s,color .15s}
.nav-group-head:hover{background:var(--art-gray-200)}
.nav-group-head svg.ngh-icon{width:20px;height:20px;color:#606266;flex-shrink:0}
.nav-group-head .ngh-text{flex:1;white-space:nowrap}
.nav-group-head .ngh-arrow{width:13px;height:13px;color:#646f88;transition:transform .2s;flex:0 0 auto}
.nav-group.collapsed .ngh-arrow{transform:rotate(-90deg)}
.nav-group.collapsed .nav-sub{display:none}
/* 分组下的二级菜单项(二级缩进 40px,对齐 el-menu level-padding) */
.nav-sub{padding:2px 0 4px}
.nav-sub-item{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px 0 32px;
  font-size:14px;color:#606266;cursor:pointer;border-radius:6px;margin:0 0 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.nav-sub-item .nsi-dot{width:5px;height:5px;border-radius:50%;background:#c0c4cc;flex:0 0 auto}
.nav-sub-item:hover{background:var(--art-gray-200);color:#303133}
.nav-sub-item.active{background:#eef3ff;color:#5D87FF;font-weight:600}
.nav-sub-item.active .nsi-dot{background:#5D87FF}
/* 组内含选中项时,组标题高亮主色 */
.nav-group.has-active>.nav-group-head{color:#5D87FF}
.nav-group.has-active>.nav-group-head svg.ngh-icon{color:#5D87FF}
/* 侧栏底部:上级联系方式卡 + 用户行 + 退出 */
.side-bottom{padding:10px 12px 18px;border-top:1px solid var(--art-card-border)}
.inviter-card{background:var(--art-main-bg-color);border:1px solid var(--art-border-color);
  border-radius:10px;padding:12px 12px 10px;margin-bottom:8px}
.inviter-card .ic-lbl{font-size:12px;font-weight:600;color:#79839b;margin-bottom:9px;line-height:1.4}
.inviter-card .ic-row{display:flex;align-items:center;gap:7px;font-size:13px;color:#303133;
  line-height:1.35}
.inviter-card .ic-row b{font-family:var(--font-mono);font-weight:600;font-size:13px;color:#323251;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:text}
.inviter-card .ic-copy{flex:0 0 auto;width:24px;height:24px;border-radius:6px;color:#9aa1b1;
  font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;transition:all .15s}
.inviter-card .ic-copy:hover{color:#5D87FF;background:#eef3ff}
.side-user-line{display:flex;align-items:center;gap:8px;padding:4px 6px 8px}
.side-user-line .su-ava{width:30px;height:30px;border-radius:50%;background:#5D87FF;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:0 0 auto}
.side-user-line .su-name{font-size:13px;font-weight:600;color:#303133;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-line .su-id{font-size:11px;color:#909399}
.logout-btn{width:100%;height:40px;border:1px solid var(--art-border-color);border-radius:8px;
  background:var(--art-main-bg-color);color:#646f88;font-size:14px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.logout-btn:hover{border-color:#ff4d4f;color:#ff4d4f;background:rgba(255,77,79,.06)}
.logout-btn svg{width:15px;height:15px}
/* 折叠态 64px */
body.sidebar-collapsed .app .sidebar{width:64px}
body.sidebar-collapsed .app .main{margin-left:64px}
body.sidebar-collapsed .brand-text,body.sidebar-collapsed .ngh-text,
body.sidebar-collapsed .ngh-arrow,body.sidebar-collapsed .nav-sub-item .nsi-text,
body.sidebar-collapsed .inviter-card,body.sidebar-collapsed .side-user-line .su-meta,
body.sidebar-collapsed .logout-btn .lb-text{display:none}
body.sidebar-collapsed .sidebar .brand{justify-content:center;padding:0}
body.sidebar-collapsed .sidebar nav{padding:10px 8px}
body.sidebar-collapsed .nav-group-head,body.sidebar-collapsed .nav-item{justify-content:center;padding:0}
body.sidebar-collapsed .nav-sub-item{padding:0;height:38px;justify-content:center;
  margin:1px 0;border-radius:6px}
body.sidebar-collapsed .nav-sub-item .nsi-dot{display:none}
body.sidebar-collapsed .side-user-line{justify-content:center}
body.sidebar-collapsed .logout-btn{padding:0;width:40px;margin:0 auto}
/* ≤900px:侧栏变抽屉隐藏(通用规则已做 translateX),主内容必须取消左侧偏移;
   此处同时覆盖普通态(230px)与手动折叠态(64px),否则窄屏整页横向溢出 */
@media(max-width:900px){
  .app .main,body.sidebar-collapsed .app .main{margin-left:0}
}

/* ============================================================
   顶栏:60px 单行 [汉堡|刷新|页签 pills|搜索|余额佣金胶囊|图标组]
   ============================================================ */
.app-header{background:#fff;border-bottom:1px solid var(--art-card-border);margin:0 -20px 16px;
  padding:0 20px;position:sticky;top:0;z-index:var(--z-sticky)}
.header-main{display:flex;align-items:center;gap:8px;height:60px}
.header-main .icon-btn{border:none;background:transparent;width:34px;height:34px;border-radius:6px;
  transition:background .3s,color .3s}
.header-main .icon-btn:hover{background:var(--art-hover-color);border:none;color:#5D87FF}
/* 搜索框 160×36,radius 8,右侧 Ctrl K */
.cmw-search{display:flex;align-items:center;gap:7px;height:36px;padding:0 10px;width:160px;
  flex:0 0 auto;border:1px solid var(--art-gray-400);border-radius:8px;background:#fff;
  color:#79839b;font-size:12px;cursor:pointer;transition:border-color .15s,box-shadow .2s}
.cmw-search:hover{border-color:#c0c4cc}
.cmw-search:focus-within{border-color:#5D87FF;box-shadow:0 0 0 1px #5D87FF inset}
.cmw-search svg{width:14px;height:14px;flex:0 0 auto}
.cmw-search span{white-space:nowrap;overflow:hidden}
.cmw-search kbd{margin-left:auto;font-family:var(--font-mono);font-size:11px;line-height:20px;
  height:20px;background:transparent;border:1px solid var(--art-gray-400);border-radius:4px;
  padding:0 6px;color:#79839b;opacity:.8;white-space:nowrap}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* 余额佣金胶囊:36px 高 / 9px 圆角 / 白底 1px 边 / 22×22 彩底图标 + 下方提示 */
.cwq-wrap{display:flex;flex-direction:column;align-items:center;gap:1px}
.cwq-pill{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--art-border-color);
  border-radius:9px;padding:0 10px;gap:8px;font-size:13px;height:36px;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s}
.cwq-pill:hover{border-color:#aec3ff;box-shadow:0 2px 8px rgba(37,99,235,.08)}
.cwq-pill .cq{display:inline-flex;align-items:center;gap:6px;cursor:default;white-space:nowrap}
.cwq-pill .cq-ic{width:22px;height:22px;border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.cwq-pill .cq-ic svg{width:13px;height:13px}
.cwq-pill .cq-ic.bal{background:#eff6ff;color:#2563eb}
.cwq-pill .cq-ic.com{background:#fff7ed;color:#ea580c}
.cwq-pill b{font-size:13px;color:#323251;font-variant-numeric:tabular-nums;font-weight:700}
.cwq-pill i{font-style:normal;font-size:10px;color:#9aa1b1}
.cwq-pill .cq-sep{width:1px;height:18px;background:var(--art-border-color)}
.cwq-pill .cq.clickable{cursor:pointer}
.cwq-pill .cq.clickable:hover b{color:#5D87FF}
.cwq-hint{font-size:10px;line-height:1.2;color:#9aa1b1;white-space:nowrap}
/* 多页签条(内嵌 60px 顶栏行):32px pill / 12px 字 / 选中 #eef3ff 无边框 */
.tab-strip{display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;height:100%;
  overflow-x:auto;overflow-y:hidden;border-top:none;scrollbar-width:none}
.tab-strip::-webkit-scrollbar{height:0}
.app-tab{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 12px;
  margin-right:6px;border:1px solid var(--art-card-border);border-radius:6px;background:#fff;
  font-size:12px;color:#606266;white-space:nowrap;flex:0 0 auto;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;user-select:none}
.app-tab:hover{color:#5D87FF;background:var(--art-gray-200)}
.app-tab.active{background:#eef3ff;border-color:transparent;color:#5D87FF;font-weight:600}
.app-tab .atx{display:inline-flex;width:16px;height:16px;border-radius:50%;
  align-items:center;justify-content:center;color:#909399;font-size:13px;line-height:1;
  margin-left:2px;transition:background .15s,color .15s}
.app-tab .atx:hover{background:#cedbff;color:#5D87FF}
.app-tab.home .atx{display:none}
.tab-ops{margin-left:auto;display:flex;align-items:center;gap:2px;flex:0 0 auto;padding-left:8px}
.tab-ops button{width:30px;height:30px;border-radius:5px;color:#909399;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.tab-ops button:hover{background:var(--art-gray-200);color:#5D87FF}
.topbar-title{display:none}  /* 标题改由页签承载 */

/* ---------- 页签右键/▾ 上下文菜单:140px / radius 10 / 100ms scale(.9) ---------- */
.tab-ctx-menu{position:fixed;z-index:1300;min-width:140px;width:140px;padding:5px;
  background:#fff;border:1px solid var(--art-card-border);border-radius:10px;
  box-shadow:0 6px 16px -8px #10182829,0 16px 40px -16px #10182838;
  display:none;transform-origin:top left}
.tab-ctx-menu.show{display:block;animation:ctxMenuIn .1s ease-out}
@keyframes ctxMenuIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.tab-ctx-menu .ctx-item{position:relative;display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:6px;font-size:12px;color:#383853;cursor:pointer;user-select:none;
  transition:color .15s,background .15s;white-space:nowrap;overflow:hidden}
.tab-ctx-menu .ctx-item:hover{background:var(--art-gray-200)}
.tab-ctx-menu .ctx-item.is-disabled{color:#c0c4cc;cursor:not-allowed}
.tab-ctx-menu .ctx-item.is-disabled:hover{background:transparent}
.tab-ctx-menu .ctx-item.has-line::after{content:"";position:absolute;left:0;right:0;bottom:-5px;
  height:1px;background:var(--art-gray-300)}
.tab-ctx-menu .ctx-sep{height:1px;background:var(--art-gray-300);margin:5px 0}
.tab-ctx-menu .ctx-kbd{margin-left:auto;font-size:10.5px;color:#9aa1b1}

/* ============================================================
   总览(工作台)
   ============================================================ */
.lg-welcome{background:#fff;border:1px solid #f2f4f5;border-radius:8px;padding:18px 20px;margin-bottom:14px}
.lg-welcome .lg-hi{font-size:19px;font-weight:700;color:#303133;margin-bottom:8px}
.lg-line{font-size:13px;color:#606266;line-height:1.8}
.lg-line.strong{color:#303133;font-weight:600}
.lg-docs{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px 18px}
.lg-doc{font-size:12.5px;color:#5D87FF;cursor:pointer;line-height:1.9}
.lg-doc:hover{text-decoration:underline}
/* 三张小卡 */
.mg-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.mini-card{background:#fff;border:1px solid #f2f4f5;border-radius:8px;padding:16px 18px;position:relative}
.mini-card .mc-lbl{font-size:13px;color:#909399;margin-bottom:8px}
.mini-card .mc-num{font-size:26px;font-weight:700;color:#303133;font-variant-numeric:tabular-nums;line-height:1.2}
.mini-card .mc-num .cur{font-size:15px;color:#303133;margin-right:2px}
.mini-card .mc-cmp{font-size:12px;color:#909399;margin-top:8px}
.mini-card .mc-cmp em{font-style:normal;color:#606266;font-weight:600;margin-left:4px}
.mini-card .mc-btn{margin-top:10px}
.mini-card .mc-more{position:absolute;right:16px;bottom:14px;font-size:12.5px;color:#5D87FF;cursor:pointer}
.mini-card .mc-more:hover{text-decoration:underline}
/* 总览:订单卡独占整行(7 列表格需要完整宽度),推广链接与重要通知下排各占一半;
   旧版「窄右列塞两卡」导致右侧过长、订单卡下方整片留白 */
/* min-width:0:允许网格列在窄屏收缩,宽表格交由 .table-wrap 内部横向滚动,避免整页溢出 */
.mg-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;min-width:0}
.mg-cols>*{min-width:0}
/* 卡片自带 margin-bottom 用于普通纵向排列;网格内统一由 gap 控制间距,避免叠加成 28px */
.mg-cols .mg-card{margin-bottom:0}
.mg-cols .table-wrap{max-width:100%}
.mg-cols .mg-orders{grid-column:1/-1}
.mg-card{background:#fff;border:1px solid #f2f4f5;border-radius:8px;padding:16px 18px;margin-bottom:14px;min-width:0}
.mg-card .mg-title{font-size:15px;font-weight:600;color:#303133;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.mg-card .mg-title .mg-more{font-size:12.5px;font-weight:400;color:#5D87FF;cursor:pointer}
.usage-count{font-size:12.5px;color:#909399;font-weight:400}
/* 权限/业务线行 */
.u-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f5f7fa}
.u-row:last-child{border-bottom:none}
.u-name{flex:0 0 190px;font-size:13.5px;font-weight:600;color:#303133;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-qs{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.u-q{display:flex;align-items:center;gap:5px;font-size:12px;color:#909399;min-width:0}
.u-q b{font-size:12.5px;color:#303133;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.u-q b.muted{color:#c0c4cc;font-weight:500}
/* 推广链接卡 */
.promo-top{display:flex;gap:16px}
.promo-qr{flex:0 0 120px;width:120px;height:120px;border:1px solid #ebeef5;border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.promo-qr canvas,.promo-qr img{width:112px;height:112px}
.promo-main{flex:1;min-width:0}
.promo-main .ttl{font-size:13.5px;font-weight:600;color:#303133}
.promo-main .sub{font-size:12px;color:#909399;margin:2px 0 10px;line-height:1.6}
.promo-link-row{display:flex;gap:8px;margin-bottom:8px}
.promo-link-row input{flex:1;min-width:0;height:32px;border:1px solid #dcdfe6;border-radius:6px;
  padding:0 10px;background:#f5f7fa;font-size:12px;color:#606266}
.custom-link{font-size:12.5px;color:#5D87FF;cursor:pointer}
.custom-link:hover{text-decoration:underline}
.promo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px;
  border-top:1px solid #f5f7fa;padding-top:12px}
.promo-stats .sl{font-size:12px;color:#909399;margin-bottom:3px}
.promo-stats .sv{font-size:19px;font-weight:700;color:#303133;font-variant-numeric:tabular-nums}
.promo-stats .sv.money{color:#ff4d4f}
.promo-stats .sv span{font-size:12px;color:#909399;font-weight:400;margin-left:2px}
/* 重要通知 */
.n-item{padding:11px 0;border-bottom:1px solid #f5f7fa;cursor:pointer}
.n-item:last-child{border-bottom:none}
.n-item .n-t{font-size:13.5px;font-weight:600;color:#303133;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-item .n-c{font-size:12px;color:#909399;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.n-item .n-foot{display:flex;align-items:center;gap:8px;margin-top:5px}
.n-lv{font-size:11px;font-style:normal;font-weight:600;border-radius:4px;padding:1px 7px;flex:0 0 auto}
.n-lv.lv-blue{background:#eef3ff;color:#5D87FF}
.n-lv.lv-green{background:#e7f7ed;color:#13deb9}
.n-time{font-size:11.5px;color:#c0c4cc;margin-left:auto}
/* 即将到期/最近订单页签 */
.o-tabs{display:flex;gap:4px;margin-bottom:12px}
.o-tab{height:30px;padding:0 16px;border:1px solid #dcdfe6;border-radius:6px 6px 0 0;
  background:#fff;color:#606266;font-size:13px;border-bottom:none;position:relative;top:1px}
.o-tab.on{color:#5D87FF;border-color:#cedbff;background:#eef3ff;font-weight:600}
/* 页脚版权 */
.app-footer{text-align:center;color:#c0c4cc;font-size:12px;padding:18px 0 6px;line-height:1.9}
.app-footer a{color:#c0c4cc}

/* ============================================================
   子页通用:页头/分段Tab/步骤卡/两列布局
   ============================================================ */
.page-head{margin:2px 0 14px}
.page-head h2{font-size:18px;font-weight:700;color:#303133;margin-bottom:4px}
.page-head p{font-size:12.5px;color:#909399;line-height:1.7}
.seg-tabs{display:flex;gap:0;border-bottom:1px solid #e4e7ed;margin-bottom:14px}
.seg-tab{padding:9px 18px;font-size:14px;color:#606266;font-weight:500;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;background:none}
.seg-tab:hover{color:#5D87FF}
.seg-tab.active{color:#5D87FF;border-bottom-color:#5D87FF;font-weight:600}
/* 隐藏旧的内嵌子页签条(已拆为侧栏独立路由) */
#nodeTabs,#view-wallet .sub-tabs-inner,#view-agent .sub-tabs-inner{display:none!important}
/* 两步骤卡片(导入页等) */
.step-cards{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start}
.import-drop{border:1.5px dashed #d0d7de;border-radius:8px;background:#fafbfc;padding:26px 18px;
  text-align:center;color:#909399;font-size:13px;cursor:pointer;margin-bottom:12px;transition:all .2s}
.import-drop:hover{border-color:#5D87FF;color:#5D87FF;background:#eef3ff}
.help-li{font-size:13px;color:#606266;line-height:2.1;padding-left:18px;position:relative}
.help-li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:#5D87FF}

/* ============================================================
   账户充值
   ============================================================ */
.rc-wrap{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.rc-stepline{display:flex;align-items:center;color:#909399;font-size:13px;margin-bottom:16px}
.rc-stepline b{color:#303133;font-weight:600}
.rc-stepline .rs-line{flex:1;height:1px;background:#e4e7ed;margin:0 12px}
.rc-amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.rc-opt{position:relative;height:52px;border:1.5px solid #dcdfe6;border-radius:8px;background:#fff;
  color:#303133;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s}
.rc-opt:hover{border-color:#5D87FF}
.rc-opt.on{border-color:#5D87FF;background:#eef3ff;color:#5D87FF}
.rc-opt .rc-tag{position:absolute;top:-1px;right:-1px;font-size:10px;font-weight:600;
  border-radius:0 7px 0 7px;padding:1px 7px;color:#fff;background:#ff4d4f}
.rc-opt .rc-tag.rec{background:#ffae1f}
.rc-custom-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;color:#606266}
.rc-custom-row input{width:160px;height:36px;border:1.5px solid #dcdfe6;border-radius:6px;padding:0 12px}
.pay-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pay-opt{display:flex;align-items:center;gap:10px;height:56px;border:1.5px solid #dcdfe6;
  border-radius:8px;padding:0 16px;background:#fff;cursor:pointer;font-size:14px;color:#303133;position:relative}
.pay-opt:hover{border-color:#5D87FF}
.pay-opt.on{border-color:#5D87FF;background:#eef3ff}
.pay-opt .po-ic{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:13px;font-weight:700;flex:0 0 auto}
.pay-opt .po-ic.ali{background:#1677ff}
.pay-opt .po-ic.wx{background:#07c160}
.pay-opt .po-rec{font-size:11px;color:#ff4d4f;margin-left:auto}
.pay-opt .po-radio{width:15px;height:15px;border-radius:50%;border:2px solid #c0c4cc;margin-left:auto}
.pay-opt .po-rec+.po-radio{margin-left:8px}
.pay-opt.on .po-radio{border-color:#5D87FF;border-width:5px}
.order-summary{background:#f5f7fa;border-radius:8px;padding:16px 18px}
.order-summary .os-row{display:flex;justify-content:space-between;font-size:13px;color:#606266;
  padding:7px 0}
.order-summary .os-row b{color:#303133;font-weight:600;font-variant-numeric:tabular-nums}
.order-summary .os-total{border-top:1px solid #e4e7ed;margin-top:6px;padding-top:12px;
  font-size:15px;color:#303133}
.order-summary .os-total b{color:#ff4d4f;font-size:20px}
.rc-agree{font-size:12px;color:#909399;margin-top:12px;line-height:1.8}

/* ============================================================
   分销中心
   ============================================================ */
/* 概览推广工具 */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.tool-item{display:flex;align-items:center;gap:10px;border:1px solid #ebeef5;border-radius:8px;
  padding:12px 14px;cursor:pointer;background:#fff}
.tool-item:hover{border-color:#5D87FF;background:#eef3ff}
.tool-item .ti-ic{width:34px;height:34px;border-radius:8px;background:#eef3ff;color:#5D87FF;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tool-item b{font-size:13.5px;color:#303133;display:block}
.tool-item span{font-size:12px;color:#909399}
/* 业务线额度条(推广链接tab) */
.line-quota-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f5f7fa;
  font-size:12.5px}
.line-quota-row .lqr-name{flex:0 0 200px;color:#303133;font-weight:600}
.line-quota-row .lqr-bar{flex:1;height:7px;background:#f0f2f5;border-radius:99px;overflow:hidden;max-width:260px}
.line-quota-row .lqr-fill{height:100%;background:#5D87FF;border-radius:99px}
.line-quota-row .lqr-text{flex:0 0 auto;color:#909399}
/* 额度次数管理 */
.quota-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.quota-card{border:1px solid #ebeef5;border-radius:8px;padding:14px 16px;background:#fff}
.quota-card .qc-name{font-size:14px;font-weight:600;color:#303133;margin-bottom:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qc-meter{margin-bottom:8px}
.qc-meter .qcm-lbl{display:flex;justify-content:space-between;font-size:12px;color:#909399;margin-bottom:4px}
.qc-meter .qcm-lbl b{color:#303133;font-variant-numeric:tabular-nums}
.qc-bar{height:7px;background:#f0f2f5;border-radius:99px;overflow:hidden}
.qc-bar i{display:block;height:100%;background:#5D87FF;border-radius:99px}
.qc-bar i.warn{background:#ffae1f}
.qc-bar i.danger{background:#ff4d4f}
/* 下级注册两步 */
.reg-quota-box{border:1px solid #ebeef5;border-radius:8px;overflow:hidden}
.reg-quota-box table th,.reg-quota-box table td{white-space:nowrap}
.reg-quota-box input[type=number]{width:92px;padding:6px 9px;border:1px solid #dcdfe6;
  border-radius:6px;font-size:13px}
.reg-quota-actions{display:flex;gap:8px;margin:10px 0}
/* 概念说明 alert */
.info-alert{display:flex;gap:9px;align-items:flex-start;background:#eef3ff;border:1px solid #cedbff;
  color:#4a6ccc;border-radius:8px;padding:10px 14px;font-size:12.5px;line-height:1.7;margin-bottom:14px}
.info-alert.warn{background:#fdf6ec;border-color:#faecd8;color:#996b20}
.info-alert svg{flex:0 0 auto;margin-top:3px}

/* ============================================================
   个人中心
   ============================================================ */
.ac-layout{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
.ac-profile{text-align:center;padding:24px 20px}
.ac-ava{width:64px;height:64px;border-radius:50%;background:#5D87FF;color:#fff;font-size:26px;
  font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.ac-profile h3{font-size:17px;justify-content:center;margin-bottom:2px}
.ac-tag{display:inline-block;font-size:11px;color:#909399;background:#f5f7fa;border-radius:4px;
  padding:2px 10px;margin-bottom:8px}
.ac-phone{font-size:13px;color:#909399;margin-bottom:4px}
.ac-realname{font-size:12.5px;color:#ffae1f;cursor:pointer;margin:6px 0 14px}
.ac-realname.done{color:#13deb9;cursor:default}
.ac-balance{background:#f5f7fa;border-radius:8px;padding:12px;text-align:left;margin-bottom:12px}
.ac-balance .ab-lbl{font-size:12px;color:#909399}
.ac-balance .ab-num{font-size:21px;font-weight:700;color:#303133;margin:2px 0 6px}
.ac-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.ac-stat{background:#fff;border:1px solid #f2f4f5;border-radius:8px;padding:13px 10px;text-align:center}
.ac-stat .as-num{font-size:19px;font-weight:700;color:#303133}
.ac-stat .as-lbl{font-size:12px;color:#909399;margin-top:2px}
.sec-list .sec-row{display:flex;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid #f5f7fa;cursor:pointer}
.sec-list .sec-row:last-child{border-bottom:none}
.sec-list .sec-name{font-size:14px;color:#303133;font-weight:500}
.sec-list .sec-state{margin-left:auto;font-size:13px;color:#909399}
.sec-list .sec-state.ok{color:#13deb9}
.sec-list .sec-go{color:#c0c4cc;font-size:16px}
.sec-pane{display:none}
.sec-pane.show{display:block}
.sec-back{margin-bottom:12px}

/* ============================================================
   工单 IM 双栏
   ============================================================ */
.tk-layout{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:stretch;
  min-height:calc(100vh - 170px)}
.tk-list-card,.tk-chat-card{background:#fff;border:1px solid #f2f4f5;border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;margin-bottom:0}
.tk-list-head{padding:12px 14px;border-bottom:1px solid #f0f2f5}
.tk-status-tabs{display:flex;gap:6px;margin-top:10px}
.tk-status-btn{padding:4px 12px;border-radius:999px;font-size:12px;color:#606266;
  background:#f5f7fa;border:1px solid transparent;cursor:pointer}
.tk-status-btn.active{background:#eef3ff;color:#5D87FF;font-weight:600}
.tk-search{margin:10px 14px 0}
.tk-search input{width:100%;height:32px;border:1px solid #dcdfe6;border-radius:6px;padding:0 10px}
.tk-session-list{flex:1;overflow-y:auto;padding:6px}
.tk-session{padding:11px 12px;border-radius:8px;cursor:pointer;margin-bottom:2px}
.tk-session:hover{background:#f5f7fa}
.tk-session.active{background:#eef3ff}
.tk-session .ts-top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.tk-session .ts-subj{font-size:13.5px;font-weight:600;color:#303133;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.tk-session .ts-time{font-size:11px;color:#c0c4cc;flex:0 0 auto}
.tk-session .ts-last{font-size:12px;color:#909399;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tk-chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#c0c4cc;font-size:13.5px;gap:10px}
.tk-chat-head{padding:14px 18px;border-bottom:1px solid #f0f2f5;font-size:15px;font-weight:600;color:#303133}
.tk-chat-body{flex:1;overflow-y:auto;padding:18px;background:#fafbfc}
.tk-chat-input{border-top:1px solid #f0f2f5;padding:12px 14px;background:#fff}
.tk-chat-input textarea{width:100%;min-height:74px;border:1px solid #dcdfe6;border-radius:6px;
  padding:10px 12px;resize:vertical}

/* ============================================================
   使用指南
   ============================================================ */
.flow-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.flow-step{background:#fff;border:1px solid #f2f4f5;border-radius:8px;padding:16px;position:relative}
.flow-step .fs-no{width:26px;height:26px;border-radius:50%;background:#eef3ff;color:#5D87FF;
  font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.flow-step b{font-size:14px;color:#303133;display:block;margin-bottom:4px}
.flow-step span{font-size:12.5px;color:#909399;line-height:1.7}
.guide-cat-badges{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.guide-badge{padding:5px 16px;border-radius:999px;font-size:13px;color:#606266;background:#fff;
  border:1px solid #dcdfe6;cursor:pointer}
.guide-badge:hover{border-color:#5D87FF;color:#5D87FF}
.guide-badge.active{background:#5D87FF;border-color:#5D87FF;color:#fff;font-weight:600}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.dl-card{display:flex;align-items:center;gap:12px;border:1px solid #ebeef5;border-radius:8px;padding:14px 16px}
.dl-card .dl-ic{width:42px;height:42px;border-radius:10px;background:#eef3ff;color:#5D87FF;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:20px}
.dl-card b{font-size:14px;color:#303133;display:block}
.dl-card span{font-size:12px;color:#909399}
.dl-card button{margin-left:auto}

/* ============================================================
   SK5 线路检测
   ============================================================ */
.check-card-title{font-size:15px;font-weight:600;color:#303133;margin-bottom:4px}
.check-card-sub{font-size:12.5px;color:#909399;margin-bottom:14px;line-height:1.7}
.check-foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.check-count{margin-left:auto;font-size:12.5px;color:#909399}
.check-count b{color:#5D87FF}
.check-result-actions{display:flex;gap:8px;margin-bottom:12px}

/* ============================================================
   API 提取链接(4 步卡)
   ============================================================ */
.api-layout{display:grid;grid-template-columns:1fr 280px;gap:14px;align-items:start}
.api-step-num{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#5D87FF;color:#fff;
  font-size:12px;align-items:center;justify-content:center;margin-right:8px}
.api-order-list{max-height:270px;overflow-y:auto;border:1px solid #ebeef5;border-radius:8px}
.api-order-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid #f5f7fa;
  font-size:12.5px;cursor:pointer}
.api-order-row:last-child{border-bottom:none}
.api-order-row:hover{background:#fafbfc}
.api-order-row input{accent-color:#5D87FF}
.api-order-row .aor-no{flex:0 0 150px;color:#303133;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.api-order-row .aor-meta{color:#909399;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.api-order-row .aor-qty{flex:0 0 auto;color:#606266}
.api-summary{background:#eef3ff;color:#4a6ccc;border-radius:6px;padding:8px 12px;font-size:12.5px;margin-top:10px}
.api-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.api-form-grid .af-item label{display:block;font-size:12.5px;color:#606266;margin-bottom:5px;font-weight:600}
.api-form-grid select,.api-form-grid input[type=text],.api-form-grid input[type=number]{
  width:100%;height:34px;border:1px solid #dcdfe6;border-radius:6px;padding:0 10px;background:#fff}
.gen-link-box{display:flex;gap:8px;align-items:center;
  background:#0f172a;border-radius:6px;padding:10px 12px;margin:10px 0}
.gen-link-box code{flex:1;color:#7dd3fc;font-family:var(--font-mono);font-size:12px;
  word-break:break-all;white-space:normal}
.side-help .help-li{padding-left:0}
.side-help .help-li::before{display:none}
.side-help .sh-no{display:inline-flex;width:21px;height:21px;border-radius:50%;background:#eef3ff;
  color:#5D87FF;font-size:12px;align-items:center;justify-content:center;margin-right:8px}
.side-help .sh-row{display:flex;gap:4px;font-size:13px;color:#606266;line-height:1.8;margin-bottom:10px}

/* ---------- 通知面板:完善设置 + 重要通知 两组 ---------- */
.notify-panel{top:calc(var(--header-h) + 8px);right:20px;width:360px;border-radius:12px;
  border:1px solid var(--art-card-border);
  box-shadow:0 6px 16px -8px #10182829,0 16px 40px -16px #10182838;max-height:min(72vh,580px);
  overflow-y:auto}
.notify-panel .np-head{padding:14px 16px 12px;font-size:15px;font-weight:700}
.notify-panel .np-sec{font-size:12px;font-weight:700;color:#79839b;padding:12px 16px 6px}
.notify-panel .np-setup-item{padding:10px 8px;margin:0 8px;border-radius:10px;gap:11px;font-size:13px}
.notify-panel .np-setup-item:hover{background:var(--art-gray-100)}
.notify-panel .np-item{padding:10px 8px;margin:0 8px;border-radius:10px;gap:11px}
.notify-panel .np-item.unread{background:#eef3ff}
.np-sec{padding:12px 16px 6px;font-size:12.5px;font-weight:600;color:#909399}
.np-setup-item{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:13px;color:#303133}
.np-setup-item .ns-dot{width:6px;height:6px;border-radius:50%;background:#ffae1f;flex:0 0 auto}
.np-setup-item.done .ns-dot{background:#13deb9}
.np-setup-item.done{color:#909399}
.np-setup-item.done a{color:#c0c4cc;cursor:default}
.np-setup-item a{margin-left:auto;font-size:12.5px;color:#5D87FF;cursor:pointer;white-space:nowrap}
.np-divider{height:1px;background:#f0f2f5;margin:6px 0}

/* ============================================================
   响应式(窄屏两列收成一列)
   ============================================================ */
@media(max-width:1200px){
  .rc-wrap,.step-cards,.api-layout,.ac-layout,.tk-layout{grid-template-columns:1fr}
  .tk-layout{min-height:0}
}
@media(max-width:900px){
  /* 侧栏收起后总览三卡全部纵向堆叠(订单整行卡随单列自然占满) */
  .mg-cols{grid-template-columns:1fr}
  .mg-row3,.ac-stats{grid-template-columns:1fr 1fr}
  .u-qs{grid-template-columns:repeat(2,1fr)}
  .u-name{flex-basis:100%}
  .u-row{flex-wrap:wrap}
  .rc-amount-grid{grid-template-columns:repeat(2,1fr)}
  .flow-4{grid-template-columns:repeat(2,1fr)}
  .tool-grid{grid-template-columns:1fr}
  .cmw-search{min-width:0}
  .cmw-search span{display:none}
}





/* ============================================================
   20260928 通用组件视觉对齐(规范第 3 章)
   ------------------------------------------------------------
   按钮 / 输入框 / 卡片 / 标签 / 表格 / 分页 / 弹窗 / Toast /
   Tabs / 步骤条 / 徽标 / 空状态,均按芒果云实测参数改写。
   ============================================================ */

/* ---------- 3.1 按钮:radius 4px / 过渡 .1s / active 深色 ---------- */
.btn-primary,.btn-blue,.btn-outline,.btn-danger,.btn-sm{
  border-radius:4px;font-weight:500;
  transition:background .1s,border-color .1s,color .1s,transform .1s}
.btn-primary:hover,.btn-blue:hover{background:#8dabff}
.btn-primary:active,.btn-blue:active{background:#4a6ccc;transform:none}
.btn-outline{border-color:#dcdfe6;color:#606266;background:#fff}
.btn-outline:hover{border-color:#5D87FF;color:#5D87FF;background:#eef3ff}
.btn-outline:active{background:#eef3ff;border-color:#4a6ccc;color:#4a6ccc}
.btn-danger{background:#ffeded;border:1px solid rgb(255,166,167);color:#ff4d4f}
.btn-danger:hover{background:#ff4d4f;color:#fff;border-color:#ff4d4f}
.btn-danger:active{background:rgb(204,62,63);border-color:rgb(204,62,63)}
.btn-sm{padding:5px 11px;border-radius:4px;font-size:12.5px}
/* 登录页主按钮保持 8px 圆角(规范 §4.1) */
.auth-box .btn-primary{border-radius:8px}

/* ---------- 3.2 输入框 / 下拉 / 筛选控件:radius 4px ---------- */
.field input,.field select,.field textarea,
.filter-bar select,.filter-bar input,
.promo-link-row input,.rc-custom-row input,
.tk-search input,.api-form-grid select,
.api-form-grid input[type=text],.api-form-grid input[type=number]{border-radius:4px}
input:hover,select:hover,textarea:hover{border-color:#c0c4cc}
input:focus,select:focus,textarea:focus{border-color:#5D87FF!important;
  box-shadow:0 0 0 2px rgba(93,135,255,.14)!important}
input::placeholder,textarea::placeholder{color:#a8abb2}

/* ---------- 3.3 卡片:8px 圆角 + 1px rgba(0,0,0,.08) + 轻阴影 ---------- */
.card,.stat-card,.mini-card,.mg-card,.notice-card,.line-panel,.project-card{
  border-color:var(--art-card-border)}
.stat-card,.notice-card{box-shadow:var(--shadow-card)}
.stat-card{transition:transform .18s ease,box-shadow .18s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);
  border-color:var(--art-card-border)}
.card,.mini-card,.mg-card{border-radius:8px}

/* ---------- 3.4 标签:light 底 + 同色字,radius 4px ---------- */
.tag{border-radius:4px;padding:2px 9px;font-weight:500}
.tag-green{background:var(--success-light);color:var(--success)}
.tag-red{background:var(--danger-light);color:#ff4d4f}
.tag-blue{background:#eef3ff;color:#5D87FF}
.tag-orange{background:var(--warning-light);color:var(--warning)}
.tag-cyan{background:#e0f2fe;color:#0369a1}

/* ---------- 3.5 表格:白表头 #909399 / 行悬停 #f5f7fa / 边 #ebeef5 ---------- */
table{font-size:14px}
th{background:#fff;color:#909399;font-weight:500;font-size:13px;letter-spacing:0;
  border-bottom:1px solid #ebeef5}
td{padding:8px 12px;line-height:23px;border-bottom:1px solid #ebeef5;color:#606266}
th{padding:9px 12px}
tbody tr:last-child td{border-bottom:none}
tr:hover td{background:#f5f7fa}
.table-wrap table td:last-child,.table-wrap table th:last-child{white-space:nowrap}

/* ---------- 3.6 分页:32px 按钮 / radius 2 / 选中实底主色 ---------- */
.pager{margin-top:13px;gap:8px}
.pager-info{font-size:12.5px;color:#909399}
.pager button{height:32px;min-width:32px;padding:0 10px;border-radius:2px;font-size:13px;
  font-weight:500;transition:all .12s}
.pager .btn-outline{background:transparent;border:1px solid var(--art-gray-300);color:#606266}
.pager .btn-outline:hover{border-color:#5D87FF;color:#5D87FF;background:#eef3ff}
.pager .btn-blue,.pager .btn-blue:hover{background:#5D87FF;border:1px solid #5D87FF;color:#fff;
  font-weight:700}
.pager .btn-blue:active{background:#4a6ccc;border-color:#4a6ccc}

/* ============================================================
   20260929 业务视图内部布局对齐芒果云(第二波)
   ============================================================ */

/* ---------- 指标条 .stat-strip ---------- */
.stat-strip{
  display:flex;align-items:center;padding:13px 6px;border-radius:12px;
  background:#fff;border:1px solid var(--art-card-border);
  box-shadow:var(--shadow-card);flex-shrink:0;overflow-x:auto;margin-bottom:12px}
.stat-strip .metric{
  flex:1;min-width:150px;display:flex;align-items:center;gap:12px;padding:0 18px}
.stat-strip .metric:not(:last-child){border-right:1px solid var(--art-card-border)}
.stat-strip .m-ico{
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:20px;flex-shrink:0}
.stat-strip .m-ico.blue{color:#3b82f6;background:#3b82f61a}
.stat-strip .m-ico.orange{color:#f0a020;background:#f0a0201f}
.stat-strip .m-ico.red{color:#ef4444;background:#ef44441f}
.stat-strip .m-ico.green{color:#10b981;background:#10b9811f}
.stat-strip .m-ico.purple{color:#8b5cf6;background:#8b5cf61f}
.stat-strip .m-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.stat-strip .m-lbl{font-size:12.5px;color:var(--art-gray-500);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.stat-strip .m-val{font-size:21px;font-weight:700;color:var(--art-gray-900);
  font-variant-numeric:tabular-nums;line-height:1.2}
.stat-strip .m-val .m-sub{font-size:12px;font-weight:600;color:var(--art-gray-400);
  margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;
  display:inline-block;vertical-align:middle}
@media(max-width:900px){
  .stat-strip .metric{min-width:130px;padding:0 10px}
  .stat-strip .m-val{font-size:17px}
}

/* ---------- 表格卡 + 筛选 6 列 ---------- */
.card.art-table-card{
  background:#fff;border:1px solid var(--art-card-border);border-radius:8px;
  padding:16px 18px;margin-bottom:14px;box-shadow:none}
.card-divider{height:1px;margin:0 0 6px;background:var(--art-border-color)}
.art-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 10px}
.art-actions .btn-sm{min-height:32px}
.mg-filter{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px;
  padding:4px 0 0;align-items:end}
.mg-filter .ff-item{margin-bottom:12px;min-width:0}
.mg-filter .ff-item label,
.mg-filter .ff-item label.chk{
  display:block;font-size:13px;font-weight:500;color:var(--art-gray-700);
  margin-bottom:5px;cursor:pointer}
.mg-filter .ff-item label.chk{display:inline-flex;align-items:center;gap:6px}
.mg-filter .ff-item input,
.mg-filter .ff-item select{
  width:100%;height:32px;border:1px solid #dcdfe6;border-radius:4px;
  background:#fff;color:#303133;padding:0 10px;font-size:13px}
.mg-filter .ff-item input[type=checkbox]{width:15px;height:15px;accent-color:#5D87FF}
.mg-filter .ff-check{display:flex;align-items:flex-end;margin-bottom:12px}
.mg-filter .ff-actions{
  grid-column:span 2;display:flex;justify-content:flex-end;align-items:flex-end;
  gap:8px;margin-bottom:12px;flex-wrap:wrap}
.mg-filter .ff-actions .btn-primary,
.mg-filter .ff-actions .btn-blue{min-height:32px}
.mg-filter .ff-actions .btn-sm{min-height:32px;padding:0 14px}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px}
.pager.right{justify-content:flex-end}
.pager .pager-info{font-size:12.5px;color:#909399}
@media(max-width:1200px){
  .mg-filter{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mg-filter .ff-actions{grid-column:span 2}
}
@media(max-width:900px){
  .mg-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-filter .ff-actions{grid-column:span 2;justify-content:flex-start}
}
@media(max-width:560px){
  .mg-filter{grid-template-columns:1fr}
  .mg-filter .ff-actions{grid-column:span 1}
}

/* ---------- 总览:欢迎语 + 合规横幅 + .ov ---------- */
.view#view-dashboard .hd{margin:2px 0 10px}
.view#view-dashboard .welc{font-size:15px;font-weight:500;color:var(--art-gray-800);margin:0}
.view#view-dashboard .legal{
  display:flex;gap:12px;padding:12px 18px;border-radius:10px;margin-bottom:14px;
  background:var(--primary-light-9);border:1px solid var(--primary-light-7)}
.view#view-dashboard .legal .lg-ico{
  width:30px;height:30px;border-radius:9px;color:#5D87FF;background:#ffffffb3;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.view#view-dashboard .legal .lg-body{flex:1;min-width:0}
.view#view-dashboard .legal .lg-line{font-size:12.5px;line-height:1.8;color:var(--art-gray-700);margin:0}
.view#view-dashboard .legal .lg-line.strong{font-weight:500;color:var(--art-gray-800)}
.view#view-dashboard .legal .lg-docs{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px}
.view#view-dashboard .legal .lg-doc{font-size:12.5px;color:#5D87FF;font-weight:500;white-space:nowrap}
/* 上排三张统计卡(余额/下级/佣金),「我的权限」卡独占下一整行;
   旧版四列同行时,权限卡内 8 个业务线只能排 2 列 4 行,会把整行卡片撑高。
   min-width:0:打通从主区到业务线网格的收缩链,防止窄屏整页横向溢出 */
.app .main{min-width:0}
.view#view-dashboard{min-width:0}
.ov{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-bottom:16px;min-width:0}
.ov .card{
  min-height:162px;min-width:0;border-radius:10px;background:#fff;border:1px solid var(--art-card-border);
  box-shadow:var(--shadow-card);margin-bottom:0;padding:0;position:relative}
.ov .card.pad{padding:18px 20px;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
.ov .card.pad:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.ov .card.bal{
  background:var(--primary);border:none;
  box-shadow:0 8px 20px -10px #3b6ef580;padding:18px 20px;color:#fff}
.ov .card.bal .mc-lbl{color:rgba(255,255,255,.85);font-size:13px;margin-bottom:8px}
.ov .card.bal .mc-num,.ov .card.bal .amt{font-size:32px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.2}
.ov .card.bal .cur{font-size:19px;margin-right:2px}
.ov .card.bal .rc{
  margin-top:auto;align-self:flex-start;height:36px;padding:0 20px;border-radius:9px;
  background:#fff;color:#5D87FF;font-size:13px;font-weight:600;cursor:pointer;
  transition:opacity .15s,transform .15s;border:none}
.ov .card.bal .rc:hover{opacity:.92}
.ov .card.bal .rc:active{transform:scale(.97)}
.ov .card .mc-lbl{font-size:13px;color:var(--art-gray-600);margin-bottom:8px}
.ov .card .mc-num{font-size:27px;font-weight:700;color:var(--art-gray-900);
  font-variant-numeric:tabular-nums;line-height:1.2;margin-top:4px}
.ov .card .mc-num .cur{font-size:15px;color:var(--art-gray-600);margin-right:2px}
.ov .card .mc-cmp{font-size:12px;color:var(--art-gray-400);margin-top:8px}
.ov .card .mc-cmp em{font-style:normal;color:var(--art-gray-700);font-weight:600;margin-left:4px}
.ov .card .mc-more{margin-top:auto;align-self:flex-end;font-size:12px;color:#5D87FF;cursor:pointer}
/* 业务线卡独占整行:内部业务线网格可排 4 列 × 2 行,高度紧凑 */
.ov .card.usage{grid-column:1/-1;padding:18px 22px}
.ov .card.usage .mg-title{margin-bottom:12px}
.ov .card.usage .usage-count{
  padding:3px 8px;border-radius:999px;background:#3b82f614;color:#5D87FF;
  font-size:12px;font-weight:600;margin-left:auto}
/* 桌面端固定 4 列:8 个业务线整齐排成 4×2,避免 auto-fit 在超宽卡片里排成 5+3 */
.usage .u-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  row-gap:18px;column-gap:16px;min-width:0}
.usage .u-cell{min-width:0}
.usage .u-line{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.usage .u-line .u-name{font-size:13.5px;font-weight:600;color:var(--art-gray-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.usage .u-line .usage-count{margin-left:0;flex:0 0 auto}
.usage .u-ico{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.usage .u-ico-c0{background:#3b82f6}.usage .u-ico-c1{background:#10b981}
.usage .u-ico-c2{background:#f0a020}.usage .u-ico-c3{background:#8b5cf6}
.usage .u-kvs{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.usage .u-q{display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:12px;color:var(--art-gray-400);min-width:0}
.usage .u-q b{font-size:12.5px;color:var(--art-gray-900);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.usage .u-q b.muted{color:var(--art-gray-400);font-weight:500}
@media(max-width:1200px){
  /* 平板宽度仍保持三统计卡一排;宽度不足时等比收缩不折行 */
  .ov{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  /* 移动端外壳侧栏收起后,统计卡纵向堆叠,业务线卡整行显示 */
  .ov{grid-template-columns:1fr}
  /* 平板宽度业务线按可用宽度自适应 3-4 列 */
  .usage .u-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media(max-width:700px){
  /* 窄屏下业务线单元格强制 2 列,避免 8 行纵向过长;指标竖排保证可读 */
  .usage .u-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:14px}
  .usage .u-kvs{grid-template-columns:1fr}
  /* 工作台表格列多,窄屏给表格保底宽度由 .table-wrap 内部横滑,
     避免业务线等长文本被压成逐字竖排(仅作用于总览两个表) */
  #mgRecentOrders table{min-width:600px}
  #mgExpiring table{min-width:480px}
}

/* ---------- 节点选购 ---------- */
.shop-project-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.shop-project-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.shop-project-grid{grid-template-columns:repeat(4,1fr)}}
.proj-card{
  min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;border:1.5px dashed var(--art-border-color);border-radius:10px;
  background:#fff;cursor:pointer;text-align:left;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.proj-card:hover{border-color:#5D87FF;box-shadow:0 4px 14px #00000014;transform:translateY(-2px)}
.proj-card.nostock{opacity:.7}
.proj-card .p-name{font-size:14px;font-weight:600;color:var(--art-gray-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.proj-card .pj-dev{font-style:normal;font-size:11px;color:#9aa1b1;margin-left:4px}
.proj-card .pj-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.proj-card .p-tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px}
.proj-card .p-tag.has{background:#dcfce7;color:#16a34a}
.proj-card .p-tag.no{background:var(--art-gray-100);color:#9ca3af}
.proj-card .p-tag.hot{background:#ffedd5;color:#c2410c}
.proj-card .p-tag.instant{background:#e0e7ff;color:#4338ca}
#spLetters{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:12px;min-height:28px}
.alpha-btn{
  width:30px;height:28px;font-size:13px;font-weight:700;color:var(--art-gray-500);
  border:1px dashed var(--art-border-color);border-radius:8px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s,border-color .12s,background .12s}
.alpha-btn:hover,.alpha-btn.active{color:#5D87FF;border-color:var(--primary-light-5);
  background:var(--primary-light-9);border-style:solid}
.shop-node-card.node-card{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:11px 12px;
  background:#fff;border:1.5px dashed var(--art-border-color);border-radius:12px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.shop-node-card.node-card:hover{border-color:#5D87FF;box-shadow:0 8px 22px #1f29371a;
  transform:translateY(-2px)}
.shop-node-card.node-card.selected,
.shop-node-card.node-card.active{
  border-color:#5D87FF;box-shadow:0 0 0 1.5px #5D87FF inset,0 8px 22px #3b6ef524}
.shop-node-card.node-card .stock-bar{height:3px;border-radius:3px;background:var(--art-gray-100);
  overflow:hidden;margin-bottom:2px}
.shop-node-card.node-card .stock-bar .fill{display:block;height:100%;border-radius:3px;
  transition:width .3s}
.shop-node-card.node-card .stock-bar .fill.s0{background:#d1d5db}
.shop-node-card.node-card .stock-bar .fill.slow{background:#f59e0b}
.shop-node-card.node-card .stock-bar .fill.sok{background:#22c55e}
.biz-notice{
  height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;
  border:1px solid var(--primary-light-5);background:var(--primary-light-9);
  border-radius:6px;overflow:hidden}
.biz-notice .biz-notice__tag{font-size:12px;font-weight:700;color:#5D87FF;white-space:nowrap}
.biz-notice .biz-notice__text{
  font-size:13px;font-weight:600;color:var(--art-gray-800);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 购买/节点页常驻操作提示条(对齐芒果云) */
.flow-tip{
  display:flex;gap:9px;align-items:flex-start;
  background:#eef3ff;border:1px solid #cedbff;color:#4a6ccc;
  border-radius:8px;padding:10px 14px;font-size:12.5px;line-height:1.7;margin-bottom:12px}
.flow-tip svg{flex:0 0 auto;margin-top:3px}
.flow-tip__tag{font-weight:700;white-space:nowrap;margin-top:1px}
.flow-tip__list{margin:0;padding-left:0;list-style:none}
.flow-tip__list li{position:relative;padding-left:12px}
.flow-tip__list li::before{content:"·";position:absolute;left:2px;font-weight:700}
.shop-orderbar#shopOrderBar{
  position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;padding:12px 22px;background:#fff;border:1.5px solid var(--art-border-color);
  border-radius:14px;box-shadow:0 -3px 18px #00000014;margin-top:10px}
.shop-orderbar#shopOrderBar .sob-left{display:flex;align-items:center;gap:14px;font-size:14px;
  color:var(--art-gray-700)}
.shop-orderbar#shopOrderBar .sob-left b{font-size:16px}
.shop-orderbar#shopOrderBar .sob-amount b{color:#ff4d4f}
.shop-orderbar#shopOrderBar .sob-balance{font-size:12px;color:var(--art-gray-400)}
.shop-orderbar#shopOrderBar .sob-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.shop-orderbar#shopOrderBar .sob-fields input,
.shop-orderbar#shopOrderBar .sob-fields select{
  height:32px;border:1px solid #dcdfe6;border-radius:4px;padding:0 10px;font-size:13px;background:#fff}
.shop-orderbar#shopOrderBar .sob-submit{margin-left:auto;font-weight:700;padding:0 28px;height:40px}

/* ---------- 充值 rc-board ---------- */
.rc-board{
  background:#fff;border:1px solid var(--art-card-border);border-radius:8px;
  overflow:hidden;margin-bottom:14px}
.rc-board .rc-head{
  padding:16px 22px;border-bottom:1px solid var(--art-border-color);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.rc-board .rc-head .head-meta{display:flex;align-items:center;gap:12px}
.rc-board .rc-head .head-ic{
  width:36px;height:36px;border-radius:10px;background:var(--primary-light-9);
  color:#5D87FF;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rc-board .rc-head h2{font-size:18px;font-weight:700;color:#303133;margin:0}
.rc-board .rc-head p{font-size:12.5px;color:#909399;margin:2px 0 0}
.rc-board .rc-steps{
  display:flex;justify-content:center;align-items:center;gap:14px;padding:20px 26px;
  border-bottom:1px solid var(--art-border-color)}
.rc-board .rc-steps .step{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--art-gray-500)}
.rc-board .rc-steps .step .num{
  width:24px;height:24px;border-radius:50%;font-size:13px;font-style:normal;
  background:var(--art-gray-200);color:var(--art-gray-600);
  display:inline-flex;align-items:center;justify-content:center;transition:all .2s}
.rc-board .rc-steps .step.active{color:#303133}
.rc-board .rc-steps .step.active .num{background:#5D87FF;color:#fff}
.rc-board .rc-steps .step.done{color:var(--art-gray-700)}
.rc-board .rc-steps .step.done .num{background:rgba(93,135,255,.16);color:#5D87FF}
.rc-board .rc-steps .bar{width:80px;height:2px;border-radius:1px;background:var(--art-gray-300)}
.rc-board .rc-steps .bar.on{background:#5D87FF}
.rc-board .rc-body{display:flex;align-items:stretch;overflow:hidden}
.rc-board .form-col{flex:1;min-width:0;padding:18px 34px 28px}
.rc-board .vr{width:1px;background:var(--art-border-color);flex:0 0 auto}
.rc-board .sum-col{width:360px;flex-shrink:0;padding:18px 28px 28px;background:#fafbfc}
.rc-board .block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:16px}
.rc-board .block-title{font-size:16px;font-weight:600;color:var(--art-gray-900)}
.rc-board .block-title.mt{display:block;margin:28px 0 14px}
.rc-board .safe-note{font-size:12px;color:var(--art-gray-600);display:inline-flex;
  align-items:center;gap:5px}
.rc-board .safe-note svg{color:var(--success)}
.rc-amount-grid.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rc-amount-grid .rc-opt{
  position:relative;height:96px;border:1px solid var(--art-border-color);border-radius:10px;
  background:transparent;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:2px;padding:14px 16px;cursor:pointer;transition:all .15s}
.rc-amount-grid .rc-opt .cur{font-size:14px;font-weight:600;color:var(--art-gray-600)}
.rc-amount-grid .rc-opt .num{font-size:30px;font-weight:700;color:var(--art-gray-900);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rc-amount-grid .rc-opt .rc-tag{
  position:absolute;top:-9px;right:12px;padding:1px 7px;font-size:11px;font-weight:600;
  color:#fff;background:#f5567f;border-radius:8px 8px 8px 0}
.rc-amount-grid .rc-opt .rc-tag.rec{background:#ffae1f}
.rc-amount-grid .rc-opt:hover:not(.on){border-color:var(--art-gray-400)}
.rc-amount-grid .rc-opt.on{border-color:#5D87FF;background:rgba(93,135,255,.06)}
.rc-amount-grid .rc-opt.on .num{color:#5D87FF}
.pay-methods.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.method-tile{
  height:70px;display:flex;align-items:center;gap:12px;padding:0 20px;
  border:1px solid var(--art-border-color);border-radius:10px;background:#fff;
  cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.method-tile:hover{border-color:#5D87FF}
.method-tile.on{border-color:#5D87FF;background:rgba(93,135,255,.06)}
.method-tile .logo{width:36px;height:36px;border-radius:10px;font-size:16px;font-weight:700}
.method-tile .name{font-size:15px;font-weight:500;color:var(--art-gray-800)}
.method-tile.on .name{color:#5D87FF}
.method-tile .rec{
  font-size:11px;padding:2px 8px;color:#f0712a;background:#f0712a1a;border-radius:7px;
  margin-left:auto;white-space:nowrap}
.method-note{margin-top:10px;font-size:12.5px;color:var(--art-gray-500)}
.trust-badges{
  display:flex;align-items:center;gap:14px;border-top:1px solid var(--art-border-color);
  padding-top:16px;margin-top:18px;font-size:13px;color:var(--art-gray-600)}
.trust-badges em{width:1px;height:11px;background:var(--art-gray-300);font-style:normal}
.order-summary.sum-col .sum-title{
  display:flex;align-items:center;gap:7px;font-size:16px;font-weight:600;
  color:var(--art-gray-900);margin-bottom:18px}
.order-summary.sum-col .sum-row{
  display:flex;justify-content:space-between;align-items:center;font-size:14px;
  color:var(--art-gray-600);margin-bottom:13px}
.order-summary.sum-col .sum-row b{color:var(--art-gray-900);font-weight:500;
  font-variant-numeric:tabular-nums}
.order-summary.sum-col .sum-divider{
  border-top:1px dashed var(--art-gray-300);margin:6px 0 16px}
.order-summary.sum-col .sum-total .big,
.order-summary.sum-col .os-total b{color:#5D87FF;font-size:34px;font-weight:700;
  font-variant-numeric:tabular-nums}
.order-summary.sum-col .os-total{border-top:none;margin-top:0;padding-top:0;font-size:14px}
.order-summary.sum-col .pay-btn{
  width:100%;height:50px;font-size:16px;font-weight:600;border-radius:8px}
.order-summary.sum-col .secure-note{margin-top:auto;padding-top:16px;font-size:12px;
  color:var(--art-gray-400)}
@media(max-width:1100px){
  .rc-board .rc-body{flex-direction:column}
  .rc-board .vr{display:none}
  .rc-board .sum-col{width:auto;border-top:1px solid var(--art-border-color)}
  .rc-amount-grid.amount-grid{grid-template-columns:repeat(2,1fr)}
  .pay-methods.method-grid{grid-template-columns:1fr}
}

/* ---------- 分销 promo-tool ---------- */
.promo-tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.promo-tool{align-items:flex-start}
.promo-tool .ti-body{flex:1;min-width:0}
.promo-tool .ti-body>b{display:block;font-size:13.5px;color:#303133;margin-bottom:8px}
.promo-tool .ti-body>b code{font-family:var(--font-mono);color:#5D87FF;font-weight:700;
  letter-spacing:1px;margin-left:4px}
.promo-tool .promo-link-row{margin:0}
@media(max-width:800px){.promo-tool-grid{grid-template-columns:1fr}}

/* ---------- 工单 ---------- */
.tk-layout{min-height:calc(100vh - 220px)}
.tk-list-head .cell-sub{font-size:12px;color:#909399;margin-top:2px}
#tkCountCards{margin-bottom:12px}

/* ---------- 个人中心 ---------- */
.ac-identity{
  display:flex;align-items:center;gap:16px;padding:20px 22px;margin-bottom:12px}
.ac-identity .ac-ava{
  width:64px;height:64px;border-radius:50%;background:#5D87FF;color:#fff;font-size:26px;
  font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ac-identity .ac-id-meta{flex:1;min-width:0}
.ac-identity .ac-name-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ac-identity .ac-name-row b{font-size:18px;font-weight:700;color:#303133}
.ac-identity .ac-phone{font-size:13px;color:#909399;margin-top:2px}
.ac-identity .ac-realname{font-size:12.5px;color:#ffae1f;cursor:pointer;margin-top:8px}
.ac-identity .ac-realname.done{color:#13deb9;cursor:default}
.ac-identity .ac-id-actions{flex:0 0 auto}
/* 资金区:左余额突出大卡(300px),右侧 2×2 统计小卡 */
.ac-finance{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;margin-bottom:14px}
.ac-balance-card{
  margin-bottom:0;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:10px;
  background:var(--grad-soft);border:1px solid var(--primary-light)}
.ac-balance-card .as-lbl{font-size:12.5px;color:var(--text-2)}
.ac-balance-card .ab-big{font-size:30px;font-weight:800;color:var(--primary-dark);
  font-variant-numeric:tabular-nums;line-height:1.1}
.ac-balance-card .ab-big .cur{font-size:16px;font-weight:600;margin-right:2px}
.ac-balance-card .btn-sm{align-self:flex-start;margin-top:2px;padding:8px 20px}
.ac-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ac-metric{
  background:#fff;border:1px solid var(--art-card-border);border-radius:8px;
  padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.ac-metric .as-num{font-size:21px;font-weight:700;color:#303133;
  font-variant-numeric:tabular-nums}
.ac-metric .as-num .cur{font-size:14px;color:#606266;margin-right:2px}
.ac-metric .as-num.mono{font-family:var(--font-mono);letter-spacing:1px;font-size:18px}
.ac-metric .as-lbl{font-size:12px;color:#909399}
/* 手机端:资金区纵向堆叠,余额卡横向排布避免过高 */
@media(max-width:900px){
  .ac-finance{grid-template-columns:1fr}
  .ac-balance-card{flex-direction:row;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px}
  .ac-balance-card .btn-sm{margin-top:0}
}
@media(max-width:640px){
  .ac-identity{flex-wrap:wrap}
  /* 退出按钮独占第二行右对齐,把整行宽度让给用户名+标签,避免用户名被过早省略 */
  .ac-identity .ac-id-meta{flex-basis:calc(100% - 80px)}
  .ac-identity .ac-id-actions{flex-basis:100%;text-align:right}
}

/* 账号安全概览:完成度进度条 + 四项状态 + 常用操作入口 */
.safe-progress{margin:14px 0 6px}
.safe-progress .sp-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--text-2);margin-bottom:8px}
.safe-progress .sp-row b{font-size:17px;color:var(--primary);font-weight:700;
  font-variant-numeric:tabular-nums}
.safe-progress .sp-bar{height:8px;border-radius:99px;background:#f0f2f5;overflow:hidden}
.safe-progress .sp-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--primary),#7ea0ff);transition:width .4s ease}
.safe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.safe-item{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid var(--art-card-border);
  border-radius:10px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.safe-item:hover{border-color:var(--primary-light);box-shadow:0 2px 10px rgba(93,135,255,.10)}
.safe-item .si-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#c8cdd6}
.safe-item .si-name{font-size:13.5px;color:var(--text-1);font-weight:500}
.safe-item .si-state{margin-left:auto;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.safe-item.is-ok .si-dot{background:var(--success);box-shadow:0 0 0 3px rgba(19,222,185,.16)}
.safe-item.is-ok .si-state{color:var(--success)}
.safe-q-title{font-size:15px;margin:20px 0 10px}
.safe-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.safe-quick a{display:flex;align-items:center;justify-content:center;padding:13px 8px;
  border:1px solid var(--art-card-border);border-radius:10px;background:#fafbfc;
  font-size:13.5px;color:var(--text-1);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.safe-quick a:hover{border-color:var(--primary);color:var(--primary);background:#fff}
@media(max-width:640px){
  .safe-grid{grid-template-columns:1fr}
  .safe-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* H5 修复:用户标签不收缩、不竖排;用户名过长省略 */
.ac-identity .ac-name-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-identity .ac-tag{flex:0 0 auto;white-space:nowrap;margin-bottom:0}

/* ---------- SK5 线路检测:上下布局 ----------
   输入区在上,检测结果在下整行展示(8 列结果表需要完整宽度),
   无结果时不再出现右半页留白 */
.tools-layout{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.tools-layout .card{margin-bottom:0}
#pcEmpty{padding:28px 0;text-align:center}
/* 提示条与操作按钮同一行:提示自适应占满,按钮组固定不收缩 */
.pc-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pc-toolbar .info-alert{flex:1 1 280px;margin-bottom:0}
.pc-toolbar .check-foot{margin-top:0;flex:0 0 auto;flex-wrap:nowrap}
.pc-toolbar .check-foot .btn-primary{width:auto;padding:8px 22px}
.pc-toolbar .check-count{margin-left:10px;white-space:nowrap}
@media(max-width:640px){
  .pc-toolbar{flex-direction:column;align-items:stretch}
  /* 纵向时 flex-basis:280px 会变成最小高度撑出空白,恢复内容高度 */
  .pc-toolbar .info-alert{flex:0 0 auto}
  .pc-toolbar .check-foot{justify-content:space-between}
  .pc-toolbar .check-count{margin-left:auto}
}

/* ---------- 使用指南 doc-tile ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.doc-tile{
  display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--art-border-color);
  border-radius:12px;background:#fff;cursor:pointer;text-align:left;
  transition:box-shadow .15s,border-color .15s,transform .15s}
.doc-tile:hover{border-color:var(--primary-light-5);
  box-shadow:0 6px 18px #2563eb17;transform:translateY(-2px)}
.doc-tile .dt-ic{
  width:44px;height:44px;border-radius:12px;background:var(--primary-light-9);
  color:#5D87FF;font-weight:700;font-size:16px;display:flex;align-items:center;
  justify-content:center}
.doc-tile .gi-main{flex:1;min-width:0}
.doc-tile .gi-main h4{font-size:14px;font-weight:600;color:#303133;margin:6px 0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-tile .gi-main p{font-size:12px;color:#909399;line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-tile .gi-side{display:flex;align-items:center;justify-content:space-between;gap:8px}
.doc-tile .gi-arrow{font-size:12.5px;color:#5D87FF;font-weight:500}
@media(max-width:1000px){.doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.doc-grid{grid-template-columns:1fr}}

/* ---------- 3.8 弹窗:12px 圆角 / 遮罩 .8 / 标题 18px / footer 右对齐 ---------- */
.modal-mask{background:rgba(0,0,0,.8);backdrop-filter:none}
.modal{border-radius:12px;padding:20px 24px;animation:fadeIn .3s cubic-bezier(.55,0,.1,1)}
.modal h3{font-size:18px;font-weight:500;line-height:24px;margin-bottom:16px}
.modal .btns{justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px}
.modal .btns .btn-primary{flex:0 0 auto;min-width:96px}
.modal .row-item{border-bottom-color:#f2f6fc}

/* ---------- 3.9 消息 Toast:顶部居中浮条(对标 el-message) ---------- */
.toast{position:fixed;top:16px;bottom:auto;left:50%;
  transform:translateX(-50%) translateY(-140%);
  background:#f4f4f5;border:1px solid #ebeef5;color:#606266;
  padding:11px 15px;border-radius:4px;font-size:14px;line-height:1.4;
  backdrop-filter:none;box-shadow:0 0 12px rgba(0,0,0,.12);
  z-index:1200;opacity:0;transition:all .3s cubic-bezier(.645,.045,.355,1)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.toast-error{background:rgb(255,237,237);border-color:rgb(255,219,220);color:#ff4d4f}

/* ---------- 3.13 空状态 ---------- */
.empty{padding:40px 0;font-size:14px;color:#909399}

/* ---------- 3.15 顶栏通知角标:16×16 #ff4d4f + 1.5px 底色描边 ---------- */
.bell-badge{position:absolute;top:-1px;right:-1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:#ff4d4f;color:#fff;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:1.5px solid #fafbfc}

/* ---------- 3.10/3.11 Tabs 与步骤条收口 ---------- */
.seg-tab,.sub-tab,.tab{transition:color .15s,border-color .15s}
.step.active .step-no{background:#5D87FF}
.step-no{transition:all .2s}

/* ---------- 响应式补充:窄屏隐藏次要顶栏图标,避免溢出 ---------- */
@media(max-width:1100px){
  .cwq-hint{display:none}
}
@media(max-width:860px){
  .cmw-search{display:none}
}
@media(max-width:640px){
  .hdr-full,.hdr-set,.hdr-theme{display:none}
  .cwq-pill .cq-ic{display:none}
}

/* ===== UI polish 20261001 ===== */
.btn-primary:focus-visible,.btn-blue:focus-visible,.btn-outline:focus-visible,.btn-sm:focus-visible,.btn-danger:focus-visible,.shop-pill:focus-visible,.shop-prov:focus-visible,.shop-project:focus-visible,.shop-line-chip:focus-visible,.link-btn:focus-visible{outline:2px solid #5D87FF;outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:#5D87FF!important;box-shadow:0 0 0 3px rgba(93,135,255,.18)!important}
.card{transition:border-color .18s ease,box-shadow .18s ease}
.card:hover{border-color:#e4e9f0}
table tbody tr{transition:background .15s ease}
table tbody tr:hover{background:#f7f9fc}
.art-table-card table thead th{background:#fafbfc;color:#606266;font-weight:600;font-size:12.5px;border-bottom:1px solid #f2f4f5;white-space:nowrap}
.art-table-card table td{font-size:13px;color:#303133;vertical-align:middle}
.art-table-card table tbody tr+tr td{border-top:1px solid #f5f7fa}
.btn-primary,.btn-blue,.btn-sm,.btn-outline,.btn-danger{cursor:pointer;user-select:none}
.btn-primary:active,.btn-blue:active{transform:scale(.98)}
.btn-sm:active{transform:scale(.97)}
.btn-primary[disabled],.btn-blue[disabled],.btn-sm[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}
.page-head{padding:2px 2px 0}
.flow-tip{border-radius:8px;padding:11px 14px;margin-bottom:12px;background:#eff6ff;border:1px solid #dbeafe;color:#1e40af;font-size:12.5px;line-height:1.75}
.flow-tip .flow-tip__tag{color:#1d4ed8}
.flow-tip b{color:#1d4ed8}
.shop-line-chip{border-radius:10px}
.shop-line-chip.active{border-color:#5D87FF;background:#eef3ff;box-shadow:0 4px 14px -8px rgba(93,135,255,.55)}
.shop-line-chip .slb-name{font-weight:700;color:#303133;font-size:13.5px}
.shop-line-chip.active .slb-name{color:#1d4ed8}
.shop-head.card{padding:14px 18px}
.shop-notice{border-radius:8px}
.sfb-label{font-size:12.5px;font-weight:700;color:#606266;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sfb-label::after{content:"";flex:1;height:1px;background:#f0f2f5;margin-left:4px}
.shop-pill{border-radius:8px;padding:7px 14px}
.shop-pill:hover{background:#f5f8ff}
.shop-pill.active{background:#5D87FF;border-color:#5D87FF;color:#fff;box-shadow:0 4px 12px -4px rgba(93,135,255,.45)}
.shop-pill.active .spd-price,.shop-pill.active .spd-trial{color:#fff}
.shop-prov{border-radius:8px}
.shop-prov.active{background:#eef3ff;border-color:#5D87FF;color:#1d4ed8}
.shop-letters .shop-letter{border-radius:7px}
.shop-letters .shop-letter:hover{background:#eef3ff}
.shop-lib-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 0 4px;margin-bottom:10px}
.shop-lib-meta{font-size:12.5px;color:#606266}
.shop-lib-meta b{color:#1d4ed8;font-size:14px}
.shop-device-toggle .sd-btn{border-radius:999px;padding:5px 12px;font-size:12.5px}
.shop-device-toggle .sd-btn.active{background:#5D87FF;color:#fff;border-color:#5D87FF}
.shop-project{border-radius:10px;padding:12px 14px;min-height:52px}
.shop-project:hover{background:#f8faff}
.shop-project .p-name{font-weight:600;color:#303133;font-size:13.5px}
.shop-project .p-tag{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}
.shop-project .p-tag.has{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}
.shop-project .p-tag.no{background:#f5f5f5;color:#9ca3af;border:1px solid #e5e7eb}
.shop-project .p-tag.hot{background:#fff7ed;color:#ea580c;border:1px solid #fed7aa}
.shop-node-card{border-radius:12px;padding:13px 14px}
.shop-node-card .nc-head b{font-size:13.5px;color:#303133}
.shop-node-card .nc-isp{font-size:11px;padding:2px 8px;border-radius:999px;background:#f3f4f6;color:#6b7280}
.shop-node-card.selected{border-color:#5D87FF;background:#f5f8ff;box-shadow:0 8px 20px -12px rgba(93,135,255,.55)}
.shop-node-card .nc-stock b{color:#059669}
.shop-node-card .nc-price{color:#ff4d4f;font-weight:700}
.shop-node-card .nc-stepper button{width:26px;height:26px;border-radius:7px;border:1px solid #dcdfe6;background:#fff;color:#303133;font-size:14px;line-height:1;cursor:pointer;transition:all .15s ease}
.shop-node-card .nc-stepper button:hover{border-color:#5D87FF;color:#5D87FF;background:#eef3ff}
.shop-node-card .nc-stepper button:active{transform:scale(.94)}
.shop-node-card .nc-stepper b{min-width:22px;text-align:center;font-weight:700}
.shop-orderbar{border-radius:14px;padding:12px 16px;gap:12px;box-shadow:0 10px 28px -16px rgba(15,23,42,.35)}
.shop-orderbar .sob-count b,.shop-orderbar .sob-amount b{font-weight:800}
.shop-orderbar .sob-amount b{color:#ff4d4f}
.shop-orderbar .sob-fields input,.shop-orderbar .sob-fields select{height:34px;padding:0 10px;border:1px solid #dcdfe6;border-radius:7px;font-size:12.5px;background:#fff;min-width:0}
.shop-orderbar .sob-fields input::placeholder{color:#c0c4cc}
.shop-orderbar .sob-submit{height:38px;padding:0 22px;border-radius:8px;font-weight:700;white-space:nowrap}
.shop-orderbar .sob-submit:hover{filter:brightness(1.05)}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:12px;flex-wrap:wrap}
.pager button{min-width:30px;height:30px;padding:0 8px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;color:#606266;font-size:12.5px;cursor:pointer;transition:all .15s}
.pager button:hover{border-color:#5D87FF;color:#5D87FF}
.pager button.on{background:#5D87FF;border-color:#5D87FF;color:#fff;font-weight:700}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.shop-empty-box{color:#909399;font-size:13px}
.shop-grid-pad{height:80px}
.stat-strip{background:#fff;border:1px solid #f2f4f5;border-radius:8px;margin-bottom:12px;overflow:hidden}
.stat-strip .metric{padding:14px 16px}
.stat-strip .m-val{font-variant-numeric:tabular-nums}
.stat-strip .m-lbl{font-size:12px}
.modal{box-shadow:0 24px 48px -20px rgba(15,23,42,.28)}
.modal .btns .btn-primary{border-radius:6px}
@media(max-width:900px){
  .shop-orderbar{padding:10px 12px}
  .shop-orderbar .sob-fields{gap:6px}
  .shop-orderbar .sob-submit{width:100%;margin-left:0}
}

/* ============================================================
   实名认证(支付宝人脸核身)独立流程页 #view-realname
   结构:顶部返回条 → 步骤条 → 表单/跳转/结果/完成/模拟 五屏
   ============================================================ */
#view-realname .rn-wrap{max-width:760px;margin:18px auto 40px;padding:0 16px}
#view-realname .rn-card{background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-card);padding:26px 34px 34px}

/* 顶部返回条 */
#view-realname .rn-nav{display:flex;align-items:center;gap:14px;margin-bottom:22px}
#view-realname .rn-nav-title{font-size:15px;font-weight:700;color:var(--text-2)}

/* 步骤条 */
#view-realname .rn-steps{display:flex;align-items:center;justify-content:center;
  margin:0 auto 32px;max-width:540px}
#view-realname .rn-step{display:flex;align-items:center;gap:8px;flex-shrink:0;
  color:var(--text-3);font-size:13.5px;font-weight:600;white-space:nowrap;transition:color .2s}
#view-realname .rn-step i{width:28px;height:28px;border-radius:50%;
  background:var(--bg-soft);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:13px;color:var(--text-3);transition:all .2s}
#view-realname .rn-step.is-active{color:var(--primary-dark)}
#view-realname .rn-step.is-active i{background:var(--grad-primary);color:#fff;
  border-color:transparent;box-shadow:0 4px 10px rgba(93,135,255,.35)}
#view-realname .rn-step-line{flex:1;height:2px;max-width:96px;margin:0 12px;
  border-radius:2px;background:var(--border);transition:background .2s}
#view-realname .rn-step-line.is-active{background:var(--primary)}

/* 屏幕通用排版 */
#view-realname .rn-screen{text-align:center;animation:rn-fade .25s ease}
@keyframes rn-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#view-realname .rn-h{font-size:20px;color:var(--text);margin:0 0 12px}
#view-realname .rn-sub{font-size:13.5px;color:var(--text-3);line-height:1.8;
  max-width:480px;margin:0 auto 22px}

/* 屏幕 1:表单 */
#view-realname .rn-form{max-width:420px;margin:0 auto;text-align:left}
#view-realname .rn-agree{display:flex;align-items:flex-start;gap:8px;
  font-size:12px;color:var(--text-2);line-height:1.8;margin:4px 0 16px}
#view-realname .rn-agree input{margin-top:4px;accent-color:var(--primary)}
#view-realname .rn-agree a{color:var(--primary);font-weight:600}
#view-realname .rn-submit{margin-top:2px}
#view-realname .rn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
#view-realname .rn-safe{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;
  margin-top:24px;padding-top:20px;border-top:1px dashed var(--border)}
#view-realname .rn-safe-item{display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--text-3)}
#view-realname .rn-safe-item svg{color:var(--primary)}

/* 加载转圈 */
#view-realname .rn-spinner{width:34px;height:34px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--primary);
  animation:rn-spin .8s linear infinite;margin:0 auto 18px}
#view-realname .rn-spinner-lg{width:52px;height:52px;border-width:4px;margin:0}
@keyframes rn-spin{to{transform:rotate(360deg)}}

/* 结果屏:成功/失败/等待三态图标 */
#view-realname .rn-result-icon{width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
#view-realname .rn-result-icon svg{width:40px;height:40px}
#view-realname .rn-result-icon.rn-ok{background:rgba(34,197,94,.12);color:#16a34a}
#view-realname .rn-result-icon.rn-fail{background:rgba(239,68,68,.12);color:#dc2626}
#view-realname .rn-result-icon.rn-wait{background:var(--bg-soft)}
#view-realname .rn-result-actions{max-width:360px;margin:22px auto 0}
#view-realname .rn-result-actions .btn-primary{margin-bottom:10px}
#view-realname .rn-back-btn{display:inline-block;padding:9px 22px;border-radius:10px;
  border:1.5px solid var(--border-strong);color:var(--text-2);font-size:13.5px;
  background:var(--card);transition:all .2s}
#view-realname .rn-back-btn:hover{border-color:var(--primary);color:var(--primary)}

/* 认证信息行(结果屏与完成屏共用) */
#view-realname .rn-result-info{max-width:360px;margin:0 auto}
#view-realname .rn-done-card{max-width:360px;margin:0 auto 18px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;
  padding:6px 18px;text-align:left}
#view-realname .rn-info-row{display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;font-size:13.5px;border-bottom:1px dashed var(--border)}
#view-realname .rn-info-row:last-child{border-bottom:none}
#view-realname .rn-info-row span{color:var(--text-3)}
#view-realname .rn-info-row b{color:var(--text);font-weight:600}
#view-realname #rnScreenDone .btn-primary{max-width:360px}

/* 屏幕 5:联调模拟 */
#view-realname .rn-mock-banner{display:inline-block;margin-bottom:14px;padding:5px 16px;
  border-radius:999px;font-size:12.5px;font-weight:700;
  color:#b45309;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4)}
#view-realname .rn-mock-actions{display:flex;gap:12px;max-width:360px;margin:0 auto 14px}
#view-realname .rn-mock-actions .btn-primary{flex:1}
#view-realname .rn-mock-actions .rn-back-btn{flex-shrink:0;padding:13px 20px}

/* 移动端适配 */
@media(max-width:640px){
  #view-realname .rn-wrap{padding:0 10px;margin-top:10px}
  #view-realname .rn-card{padding:20px 16px 26px;border-radius:14px}
  #view-realname .rn-step span{font-size:12px}
  #view-realname .rn-step-line{margin:0 8px}
  #view-realname .rn-h{font-size:18px}
  #view-realname .rn-safe{gap:8px 16px}
}

/* ============================================================
   Logo 返回首页 / 头像与昵称(个人中心)
   ============================================================ */
/* 侧栏 Logo 可点击 */
.sidebar .brand{cursor:pointer}

/* 头像内图片:铺满容器、继承圆角,侧栏与身份卡共用 */
.su-ava img,.ac-ava img{width:100%;height:100%;border-radius:inherit;
  object-fit:cover;display:block}
/* 预设 emoji 头像:渐变底色,与普通首字母头像做视觉区分 */
.su-ava.is-preset{background:linear-gradient(135deg,#7c9bff,#5D87FF);font-size:17px}
.ac-ava.is-preset{background:linear-gradient(135deg,#7c9bff,#5D87FF);font-size:34px}
/* 上传图片保证圆形裁切(.ac-ava 本身已是圆角容器,双保险) */
.ac-ava.is-img img{border-radius:50%}
/* 身份卡头像可点击换头像 */
.ac-ava[onclick]{cursor:pointer}
/* 编辑区大预览:重置 .ac-ava 的外边距,由 flex 容器控制布局 */
.ac-ava.pe-preview{margin:0}

/* 编辑区整体:纵向排列,块间距统一 */
.profile-editor{display:flex;flex-direction:column;gap:18px}
.pe-ava-preview{display:flex;justify-content:center;padding:4px 0 2px}
.pe-block{display:flex;flex-direction:column;gap:10px}
.pe-label{font-size:13.5px;font-weight:600;color:#303133}
.pe-tip{font-weight:400;color:#909399;font-size:12px;margin-left:8px}

/* 预设头像网格:桌面 8 列,按钮 40px 高 */
.pe-preset-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.pe-preset{height:40px;border-radius:10px;border:1px solid var(--art-border-color);
  background:var(--art-main-bg-color);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;padding:0}
.pe-preset:hover{border-color:#5D87FF;transform:translateY(-1px)}
.pe-preset.active{border-color:#5D87FF;box-shadow:0 0 0 2px rgba(93,135,255,.2)}
/* 默认字母头像格:文字比 emoji 小,视觉上区分"非预设图案" */
.pe-preset-default{font-size:14px;font-weight:700;color:#606266;
  background:linear-gradient(135deg,#eef2ff,#f8faff)}

/* 窄屏:预设网格降为 6 列,避免按钮过挤 */
@media(max-width:560px){
  .pe-preset-grid{grid-template-columns:repeat(6,1fr)}
}