/* ==================================================================
 * TapNow theme overlay for ai-drama  ——  v2
 * 把 ai-drama 全站从 Apple 黑（#000 + #2997ff）迁移到 tapnow 同款
 * 「墨蓝 4 阶 + 紫罗兰 #7c4dff + 12px 圆角 + 毛玻璃 + 渐变辉光」。
 *
 * 设计原则：
 *   1. 仅动「视觉」，不动「布局/交互」——不改 width/height/position/display
 *   2. 一律 !important（叠在各页面专属 css 之后）
 *   3. tokens 单一真源，所有颜色/圆角/阴影都从 :root 拿
 *   4. 保留 cs-* / chat-shell / nav-chip 命名（它们本来就是 tapnow 风）
 *
 * 维护者：每加一个页面，先看本文件是否已经覆盖通用 class；
 *   若覆盖了就直接生效，无需改页面 CSS。只有新出现的「页面独有 class」
 *   才需要在本文件最后的「页面专属增强」一节加。
 * ================================================================== */

:root {
  /* ── 背景层（tapnow 4 阶墨蓝） ───────────────────────────── */
  --tnx-bg-base: #07080c;
  --tnx-bg-surface: #0e1016;
  --tnx-bg-elevated: rgba(20, 22, 30, 0.88);
  --tnx-bg-card: rgba(28, 30, 38, 0.78);
  --tnx-bg-card-hover: rgba(40, 43, 53, 0.92);
  --tnx-bg-input: rgba(15, 17, 24, 0.92);
  --tnx-bg-overlay: rgba(8, 9, 13, 0.66);

  /* ── 描边 ─────────────────────────────────────────────── */
  --tnx-border: rgba(255, 255, 255, 0.08);
  --tnx-border-strong: rgba(255, 255, 255, 0.16);
  --tnx-border-accent: rgba(124, 77, 255, 0.35);

  /* ── 文字 ─────────────────────────────────────────────── */
  --tnx-fg: #f3f5f8;
  --tnx-fg-muted: rgba(232, 234, 239, 0.62);
  --tnx-fg-dim: rgba(232, 234, 239, 0.4);

  /* ── 强调色（tapnow 紫罗兰） ─────────────────────────── */
  --tnx-accent: #8b6dff;
  --tnx-accent-strong: #7c4dff;
  --tnx-accent-soft: rgba(124, 77, 255, 0.16);
  --tnx-accent-glow: rgba(124, 77, 255, 0.45);
  --tnx-accent-2: #5c6bc0;
  --tnx-link: #a78bfa;

  /* ── 状态色 ────────────────────────────────────────────── */
  --tnx-credit: #ffd60a;
  --tnx-danger: #ff5e6c;
  --tnx-success: #69f0ae;
  --tnx-warn: #ffb74d;
  --tnx-info: #60a5fa;

  /* ── 几何 ─────────────────────────────────────────────── */
  --tnx-radius-sm: 8px;
  --tnx-radius: 12px;
  --tnx-radius-lg: 18px;
  --tnx-radius-pill: 999px;

  /* ── 阴影 ─────────────────────────────────────────────── */
  --tnx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --tnx-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --tnx-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --tnx-shadow-glow: 0 8px 24px var(--tnx-accent-glow);

  /* ── 字体 ─────────────────────────────────────────────── */
  --tnx-font: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
              "Microsoft YaHei", "Segoe UI", sans-serif;
  --tnx-font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;

  color-scheme: dark;
}

html {
  color-scheme: dark;
}

/* ============================================================
 * 全局基底（背景渐变 + 字体）
 * ============================================================ */
