/* ============================================================
   小乐AI获客系统 — 科技感深色主题（侧边栏布局）
   ============================================================ */
:root {
  --bg: #070b16;
  --bg-2: #0c1322;
  --panel: rgba(18, 26, 44, 0.72);
  --panel-solid: #111a2e;
  --panel-border: rgba(96, 165, 250, 0.18);
  --text: #e6edf6;
  --text-dim: #8b9bb4;
  --neon-blue: #38bdf8;
  --neon-purple: #a78bfa;
  --neon-cyan: #22d3ee;
  --accent-grad: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #a78bfa 100%);
  --danger: #f87171;
  --ok: #34d399;
  --radius: 14px;
  --shadow-neon: 0 0 24px rgba(56, 189, 248, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--text-dim); font-size: 13px; }
.mt { margin-top: 18px; }

/* ---------- 背景装饰 ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
}
.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 12% 8%, rgba(56, 189, 248, 0.16), transparent 70%),
    radial-gradient(600px 500px at 88% 92%, rgba(167, 139, 250, 0.14), transparent 70%);
  animation: glowDrift 16s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  0%   { background-position: 0% 0%, 100% 100%; opacity: .85; }
  100% { background-position: 10% 6%, 90% 94%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bg-glow, .logo-icon, .logo-ring, .logo-core { animation: none !important; } }

/* ---------- 通用元素 ---------- */
input, textarea, select {
  width: 100%;
  background: rgba(6, 11, 22, 0.7);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--neon-blue);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
textarea { resize: vertical; line-height: 1.5; }

.btn {
  cursor: pointer; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  padding: 11px 18px; transition: transform .12s, box-shadow .2s, opacity .2s, background .2s;
  color: #fff; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent-grad); color: #051322; box-shadow: var(--shadow-neon); position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer { 0%, 60% { left: -120%; } 85%, 100% { left: 140%; } }
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 32px rgba(56, 189, 248, 0.45); }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid rgba(139, 155, 180, 0.3); }
.btn-ghost:hover { color: var(--text); border-color: var(--text); }
.btn-mini { padding: 6px 14px; font-size: 13px; background: rgba(56, 189, 248, 0.12); color: var(--neon-blue); border: 1px solid rgba(56, 189, 248, 0.3); }
.btn-mini:hover:not(:disabled) { background: rgba(56, 189, 248, 0.22); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(248, 113, 113, 0.3); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.12); }
.btn.block { width: 100%; }

/* ---- Logo：小乐AI 主 + 获客系统 描述 ---- */
.logo { display: flex; align-items: center; gap: 11px; }
.logo-icon { width: 34px; height: 34px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6)); animation: logoPulse 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(56,189,248,.5)); }
  50% { filter: drop-shadow(0 0 15px rgba(129,140,248,.85)); }
}
/* 新版 logo：轨道环缓慢自转（虚线流动）+ 核心呼吸脉冲 */
.logo-ring { transform-box: fill-box; transform-origin: center; animation: logoSpin 14s linear infinite; }
.logo-core { transform-box: fill-box; transform-origin: center; animation: logoCore 2.6s ease-in-out infinite; }
@keyframes logoSpin { to { transform: rotate(360deg); } }
@keyframes logoCore { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.14); opacity: 1; } }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-main {
  font-size: 21px; font-weight: 800; letter-spacing: 1.5px;
  background: linear-gradient(100deg, #7dd3fc 0%, #818cf8 55%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(129, 140, 248, 0.45));
}
.logo-main b { font-weight: 800; font-style: italic; letter-spacing: 0.5px; }
/* 副标题与主标题等宽：两端对齐撑满主标题宽度（内容获客系统 ↔ 小乐AI 左右对齐）*/
.logo-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; text-align: justify; text-align-last: justify; }
.logo-lg .logo-icon { width: 52px; height: 52px; }
.logo-lg .logo-main { font-size: 30px; }
.logo-lg .logo-desc { font-size: 13px; }

/* ============ 登录页 ============ */
.login-view {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 20px; padding: 40px 34px; backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--shadow-neon);
}
.brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
.login-view .logo-lg { flex-direction: column; gap: 14px; }
.login-view .logo-lg .logo-text { align-items: stretch; }
.tagline { color: var(--text-dim); font-size: 13px; margin-top: 8px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form label { display: flex; flex-direction: column; gap: 7px; }
.login-form label span { font-size: 13px; color: var(--text-dim); }
.login-form .btn { padding: 12px 20px; font-size: 15px; }
.form-error { color: var(--danger); font-size: 13px; min-height: 18px; text-align: center; }
.login-footer { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 24px; letter-spacing: 1px; }

/* ============ 应用骨架 ============ */
.app-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 232px 1fr; }

/* ---- 侧边栏 ---- */
.sidebar {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--panel-border);
  background: rgba(8, 13, 24, 0.7); backdrop-filter: blur(14px);
  padding: 22px 16px; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; justify-content: center; padding: 8px 4px 26px; }
.sidebar-brand .logo { gap: 12px; }
.sidebar-brand .logo-icon { width: 42px; height: 42px; }
.sidebar-brand .logo-main { font-size: 24px; }
.sidebar-brand .logo-desc { font-size: 11px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.nav-group { font-size: 11px; letter-spacing: 1px; color: var(--text-dim); padding: 4px 8px 0; margin-top: 4px; opacity: .8; }
.nav-group:first-child { margin-top: 0; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 16.5px; font-family: inherit;
  padding: 14px 15px; border-radius: 11px; text-align: left;
  transition: all .15s;
}
.nav-item:hover { background: rgba(56, 189, 248, 0.08); color: var(--text); }
.nav-item.active { background: rgba(56, 189, 248, 0.14); color: var(--text); box-shadow: inset 2px 0 0 var(--neon-blue); }
.nav-ico { font-size: 18px; color: var(--neon-blue); width: 20px; text-align: center; }
.sidebar { width: 248px; }
.app-shell { grid-template-columns: 248px 1fr; }

.sidebar-foot { border-top: 1px solid rgba(96, 165, 250, 0.12); padding-top: 16px; }
.user-box { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding: 0 4px; }
.user-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-grad); color: #051322; font-weight: 800; font-size: 16px;
}
.user-meta { overflow: hidden; }
.user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quota { font-size: 11.5px; color: var(--neon-cyan); }
.sidebar-foot .btn { padding: 9px; font-size: 13px; }

/* ---- 主区域 ---- */
.main { padding: 24px 32px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.main-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--panel-border);
}
.main-header h2 { font-size: 22px; font-weight: 700; }

.view { display: flex; flex-direction: column; gap: 20px; }
.view-intro { color: var(--text-dim); font-size: 14px; line-height: 1.7; }
.view-intro b { color: var(--text); font-weight: 600; }

