/* site.css｜全站统一顶部导航与主色（紫色 #6366f1 系） */
:root{
  --brand:#6366f1; --brand2:#a855f7;
  --ink:#1f2937; --muted:#6b7280; --line:#e8e7f0; --bg:#f5f7fa;
  --ok:#10b981; --bad:#ef4444;
}

/* 全站统一字体：工作台等页面加载的旧 app.css 会把字体设为微软雅黑，
   此处统一，保证导航与 VIP 徽章在所有页面的文字宽度、粗细、高度完全一致 */
body{ font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,"Segoe UI",sans-serif; }

/* 始终为纵向滚动条预留位置，避免页面切换时内容横向跳动 */
html{ overflow-y:scroll; scrollbar-width:thin; scrollbar-color:rgba(99,102,241,.30) transparent; }

/* 统一全站滚动条（WebKit / Blink） */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(99,102,241,.25); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(99,102,241,.45); }

/* 无左侧栏页面的顶部导航 */
.site-nav, .site-nav *{ box-sizing:border-box; }
.site-nav{
  height:64px; min-height:64px; padding-top:0; padding-bottom:0;
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding:0 24px;
  position:sticky; top:0; z-index:30;
}
.brand-slot{
  display:flex; align-items:center; gap:10px; width:200px; flex:none;
  font-size:16px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap;
}
.brand-slot .bm{
  width:31px; height:31px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; font-size:17px; box-shadow:0 4px 12px rgba(99,102,241,.3);
}

/* 导航链接（工作台顶栏与其他页面共用同一套） */
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav-links a{
  padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:500; line-height:1.4;
  color:#4b5563; text-decoration:none; transition:all .18s ease; white-space:nowrap;
}
.nav-links a:hover{ background:rgba(99,102,241,.09); color:var(--brand); }
.nav-links a.active{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(99,102,241,.28);
}
.nav-links a.logout:hover{ background:rgba(239,68,68,.1); color:var(--bad); }

/* 充值：醒目描边轮廓（玫瑰红，非紫；区别于故障红） */
.nav-links a.nav-cta{
  background:transparent; color:#f43f5e;
  border:1.5px solid #f43f5e; font-weight:600;
  box-shadow:0 2px 8px rgba(244,63,94,.14);
}
.nav-links a.nav-cta:hover{
  background:rgba(244,63,94,.08); color:#f43f5e;
  border-color:#f43f5e; box-shadow:0 4px 14px rgba(244,63,94,.26);
}