html, body {
  background:
    radial-gradient(1200px 800px at 18% -10%, rgba(124, 77, 255, 0.16) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(48, 142, 255, 0.10) 0%, transparent 60%),
    var(--tnx-bg-base) !important;
  color: var(--tnx-fg) !important;
  font-family: var(--tnx-font) !important;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* 通用文字色 */
.muted, .desc, .sub, .hint { color: var(--tnx-fg-muted) !important; }
.dim { color: var(--tnx-fg-dim) !important; }

/* 链接 */
a { color: var(--tnx-link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--tnx-accent); }

/* hr / divider */
hr { border: 0; border-top: 1px solid var(--tnx-border); margin: 16px 0; }

/* ============================================================
 * 顶栏 topbar
 * ============================================================ */
.topbar {
  background: rgba(12, 13, 18, 0.65) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--tnx-border) !important;
}
.topbar .brand {
  color: var(--tnx-fg) !important;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.topbar .login-btn {
  background: var(--tnx-accent-strong) !important;
  color: #fff !important;
  border-radius: var(--tnx-radius) !important;
  padding: 7px 16px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 16px var(--tnx-accent-glow);
  transition: filter .18s, transform .18s;
  border: 0 !important;
}
.topbar .login-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* 积分徽章 */
#creditsBadge:not([style*="display:none"]):not([style*="display: none"]),
.credits-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  height: 28px;
  border-radius: var(--tnx-radius-pill);
  background: rgba(255, 214, 10, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.25);
  color: var(--tnx-credit) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
#creditsBadge:not([style*="display:none"]):not([style*="display: none"])::before,
.credits-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tnx-credit);
  box-shadow: 0 0 6px rgba(255, 214, 10, 0.7);
}

/* ============================================================
 * 首页 page hero + cards（基础版，index.html 改完后会有更多 .home-* 类）
 * ============================================================ */
.page {
  padding: 96px 24px 80px !important;
}

.logo {
  font-size: 52px !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #ffffff 0%, #b6b9c5 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1.2px !important;
  margin-bottom: 14px !important;
}
.tagline {
  color: var(--tnx-fg-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  margin-bottom: 56px !important;
}

/* 卡片库 */
.cards {
  gap: 18px !important;
  max-width: 1080px !important;
}
.card {
  position: relative;
  background: var(--tnx-bg-card) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius-lg) !important;
  padding: 32px 28px 28px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s !important;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.08), transparent 55%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.card:hover {
  background: var(--tnx-bg-card-hover) !important;
  border-color: var(--tnx-border-strong) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--tnx-shadow-lg), 0 0 0 1px var(--tnx-accent-soft);
}
.card:hover::before { opacity: 1; }
.card h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -.3px !important;
  margin-bottom: 10px !important;
  color: var(--tnx-fg) !important;
}
.card .desc {
  font-size: 13.5px !important;
  color: var(--tnx-fg-muted) !important;
  line-height: 1.7 !important;
  margin-bottom: 22px !important;
}
.card .meta {
  gap: 14px !important;
  border-top: 1px solid var(--tnx-border);
  padding-top: 14px;
}
.card .meta span {
  font-size: 11px !important;
  color: var(--tnx-fg-dim) !important;
}
.card .meta span b {
  color: var(--tnx-fg-muted) !important;
  font-weight: 500 !important;
  margin-right: 4px;
}

/* footer 链接 */
.footer a {
  color: var(--tnx-fg-muted) !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--tnx-border);
  border-radius: var(--tnx-radius-pill) !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: background .18s, color .18s, border-color .18s;
}
.footer a:hover {
  background: rgba(124, 77, 255, 0.14) !important;
  color: var(--tnx-fg) !important;
  border-color: var(--tnx-accent-soft) !important;
}

/* ============================================================
 * 通用按钮系统 .btn / .btn-primary / .btn-ghost / .btn-danger
 * 各页面用 button 或 .btn 都会被 hit；不动尺寸，仅改颜色/边框/圆角
 * ============================================================ */
.btn,
button.btn,
.start-btn,
.confirm-btn,
.gen-btn,
.btn-gen,
.new-btn,
.stage-btn,
.tool-btn,
.vt-btn,
.nav-btn,
.btn-export-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
  border-radius: var(--tnx-radius-sm) !important;
  border: 1px solid var(--tnx-border-strong) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--tnx-fg) !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s !important;
  white-space: nowrap;
}
.btn:hover,
button.btn:hover,
.start-btn:hover,
.confirm-btn:hover,
.gen-btn:hover,
.btn-gen:hover,
.new-btn:hover,
.stage-btn:hover,
.tool-btn:hover,
.vt-btn:hover,
.nav-btn:hover,
.btn-export-pdf:hover {
  background: rgba(124, 77, 255, 0.15) !important;
  border-color: var(--tnx-border-accent) !important;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, button:disabled, .btn.disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(.4);
}