/* ---- 卡片 ---- */
.card {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); padding: 20px; backdrop-filter: blur(12px);
}
.card-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; margin-bottom: 14px;
}
.card-head.between { justify-content: space-between; }
.step-no {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-grad); color: #051322; font-size: 13px; font-weight: 800;
}
.row { display: flex; gap: 12px; align-items: stretch; }
.row textarea, .row input { flex: 1; }
.row .btn { align-self: stretch; }
.btn-row { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.btn-hot {
  background: rgba(248, 113, 113, 0.12); color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.4);
}
.btn-hot:hover:not(:disabled) { background: rgba(248, 113, 113, 0.22); color: #fecaca; }

.card-sub { font-size: 13px; color: var(--text-dim); margin: -6px 0 14px; line-height: 1.6; }
.card-sub b { color: var(--neon-cyan); font-weight: 600; }

/* 智能体表单 */
.field-label { display: block; font-size: 13px; color: var(--text-dim); margin: 14px 0 7px; }
.field-label:first-of-type { margin-top: 4px; }
.field-label .req { color: var(--neon-purple); }
#view-agent .card input, #view-agent .card textarea { margin-bottom: 2px; }
#view-agent .save-profile-btn, #view-agent .btn.block { margin-top: 18px; }

/* 时长分段选择器 */
.duration-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.dur-label { font-size: 13px; color: var(--text-dim); flex-shrink: 0; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-btn {
  cursor: pointer; font-family: inherit; font-size: 13px;
  padding: 7px 14px; border-radius: 20px;
  background: rgba(56, 189, 248, 0.06); border: 1px solid rgba(96, 165, 250, 0.2);
  color: var(--text-dim); transition: all .15s;
}
.seg-btn:hover { color: var(--text); border-color: var(--neon-blue); }
.seg-btn.active { background: var(--accent-grad); color: #051322; border-color: transparent; font-weight: 600; }

/* 选题填入文案框时的高亮提示 */
textarea.flash { animation: flashField 0.9s ease; }
@keyframes flashField {
  0% { border-color: var(--neon-purple); box-shadow: 0 0 0 3px rgba(167,139,250,.35); }
  100% { border-color: rgba(96,165,250,.2); box-shadow: none; }
}

.ctx-toggle { display: flex; align-items: center; gap: 9px; margin-top: 13px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.ctx-toggle input { width: auto; }
.ctx-toggle b { color: var(--neon-cyan); font-weight: 600; }

/* 当前内容主攻方向 */
.dir-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.dir-label { font-size: 13px; color: var(--text-dim); flex-shrink: 0; }
.dir-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); cursor: pointer; margin-left: auto; }
.dir-remember input { width: auto; }
.dir-hint { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0 0 8px; }
.dir-badge { color: var(--neon-cyan); cursor: pointer; }
.dir-badge:hover { text-decoration: underline; }

.card-body {
  background: rgba(6, 11, 22, 0.5); border: 1px solid rgba(96, 165, 250, 0.12);
  border-radius: 10px; padding: 16px; min-height: 130px;
}
.placeholder { color: var(--text-dim); font-size: 14px; line-height: 1.7; }

/* 选题框与文案框两个板块等高对齐：卡片拉伸到同高，结果区自动填满剩余空间 */
/* 两块卡片固定同高，结果区内部滚动 → 任何时候都等高对齐、不跳动 */
/* 预留 20 条选题的高度：生成前就保持生成后的板块高度，左右两栏等高对齐（网格 stretch），一眼看全更多内容 */
.result-grid > .card { display: flex; flex-direction: column; min-height: 1040px; }
#topics-result, #script-result { flex: 1 1 auto; min-height: 240px; }
#topics-result::-webkit-scrollbar, #script-result::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 8px; }
#topics-result::-webkit-scrollbar-thumb, #script-result::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: rgba(96,165,250,.25); border-radius: 4px; }

/* 风格克隆：文本框 + 右下角 ＋ 上传 */
.ta-wrap { position: relative; }
.add-file-btn {
  position: absolute; right: 10px; bottom: 12px; width: 32px; height: 32px;
  border-radius: 9px; cursor: pointer; font-size: 20px; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: var(--neon-blue); color: #fff;
  border: 1px solid var(--neon-blue); transition: all .15s;
  box-shadow: 0 2px 8px rgba(47,127,240,.35);
}
.add-file-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(47,127,240,.45); }
.kb-divider { text-align: center; font-size: 12px; color: var(--text-dim); margin: 14px 0 10px; }

/* 风格克隆精简状态条 */
.style-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); font-size: 14px; }
.style-bar b { color: var(--neon-cyan); font-weight: 600; }
.style-bar-note { color: var(--text-dim); font-size: 12.5px; }
.style-bar-links { margin-left: auto; display: flex; gap: 14px; }
.style-bar-links a { color: var(--neon-blue); cursor: pointer; font-size: 13px; }
.style-bar-links a:hover { text-decoration: underline; }

/* 完善知识库 · 清单 + 就地填写（手风琴） */
.kb-progress { display: flex; align-items: center; gap: 10px; }
.kb-progress-bar { width: 110px; height: 7px; border-radius: 6px; background: rgba(120,140,170,.2); overflow: hidden; }
.kb-progress-bar > i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 6px; transition: width .45s ease; }

/* 获客资产展示 */
.asset-group { border: 1px solid var(--panel-border); border-radius: 10px; margin-bottom: 8px; background: rgba(56,189,248,.03); overflow: hidden; }
.asset-group > summary { cursor: pointer; padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 8px; }
.asset-group > summary::-webkit-details-marker { display: none; }
.asset-group[open] > summary { border-bottom: 1px solid var(--panel-border); }
.asset-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--neon-blue); background: rgba(56,189,248,.12); border-radius: 10px; padding: 1px 9px; }
.asset-list { margin: 0; padding: 10px 16px 12px 30px; display: flex; flex-direction: column; gap: 6px; }
.asset-list li { font-size: 13.5px; color: var(--text); line-height: 1.6; }

