/* Shared rhythm for large interface and marketing titles. */
.hero h1 {
  line-height: 1.1;
  letter-spacing: .02em;
}

.section-heading h2,
.trust h2,
.cta-inner h2 {
  line-height: 1.22;
  letter-spacing: -.035em;
}

.intro .section-heading h2 {
  line-height: 1.36;
  letter-spacing: .03em;
}

.manifesto h2 {
  line-height: 1.38;
  letter-spacing: -.012em;
}

.workflow .section-heading h2 {
  line-height: 1.38;
  letter-spacing: -.02em;
}

.story-copy h1 {
  line-height: 1.11;
  letter-spacing: -.045em;
}

.form-heading h2,
.success-panel h2 {
  line-height: 1.14;
  letter-spacing: -.03em;
}

.scene-copy h1 {
  line-height: 1.12;
  letter-spacing: -.045em;
}

.auth-heading {
  line-height: 1.16;
  letter-spacing: -.04em;
}

.ca-title h1 {
  line-height: 1.27;
  letter-spacing: -.02em;
}

.ca-effect-hero h2,
.ca-effect-empty h2 {
  line-height: 1.28;
  letter-spacing: -.025em;
}

#view-geo > header h1,
#view-media > .card > .hd:first-child .title,
#view-report > .card > .hd:first-child .title,
#view-video-insights .vi-simple-head h1,
#view-video-insights .vi-page h1 {
  line-height: 1.24;
  letter-spacing: -.03em;
}

/* 全站视图大标题统一（对标 sousougeo.com 黑色大标题）：行高 1.5、字距 -.02em。
   #view-write .write-head .tt 单独出去，避免与 report 共用选择器时被改到。 */
#view-write .write-head .tt {
  line-height: 1.5;
  letter-spacing: -.02em;
}

.scenario-intro h1 {
  line-height: 1.5;
  letter-spacing: -.02em;
}

.scenario-history-head h2 {
  line-height: 1.23;
  letter-spacing: -.02em;
}

#view-site .site-hero h1 {
  line-height: 1.5;
  letter-spacing: -.02em;
}

.site-mini-hero h3,
.sb-hero h3 {
  line-height: 1.16;
  letter-spacing: -.04em;
}

.site-section-head h2,
.direct-workspace-header h2 {
  line-height: 1.25;
  letter-spacing: -.025em;
}

.knowledge-studio .knowledge-hero h1 {
  line-height: 1.5;
  letter-spacing: -.02em;
}

.distribution-hero h1 {
  line-height: 1.5;
  letter-spacing: -.02em;
}

.write-composer-intro h1 {
  line-height: 1.5;
  letter-spacing: -.02em;
}

.url-checker-hero h1 {
  line-height: 1.5;
  letter-spacing: -.02em;
}

.vi-hero h1,
.vi-simple-head h1 {
  line-height: 1.5;
  letter-spacing: -.02em;
}

/* ============================================================
   场景蒸馏 · 彩色增强层
   标题渐变、彩色徽章、渐变按钮、彩色结果卡/词包/开关等
   ============================================================ */