/* primary（紫渐变实色） */
.btn-primary,
.btn.primary,
.submit-btn,
.confirm-btn.primary,
.stage-btn.primary,
.stage-btn-active,
.btn-export-pdf.primary {
  background: linear-gradient(180deg, #8b6dff, #7c4dff) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px var(--tnx-accent-glow) !important;
  font-weight: 600 !important;
}
.btn-primary:hover,
.btn.primary:hover,
.submit-btn:hover,
.confirm-btn.primary:hover,
.stage-btn.primary:hover,
.stage-btn-active:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ghost（极简透明） */
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--tnx-border) !important;
  color: var(--tnx-fg-muted) !important;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--tnx-fg) !important;
}

/* danger / success */
.btn-danger {
  background: rgba(255, 94, 108, 0.15) !important;
  border-color: rgba(255, 94, 108, 0.4) !important;
  color: var(--tnx-danger) !important;
}
.btn-danger:hover {
  background: rgba(255, 94, 108, 0.25) !important;
}
.btn-success {
  background: rgba(105, 240, 174, 0.12) !important;
  border-color: rgba(105, 240, 174, 0.35) !important;
  color: var(--tnx-success) !important;
}

/* sm / lg 尺寸 */
.btn-sm { padding: 5px 10px !important; font-size: 12px !important; }
.btn-lg { padding: 12px 22px !important; font-size: 14px !important; }

/* "返回" .back 按钮 */
.back, .nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  font-size: 13px !important;
  color: var(--tnx-fg-muted) !important;
  background: transparent !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius-sm) !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
.back:hover, .nav-back:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--tnx-fg) !important;
}

/* ============================================================
 * 通用面板 / 卡片容器：.section-card / .panel / .review-card / 等
 * ============================================================ */
.section-card,
.panel,
.review-card,
.outline-card,
.material-card,
.upload-card,
.history-card,
.gen-card,
.shot-card,
.project-card,
.ep-card,
.asset-card,
.shared-item,
.stat-card,
.dialog {
  background: var(--tnx-bg-card) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s !important;
  color: var(--tnx-fg);
}
.section-card:hover,
.review-card:hover,
.outline-card:hover,
.material-card:hover,
.history-card:hover,
.project-card:hover,
.ep-card:hover,
.asset-card:hover,
.gen-card:hover,
.shared-item:hover {
  border-color: var(--tnx-border-strong) !important;
  background: var(--tnx-bg-card-hover) !important;
}

/* card header / body 内部小元素（仅文字色微调，不动 layout） */
.section-header, .outline-card-header, .scene-header, .shot-head, .canvas-head,
.chat-title-bar, .chat-shell-header, .ch-head, .rc-head {
  color: var(--tnx-fg) !important;
  border-bottom: 1px solid var(--tnx-border);
}

.preview-pane-body, .outline-card-body, .preview-fulltext, .arc-content, .arc-flow {
  color: var(--tnx-fg) !important;
}

/* ============================================================
 * 通用 sidebar / nav-item
 * ============================================================ */
.sidebar,
.main-content {
  background: rgba(15, 17, 24, 0.6) !important;
  border-right: 1px solid var(--tnx-border) !important;
}
.nav-item {
  color: var(--tnx-fg-muted) !important;
  border-radius: var(--tnx-radius-sm) !important;
  transition: background .15s, color .15s;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--tnx-fg) !important;
}
.nav-item.active {
  background: var(--tnx-accent-soft) !important;
  color: var(--tnx-fg) !important;
  border-left: 2px solid var(--tnx-accent-strong);
}
.nav-num {
  color: var(--tnx-accent) !important;
  font-weight: 600;
}

/* ============================================================
 * 通用 chip / pill / badge
 * ============================================================ */
