/* =========================================================
   css/shell.css —— SPA 外壳统一样式 v2
   v1：基础变量 / 深空与极光背景 / 滚动光带 / rv进场 / 门户导航与页脚 /
        控制台骨架（侧栏.side-nav+顶栏.top） / auth区 / 全局加载占位
   v2（本工单·菜单框架）：console壳双菜单集——C端/admin侧栏分组菜单复用.side-nav既有形态；
        新增侧栏底部菜单集切换按钮.role-switch（C端⇄管理后台）与admin身份色
   设计基准：门户样张（深空金线）+ 登录样张（极光玻璃）+ 控制台样张（极光玻璃）
   注：页面专属样式在各 pages/*.body.html 片段内自带（v-html注入互斥，页间天然隔离）
   注：控制台侧栏菜单类名定为 .side-nav，避免与门户顶部 .nav 同名互污（装配层适配，视觉不变）
   ========================================================= */

/* ---------- 基础与变量（门户/控制台融合值，片段自带:root做页面级微调） ---------- */
:root{
  color-scheme:dark;
  --bg:#06080e;--panel:rgba(255,255,255,.045);--panel2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);--border-hi:rgba(255,255,255,.2);
  --text:#eef1f8;--dim:#98a0b5;--faint:#7d879e;
  --gold:#e8c06a;--gold2:#c99a3f;
  --brand:#6366f1;--brand2:#22d3ee;--violet:#8b5cf6;
  --ok:#34d399;--warn:#fbbf24;--err:#f87171;--r:14px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
html{scroll-behavior:smooth;background:#06080e}
body{background:var(--bg);color:var(--text);overflow-x:hidden}
::selection{background:rgba(99,102,241,.4)}
[v-cloak]{display:none}
.pg-loading{padding:120px 28px;text-align:center;color:#98a0b5;font-size:14px;letter-spacing:2px}

/* ---------- 深空背景（门户区，纯CSS零JS零canvas） ---------- */
.space{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
  radial-gradient(ellipse 90% 55% at 50% -12%,rgba(99,102,241,.17),transparent 60%),
  radial-gradient(ellipse 55% 40% at 85% 105%,rgba(34,211,238,.08),transparent 65%),
  radial-gradient(ellipse 45% 38% at 10% 100%,rgba(139,92,246,.07),transparent 65%),
  #06080e}
.space .stars{position:absolute;inset:0;background-image:
  radial-gradient(1.2px 1.2px at 18% 32%,rgba(255,255,255,.5),transparent 55%),
  radial-gradient(1px 1px at 66% 22%,rgba(255,255,255,.36),transparent 55%),
  radial-gradient(1.4px 1.4px at 84% 62%,rgba(255,255,255,.44),transparent 55%),
  radial-gradient(1px 1px at 32% 74%,rgba(255,255,255,.3),transparent 55%),
  radial-gradient(1.2px 1.2px at 50% 86%,rgba(255,255,255,.4),transparent 55%),
  radial-gradient(1px 1px at 8% 58%,rgba(255,255,255,.3),transparent 55%);
  animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{50%{opacity:.55}}
.neb{position:absolute;border-radius:50%;filter:blur(130px);opacity:.5;will-change:transform}
.neb.n1{width:56vw;height:56vw;left:-16vw;top:-24vh;background:radial-gradient(circle,rgba(79,70,229,.5),transparent 68%);animation:driftA 40s ease-in-out infinite alternate}
.neb.n2{width:46vw;height:46vw;right:-14vw;bottom:-18vh;background:radial-gradient(circle,rgba(8,145,178,.4),transparent 68%);animation:driftB 46s ease-in-out infinite alternate}
@keyframes driftA{to{transform:translate(6vw,4vh)}}
@keyframes driftB{to{transform:translate(-5vw,-4vh)}}

/* ---------- 极光背景：auth强档3团 / console弱档2团（不抢内容） ---------- */
.aurora-auth{position:fixed;inset:0;overflow:hidden;filter:blur(90px);opacity:.55;pointer-events:none;z-index:0}
.aurora-auth i{position:absolute;border-radius:50%}
.aurora-auth i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-18vh;background:radial-gradient(circle,#4f46e5 0%,transparent 65%);animation:drift1 26s ease-in-out infinite alternate}
.aurora-auth i:nth-child(2){width:44vw;height:44vw;right:-10vw;bottom:-14vh;background:radial-gradient(circle,#0891b2 0%,transparent 65%);animation:drift2 32s ease-in-out infinite alternate}
.aurora-auth i:nth-child(3){width:34vw;height:34vw;left:38vw;top:52vh;background:radial-gradient(circle,#7c3aed 0%,transparent 65%);animation:drift3 38s ease-in-out infinite alternate;opacity:.6}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-8vw,-6vh) scale(.92)}}
@keyframes drift3{to{transform:translate(-6vw,-9vh) scale(1.18)}}

.aurora{position:fixed;inset:0;overflow:hidden;filter:blur(110px);opacity:.3;pointer-events:none;z-index:0}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-14vw;top:-20vh;background:radial-gradient(circle,#4f46e5,transparent 65%);animation:d1 30s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-12vw;bottom:-16vh;background:radial-gradient(circle,#0891b2,transparent 65%);animation:d2 36s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(8vw,6vh)}}
@keyframes d2{to{transform:translate(-7vw,-5vh)}}

/* ---------- 滚动进度光带（width走合成层；滚动监听rAF节流） ---------- */
.scrollbeam{position:fixed;top:0;left:0;height:2px;z-index:99;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand2),var(--gold));box-shadow:0 0 14px rgba(99,102,241,.8);will-change:width}

/* ---------- rv滚动进场（外壳统一点亮：IO threshold .15 触发即解绑） ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.22s}.rv.d3{transition-delay:.34s}

/* ---------- 门户顶部导航（轻盈旗舰版样张） ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(6,8,14,.72);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav .in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:15px 28px}
.nav .lg{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);cursor:pointer}
.mini-logo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 34px}
.mini-logo img{width:34px;height:34px;object-fit:contain;border-radius:10px}
.nav .lg b{font-size:14px;font-weight:700}
.nav .links{display:flex;gap:4px;margin-left:16px}
.nav .links a{color:var(--dim);text-decoration:none;font-size:13px;padding:8px 13px;border-radius:10px;transition:color .2s,background .2s;cursor:pointer}
.nav .links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav .links a.on{color:var(--text);background:rgba(255,255,255,.09)}
.nav .sp{flex:1}
.nbtn{padding:9px 19px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);font-size:13px;cursor:pointer;transition:border-color .2s;text-decoration:none;display:inline-block}
.nbtn:hover{border-color:var(--border-hi)}
.nbtn.pri{background:linear-gradient(135deg,var(--brand),var(--violet));border:none;font-weight:600;box-shadow:0 5px 18px rgba(99,102,241,.35);position:relative;overflow:hidden}
.nbtn.pri::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sheen 3.6s infinite}
/* 退出登录（GZ-1103批）：门户导航右侧高对比红边红字，一眼可见 */
.nbtn.nlogout{border:1px solid rgba(248,113,113,.55);background:rgba(248,113,113,.1);color:#fca5a5;font-weight:600}
.nbtn.nlogout:hover{background:rgba(248,113,113,.22);border-color:rgba(248,113,113,.9);color:#fecaca}
@keyframes sheen{0%{left:-80%}55%,100%{left:130%}}

/* ---------- 门户主容器与页脚 ---------- */
.pg{position:relative;z-index:1;min-height:70vh}
.page-pad{position:relative;z-index:1;padding:26px 28px;max-width:1280px;margin:0 auto;width:100%}
footer{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.18);margin-top:88px;padding:46px 24px 50px;background:linear-gradient(180deg,rgba(255,255,255,.015) 0%,rgba(255,255,255,.075) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
/* FIX-2段A：.foot 加 footer 作用域限定，防命中片段 .mtable .foot（模型广场表格底栏） */
footer .foot{max-width:1100px;margin:0 auto;text-align:center;font-size:15px;color:#f2f6fc;line-height:2.15}
footer .foot .f-beian{font-size:15px;color:#f5f8ff;letter-spacing:.22px}
footer .foot .f-beian a{color:#ffffff;font-weight:600}
footer .foot .sep{color:rgba(255,255,255,.34);margin:0 15px}
footer .foot .f-links{margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:28px;font-size:14px}
footer .foot .f-status{margin-top:14px;font-size:13px;color:#b8c6da;display:flex;align-items:center;justify-content:center;gap:7px}
footer .foot .dot-ok{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 8px rgba(34,197,94,.7)}
footer .foot .st{display:flex;align-items:center;gap:7px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);position:relative}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ok);animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}

/* ---------- auth区（登录全屏壳） ---------- */
.auth-wrap{position:relative;z-index:1;height:100vh}
.back-home{position:fixed;top:22px;left:24px;z-index:50;padding:10px 18px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);
  color:#e8ecf4;font-size:13px;cursor:pointer;text-decoration:none;transition:all .2s;user-select:none}
.back-home:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}

/* ---------- console区骨架（控制台样张布局原样搬入） ---------- */
.app{position:relative;z-index:1;display:flex;height:100vh}
.side{width:232px;flex-shrink:0;display:flex;flex-direction:column;
  background:rgba(12,16,28,.6);backdrop-filter:blur(18px);border-right:1px solid var(--border)}
.side .logo-row{display:flex;align-items:center;gap:11px;padding:20px 20px 18px}
.logo-row b{font-size:14px;font-weight:600}
.logo-row span{font-size:12px;color:var(--faint);display:block;letter-spacing:1.5px}
.side-nav{flex:1;padding:6px 12px;overflow-y:auto}
.side-nav .cap{font-size:12px;color:var(--faint);letter-spacing:2px;padding:14px 10px 7px}
.side-nav a{display:flex;align-items:center;gap:11px;padding:9.5px 11px;border-radius:10px;
  color:var(--dim);text-decoration:none;font-size:13px;margin-bottom:2px;transition:all .18s;position:relative;cursor:pointer}
.side-nav a svg{width:16.5px;height:16.5px;flex-shrink:0;opacity:.8}
.side-nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.side-nav a.on{color:#fff;background:linear-gradient(90deg,rgba(99,102,241,.22),rgba(139,92,246,.1));
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.35)}
.side-nav a.on::before{content:"";position:absolute;left:-12px;top:22%;bottom:22%;width:3px;border-radius:2px;
  background:linear-gradient(var(--brand),var(--brand2));box-shadow:0 0 10px var(--brand)}
.side-nav .badge{margin-left:auto;font-size:12px;padding:2px 7px;border-radius:99px;background:rgba(99,102,241,.2);color:#a5b4fc}
.side-user{padding:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.side-user .info{flex:1;min-width:0}
.side-user .info b{font-size:12px;display:block}
.side-user .info span{font-size:12px;color:var(--ok)}
/* FIX-2段B：.dots 加作用域限定，防命中 tokens 页 .tk .key .dots（密钥遮罩点） */
.side-user .dots{color:var(--faint);cursor:pointer;letter-spacing:2px;font-size:14px;padding:0 4px}

/* ---------- 菜单集切换按钮（v2新增·本工单）：侧栏底部 C端⇄管理后台 ----------
   占位阶段零鉴权直接切；接线工单按role=100校验显隐。形态沿用既有变量与圆角语言，零新设计 */
.side .role-switch{display:flex;align-items:center;gap:10px;margin:10px 12px 0;padding:9.5px 11px;border-radius:10px;
  border:1px dashed rgba(232,192,106,.4);background:rgba(232,192,106,.06);color:var(--gold);
  font-size:12px;cursor:pointer;transition:all .18s;user-select:none;text-decoration:none;flex-shrink:0}
.side .role-switch svg{width:15px;height:15px;flex-shrink:0;opacity:.85}
.side .role-switch:hover{background:rgba(232,192,106,.13);border-color:rgba(232,192,106,.65);color:#f6d98c}
.side .role-switch.admin{border-style:solid;border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.1);color:#a5b4fc}
.side .role-switch.admin:hover{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.7);color:#c7d2fe}
/* admin菜单集下身份标示换色（同形态仅换渐变，零新设计语言） */
.side-user .avatar.admin{background:linear-gradient(135deg,#6366f1,#8b5cf6)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
/* FIX-2段C：.top 限定为 .main 直接子级，防命中模型广场 .kcard .top（王座卡头部） */
.main>.top{height:58px;display:flex;align-items:center;gap:16px;padding:0 24px;
  border-bottom:1px solid var(--border);background:rgba(10,14,26,.5);backdrop-filter:blur(16px)}
.crumb{font-size:13px;color:var(--dim)}
.crumb b{color:var(--text);font-weight:600}
.search{flex:1;max-width:340px;display:flex;align-items:center;gap:9px;padding:8px 14px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;
  transition:all .2s;font-size:13px;color:var(--faint)}
.search:focus-within{border-color:transparent;box-shadow:0 0 0 1.5px var(--brand),0 0 18px rgba(99,102,241,.25)}
.search input{background:none;border:none;outline:none;color:var(--text);width:100%;font-size:13px}
/* GZ-1104批：全站select下拉深色适配——原生option面板默认白底看不清，统一深底浅字（控制台内容区+弹窗内全覆盖） */
.content select{background:#141826;color:#e8ecf4;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:8px 11px;font-size:12px;outline:none;font-family:inherit}
.content select:focus{border-color:#6366f1}
.content select option{background:#141826;color:#e8ecf4}
body select.na-sel{background:#141826;color:#e8ecf4}
body select.na-sel option{background:#141826;color:#e8ecf4}
.search svg{width:14px;height:14px;flex-shrink:0}
.top .sp{flex:1}
.icon-btn{width:35px;height:35px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:rgba(255,255,255,.04);cursor:pointer;color:var(--dim);
  transition:all .2s;position:relative}
.icon-btn:hover{color:var(--text);border-color:var(--border-hi);background:rgba(255,255,255,.08)}
.icon-btn svg{width:15.5px;height:15.5px}
.icon-btn .dot{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--err);box-shadow:0 0 8px var(--err)}
.content{flex:1;overflow-y:auto;padding:26px 28px}

/* ---------- FIX-2：admin占位页 .ph-note 兜底样式（v2补丁） ----------
   18个admin占位页的接线说明行使用 class="ph-note"，片段内只定义了 .wire-note（未被引用），
   .ph-note 全站无定义=裸渲染。统一落一条 .content 作用域规则（形态同 .wire-note，零新设计语言） */
.content .ph-note{display:flex;gap:10px;align-items:flex-start;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.25);
  border-radius:var(--r);padding:13px 16px;font-size:12px;color:var(--dim);line-height:1.8;margin-bottom:14px}

/* ---------- FIX-3: 换页防白闪——新页淡入(样式应用期不露无样式内容) ---------- */
@keyframes pgfade{from{opacity:0}to{opacity:1}}
.content>div{animation:pgfade .22s ease both}
.portal-main>div{animation:pgfade .22s ease both}
.auth-wrap{animation:pgfade .22s ease both}

/* 20261105：C端「套餐订阅」菜单突显（金牌高亮+热门徽章） */
.side-nav a.hot{position:relative;color:#f7e2b8;font-weight:700;background:linear-gradient(90deg,rgba(233,180,92,.20),rgba(233,180,92,.05));border:1px solid rgba(233,180,92,.34)}
.side-nav a.hot svg{opacity:1;color:#e9b45c}
.side-nav a.hot:hover{color:#fff;background:linear-gradient(90deg,rgba(233,180,92,.30),rgba(233,180,92,.10))}
.side-nav a.hot.on{color:#fff;background:linear-gradient(90deg,rgba(233,180,92,.34),rgba(233,180,92,.12));border-color:rgba(233,180,92,.62);box-shadow:0 0 0 3px rgba(233,180,92,.10)}
.side-nav a.hot.on::before{background:#e9b45c}
.side-nav a.hot .badge{margin-left:auto;font-size:12px;padding:2px 7px;border-radius:99px;background:linear-gradient(135deg,#e9b45c,#f59e0b);color:#231a08;font-weight:800;letter-spacing:.5px}
/* 20261105：页脚备案号与政策链接（照 www 企业站页脚） */
footer .foot a{color:#ffffff;text-decoration:none;transition:color .15s,border-color .15s;border-bottom:1px solid rgba(255,255,255,.38)}
footer .foot a:hover{color:#7dd3fc;border-bottom-color:#7dd3fc}
footer .foot .flink{display:flex;align-items:center;gap:14px}

/* 20261105：接口文档置顶 + 环形光突显（控制台侧栏） */
.side-nav a.docs-top{position:relative;margin-bottom:6px;color:#cfe9ff;font-weight:700;
  background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(99,102,241,.08));
  border:1px solid rgba(34,211,238,.32);
  box-shadow:0 0 0 1px rgba(34,211,238,.16),0 0 15px rgba(34,211,238,.20)}
.side-nav a.docs-top svg{opacity:1;color:#22d3ee}
.side-nav a.docs-top::after{content:"";position:absolute;inset:-3px;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(34,211,238,.30),0 0 18px 2px rgba(34,211,238,.18);
  animation:docsRingPulse 3s ease-in-out infinite}
@keyframes docsRingPulse{0%,100%{opacity:.5}50%{opacity:1}}
.side-nav a.docs-top:hover{color:#fff;background:linear-gradient(90deg,rgba(34,211,238,.24),rgba(99,102,241,.12))}
.side-nav a.docs-top.on{color:#fff;border-color:rgba(34,211,238,.62)}
@media (prefers-reduced-motion: reduce){.side-nav a.docs-top::after{animation:none}}

/* 20261105：登录/注册页（auth 区）底部备案页脚——打开 api 域名即可见 */
.auth-wrap{padding-bottom:58px}
.auth-foot{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;gap:6px 18px;padding:10px 18px;font-size:12px;line-height:1.8;
  color:#cfd8ea;background:rgba(6,8,14,.88);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12)}
.auth-foot a{color:#ffffff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);transition:color .15s}
.auth-foot a:hover{color:#7dd3fc;border-bottom-color:#7dd3fc}
.auth-foot .flink{display:flex;align-items:center;gap:16px}