/* ===== WB-TECH-THEME v2 ===== */
:root{
    /* 夜间底色提亮（第一百零三轮「太闷」）：#050816 近黑 → 深蓝紫，配下面的光晕才有层次 */
    --bg-0:#0b1030;
    --bg-1:#101840;
    /* 第一百零七轮：主色统一为「青蓝(cyan-sky)→青绿(teal)」柔和色系，与 logo 同一套语言。
       夜间用亮版（深底上要看得见），日间在 body.light 里用深版（白底上要压得住字） */
    --c-a:#38bdf8;
    --c-b:#2dd4bf;
    /* 第一百一十轮：RGB 三元组版本，专供 rgba()/阴影/光晕使用。
       起因是 #startBtn 阴影写了 `rgba(99, 102, 241, ...)` 这种「带空格」的硬编码，
       107 轮只替换了无空格写法（`99,102,241`）而漏掉它 —— 收编成变量后，
       以后换主色只需要改这里两行，不会再出现「主色换了、阴影还是旧的」。
       写法带 fallback：var(--c-a-rgb, 56,189,248)，老 Chromium 不认变量时也不至于变成黑影。 */
    --c-a-rgb:56,189,248;
    --c-b-rgb:45,212,191;
    --c-a-soft:rgba(56,189,248,.14);
    --grad:linear-gradient(120deg,#22d3ee 0%,#38bdf8 48%,#2dd4bf 100%);
    --grad-soft:linear-gradient(120deg,rgba(56,189,248,.16) 0%,rgba(45,212,191,.16) 100%);
    --text:#c9d2ea;
    --text-soft:#aeb8d8;
    /* 第一百零七轮 WCAG AA：夜间次要文字在 #0b1030 上提亮（5.94 → 9.25 / 3.45 → 6.48） */
    --text-dim:#a9b7d9;
    --text-mute:#9aa7cc;
    --surface:rgba(255,255,255,.045);
    --surface-2:rgba(255,255,255,.07);
    --surface-3:rgba(255,255,255,.10);
    --surface-solid:#0d1330;
    --btn-ghost:rgba(255,255,255,.08);
    --line:rgba(125,211,252,.22);
    --line-strong:rgba(125,211,252,.40);
    /* 提示级文字：比正文更浅更小，用于拉开层级 */
    --hint-size:12.5px;
    --track:rgba(56,189,248,.14);
    --ok:#34d399;
    --info:#22d3ee;
    --info-strong:#67e8f9;
    --info-text:#a5f3fc;
    --info-bg-1:rgba(34,211,238,.12);
    --info-bg-2:rgba(34,211,238,.05);
    --warn-bg:rgba(251,191,36,.12);
    --warn-line:rgba(251,191,36,.38);
    --warn-text:#fde68a;
    --err-bg:rgba(248,113,113,.12);
    --err-line:rgba(248,113,113,.42);
    --err-text:#fecaca;
    --radius:18px;
}

/* 错别字标红（一键修正前的高亮，不进导出件） */
.wb-typo {
    background: rgba(248, 113, 113, .18);
    border-bottom: 2px wavy #f87171;
    border-radius: 3px;
    padding: 0 2px;
    cursor: help;
}
/* 第一百零八轮·106-2：正文重点数字高亮（仅展示层，导出件用 markdown 原文不受影响）
   颜色走主题变量：日间 #0e7490 白底 5.36:1、夜间 #38bdf8 深底 8.67:1，双主题都过 AA */
.wb-keynum {
    font-weight: 700;
    color: var(--c-a);
    background: var(--c-a-soft);
    padding: 0 4px;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* 快捷命令面板与长文阅读状态 */
#wbReadingProgress {
    position: fixed; z-index: 3000; top: 0; left: 0; width: 100%; height: 3px;
    opacity: 0; pointer-events: none; transition: opacity .16s ease;
    background: var(--line);
}
#wbReadingProgress.visible { opacity: 1; }
#wbReadingProgress span { display: block; height: 100%; width: 0; background: var(--grad); }
.wb-command-overlay {
    display: none; position: fixed; inset: 0; z-index: 5000; padding: 12px;
    align-items: flex-start; justify-content: center; background: rgba(8,14,28,.55);
}
.wb-command-overlay.open { display: flex; }
.wb-command-box {
    width: min(560px, 100%); margin-top: min(16vh, 120px); padding: 16px;
    background: var(--surface-solid); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.wb-command-box label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 650; }
.wb-command-box input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); color: var(--text); font: inherit; }
#wbCommandList { max-height: min(50vh, 360px); overflow-y: auto; margin: 8px 0; }
#wbCommandList button, .wb-command-close {
    display: block; width: 100%; min-height: 42px; padding: 9px 11px; text-align: left;
    border: 0; border-radius: 5px; background: transparent; color: var(--text); cursor: pointer;
}
#wbCommandList button:hover, #wbCommandList button[aria-selected="true"], .wb-command-close:hover { background: var(--surface-2); }
.wb-command-close { color: var(--text-dim); border-top: 1px solid var(--line); }
.wb-command-box :focus-visible, #wbCommandList button:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }
.wb-toast-action { margin-top: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-2); color: var(--c-a); cursor: pointer; font: inherit; }
.wb-consistency-notice { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--warn-line); border-left-width: 3px; border-radius: 6px; background: var(--warn-bg); color: var(--text); font-size: 13px; line-height: 1.65; }
.wb-consistency-notice[hidden] { display: none; }
.wb-consistency-notice ul { margin: 6px 0 0; padding-left: 20px; }
.wb-consistency-notice li + li { margin-top: 4px; }
#wbMoreMenu { min-width: 132px !important; padding: 4px !important; border-radius: 6px !important; }
#wbMoreMenu button { min-height: 40px; border-radius: 4px !important; }
@media (max-width: 600px) {
    .wb-command-box { margin-top: max(8vh, env(safe-area-inset-top, 0px)); padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #wbReadingProgress { transition: none; }
}
/* 历史记录按比赛分 tab */
.his-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.his-tab {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}
.his-tab.on {
    background: linear-gradient(135deg, var(--c-a) 0%, var(--c-b) 100%);
    color: #fff;
    border-color: transparent;
}
#etaBadge { font-variant-numeric: tabular-nums; }
/* 夜间/日间切换：默认深色（夜间），body.light 覆盖成浅色（日间） */
body.light {
    /* 第一百五十七轮「页面大气不违和」：底色以白为主。
       原来 --bg-1 是 #f7f9fc（带明显冷蓝），叠上背景层的几道蓝绿径向光后，
       整页观感偏浅蓝、不够干净。这里把两级底色都收到近乎纯白，
       蓝色只作为**点缀色**出现在按钮/标签/强调文字上，不再铺满整屏。 */
    --bg-0:#ffffff;
    --bg-1:#fbfcfe;
    /* 第一百零七轮：日间主色去靛紫(#0e7490，与白底柔和蓝违和)，
       改深青 #0e7490 / 青绿 #0f766e —— 按钮白字对比 5.36/5.47，均过 AA */
    --c-a:#0e7490;
    --c-b:#0f766e;
    /* 日间同样是三元组（见 :root 注释），这里必须是深版，白底上的阴影才压得住 */
    --c-a-rgb:14,116,144;
    --c-b-rgb:15,118,110;
    --c-a-soft:rgba(14,116,144,.12);
    --text:#1a2340;
    --text-soft:#2a3558;
    --text-dim:#47527a;
    /* 对比度强化：原本 #8490b0 3.18 → 107轮 #5f6b88 5.32 → 现在 #4a5575 7.18:1（明显更清晰） */
    --text-mute:#4a5575;
    --surface:rgba(20,30,70,.035);
    --surface-2:rgba(20,30,70,.06);
    --surface-3:rgba(20,30,70,.10);
    --surface-solid:#ffffff;
    --btn-ghost:rgba(20,30,70,.07);
    --line:rgba(40,60,120,.16);
    --line-strong:rgba(40,60,120,.32);
    --info-text:#0e7490;
    --info-bg-1:rgba(8,145,178,.10);
    --info-bg-2:rgba(8,145,178,.05);
    --warn-bg:rgba(217,119,6,.10);
    --warn-line:rgba(217,119,6,.35);
    --warn-text:#b45309;
    --err-bg:rgba(220,38,38,.08);
    --err-line:rgba(220,38,38,.35);
    --err-text:#b91c1c;
    --track:rgba(14,116,144,.12);
}

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

/* 滚动条：深灰，与卡片同色系 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,135,180,.35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,135,180,.5); }
* { scrollbar-width: thin; scrollbar-color: rgba(120,135,180,.35) transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    background: var(--bg-0);
    color: var(--text);
    min-height: 100vh;
    /* 移动端地址栏收起/展开时 100vh 会比真实视口高出一截，背景就会多出一条
       和其它区域不同色的色带（用户反馈的「界面上下颜色分层」）。
       dvh 是动态视口高度，支持的浏览器直接用；不支持的自动回落到上面的 100vh。 */
    min-height: 100dvh;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 服务状态指示器 ---------- */
.health-dot {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--text-dim);
    cursor: default;
    transition: background .25s, border-color .25s, color .25s;
}
.health-dot:hover{
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--text-soft);
}
.health-dot .hd-inner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-mute);
    transition: all .3s;
}
.health-dot.ok .hd-inner { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.health-dot.err .hd-inner { background: #f87171; box-shadow: 0 0 8px #f87171; }

/* 日间/夜间切换按钮 */
/* 误触治理（负责人 + 队友实测反馈「月亮图标圆形控件区域容易误触」）：
   原来 40×40 且热区就是图标本体，移动端低于 44×44 的可用标准；
   这里视觉尺寸不变，用 ::before 把可点区域扩到 52×52（包围盒），
   图标周围 6px 的空白也算点击区，手指不用对准小圆点。 */
#themeToggle {
    position: fixed; top: 16px; left: 16px; z-index: 260;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface-solid); color: var(--text);
    cursor: pointer; font-size: 19px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    touch-action: manipulation;              /* 去掉双击缩放带来的 300ms 判定，减少误触感 */
    -webkit-tap-highlight-color: transparent;
}
#themeToggle::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
}
/* 移动端按 44×44 下限补足可视尺寸 */
@media (max-width: 768px) {
    #themeToggle { width: 44px; height: 44px; }
    #themeToggle::before { inset: -5px; }
}
/* 键盘可达性：焦点环只在键盘操作时出现，不干扰鼠标用户 */
#themeToggle:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }

