/* ============================================================
   蔡小刀短视频操盘手 — 亮色霓虹主题层 (Light Neon Glass)
   浅色玻璃拟态 + 霓虹渐变点缀, 只改视觉不改结构
   回退方式: 移除 index.html 中本文件引入即可
   ============================================================ */

:root {
  --bg: #f2f7fb;
  --bg-soft: #e9f2f9;
  --card: rgba(255, 255, 255, 0.72);
  --card-2: rgba(255, 255, 255, 0.85);
  --border: rgba(14, 140, 220, 0.14);
  --border-strong: rgba(14, 140, 220, 0.24);
  --text: #221d33;
  --text-2: #46526b;
  --muted: #6b7a94;
  --muted-2: #93a4bd;
  --orange: #f0640a;
  --orange-2: #ff8a3d;
  --orange-soft: rgba(240, 100, 10, 0.10);
  --orange-glow: rgba(240, 100, 10, 0.28);
  --cyan: #0e7490;
  --magenta: #fb7185;
  --purple: #0ea5e9;
  --green: #0f9d5f;
  --danger: #e6354f;
  --grad: linear-gradient(135deg, #ff6a00 0%, #fb7185 100%);
  --grad-text: linear-gradient(135deg, #ff6a00 0%, #fb7185 100%);
  --shadow: 0 14px 40px rgba(14, 140, 220, 0.14);
}

/* ---- 全局: 浅色底 + 柔和光斑 + 极浅网格 ---- */
body {
  background: var(--bg);
  color: var(--text);
}

body::before {
  background:
    radial-gradient(680px 340px at 85% -8%, rgba(14, 165, 233, 0.13), transparent 65%),
    radial-gradient(560px 320px at 4% 20%, rgba(251, 113, 133, 0.08), transparent 60%),
    radial-gradient(760px 440px at 55% 115%, rgba(240, 100, 10, 0.10), transparent 65%),
    radial-gradient(420px 240px at 98% 50%, rgba(14, 165, 233, 0.07), transparent 60%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(14, 165, 233, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
}

/* ---- 漂浮彩色粒子(亮色下淡雅) ---- */
.neon-dot { box-shadow: 0 0 10px currentColor; }
@keyframes neonFloat {
  0%   { transform: translateY(110vh) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 0.4; }
  50%  { opacity: 0.24; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-12vh) translateX(24px) scale(0.6); opacity: 0; }
}

/* ---- 顶部栏 ---- */
.topbar {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(14, 140, 220, 0.16) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---- 渐变文字工具 ---- */
.grad,
.hero h1 .grad,
.big-go,
.menu-sec {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   登录页
   ============================================================ */
.auth-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(14, 165, 233, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 20px 60px rgba(14, 140, 220, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 0, 0.85), rgba(251, 113, 133, 0.85), rgba(14, 165, 233, 0.85), transparent);
  border-radius: 2px;
}
.auth-logo { color: #26344d; }
.auth-logo span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.auth-slogan { color: var(--muted); }
.auth-badge {
  color: #d21e7c;
  border-color: rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.06);
}
.auth-title {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.auth-sub { color: var(--muted); }
.auth-switch a.text-orange { color: #e85d0a !important; }
.auth-foot { color: var(--muted-2); }

.input,
input.input,
textarea.input,
select.input {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(14, 140, 220, 0.22) !important;
  color: var(--text) !important;
}
.input:focus {
  border-color: rgba(251, 113, 133, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.10), 0 4px 18px rgba(14, 165, 233, 0.14) !important;
}

/* ============================================================
   首页 hero + 三大卡片
   ============================================================ */
.hero-badge {
  color: #0284c7;
  border-color: rgba(14, 165, 233, 0.32);
  background: rgba(14, 165, 233, 0.06);
}
.hero-badge .dot { background: #fb7185; box-shadow: 0 0 8px rgba(251, 113, 133, 0.7); }
.hero h1 { color: var(--text); }
.hero-sub { color: var(--muted); }

.big-menu-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(14, 140, 220, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.big-menu-card b { color: var(--text); }
.big-menu-card p { color: var(--muted); }
.big-icon { filter: drop-shadow(0 3px 8px rgba(251, 113, 133, 0.28)); }

.big-start { border-color: rgba(240, 100, 10, 0.34); }
.big-start:hover { border-color: rgba(240, 100, 10, 0.65); box-shadow: 0 16px 42px rgba(240, 100, 10, 0.18); }
.big-create { border-color: rgba(251, 113, 133, 0.32); }
.big-create:hover { border-color: rgba(251, 113, 133, 0.62); box-shadow: 0 16px 42px rgba(251, 113, 133, 0.18); }
.big-workspace { border-color: rgba(14, 165, 233, 0.32); }
.big-workspace:hover { border-color: rgba(14, 165, 233, 0.62); box-shadow: 0 16px 42px rgba(14, 165, 233, 0.18); }

/* ============================================================
   开始页 — 全息 HUD 状态条(亮色玻璃版)
   ============================================================ */
.start-hud {
  position: relative;
  margin: 6px 0 18px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.06), rgba(14, 165, 233, 0.08));
  box-shadow: 0 8px 28px rgba(14, 140, 220, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.start-hud::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -45%;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(14, 165, 233, 0.10), transparent);
  animation: hudScan 3.6s linear infinite;
  pointer-events: none;
}
@keyframes hudScan { 0% { top: -45%; } 100% { top: 115%; } }
.start-hud-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.start-hud-tag {
  font-family: var(--font-en);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.start-hud-pct {
  font-family: var(--font-en);
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em;
  color: #f0640a;
  text-shadow: 0 0 12px rgba(240, 100, 10, 0.25);
}
.start-hud-bar {
  height: 5px; border-radius: 3px;
  background: rgba(14, 140, 220, 0.10);
  border: 1px solid rgba(14, 165, 233, 0.16);
  overflow: hidden;
}
.start-hud-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #ff6a00, #0ea5e9);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
  border-radius: 3px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.start-hud-sub { margin-top: 8px; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; font-family: var(--font-en); }

/* 卡片: 白色玻璃 + 渐变描边 + 编号/角标/完成态 */
.menu-card {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(14, 140, 220, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.menu-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 113, 133, 0.5);
  box-shadow: 0 14px 36px rgba(251, 113, 133, 0.14);
}
.menu-icon { filter: drop-shadow(0 3px 7px rgba(251, 113, 133, 0.25)); }
.menu-card b { color: var(--text); }
.menu-card p { color: var(--muted); }
.menu-intro p { color: var(--muted); }

.flow-card { position: relative; padding-top: 40px !important; overflow: hidden; }

.flow-card::before {
  content: '';
  position: absolute; top: 8px; right: 8px; width: 10px; height: 10px;
  border-top: 2px solid rgba(251, 113, 133, 0.6);
  border-right: 2px solid rgba(251, 113, 133, 0.6);
  border-top-right-radius: 3px;
  opacity: 0.6;
  transition: opacity 0.25s;
}
.flow-card:hover::before { opacity: 1; }
.flow-no {
  position: absolute; top: 10px; left: 13px;
  font-family: var(--font-en);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0.9;
}
.flow-no::after { content: '——'; margin-left: 3px; letter-spacing: 0; opacity: 0.35; font-size: 0.6rem; }
.flow-ok {
  position: absolute; top: 10px; right: 24px;
  font-size: 0.78rem; font-weight: 800;
  color: #0f9d5f;
  text-shadow: 0 0 8px rgba(15, 157, 95, 0.35);
}
.flow-done { border-color: rgba(15, 157, 95, 0.4) !important; }

/* 深度对话完成徽章 */
.menu-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0f9d5f, #14b8a6);
  border-radius: 20px;
  vertical-align: 2px;
  box-shadow: 0 2px 8px rgba(15, 157, 95, 0.35);
}
.flow-done::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(15, 157, 95, 0.7), rgba(14, 165, 233, 0.7)) !important;
}
.flow-card:not(.flow-done)::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 106, 0, 0.7), rgba(251, 113, 133, 0.7), rgba(14, 165, 233, 0.7));
  opacity: 0.5;
}

/* ============================================================
   侧栏抽屉
   ============================================================ */
.menu-drawer .menu-mask { background: rgba(14, 140, 220, 0.32); backdrop-filter: blur(3px); }
.menu-drawer .menu-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 250, 252, 0.97));
  border-right: 1px solid rgba(14, 165, 233, 0.18);
  box-shadow: 18px 0 50px rgba(14, 140, 220, 0.18);
}
.menu-head b { color: var(--text); }
.menu-item {
  background: rgba(14, 165, 233, 0.05);
  border: 1px solid rgba(14, 165, 233, 0.12);
  color: var(--text-2);
}
.menu-item.on {
  background: linear-gradient(135deg, #ff6a00, #fb7185);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(251, 113, 133, 0.35);
}
.menu-foot { color: var(--muted-2); }

/* 侧栏菜单: 退出登录(最后一项, 红色分隔) */
.menu-logout {
  margin-top: 14px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-top: 1px dashed rgba(225, 29, 120, 0.35);
  border-radius: 0;
  background: transparent;
  color: #e11d78;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.menu-logout:active { background: rgba(225, 29, 120, 0.08); }

/* ---- 通用按钮 ---- */
.btn-primary {
  background: linear-gradient(135deg, #ff6a00, #fb7185);
  background-size: 160% 160%;
  border: none;
  color: #fff;
  box-shadow: 0 8px 24px rgba(251, 113, 133, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: btnBreath 3.2s ease-in-out infinite;
}
.btn-primary:active { transform: scale(0.97); }
@keyframes btnBreath {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 24px rgba(251, 113, 133, 0.32); }
  50% { background-position: 100% 50%; box-shadow: 0 8px 30px rgba(251, 113, 133, 0.5); }
}
.btn-ghost {
  color: var(--text-2);
  border-color: rgba(14, 165, 233, 0.22);
  background: rgba(255, 255, 255, 0.7);
}

/* ---- 通用卡片亮色兜底 ---- */
.card,
.panel,
.stat-box,
.plan-card,
.section-card {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(23, 62, 110, 0.26) !important;
  box-shadow: 0 12px 30px rgba(23, 62, 110, 0.14) !important;
}

@media (min-width: 900px) {
  .big-menu-card:hover { transform: translateY(-6px); }
}

/* 全站组件去紫: chip.purple 等紫色残留改青蓝 */
.chip.purple { color: #0284c7 !important; background: rgba(14, 165, 233, 0.10) !important; border-color: rgba(14, 165, 233, 0.30) !important; }

/* ---- SVG 扁平图标: 商务配色(深蓝/青蓝/橙) + 浅色圆底 ---- */
.menu-icon svg,
.big-svg svg {
  width: 24px; height: 24px;
  display: block;
}
.big-icon.big-svg { font-size: 0 !important; }
.big-icon.big-svg svg { width: 30px; height: 30px; }

/* 开始页: 图标色 + 浅色圆底(去渐变/去发光) */
.flow-card .menu-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  margin: 2px 0 10px;
  background: #e8eef8;            /* 浅蓝底 */
  color: #1e4f8f;                 /* 深蓝图标 */
  border: none;
  box-shadow: none;
}
.flow-card:nth-child(3n+2) .menu-icon { background: #e5f2f5; color: #0e7490; }  /* 浅青底/青蓝 */
.flow-card:nth-child(3n) .menu-icon   { background: #fdf0e3; color: #f0640a; }  /* 浅橙底/橙 */

/* 首页: 三卡商务色 */
.big-start .big-icon { color: #f0640a; }
.big-create .big-icon { color: #0e7490; }
.big-workspace .big-icon { color: #1e4f8f; }
.big-menu-card .big-icon.big-svg {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: #fdf0e3;             /* 浅橙底 */
}
.big-create .big-icon.big-svg { background: #e5f2f5; }
.big-workspace .big-icon.big-svg { background: #e8eef8; }

/* 覆盖 components2 的 6n 彩色菜单规则(商务扁平浅色圆底) */
.menu-grid .menu-card.flow-card .menu-icon { background: #e8eef8; border: none; }
.menu-grid .menu-card.flow-card:nth-child(3n+2) .menu-icon { background: #e5f2f5; }
.menu-grid .menu-card.flow-card:nth-child(3n) .menu-icon { background: #fdf0e3; }

/* ============================================================
   今日任务 — 完成态颜色区分(点按打卡)
   ============================================================ */
.task-item {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.task-item:active { transform: scale(0.985); }
.task-item.done {
  background: rgba(15, 157, 95, 0.07) !important;      /* 淡绿底 */
  border-color: rgba(15, 157, 95, 0.45) !important;    /* 绿色边框 */
}
.task-item.done .task-check {
  background: #0f9d5f !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(15, 157, 95, 0.45);
}
.task-item.done .task-body p {
  color: #5f7d94 !important;
  text-decoration: line-through;
}
.task-item.done .task-body .muted,
.task-item.done .task-body .muted.small {
  color: #93a4bd !important;
}
.task-item.done .tag { opacity: 0.55; }

/* ============================================================
   copywriting 等工具页 — 组件玻璃化同步
   ============================================================ */
/* 三级分类 tab */
.group-tabs {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.group-tabs .gt-ico {
  flex: 1;
  text-align: center;
  padding: 9px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(14, 140, 220, 0.18);
  color: var(--text-2);
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: 0 4px 14px rgba(23, 62, 110, 0.06);
  transition: all 0.2s ease;
}
.group-tabs .gt-ico.on {
  background: linear-gradient(135deg, #ff6a00, #fb7185);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(240, 100, 10, 0.3);
}
.group-desc {
  font-size: 0.74rem; color: var(--muted);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 7px 11px;
  margin-bottom: 10px;
}

/* chip 选项玻璃化 */
.chips .chip, .chip-list .chip, .small-chips .chip, .chips.wrap .chip {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(14, 140, 220, 0.2) !important;
  color: #3a4a63 !important;
  box-shadow: 0 2px 8px rgba(23, 62, 110, 0.05);
}
.chips .chip:hover, .chip-list .chip:hover { border-color: #f0640a; color: #f0640a; }
.chips .chip.on, .chip-list .chip.on {
  background: linear-gradient(135deg, #ff6a00, #fb7185);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(240, 100, 10, 0.32);
}

/* 黄金公式折叠卡 */
.gen-guide {
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(14, 140, 220, 0.3);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23, 62, 110, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gen-guide summary {
  font-weight: 600;
  color: var(--text);
  padding: 12px 14px;
  cursor: pointer;
}
.gen-guide-sec { padding: 0 14px 6px; }

/* 工具卡片(工具页入口) */
.tool-card {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(14, 140, 220, 0.18);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(23, 62, 110, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(23, 62, 110, 0.14); }
.tool-icon {
  color: #f0640a;
  filter: drop-shadow(0 2px 6px rgba(240, 100, 10, 0.3));
}
.tool-name { color: var(--text); }
.tool-desc { color: var(--muted); }

/* ============================================================
   copywriting 选择区压缩高度(二级选项单行横滚)
   ============================================================ */
.group-subs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.group-subs::-webkit-scrollbar { display: none; }
.group-tabs { margin-bottom: 6px; }
.group-tabs .gt-ico { padding: 6px 6px; font-size: 0.72rem; border-radius: 10px; }
.field label { margin-bottom: 4px; }

/* ---- 20大核心公式框架 ---- */
.ps-cat {
  margin: 12px 0 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f0640a;
}
.ps-fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-fm {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(14, 140, 220, 0.2);
  border-radius: 12px;
  padding: 9px 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.ps-fm b { font-size: 0.78rem; color: #26344d; display: block; }
.ps-fm .ps-fm-struct { font-size: 0.64rem; color: #6b7a94; display: block; margin-top: 3px; line-height: 1.5; }
.ps-fm p { font-size: 0.62rem; color: #93a4bd; margin-top: 4px; line-height: 1.5; }
.ps-fm.on {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(251, 113, 133, 0.12));
  border-color: #f0640a;
  box-shadow: 0 4px 14px rgba(240, 100, 10, 0.18);
}
.ps-fm.on b { color: #f0640a; }

/* ---- 25个钩子卡片网格排版 ---- */
.hook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hook-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(14, 140, 220, 0.2);
  border-radius: 12px;
  padding: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.hook-card:active { transform: scale(0.98); }
.hook-card b {
  font-size: 0.78rem; color: #26344d;
  display: flex; align-items: center; gap: 5px;
}
.hook-core {
  font-style: normal;
  font-size: 0.56rem;
  background: rgba(240, 100, 10, 0.12);
  color: #f0640a;
  padding: 1px 6px;
  border-radius: 6px;
}
.hook-formula { font-size: 0.64rem; color: #6b7a94; display: block; margin-top: 4px; line-height: 1.5; }
.hook-example { font-size: 0.62rem; color: #93a4bd; margin-top: 4px; line-height: 1.5; }
.hook-mapped {
  font-style: normal;
  font-size: 0.6rem;
  color: #0e7490;
  margin-top: 5px;
  display: inline-block;
  background: rgba(14, 116, 144, 0.08);
  padding: 1px 7px;
  border-radius: 6px;
}

/* ---- 钩子展开更多按钮 ---- */
.hook-more {
  margin-top: 10px;
  text-align: center;
  padding: 9px 0;
  border: 1px dashed rgba(14, 140, 220, 0.35);
  border-radius: 12px;
  color: #0e7490;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.18s ease;
}
.hook-more:active { background: rgba(14, 140, 220, 0.1); }

/* ---- 20大核心公式: 示例全文/仿写按钮 ---- */
.ps-fm-ex { cursor: pointer; }
.ps-fm-ex.open { white-space: pre-wrap; }
.ps-fm-more { font-style: normal; color: #0e7490; font-weight: 600; }
.ps-fm-copy {
  margin-top: 7px;
  width: 100%;
  padding: 5px 0;
  font-size: 0.66rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #ff6a00, #fb7185);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.ps-fm-copy:active { opacity: 0.8; }

.modal-mask {
  background: rgba(244, 247, 251, 0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(139, 61, 240, 0.16) !important;
  box-shadow: 0 24px 60px rgba(70, 82, 107, 0.22) !important;
}

/* 后台时长套餐: 文字加大 */
.inv-plans-lg .chip {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 11px 18px;
  min-width: 96px;
  justify-content: center;
  border-radius: 12px;
}

/* 生成结果收起/展开按钮 */
.ps-fold-btn {
  margin-top: 6px;
  padding: 10px 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #e11d78;
  border: 1.5px dashed rgba(225, 29, 120, 0.45);
  border-radius: 12px;
  background: rgba(225, 29, 120, 0.05);
  cursor: pointer;
  transition: all 0.18s ease;
}
.ps-fold-btn:hover { background: rgba(225, 29, 120, 0.12); }
.ps-fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ps-fold-inline {
  margin: 0;
  width: auto;
  padding: 3px 12px;
  font-size: 0.72rem;
  border-radius: 20px;
  border-style: solid;
}

/* step7 选题类型: 选中态突出(等宽大芯片 + 饱和渐变 + 对勾 + 光晕) */
#tp-type { display: flex; flex-wrap: wrap; gap: 8px; }
#tp-type .chip {
  flex: 1;
  min-width: 62px;
  padding: 11px 4px;
  justify-content: center;
  font-size: 0.78rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(14, 140, 220, 0.18);
  color: #46526b;
  transition: none;
}
#tp-type .chip.on {
  background: linear-gradient(135deg, #ff5f00 0%, #e11d78 100%);
  color: #fff;
  font-weight: 800;
  border-color: transparent;
  box-shadow: 0 5px 16px rgba(225, 29, 120, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: scale(1.03);
}
#tp-type .chip.on::before { content: '✓ '; font-weight: 900; }
#tp-type .chip:not(.on):hover { border-color: #f0640a; color: #f0640a; }

.need-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(14, 140, 220, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.need-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.need-head b { font-size: 0.9rem; }
.need-no {
  width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ff6a00, #e11d78);
}
.need-tag {
  margin-left: auto;
  font-size: 0.62rem; color: #e11d78;
  border: 1px solid rgba(225, 29, 120, 0.35);
  background: rgba(225, 29, 120, 0.06);
  border-radius: 20px; padding: 1px 8px;
}
.need-desc { font-size: 0.74rem; color: #6b7a94; margin-bottom: 6px; }

/* 底部框架级仿写按钮: 加高更醒目 */
#core-copy-all,
#hook-copy-all {
  padding: 13px 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(225, 29, 120, 0.25);
}

/* ---- 25钩子卡: 与 20 大公式同款(整卡可点/展开全文/仿写) ---- */
.hook-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(14, 140, 220, 0.2);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.hook-card.on {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(251, 113, 133, 0.12));
  border-color: #f0640a;
  box-shadow: 0 4px 14px rgba(240, 100, 10, 0.18);
}
.hook-card b { font-size: 0.78rem; color: #26344d; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hook-card.on b { color: #f0640a; }
.hook-example { cursor: pointer; margin-top: 4px; }
.hook-example.open { white-space: pre-wrap; }