.kb-groups { display: flex; flex-direction: column; gap: 18px; }
.kb-group-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 9px; flex-wrap: wrap; }
.kb-group-name { font-size: 15px; font-weight: 700; color: var(--text); }
.kb-group-for { font-size: 12px; color: var(--text-dim); }
.kb-group-count { margin-left: auto; font-size: 12.5px; color: var(--text-dim); }
.kb-list, .kb-list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* 资料分类标签 */
.doc-cat-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; margin-right: 8px; vertical-align: 1px; }
.cat-personal { background: rgba(56,189,248,.14); color: var(--neon-blue); }
.cat-enterprise { background: rgba(124,92,255,.14); color: var(--neon-purple); }
.cat-private { background: rgba(52,211,153,.16); color: #1aa67a; }
.cat-customer { background: rgba(251,146,60,.16); color: #c2410c; }
/* 本稿 AI 感标识 */
.ai-taste { font-size: 12.5px; padding: 7px 11px; border-radius: 8px; margin-bottom: 10px; font-weight: 500; }
.ai-taste.ai-low { background: rgba(52,211,153,.12); color: #1aa67a; border: 1px solid rgba(52,211,153,.3); }
.ai-taste.ai-mid { background: rgba(251,191,36,.12); color: #b45309; border: 1px solid rgba(251,191,36,.3); }
.ai-taste.ai-high { background: rgba(248,113,113,.12); color: #c0392b; border: 1px solid rgba(248,113,113,.35); }
.batch-hint { font-size: 12px; line-height: 1.6; margin: 2px 0 12px; }
.iv-mic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; padding: 0; font-size: 18px; }
.iv-mic.recording { background: rgba(248,113,113,.2); border-color: var(--danger); color: var(--danger); animation: pulse 1.1s infinite; }
/* AI 深访 · hero 面板 */
.iv-hero { background: linear-gradient(160deg, rgba(56,189,248,.07), rgba(167,139,250,.06)); border: 1px solid rgba(96,165,250,.28); }
.iv-hero-head { display: flex; align-items: flex-start; gap: 14px; }
.iv-hero-ava {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--accent-grad); box-shadow: 0 4px 14px rgba(56,189,248,.3);
}
.iv-hero-titles { flex: 1; min-width: 0; }
.iv-hero-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: .3px; }
.iv-hero-sub { font-size: 13px; color: var(--text-dim); line-height: 1.7; margin-top: 4px; }
.iv-prog { flex-shrink: 0; font-size: 12.5px; color: var(--text-dim); align-self: center; white-space: nowrap; }
.iv-prog b { color: var(--ok); font-size: 15px; }

/* 5 板块 roadmap */
.iv-stages { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.iv-stage { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; background: rgba(56,189,248,.07); border: 1px solid rgba(96,165,250,.2); }
.iv-stage-no { width: 17px; height: 17px; border-radius: 50%; background: var(--neon-blue); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.iv-stage-ico { font-size: 14px; }
.iv-stage-name { font-size: 12.5px; color: var(--text); font-weight: 600; }
.iv-stage-sep { color: var(--text-dim); opacity: .5; }

/* 欢迎态 */
.iv-welcome { margin-top: 16px; text-align: center; padding: 18px 16px 6px; }
.iv-welcome-tip { font-size: 13px; color: var(--text-dim); line-height: 1.8; max-width: 560px; margin: 0 auto 16px; }
.iv-start-btn { font-size: 15px; padding: 12px 30px; }

/* 知识库体检 · 空白追问 */
.iv-gaps-bar { margin-top: 12px; }
.iv-gaps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.iv-gaps-tip { width: 100%; font-size: 12.5px; color: var(--text-dim); margin-bottom: 2px; }
.iv-gap-chip { font-size: 13px; padding: 7px 13px; border-radius: 20px; cursor: pointer; font-family: inherit;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.4); color: #b45309; transition: all .15s; }
.iv-gap-chip:hover { background: rgba(251,191,36,.2); transform: translateY(-1px); }
.iv-gap-chip.done { opacity: .5; text-decoration: line-through; cursor: default; }

/* 知识库三步导航（可点击切换） */
.kb-flow { display: flex; align-items: stretch; gap: 8px; margin: 6px 0 16px; flex-wrap: wrap; }
.kb-flow-step { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px;
  background: rgba(120,140,170,.05); border: 1px solid var(--panel-border); cursor: pointer; font-family: inherit; text-align: left;
  color: var(--text); transition: all .15s; opacity: .6; }
.kb-flow-step:hover { opacity: 1; border-color: rgba(56,189,248,.5); transform: translateY(-1px); }
.kb-flow-step.is-active { opacity: 1; background: linear-gradient(160deg, rgba(56,189,248,.13), rgba(167,139,250,.1));
  border-color: var(--neon-blue); box-shadow: 0 4px 16px rgba(56,189,248,.2); }
.kb-flow-step.is-done { opacity: 1; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.05); }
.kb-flow-step.is-done .kb-flow-no { background: linear-gradient(135deg,#34d399,#10b981); }
.kb-flow-no { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #051322;
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.kb-flow-tt { display: flex; flex-direction: column; line-height: 1.35; }
.kb-flow-tt b { font-size: 14px; color: var(--text); font-weight: 700; }
.kb-flow-tt i { font-size: 11.5px; color: var(--text-dim); font-style: normal; }
.kb-flow-arrow { align-self: center; color: var(--neon-blue); font-size: 18px; opacity: .7; }

/* AI 深访 · 语音回答开关 */
.iv-voice-btn.on { color: var(--neon-blue); border-color: var(--neon-blue); background: rgba(56,189,248,.12); }

/* 换声音 · 试听器 */
.voice-panel { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 11px; background: rgba(56,189,248,.04); }
.voice-tip { font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.6; }
.voice-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--panel-border); }
.voice-row:last-child { border-bottom: none; }
.voice-row.on { color: var(--neon-blue); }
.voice-name { font-size: 14px; color: var(--text); }
.voice-row.on .voice-name { color: var(--neon-blue); }
.voice-acts { display: flex; gap: 6px; flex-shrink: 0; }
/* 声音复刻 */
.clone-box { border: 1px solid rgba(167,139,250,.35); background: rgba(167,139,250,.06); border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; }
.clone-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.clone-tip { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 8px; }
.clone-script { font-size: 13px; color: var(--text); line-height: 1.7; background: rgba(0,0,0,.14); border-radius: 8px; padding: 9px 11px; margin-bottom: 9px; }
.clone-ctl { display: flex; gap: 8px; margin-bottom: 8px; }
.clone-ctl .on { color: var(--danger); border-color: var(--danger); }
.clone-audio { width: 100%; height: 34px; margin-bottom: 9px; display: block; }
.clone-go { width: 100%; }
.clone-status { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.6; }

/* 三步全程引导：上一步/下一步 */
.kb-nav { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; }
.kb-nav-hint { flex: 1; text-align: center; font-size: 13px; color: var(--text-dim); }

/* 步骤卡（带序号徽标） */
.kb-stage { position: relative; }
/* 每一步铺满主区域，做成"以这个板块为主"的主界面，而不是一个小卡片方框 */
.kb-panel.card { min-height: 56vh; border: none; box-shadow: none; background: transparent; backdrop-filter: none; padding: 14px 2px 8px; }
.kb-panel.iv-hero { background: linear-gradient(160deg, rgba(56,189,248,.08), rgba(167,139,250,.07)); border-radius: var(--radius); padding: 22px 24px; }
.kb-stage-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.kb-stage-no { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-grad); color: #051322;
  font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(56,189,248,.28); }
.kb-stage-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: .3px; }
.kb-stage-head .btn { margin-left: auto; }
.kb-stage-tag { display: inline-block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; color: var(--neon-blue);
  background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.3); border-radius: 20px; padding: 2px 11px; }

/* 步骤1 · 文件投喂 · 板块网格（横版文件夹） */
.feed-grid { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.feed-slot { border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(56,189,248,.035); overflow: hidden; transition: border-color .15s, background .15s; }
.feed-slot:hover { border-color: rgba(56,189,248,.4); }
.feed-slot.is-open { grid-column: 1 / -1; background: rgba(56,189,248,.06); border-color: var(--neon-blue); }
.feed-slot.has-doc { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.04); }
.feed-slot-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 15px; cursor: pointer;
  background: transparent; border: none; font-family: inherit; text-align: left; color: var(--text); }
.feed-slot-ico { flex-shrink: 0; font-size: 24px; line-height: 1; }
.feed-slot-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.feed-slot-name { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.feed-slot-count { font-size: 11.5px; font-weight: 700; color: var(--ok); background: rgba(52,211,153,.15); border-radius: 10px; padding: 1px 8px; }
.feed-slot-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.feed-slot-act { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--neon-blue); background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.32); border-radius: 18px; padding: 6px 14px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.feed-slot:hover .feed-slot-act { background: rgba(56,189,248,.2); }
.feed-slot-act .kb-chevron { transition: transform .2s; }
.feed-slot.is-open .feed-slot-act .kb-chevron { transform: rotate(90deg); }
.feed-slot-body { padding: 4px 15px 16px; }
.feed-slot-body .ta-wrap { margin-bottom: 6px; }
.feed-input { width: 100%; resize: vertical; }
.feed-upload.add-file-btn { bottom: 12px; right: 12px; }
.feed-save { margin-top: 4px; }
/* 我的知识库（嵌在文件投喂这一步里）*/
.feed-docs { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--panel-border); }
.feed-docs-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
/* 上传板块内：上传按钮为主、粘贴为辅 */
.feed-slot-body .feed-upload { margin-bottom: 8px; }
.feed-or { text-align: center; font-size: 12px; color: var(--text-dim); margin: 6px 0; }
/* 已上传知识库：底部折叠二级菜单 */
.feed-docs-fold { margin-top: 22px; border-top: 1px solid var(--panel-border); padding-top: 12px; }
.feed-docs-fold > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text); list-style: none; display: flex; align-items: center; gap: 8px; }
.feed-docs-fold > summary::-webkit-details-marker { display: none; }
.feed-docs-fold > summary::before { content: '▸'; color: var(--neon-blue); transition: transform .2s; }
.feed-docs-fold[open] > summary::before { transform: rotate(90deg); }
.feed-docs-fold > summary .muted { font-weight: 400; }
.feed-docs-fold #docs-list { margin-top: 12px; }

/* AI 访谈 · 30 题表单 */
.iv-form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 6px; }
.iv-q { border: 1px solid var(--panel-border); border-radius: 12px; padding: 13px 15px; background: rgba(56,189,248,.03); }
.iv-q-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.iv-q-no { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-grad); color: #051322; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.iv-q-text { font-size: 14.5px; color: var(--text); line-height: 1.5; font-weight: 600; }
.iv-q-input { display: flex; gap: 8px; align-items: flex-end; }
.iv-a { flex: 1; resize: vertical; min-height: 44px; }
.iv-a-mic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--panel-border); background: rgba(0,0,0,.03); font-size: 18px; cursor: pointer; }
.iv-a-mic:hover { border-color: var(--neon-blue); }
.iv-a-mic.rec { background: rgba(248,113,113,.18); border-color: #f87171; animation: micPulse 1s ease-in-out infinite; }
@keyframes micPulse { 50% { opacity: .55; } }
.iv-form-foot { position: sticky; bottom: 0; background: var(--bg); padding: 14px 0 4px; margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; border-top: 1px solid var(--panel-border); }

/* IP 画像镜子 */
.portrait-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 38vh; gap: 14px; color: var(--text-dim); }
.portrait-cta { font-size: 15px; padding: 12px 28px; margin-top: 4px; }
.portrait-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.portrait-empty-ico { font-size: 52px; opacity: .85; filter: drop-shadow(0 4px 16px rgba(167,139,250,.35)); }
.portrait-empty p { font-size: 14px; line-height: 1.8; max-width: 440px; }
.portrait-empty b { color: var(--text); }
.portrait-out { background: rgba(167,139,250,.06); border: 1px solid rgba(167,139,250,.25); border-radius: 11px; padding: 14px 16px; line-height: 1.8; font-size: 14px; }
.portrait-edit { margin-top: 12px; }
.portrait-edit textarea { margin: 6px 0 10px; }