/* ---------- 骨架屏 ---------- */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
/* ---- 分块流式渲染：内容边生成边显示 ---- */
/* 还没产出内容的区块占位 */
.stream-wait {
    color: var(--text-mute);
    font-size: 13px;
    padding: 14px 16px;
    border: 1px dashed var(--line-1);
    border-radius: 8px;
    background: var(--surface-2);
    animation: sk-fade 1.6s ease-in-out infinite;
}
@keyframes sk-fade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
/* 正在流出内容的区块：末尾闪烁光标 + 左侧呼吸竖条 */
.content-block.streaming {
    border-left: 3px solid var(--c-a) !important;
    padding-left: 12px !important;
    transition: border-color .25s;
}
.content-block.streaming::after {
    content: '';
    display: inline-block;
    width: 7px; height: 15px;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--c-a);
    animation: sk-caret .9s step-end infinite;
}
@keyframes sk-caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
/* Tab 上有新内容流入时的脉冲小圆点 */
.tab.has-stream { position: relative; }
.tab.has-stream::after {
    content: '';
    position: absolute; top: 6px; right: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-a);
    box-shadow: 0 0 0 0 var(--c-a);
    animation: sk-pulse 1.3s ease-out infinite;
}
@keyframes sk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.55); }
    100% { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
}
@keyframes sk-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- 历史记录弹窗 ---------- */
.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px dashed var(--line);
}
.history-item:last-child { border-bottom: none; }
.history-info { flex: 1; min-width: 0; }
.history-title { color: var(--text); font-weight: 600; font-size: 14px; }
.history-idea { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { color: var(--text-mute); font-size: 11.5px; margin-top: 4px; }
.history-del {
    padding: 6px 10px;
    background: var(--err-bg);
    color: var(--err-text);
    border: 1px solid var(--err-line);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    flex: 0 0 auto;
}
.history-del:hover { background: rgba(248,113,113,.22); }
.history-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    margin-bottom: 10px;
    outline: none;
}
.history-search:focus { border-color: var(--c-a); }
.history-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-dim);
}
.history-pager button {
    padding: 5px 12px;
    background: var(--btn-ghost);
    color: var(--text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.history-pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 动态背景层 ---------- */
.wb-bg{
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        /* 中心亮、四周暗的微弱径向渐变（内容区更聚焦） */
        radial-gradient(1300px 900px at 50% 18%, rgba(255,255,255,.055), transparent 68%),
        radial-gradient(1200px 700px at 12% -8%, rgba(34,211,238,.14), transparent 60%),
        radial-gradient(900px 600px at 92% 4%, rgba(var(--c-b-rgb, 45,212,191), .13), transparent 62%),
        radial-gradient(1000px 800px at 50% 108%, rgba(59,130,246,.12), transparent 60%),
        linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, #131a4a 100%);
}
/* 四周压暗：中心亮、边缘暗，避免背景抢内容。
   夜间反馈「太闷」后由 .55 减到 .30——压暗是聚焦手段，压过头就是一片死黑 */
.wb-bg::after{
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 78% 62% at 50% 30%, transparent 40%, rgba(3,5,14,.30) 100%);
    pointer-events: none;
}
.wb-grid{
    position:absolute; inset:-2px;
    background-image:
        linear-gradient(rgba(148,163,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,255,.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 92% 62% at 50% 28%, #000 20%, transparent 74%);
    -webkit-mask-image: radial-gradient(ellipse 92% 62% at 50% 28%, #000 20%, transparent 74%);
    animation: wbGridDrift 26s linear infinite;
}
/* 2026-09-30 渲染优化：去掉 blur(90px)——radial-gradient 自带软边（transparent 68%），
   90px 实时模糊在低端机/手机上三球同动直接掉帧，去掉后视觉几乎无差、GPU 占用大降 */
.wb-orb{ position:absolute; border-radius:50%; opacity:.42; will-change: transform; }
.wb-orb-1{ width:520px; height:520px; left:-140px; top:-120px;
    background: radial-gradient(circle, rgba(34,211,238,.55), transparent 68%);
    animation: wbFloat1 24s ease-in-out infinite; }
.wb-orb-2{ width:600px; height:600px; right:-180px; top:8%;
    background: radial-gradient(circle, rgba(var(--c-b-rgb, 45,212,191), .50), transparent 68%);
    animation: wbFloat2 30s ease-in-out infinite; }
.wb-orb-3{ width:480px; height:480px; left:38%; bottom:-220px;
    background: radial-gradient(circle, rgba(59,130,246,.42), transparent 68%);
    animation: wbFloat3 36s ease-in-out infinite; }
.wb-scan{
    position:absolute; left:0; right:0; height:180px; top:-180px;
    background: linear-gradient(180deg, transparent, rgba(120,190,255,.055), transparent);
    /* 2026-09-30 渲染优化：top 动画每帧触发 layout+paint，改 translateY 走合成器 */
    animation: wbScan 11s linear infinite;
    will-change: transform;
}
#wbParticles{ position:absolute; inset:0; width:100%; height:100%; opacity:.75; }

@keyframes wbGridDrift{ from{ background-position:0 0,0 0; } to{ background-position:48px 48px,48px 48px; } }
@keyframes wbFloat1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(90px,70px) scale(1.12); } }
@keyframes wbFloat2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-80px,110px) scale(1.08); } }
@keyframes wbFloat3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(70px,-90px) scale(1.14); } }
@keyframes wbScan{ 0%{ transform: translateY(0); } 100%{ transform: translateY(calc(100vh + 360px)); } }
@keyframes wbSheen{ 0%{ background-position:-120% 0; } 100%{ background-position:220% 0; } }
@keyframes wbGradShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@keyframes wbGlow{ 0%,100%{ filter: drop-shadow(0 0 10px rgba(34,211,238,.30)); } 50%{ filter: drop-shadow(0 0 22px rgba(var(--c-b-rgb, 45,212,191), .48)); } }
@keyframes wbFloatIcon{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-7px) rotate(4deg); } }
@keyframes wbSweep{ 0%{ left:-70%; } 62%,100%{ left:135%; } }
@keyframes wbPulseDot{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.25); } }
@keyframes spin { to { transform: rotate(360deg); } }

.container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 34px 20px 20px; margin-bottom: 16px; }
/* 主标题是全页唯一的品牌锚点：先给一个必定可见的实色，
   渐变只在支持 background-clip:text 的内核上叠加 —— 否则老内核（QQ/夸克部分版本）
   会把 color:transparent 直接渲染成「标题消失」，页面顶部就空了一块 */
.hero h1 {
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -.5px;
    line-height: 1.18;
    color: #EAF2FF;
    animation: wbGlow 5s ease-in-out infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero h1 {
        background: linear-gradient(96deg, #7dd3fc 0%, #a5b4fc 45%, #f0abfc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 26px rgba(125,211,252,.30), 0 0 54px rgba(165,180,252,.14);
    }
}
.hero .wb-em{
    -webkit-text-fill-color: #fff;
    color: #fff;
    display: inline-block;
    margin-right: 6px;
    animation: wbFloatIcon 3.2s ease-in-out infinite;
}
.hero .wb-em .wb-ico-xl { width: .82em; height: .82em; vertical-align: -.06em; }
.hero p { font-size: 14.5px; color: var(--text-dim); line-height: 1.75; max-width: 46ch; margin: 0 auto; }
/* 技术亮点：小字注释层级 —— 去掉胶囊边框/底色，灰字弱化，只做背书不做卖点 */
.hero p.wb-hero-tech{
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
    margin: 8px auto 0; padding: 0;
    max-width: min(760px, 100%);   /* 继承 .hero p 的 46ch 会被挤成三行 */
    font-size: 12px; line-height: 1.6; color: var(--text-mute);
}
.hero p.wb-hero-tech .wb-ico { width: 13px; height: 13px; }
/* 图形标志：hero 的视觉锚点。svg / img 同一套样式，logo 定稿后直接换标签 */
.hero .wb-hero-logo{
    display: block; width: 72px; height: auto; margin: 0 auto 12px;
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(var(--c-a-rgb, 56,189,248), .30);
}
/* 421轮 logo 定稿（∞+新芽，透明底彩色）：夜间给柔光托底更醒目，日间靠浅阴影即可 */
body:not(.light) .hero .wb-hero-logo{
    filter: drop-shadow(0 0 10px rgba(56,189,248,.35)) saturate(1.05);
}
.wb-hero-tech .wb-dot { flex: none; }
/* ---------- 档位标识 ---------- */
.tier-tag{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
    border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text-dim);
}
.tier-tag-deep{
    border-color: rgba(129,140,248,.42);
    background: linear-gradient(120deg, rgba(34,211,238,.16), rgba(45,212,191,.16));
    color: var(--text);
}
.tier-tag .wb-dot{ width: 6px; height: 6px; }
/* 深度版专属板块：左侧主题色竖条 + 浅底，一眼看出是深度版才有 */
.deep-only.deep-hl{
    position: relative;
    padding: 16px 0 16px 18px;
    margin-left: -18px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(129,140,248,.10), rgba(129,140,248,.02) 62%, transparent);
    box-shadow: inset 3px 0 0 0 var(--c-a);
}
.deep-only.deep-hl > h3::after{
    content: '深度版专属';
    display: inline-block; margin-left: 8px; padding: 2px 7px;
    font-size: 11px; font-weight: 500; color: var(--c-a);
    background: var(--c-a-soft); border-radius: 4px; vertical-align: middle;
}
/* 简化版升级钩子：关键模块底部的浅色一行提示，指明深度版在此处能多给什么 */
.deep-upsell{
    margin-top: 12px; padding: 8px 12px;
    font-size: 12px; color: var(--text-mute);
    background: var(--surface-2); border-radius: 8px;
}
.deep-upsell b{ color: var(--c-a); font-weight: 600; }
/* 产物字数标记 */
.wb-count{
    margin-left: 8px; padding: 2px 8px; border-radius: 4px;
    font-size: 11.5px; font-weight: 500;
    color: var(--text-mute); background: var(--surface-2); border: 1px solid var(--line);
    vertical-align: middle;
}
/* 通用提示文字：更浅更小，与正文拉开层级 */
.hint-text { font-size: var(--hint-size); color: var(--text-mute); line-height: 1.7; }
/* 信息提示条：用浅蓝而非黄色，避免被误读为「出错了」 */
.wb-note{
    padding: 10px 14px;
    background: var(--info-bg-2);
    border: 1px solid rgba(34,211,238,.22);
    border-radius: 8px;
    font-size: var(--hint-size);
    color: var(--info-text);
    line-height: 1.7;
}

/* 玻璃按钮 */
.wb-glass-btn{
    margin-top: 18px;
    padding: 10px 22px;
    background: var(--surface-2);
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .25s, color .25s, background .25s, transform .25s, box-shadow .25s;
}
.wb-glass-btn:hover{
    border-color: var(--line-strong);
    color: #fff;
    background: var(--surface-3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34,211,238,.18);
}
/* 2026-10-31 日间修复：hover 底色是 10% 半透明，浅色下变浅灰块，白字直接看不见 */
body.light .wb-glass-btn:hover{
    color: var(--text);
    background: var(--surface-2);
    box-shadow: 0 8px 24px rgba(14,116,144,.12);
}
.wb-glass-btn-sm{ margin-top: 0; padding: 8px 16px; font-size: 13px; }
.wb-dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--info);
    box-shadow: 0 0 8px var(--info);
    animation: wbPulseDot 2.2s ease-in-out infinite;
    flex: none;
}

/* ---------- 卡片：玻璃拟态 + 顶部流光 ---------- */
.card {
    background: linear-gradient(158deg, rgba(255,255,255,.062) 0%, rgba(255,255,255,.022) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 14px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.card::before{
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,211,238,.85), rgba(45,212,191,.85), transparent);
    background-size: 200% 100%;
    animation: wbSheen 7s linear infinite;
    opacity: .85;
}
.card::after{
    content: '';
    position: absolute; right: -70px; top: -70px;
    width: 190px; height: 190px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34,211,238,.16), transparent 70%);
    pointer-events: none;
}
.card:hover{
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(34,211,238,.10), inset 0 1px 0 rgba(255,255,255,.08);
}
.card-title {
    font-size: 20px;
    color: var(--text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}
.step-badge {
    background: var(--grad);
    background-size: 200% 200%;
    animation: wbGradShift 8s ease infinite;
    color: #fff;
    width: 25px; height: 25px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    box-shadow: 0 3px 12px rgba(56,189,248,.34);
    flex: none;
}

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 20px; }
/* grid 子项默认 min-width:auto，长内容（如 15 个赛事 chip 的横滑行）会把轨道撑破、
   整页出现横向滚动条（实测 375px 视口被撑到 989px）；归 0 后子项才能内部 overflow-x 横滑 */
.wb-formgrid > * { min-width: 0; }
label {
    display: block; margin-bottom: 8px;
    color: var(--text-dim);
    font-size: 14px; font-weight: 500;
}
input, textarea, select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color .25s, box-shadow .25s, background .25s;
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
/* 勾选类控件豁免上面的 width:100% 全局规则：否则 checkbox/radio 被撑满整行，
   同一 flex 行里的文字被挤成一字一行竖排（2026-10-01 用户截图实锤，训练授权开关处） */
input[type="checkbox"], input[type="radio"] {
    width: auto;
    min-width: 0;
    padding: 0;
    border: none;
    accent-color: var(--c-a);
}
/* 下拉框：固定高度 + 上下等距内边距，保证文字垂直居中 */
select { height: 46px; padding: 0 14px; }
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
input:focus, textarea:focus, select:focus {
    border-color: var(--c-a);
    outline: none;
    background: rgba(129,140,248,.08);
    box-shadow: 0 0 0 4px rgba(129,140,248,.14);
}
/* 下拉项跟随主题：写死 #0d1330 会让浅色主题下「深底浅字」，
   写死 #ffffff 又会把夜间主题搞成「白底浅字」直接看不见。
   用主题变量 --surface-solid（深色=#0d1330 / 浅色=#ffffff）两全。 */
