/* ============================================================
   unify-nav.css —— 把 模型/智能体/灵感广场 三页左侧栏
   视觉统一成工作台 chat 的 workspace-v2 风格（1:1 参考站）
   ============================================================ */

/* ---------- 侧栏整体：宽度/底色与工作台一致 ---------- */
body.wb-page .wb-side {
  width: 264px;
  background: #0c0c0e;
  border-right: 1px solid #1c1c20;
}
body.wb-page .wb-side.collapsed { width: 0; border-right: none; overflow: hidden; }

/* ---------- Logo 区 ---------- */
body.wb-page .wb-brand {
  height: auto;
  padding: 14px 12px 10px;
  border-bottom: none;
  gap: 8px;
}
body.wb-page .wb-logo {
  position: relative; overflow: visible;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #152942 0%, #0b1220 68%);
  border: 1px solid rgba(34,211,238,.38);
  color: #dffaff !important; font-weight: 900; font-size: 16px;
  box-shadow: 0 0 14px rgba(34,211,238,.35), inset 0 0 14px rgba(99,102,241,.22);
  text-shadow: 0 0 10px rgba(34,211,238,.9), 0 0 22px rgba(99,102,241,.6);
  z-index: 0;
}
body.wb-page .wb-logo::before {
  content: ""; position: absolute; inset: -2.5px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #22d3ee, #6366f1 38%, #c084fc 62%, #22d3ee);
  animation: logoSpin 7s linear infinite; filter: blur(.3px); opacity: .9;
}
body.wb-page .wb-logo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.16), transparent 46%);
}
@media (prefers-reduced-motion: reduce) { body.wb-page .wb-logo::before { animation: none; } }
body.wb-page .wb-brand-txt strong { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .02em; }
body.wb-page .wb-brand-txt small {
  font-size: 9.5px; color: #7a7a85;
  text-transform: none; letter-spacing: .02em;
}
body.wb-page .wb-collapse {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid #26262c; background: #16161a; color: #9a9aa5;
}
body.wb-page .wb-collapse:hover { color: #22d3ee; border-color: #22d3ee; }

/* ---------- 4 主导航：横排、上下结构、彩色激活 ---------- */
body.wb-page .wb-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 4px 10px 8px;
  flex-direction: row;
}
body.wb-page .wb-nav-item {
  position: relative;
  flex-direction: column;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: 9px;
  color: #8a8a95;
  font-size: 10.5px;
  font-weight: 500;
  justify-content: center;
}
body.wb-page .wb-nav-item .nav-ic { width: auto; font-size: 17px; line-height: 1; }
body.wb-page .wb-nav-item .nav-txt { white-space: nowrap; }
body.wb-page .wb-nav-item .nav-fire { position: absolute; top: 1px; right: 6px; font-size: 8px; font-style: normal; }
body.wb-page .wb-nav-item:hover { background: #16161c; color: #d6d6e0; }
body.wb-page .wb-nav-item.active { color: #22d3ee; background: rgba(34,211,238,.10); font-weight: 700; }
body.wb-page .wb-nav-item.active .nav-ic { filter: drop-shadow(0 0 6px rgba(34,211,238,.6)); }
body.wb-page .wb-nav-item.active[data-mainnav="agents"] { color: #a78bfa; background: rgba(167,139,250,.12); }
body.wb-page .wb-nav-item.active[data-mainnav="agents"] .nav-ic { filter: drop-shadow(0 0 6px rgba(167,139,250,.6)); }
body.wb-page .wb-nav-item.active[data-mainnav="inspiration"] { color: #f472b6; background: rgba(244,114,182,.12); }
body.wb-page .wb-nav-item.active[data-mainnav="inspiration"] .nav-ic { filter: drop-shadow(0 0 6px rgba(244,114,182,.6)); }
body.wb-page .wb-nav-item.active[data-mainnav="openapi"] { color: #fbbf24; background: rgba(251,191,36,.12); }
body.wb-page .wb-nav-item.active[data-mainnav="openapi"] .nav-ic { filter: drop-shadow(0 0 6px rgba(251,191,36,.6)); }

/* ---------- 内容子区滚动条与间距 ---------- */
body.wb-page .wb-sub { padding: 4px 12px 12px; }

/* ---------- 底部用户区：与工作台同行布局一致 ---------- */
body.wb-page .wb-side-foot {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #1c1c20;
  background: #0c0c0e;
}
body.wb-page .wb-side-foot .wb-recharge { order: 2; width: auto; flex-shrink: 0; padding: 7px 12px; border-radius: 8px;
  background: linear-gradient(135deg,#f97316,#ef4444); color:#fff; font-size:12px; font-weight:700;
  flex-direction: column; line-height: 1.1; gap: 0; }
body.wb-page .wb-side-foot .wb-user { order: 1; flex: 1; min-width: 0; padding: 0; gap: 8px; }
body.wb-page .wb-side-foot .wb-user .u-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,#22d3ee,#6366f1); font-size: 13px;
}
body.wb-page .wb-side-foot .wb-user .u-info strong { font-size: 12px; color: #ececf2; max-width: 78px; }
body.wb-page .wb-side-foot .wb-user .u-info small { font-size: 10.5px; color: #fbbf24; }
body.wb-page .wb-side-foot .foot-full { display: none; } /* 主题/退出收进个人页，对齐参考站 */
body.wb-page .wb-side-foot .wb-login-btn { width: 100%; }

/* 未登录时底部仍占整行 */
body.wb-page .wb-side-foot:has(.wb-login-btn) { flex-direction: column; }

/* Q7：价格查询标题图标与左上角品牌星标统一（圆形青蓝渐变 + 白色“星”） */
.price-page h1 { display: flex; align-items: center; gap: 9px; }
.price-page h1 .ico { width: 30px; height: 30px; border-radius: 50% !important; font-weight: 900; background: linear-gradient(135deg, #22d3ee, #0ea5e9 55%, #6366f1) !important; box-shadow: 0 0 12px rgba(34,211,238,.35); display: inline-flex; align-items: center; justify-content: center; }