/* 文案底部操作（标记实绩 / 调教）*/
.script-foot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--panel-border); display: flex; flex-wrap: wrap; gap: 8px; }
.refine-box { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border: 1px solid rgba(167,139,250,.3); border-radius: 10px; background: rgba(167,139,250,.05); }
.refine-box textarea { width: 100%; resize: vertical; }
.refine-tip { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.refine-tip b { color: var(--neon-cyan); }
.refine-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.refine-chip { font-size: 12px; padding: 4px 11px; border-radius: 16px; border: 1px solid var(--panel-border); background: rgba(0,0,0,.04); color: var(--text); cursor: pointer; }
.refine-chip:hover { border-color: var(--neon-blue); color: var(--neon-blue); }

/* IP 顾问开场建议话题 */
.agent-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--panel-border); }
.agent-chips-tip { width: 100%; font-size: 12.5px; color: var(--text-dim); }
.chip { font-size: 12.5px; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--panel-border); background: rgba(0,0,0,.03); color: var(--text); cursor: pointer; }
.chip:hover { border-color: var(--neon-blue); color: var(--neon-blue); }

/* 抖音链接快速学习 */
.dy-learn { margin-top: 18px; padding: 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(0,0,0,.03); }
.dy-learn-head { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.dy-learn-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; margin: 0 0 12px; }
.dy-learn-sub b { color: var(--neon-cyan); }
.dy-learn input, .dy-learn textarea { width: 100%; margin-bottom: 10px; }
.dy-learn textarea { resize: vertical; }
.dy-result:not(:empty) { margin-top: 12px; }
/* 链接入库（step2）：放宽行距与上下间距，更透气 */
#douyin-card .card-sub { line-height: 1.9; margin: -4px 0 18px; }
#douyin-card #dy-link { margin-bottom: 16px; }
#douyin-card .dy-result:not(:empty) { margin-top: 16px; }
.dy-tip { font-size: 13px; color: var(--text); line-height: 1.7; padding: 11px 13px; border-radius: 9px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); }
.dy-card { border: 1px solid rgba(52,211,153,.4); border-radius: 10px; padding: 13px 15px; background: rgba(52,211,153,.05); display: flex; flex-direction: column; gap: 8px; }
.dy-row { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; }
.dy-row b { flex-shrink: 0; width: 64px; color: var(--neon-blue); }
.dy-block { font-size: 13px; }
.dy-block b { color: var(--neon-blue); }
.dy-block ul { margin: 4px 0 0; padding-left: 20px; line-height: 1.7; }
.dy-saved { font-size: 12.5px; color: #0e9f6e; font-weight: 600; }

/* 数据复盘 · 批量导入 */
.fb-bulk-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fb-bulk-row .btn { text-decoration: none; }

/* 文案助手 · 两个 tab（文案大脑 / 爆款翻拍）*/
/* 分段式 tab（segmented control）：紧凑、居左、选中项霓虹高亮 */
.vg-tabs { display: inline-flex; gap: 6px; margin-bottom: 20px; padding: 5px; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 14px; }
.vg-tab { flex: 0 0 auto; min-width: 150px; text-align: center; padding: 10px 24px; border-radius: 10px; border: none; background: transparent; color: var(--text-dim); font-size: 15px; font-weight: 700; cursor: pointer; transition: color .18s, background .18s, box-shadow .18s; }
.vg-tab:hover { color: var(--text); }
.vg-tab.active { background: var(--accent-grad); color: #051322; box-shadow: 0 4px 16px rgba(56,189,248,.35); }
/* 行业下拉 */
.industry-select { padding: 7px 12px; border-radius: 9px; font-size: 13px; max-width: 220px; cursor: pointer; }
.dir-hint-inline { font-size: 12px; color: var(--text-dim); }
.vg-tab:hover { border-color: rgba(56,189,248,.5); }
.vg-tab.active { border-color: transparent; background: var(--accent-grad); color: #051322; box-shadow: var(--shadow-neon); }
.vg-tab.active i { color: rgba(5,19,34,.7); }
.vg-output { margin-top: 16px; }

/* 爆款翻拍 */
.remake-card { margin-top: 0; }
.remake-card textarea, .remake-card input { width: 100%; margin-bottom: 10px; resize: vertical; }

/* 个人中心 */
.center-profile { display: flex; align-items: center; gap: 16px; }
.center-ava { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.center-id { flex: 1; }
.center-name { font-size: 18px; font-weight: 700; color: var(--text); }
.ava-edit-row { display: flex; align-items: center; gap: 16px; margin: 6px 0 14px; }
.ava-edit-preview { width: 64px; height: 64px; font-size: 34px; overflow: hidden; }
.ava-upload-box { display: flex; flex-direction: column; gap: 4px; }
.ava-upload-hint { font-size: 11.5px; color: var(--text-dim); margin: 0; }
.ava-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.ava-opt { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--panel-border); background: rgba(0,0,0,.03); font-size: 22px; cursor: pointer; }
.ava-opt:hover { border-color: var(--neon-blue); }
.ava-opt.active { border-color: transparent; background: var(--accent-grad); box-shadow: 0 0 0 2px rgba(56,189,248,.3); }
.usage-total { font-size: 15px; color: var(--text); margin-bottom: 10px; }
.usage-total b, .center-usage b { color: var(--neon-cyan); }
.usage-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.usage-chip { font-size: 12.5px; padding: 4px 11px; border-radius: 16px; background: rgba(56,189,248,.1); color: var(--text); border: 1px solid var(--panel-border); }
.hist-list, .order-list { display: flex; flex-direction: column; gap: 2px; }
.hist-row, .order-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--panel-border); font-size: 13px; }
.hist-kind, .ord-pkg { flex-shrink: 0; color: var(--neon-blue); min-width: 70px; }
.hist-input { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-tok, .ord-tok { color: var(--text-dim); flex-shrink: 0; }
.hist-at, .ord-at { flex-shrink: 0; font-size: 11.5px; }
.order-row { flex-wrap: wrap; }
.ord-tok, .ord-amt { color: var(--neon-cyan); }
.ord-st { font-size: 11px; padding: 2px 8px; border-radius: 12px; background: rgba(0,0,0,.06); }
.ord-st.paid { color: #0e9f6e; background: rgba(52,211,153,.16); }
.ord-st.pending { color: #d97706; background: rgba(245,158,11,.16); }
.pkg-card { position: relative; }
.pkg-card.best { border-color: rgba(56,189,248,.5); }
.pkg-best { position: absolute; top: -9px; right: 10px; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--accent-grad); color: #051322; font-weight: 700; }
.pkg-desc { font-size: 12px; color: var(--text-dim); margin: 4px 0; }
.pkg-buy { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.pkg-unit { font-size: 13px; color: var(--text-dim); font-weight: 400; margin-left: 2px; }
.pkg-free { color: var(--neon-cyan); font-weight: 800; }
.pkg-feats { list-style: none; padding: 0; margin: 12px 0; text-align: left; display: inline-block; }
.pkg-feats li { font-size: 12.5px; color: var(--text); padding: 3px 0 3px 20px; position: relative; }
.pkg-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--neon-blue); font-weight: 700; }
.pkg-contact { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.pkg-contact b { color: var(--neon-blue); font-size: 14px; }
.pay-btn.wx { color: #07c160; border-color: rgba(7,193,96,.5); }
.pay-btn.ali { color: #1677ff; border-color: rgba(22,119,255,.5); }
.pay-btn.wx:hover { background: rgba(7,193,96,.1); }
.pay-btn.ali:hover { background: rgba(22,119,255,.1); }

/* 扫码支付弹窗 */
.pay-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 200; }
.pay-box { position: relative; background: var(--panel, #fff); border: 1px solid var(--panel-border); border-radius: 16px; padding: 26px 30px; text-align: center; max-width: 320px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.pay-close { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 24px; line-height: 1; color: var(--text-dim); cursor: pointer; }
.pay-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.pay-qr { width: 220px; height: 220px; border-radius: 8px; background: #fff; }
.pay-amt { margin-top: 12px; font-size: 15px; color: var(--neon-cyan); font-weight: 600; }
.pay-status { margin-top: 8px; font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* 新手引导弹窗 */
.onb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 210; padding: 20px; }
.onb-box { background: var(--panel, #fff); border: 1px solid var(--panel-border); border-radius: 18px; padding: 28px 30px; max-width: 440px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.onb-title { font-size: 21px; font-weight: 800; color: var(--text); }
.onb-sub { font-size: 14px; color: var(--text-dim); line-height: 1.7; margin: 8px 0 18px; }
.onb-sub b { color: var(--neon-cyan); }
.onb-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.onb-step { display: flex; gap: 12px; align-items: flex-start; }
.onb-no { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-grad); color: #051322; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.onb-step b { color: var(--text); font-size: 14.5px; }
.onb-step i { display: block; font-style: normal; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-top: 2px; }
.onb-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* 多模型对照 */
.compare-btn { margin-top: 8px; }
/* 每个模型一行铺满（≈原来3列的宽度），内部分上/中/下三个板块 */
.compare-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.compare-col { border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(56,189,248,.03); display: flex; flex-direction: column; overflow: hidden; }
.compare-col.is-best { border-color: rgba(52,211,153,.55); background: rgba(52,211,153,.05); box-shadow: 0 0 0 1px rgba(52,211,153,.22); }
.compare-col.err { background: rgba(248,113,113,.05); border-color: rgba(248,113,113,.3); }
/* 上：模型名 + 标签 + AI感评分 */
.cmp-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--panel-border); background: rgba(0,0,0,.12); }
/* 中：文案正文 */
.cmp-mid { padding: 16px; }
/* 下：操作按钮 */
.cmp-bot { padding: 12px 16px; border-top: 1px solid var(--panel-border); background: rgba(0,0,0,.08); }
.compare-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.compare-tag { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.compare-tag.best { color: #0e9f6e; background: rgba(52,211,153,.16); }
.compare-tag.cur { color: var(--neon-blue); background: rgba(56,189,248,.14); }
.cmp-top .ai-taste { margin: 0; }
.compare-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; line-height: 1.85; font-size: 14.5px; color: var(--text); max-height: 460px; overflow-y: auto;
  padding: 14px 16px; background: rgba(0,0,0,.16); border-radius: 9px; }
.compare-foot { display: flex; gap: 8px; }
.compare-hint { margin-top: 14px; font-size: 12.5px; line-height: 1.7; }

/* 数据飞轮 · 战绩复盘 */
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-form > input[type=text], .fb-form > textarea { width: 100%; }
.fb-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.fb-meta label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-dim); flex: 1; min-width: 130px; }
.fb-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.fb-nums label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-dim); }
.fb-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 11px; margin-bottom: 9px; background: rgba(56,189,248,.03); }
.fb-row-main { flex: 1; min-width: 0; }
.fb-row-title { font-size: 14.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.fb-row-stat { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.fb-row-note { font-size: 12.5px; color: var(--neon-blue); margin-top: 4px; }
.fb-row-act { display: flex; gap: 6px; flex-shrink: 0; }
.fb-badge { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.fb-badge.hit { color: #c2410c; background: rgba(251,146,60,.18); }
.fb-badge.flop { color: var(--text-dim); background: rgba(120,140,170,.14); }
.insight-out { background: linear-gradient(160deg, rgba(56,189,248,.06), rgba(167,139,250,.06)); border: 1px solid rgba(96,165,250,.25); border-radius: 11px; padding: 14px 16px; line-height: 1.8; font-size: 14px; }
.insight-foot { margin-top: 10px; font-size: 12.5px; color: var(--ok); }

/* 对话态 */
.interview-body, .iv-body { margin-top: 14px; }
.iv-messages { height: 420px; overflow-y: auto; border: 1px solid var(--panel-border); border-radius: 12px; padding: 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-2); }
.iv-foot { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* 客户语言库：类型选择 + 间距 */
.cv-type-seg { flex-wrap: wrap; margin-bottom: 10px; }
#customer-voice-card #cv-input { margin-bottom: 12px; }
.doc-cat { font-size: 12px; padding: 5px 8px; border-radius: 8px; max-width: 100px; }
.kb-cat-seg { margin: 6px 0 12px; }
.kb-step { border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(56,189,248,.025); transition: border-color .15s, background .15s, box-shadow .15s; }
.kb-step.is-next { border-color: var(--neon-blue); box-shadow: 0 0 0 3px rgba(47,127,240,.1); }
.kb-step.is-open { border-color: var(--neon-blue); }
.kb-step.is-done { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.06); }

.kb-step-head {
  width: 100%; display: flex; align-items: center; gap: 13px; min-height: 46px;
  padding: 13px 15px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.kb-step-no {
  flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 18px; font-weight: 700; color: var(--neon-blue); background: rgba(47,127,240,.12);
}
.kb-step.is-next .kb-step-no { background: var(--neon-blue); color: #fff; }
.kb-step.is-done .kb-step-no { background: var(--ok); color: #fff; font-size: 16px; }
.kb-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-step-title { font-size: 15.5px; font-weight: 600; color: var(--text); }
.kb-step-tip { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-step.is-done .kb-step-tip { color: var(--ok); }
.kb-step-action { flex-shrink: 0; display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--neon-blue); }
.kb-chevron { display: inline-block; font-size: 12px; transition: transform .2s; }
.kb-step.is-open .kb-chevron { transform: rotate(90deg); }

.kb-step-body { padding: 2px 15px 15px; }
.kb-guide-q { font-size: 13.5px; color: var(--neon-blue); background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.22); border-radius: 9px; padding: 11px 13px; margin: 0 0 12px; line-height: 1.7; }
.kb-step-input { min-height: 138px; }
.kb-step-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.kb-step-foot .block { flex: 1; width: auto; }

.kb-complete-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 13px 15px; border-radius: 11px; line-height: 1.5;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.4); color: var(--ok); font-weight: 600; font-size: 13.5px;
}
.free-form { margin-top: 14px; }

/* 生成视图双栏 */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

/* 选题列表 */
.topics-note {
  font-size: 12.5px; line-height: 1.6; color: #fca5a5;
  background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 9px; padding: 10px 12px; margin-bottom: 12px;
}
.topics-note b { color: #fecaca; }
.topic-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.topic-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 9px;
  background: rgba(56, 189, 248, 0.04); border: 1px solid rgba(96, 165, 250, 0.12);
  cursor: pointer; transition: all .15s; font-size: 14.5px; line-height: 1.5;
}
.topic-item:hover { background: rgba(56, 189, 248, 0.12); border-color: var(--neon-blue); transform: translateX(2px); }
.topic-item.selected { background: rgba(167, 139, 250, 0.16); border-color: var(--neon-purple); }
.topic-num { flex-shrink: 0; font-weight: 700; color: var(--neon-blue); min-width: 20px; }

.script-text { font-size: 15px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }

/* 加载/错误态 */
.loading { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 14px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(56, 189, 248, 0.25); border-top-color: var(--neon-blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-text { color: var(--danger); font-size: 14px; line-height: 1.6; }

.hint { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.hint.warn { color: #fbbf24; }

/* ============ 资料库 ============ */
.kb-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.kb-add-grid input, .kb-add-grid textarea { margin-bottom: 12px; }
.upload-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.file-drop {
  border: 1.5px dashed rgba(96, 165, 250, 0.35); border-radius: 10px;
  padding: 22px; text-align: center; color: var(--text-dim); font-size: 14px;
  cursor: pointer; transition: all .15s; margin-bottom: 12px;
}
.file-drop:hover, .file-drop.drag { border-color: var(--neon-blue); background: rgba(56, 189, 248, 0.06); color: var(--text); }
.file-drop.has-file { border-color: var(--neon-purple); color: var(--text); }

.doc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: 10px; margin-bottom: 8px;
  background: rgba(56, 189, 248, 0.04); border: 1px solid rgba(96, 165, 250, 0.12);
}
.doc-main { flex: 1; min-width: 0; }
.doc-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.doc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 开关 */
.switch { position: relative; display: inline-block; width: 42px; height: 23px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 23px;
  background: rgba(139, 155, 180, 0.3); transition: .2s;
}
.switch-slider::before {
  content: ""; position: absolute; height: 17px; width: 17px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + .switch-slider { background: var(--neon-blue); }
.switch input:checked + .switch-slider::before { transform: translateX(19px); }

/* 管理员表格 */
.admin-row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 1.1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-bottom: 1px solid rgba(96, 165, 250, 0.1); font-size: 14px; }
.admin-row.head { color: var(--text-dim); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--panel-border); }
.admin-row input { padding: 7px 10px; font-size: 13px; }
.admin-row .badge-admin { color: var(--neon-purple); font-size: 12px; }
.admin-row .adm-nick { color: var(--text-dim); font-size: 12px; }
.admin-row .adm-quota { display: flex; gap: 6px; align-items: center; }
.admin-row .adm-quota .quota-input { width: 70px; }
/* 开新账号表单 */
.admin-new { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.admin-new input { padding: 9px 12px; font-size: 14px; flex: 1 1 150px; }
.admin-new input[type="number"] { flex: 0 0 90px; }
.admin-new .btn { flex: 0 0 auto; }
@media (max-width: 600px) {
  .admin-row { grid-template-columns: 1.4fr 0.9fr auto; }
  .admin-row span:nth-child(3), .admin-row span:nth-child(4) { display: none; }
  .admin-new input { flex: 1 1 100%; }
}

/* 弹窗 */
.modal { position: fixed; inset: 0; z-index: 200; background: rgba(4, 8, 18, 0.7); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); }
.modal-card { width: 100%; max-width: 680px; max-height: 80vh; display: flex; flex-direction: column; background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--panel-border); }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 22px; overflow-y: auto; white-space: pre-wrap; line-height: 1.8; font-size: 14.5px; color: var(--text); }

/* ============ 智能体对话 ============ */
.name-setup .row { margin-top: 4px; }
.chat-wrap {
  display: flex; flex-direction: column;
  height: calc(100vh - 116px); min-height: 460px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); backdrop-filter: blur(12px); overflow: hidden;
}
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--panel-border);
}
.chat-agent { display: flex; align-items: center; gap: 12px; }
.agent-ava {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgba(167, 139, 250, 0.15); border: 1px solid rgba(167, 139, 250, 0.35);
}
/* IP顾问 · 赛博朋克机器人头像 */
.agent-ava-bot { background: #0b1426; border: 1px solid rgba(0,212,255,.45); box-shadow: inset 0 0 14px rgba(0,212,255,.2), 0 0 10px rgba(0,212,255,.18); }
.agent-ava-bot svg { width: 32px; height: 32px; filter: drop-shadow(0 0 3px rgba(56,189,248,.55)); }
.bot-eye { animation: botEye 2.8s ease-in-out infinite; }
@keyframes botEye { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { .bot-eye { animation: none; } }
.agent-name-row { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.agent-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.chat-messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 10px; max-width: 82%; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble {
  padding: 11px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.msg.assistant .msg-bubble { background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); border-top-left-radius: 4px; }
.msg.user .msg-bubble { background: rgba(167, 139, 250, 0.16); border: 1px solid rgba(167, 139, 250, 0.3); border-top-right-radius: 4px; }
.msg-ava { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.msg.assistant .msg-ava { background: rgba(56, 189, 248, 0.14); }
.msg.user .msg-ava { background: rgba(167, 139, 250, 0.2); }
.chat-empty { color: var(--text-dim); text-align: center; margin: auto; font-size: 14px; line-height: 1.9; max-width: 460px; }

.chat-input-row { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--panel-border); align-items: flex-end; }
.chat-input-row textarea { flex: 1; resize: none; max-height: 140px; }
.mic-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; cursor: pointer;
  font-size: 19px; background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3); transition: all .15s;
}
.mic-btn:hover { background: rgba(56, 189, 248, 0.2); }
.img-preview { position: relative; display: inline-block; margin: 0 16px 10px; }
.img-preview img { max-height: 90px; max-width: 160px; border-radius: 10px; border: 1px solid var(--panel-border); display: block; }
.img-remove { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; border: none; cursor: pointer; font-size: 14px; line-height: 1; }
.msg-bubble img { max-width: 220px; max-height: 220px; border-radius: 10px; margin-top: 6px; display: block; }
.mic-btn.recording { background: rgba(248, 113, 113, 0.2); border-color: var(--danger); animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.5); } 50% { box-shadow: 0 0 0 7px rgba(248,113,113,0); } }

/* 对话内 AI 回复富文本排版 */
.md-p { margin: 0 0 7px; }
.md-p:last-child { margin-bottom: 0; }
.md-h { font-weight: 700; font-size: 15px; margin: 12px 0 6px; color: #cfe9ff; }
.md-li { margin: 4px 0; padding-left: 4px; }
.md-num { color: var(--neon-blue); font-weight: 700; margin-right: 4px; }
.md-gap { height: 7px; }
.msg-bubble strong { color: #fff; font-weight: 700; }

/* ============ 充值 ============ */
.balance-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: linear-gradient(120deg, rgba(56,189,248,.12), rgba(167,139,250,.12));
  border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 24px 26px;
}
.balance-label { font-size: 13px; color: var(--text-dim); }
.balance-num { font-size: 34px; font-weight: 800; margin: 6px 0 4px; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.balance-used { font-size: 12px; }
.balance-tip { font-size: 13px; color: var(--text-dim); line-height: 1.7; text-align: right; }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 6px; }
.pkg-card { background: rgba(56,189,248,.05); border: 1px solid rgba(96,165,250,.18); border-radius: 12px; padding: 18px; text-align: center; }
.pkg-label { font-size: 13px; color: var(--neon-cyan); }
.pkg-tokens { font-size: 20px; font-weight: 700; margin: 6px 0; }
.pkg-price { font-size: 22px; font-weight: 800; color: #fff; }
.pkg-price small { font-size: 13px; color: var(--text-dim); font-weight: 400; }

.code-gen-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.mini-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-dim); }
.mini-field input { width: 140px; padding: 8px 11px; }
.code-out-item { font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--neon-cyan); background: rgba(6,11,22,.6); border: 1px solid rgba(56,189,248,.2); border-radius: 8px; padding: 9px 12px; margin-top: 8px; user-select: all; }

/* ============ 大模型管理 ============ */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.model-card {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
  padding: 18px; cursor: pointer; transition: all .15s; position: relative;
}
.model-card:hover { border-color: var(--neon-blue); }
.model-card.active { border-color: var(--neon-purple); box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.08); }
.model-card.off { opacity: .6; cursor: not-allowed; }
.model-card-name { font-size: 17px; font-weight: 700; }
.model-card-vendor { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.model-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.badge { font-size: 11.5px; padding: 3px 9px; border-radius: 12px; }
.badge.on { color: var(--ok); background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.3); }
.badge.off { color: var(--text-dim); background: rgba(139, 155, 180, 0.1); border: 1px solid rgba(139, 155, 180, 0.25); }
.badge.cur { color: var(--neon-purple); background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.35); }
.tag-foreign { font-size: 10.5px; color: #fbbf24; border: 1px solid rgba(251,191,36,.35); background: rgba(251,191,36,.1); padding: 2px 7px; border-radius: 10px; }
/* “高级：海外模型”折叠区 */
.adv-foreign { margin-top: 24px; border-top: 1px dashed var(--panel-border); padding-top: 14px; }
.adv-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--text-dim); padding: 6px 2px; }
.adv-toggle:hover { color: var(--text); }
.adv-chevron { transition: transform .2s; font-size: 12px; }
.adv-foreign:not(.collapsed) .adv-chevron { transform: rotate(90deg); }
.adv-foreign.collapsed .adv-body { display: none; }
.adv-note { margin: 10px 0 14px; }
#model-grid-foreign { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* BYOK 自带 key 面板 */
.byok-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--panel-border); cursor: default; display: flex; flex-direction: column; gap: 8px; }
.byok-hint { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
.byok-panel input { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; }
.byok-actions { display: flex; gap: 8px; }
.byok-status { font-size: 12px; line-height: 1.5; min-height: 0; }

/* Toast */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(12, 19, 34, 0.96); border: 1px solid var(--neon-blue); color: var(--text);
  padding: 12px 24px; border-radius: 30px; font-size: 14px; box-shadow: var(--shadow-neon);
  opacity: 0; pointer-events: none; transition: all .3s; z-index: 300;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   ☀️ 浅色（白色）主题 —— 覆盖在最后，靠层叠后写优先生效
   ============================================================ */
:root {
  --bg: #0a0e1a;
  --bg-2: #0c1322;
  --panel: rgba(15, 23, 42, 0.66);
  --panel-solid: #111a2e;
  --panel-border: rgba(0, 212, 255, 0.16);
  --text: #e6f0ff;
  --text-dim: #8aa0c2;
  --neon-blue: #38bdf8;
  --neon-purple: #a78bfa;
  --neon-cyan: #22d3ee;
  --shadow-neon: 0 0 24px rgba(56, 189, 248, 0.22);
}
body { background: var(--bg); color: var(--text); }

/* 背景网格/光晕：深色赛博 */
.bg-grid { background-image:
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px); }
.bg-glow { background:
    radial-gradient(700px 480px at 12% 6%, rgba(0, 212, 255, 0.10), transparent 65%),
    radial-gradient(700px 520px at 88% 94%, rgba(124, 58, 237, 0.12), transparent 65%); }