select option { background: var(--surface-solid); color: var(--text); }
:focus-visible { outline: 3px solid var(--c-a); outline-offset: 2px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

/* ---------- 主按钮：渐变流动 + 高光扫过 ---------- */
.btn-primary {
    position: relative;
    overflow: hidden;
    /* 去蓝紫渐变+流光（评委观感花哨），改实色 accent —— 待验收清单·页面风格优化#1 */
    background: var(--c-a);
    color: #06283d;
    border: none;
    padding: 17px 48px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    width: 100%;
    transition: transform .25s, box-shadow .25s, opacity .25s;
    box-shadow: 0 10px 32px rgba(56,189,248,.42);
}
.btn-primary:hover:not(:disabled){
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(14, 116, 144, .38);
}
.btn-primary:disabled { opacity: .72; cursor: not-allowed; }

/* ---------- 进度 ---------- */
.progress-steps { margin-top: 18px; display: block; }
#fastProgressBar > div {
    background: var(--track) !important;
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
#fastProgress{
    background: var(--grad) !important;
    background-size: 240% 100% !important;
    animation: wbGradShift 2.6s linear infinite;
    box-shadow: 0 0 18px rgba(34,211,238,.55);
    position: relative;
}
.progress-step {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    color: var(--text-mute);
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all .3s;
}
.progress-step.active {
    color: var(--c-a);
    font-weight: 600;
    background: var(--c-a-soft);
    border-color: var(--line);
    box-shadow: 0 0 20px rgba(129,140,248,.18);
}
.progress-step.done { color: var(--ok); }
.step-icon { width: 20px; text-align: center; }

/* 加载动画 */
.spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 3px solid rgba(255,255,255,.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

/* ---------- 结果区 Hero ---------- */
.result-hero {
    background: linear-gradient(140deg, rgba(34,211,238,.16) 0%, rgba(56,189,248,.18) 45%, rgba(45,212,191,.18) 100%);
    border: 1px solid var(--line-strong);
    color: var(--text);
    padding: 34px 30px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 44px rgba(0,0,0,.35);
}
.result-hero::before{
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(34,211,238,.25), transparent 62%);
    pointer-events: none;
}
.score-number {
    font-size: 60px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #a5f3fc, #818cf8 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(34,211,238,.45));
}
.score-label { font-size: 16px; color: var(--text-dim); margin-top: 10px; }
.score-meta { margin-top: 14px; font-size: 14px; color: var(--text-mute); }

/* ---------- Tab：胶囊 + 渐变激活 ---------- */
.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    padding: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 10px 18px;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-dim);
    border-radius: 11px;
    /* 不收缩 + 不换行：flex 子项默认能收缩，窄屏下「导出中心」会被压成「出中心」，
       用户以为 tab 坏了。不收缩后整排横向可滑，每个名字都完整（第二十五轮刺） */
    flex: 0 0 auto;
    white-space: nowrap;
    white-space: nowrap;
    flex: none;
    font-weight: 500;
    transition: color .25s, background .25s, box-shadow .25s, transform .25s;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active {
    color: #fff;
    background: var(--grad-soft);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 6px 20px rgba(34,211,238,.16);
}
/* 2026-10-31 日间修复：--grad-soft 是 16% 青渐变，白页上等于白字压浅青，
   顶部「导出中心/深度分析/申报与评审」选中项直接空白 */
body.light .tab.active {
    color: var(--c-a);
    background: var(--c-a-soft);
    box-shadow: inset 0 0 0 1px var(--c-a), 0 6px 14px rgba(14,116,144,.10);
}
.tab-content { display: none; animation: wbFadeUp .5s cubic-bezier(.2,.7,.2,1); }
/* AI 模拟自评面板内的二级标签：原来整个面板是一个 <details> 折叠条，
   8 个板块全藏在「展开 ▾」后面，用户不知道里面有什么。改成常驻标签导航后，
   内容分类一目了然；为避免本来重要的自查提醒被藏起来，标签上带了未处理项红点。 */