/* 顶部 Kicker：渐变徽章 */
.scenario-kicker { color: #6d5bd0; }
.scenario-kicker > span {
  border: 0;
  background: linear-gradient(135deg, #4267d5, #6d5bd0);
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 93, 214, .28);
}

/* 主标题渐变色 */
.scenario-intro h1 {
  background: linear-gradient(100deg, #1d3f8f 0%, #4267d5 55%, #6d5bd0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scenario-intro p { color: #5d7191; }
.scenario-intro p .sc-keep { color: #3157b8; font-weight: 650; }

/* 输入区：蓝紫描边 + 聚焦光晕 */
.scenario-composer { border-color: rgba(109, 91, 208, .26); box-shadow: 0 20px 60px rgba(63, 82, 149, .12), inset 0 1px rgba(255, 255, 255, .92); }
.scenario-composer:focus-within {
  border-color: #6d5bd0;
  box-shadow: 0 24px 70px rgba(63, 82, 149, .16), 0 0 0 4px rgba(109, 91, 208, .12);
  transform: translateY(-2px);
}

/* 领域标签：三色循环 */
.scenario-domain-tag:nth-of-type(3n+1) { border-color: #c9d8f5; background: #f0f6ff; color: #3157b8; }
.scenario-domain-tag:nth-of-type(3n+2) { border-color: #c9e8d8; background: #eff9f4; color: #0b8a5d; }
.scenario-domain-tag:nth-of-type(3n) { border-color: #e8d7f7; background: #f8f2ff; color: #6d28d9; }
.scenario-domain-input-wrap { border-color: rgba(109, 91, 208, .2); }
.scenario-domain-input-wrap button { background: linear-gradient(135deg, #4267d5, #3157b8); color: #fff; }
.scenario-domain-input-wrap button:hover { filter: brightness(1.06); }

/* 计数 & 开关：彩色 */
.scenario-count { border-color: #c9d8f5; background: #f6f9ff; color: #4f628c; }
.scenario-count #scN { color: #1d3f8f; }
.scenario-term-toggle { color: #5d7191; }
.scenario-term-toggle:hover { color: #3157b8; }
.scenario-term-toggle input:checked + .scenario-term-switch { background: linear-gradient(135deg, #4267d5, #3157b8); box-shadow: 0 0 0 3px rgba(66, 103, 213, .12); }
.scenario-term-toggle:has(input:checked) { border-color: rgba(66, 103, 213, .28); background: #eef3ff; color: #3157b8; }

/* 发送按钮：渐变 + 光晕 */
.scenario-submit { border-color: #4d63d8; background: linear-gradient(135deg, #4267d5, #3157b8); box-shadow: 0 8px 20px rgba(49, 87, 184, .25); }
.scenario-submit:hover { background: linear-gradient(135deg, #5273e0, #4267d5); box-shadow: 0 11px 25px rgba(49, 87, 184, .3); }

/* 输入建议 chips：四色循环 */
.scenario-suggestions button:nth-of-type(4n+1) { border-color: #c9dcf8; background: #f0f6ff; color: #3157b8; }
.scenario-suggestions button:nth-of-type(4n+2) { border-color: #c9e8d8; background: #eff9f4; color: #0b8a5d; }
.scenario-suggestions button:nth-of-type(4n+3) { border-color: #f2ddb8; background: #fff6e8; color: #b45309; }
.scenario-suggestions button:nth-of-type(4n) { border-color: #e8d7f7; background: #f8f2ff; color: #6d28d9; }
.scenario-suggestions button:hover { filter: brightness(.98); transform: translateY(-1px); }

/* 能力标签：彩色图标 */
.scenario-capabilities > span:nth-of-type(3n+1) i { color: #3157b8; }
.scenario-capabilities > span:nth-of-type(3n+2) i { color: #0b8a5d; }
.scenario-capabilities > span:nth-of-type(3n) i { color: #b45309; }
.scenario-note b { color: #4f628c; }

/* 工作区 Tab：激活渐变 */
.scenario-workspace-tabs button.on { background: linear-gradient(135deg, #4267d5, #3157b8); color: #fff; box-shadow: 0 4px 14px rgba(49, 87, 184, .26); }
.scenario-workspace-tabs button.on > span { background: rgba(255, 255, 255, .26); color: #fff; }

/* 结果头部 / 导出 / 保存 */
.scenario-results-head span { color: #1d3f8f; }
.scenario-results-head small { color: #7c8aa5; }
.scenario-export { border-color: #c9d8f5; background: #f6f9ff; color: #3157b8; }
.scenario-export:hover { border-color: #4267d5; background: #eef3ff; }
.scenario-save-package,
.scenario-package-confirm { border-color: #4d63d8; background: linear-gradient(135deg, #4267d5, #3157b8); box-shadow: 0 8px 20px rgba(49, 87, 184, .22); }
.scenario-save-package:hover:not(:disabled),
.scenario-package-confirm:hover:not(:disabled) { background: linear-gradient(135deg, #5273e0, #4267d5); transform: translateY(-1px); }

/* 结果卡片：彩色序号 + 左侧渐变条 */
.scenario-result-card { position: relative; }
.scenario-result-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 99px; background: linear-gradient(180deg, #4267d5, #6d5bd0); }
.scenario-result-index { background: linear-gradient(135deg, #4267d5, #3157b8); color: #fff; }
.scenario-result-card:nth-of-type(3n+2)::before { background: linear-gradient(180deg, #12b76a, #0b8a5d); }
.scenario-result-card:nth-of-type(3n+2) .scenario-result-index { background: linear-gradient(135deg, #12b76a, #0b8a5d); }
.scenario-result-card:nth-of-type(3n)::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.scenario-result-card:nth-of-type(3n) .scenario-result-index { background: linear-gradient(135deg, #f59e0b, #d97706); }
.scenario-result-body button { color: #1d3f8f; }
.scenario-result-body button:hover { color: #6d5bd0; }
.scenario-result-meta b { color: #3157b8; }
.scenario-result-summary { border-left: 3px solid #4267d5; color: #4a618c; }
.scenario-intent { border-color: #c9d8f5; background: #eef3ff; color: #3157b8; }

/* 进度 & 领域分组 */
.scenario-progress-bar { background: linear-gradient(90deg, #4267d5, #6d5bd0); }
.scenario-progress-head b { color: #1d3f8f; }
.scenario-domain-group { border-color: rgba(109, 91, 208, .16); background: linear-gradient(180deg, rgba(243, 241, 255, .9), rgba(251, 252, 254, .72)); }
.scenario-domain-group-head h3 { color: #1d3f8f; }
.scenario-domain-group-head > b { background: #e6eeff; color: #3157b8; }

/* 词包历史 */
.scenario-history-kicker { color: #6d5bd0; }
.scenario-history-head h2 {
  background: linear-gradient(100deg, #1d3f8f, #4267d5 60%, #6d5bd0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scenario-history-head p { color: #7c8aa5; }
.scenario-history-refresh { border-color: #c9d8f5; background: #f6f9ff; color: #3157b8; }
.scenario-history-refresh:hover { border-color: #4267d5; background: #eef3ff; }
.scenario-package-folder { background: linear-gradient(135deg, #4267d5, #3157b8); color: #fff; box-shadow: 0 4px 10px rgba(49, 87, 184, .24); }
.scenario-package-card:hover, .scenario-package-card:focus-visible { border-color: rgba(66, 103, 213, .3); }
.scenario-package-card.on { border-color: rgba(66, 103, 213, .35); box-shadow: 0 10px 28px rgba(49, 87, 184, .12); }
.scenario-package-card h3 { color: #1d3f8f; }
.scenario-package-card li::before { background: #4267d5; }
.scenario-package-card footer span { color: #3157b8; }
.scenario-package-detail-copy > span { color: #6d5bd0; }
.scenario-package-detail-copy h3 { color: #1d3f8f; }
.scenario-package-question-count b { background: #e6eeff; color: #3157b8; }
.scenario-package-detail-actions button.scenario-add-question { border-color: #4d63d8; background: linear-gradient(135deg, #4267d5, #3157b8); }

/* 词包弹窗 */
.scenario-package-mark { background: linear-gradient(135deg, #4267d5, #6d5bd0); color: #fff; box-shadow: 0 8px 18px rgba(79, 93, 214, .22); }
.scenario-package-eyebrow { color: #6d5bd0; }
.scenario-package-dialog h3 { color: #1d3f8f; }
.scenario-package-dialog input:focus { border-color: #6d5bd0; box-shadow: 0 0 0 4px rgba(109, 91, 208, .1); }
.scenario-question-field :is(input, select, textarea):focus { border-color: #6d5bd0; box-shadow: 0 0 0 4px rgba(109, 91, 208, .1); }
.scenario-history-empty > span { background: linear-gradient(135deg, #eef3ff, #e6eeff); color: #3157b8; }
.scenario-history-empty h3 { color: #1d3f8f; }
.scenario-history-empty button,
.scenario-history-error button { border-color: #c9d8f5; color: #3157b8; }

/* ============================================================
   场景蒸馏 · 科技感背景（学习 OpenAI / Claude 发布页）
   - 漂浮模糊光球（OpenAI 粒子球灵感）：多组大模糊光斑缓慢漂移
   - 粒子点阵：细碎光点轻微浮动
   - 科技网格 + 奶油浅色底（Claude 奶油底）
   - Claude 式悬浮卡片：多层柔影 + 玻璃
   ============================================================ */
.main:has(#view-write.work-scenario) {
  background: linear-gradient(180deg, #f4f6fc 0, #e9eef8 46rem);
}
.sc-tech-stage {
  position: fixed;
  z-index: -1;
  inset: 72px 0 0 264px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.main:has(#view-write.work-scenario) .sc-tech-stage { opacity: 1; visibility: visible; }
.app.side-collapsed .sc-tech-stage { left: 86px; }
@media (max-width: 860px) {
  .sc-tech-stage { top: 64px; left: 0; }
}

/* Fable 5.1 式干净背景：隐藏系统默认网格线 */
.main:has(#view-write.work-scenario)::before { display: none; }

/* 景深雾化光球（Fable 5.1 式柔和虚化）
   ★性能★ 原来这里是 filter: blur(66px) + 无限位移动画：每帧都要重新计算 340~430px 圆的模糊，
   低配机 CPU 直接被吃掉。背景本身就是 radial-gradient、边缘已经柔和，去掉滤镜观感几乎一致，
   动画只剩 transform 可以走纯合成（不再逐帧重绘）。 */
.sc-orb { position: absolute; border-radius: 50%; will-change: transform; }
.sc-orb-a { width: 430px; height: 430px; left: -6%; top: 2%; background: radial-gradient(circle at 35% 35%, rgba(104, 158, 255, .4), rgba(104, 158, 255, .09) 55%, transparent 72%); animation: scOrbA 26s ease-in-out infinite alternate; }
.sc-orb-b { width: 390px; height: 390px; right: -5%; top: 10%; background: radial-gradient(circle at 40% 40%, rgba(173, 147, 248, .36), rgba(173, 147, 248, .08) 55%, transparent 72%); animation: scOrbB 30s ease-in-out infinite alternate; }
.sc-orb-c { width: 370px; height: 370px; right: 10%; bottom: -8%; background: radial-gradient(circle at 45% 45%, rgba(112, 214, 219, .3), rgba(112, 214, 219, .07) 55%, transparent 72%); animation: scOrbC 24s ease-in-out infinite alternate; }
.sc-orb-d { width: 340px; height: 340px; left: 14%; bottom: -10%; background: radial-gradient(circle at 40% 40%, rgba(96, 174, 255, .28), rgba(96, 174, 255, .06) 55%, transparent 72%); animation: scOrbD 28s ease-in-out infinite alternate; }
@keyframes scOrbA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(64px, -44px, 0) scale(1.08); } }
@keyframes scOrbB { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-52px, 52px, 0) scale(1.1); } }
@keyframes scOrbC { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-42px, -52px, 0) scale(1.06); } }
@keyframes scOrbD { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(52px, -34px, 0) scale(1.12); } }

/* 粒子点阵 */
.sc-dot { position: absolute; border-radius: 50%; background: currentColor; opacity: .38; animation: scDot 7s ease-in-out infinite alternate; }
.sc-dot-1 { width: 6px; height: 6px; color: #5b8cff; top: 18%; left: 12%; animation-delay: 0s; }
.sc-dot-2 { width: 4px; height: 4px; color: #9d7bff; top: 30%; left: 38%; animation-delay: .7s; }
.sc-dot-3 { width: 5px; height: 5px; color: #4fd1c5; top: 16%; left: 68%; animation-delay: 1.4s; }
.sc-dot-4 { width: 4px; height: 4px; color: #5b8cff; top: 48%; left: 84%; animation-delay: 2.1s; }
.sc-dot-5 { width: 6px; height: 6px; color: #c084fc; top: 64%; left: 22%; animation-delay: 2.8s; }
.sc-dot-6 { width: 4px; height: 4px; color: #7dd3fc; top: 74%; left: 56%; animation-delay: 3.5s; }
.sc-dot-7 { width: 5px; height: 5px; color: #5b8cff; top: 58%; left: 8%; animation-delay: 4.2s; }
.sc-dot-8 { width: 5px; height: 5px; color: #a78bfa; top: 86%; left: 78%; animation-delay: 4.9s; }
@keyframes scDot { from { transform: translate3d(0, 0, 0); opacity: .2; } 50% { opacity: .44; } to { transform: translate3d(14px, -18px, 0); opacity: .28; } }
@media (prefers-reduced-motion: reduce) {
  .sc-orb, .sc-dot { animation: none; }
}

/* Claude 式悬浮卡片：多层柔影 + 玻璃 */
.main:has(#view-write.work-scenario) .scenario-composer {
  background: linear-gradient(120deg, rgba(255, 255, 255, .86), rgba(246, 250, 255, .72));
  border-color: rgba(109, 91, 208, .18);
  box-shadow:
    0 30px 70px -18px rgba(63, 82, 149, .18),
    0 10px 26px -12px rgba(63, 82, 149, .12),
    0 2px 6px rgba(19, 29, 45, .04),
    inset 0 1px rgba(255, 255, 255, .95);
}
.main:has(#view-write.work-scenario) .scenario-composer:focus-within {
  box-shadow:
    0 34px 80px -16px rgba(63, 82, 149, .24),
    0 12px 30px -10px rgba(63, 82, 149, .16),
    0 0 0 4px rgba(109, 91, 208, .1),
    inset 0 1px rgba(255, 255, 255, .95);
}
.main:has(#view-write.work-scenario) .scenario-suggestions button {
  box-shadow: 0 6px 16px -8px rgba(63, 82, 149, .16), inset 0 1px rgba(255, 255, 255, .9);
}
.main:has(#view-write.work-scenario) .scenario-suggestions button:hover {
  box-shadow: 0 10px 22px -8px rgba(63, 82, 149, .24);
}
.main:has(#view-write.work-scenario) .scenario-workspace-tabs {
  box-shadow: 0 14px 34px -12px rgba(63, 82, 149, .16), inset 0 1px rgba(255, 255, 255, .92);
}
.main:has(#view-write.work-scenario) .scenario-result-card {
  box-shadow:
    0 16px 40px -14px rgba(63, 82, 149, .12),
    0 4px 12px -6px rgba(63, 82, 149, .08),
    inset 0 1px rgba(255, 255, 255, .9);
}
.main:has(#view-write.work-scenario) .scenario-result-card:hover {
  box-shadow:
    0 26px 54px -16px rgba(63, 82, 149, .2),
    0 8px 20px -8px rgba(63, 82, 149, .12);
}
.main:has(#view-write.work-scenario) .scenario-history-layout {
  box-shadow:
    0 30px 70px -18px rgba(63, 82, 149, .16),
    0 10px 26px -12px rgba(63, 82, 149, .1),
    inset 0 1px rgba(255, 255, 255, .9);
}
.main:has(#view-write.work-scenario) .scenario-package-card {
  box-shadow: 0 10px 26px -12px rgba(63, 82, 149, .1), inset 0 1px rgba(255, 255, 255, .9);
}
.main:has(#view-write.work-scenario) .scenario-package-card.on {
  box-shadow: 0 18px 40px -14px rgba(63, 82, 149, .18);
}