.pill, .badge, .ep-pill, .mode-pill, .cat-pill, .n-tag, .a-tag, .nav-chip,
.tag, .seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px !important;
  border-radius: var(--tnx-radius-pill) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--tnx-border) !important;
  color: var(--tnx-fg-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pill:hover, .nav-chip:hover, .ep-pill:hover, .mode-pill:hover, .cat-pill:hover,
.seg-btn:hover {
  background: rgba(124, 77, 255, 0.15) !important;
  border-color: var(--tnx-border-accent) !important;
  color: var(--tnx-fg) !important;
}
.pill.active, .nav-chip.active, .ep-pill.active, .mode-pill.active,
.cat-pill.active, .seg-btn.active, .phase-tab.active, .tab.active {
  background: var(--tnx-accent-soft) !important;
  border-color: var(--tnx-border-accent) !important;
  color: var(--tnx-fg) !important;
  box-shadow: 0 0 0 1px var(--tnx-accent-soft) inset;
}

/* badge 状态色 */
.badge.success, .badge.done { background: rgba(105, 240, 174, 0.12) !important;
  color: var(--tnx-success) !important; border-color: rgba(105, 240, 174, 0.3) !important; }
.badge.warn  { background: rgba(255, 183, 77, 0.12) !important;
  color: var(--tnx-warn) !important; border-color: rgba(255, 183, 77, 0.3) !important; }
.badge.danger, .badge.error { background: rgba(255, 94, 108, 0.12) !important;
  color: var(--tnx-danger) !important; border-color: rgba(255, 94, 108, 0.3) !important; }
.badge.info  { background: rgba(96, 165, 250, 0.12) !important;
  color: var(--tnx-info) !important; border-color: rgba(96, 165, 250, 0.3) !important; }

/* segmented 容器 */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius-sm) !important;
}
.segmented .seg-btn {
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
}
.segmented .seg-btn.active {
  background: var(--tnx-accent-soft) !important;
}

/* ============================================================
 * 通用表单 input / textarea / select
 * ============================================================ */
.form-group label, .label, .edit-label-row label {
  color: var(--tnx-fg-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,
select,
.input,
.form-group input,
.form-group textarea,
.form-group select {
  background: var(--tnx-bg-input) !important;
  border: 1px solid var(--tnx-border) !important;
  color: var(--tnx-fg) !important;
  border-radius: var(--tnx-radius-sm) !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .18s, background .18s, box-shadow .18s !important;
  color-scheme: dark;
}

input::placeholder, textarea::placeholder {
  color: var(--tnx-fg-dim) !important;
}

input:focus, textarea:focus, select:focus,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--tnx-accent) !important;
  background: rgba(124, 77, 255, 0.06) !important;
  box-shadow: 0 0 0 3px var(--tnx-accent-soft) !important;
}

select option, select optgroup {
  background-color: var(--tnx-bg-surface);
  color: var(--tnx-fg);
}
input[type="range"] { accent-color: var(--tnx-accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--tnx-accent); }

/* code-btn / social-btn （登录页用） */
.code-btn, .social-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--tnx-border) !important;
  color: var(--tnx-fg) !important;
  border-radius: var(--tnx-radius-sm) !important;
  font-family: inherit !important;
  transition: background .15s, border-color .15s;
}
.code-btn { color: var(--tnx-accent) !important; }
.code-btn:hover, .social-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--tnx-border-strong) !important;
}

.switch-text { color: var(--tnx-fg-muted) !important; }
.switch-text a { color: var(--tnx-accent) !important; font-weight: 500 !important; }

.divider::before, .divider::after { background: var(--tnx-border) !important; }
.divider span { color: var(--tnx-fg-dim) !important; }

.error-msg { color: var(--tnx-danger) !important; }
.success-msg .check { color: var(--tnx-success) !important; }
.success-msg h3 { color: var(--tnx-fg) !important; }
.success-msg p { color: var(--tnx-fg-muted) !important; }

/* ============================================================
 * 上传区域 .upload-zone / .upload-area / .upload-drop / .upload-card
 * ============================================================ */
.upload-zone, .upload-area, .upload-drop, .upload-card, .upload-opt-box,
.ref-placeholder {
  background: rgba(124, 77, 255, 0.04) !important;
  border: 1.5px dashed var(--tnx-border-strong) !important;
  border-radius: var(--tnx-radius) !important;
  color: var(--tnx-fg-muted) !important;
  transition: background .18s, border-color .18s !important;
  cursor: pointer;
}
.upload-zone:hover, .upload-area:hover, .upload-drop:hover,
.upload-card:hover, .upload-opt-box:hover {
  background: rgba(124, 77, 255, 0.10) !important;
  border-color: var(--tnx-border-accent) !important;
  color: var(--tnx-fg) !important;
}
.upload-zone.dragover, .upload-area.dragover, .upload-drop.dragover {
  background: rgba(124, 77, 255, 0.16) !important;
  border-color: var(--tnx-accent) !important;
  color: var(--tnx-fg) !important;
}
.upload-icon, .upload-opt-label { color: var(--tnx-accent) !important; }