.wb-subtabs {
    display: flex; gap: 8px; padding: 10px 16px 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.wb-subtabs::-webkit-scrollbar { display: none; }
.wb-subtab {
    flex: 0 0 auto; position: relative;
    padding: 6px 14px; font-size: 12.5px; line-height: 1.4; white-space: nowrap;
    color: var(--text-mute); background: var(--surface-solid);
    border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.wb-subtab:hover { color: var(--text); background: var(--surface-2); }
.wb-subtab.active { color: #fff; background: var(--c-a); border-color: var(--c-a); }
.wb-subtab .wb-subdot {
    display: none; margin-left: 6px; min-width: 16px; padding: 0 4px;
    font-size: 11px; line-height: 16px; text-align: center; border-radius: 8px;
    background: var(--c-red, #e5484d); color: #fff;
}
.wb-subtab.has-issue .wb-subdot { display: inline-block; }
.tab-content.active { display: block; }
@keyframes wbFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 内容块 ---------- */
.content-block {
    background: rgba(255,255,255,.035);
    padding: 20px;
    border-radius: 12px;
    line-height: 1.85;
    font-size: 15px;
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--c-a);
    box-shadow: inset 0 0 46px rgba(34,211,238,.05);
    overflow-x: auto;
}
.content-block h1, .content-block h2, .content-block h3 { margin: 18px 0 10px; color: #fff; }
.content-block h1 { font-size: 21px; }
/* 185 轮【P1·截断根治】：正文容器原来 `overflow-x:auto`，按 CSS 规范「一个方向非 visible
   时另一个方向的 visible 会被强制算成 auto」——于是正文盒自己变成滚动容器，末段文字被切成
   半句（用户截图：「…打包收费，测算」后面整段没了）。
   横向滚动下沉到宽表格自身；正文盒彻底 visible，纵向无限延伸。 */
.content-block { overflow: visible; }
/* 2026-09-30 排版加固：AI 生成的长英文词/URL/连续数字（如指标名、链接）可能撑破列宽，
   统一允许任意字符处断行，防横向溢出 */
.content-block, .content-block p, .content-block li, .content-block td, .content-block th {
    overflow-wrap: break-word; word-break: break-word;
}
.content-block table { overflow-x: auto; max-width: 100%; }
/* 桌面端唯一纵向裁剪源：.card 的 overflow:hidden（1397 行只在 ≤768px 豁免过，
   所以 180 轮修完手机上好了、桌面还在切）。结果区单独豁免，不影响其它卡片裁圆角/装饰。 */
#resultArea { overflow: visible; }
#resultArea .result-hero, #resultArea .deck-card { overflow: visible; }
.content-block h2 { font-size: 19px; }
.content-block h3 { font-size: 17px; }
.content-block p { margin: 8px 0; }
.content-block ul, .content-block ol { margin: 8px 0; padding-left: 24px; }
.content-block li { margin: 4px 0; }
.content-block strong {
    color: #fff;
    font-weight: 700;
    background: rgba(129,140,248,.22);
    padding: 1px 5px;
    border-radius: 4px;
}
.content-block code {
    background: rgba(129,140,248,.16);
    padding: 2px 6px; border-radius: 5px;
    color: var(--info-strong); font-size: 13px;
}
.content-block table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.content-block th, .content-block td {
    border: 1px solid var(--line);
    padding: 8px 12px;
    text-align: left;
}
.content-block th { background: var(--surface-3); font-weight: 600; color: #fff; }
.content-block blockquote {
    border-left: 3px solid var(--c-b);
    padding-left: 12px; color: var(--text-dim); margin: 8px 0;
}
.content-block hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.content-block a { color: var(--info-strong); }

/* ---------- 2026-10-31 修：日间（body.light）正文区写死 #fff 的五处 ----------
   症状：**加粗** 渲染成的高亮块里文字白成一片；段落中间的 h2 整行消失只剩空白；
   表头与表格首列完全看不见。根因是 .content-block h1-h3 / strong / th 与
   rich-table 表头、首列写死 color:#fff，只对深色底成立，日间白底 = 白字压白底。
   只加日间覆盖，深色主题零改动；字色走 --text（自带 contrast 档联动），
   高亮底色走 --c-a-soft，与既有 .wb-keynum 同源。 */
body.light .content-block h1,
body.light .content-block h2,
body.light .content-block h3,
body.light .content-block th { color: var(--text); }

body.light .content-block strong {
    color: var(--text);
    background: var(--c-a-soft);
}

/* ===== AI 生成表格（rich_tables）=====
   独立作用域，不依赖 .content-block —— renderRich() 渲染的是裸 table，
   之前完全没吃到样式（无边框、无表头底色）。 */
.rich-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--line); }
table.rich-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.rich-table th, table.rich-table td {
    padding: 9px 12px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
    color: var(--text); line-height: 1.55;
}
table.rich-table th:last-child, table.rich-table td:last-child { border-right: none; }
table.rich-table thead th {
    background: rgba(74,85,184,.30); color: #fff; font-weight: 600;
    white-space: nowrap; border-bottom: 1px solid rgba(74,85,184,.55);
}
table.rich-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.045); }
table.rich-table tbody tr:last-child td { border-bottom: none; }
table.rich-table tbody tr:hover td { background: rgba(34,184,207,.10); }
table.rich-table td:first-child { color: #fff; font-weight: 600; }
table.rich-table caption {
    caption-side: bottom; padding: 7px 4px 0; font-size: 11.5px;
    color: var(--text-mute); text-align: left;
}
/* 2026-10-31 日间修复：表头白字压浅靛、首列白字压白底，一并改走主题色 */
body.light table.rich-table thead th {
    background: rgba(14, 116, 144, .14);
    color: var(--text);
    border-bottom-color: rgba(14, 116, 144, .30);
}
body.light table.rich-table td:first-child { color: var(--text); }

/* ===== AI 路演 PPT 预览卡 ===== */
.deck-card {
    /* 193 轮：原来是死板的 aspect-ratio:16/9 —— 卡片高度被比例钉死，正文一多就被 overflow:hidden
       从底部硬裁半句（用户点名的截断刺）。改为「最小高度 + 内容撑高」：同一行卡片由 grid 的
       stretch 拉齐，内容完整不裁，视觉上仍是横长卡片。 */
    min-height: 150px; border-radius: 9px; padding: 14px 13px 12px;
    border: 1px solid var(--line); position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}
.deck-card .dc-bar { position: absolute; top: 0; left: 0; width: 100%; height: 4px; }
.deck-card .dc-badge { position: absolute; top: 9px; right: 10px; font-size: 10px; letter-spacing: .3px; }
.deck-card .dc-title { font-size: 12.5px; font-weight: 700; line-height: 1.35; margin: 8px 0 7px; padding-right: 46px; }
.deck-card .dc-kicker { font-size: 10px; font-weight: 600; letter-spacing: .4px; }
.deck-card .dc-body { flex: 1; overflow: visible; }
.deck-card .dc-li {
    /* 188 轮：原来 -webkit-line-clamp:2 + overflow:hidden，第 3 行起被硬裁，用户看到半句话。
       这是预览卡片里唯一真正「吞内容」的截断（".dc-mini 表格 84px" 是另一个），
       改为完整显示、卡片纵向自适应——宁可卡片高一点，也不能让 PPT 要点缺字。 */
    font-size: 10.5px; line-height: 1.45; margin: 0 0 5px 0; padding-left: 8px;
    position: relative;
}
.deck-card .dc-li::before { content: ''; position: absolute; left: 0; top: 4px; width: 3px; height: 8px; border-radius: 2px; background: var(--dc-bar, #22B8CF); }
.deck-card .dc-li b { font-weight: 700; }
.deck-card .dc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.deck-card .dc-chip {
    font-size: 9.5px; padding: 2px 6px; border-radius: 5px; line-height: 1.4;
    background: rgba(74,85,184,.22); color: #fff; border: 1px solid rgba(74,85,184,.4);
}
.deck-card .dc-chip i { font-style: normal; font-weight: 700; color: var(--c-b, #22B8CF); }
.deck-card .dc-mini { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.deck-card .dc-mini th, .deck-card .dc-mini td {
    padding: 2px 5px; border: 1px solid var(--line); text-align: left;
    /* 193 轮：nowrap + overflow:hidden + ellipsis + max-width:84px 会把「市场规模 1.2 亿元」这类
       单元格截成「市场规…」，是预览卡里唯一还在吞字的截断。改为换行 + 长词断行，不限宽。 */
    white-space: normal; overflow: visible; word-break: break-word; overflow-wrap: anywhere;
}
.deck-card .dc-mini th { background: rgba(255,255,255,.10); font-weight: 600; }
.deck-card .dc-img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 4px; }
.deck-card .dc-foot { position: absolute; bottom: 7px; right: 10px; font-size: 9.5px; }

/* 区块小标题 */
h3[style*="margin-bottom: 12px"] { color: var(--c-a) !important; font-weight: 600; }

/* 版本选择卡 */
.version-card{
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s, background .3s;
}
.version-card::before{
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 88% 8%, rgba(34,211,238,.14), transparent 55%);
    opacity: 0; transition: opacity .35s; pointer-events: none;
}
.version-card:hover{
    transform: translateY(-3px);
    border-color: var(--line-strong) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.36), 0 0 0 1px rgba(34,211,238,.10);
}
.version-card:hover::before { opacity: 1; }
.version-card input[type="radio"] { accent-color: var(--c-a); }

/* 通用小按钮（复制 / 下载 / 上传） */
button[style*="cursor: pointer"], button[style*="cursor:pointer"]{
    transition: transform .2s, box-shadow .25s, background .25s, color .25s;
}
button:hover { transform: translateY(-1px); }
.card-title ~ * button:hover, .tab-content button:hover{
    box-shadow: 0 6px 18px rgba(34,211,238,.16);
}

/* ---------- 滚动进场 ---------- */
.wb-reveal{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.wb-reveal.wb-in { opacity: 1; transform: none; }

/* ---------- 弹窗 ---------- */
.modal-overlay {
    /* padding 是故意留的：内容盒撑满整屏时用户点不到遮罩，表现为「点遮罩关不掉」
       （2026-09-28 实测 introModal 正因此中招：点 (6,6) 命中的是 introBox 不是遮罩） */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    padding: 16px; box-sizing: border-box;
    background: rgba(3,6,20,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    justify-content: center; align-items: center;
    z-index: 1000;
}
.modal {
    position: relative;
    background: linear-gradient(160deg, rgba(19,25,58,.98), rgba(10,14,38,.98));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 26px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 26px 70px rgba(0,0,0,.6);
}
.modal h2 { margin-bottom: 16px; color: #fff; }
/* 浅色主题下的弹窗（2026-09-28 补）：.modal 的深色渐变 + h2 白字是写死的，
   浅色下会出现「页面白、弹窗黑」，历史/使用说明/图表弹窗全中招。
   遮罩层(.modal-overlay)的压暗保留——那是让弹窗从页面里浮出来的，两套主题都需要。 */
body.light .modal{
    background: linear-gradient(160deg, #ffffff 0%, #f7f9fd 100%);
    border-color: rgba(14,116,144,.16);
    box-shadow: 0 24px 60px rgba(31,42,68,.18);
}
body.light .modal h2{ color: #1f2a44; }
/* 弹窗显式关闭：手机没有 Esc，光靠点遮罩（还常被内容盒挡住）等于关不掉 */
.wb-modal-x {
    position: absolute; top: 10px; right: 12px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    background: var(--surface-solid); border: 1px solid var(--line-strong);
    color: var(--text-dim); font-size: 17px; line-height: 1;
}
.wb-modal-close-btn {
    display: block; margin: 14px auto 0; padding: 11px 30px;
    background: var(--btn-ghost); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; font-size: 14px; cursor: pointer;
}
.history-item {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: background .25s, transform .25s;
}
.history-item:hover { background: var(--surface-2); transform: translateX(3px); }
.history-time { font-size: 12px; color: var(--text-mute); }
.history-title { font-size: 15px; color: var(--text); margin: 4px 0; }
.history-score { font-size: 13px; color: var(--c-a); font-weight: 600; }

/* ---------- 提示条 ---------- */
[style*="--warn-bg"], [style*="background: var(--warn-bg)"]{
    backdrop-filter: blur(6px);
}
[style*="background: var(--info-bg-1)"]{
    border: 1px solid rgba(34,211,238,.28) !important;
}

/* ---------- 占位符【待你填写：xxx】：必须一眼看见，别当真数据交上去 ---------- */
mark.wb-ph {
    background: rgba(245, 158, 11, .18);
    color: #F59E0B;
    border-bottom: 2px dashed #F59E0B;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    cursor: help;
}
#wbPhBar {
    display: none;
    background: rgba(245, 158, 11, .10);
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-dim);
}
#wbPhBar b { color: #F59E0B; }

/* ---------- 分步引导：箭头指向 + 一句话，点一下就走 ---------- */
.wb-coach-target {
    position: relative;
    z-index: 1501;
    border-radius: 8px;
    box-shadow: 0 0 0 3px var(--c-a);
}
/* 全屏压暗用独立的 fixed 层：早先用 box-shadow: 0 0 0 100vmax 做蒙层，
   祖先里只要有一个 overflow:hidden 就会把阴影裁掉，手机上看到的就是「上下颜色分层」。*/
#wbCoachVeil {
    position: fixed;
    left: 0; top: 0; width: 100%; height: 100%;
    z-index: 1500;
    background: rgba(15, 23, 42, .34);
    cursor: pointer;
}
#coachTip {
    position: fixed;
    z-index: 1502;
    max-width: 300px;
    padding: 12px 14px;
    background: var(--surface-solid, #fff);
    border: 1px solid var(--line-strong, var(--line));
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
#coachTip b, #coachTip strong { color: var(--text); }
#coachTip::before {
    content: "";
    position: absolute;
    left: 22px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
#coachTip.coach-below::before { top: -8px; border-bottom: 8px solid var(--line-strong, var(--line)); }
#coachTip.coach-above::before { bottom: -8px; border-top: 8px solid var(--line-strong, var(--line)); }

/* ---------- 开始生成按钮：sticky 悬浮底栏 ---------- */
/* 长表单场景按钮原位置远超首屏（实测手机 top≈1826 / 桌面 1736，视口 744/673）。
   不用 fixed：.card 的 backdrop-filter 会让 fixed 相对卡片而非视口定位（CSS 规范行为，
   实测按钮停在文档流位置）；sticky 不受影响，且滚过自然位置后自动回落到进度条上方，
   生成中看进度时按钮不挡屏幕。QQ/夸克老内核不支持 :has 时优雅退化为原布局。 */
/* 全页最重要的动作，所以它单独占一条，不跟任何可折叠入口挤在一起。
   悬停底栏自带底板：否则 sticky 浮起来时背后就是正文，看着像「贴在别人旁边」 */
#startBar {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    margin-top: 18px;
    padding: 13px 14px calc(13px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(12, 17, 40, .74), rgba(8, 12, 30, .93));
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* 顶部一条渐变高光，把 CTA 条和上面的表单分开 */
#startBar::before {
    content: ""; display: block; height: 1px; margin: -13px -14px 12px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .45), rgba(165, 180, 252, .45), transparent);
}
body.light #startBar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 247, 255, .97));
    border-color: var(--line);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* 不支持 :has 的旧内核退化为原布局（按钮仍在，只是没有底板） */
.card:has(#startBar) { overflow: visible; }
.card:has(#startBar)::after { display: none; }
#startBtn {
    display: block;
    width: min(520px, 100%);
    margin: 0 auto;
    font-size: 17.5px;
    letter-spacing: 1px;
    /* 110 轮：这里原本写着一层「主色大光晕」box-shadow，但它其实是一条**永不生效的死代码**——
       文件后面「风格收敛·去模板味」段的 #startBtn 规则（同优先级、位置更靠后）会把它整个覆盖掉，
       真实渲染的一直是那里的中性阴影 rgba(15,23,42,.22)。
       这条色调残留也就是这么来的：107 轮改主色时只替换了无空格写法 `99,102,241`，
       漏了这条带空格的 `99, 102, 241`，而它又因为被覆盖而从未在画面上露出马脚，只能在源码里被翻出来。
       删掉它，避免后来人以为「改这里能改按钮外观」——静态外观请去「风格收敛」段改。
       悬停/按下时的主色光晕是有意保留的，见下面 #startBtn:hover，那里用的是变量不会被覆盖。 */
}

/* ===== 视觉增强（WorkBuddy）：把「已有但过弱」的效果调强 ===== */
/* 说明：标题渐变 / 光球 / 网格 / 卡片毛玻璃 / 按钮渐变 / 呼吸灯这些其实都已经存在，
   问题出在参数太保守（网格线 4.5% 不透明、光球 .42、四周压暗 .55 把背景压没了），
   所以这里是调参而不是重写。凡涉及深底专属的颜色，都用 body.light 回落到原变量。 */

/* 1) 背景：光球加大提亮、网格线提亮、四周压暗减轻（夜间「太闷」的另一个来源） */
.wb-orb { opacity: .72; }
.wb-orb-1 { width: 700px; height: 700px; left: -180px; top: -170px; }
.wb-orb-2 { width: 780px; height: 780px; right: -220px; top: 4%; }
.wb-orb-3 { width: 640px; height: 640px; left: 32%; bottom: -280px; }
.wb-grid {
    background-image:
        linear-gradient(rgba(148,163,255,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,255,.10) 1px, transparent 1px);
}
.wb-bg::after { background: radial-gradient(ellipse 78% 62% at 50% 30%, transparent 42%, rgba(3,5,14,.28) 100%); }

/* 1.5) 浅色主题下的背景层：**必须整层重写**。
   第六十七轮【高】的根因就在这里——.wb-bg 的渐变末端写死了深色 #070b1e，
   ::after 又叠了一层 rgba(3,5,14,.55) 的压暗，浅色主题从未覆盖过这两条，
   所以「切了日间」页面依旧是浅蓝→深黑的渐变，用户反馈「背景刺眼」就是这个。
   白底方案：纯白起底 + 极浅冷灰收尾 + 光球降到几乎不可见 + 去掉压暗。 */
body.light .wb-bg {
    /* 同上：三道径向光各降约三成（.05/.06/.05 → .035/.04/.035），
       渐变末端 #f4f7fb → #f9fafc，整体更接近纯白，只留一层极淡的空气感 */
    background:
        radial-gradient(1200px 800px at 50% 16%, rgba(14,116,144,.035), transparent 70%),
        radial-gradient(900px 600px at 10% -6%, rgba(14,165,233,.04), transparent 62%),
        radial-gradient(760px 520px at 94% 2%, rgba(15,118,110,.035), transparent 64%),
        linear-gradient(180deg, #ffffff 0%, #fdfdfe 55%, #f9fafc 100%);
}
body.light .wb-bg::after {
    /* 浅色下不需要「四周压暗」——那是深色主题用来聚焦的，放到白底上只会显脏 */
    background: radial-gradient(ellipse 82% 64% at 50% 30%, transparent 62%, rgba(15,23,42,.035) 100%);
}
/* 装饰克制（157轮）：光球/网格只是空气感，不该在白底上被看见成「一团色块」 */
body.light .wb-orb { opacity: .12; filter: blur(96px); }
body.light .wb-grid {
    background-image:
        linear-gradient(rgba(60,80,150,.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60,80,150,.038) 1px, transparent 1px);
}
body.light ::-webkit-scrollbar-thumb { background: rgba(100,120,170,.30); }

/* 2) 标题渐变已上移到 .hero h1 定义处，并用 @supports 包住（无条件 color:transparent
      会让不支持 background-clip:text 的内核直接把标题渲染没）。浅色主题下不要光晕。 */
body.light .hero h1 { text-shadow: none; }
body.light .hero h1 { color: var(--text); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    body.light .hero h1 { color: transparent; }
}

/* 3) 卡片：描边提亮 + 顶部高光加强 */
.card {
    border-color: rgba(255,255,255,.11);
    box-shadow: 0 16px 48px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.09);
}
body.light .card { border-color: var(--line); }

/* 空创意提交时的输入框提示：红描边 + 左右抖两下，1.6s 后由 JS 移除 */
.wb-shake-hl {
    animation: wbShakeHL 1.6s ease;
    border-color: var(--err, #e5484d) !important;
    box-shadow: 0 0 0 2px rgba(229, 72, 77, .18);
}
@keyframes wbShakeHL {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-4px); }
    30%, 60%, 90% { transform: translateX(4px); }
}

/* 全局点击感：任何可点元素按下即有物理反馈（轻缩放），松手弹回。
    只作用于有 cursor:pointer 的元素，纯文本/输入框不受影响；优先级低于各按钮自己的 :active 规则 */
button:not(:disabled), .tab, .wb-anchor-btn, [onclick] { transition: transform .08s ease; }
button:not(:disabled):active, .tab:active, .wb-anchor-btn:active, [onclick]:active { transform: scale(.97); }

/* 4) 主按钮：悬停微放大（原来只有上浮）+ 按压下沉（原来缺 :active） */
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 18px 46px rgba(56,189,248,.6), 0 0 0 1px rgba(255,255,255,.14);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(.985);
    box-shadow: 0 6px 18px rgba(56,189,248,.45);
}

/* 主 CTA 的悬停 / 按下要明显强于次级按钮（全页只有它配得上这层光） */
#startBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 48px rgba(var(--c-a-rgb, 56,189,248), .62), 0 0 34px rgba(34, 211, 238, .34), inset 0 1px 0 rgba(255, 255, 255, .22);
}
#startBtn:active:not(:disabled) {
    transform: translateY(0) scale(.985);
    box-shadow: 0 6px 18px rgba(var(--c-a-rgb, 56,189,248), .5);
}

/* 章节列表：给每行一个序号圆点，纯文字行在长表单里完全抓不住眼 */
.wb-sec-row {
    padding: 2px 5px 2px 3px;
    border-radius: 8px;
    transition: background .18s ease;
}
.wb-sec-row:hover { background: rgba(255, 255, 255, .05); }
body.light .wb-sec-row:hover { background: rgba(15, 23, 42, .04); }
.wb-sec-no {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #0B1024;
    background: linear-gradient(135deg, #7dd3fc 0%, #a5b4fc 100%);
    box-shadow: 0 2px 8px rgba(34, 211, 238, .28);
}
body.light .wb-sec-no { box-shadow: none; }
/* 删除这类破坏性动作：细边框 + 悬停转警示色，让人先看清再点 */
.wb-textbtn {
    padding: 4px 10px;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.wb-textbtn:hover {
    color: var(--danger, #C0392B);
    border-color: rgba(192, 57, 43, .5);
    background: rgba(192, 57, 43, .08);
}

/* 佐证材料：输入框和上传区合成一块（原来是两个互不相干的框） */
.wb-ud-box {
    margin-top: 10px; padding: 12px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-2);
}
.wb-ud-head {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px;
}
.wb-drop {
    margin-top: 8px; padding: 13px 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    flex-wrap: wrap; text-align: center;
    border: 1px dashed var(--line); border-radius: 8px;
    background: var(--surface-solid);
    font-size: 12.5px; color: var(--text-dim); cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.wb-drop:hover { border-color: var(--c-a); background: rgba(34, 211, 238, .06); }
.wb-drop:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }
.wb-drop.is-over { border-color: var(--c-a); background: rgba(34, 211, 238, .12); transform: scale(1.008); }
.wb-drop .wb-drop-sub { flex: 1 1 240px; font-size: 11.5px; color: var(--text-mute); line-height: 1.6; }

/* 5) 输入框聚焦：青色描边 + 青色外发光（原来光晕 .14 几乎看不出来） */
input:focus, textarea:focus, select:focus {
    border-color: #22d3ee;
    background: rgba(34,211,238,.07);
    box-shadow: 0 0 0 4px rgba(34,211,238,.22), 0 0 22px rgba(34,211,238,.15);
}

/* 6) 状态点呼吸灯：亮度和半径都提一档 */
.wb-dot { box-shadow: 0 0 10px var(--info), 0 0 22px rgba(34,211,238,.40); }

/* 9) 正文排版：正文色提亮到 #D0D7E5、段距、首行缩进 2 字符 */
.content-block { color: #D0D7E5; }
.content-block p { margin: 0 0 12px; text-indent: 2em; }
.content-block h1, .content-block h2, .content-block h3, .content-block h4 { margin: 20px 0 10px; text-indent: 0; }
.content-block li, .content-block td, .content-block th { text-indent: 0; }
body.light .content-block { color: var(--text-soft); }

/* 8) 图表容器：玻璃描边 + 圆角，和卡片同一套质感（图表底色在 JS 里改成半透明渐变） */
#budgetChart, #marketChart, #timelineChart {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}
body.light #budgetChart, body.light #marketChart, body.light #timelineChart { border-color: var(--line); }

/* ---------- 响应式（统一放最后） ---------- */
@media (max-width: 768px) {
    /* 手机上把留白压掉：原来一屏只能看到标题 + 半张卡，要滑很久才摸到输入框 */
    body { padding: 8px; }
    .container { padding: 0; }
    .hero { padding: 14px 10px 10px; margin-bottom: 12px; }
    .hero h1 { font-size: 26px; line-height: 1.3; }
    .hero p { font-size: 13.5px; margin-top: 6px; }
    .card { padding: 14px 12px; border-radius: 14px; margin-bottom: 12px; }
    .card-title { font-size: 16px; margin-bottom: 12px; gap: 8px; }
    /* 现场演示再收一轮：实测首屏被引导区吃掉 546px，表单被挤到屏幕外 */
    .hero { padding: 10px 10px 6px; margin-bottom: 8px; }
    .hero h1 { font-size: 24px; margin-bottom: 5px; }
    .hero p { font-size: 12.5px; margin-top: 4px; }
    .card { padding: 12px 11px; margin-bottom: 10px; }
    .card-title { margin-bottom: 10px; }
    .form-group { margin-bottom: 12px; }
    .wb-guide-hint { margin: 6px 0 0; }
    .wb-guide-step { padding: 9px 11px; }
    .content-block { margin-bottom: 12px; }
    .wb-formgrid { gap: 12px !important; }
    .result-hero { padding: 14px 10px; }
    #quickExportBar { padding: 12px; margin-bottom: 12px; }
    #wbPhBar, #wbBanBar { padding: 10px 12px !important; margin-bottom: 12px !important; }
    .tabs { padding: 4px; }
    .tab { padding: 7px 9px; font-size: 12px; }
    .score-number { font-size: 42px; }
    /* 页签在手机上横向可滑，且藏掉滚动条，避免一整排挤在一起 */
    .tabs { padding: 5px; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { white-space: nowrap; font-size: 12.5px; padding: 8px 10px; }
    .btn-primary { padding: 15px 20px; font-size: 16px; }
    /* 三步引导在手机上改成一屏一步、左右可滑：
       竖排三行会把首屏撑爆，百度 / QQ / 夸克这类矮视口里常常只露出第 1、2 步 */
    #wbGuide {
        display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; margin-bottom: 10px;
    }
    #wbGuide::-webkit-scrollbar { display: none; }
    /* 不用 gap：部分旧内核（QQ/夸克的老 Chromium）不支持 flex gap，用 margin 兜底 */
    .wb-guide-step { flex: 0 0 100%; margin-right: 8px; scroll-snap-align: start; padding: 11px 12px; }
    .wb-guide-hint { display: block; }
    /* 手机上的快捷导出条：主按钮一行，次要操作收进「更多」菜单。
       原来竖排 + 按钮全宽，5 个按钮各占一行，滚到底要划很久（2026-09-28 手机实测） */
    #quickExportBar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    #quickExportBar button { width: auto; padding: 11px 12px; font-size: 13.5px; }
    #quickExportBar .qe-primary { flex: 1 1 100%; }
    #quickExportBar .qe-secondary { display: none; }
    #quickExportBar .qe-note { display: none; }
    #quickExportBar > span { line-height: 1.6; }
    .result-hero { padding: 18px 12px; }
    /* 表格在手机上可横滑，不会被裁掉 */
    .content-block table { display: block; overflow-x: auto; white-space: nowrap; }
    .wb-orb { filter: blur(64px); }
    /* 移动端保留静态底色，停掉装饰层的持续合成与重绘。 */
    .wb-grid, .wb-orb, .wb-scan, #wbParticles { display: none !important; }
    .wb-bg { background: var(--bg-0) !important; }
    .modal { padding: 18px; }
    button { font-size: 14px; }
}

/* ===== Codex 接手：手机端 10 个小问题适配 ===== */
/* 回到顶部按钮 */
#wbTop {
    position: fixed; right: 16px; bottom: 150px; z-index: 280;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface-solid); color: var(--text); cursor: pointer;
    font-size: 20px; font-weight: 700; box-shadow: 0 8px 22px rgba(0,0,0,.35);
    display: none; align-items: center; justify-content: center;
}
/* 首屏骨架屏 */
#pageSkeleton {
    position: fixed; inset: 0; z-index: 9990; padding: 24px 18px;
    /* --bg 全站未定义 → 总是回落到 #0a0f1f（首屏闪黑的元凶）。改用 --bg-0，随主题走。 */
    background: var(--bg-0, #f5f7fb); pointer-events: none;
    transition: opacity .35s ease;
}
#pageSkeleton.hide { opacity: 0; }

/* 微信引导里「点右上角 ···」的上箭头：往右上角弹，提示用户去点 */
.wb-point-arrow {
    display: inline-block; color: var(--c-b); font-size: 17px; font-weight: 700;
    animation: wbPointUp 1.1s ease-in-out infinite; transform-origin: 50% 50%;
}
@keyframes wbPointUp {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, -4px); }
}