/* VIP 徽章（顶栏右侧，金色质感，全等级通用） */
.nav-links a.vip-badge{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  position:relative; overflow:hidden; isolation:isolate;
  padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:800;
  color:#4a2d00; background:linear-gradient(135deg,#ffe9a8,#ffd76a 45%,#f7b733);
  border:1.5px solid rgba(255,255,255,.65); text-decoration:none;
  box-shadow:0 3px 12px rgba(247,183,51,.35),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.4); transition:all .18s ease; white-space:nowrap;
}
/* 周期性流光扫过 */
.nav-links a.vip-badge::after{
  content:""; position:absolute; top:-20%; left:-90%; z-index:2;
  width:55%; height:140%; pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
  transform:skewX(-18deg); animation:vipShimmer 3.4s ease-in-out infinite;
}
@keyframes vipShimmer{
  0%{ left:-90%; }
  55%{ left:140%; }
  100%{ left:140%; }
}
.nav-links a.vip-badge:hover{ filter:brightness(1.07); box-shadow:0 6px 18px rgba(247,183,51,.62),0 0 0 3px rgba(247,183,51,.22); transform:translateY(-1px); }
.nav-links a.vip-badge.svip{
  color:#3f1d00;
  background:linear-gradient(135deg,#fff3c9,#ffd98a 40%,#fbbf24 70%,#f59e0b);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 4px 16px rgba(245,158,11,.5),inset 0 1px 0 rgba(255,255,255,.7);
}
.nav-links a.vip-badge.svip:hover{ box-shadow:0 6px 22px rgba(245,158,11,.62); }

/* 管理员后台入口（深色醒目） */
.nav-links a.nav-admin{
  padding:8px 15px; border-radius:999px; font-size:13px; font-weight:600; flex:none;
  color:#fff; background:#1f2437; border:1px solid #2e3552;
  text-decoration:none; transition:all .18s ease; white-space:nowrap;
  box-shadow:0 2px 8px rgba(15,18,32,.25);
}
.nav-links a.nav-admin:hover{ background:#2c3350; border-color:#6366f1; }

/* 统一按钮（供各页面复用） */
.btn-brand{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:0; border-radius:12px; padding:10px 20px; font-size:14px; font-weight:600;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(99,102,241,.28); transition:all .22s ease;
}
.btn-brand:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:999px; padding:8px 16px; font-size:13px; font-weight:500;
  background:#fff; color:#374151; cursor:pointer; text-decoration:none; transition:all .2s ease;
}
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

/* ===== 工作台侧边栏底部：额度卡片 + 账户入口 ===== */
.sidebar .sidebar-bottom{ padding-top:14px; border-top:1px solid var(--line); }

/* 额度卡片：紫色渐变 + 装饰光斑 */
.sidebar .credit{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:2px;
  padding:14px 14px 13px;
  background:linear-gradient(135deg,#6366f1 0%,#7c5cf0 55%,#a855f7 100%);
  border:0; border-radius:16px;
  box-shadow:0 10px 24px rgba(99,102,241,.32);
}
.sidebar .credit::after{
  content:""; position:absolute; right:-26px; top:-30px;
  width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);
  pointer-events:none;
}
.sidebar .credit span{ font-size:11px; font-weight:500; letter-spacing:.5px; color:rgba(255,255,255,.8); }
.sidebar .credit strong{ font-size:26px; font-weight:800; line-height:1.15; color:#fff; margin:1px 0 10px; }
.sidebar .credit a{
  position:relative; z-index:1; grid:none; width:100%;
  padding:8px 0; border-radius:9px; text-align:center;
  background:rgba(255,255,255,.92); color:#6366f1;
  font-size:12.5px; font-weight:700; transition:.2s ease;
}
.sidebar .credit a:hover{ background:#fff; transform:translateY(-1px); }

/* 账户入口：浅紫小卡片，与深紫额度卡片深浅搭配 */
.sidebar .account-link{
  margin-top:10px; padding:9px 10px; gap:10px;
  background:#f6f5fe; border:1px solid #ebe9fb; border-radius:14px;
  transition:.2s ease;
}
.sidebar .account-link:hover{
  background:#efedfd; border-color:#d9d4f8; transform:translateY(-1px);
}
.sidebar .account-avatar{
  width:36px; height:36px; flex:none; border-radius:11px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#6366f1,#a855f7); color:#fff;
  box-shadow:0 4px 10px rgba(99,102,241,.3);
}
.sidebar .account-link > span:nth-child(2){ flex:1; min-width:0; line-height:1.3; }
.sidebar .account-link b{
  display:block; font-size:12.5px; font-weight:600; color:#1f2937;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar .account-link small{ display:block; font-size:10.5px; color:#8b8fa3; margin-top:1px; }
.sidebar .account-link > span:last-child{ margin-left:auto; color:#b6b3d6; font-size:16px; transition:.2s ease; }
.sidebar .account-link:hover > span:last-child{ color:#6366f1; transform:translateX(2px); }

/* ===== 侧边栏模型卡片：精致化增强 ===== */
.sidebar .model-list .model-item{ box-shadow:0 1px 2px rgba(17,24,39,.045); }
.sidebar .model-list .model-item::before{ transition:transform .2s ease, box-shadow .2s ease; }
.sidebar .model-list .model-item:hover::before{ transform:scale(1.07); }
.sidebar .model-list .model-item.active::before{
  box-shadow:0 4px 11px rgba(0,0,0,.25), 0 0 0 3px rgba(99,102,241,.2);
}
.sidebar .model-list .model-item.active{ border-color:#c7d2fe; }
.sidebar .model-list .model-item.active::after{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,#6366f1,#a855f7);
}

/* 生图面板在线绿点：鲜亮正绿 + 呼吸光晕，与模型名垂直居中 */
.composer .composer-dot{
  width:8px; height:8px; flex:none; position:relative; top:.5px;
  background:#22c55e; animation:onlinePulse 2s ease-out infinite;
}
.composer .composer-heading > strong{ line-height:1.3; }
@keyframes onlinePulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* ===== VIP 用户：侧栏头像金色描边光环 ===== */
.sidebar .account-link.vip-user .account-avatar{
  box-shadow:0 0 0 2px #f7b733,0 4px 10px rgba(99,102,241,.3);
}
/* 侧栏账户区 VIP 等级铭牌 */
.side-vip-tag{
  display:inline-flex; align-items:center; gap:2px;
  font-size:10.5px; font-weight:800; color:#8a5a00;
  background:linear-gradient(135deg,#fff1c2,#ffd76a);
  border-radius:999px; padding:1px 8px; white-space:nowrap;
}
/* 生图面板标题行 VIP 等级徽章 */
.composer-vip{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800;
  color:#7a4a00; background:linear-gradient(135deg,#ffe9a8,#f7b733);
  border:1px solid rgba(255,255,255,.6); text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 7px rgba(247,183,51,.35);
}
.composer-vip:hover{ filter:brightness(1.07); }

/* 汉堡菜单按钮（默认隐藏，仅手机端显示） */
.mobile-newchat{ display:none; }
.nav-toggle{
  display:none; flex:none;
  width:38px; height:38px; padding:9px 8px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  flex-direction:column; justify-content:center; gap:4.5px;
  cursor:pointer; transition:border-color .18s, background .18s;
}
.nav-toggle span{ display:block; width:20px; min-width:20px; height:2px; flex:none; border-radius:2px; background:#202935; transition:transform .2s, opacity .18s; }
.nav-toggle:hover{ border-color:#c7cbfa; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:700px){
  /* ===== 统一手机端顶栏：一层，品牌左、汉堡右 ===== */
  .site-nav{ height:56px; min-height:56px; padding:0 12px; gap:10px; }
  .brand-slot{ width:auto; flex:1; min-width:0; font-size:15px; }
  .brand-slot .bm{ width:30px; height:30px; font-size:15px; }

  /* studio/chat：sidebar 直接变顶栏（一层），原 topbar 标题行隐藏 */
  .sidebar{
    position:static; width:100%; height:56px; padding:0 12px;
    display:flex; flex-direction:row; align-items:center; gap:10px;
    border-right:0; border-bottom:1px solid var(--line);
  }
  .sidebar .brand{ padding:0; flex:1; min-width:0; }
  .sidebar .brand-mark{ width:30px; height:30px; font-size:16px; }
  .sidebar .new-chat-btn{ display:none; }
  /* topbar 不占高度但保持渲染（里面的 fixed 导航面板才能显示） */
  .workspace > .topbar{ display:block; height:0; min-height:0; padding:0; overflow:visible; border:0; }
  .topbar > div:first-child{ display:none; }

  /* 对话页手机端：内容区顶部的新建对话按钮 */
  .mobile-newchat{ display:flex; margin:10px 12px 0; }

  /* 汉堡按钮显示（靠右） */
  .nav-toggle{ display:inline-flex; margin-left:auto; }

  /* 导航链接折叠为下拉面板（统一从 56px 顶栏下方展开） */
  .site-nav .nav-links, .topbar .nav-links{
    position:fixed; left:0; right:0; z-index:40;
    margin:0; padding:10px 12px 14px; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:0 16px 34px rgba(15,23,42,.14);
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    max-height:calc(100vh - 66px); overflow:auto; top:56px;
  }
  .site-nav .nav-links.open, .topbar .nav-links.open{ display:flex; }

  .nav-links a{
    width:100%; padding:11px 14px; font-size:14px; border-radius:10px;
    justify-content:flex-start; white-space:normal;
  }
  .nav-links a.nav-cta{ border-width:1.5px; }
  .nav-links a.logout{ text-align:left; }
  .nav-links a.vip-badge{ justify-content:center; margin:2px 0; }
  .nav-links a.nav-admin{ justify-content:center; margin:2px 0; }

  /* 深色充值页：下拉面板同步深色 */
  body.recharge-vip .site-nav .nav-links{
    background:linear-gradient(180deg,#211d33,#2a2440);
    border-bottom-color:rgba(218,184,110,.35); box-shadow:0 16px 34px rgba(0,0,0,.5);
  }
}

/* ===== 中等屏幕（平板/小笔记本窗口，701~1120px）：导航收紧，防止拥挤换行 ===== */
@media (min-width:701px) and (max-width:1120px){
  .site-nav{ gap:10px; padding:0 14px; }
  .brand-slot{ width:150px; }
  .topbar{ padding:0 14px; gap:8px; }
  .topbar > div:first-child{ flex:none; }
  .section-label{ display:none; }
  .nav-links{ gap:2px; }
  .nav-links a{ padding:7px 10px; font-size:12.5px; }
  .nav-links a.nav-admin{ padding:7px 11px; font-size:12.5px; }
  .nav-links a.vip-badge{ padding:5px 11px; font-size:12px; }
  .nav-links a.vip-badge::before{ font-size:10.5px; }
  .nav-links a.vip-badge.svip::before{ font-size:12px; }
}

/* ===== 升级全屏庆祝 ===== */
.vip-celebrate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,rgba(247,183,51,.22),rgba(10,8,20,.74) 70%);
  backdrop-filter:blur(6px);animation:vcFade .4s ease}
.vip-celebrate.vc-hide{opacity:0;pointer-events:none;transition:opacity .45s}
@keyframes vcFade{from{opacity:0}to{opacity:1}}
/* 旋转金光放射 */
.vc-rays{position:absolute;left:50%;top:42%;width:140vmax;height:140vmax;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,215,106,.14) 8deg 12deg,transparent 12deg 20deg);
  animation:vcSpin 26s linear infinite;pointer-events:none}
@keyframes vcSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.vc-card{position:relative;z-index:2;width:min(90vw,380px);text-align:center;
  background:linear-gradient(165deg,#2a2440,#17132a 70%,#0e0b1c);
  border:1px solid rgba(231,198,107,.55);border-radius:24px;padding:34px 28px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(231,198,107,.4)}
.vc-crown{width:76px;height:76px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;font-size:38px;color:#7a4a00;
  background:linear-gradient(135deg,#ffe9a8,#f59e0b);
  box-shadow:0 0 0 6px rgba(247,183,51,.18),0 10px 26px rgba(245,158,11,.55);
  animation:vcCrown 2.4s ease-in-out infinite}
@keyframes vcCrown{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.05)}}
.vc-sub{font-size:13px;color:rgba(231,198,107,.78);letter-spacing:3px}
.vc-name{font-size:32px;font-weight:800;margin:6px 0 8px;color:#f3d98b;
  text-shadow:0 2px 12px rgba(245,158,11,.5)}
.vc-tip{font-size:12.5px;color:rgba(240,232,210,.6);margin-bottom:22px}
.vc-btn{border:0;border-radius:999px;padding:11px 34px;font-size:14px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,#ffe9a8,#f59e0b);color:#5c3500;
  box-shadow:0 8px 20px rgba(245,158,11,.4);transition:.2s}
.vc-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
/* 彩带 */
.vc-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vc-piece{position:absolute;top:-30px;opacity:.95;
  animation-name:vcFall;animation-timing-function:cubic-bezier(.2,.6,.4,1);animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes vcFall{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(110vh) rotate(var(--rot,360deg))}}
@media (prefers-reduced-motion:reduce){
  .vc-rays,.vc-crown{animation:none}
}