/* ============================================================
 * 缩略图 .thumb / .material-thumb / .activity-icon
 * ============================================================ */
.thumb, .material-thumb {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius-sm) !important;
  overflow: hidden;
}
.thumb-add {
  background: rgba(124, 77, 255, 0.06) !important;
  border: 1.5px dashed var(--tnx-border-strong) !important;
  color: var(--tnx-accent) !important;
  border-radius: var(--tnx-radius-sm) !important;
}
.thumb-add:hover {
  background: rgba(124, 77, 255, 0.14) !important;
  border-color: var(--tnx-accent) !important;
}
.activity-icon, .stage-icon, .icon {
  color: var(--tnx-accent) !important;
}

/* ============================================================
 * 表格（review / pipe-b 用）
 * ============================================================ */
table, .shot-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--tnx-bg-card) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius) !important;
  overflow: hidden;
  color: var(--tnx-fg);
}
th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--tnx-fg-muted) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .04em;
  text-align: left;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--tnx-border) !important;
}
td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--tnx-border) !important;
  color: var(--tnx-fg);
  font-size: 13px;
}
tr:last-child td { border-bottom: 0 !important; }
tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* ============================================================
 * Toast / Alert / Hint
 * ============================================================ */
.toast {
  background: rgba(20, 22, 30, 0.94) !important;
  border: 1px solid var(--tnx-border-strong) !important;
  border-left: 3px solid var(--tnx-accent) !important;
  border-radius: var(--tnx-radius-sm) !important;
  color: var(--tnx-fg) !important;
  padding: 10px 14px !important;
  box-shadow: var(--tnx-shadow-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
}
.toast.success { border-left-color: var(--tnx-success) !important; }
.toast.warn    { border-left-color: var(--tnx-warn) !important; }
.toast.error, .toast.danger { border-left-color: var(--tnx-danger) !important; }
.toast.info    { border-left-color: var(--tnx-info) !important; }

/* nav-hint-msg（chat-shell 中的提示气泡） */
.nav-hint-msg {
  background: rgba(96, 165, 250, 0.08) !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
  color: rgba(155, 181, 214, 0.95) !important;
  border-radius: var(--tnx-radius-sm) !important;
}

/* ============================================================
 * Modal / Dialog / Lightbox / Image-modal
 * ============================================================ */
.modal-overlay, .image-modal-inner, .lightbox, .pdf-export-overlay {
  background: var(--tnx-bg-overlay) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.modal, .dialog {
  background: rgba(20, 22, 30, 0.96) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius-lg) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6),
              0 0 0 1px var(--tnx-border) inset;
  color: var(--tnx-fg) !important;
}
.modal h3, .dialog h3, .dialog .title {
  color: var(--tnx-fg) !important;
  letter-spacing: -.3px !important;
}
.modal .modal-sub { color: var(--tnx-fg-muted) !important; }
.modal .close, .dialog .close {
  color: var(--tnx-fg-muted) !important;
  border-radius: var(--tnx-radius-sm) !important;
  background: transparent !important;
  border: 0 !important;
  transition: background .15s, color .15s;
}
.modal .close:hover, .dialog .close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--tnx-fg) !important;
}

/* ============================================================
 * 进度条 / step / progress-step
 * ============================================================ */
.progress-step, .step {
  color: var(--tnx-fg-muted) !important;
}
.progress-step.active, .step.active {
  color: var(--tnx-accent) !important;
}
.progress-step.done, .step.done {
  color: var(--tnx-success) !important;
}

/* spinner / loading */
.spinner, .loading {
  color: var(--tnx-accent) !important;
}
.spinner::after, .loading::after {
  border-color: var(--tnx-accent) transparent transparent transparent !important;
}

/* placeholder（占位） */
.placeholder, .file-ph, .empty-state, .empty {
  color: var(--tnx-fg-dim) !important;
}
.empty-state {
  padding: 32px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed var(--tnx-border) !important;
  border-radius: var(--tnx-radius) !important;
}

/* ============================================================
 * Chat shell / cs-* （tapnow 经典左侧 AI 对话栏，已有底子，做微调）
 * ============================================================ */