@media (max-width: 768px) {
    /* 1) 底部赛事快捷 chip：横向可滑 + 藏滚动条，右边不再被裁掉 */
    #compQuickRow {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    #compQuickRow::-webkit-scrollbar { display: none; }
    #compQuickRow > span { flex: 0 0 auto; }

    /* 2) 折叠板块展开后别被 .card 的 overflow:hidden 裁掉内容 */
    .card { overflow: visible; }
    .card::after { display: none; }

    /* 3) 右下角悬浮导出按钮抬高，避开系统导航键 */
    #wbFab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* 4) 再压一轮留白，一屏多显示内容 */
    body { padding: max(8px, env(safe-area-inset-top, 0px)) 4px 150px 4px; }
    .hero { padding: 8px 8px 4px; margin-bottom: 6px; }
    .hero h1 { font-size: 22px; }
    .hero p { font-size: 12px; margin-top: 3px; }
    .card { padding: 10px 10px; margin-bottom: 8px; }
    .card-title { margin-bottom: 8px; }
    .form-group { margin-bottom: 10px; }

    /* 5) 开始生成按钮悬浮底栏（sticky 规则在全局区，这里只收紧内边距） */
    #startBar { margin-top: 14px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    #startBtn { display: block; width: 100%; }
    /* 165 轮：程序化滚动（scrollIntoView / 锚点）给底部悬浮 CTA 让出 100px，
       免得滚过去的内容正好被压在按钮下面。手动滚轮的遮挡由 wbEnsureVisible 兜底 */
    html { scroll-padding-bottom: 100px; }

    /* 5) 微信/QQ 内置浏览器顶部导航遮挡：给 body 加顶部留白 */
    body.in-app { padding-top: 44px; }

    /* 6) 「清空重写」按钮放大，手指好点 */
    #wbClearBtn { padding: 8px 14px; font-size: 13.5px; }

    /* 7) 项目创意输入框加高，打字能看到完整内容 */
    #idea { min-height: 150px !important; }

    /* 8) 选中比赛更明显：chip 加一圈高亮 + 输入框匹配后描边 */
    #compQuickRow > span[data-on="1"] { box-shadow: 0 0 0 2px var(--c-a); }
    #competition.wb-matched { border-color: var(--c-a) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
}

/* ---------- 首页三步引导（新用户进来不懵） ---------- */
/* 做成三步卡片而不是弹窗：弹窗一上来就糊脸，用户会直接关掉 */
#wbGuide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.wb-guide-step {
    position: relative; text-align: left;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 12px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line);
    transition: border-color .2s, transform .2s, opacity .2s;
}
.wb-guide-step:hover { border-color: var(--c-a); transform: translateY(-2px); }
.wb-guide-step.is-done { opacity: .58; }
.wb-guide-step.is-done .wb-guide-num { background: var(--ok); border-color: var(--ok); color: #14532d; }
.wb-guide-num {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--c-a);
    background: var(--c-a-soft); border: 1px solid var(--c-a);
}
.wb-guide-txt { font-size: 13px; line-height: 1.65; color: var(--text-dim); }
.wb-guide-txt b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 3px; }
.wb-guide-ok { display: none; flex: none; margin-left: auto; color: var(--ok); font-size: 13px; font-weight: 700; }
.wb-guide-step.is-done .wb-guide-ok { display: block; }
/* 折叠态：老用户只看一行，点一下可再展开 */
#wbGuideBar { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding: 9px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line); font-size: 12.5px; color: var(--text-dim); }
#wbGuideBar button { padding: 4px 10px; font-size: 12px; background: transparent; color: var(--c-a); border: 1px solid var(--c-a); border-radius: 6px; cursor: pointer; }
/* 点引导卡片跳过去时，目标元素自己闪一下（不越界，卡片 overflow:hidden 也看得到） */
.wb-guide-flash { animation: wbGuideFlash 1.6s ease; }
@keyframes wbGuideFlash { 0%, 100% { background: transparent; } 35% { background: var(--c-a-soft); } }