/* 输入框：深色玻璃 */
input, textarea, select { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(0, 212, 255, 0.18); color: var(--text); }
input::placeholder, textarea::placeholder { color: rgba(230, 240, 255, 0.32); }

/* 面板/卡片：深色玻璃 + 霓虹发丝边 */
.card { background: var(--panel); border: 1px solid var(--panel-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); }
.card-body { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 212, 255, 0.12); }
.sidebar { background: rgba(10, 16, 30, 0.72); }
.chat-wrap { background: var(--panel); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); }
.code-out-item { background: rgba(255, 255, 255, 0.03); }
.login-card { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--shadow-neon); }
.modal-card { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); }

/* 文字颜色（深色赛博下）*/
.md-h { color: var(--neon-cyan); }
.msg-bubble strong { color: #fff; }
.pkg-price { color: #fff; }
.btn-hot { color: #ff7a7a; }
.topics-note { color: #ff9a8b; }
.topics-note b { color: #ffb3a7; }
.hint.warn { color: #fbbf24; }

/* 提示气泡：深色玻璃药丸 + 霓虹边 */
.toast { background: rgba(15, 23, 42, 0.92); color: #e6f0ff; border: 1px solid rgba(0, 212, 255, 0.25); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

/* 对话气泡：你/AI 一眼可分 */
.msg.assistant .msg-bubble { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.30); }
.msg.user .msg-bubble { background: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.36); }

/* 选题列表 / 多模型对照：深色底 + 霓虹边 */
.compare-text { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 212, 255, 0.14); }
.topic-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 212, 255, 0.14); }
.topic-item:hover { background: rgba(56, 189, 248, 0.10); border-color: var(--neon-blue); }

/* ---- 响应式 ---- */
@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
  .sidebar-brand { padding: 0; }
  .sidebar-nav { flex-direction: row; flex: 1; gap: 4px; flex-wrap: wrap; }
  .nav-group { display: none; }
  .nav-item span:not(.nav-ico) { display: none; }
  .nav-item { padding: 10px 12px; }
  .sidebar-foot { border-top: none; padding-top: 0; display: flex; align-items: center; gap: 12px; }
  .sidebar-foot .user-box { margin-bottom: 0; }
  .result-grid, .kb-add-grid { grid-template-columns: 1fr; }
  .result-grid > .card { height: auto; min-height: 0; }
  #topics-result, #script-result { min-height: 340px; max-height: 70vh; }
  .main { padding: 18px; }
  /* 知识库清单：窄屏下保存/收起竖排，保证触摸目标足够大 */
  .kb-step-foot { flex-direction: column; align-items: stretch; }
  .kb-step-foot .btn { width: 100%; min-height: 44px; }
}

/* 手机竖屏：进一步收紧，避免溢出/挤压 */
@media (max-width: 600px) {
  .main { padding: 14px; }
  .card { padding: 16px; }
  .center-profile { flex-wrap: wrap; }
  .dir-row { flex-direction: column; align-items: stretch; }
  .dir-remember { margin-left: 0; }
  .compare-text { max-height: 52vh; }
  .compare-col { font-size: 14px; }
  .kb-flow-arrow { display: none; }
  .kb-flow-step { min-width: 44%; }
  .pay-box { max-width: 88vw; padding: 22px 20px; }
  .pay-qr { width: 200px; height: 200px; }
  .pkg-buy { gap: 6px; }
  .order-row, .hist-row { font-size: 12px; }
}
@media (max-width: 460px) {
  .logo-desc, .sidebar-brand .logo-desc { display: none; }
  .sidebar-brand .logo-main { font-size: 19px; }
  .nav-item { padding: 8px 10px; }
  .btn { padding: 9px 12px; }
}

/* ============================================================
   视觉升级 v2（2026-06-22）：更克制、更高级、更有科技感
   只增强深度/留白/交互，不动渐变与字色耦合，避免对比度回归
   ============================================================ */
:root {
  --bg: #0a0e1a;
  --panel-border: rgba(0, 212, 255, 0.16);
  --text: #e6f0ff;
  --text-dim: #8aa0c2;
  --radius: 16px;
}
/* 背景：深色赛博径向辉光（与登录页同源，工作区用静态辉光、不放粒子动画保持清爽）*/
body { background:
    radial-gradient(900px 600px at 8% -6%, rgba(0,212,255,.07), transparent 55%),
    radial-gradient(900px 620px at 100% 106%, rgba(124,58,237,.08), transparent 55%),
    #0a0e1a; }

/* 卡片：深色玻璃 + 霓虹发丝边 + 悬浮辉光 */
.card { background: rgba(15,23,42,.66); border: 1px solid var(--panel-border); border-radius: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card:hover { box-shadow: 0 14px 44px rgba(0,0,0,.55), var(--shadow-neon); border-color: rgba(0,212,255,.32); }
/* 知识库步骤大卡：透明无框、且不要 hover 浮起（用户反馈：没点就冒个透明框，干扰）*/
.kb-stage:hover { box-shadow: none; transform: none; }

/* 按钮：圆角统一 + 主按钮悬浮上抬 + 幽灵按钮霓虹发丝边 */
.btn { border-radius: 11px; transition: transform .12s ease, box-shadow .2s ease, background .2s, border-color .2s, color .2s, filter .2s; }
.btn-primary { box-shadow: 0 6px 20px rgba(56,189,248,.35); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(56,189,248,.5); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-ghost { border: 1px solid rgba(0,212,255,.22); background: rgba(255,255,255,.03); color: var(--text); }
.btn-ghost:hover { color: var(--neon-blue); border-color: var(--neon-blue); background: rgba(56,189,248,.10); }
.btn:disabled { opacity: .5; cursor: default; }

/* 输入：发丝边 + 聚焦霓虹环 */
input, textarea, select { border: 1px solid rgba(0,212,255,.18); border-radius: 11px; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(0,212,255,.55); box-shadow: 0 0 0 3px rgba(0,212,255,.14); }

/* 侧边栏：深色玻璃 + 激活项霓虹高亮 */
.sidebar { background: rgba(10,16,30,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid rgba(0,212,255,.12); }
.nav-item { border-radius: 11px; transition: background .15s, color .15s, box-shadow .15s; }
.nav-item:hover { background: rgba(56,189,248,.08); color: var(--text); }
.nav-item.active { background: rgba(56,189,248,.14); color: var(--text); box-shadow: inset 3px 0 0 var(--neon-blue); font-weight: 600; }

/* 标题与留白 */
.view-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.view-intro { font-size: 14px; line-height: 1.75; }
.card-head { font-weight: 700; }

/* 文案助手：板块之间拉开距离（解决"贴太紧"）*/
.step-card { margin-bottom: 2px; }
.result-grid { margin-top: 18px; }
.vg-tabs { margin-bottom: 20px; }
.script-out { margin-top: 14px; }

/* 标签页样式见上方"分段式 tab"（segmented control），此处不再叠加阴影/浮起 */

/* ===== 登录页 · 科技版动态 UI（移植自旧版"网红AI管理系统"，仅作用于登录页）===== */
.login-view.cyber { background: #0a0e1a; overflow: hidden; }
.login-view.cyber #neural-canvas { position: absolute; inset: 0; z-index: 1; display: block; }
.login-view.cyber .cyber-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0,212,255,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(124,58,237,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(0,230,118,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(59,130,246,.06) 0%, transparent 40%); }
.login-view.cyber .auth-lines { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.login-view.cyber .flow-line { position: absolute; height: 1px; animation: flowLine linear infinite; }
.login-view.cyber .line-1 { width: 40%; top: 20%; background: linear-gradient(90deg, transparent, rgba(0,212,255,.4), transparent); animation-duration: 7s; animation-delay: 0s; }
.login-view.cyber .line-2 { width: 35%; top: 45%; background: linear-gradient(90deg, transparent, rgba(124,58,237,.35), transparent); animation-duration: 9s; animation-delay: -3s; }
.login-view.cyber .line-3 { width: 50%; top: 70%; background: linear-gradient(90deg, transparent, rgba(0,230,118,.25), transparent); animation-duration: 11s; animation-delay: -5s; }
.login-view.cyber .line-4 { width: 30%; top: 35%; background: linear-gradient(90deg, transparent, rgba(0,212,255,.3), transparent); animation-duration: 8s; animation-delay: -1s; }
.login-view.cyber .line-5 { width: 45%; top: 85%; background: linear-gradient(90deg, transparent, rgba(59,130,246,.3), transparent); animation-duration: 10s; animation-delay: -7s; }
.login-view.cyber .line-6 { width: 25%; top: 55%; background: linear-gradient(90deg, transparent, rgba(124,58,237,.25), transparent); animation-duration: 12s; animation-delay: -2s; }
@keyframes flowLine { 0% { left: -55%; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: 110%; opacity: 0; } }

.login-view.cyber .login-card { position: relative; z-index: 10;
  background: rgba(13,20,38,.72); border: 1px solid rgba(0,212,255,.18);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 60px rgba(0,212,255,.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.login-view.cyber .logo-main { color: #eaf2ff; }
.login-view.cyber .logo-desc { color: #7fd8ff; }
.login-view.cyber .tagline { color: #8aa0c2; }
.login-view.cyber .login-form label span { color: #9fb3d1; }
.login-view.cyber .login-form input { background: rgba(255,255,255,.04); border: 1px solid rgba(0,212,255,.18); color: #e6f0ff; }
.login-view.cyber .login-form input::placeholder { color: rgba(230,240,255,.32); }
.login-view.cyber .login-form input:focus { border-color: rgba(0,212,255,.55); box-shadow: 0 0 0 3px rgba(0,212,255,.12); outline: none; }
.login-view.cyber .form-error { color: #ff8a8a; }
.login-view.cyber .login-footer { color: #6a7fa0; }
.login-contact { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-top: 16px; }
.login-contact b { color: var(--neon-blue); font-weight: 700; }
.login-view.cyber .login-alt { margin-top: 20px; }
.login-view.cyber .login-alt-sep { display: flex; align-items: center; gap: 12px; color: #6a7fa0; font-size: 12px; margin-bottom: 14px; }
.login-view.cyber .login-alt-sep::before, .login-view.cyber .login-alt-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,212,255,.18), transparent); }
.login-view.cyber .login-alt-btns { display: flex; gap: 12px; }
.login-view.cyber .alt-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 10px; border-radius: 11px; cursor: pointer; font-size: 13.5px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(0,212,255,.16); color: #cfe3ff;
  transition: border-color .2s, background .2s, transform .12s; }
.login-view.cyber .alt-btn:hover { border-color: rgba(0,212,255,.5); background: rgba(0,212,255,.08); transform: translateY(-1px); }
.login-view.cyber .alt-ico { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .login-view.cyber .flow-line { animation: none; opacity: .5; } }
/* 3D 全息核心（旧版科技 UI 的右侧悬浮件，仅宽屏显示）*/
.login-view.cyber .ai-hologram-wrapper { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); z-index: 5; pointer-events: none; animation: holoFloat 8s ease-in-out infinite; }
.login-view.cyber .ai-hologram-wrapper canvas { width: 400px; height: 500px; display: block; }
@keyframes holoFloat { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 10px)); } }
@media (max-width: 1099px) { .login-view.cyber .ai-hologram-wrapper { display: none; } }
@media (prefers-reduced-motion: reduce) { .login-view.cyber .ai-hologram-wrapper { animation: none; } }
/* 头像图片（微信扫码登录拿到的 URL 头像）：填满圆形头像位 */
.ava-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* 手机号登录弹窗 */
.phone-box { max-width: 340px; width: 92vw; }
.phone-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; }
.phone-fields input { width: 100%; padding: 11px 14px; }
.phone-code-row { display: flex; gap: 10px; }
.phone-code-row input { flex: 1; }
.phone-code-row .btn { white-space: nowrap; flex-shrink: 0; }
.phone-fields .form-error { text-align: center; }

/* ===== 字号整体上调（第十四轮：原来偏小，适当放大以适配版心）===== */
body { font-size: 16px; }
#view-title, .view-title { font-size: 25px; }
.view-intro { font-size: 15.5px; line-height: 1.8; }
.card-head { font-size: 17.5px; }
.card-sub { font-size: 14.5px; }
.placeholder { font-size: 15px; }
.hint { font-size: 13.5px; }
.muted { font-size: 13.5px; }
.nav-item { font-size: 15.5px; }
.btn { font-size: 15px; }
.btn-mini { font-size: 13.5px; }
input, textarea, select { font-size: 15.5px; }
.script-text { font-size: 16.5px; line-height: 1.85; }
.topic-item { font-size: 15px; }
.msg-bubble { font-size: 15.5px; line-height: 1.7; }
#chat-input, .chat-input { font-size: 15.5px; }
.seg-btn { font-size: 14px; }
.kb-stage-title { font-size: 18.5px; }
.field-label, .login-form label span { font-size: 14px; }

/* ===== 充值页 · 整版定价（第十六轮：拉开、做大、做酷）===== */
.pricing-hero { text-align: center; margin: 18px 0 26px; }
.pricing-title { font-size: 27px; font-weight: 800; margin: 0 0 8px; letter-spacing: .5px;
  background: linear-gradient(100deg, #7dd3fc, #818cf8 55%, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pricing-sub { font-size: 15px; color: var(--text-dim); margin: 0; }
.pricing-foot { text-align: center; margin-top: 22px; }
#view-recharge .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; margin: 0; }
#view-recharge .pkg-card {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: rgba(15, 23, 42, .6); border: 1px solid var(--panel-border); border-radius: 20px;
  padding: 34px 26px 28px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .4); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#view-recharge .pkg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 54px rgba(0, 0, 0, .55), 0 0 32px rgba(56, 189, 248, .2); border-color: rgba(0, 212, 255, .42); }
#view-recharge .pkg-card.best { border-color: rgba(56, 189, 248, .6); transform: scale(1.045);
  background: linear-gradient(180deg, rgba(56, 189, 248, .12), rgba(15, 23, 42, .6));
  box-shadow: 0 20px 54px rgba(0, 0, 0, .5), 0 0 40px rgba(56, 189, 248, .28); }
#view-recharge .pkg-card.best:hover { transform: scale(1.045) translateY(-6px); }
#view-recharge .pkg-best { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: 2px; padding: 5px 18px; border-radius: 20px;
  background: var(--accent-grad); color: #051322; font-weight: 800; box-shadow: 0 6px 18px rgba(56, 189, 248, .5); }
#view-recharge .pkg-label { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
#view-recharge .pkg-price { font-size: 42px; font-weight: 800; color: #fff; line-height: 1.1; }
#view-recharge .pkg-unit { font-size: 15px; }
#view-recharge .pkg-free { font-size: 38px; color: var(--neon-cyan); }
#view-recharge .pkg-desc { font-size: 13.5px; color: var(--text-dim); margin: 8px 0 2px; }
#view-recharge .pkg-feats { list-style: none; padding: 0; margin: 20px 0; text-align: left; flex: 1; display: block; }
#view-recharge .pkg-feats li { font-size: 14px; color: var(--text); padding: 7px 0 7px 24px; position: relative; }
#view-recharge .pkg-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--neon-blue); font-weight: 800; }
#view-recharge .pkg-buy, #view-recharge .pkg-contact { margin-top: auto; padding-top: 8px; }
#view-recharge .pkg-contact { font-size: 13.5px; color: var(--text-dim); line-height: 1.7; }
#view-recharge .pkg-contact b { color: var(--neon-blue); font-size: 16px; }
#view-recharge .pkg-buy .btn { width: 100%; }
@media (max-width: 860px) { #view-recharge .pkg-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } #view-recharge .pkg-card.best { transform: none; } }