.chat-shell-pane {
  background: rgba(15, 17, 24, 0.96) !important;
  border-right: 1px solid var(--tnx-border) !important;
}
.chat-shell-toggle, .chat-pane-toggle {
  background: rgba(28, 30, 38, 0.94) !important;
  color: var(--tnx-fg-muted) !important;
}
.chat-shell-toggle:hover, .chat-pane-toggle:hover {
  background: rgba(40, 43, 53, 0.98) !important;
  color: var(--tnx-fg) !important;
}
.msg-bubble {
  background: var(--tnx-bg-elevated) !important;
  border: 1px solid var(--tnx-border) !important;
  color: var(--tnx-fg) !important;
  border-radius: var(--tnx-radius) !important;
}
.msg-user .msg-bubble {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.22), rgba(139, 109, 255, 0.16)) !important;
  border-color: var(--tnx-border-accent) !important;
}
.bubble {
  background: var(--tnx-bg-elevated) !important;
  border: 1px solid var(--tnx-border) !important;
  color: var(--tnx-fg) !important;
  border-radius: var(--tnx-radius) !important;
}

/* chat 底部 confirm bar */
.confirm-bar, .bottom-bar, .chat-input-row, .quick-go {
  background: rgba(15, 17, 24, 0.92) !important;
  border-top: 1px solid var(--tnx-border) !important;
}

/* ============================================================
 * 工作页布局：.workbench / .preview-pane / .chat-pane / .drawer
 * ============================================================ */
.workbench {
  background: transparent !important;
  color: var(--tnx-fg) !important;
}
.chat-section {
  background: rgba(15, 17, 24, 0.55) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius) !important;
}
.drawer-section, .drawer-media {
  background: rgba(15, 17, 24, 0.55) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius) !important;
  padding: 12px !important;
}

/* ============================================================
 * 价格/数字徽章（log-amount, kv 等）
 * ============================================================ */
.log-amount { color: var(--tnx-credit) !important; font-variant-numeric: tabular-nums; }
.kv { color: var(--tnx-fg-muted) !important; }
.kv b { color: var(--tnx-fg) !important; font-weight: 500 !important; }

/* ============================================================
 * 图标圆形容器（stage-icon / activity-icon 在卡片左上角的圆图标）
 * ============================================================ */
.stage-icon, .activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tnx-accent-soft) !important;
  color: var(--tnx-accent) !important;
  font-size: 16px;
}

/* ============================================================
 * 滚动条（深色系细滚条）
 * ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: var(--tnx-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }

/* ============================================================
 * 选中色
 * ============================================================ */
::selection { background: var(--tnx-accent-soft); color: #fff; }

/* ============================================================
 * 首页（v2 重做后新增的 .home-* 类，与重做后的 index.html 配套）
 * ============================================================ */
.home-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 48px; /* 让出 fixed topbar 的高度 */
}
.home-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 24px 14px;
  border-bottom: 1px solid var(--tnx-border);
  background: rgba(12, 13, 18, 0.5);
  position: sticky;
  top: 48px;
  z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.home-nav .nav-chip {
  cursor: pointer;
  text-decoration: none;
}

.home-hero {
  text-align: center;
  padding: 80px 24px 40px;
  position: relative;
}
.home-hero-eyebrow {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--tnx-radius-pill);
  background: var(--tnx-accent-soft);
  border: 1px solid var(--tnx-border-accent);
  color: var(--tnx-accent) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 22px;
}
.home-hero-title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.1;
  margin-bottom: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #b6b9c5 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero-sub {
  color: var(--tnx-fg-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 40px;
}

.home-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 32px;
}
.home-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.home-section-head h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--tnx-fg);
}
.home-section-head .sub {
  font-size: 12px;
  color: var(--tnx-fg-dim);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tnx-bg-card) !important;
  border: 1px solid var(--tnx-border) !important;
  border-radius: var(--tnx-radius-lg) !important;
  padding: 22px 22px 18px !important;
  text-decoration: none !important;
  color: var(--tnx-fg) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
  overflow: hidden;
}
.home-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.10), transparent 55%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.home-card:hover {
  background: var(--tnx-bg-card-hover) !important;
  border-color: var(--tnx-border-strong) !important;
  transform: translateY(-3px);
  box-shadow: var(--tnx-shadow-lg), 0 0 0 1px var(--tnx-accent-soft);
}
.home-card:hover::before { opacity: 1; }

.home-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--tnx-accent-soft);
  border: 1px solid var(--tnx-border-accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tnx-accent);
  margin-bottom: 16px;
}
.home-card-icon svg { width: 22px; height: 22px; }