/* ---------- 结果页用户打分 ---------- */
#wbRateBox { margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.wb-rate-q { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.wb-rate-sub { font-size: 12px; color: var(--text-mute); font-weight: 400; }
.wb-rate-star { width: 44px; height: 44px; font-size: 24px; line-height: 1; border-radius: 10px;
    background: var(--surface-solid); border: 1px solid var(--line); color: var(--text-mute);
    cursor: pointer; padding: 0; transition: transform .12s, color .12s, border-color .12s; }
.wb-rate-star:hover { transform: translateY(-2px); }
.wb-rate-star.on { color: #fbbf24; border-color: #fbbf24; }
/* ---------- 结果区顶部导出条 ---------- */
#quickExportBar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--c-a); }
.qe-title { font-size: 13px; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; }
.qe-note { font-size: 12px; color: var(--text-mute); }

/* ---------- PPT 主题缩略图 ---------- */
.wb-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
.wb-theme-card { padding: 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, transform .2s; }
.wb-theme-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.wb-theme-card.on { border-color: var(--c-a); box-shadow: 0 0 0 2px rgba(34, 211, 238, .22); }
.wb-theme-thumb { position: relative; height: 84px; border-radius: 6px; overflow: hidden; }
/* 结果页风格条里的小预览：同一套缩略图，只是按比例压扁 */
#styleQuickPrev .wb-theme-thumb { height: 42px; }
#styleQuickPrev .wb-theme-thumb::after { height: 4px; }
/* 顶部 5px 强调条 = 该主题的页眉样式（topbar）；sidebar 换成左侧竖条，rule 则两者都不画，
   缩略图因此能看出"这一套的页眉长什么样"，不只是颜色不同 */
.wb-theme-thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--t-accent); }
.wb-theme-thumb.nobar::after { display: none; }
.wb-theme-thumb.sidebar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--t-accent); }
.wb-theme-bar { position: absolute; height: 7px; border-radius: 3px; background: var(--t-bar, var(--t-primary)); }
.wb-theme-line { position: absolute; height: 4px; border-radius: 2px; background: var(--t-line, rgba(255, 255, 255, .32)); }
.wb-theme-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; bottom: 8px; }
.wb-theme-sq { position: absolute; width: 9px; height: 9px; border-radius: 2px; }
.wb-theme-cardblk { position: absolute; border-radius: 3px; }
.wb-theme-name { margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--text-dim); text-align: center; }
.wb-theme-card.on .wb-theme-name { color: var(--text); font-weight: 600; }

/* ---------- 顶部固定导出条 ---------- */
/* 结果区顶部的导出条滚出视口后，这一条贴到页面顶端，翻到哪都能点。
   z-index 150 < 服务状态点(200)，且右侧留白，不会盖住它 */
#wbExportDock {
    position: fixed; top: 0; left: 0; right: 0; z-index: 150; display: none;
    align-items: center; gap: 8px; padding: 10px 150px 10px 14px;
    background: var(--surface-solid); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
#wbExportDock .qe-title { flex: none; }
#wbExportDock button { padding: 9px 14px; font-size: 13px; border-radius: 8px; cursor: pointer; }
#wbExportDock .dock-main { background: linear-gradient(135deg, var(--c-a) 0%, var(--c-b) 100%); color: #fff; border: none; font-weight: 600; }
#wbExportDock .dock-ghost { background: var(--btn-ghost); color: var(--text); border: 1px solid var(--line); }

/* ---------- 悬浮导出（生成完随时可点，不用滚回顶部） ---------- */
#wbFab { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
#wbFabMain { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--c-a) 0%, var(--c-b) 100%); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
#wbFabPanel { display: none; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
#wbFab.open #wbFabPanel { display: flex; }
#wbFabPanel button { white-space: nowrap; text-align: left; padding: 9px 14px; font-size: 13px; background: var(--btn-ghost); color: var(--text); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }

/* ---------- 窄屏（375px 一类小屏）：全部竖排、字放大、不溢出 ---------- */
@media (max-width: 768px) {
    #wbRateBox { padding: 13px 14px; margin-top: 16px; }
    .wb-rate-star { width: 40px; height: 40px; font-size: 21px; }
    #wbRateStars { gap: 6px !important; }
}
@media (max-width: 420px) {
    body { padding: 6px; }
    .container { padding: 0; }
    .hero { padding: 10px 4px 8px; margin-bottom: 10px; }
    .hero h1 { font-size: 23px; line-height: 1.28; }
    .hero p { font-size: 13px; }
    .card { padding: 12px 10px; border-radius: 12px; margin-bottom: 10px; }
    .card-title { font-size: 15px; margin-bottom: 10px; }
    .result-hero { padding: 12px 8px; }
    #tierBadge { margin-bottom: 10px !important; }
    /* 三步引导：420px 下同样一屏一步横滑，字号适当放大 */
    .wb-guide-step { padding: 12px 13px; }
    .wb-guide-txt { font-size: 14px; }
    .wb-guide-txt b { font-size: 14.5px; }
    /* 挤在一起的按钮组一律竖排全宽 */
    #uploadRow, #deckThemeRow { flex-direction: column; align-items: stretch !important; }
    #uploadRow button, #deckThemeRow button { width: 100%; padding: 13px 16px; font-size: 15px; }
    /* 导出中心每行「文件名 + 按钮」在窄屏换行，别挤成两团 */
    #exportList > div { flex-wrap: wrap; gap: 8px; }
    #deckThemeRow { align-items: stretch; }
    #deckThemeRow > div:not(#deckThemeSelWrap) { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
    #deckThemeRow select { width: 100%; height: 42px; font-size: 15px; }
    /* iOS 下输入框字号 <16px 会自动放大页面，这里统一抬到 16px */
    input, select, textarea { font-size: 16px !important; }
    button { font-size: 15px; }
    /* 手机上 5 个栏目一屏排不下（实测 375 宽时要滚 506px），这里收紧字号与内边距
       争取少滑一点。注意别比 768 那段更大——此前这里写 13px/11px 反而把标签撑宽，
       正是手机上看着「挤成一团」的来源。 */
    .tab { font-size: 12.5px; padding: 8px 10px; }
    .tab .wb-ico { width: .92em; height: .92em; margin-right: .26em; }
    .btn-primary { padding: 16px 20px; font-size: 17px; }
    .wb-theme-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .wb-theme-thumb { height: 62px; }
    .wb-theme-name { font-size: 11px; }
    .version-card { padding: 14px !important; }
    #wbFabMain { width: 52px; height: 52px; font-size: 12px; }
    #wbFab { right: 10px; bottom: 10px; }
    /* 顶部固定导出条：窄屏右侧只留出服务状态点的位置，标题藏掉省地方 */
    #wbExportDock { padding: 8px 96px 8px 10px; gap: 6px; }
    #wbExportDock .qe-title { display: none; }
    #wbExportDock button { padding: 9px 10px; font-size: 13px; }
    .modal { padding: 14px; }
    .history-pager { flex-wrap: wrap; }
}

/* ---------- 微信 / QQ 内置浏览器引导 ---------- */
#wbUaMask {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000;
    display: none; align-items: center; justify-content: center; padding: 18px;
    background: rgba(6, 8, 14, .93);
}
#wbUaMask.on { display: flex; }
.wb-ua-box {
    width: 100%; max-width: 420px; padding: 20px; border-radius: 16px;
    background: var(--surface-solid); border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.wb-ua-box h3 { font-size: 18px; color: var(--text); }
/* 164 轮：首屏新手引导句——比副标题弱一级，但比正文强调，一眼能看到又不抢主标题 */
.wb-hero-newbie {
    margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--text-dim);
}
.wb-hero-newbie b { color: var(--c-a); font-weight: 600; }
/* 164 轮：档位徽标统一规格（原来「推荐」是内联样式，两版风格不一致） */
.wb-tier-flag {
    display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 4px;
    font-size: 11px; font-weight: 500; line-height: 1.5; vertical-align: 2px;
}
.wb-tier-hot { background: var(--c-a); color: #fff; }
.wb-tier-new { background: var(--c-a-soft); color: var(--c-a); border: 1px solid var(--c-a-line, var(--line)); }
.wb-tier-pro { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--line); }
.wb-ua-core { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin-top: 6px; }
.wb-ua-more { margin-top: 12px; font-size: 12.5px; color: var(--text-mute); }
.wb-ua-more > summary { cursor: pointer; user-select: none; padding: 4px 0; }
.wb-ua-more[open] > summary { margin-bottom: 6px; }
.wb-ua-more ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.85; color: var(--text-dim); }
.wb-ua-close { margin: 10px 0 0; }
.wb-ua-close button { width: 100%; padding: 10px; font-size: 13px; font-weight: 400; border: 1px solid var(--line); border-radius: 10px; background: var(--btn-ghost); color: var(--text-dim); cursor: pointer; }
.wb-ua-do {
    margin-top: 12px; padding: 10px 12px; border-radius: 8px;
    background: var(--c-a-soft); font-size: 13.5px; line-height: 1.75; color: var(--text);
}
.wb-ua-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wb-ua-btns button {
    padding: 13px; font-size: 15px; font-weight: 600; border: none; border-radius: 10px;
    cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--c-a) 0%, var(--c-b) 100%);
}
.wb-ua-btns button.ghost { background: var(--btn-ghost); color: var(--text); border: 1px solid var(--line); font-weight: 400; }
/* 右上角箭头：指向「···」菜单的位置（不用 env()，老内核不支持会整条失效） */
.wb-ua-arrow { position: absolute; top: 10px; right: 14px; display: flex; align-items: center; gap: 6px; color: #fff; }
.wb-ua-arrow span {
    padding: 3px 9px; border-radius: 20px; font-size: 15px; font-weight: 700; letter-spacing: 2px;
    background: rgba(255, 255, 255, .14); border: 1px dashed rgba(255, 255, 255, .55);
}
.wb-ua-arrow b { font-size: 26px; line-height: 1; }
.wb-guide-hint { display: none; font-size: 12px; color: var(--text-mute); margin: 0 0 10px; }

/* ---------- 全局提示 Toast ---------- */
#wbToast {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
    width: min(92vw, 400px); pointer-events: none;
}
.wb-toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 14px 15px; border-radius: 12px;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-left: 4px solid var(--c-a);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
    color: var(--text); font-size: 13.5px; line-height: 1.65;
    animation: wbToastIn .3s cubic-bezier(.2, .7, .2, 1);
}
.wb-toast.is-out { animation: wbToastOut .22s ease forwards; }
.wb-toast-ico { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.wb-toast-main { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.wb-toast-title { font-weight: 600; }
.wb-toast-sub { margin-top: 5px; font-size: 12px; color: var(--text-mute); line-height: 1.55; word-break: break-all; }
.wb-toast-x { flex: none; width: 16px; height: 16px; margin-top: 2px; cursor: pointer; opacity: .45; transition: opacity .15s; }
.wb-toast-x:hover { opacity: 1; }
.wb-toast.t-ok   { border-left-color: var(--ok); }
.wb-toast.t-ok   .wb-toast-ico { color: var(--ok); }
.wb-toast.t-warn { border-left-color: #F59E0B; }
.wb-toast.t-warn .wb-toast-ico { color: #F59E0B; }
.wb-toast.t-error{ border-left-color: #EF4444; }
.wb-toast.t-error .wb-toast-ico { color: #EF4444; }
.wb-toast.t-info .wb-toast-ico { color: var(--c-a); }
@keyframes wbToastIn  { from { opacity: 0; transform: translateX(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wbToastOut { to { opacity: 0; transform: translateX(22px) scale(.97); } }

/* ---------- 无障碍：尊重减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .wb-reveal { opacity: 1; transform: none; }
    .wb-bg { display: none; }
}
/* 2026-09-30 手机端渲染减负：网格漂移是持续 background-position 重绘，扫描线在窄屏上
   存在感极低，第三个光球在小屏挤在一起——三者全停/隐藏，帧率立涨，视觉几乎无损 */
@media (max-width: 768px) {
    .wb-grid { animation: none; }
    .wb-scan { display: none; }
    .wb-orb-3 { display: none; }
}

        /* ===== WB ICONS ===== */
        .wb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
        .wb-ico{
            width: 1.08em; height: 1.08em;
            flex: none;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            vertical-align: -0.18em;
            margin-right: .38em;
            opacity: .95;
        }
        .wb-ico-xl{ width: 1em; height: 1em; margin-right: .2em; stroke-width: 2; }
        .wb-ico-ok{ color: var(--ok); }
        .wb-ico-warn{ color: var(--warn-text); }
        .wb-opt{ font-weight: 400; opacity: .62; font-size: .88em; }
        label .wb-ico{ color: #8b95e8; }
        .tab .wb-ico{ margin-right: .34em; opacity: .85; }
        .tab.active .wb-ico{ color: var(--info-strong); opacity: 1; }
        h3 .wb-ico{ color: #8b95e8; }
        .step-icon .wb-ico{ margin-right: 0; color: inherit; }
        .version-card .wb-ico-ok{ width: .95em; height: .95em; }
        button .wb-ico{ transition: transform .25s; }
        button:hover .wb-ico{ transform: translateY(-1px); }
    
        /* 板块快速定位：横向可滑的锚点条（手机上不换行，滑着选） */
        .wb-anchor-bar { margin: 0 0 12px; }
        .wb-anchor-scroll { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
                            scrollbar-width: none; padding: 2px 0 4px; }
        .wb-anchor-scroll::-webkit-scrollbar { display: none; }
        .wb-anchor-btn { flex: 0 0 auto; margin-right: 6px; padding: 6px 12px; font-size: 12.5px;
                         border-radius: 999px; cursor: pointer; white-space: nowrap;
                         border: 1px solid var(--line); background: var(--surface-solid);
                         color: var(--text-dim); }
        .wb-anchor-btn:active { background: var(--c-a); color: #fff; border-color: var(--c-a); }
        @media (max-width: 420px) {
            .wb-anchor-btn { padding: 5px 10px; font-size: 12px; }
        }
/* ---------- 字段旁「?」说明图标：长提示收进来，点/悬停才展开 ---------- */
.wb-tip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
          width: 14px; height: 14px; margin-left: 5px; border: 1px solid var(--line); border-radius: 50%;
          background: var(--surface-2); color: var(--text-mute); font-size: 10px; line-height: 1;
          cursor: pointer; user-select: none; vertical-align: middle; }
.wb-tip:hover { color: var(--c-a); border-color: var(--c-a); }

/* ---------- 多智能体流程面板 ---------- */
.wb-agent-panel { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.wb-agent-hd { font-size: 12px; color: var(--text-mute); margin-bottom: 6px; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; }
.wb-agent-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--text-mute); border-top: 1px dashed rgba(128,128,128,.16); }
.wb-agent-row:first-of-type { border-top: none; }
.wb-agent-dot { flex: 0 0 auto; width: 14px; text-align: center; font-size: 13px; line-height: 1; }
.wb-agent-nm { flex: 0 0 auto; }
.wb-agent-row.run { color: var(--c-a); font-weight: 600; }
.wb-agent-row.run .wb-agent-dot { animation: wbAgentBlink 1s linear infinite; }
.wb-agent-row.done { color: var(--ok); }
.wb-agent-row.err { color: var(--err-text); }
.wb-agent-act, .wb-agent-ms, .wb-agent-wait { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-dim); }
@keyframes wbAgentBlink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
/* 结果页顶部风格切换 */
#wbStyleBar { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
#wbStyleBar .sb-title { font-size: 12.5px; font-weight: 600; color: var(--text-dim); flex: none; }
#wbStyleBar select { flex: 1 1 160px; min-width: 140px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-solid); color: var(--text); font-size: 13px; }
#wbStyleBar button { flex: none; padding: 7px 12px; background: var(--btn-ghost); color: var(--text); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12.5px; }
#wbStyleBar .sb-note { flex: 1 1 100%; font-size: 12px; color: var(--text-mute); }

/* ===== 风格收敛：去模板味（实色按钮 / 实色徽章 / 移动端 hero 压缩 / 表单卡片统一） ===== */
/* 1) 主按钮：渐变+流光扫过+紫色光晕 → 实色 accent + 中性阴影。
    「开始生成」是全页最重要的一个动作，靠位置和字号立住就够，不靠发光 */
.btn-primary {
    background: var(--c-a);
    animation: none;
}
.btn-primary::after { display: none; }
.btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .22);
}
#startBtn {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .22);
}
body.light #startBtn,
body.light .btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 22px rgba(14, 116, 144, .24);
}

/* 1b) 110 轮补漏：上面「去掉渐变光晕」的决策当时漏了一批按钮——
    首页/导出区里还有 10 多处按钮是**内联**的
    `style="background: linear-gradient(135deg, var(--c-a) 0%, var(--c-b) 100%)"`（下载 PPT / 一键打包 /
    重新生成 / 提交反馈 …），内联样式压不住 class，所以 .btn-primary 的实色改法对它们无效，
    结果就是「同一个网站两套主按钮外观」：有的实色、有的带渐变。
    这里用属性选择器把它们一并收编成实色：一处生效、以后新增的内联按钮也自动跟随，
    不用去逐个改内联代码（那些行还分布在 app.js 里，改起来容易和别人撞车）。 */
[style*="linear-gradient(135deg, var(--c-a)"] {
    background: var(--c-a) !important;
}

/* 2) 向导步骤徽章同步去渐变：和主按钮同一套实色语言 */
.step-badge {
    background: var(--c-a);
    background-size: auto;
    animation: none;
}

/* 3) 折叠表单区统一卡片规格：圆角 / 描边 / 底色 / 内距与赛事要求卡一致，
    不再出现「裸表单」散落在卡片里 */
#teamBody, #userDataBody, #advParamBody, #draftAdvBody {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

/* 4) 移动端首屏压缩：hero 让位给创意输入框，第一屏就能开写 */
@media (max-width: 768px) {
    .hero { padding: 10px 16px 4px; margin-bottom: 6px; }
    .hero .wb-hero-logo { width: 56px; height: auto; margin-bottom: 5px; border-radius: 9px; }
    .hero h1 { font-size: 23px; margin-bottom: 3px; }
    .hero p { font-size: 12.5px; }
    .hero p.wb-hero-tech { font-size: 11px; margin-top: 3px; }
    /* 顶排工具按钮（使用说明/历史/背景）贴紧 hero，别在首屏占独立一行 */
    #wbTopTools { margin: 0 4px 4px !important; }
}

/* ---------- 打印样式（第八十七轮【低】）----------
   评委/用户常用「打印 → 另存为 PDF」。原来 @media print 一条都没有，
   结果是：背景层 position:fixed 会重复铺满每页、深色渐变直接吃满纸、工具栏遮住正文、
   折叠区内容整块打不出来。这里只做「可打印化」，不改屏幕上的观感。 */
@media print {
    /* 1) 背景层整层砍掉：它是 fixed + 多段 radial-gradient，打印时会按页重复渲染 */
    .wb-bg, .wb-grid, .wb-orb, .wb-scan, #wbParticles { display: none !important; }
    html, body {
        background: #fff !important;
        color: #111 !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    /* 2) 交互件一律不打印：按钮/悬浮球/浮层/提示条没有纸面意义，还会遮住正文 */
    #startBar, #themeToggle, #wbExportDock, #wbExpMenu, #wbTopTools, #wbAnchorBar,
    #wbStyleBar, #wbFab, #wbFabPanel, #wbAdvisor, #agentPanel, #quickExportBar,
    #wxBanner, #wbToast, #wbUaMask, #wbTipCard, #wbMatMask, #wbMatPanel,
    #historyModal, #introModal, #chartModal, #wbBanBar, #dataTodoBar, #typoBar,
    #wbPartialNote, #wbKeepCard, #wbSubCheckDot, #retryWrap, #cancelWrap,
    #resultTabs, .his-tab, .tab-bar, #compClear, #compSuggest, #compQuickRow,
    #uploadRow, .wb-tip, .wb-adv-toggle, #wbRateBox {
        display: none !important;
    }
    /* 3) 折叠区全部展开：屏幕上折叠是为了省首屏，纸上折叠等于把正文丢了 */
    #kbAdvBody, #ruleUploadBody, #teamBody, #userDataBody, #advParamBody,
    #draftAdvBody, #evBody, #kbDetail, #introBody, details > * {
        display: block !important;
    }
    details { display: block !important; }
    details > summary { list-style: none; }
    details > summary::after { content: ""; }
    /* 4) 去掉大面积色块与阴影：省墨、避免灰底压字 */
    .card, #eventReqCard, #kbBody, .wb-card {
        box-shadow: none !important;
        background: #fff !important;
        border: 1px solid #bbb !important;
        break-inside: avoid;
    }
    .container { max-width: none !important; padding: 0 !important; }
    .hero h1 { color: #111 !important; -webkit-text-fill-color: #111 !important; text-shadow: none !important; }
    a { color: #111 !important; text-decoration: none !important; }
    /* 5) 分页：标题不孤悬页尾、图表/表格/图片不被拦腰切断 */
    h1, h2, h3, .card-title { break-after: avoid; page-break-after: avoid; }
    img, svg, canvas, table, .wb-chart, #richCharts, #richTables, pre, blockquote {
        break-inside: avoid; page-break-inside: avoid; max-width: 100% !important;
    }
    @page { margin: 14mm 12mm; }
}

/* ===== 白底柔和主题适配（2026-09-28）=====
   这段最初由「豆包」在服务器上就地修改（工作树里，未提交）。
   WorkBuddy 接手整理时修正了一个会伤到用户的点：
   原版把 .card/.btn-primary/.tier-tag 写成了**无条件**浅色，
   而站点仍保留「夜间」切换（body.light 之外即深色变量集）——
   夜间用户会看到浅色卡片 + 浅色变量文字 = 浅底浅字几乎不可读。
   故凡涉及表面色的规则一律限定 body.light；顺带把浅色下过重的黑色阴影换成淡蓝灰。 */
body.light::before{
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
        radial-gradient(1000px 520px at 88% -12%, rgba(14,116,144,.07), transparent 62%),
        radial-gradient(820px 460px at -8% 34%, rgba(34,167,208,.05), transparent 60%),
        radial-gradient(760px 520px at 52% 112%, rgba(15,118,110,.06), transparent 62%);
}
body.light .hero h1{ color:#1f2a44; text-shadow:none; animation:none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    body.light .hero h1{
        background:linear-gradient(96deg, #0e7490 0%, #0f766e 58%, #0891b2 100%);
        -webkit-background-clip:text; background-clip:text;
        color:transparent; -webkit-text-fill-color:transparent;
        text-shadow:none;
    }
    body.light .hero .wb-em{ -webkit-text-fill-color:var(--c-a); color:var(--c-a); }
}
body.light .hero .wb-hero-logo{ box-shadow:0 8px 22px rgba(14,116,144,.18); }
body.light .card{
    /* 157轮：卡片底色收到更纯的白（原末端 #f6f8fe 偏蓝），与主背景拉开是靠 1px 描边和淡阴影，
       不是靠「卡片比页面更蓝」——那种做法会让整屏发灰 */
    background:linear-gradient(158deg, #ffffff 0%, #fcfdff 100%);
    border:1px solid rgba(14,116,144,.14);
    box-shadow:0 10px 30px rgba(31,42,68,.07), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.light .card::before{
    background:linear-gradient(90deg, transparent, rgba(14,116,144,.30), rgba(15,118,110,.30), transparent);
    opacity:.55;
}
body.light .card::after{ background:radial-gradient(circle, rgba(14,116,144,.07), transparent 70%); }
body.light .card:hover{
    border-color:rgba(14,116,144,.26);
    box-shadow:0 16px 40px rgba(31,42,68,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
body.light .btn-primary{ color:#fff; box-shadow:0 10px 26px rgba(14,116,144,.30); }
body.light .btn-primary:hover:not(:disabled){ box-shadow:0 14px 30px rgba(14,116,144,.36); }
body.light .tier-tag{
    background:rgba(14,116,144,.07);
    color:var(--c-a);
    border-color:rgba(14,116,144,.20);
}
/* 浅色下把「深底专属」的重黑阴影换成淡蓝灰，否则悬浮件像镶了黑边 */
body.light #themeToggle{ box-shadow:0 6px 18px rgba(31,42,68,.12); }
body.light #wbFabMain{ box-shadow:0 10px 26px rgba(14,116,144,.28); }
body.light #wbFabPanel{ box-shadow:0 16px 40px rgba(31,42,68,.14); }

/* ===== 维护公告条（第九十四轮【中】）=====
   用固定的暖黄配色而不是主题变量：公告的意义就是「一眼看到」，
   深浅两套主题下都保持同样醒目，也不会出现浅底浅字。 */
#wbNoticeBar{
    display: flex; gap: 10px; align-items: flex-start;
    margin: 4px 0 16px; padding: 11px 14px;
    background: #fff7e6; border: 1px solid #f0c76b; border-left: 4px solid #e8a72a;
    border-radius: 10px; font-size: 13px; line-height: 1.7; color: #6b4a05;
}
#wbNoticeBar .nb-ico{
    flex: none; width: 18px; height: 18px; border-radius: 50%;
    /* 2026-10-31：白字压 #e8a72a 只有 1.94:1，改深褐约 6.4:1 */
    background: #e8a72a; color: #4a3005; font-weight: 700; font-size: 12px;
    display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
#wbNoticeBar .nb-body{ flex: 1; min-width: 0; word-break: break-word; }
#wbNoticeBar .nb-body b{ margin-right: 8px; }
#wbNoticeBar .nb-close{
    flex: none; border: none; background: transparent; color: #a37b1f;
    font-size: 19px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#wbNoticeBar .nb-close:hover{ color: #6b4a05; }
@media print { #wbNoticeBar { display: none !important; } }

/* ===== 移动端次级操作触达（第一百零四轮）=====
   「从材料识别」这类挂在标题行右侧的小按钮，桌面看着是文字链接，
   手机上就是 4px 上下内边距的小薄片——既难点中又容易被「开始生成」抢走注意力。
   视觉弱化靠配色已成立（--text-dim + 细描边），这里只补触达面积与和标题的间距。 */
@media (max-width: 768px) {
    /* #wbClearBtn 在 1380 行有 ID 级规则，必须连带写 ID 否则被它压住（本轮实测 8px/38px） */
    .wb-textbtn, #wbClearBtn { padding: 12px 14px; font-size: 12.5px; }
    label .wb-textbtn { margin-left: 12px; }
}

/* ===== 417 轮：生成文档底部的智能辅助声明 =====
   与后端导出件同一套措辞，网页上也要能看到，避免「网页没说、导出件才说」两套口径。
   配色走主题变量，日间/夜间都过 AA（次要文字用 --text-mute，不用更浅的自定义灰）。 */
.wb-assist-note {
    margin-top: 18px;
    padding: 9px 12px;
    background: var(--surface, rgba(255, 255, 255, .045));
    border-left: 3px solid var(--c-a, #38bdf8);
    border-radius: 0 8px 8px 0;
    color: var(--text-mute, #5f6b88);
    font-size: 12.5px;
    line-height: 1.7;
}
@media (max-width: 768px) {
    .wb-assist-note { font-size: 12px; padding: 8px 10px; margin-top: 14px; }
}

/* ---------- 403 轮（移植到线上 style.css）：下拉浮层可读性 ----------
   症状：点开顶部「更多 ▾」后，菜单右侧的「清空重写」等文字发灰；菜单与白色卡片糊成一片，
   被挡掉左半边的按钮看起来像"字被裁掉了"。
   根因全在 index.html 的内联样式上（那套配色是按**夜间**调的，日间白底不成立）：
   1. #wbMoreMenu 的投影是 30px 大扩散的黑色阴影（日间 18%，导出菜单 40%）。
      深色底上叫"投影"，白卡片上就是一片灰雾：实测菜单边缘外约 20px 处白底被压到
      rgb(241,241,242)，正落在按钮文字上，对比度肉眼可见地塌。
   2. background: var(--surface-solid) 日间 = #ffffff，与卡片同白；边框 --line 仅 16%
      （合成 rgb(221,224,233)）→ 菜单边界等于不存在。
   处理原则：只压视觉，不改结构、不改定位、不改行为。边框仍是 1px，盒子尺寸零变化，
   所以 app.js 里的定位/夹边计算不受影响；日间换「窄扩散 + 低不透明度」的冷色投影，
   夜间保留原深色投影（深底上浅投影看不见）。 */
#wbMoreMenu,
#wbExpMenu {
    /* 实色底：挡住下面的内容，而不是让内容透上来 */
    background: var(--surface-solid, #ffffff) !important;
    /* 边框提到 --line-strong（日间 32%）：白底上也必须能看出"这里有一个浮层" */
    border: 1px solid var(--line-strong, rgba(40, 60, 120, .32)) !important;
    /* 双层：贴身 1px 收边 + 24px 内衰减，比原来窄一半以上，不污染周围文字 */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .10),
        0 10px 24px rgba(15, 23, 42, .14) !important;
}

/* 夜间（含自定义深色主题）：保留原有深色投影 */
body:not(.light) #wbMoreMenu,
body:not(.light) #wbExpMenu {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}

/* 菜单项继承了 .wb-glass-btn 的 backdrop-filter: blur(10px)：
   面板已是实色底，模糊自己的背景纯白耗 GPU（低端机每次开菜单都要重采样）。 */
#wbMoreMenu,
#wbMoreMenu *,
#wbExpMenu,
#wbExpMenu * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---------- 404 轮：菜单项 hover 后文字消失（"鼠标放上去内容就看不清"的真凶） ----------
   现象：鼠标移到「更多」菜单的「页面背景」上，那一行的字整个没了，只剩一个蓝点。
   根因是两条既有规则打架，跟投影/透明度完全无关：
   1. .wb-glass-btn:hover 写死 color:#fff（style.css:570）；
   2. 菜单项在 index.html 里带内联 background:transparent，把 hover 的深色底压掉了，
      所以 hover 时是「#fff 的文字 + 透明/白色底」= 白字落白底，字直接看不见。
   （管理后台那一项看着正常，只是因为它当时没被 hover。）
   处理：菜单项一律走主色，并显式给一个可见的 hover 底色；内联样式用 !important 压过。
   只影响 #wbMoreMenu / #wbExpMenu 内部的按钮，不动工具栏本身。 */
#wbMoreMenu .wb-glass-btn,
#wbExpMenu .wb-glass-btn {
    color: var(--text, #1a2340) !important;
}

#wbMoreMenu .wb-glass-btn:hover,
#wbMoreMenu .wb-glass-btn:focus-visible,
#wbExpMenu .wb-glass-btn:hover,
#wbExpMenu .wb-glass-btn:focus-visible {
    color: var(--text, #1a2340) !important;
    background: var(--c-a-soft, rgba(14, 116, 144, .12)) !important;
    /* 菜单项在浮层里不要位移，否则 hover 时整行跳动 */
    transform: none !important;
    box-shadow: none !important;
}

/* 导出菜单的项是普通 div，同样没有 hover 反馈，补一条 */
#wbExpMenu > div:hover {
    background: var(--c-a-soft, rgba(14, 116, 144, .12)) !important;
}

/* 同上：键盘 Tab 到菜单项时也要能看清（:focus 与 :focus-visible 都覆盖） */
#wbMoreMenu .wb-glass-btn:focus,
#wbExpMenu .wb-glass-btn:focus {
    color: var(--text, #1a2340) !important;
    background: var(--c-a-soft, rgba(14, 116, 144, .12)) !important;
    outline: 2px solid var(--c-a, #0e7490);
    outline-offset: -2px;
}

/* ===== 选赛道（2026-10-31 用户反馈「选赛道的按钮不明显」）=====
   原来三处叠在一起，等于藏起来：
   ① 赛区块背景写的是 --surface-2，和赛事卡底色**完全同一个值**，没有任何边界；
   ② 标题 12.5px/600 用 --text-dim，括号说明同字号，整块和正文一个层级；
   ③ 未选中的 chip 是「白底 + --line 细边 + --text-dim 字」，看着像禁用标签不像选项。
   现在：赛区块用实底 + 左侧主色强调条立起来，chip 放大到 38px 高、
   未选中就是可点样子（--text 字 + --line-strong 边），选中实底 + 对勾；
   卡片收起时另有 #evTrackBadge 回执（见 app.js），不再零提示。 */
#evTrackBox {
    position: relative;
    margin: 0 0 12px;
    padding: 12px 14px 12px 15px;
    border-radius: 8px;
    /* 实底：卡片是半透明 surface-2，这里必须换成不透明的才分得开 */
    background: var(--surface-solid);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--c-a);
}
#evTrackBox .ev-track-title {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
    margin-bottom: 9px;
    font-size: 13.5px; font-weight: 700; color: var(--text);
}
#evTrackBox .ev-track-hint {
    font-size: 11.5px; font-weight: 400; color: var(--text-mute);
}
/* 赛道 chips：点得着（38px 高）、看得出可点（字用正文色、边用 --line-strong） */
.ev-track-chip {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 38px; padding: 8px 16px;
    font-size: 13.5px; font-weight: 600; line-height: 1;
    font-family: inherit;
    border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--line-strong);
    background: var(--surface-solid);
    color: var(--text);
    transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.ev-track-chip:hover { border-color: var(--c-a); color: var(--c-a); background: var(--c-a-soft); }
.ev-track-chip:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }
.ev-track-chip[aria-pressed="true"] {
    /* 夜间 --c-a 是亮青 #38bdf8，白字压上去只有 1.9:1（看不清）；
       夜间改用深字，日间 --c-a 是深青 #0e7490，白字 5.36:1 才成立。 */
    background: var(--c-a); border-color: var(--c-a); color: #08131f; font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--c-a-rgb, 56,189,248), .32);
}
body.light .ev-track-chip[aria-pressed="true"] { color: #fff; }
.ev-track-chip[aria-pressed="true"]:hover { background: var(--c-a); color: #08131f; }
body.light .ev-track-chip[aria-pressed="true"]:hover { color: #fff; }
/* 标题栏的赛道回执：收起状态下唯一能看见「有没有选赛道」的地方 */
#evTrackBadge {
    display: none; align-items: center; gap: 4px;
    margin-left: 2px; padding: 3px 9px;
    font-size: 12px; font-weight: 600; line-height: 1.3;
    border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--c-a);
    background: var(--c-a-soft); color: var(--c-a);
}
#evTrackBadge:hover { background: var(--c-a); color: #fff; }
/* 有赛道但用户还没亲手选过：用警示色催一下，选完立刻回到主色 */
#evTrackBadge.is-todo {
    border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-text);
}
#evTrackBadge.is-todo:hover { background: var(--warn-text); color: #fff; border-color: var(--warn-text); }
@media (max-width: 768px) {
    /* 手机上三行 chip 会挤，改整行铺开：一行一个，指头好点 */
    #evTrackChips { width: 100%; }
    .ev-track-chip { flex: 1 1 100%; justify-content: center; min-height: 42px; font-size: 14px; }
}

/* 未选赛道提示条（2026-10-31 第二轮：用户要「没选赛道提醒一下」）
   只在「这个赛事有赛道 + 用户一次没选过」时出现，选完立刻消失。
   用警示色 + 左侧 3px 实条，和芯片同宽，扫一眼就知道这里没填完。 */
#evTrackWarn {
    display: none;
    margin: 0 0 10px;
    padding: 8px 11px;
    border-radius: 6px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    border-left: 3px solid var(--warn-text);
    font-size: 12.5px; line-height: 1.7;
    color: var(--text);
}
#evTrackWarn b { color: var(--warn-text); }
/* 生成被拦下时整块抖两下：和输入框共用同一套 wbShakeHL，用户已认识这个反馈 */
#evTrackBox.wb-shake-hl { animation-duration: 1.1s; }