.home-card-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--tnx-fg-dim);
  text-transform: uppercase;
}

.home-card-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.2px;
  margin-bottom: 8px;
  color: var(--tnx-fg);
}
.home-card-desc {
  font-size: 13px;
  color: var(--tnx-fg-muted);
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}
.home-card-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--tnx-fg-dim);
  border-top: 1px solid var(--tnx-border);
  padding-top: 12px;
}
.home-card-flow .arrow {
  opacity: .6;
  margin: 0 2px;
}
.home-card-flow b {
  color: var(--tnx-fg-muted);
  font-weight: 500;
  margin-right: 2px;
}

.home-footer {
  margin-top: auto;
  padding: 32px 24px 28px;
  text-align: center;
  border-top: 1px solid var(--tnx-border);
}
.home-footer .footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

@media (max-width: 1100px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .home-hero-title { font-size: 44px; }
}
@media (max-width: 720px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-hero { padding: 56px 18px 24px; }
  .home-hero-title { font-size: 34px; letter-spacing: -.6px; }
  .home-hero-sub { font-size: 14px; }
  .home-section-head h3 { font-size: 16px; }
  .topbar { padding: 0 16px !important; }
  .home-nav { padding: 6px 14px 10px; gap: 4px; }
  .nav-chip { padding: 4px 10px !important; font-size: 11px !important; }
}

/* ============================================================
 * 末尾：兜底 —— 让任何深色面板里残留的 #1d1d1f / #2d2d2f 也不至于
 * 与新背景"撞色断层"。这里做一个温和的 darken 处理。
 * （不是 !important，避免压住更具体的规则）
 * ============================================================ */
[style*="#1d1d1f"], [style*="#2d2d2f"] { /* 占位 selector，提醒维护者：若有 inline 旧色，迁移到 var */ }


/* 2026-05-06 workbench-only calm override: do not use bright primary blocks on project stages */
.project-card .stage-nav{
  background:#101116 !important;
  border-top:1px solid rgba(255,255,255,0.06) !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  gap:8px !important;
  padding:12px 18px !important;
}
.project-card .stage-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-height:58px !important;
  padding:8px 4px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  background:rgba(255,255,255,0.03) !important;
  color:rgba(232,234,239,0.72) !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.project-card .stage-btn:hover{
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.14) !important;
  color:#f3f5f8 !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}
.project-card .stage-btn .stage-icon{
  width:22px !important;
  height:22px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:rgba(124,77,255,0.08) !important;
  color:rgba(167,139,250,0.62) !important;
  opacity:1 !important;
  font-size:11px !important;
  font-weight:700 !important;
}
.project-card .stage-btn .stage-label{
  font-size:12px !important;
  font-weight:600 !important;
}
.project-card .stage-btn-active,
.project-card .stage-btn-active:hover{
  background:rgba(124,77,255,0.08) !important;
  border:1px solid rgba(124,77,255,0.28) !important;
  color:#e8eaef !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.project-card .stage-btn-active .stage-icon{
  background:rgba(124,77,255,0.14) !important;
  color:#a78bfa !important;
  box-shadow:none !important;
}
.project-card .stage-btn-done,
.project-card .stage-btn-done:hover{
  color:rgba(232,234,239,0.62) !important;
}
.project-card .stage-btn-done .stage-icon{
  background:rgba(105,240,174,0.07) !important;
  color:rgba(105,240,174,0.68) !important;
}
.project-card .card-footer{
  background:#16181f !important;
  border-top:0 !important;
}
.project-card .share-btn,
.project-card .del-btn{
  box-shadow:none !important;
}



/* 2026-05-06 pipe-a layout after deleting local AI chat DOM */
#uploadSection.section{padding-bottom:28px !important;}
#chatSection.chat-section.workbench{
  height:auto !important;
  min-height:0 !important;
  gap:0 !important;
  padding-bottom:24px !important;
}
#chatSection.chat-section.workbench .preview-pane{
  flex:1 1 auto !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
}
#chatSection.chat-section.workbench .preview-pane-body{
  flex:0 0 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
#chatSection.chat-section.workbench .preview-empty{height:auto !important;min-height:0 !important;padding:0 !important;}
#chatSection.chat-section.workbench .preview-pane:has(.preview-empty){display:none !important;}