/* =============================================================================
   文件：static/css/site.css
   作用：dajun-ai.com 全站 CSS（亮/暗双主题 + 响应式 + 4 屏布局）
   解决什么问题：把所有视觉呈现统一规范（设计文档 §2-4）
   创建：2026-09-09
   作者：大军 + 小军
   设计决策：见 projects/V1_首页设计决策文档_2026-09-09.md
   ============================================================================= */

/* =============================================================================
   Part 1: 全局重置 + 基础样式
   ============================================================================= */

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

html {
    scroll-behavior: smooth;
}

/* =============================================================================
   V1 SEO 体检报告 P2-5：移动端点击延迟优化
   替代已停维护的 fastclick 库（2019 年 README 自述："If you're using a
   modern browser, you don't need FastClick"），改用原生 CSS：
   - touch-action: manipulation 消除 300ms 双击判断延迟
   - :active 透明度反馈让用户知道"按下去了"
   影响范围：全站 button / a 标签
   设计参考：MDN https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
   ============================================================================= */
button,
a {
    touch-action: manipulation;  /* 禁用双击放大判断，点击立即触发 */
}

button:active,
a:active {
    opacity: 0.6;                /* 按下反馈：60% 透明度 */
    transition: opacity 0.1s ease-out;
}


body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================================================
   Part 2: CSS 变量（亮色 + 暗色双模式）
   - 亮色：默认（:root）
   - 暗色：[data-theme="dark"] 覆盖
   ============================================================================= */

:root {
    /* 亮色模式（设计文档 §2.1） */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F5F5F7;
    --color-bg-tertiary: #EEEEF1;
    --color-text-primary: #1D1D1F;
    --color-text-secondary: #6E6E73;
    --color-accent: #0066CC;
    --color-accent-hover: #0052A3;
    --color-accent-bg: #EFF6FF;
    --color-border: #D2D2D7;

    /* 渐变 α（极浅同色系微渐变） */
    --gradient-alpha: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);

    /* 渐变 β（深蓝单色渐变，用于 CTA / 主推卡） */
    --gradient-beta: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);

    /* 尺寸 */
    --container-max-width: 1200px;
    --container-padding: 32px;
    --section-spacing: 96px;
    --card-radius: 12px;
}

[data-theme="dark"] {
    /* 暗色模式（设计文档 §2.2） */
    --color-bg-primary: #000000;
    --color-bg-secondary: #1D1D1F;
    --color-bg-tertiary: #2C2C2E;
    --color-text-primary: #F5F5F7;
    --color-text-secondary: #A1A1A6;
    --color-accent: #2997FF;
    --color-accent-hover: #4DA8FF;
    --color-accent-bg: #0A1A2F;
    --color-border: #38383A;

    --gradient-alpha: linear-gradient(180deg, #000000 0%, #000000 100%);
    --gradient-beta: linear-gradient(135deg, #0A1A2F 0%, #152844 100%);
}

/* =============================================================================
   Part 3: 通用容器
   ============================================================================= */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* =============================================================================
   Part 4: 顶部导航（设计文档 §8.1）
   ============================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .site-header {
    background: rgba(0, 0, 0, 0.8);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

.site-logo {
    font-weight: 600;
    font-size: 18px;
    color: var(--color-text-primary);
    text-decoration: none;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--color-text-primary);
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--color-bg-secondary);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease-in-out;
}

.theme-toggle:hover svg {
    transform: rotate(180deg);
}

/* === 顶部导航菜单 === */

/* 桌面端横向菜单 */
.site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 32px;
    margin-right: auto;        /* 把主题按钮推到右边 */
}

.site-nav-link {
    position: relative;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav-link:hover {
    color: var(--color-accent);
    background-color: var(--color-accent-bg);
}

.site-nav-link.is-active {
    color: var(--color-accent);
}

.site-nav-link.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 1px;
}

/* 移动端汉堡按钮（默认隐藏）*/
.nav-toggle {
    display: none;             /* 桌面端隐藏 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: background-color 0.2s ease;
}

.nav-toggle:hover {
    background: var(--color-bg-secondary);
}

.nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 汉堡按钮激活态 → X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* 移动端下拉菜单（默认隐藏）*/
.site-nav-mobile {
    display: none;             /* 桌面端隐藏 */
    flex-direction: column;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 0;
}

.site-nav-mobile-link {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.site-nav-mobile-link:hover,
.site-nav-mobile-link:active {
    background: var(--color-bg-secondary);
}

/* === 移动端（< 768px）：汉堡按钮显示 + 菜单默认收起 === */
@media (max-width: 768px) {
    .site-nav {
        display: none;         /* 桌面横向菜单隐藏 */
    }
    .nav-toggle {
        display: flex;         /* 汉堡按钮显示 */
    }
    .site-nav-mobile {
        display: flex;         /* 下拉菜单默认 flex，但被 [hidden] 覆盖 */
    }
    /* 关键修复：移动端 [hidden] 永远生效 */
    .site-nav-mobile[hidden] {
        display: none !important;
    }
}

/* =============================================================================
   Part 5: Section 通用样式
   ============================================================================= */

section {
    padding: var(--section-spacing) 0;
}

/* 第 2 部分：最近在折腾（浅灰 1，区分 Hero）*/
section.recent {
    background: var(--color-bg-secondary);
}

/* 第 3 部分：即将要折腾（浅灰 2，更深一档）*/
section.upcoming {
    background: var(--color-bg-tertiary);
}

/* =============================================================================
   Part 6: Hero 区（设计文档 §5.2）
   - 桌面：左 35% / 右 65% 分栏
   - 平板 + 手机：上下排列
   ============================================================================= */

/* V1 Day 16 v20：hero 固定 1200px 居中，绝对不超出 */
.hero {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 58px 0 32px 0;         /* V1 Day 16 v20：top 96 → 58（缩小 40%）*/
    background: var(--color-bg-primary);            /* V1 Day 16 v20：5 大块方案 A · 第 1 块 = 纯白 */
    box-sizing: border-box;
}

/* V1 Day 16 v28：tagline-band 改为方案1 · 个人名片 1.5 行 */

/* V1 Day 16 v28：第一个 hero-tagline-band 清空占位（hero section 内），只保留 1px 高度 */
.hero-tagline-band-placeholder-shell {
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}
.hero-tagline-band-placeholder-shell .container {
    padding: 0 !important;
    margin: 0 !important;
}

.hero-tagline-band {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 0 72px 0;         /* V1 Day 16 v28：格言上下距离各加 1 倍（0→60，36→72） */
    background: var(--color-bg-primary);
    box-sizing: border-box;
}

/* V1 Day 16 v28：方案1 · 个人名片卡片（左侧渐变色条 + 1.5 行文字） */
/* V1 Day 16 v28：方案1 整体放大 1.6 倍（28px → 45px，15px → 24px） */
.hero-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 0 13px 32px;
    border-left: 6px solid;
    border-image: linear-gradient(180deg, #6366f1 0%, #a855f7 100%) 1;
}

.hero-card-line1 {
    font-size: 45px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.2;
    letter-spacing: -0.8px;
    margin: 0;
}

.hero-card-line1 .accent {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 包头 = 内蒙古的"下级"，字号缩 25%（45px → 34px，em: 0.76） */
.hero-card-line1 .sub-accent {
    font-size: 0.76em;  /* 34px */
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-card-line2 {
    font-size: 24px;
    color: #555;
    line-height: 1.55;
    margin: 0;
    font-weight: 400;
}

.hero-tagline-band-placeholder {
    text-align: center;
    font-size: 15px;
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0;
}

/* V1 Day 16 v16：hero-grid 左列 380px，右列拿到更多空间 */
/* V1 Day 16 v20：hero-grid 高度自然（由 spacer 控制） */
.hero-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 48px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0 48px;
    /* 高度由 hero-left 内容 + spacer 决定，hero-right 跟着 stretch */
}

/* V1 Day 16 v16：hero-left 居左上、居上 */
.hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* 关键：居左对齐 */
    text-align: left;
    gap: 24px;
}

/* V1 Day 16 v16：hero-identity 居左 */
.hero-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* V1 Day 16 v20：hero-spacer 作为高度调节器（控制 hero-left 总高度 = hero-right 总高度）*/
.hero-spacer {
    min-height: 20px;
    width: 100%;
    flex-shrink: 0;
}

/* V1 Day 16 v7：头像加大 80 → 100px */
.hero-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--color-bg-primary);
}

.hero-persona {
    /* 浅蓝渐变背景 + 蓝色左边框（像引言一样，但更"个人化"）*/
    background: linear-gradient(
        135deg,
        var(--color-accent-bg) 0%,
        rgba(0, 102, 204, 0.02) 100%
    );
    border-left: 3px solid var(--color-accent);
    padding: 14px 18px;
    border-radius: 0 10px 10px 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.7;
    /* 关键：与下方"大军"标题拉开 80px */
    margin-bottom: 80px;
    max-width: 560px;
}

.persona-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.persona-quote {
    display: block;
    margin-top: 8px;
    color: var(--color-text-primary);
    font-weight: 500;
    font-style: italic;
    font-size: 15px;
}

/* V1 Day 16 v16：标题字号缩小 56 → 48（避免 tagline 换行） */
.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    display: block;
}

.hero-title .hero-tagline {
    display: inline;
    font-size: 20px;          /* V1 Day 16 v16：缩小 26 → 22px（避免换行 + 更协调） */
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: -0.01em;
    margin-left: 8px;        /* 同步缩小 margin-left */
    /* 增强蓝色光晕（呼吸动画） */
    text-shadow:
        0 0 8px rgba(0, 102, 204, 0.65),
        0 0 16px rgba(0, 102, 204, 0.45),
        0 0 24px rgba(0, 102, 204, 0.25);
    animation: glow-pulse 2.4s ease-in-out infinite;
}

/* 呼吸光晕动画（关键帧）*/
@keyframes glow-pulse {
    0%, 100% {
        text-shadow:
            0 0 6px rgba(0, 102, 204, 0.45),
            0 0 12px rgba(0, 102, 204, 0.25),
            0 0 18px rgba(0, 102, 204, 0.15);
    }
    50% {
        text-shadow:
            0 0 14px rgba(0, 102, 204, 0.85),
            0 0 28px rgba(0, 102, 204, 0.65),
            0 0 42px rgba(0, 102, 204, 0.45);
    }
}

/* 尊重用户的"减少动画"系统设置 */
@media (prefers-reduced-motion: reduce) {
    .hero-title .hero-tagline {
        animation: none;
        text-shadow:
            0 0 8px rgba(0, 102, 204, 0.65),
            0 0 16px rgba(0, 102, 204, 0.45);
    }
}
/* =============================================================================
   Hero 右手指向图标（设计文档 §6.1）
   - 位置：hero-subtitle 末尾（引导视觉流向右侧 6 分类）
   - 动画：nudge-right（轻微左右摇摆，2s 循环）
   ============================================================================= */
.hero-arrow {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-left: 12px;
    vertical-align: middle;
    color: var(--color-accent);
    cursor: pointer;
    /* 轻微脉动 + 左右摇摆 */
    animation: nudge-right 2s ease-in-out infinite;
}

@keyframes nudge-right {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.85;
    }
    50% {
        transform: translateX(8px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-arrow {
        animation: none;
    }
}


/* 旧的 .hero-tagline 块已合并到 .hero-title .hero-tagline（见上）
   保留注释以便追溯。
*/

/* Hero subtitle：3 段分层，节奏统一 */
.hero-subtitle {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 560px;
}

/* 第 1 段：核心（深色 + 较大）*/
.hero-subtitle-lead {
    font-size: 19px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.85;
    letter-spacing: 0.005em;
}

/* 第 2 段：愿景（次级灰 + 左侧细线引文感）*/
.hero-subtitle-vision {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.85;
    padding: 4px 0 4px 16px;
    border-left: 2px solid var(--color-border);
    /* 弱化：用更深一层的灰，避免与 lead 争抢注意力 */
}

/* CTA 容器：1 行邀请 + 1 行链接（不再 3 段对齐不齐）*/
/* CTA 横排：3 个短语 + 圆点分隔 + 右侧箭头 */
/* V1 Day 16 v7：CTA row 改名 + margin-top: auto 推到底部 */
.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;          /* 关键：推到 hero-left 底部 */
    padding-top: 8px;
}

.cta-row-item {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.cta-row-item-accent {
    color: var(--color-accent);
    font-weight: 600;
}

.cta-row-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    opacity: 0.4;
    flex-shrink: 0;
}

.hero-cta-arrow-inline {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    margin-left: 4px;
    flex-shrink: 0;
    animation: nudge-right 2s ease-in-out infinite;
}

/* 高亮短语（荧光笔下划线）*/
.hero-subtitle .hl {
    color: var(--color-accent);
    font-weight: 600;
    background: linear-gradient(
        transparent 65%,
        var(--color-accent-bg) 65%
    );
    padding: 0 3px;
    border-radius: 2px;
}

/* Hero 右侧：6 分类长条（设计文档 §6.1） */
/* V1 Day 16 v20：hero-right 高度由 stretch 决定，内容自适应 */
.hero-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(64px, auto);  /* 每行最少 64px，内容多就 auto 撑开 */
    gap: 12px;
    width: 100%;
    max-width: 580px;
    justify-self: end;
    align-self: stretch;             /* 撑到与 hero-left 等高（关键） */
}

/* V1 Day 16 v8：去掉 max-width: 480px，让 6 分类条占满 hero-right */
/* V1 Day 16 v16：category-strip 统一高度 64px + 内容截断对齐 */
.category-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                border-color 0.25s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
    width: 100%;
    min-height: 64px;               /* V1 Day 16 v20：min-height（让 grid 控制行高） */
    box-sizing: border-box;
    overflow: hidden;
}

@media (hover: hover) {
    .category-strip:hover {
        transform: scale(1.03);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        border-left: 3px solid var(--color-accent);
        /* 改：加 Apple 风浅蓝渐变（克制 · 5-10% 透明度）*/
        background: linear-gradient(
            90deg,
            rgba(0, 102, 204, 0.02) 0%,
            var(--color-accent-bg) 100%
        );
    }

    .hero-right:hover .category-strip:not(:hover) {
        opacity: 0.7;
    }
}

.category-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 8px;
    border-radius: 8px;
    box-sizing: content-box;   /* padding 不影响 width/height */
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* V1 Day 15 决策 7：分类长条右上角文章数角标 */
.cat-count {
    position: absolute;
    top: 20px;        /* 上边距 = 长条 padding-top（保持一致）*/
    right: 16px;      /* 右边距 = 长条 padding-right 一半（不要太靠边）*/
    font-size: 12px;
    color: var(--color-text-secondary);
    background: transparent;  /* 去掉背景 · 融入感更强 */
    padding: 4px 10px;        /* 加点内边距，hover 区域更大 */
    border-radius: 4px;
    line-height: 1.4;
    pointer-events: none;
    transition: color 0.2s ease;
}

.category-strip:hover .cat-count {
    color: var(--color-text-primary);  /* hover 时稍微深一点 */
}


/* 6 分类色彩（设计文档 §6.1 · V1 Day 9 B2）
   用 data 属性 + 属性选择器，改色只动 CSS，不动 HTML */
.category-strip[data-color="blue"]   .category-icon { background: rgba(0, 102, 204, 0.10); color: #0066cc; }
.category-strip[data-color="green"]  .category-icon { background: rgba(34, 139, 34, 0.10); color: #228b22; }
.category-strip[data-color="orange"] .category-icon { background: rgba(255, 140, 0, 0.12); color: #d97a00; }
.category-strip[data-color="red"]    .category-icon { background: rgba(220, 20, 60, 0.10); color: #c91842; }
.category-strip[data-color="purple"] .category-icon { background: rgba(138, 43, 226, 0.10); color: #7d22ce; }
.category-strip[data-color="pink"]   .category-icon { background: rgba(255, 105, 180, 0.12); color: #e754a8; }

/* hover 时背景圆加深 + 图标微缩放 + 变白 */
.category-strip:hover .category-icon {
    transform: scale(1.08);
}

.category-strip[data-color="blue"]:hover   .category-icon { background: #0066cc; color: #FFFFFF; }
.category-strip[data-color="green"]:hover  .category-icon { background: #228b22; color: #FFFFFF; }
.category-strip[data-color="orange"]:hover .category-icon { background: #d97a00; color: #FFFFFF; }
.category-strip[data-color="red"]:hover    .category-icon { background: #c91842; color: #FFFFFF; }
.category-strip[data-color="purple"]:hover .category-icon { background: #7d22ce; color: #FFFFFF; }
.category-strip[data-color="pink"]:hover   .category-icon { background: #e754a8; color: #FFFFFF; }

.category-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.category-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

/* =============================================================================
   Part 7: Section 标题 + 次 CTA（设计文档 §5.3）
   ============================================================================= */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}

.section-title {
    font-size: 36px;            /* 默认大标题（2.1 / 2.2 节）*/
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    text-align: center;
    flex: 1;
}

/* V1 Day 15 优化：reading section 用更小字号 + 不抢戏 */
.section-title-small {
    font-size: 22px;
    font-weight: 500;
    text-align: left;
    flex: none;
}

/* V1 Day 15 优化：reading section 标题右对齐 + 左边距 1/4 行宽 */
.section-title-small {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    text-align: left;
    flex: none;
}

/* V1 Day 15 优化：reading section 标题右对齐 + 左边距 1/4 行宽 */
.section-header-right {
    max-width: 72%;
    margin-left: 28%;
    text-align: left;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* V1 Day 15 优化：移动端 reading header 占满屏宽（与 mini-list 一致）*/
@media (max-width: 768px) {
    .section-header-right {
        max-width: 100%;
        margin-left: 0;
    }
}

.section-header-right .section-title-small {
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.section-header-right .section-subtitle {
    margin: 0;
    line-height: 1.5;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* V1 Day 15 决策 2 优化：左上角书签 + 标题副标题合并 + 低调动画 */
.section-bookmark {
    /* V1 Day 16 v28：浮在第二块背景上沿（补偿 padding-top 3.4rem）*/
    position: absolute;
    top: -3.4rem;                  /* V1 Day 16 v28：从 -2rem → -3.4rem，贴到第二块背景上沿 */
    left: var(--container-padding, 32px);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 12px;
    margin-bottom: 0;
    background: linear-gradient(135deg,
        #fff8e1 0%,
        #ffecb3 100%);
    border: 1px solid #fbbf24;
    border-radius: 0 8px 8px 0;
    border-left: 3px solid #f59e0b;
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    opacity: 0;
    transform: translateY(-8px);
    animation: bookmark-slide-in 0.6s ease-out forwards;
    transition: all 0.3s ease;
}

/* V1 Day 15 优化：含 bookmark 的 section 需要 relative 定位 + 上 padding 给书签空间 */
section.has-bookmark {
    position: relative;
}
.section-bookmark-emoji {
    font-size: 1.125rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
}

.section-bookmark-text {
    line-height: 1;
}

.section-title-with-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0;                  /* V1 Day 15 优化：间距由 padding-left 控制 */
    margin-top: 0;               /* V1 Day 15 优化：默认无顶部间距（避免离灰背景上沿太远）*/
    margin-bottom: 1.5rem;
    text-align: left;
}

/* 2.2 节的标题需要与 2.1 拉开距离（section-title-with-line-margin）*/
.section-title-with-line.section-title-margin-top {
    margin-top: 2.5rem;
}

.section-subtitle-line {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

.section-title-with-line:hover .section-subtitle-line {
    color: var(--color-text-primary);
}

.section-subtitle-line {
    padding-left: 0;
    border-left: none;
    position: relative;
    transition: all 0.3s ease;
}

.section-subtitle-line::before {
    content: "—————";
    margin-right: 0.5em;       /* V1 Day 15 优化：破折号后 2 个汉字距（em 相对字体） */
    margin-left: 1em;          /* V1 Day 15 优化：破折号前 3 个汉字距（标题字号下） */
    opacity: 0.4;
    font-weight: 300;
    transition: all 0.3s ease;
    display: inline-block;
}

.section-title-with-line:hover .section-subtitle-line {
    color: var(--color-text-primary);
}

.section-title-with-line:hover .section-subtitle-line::before {
    opacity: 0.7;
}

@keyframes bookmark-slide-in {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .section-title-with-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .section-subtitle-line::before {
        content: "";
        margin-right: 0;
    }
}

.section-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.section-link:hover {
    color: var(--color-accent-hover);
}

/* =============================================================================
   Part 8: 主推卡 + 普通卡（设计文档 §6.2）
   ============================================================================= */

.feature-card {
    display: block;
    background: var(--gradient-beta);
    border-radius: var(--card-radius);
    padding: 40px;
    margin-bottom: 32px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--color-border);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.15);
}

.feature-tag {
    display: inline-block;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.feature-date {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: 12px;
}

.feature-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.feature-excerpt {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.feature-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-accent);
}

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

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-tag {
    display: inline-block;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.card-excerpt {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}

.card-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent);
}

/* =============================================================================
   Part 9: 折腾预告时间轴（设计文档 §6.3）
   ============================================================================= */

.timeline {
    position: relative;
    padding: 32px 0;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
    transform: translateY(-50%);
}

.timeline-nodes {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;                 /* 新：节点间距 */
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1 1 180px;           /* 改：1 → 1 1 180px（最小 180px，平分剩余）*/
    min-width: 0;              /* 允许内容压缩 */
    text-align: center;
    position: relative;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1 1 180px;       /* 改：1 → 1 1 180px（最小 180px，平分剩余）*/
    min-width: 0;          /* 允许内容压缩 */
    text-align: center;
    position: relative;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid var(--color-bg-primary);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;            /* 勾的颜色 */
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* planned：空心圆（只有边框）*/
.timeline-node[data-status="planned"] .timeline-dot {
    background: transparent;
    border: 3px solid var(--color-text-secondary);
    width: 20px;
    height: 20px;
}

.timeline-node[data-status="planned"] .timeline-dot::after {
    content: none;             /* 不显示勾 */
}

/* in-progress：蓝色脉动 */
.timeline-node[data-status="in-progress"] .timeline-dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
    animation: dot-pulse 2s ease-in-out infinite;
}

.timeline-node[data-status="in-progress"] .timeline-dot::after {
    content: none;
}

/* done：绿色 + 勾 */
.timeline-node[data-status="done"] .timeline-dot {
    background: #34C759;
    border-color: #34C759;
}

.timeline-node[data-status="done"] .timeline-dot::after {
    content: "✓";
}

/* 脉动动画 */
@keyframes dot-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.6);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px rgba(0, 102, 204, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-node[data-status="in-progress"] .timeline-dot {
        animation: none;
    }
}

.timeline-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

.timeline-content {
    margin-top: 8px;
    max-width: 160px;
}

.timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.timeline-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
/* =============================================================================
   "即将要折腾" 时间轴 + 横排卡片（设计文档 §6.3 终版）
   - 时间轴：顶部横排5节点 + 横线
   - 卡片：横排5列，默认显示完整3字段（事项名 + 痛点 + 预期）
   - hover：抬升+边框变蓝+浅蓝渐变（参考6分类风格，保持一致）
   - 移动端：1列堆叠+左侧纵向时间轴+卡片在右
   ============================================================================= */

/* 时间轴容器 */
.upup-timeline {
    position: relative;
    margin-bottom: 48px;
}

/* 时间轴节点容器：横排5个 */
.upup-timeline-nodes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* 时间轴横线（连接线）*/
.upup-timeline::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
    transform: translateY(-50%);
    z-index: 0;
}

/* 时间轴节点（药丸）*/
.upup-timeline-node {
    position: relative;
    z-index: 1;
    background: var(--color-bg-secondary);
    padding: 6px 16px;
    border-radius: 100px;
    border: 2px solid var(--color-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: all 0.25s ease;
}



/* V1 Day 15 决策 4 v2：横时间轴（窗帘杆样式）+ 单行卡片 */

/* 大 section 容器 */
/* V1 Day 16 v16：我的折腾清单（块 3）· 浅灰 */
.projects-section {
    padding: var(--section-spacing) 0;
    background: var(--color-bg-secondary);
}

/* === 横时间轴 === */
.projects-timeline {
    position: relative;
    padding: 32px 24px 24px;
    margin-bottom: 24px;
}

/* 横杆（窗帘杆）*/
.projects-timeline-rail {
    position: absolute;
    top: 50px;                     /* 在节点圆点中间 */
    left: 24px;
    right: 24px;
    height: 5px;
    background: linear-gradient(
        to right,
        rgba(16, 185, 129, 0.5) 0%,
        rgba(16, 185, 129, 0.5) 40%,
        rgba(99, 102, 241, 0.5) 40%,
        rgba(99, 102, 241, 0.5) 100%
    );
    border-radius: 2.5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.05);
    z-index: 1;
}

/* 杆端装饰（圆形装饰帽）*/
.projects-timeline-rail-end {
    position: absolute;
    top: 45px;
    left: 16px;
    width: 14px;
    height: 14px;
    background: var(--color-bg-primary);
    border: 3px solid rgba(16, 185, 129, 0.7);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    z-index: 2;
}

.projects-timeline-rail-end-right {
    left: auto;
    right: 18px;
    border-color: rgba(99, 102, 241, 0.6);
}

/* 节点容器（自适应等分横排，2026-10-13 改：去硬 5 等分，配合 is_visible 灵活控制数量）*/
.projects-timeline-nodes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0;
    z-index: 3;
}

/* 单个节点（窗帘环样式）*/
.projects-timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 节点圆点（吊环）*/
.projects-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 4px solid var(--color-bg-primary);
    box-shadow: 0 0 0 2px currentColor;
}

.projects-timeline-node-ongoing {
    color: #10b981;
}

.projects-timeline-node-ongoing .projects-timeline-dot {
    background: #10b981;
    animation: dot-pulse 2s ease-in-out infinite;
}

.projects-timeline-node-upcoming {
    color: var(--color-accent);
}

.projects-timeline-node-upcoming .projects-timeline-dot {
    background: var(--color-accent);
}

/* 节点下文字标签（时间安排）*/
.projects-timeline-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid currentColor;
}

/* === 卡片行（自适应等分，2026-10-13 改：去硬 5 等分） === */
.projects-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 16px;
}

/* 单列容器 */
.projects-card-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 列标题（正在/即将）— V1 Day 16 v6：去掉背景和边框，只保留颜色文字 */
.projects-col-title {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    padding: 0;
    color: var(--color-accent);
    letter-spacing: 0.05em;
}

/* 正在折腾 — 青绿色（与时间轴绿节点对应） */
.projects-col-title-ongoing {
    color: #10b981;
}

/* 竖长卡片（V1 Day 16 v4：加 hover 抬升） */
.upup-card-tall {
    min-height: 280px;
    padding: 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.projects-card-col:hover .upup-card-tall {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* 卡片内分段（难点/痛点/预期）*/
.upup-key-section {
    margin-top: 8px;
}

.upup-key-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    margin-bottom: 6px;
}

.upup-field-text {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   决策 4 v4 · 移动端方案 B 重写：用 flex 替代 grid
   ============================================================ */

/* 平板（≤1024px）：卡片变 2 列，时间轴仍横排 */
@media (max-width: 1024px) {
    .projects-timeline {
        padding: 24px 16px 16px;
    }
    .projects-timeline-rail {
        left: 16px;
        right: 16px;
    }
    .projects-timeline-rail-end {
        left: 10px;
    }
    .projects-timeline-rail-end-right {
        right: 10px;
    }
    .projects-timeline-nodes,
    .projects-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* 手机（≤768px）：方案 B —— 隐藏横排时间轴，左节点 + 右卡片 */
@media (max-width: 768px) {
    /* 隐藏独立的横排 timeline 块 */
    .projects-timeline {
        display: none;
    }

    /* 卡片区竖直堆叠 */
    .projects-cards {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }

    /* 每个 card-col：左侧给节点预留空间 + 卡片占满剩余宽度 */
    .projects-card-col {
        position: relative;
        padding: 0 0 0 36px;       /* 左侧 36px 给节点 */
        margin: 0;
    }

    /* 列标题（在节点位置显示，不在卡片里） */
    .projects-col-title {
        display: block;
        margin: 0 0 8px 0;
        padding: 6px 10px;
        text-align: left;
        font-size: 0.75rem;
    }

    /* 左节点圆点（::before 绝对定位） */
    .projects-card-col::before {
        content: '';
        position: absolute;
        left: 9px;
        top: 12px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 4px solid var(--color-bg-primary);
        background: currentColor;
        box-shadow: 0 0 0 2px currentColor;
        z-index: 2;
    }

    /* ongoing 节点（绿 + 脉冲） */
    .projects-card-col[data-dot="projects-timeline-node-ongoing"] {
        color: #10b981;
    }
    .projects-card-col[data-dot="projects-timeline-node-ongoing"]::before {
        background: #10b981;
        animation: dot-pulse 2s ease-in-out infinite;
    }

    /* upcoming 节点（蓝 + 静态） */
    .projects-card-col[data-dot="projects-timeline-node-upcoming"] {
        color: var(--color-accent);
    }
    .projects-card-col[data-dot="projects-timeline-node-upcoming"]::before {
        background: var(--color-accent);
    }

    /* 连接竖线 */
    .projects-card-col:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 15px;
        top: 28px;
        bottom: -16px;
        width: 2px;
        background: linear-gradient(
            to bottom,
            rgba(16, 185, 129, 0.4),
            rgba(99, 102, 241, 0.4)
        );
        z-index: 1;
    }

    /* 卡片本体填满剩余宽度 */
    .upup-card-tall {
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* 超窄屏（≤480px）：进一步压缩 */
@media (max-width: 480px) {
    .projects-card-col {
        padding-left: 28px;
    }
    .projects-card-col::before {
        left: 5px;
        top: 10px;
        width: 12px;
        height: 12px;
        border-width: 3px;
    }
    .projects-card-col:not(:last-child)::after {
        left: 10px;
        top: 24px;
    }
    .upup-card-tall {
        padding: 14px;
        min-height: 240px;
    }
    /* 标题 header 适配 14px padding */
    .upup-title {
        margin: -14px -14px 12px -14px;
        padding: 12px 14px;
    }
}

/* 行容器：桌面 5 列横排，移动 1 列堆叠 */
.upup-rows {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* 单个 row：节点 + 卡片（桌面竖排，移动横排）*/
.upup-row {
    display: flex;
    flex-direction: column;                  /* 桌面：节点在上，卡片在下 */
    gap: 16px;
}

/* 桌面端：节点容器（顶部圆点 + 下方连接线）*/
.upup-row-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    position: relative;
    margin-bottom: 8px;
}

/* 圆点节点（顶部）*/
.upup-timeline-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background: var(--color-accent);
    color: white;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
    position: relative;
    z-index: 2;
}

/* 圆点下方连接线（节点-卡片之间）*/
.upup-row-timeline::after {
    content: "";
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 16px;
    background: linear-gradient(
        to bottom,
        var(--color-accent) 0%,
        var(--color-border) 100%
    );
}

/* 卡片样式 */
.upup-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 24px;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.25s ease;
}

/* V1 Day 15 决策 4：关键节点列表 */
.upup-key-points {
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.upup-key-point {
    position: relative;
    padding-left: 14px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.upup-key-point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 1.5px;
    background: var(--color-accent);
    border-radius: 1px;
}



/* hover：抬升+边框变蓝+浅蓝渐变（参考6分类）*/
.upup-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 102, 204, 0.15);
    border-color: var(--color-accent);
    background: linear-gradient(
        135deg,
        rgba(0, 102, 204, 0.02) 0%,
        var(--color-accent-bg) 100%
    );
}

/* 月份标签 */
.upup-month {
    display: inline-block;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    align-self: flex-start;                  /* 防止被拉伸 */
}

/* 卡片内项目标题 — V1 Day 16 v6：header 风格（参照 stage-card-header）*/
.upup-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    /* 负 margin 贴卡片顶部 */
    margin: -18px -18px 14px -18px;
    padding: 14px 18px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--color-border);
    /* 默认蓝紫渐变（即将折腾） */
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(99, 102, 241, 0.08) 100%
    );
    transition: background 0.3s ease;
}

/* 正在折腾 — 青绿色调（低调） */
.projects-card-col[data-dot="projects-timeline-node-ongoing"] .upup-title {
    background: linear-gradient(
        90deg,
        rgba(16, 185, 129, 0.10) 0%,
        rgba(132, 204, 22, 0.08) 100%
    );
}

/* hover 时加深（可选，让卡片 hover 时 header 更明显）*/
.projects-card-col:hover .upup-title {
    filter: brightness(0.97);
}

/* 完整字段（默认显示）*/
.upup-field {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.upup-field:last-child {
    margin-bottom: 0;
}

.upup-field-label {
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-right: 4px;
}

/* 底部说明条 */
.upup-note {
    margin-top: 40px;
    padding: 16px 20px;
    background: var(--color-bg-secondary);
    border-radius: var(--card-radius);
    border-left: 3px solid var(--color-accent);
}

.upup-note p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* === 响应式 === */

/* 中等屏幕（< 1200px）：3列 */
@media (max-width: 1199px) and (min-width: 769px) {
    .upup-rows {
        grid-template-columns: repeat(3, 1fr);
    }
    .upup-timeline-node {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* 移动端（< 768px）：节点左 + 卡片右，一一对应 */
@media (max-width: 768px) {
    /* 隐藏桌面横排时间轴 */
    .upup-timeline {
        display: none;                         /* 桌面那条横线不显示 */
    }

    /* 行：横向（节点左 + 卡片右）*/
    .upup-rows {
        grid-template-columns: 1fr;            /* 移动：单列堆叠 */
        gap: 24px;
        position: relative;
    }

    /* 单个 row：横排（节点 + 卡片）*/
    .upup-row {
        flex-direction: row;                   /* 移动：横向布局 */
        gap: 16px;
        align-items: stretch;
    }

    /* 节点容器：左侧固定宽度 */
    .upup-row-timeline {
        flex: 0 0 70px;                        /* 固定 70px 宽 */
        padding: 0;
        align-items: center;
        justify-content: flex-start;
        display: flex;
        position: relative;                    /* 为节点圆点定位 */
    }

    /* 节点：左对齐 */
    .upup-timeline-node {
        font-size: 12px;
        padding: 3px 10px;
    }

    /* 节点容器前画圆点（左侧纵向连接线）*/
    .upup-row-timeline::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 12px;
        bottom: -24px;                         /* 跨到下一个 row */
        width: 2px;
        background: var(--color-border);
    }

    /* 最后一个 row 的连线不画到底 */
    .upup-row:last-child .upup-row-timeline::before {
        bottom: 50%;
    }

    /* 节点圆点（在连接线左侧）*/
    .upup-row-timeline::after {
        content: "";
        position: absolute;
        left: 2px;
        top: 12px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--color-accent);
        border: 2px solid var(--color-bg-secondary);
        box-shadow: 0 0 0 3px var(--color-bg-secondary);
    }

    /* 卡片：右自适应 */
    .upup-card {
        flex: 1;                               /* 占据剩余空间 */
    }
}

/* 尊重"减少动画" */
@media (prefers-reduced-motion: reduce) {
    .upup-card,
    .upup-card:hover {
        transition: none !important;
    }
    .upup-card:hover {
        transform: translateY(-2px);
    }
}
    .upup-card:hover {
        transform: translateY(-4px);          /* 仅保留轻微抬升 */
    }
}
    .upup-title {
        font-size: 18px;
    }
}


/* =============================================================================
   Part 10: CTA 区 + 页脚（设计文档 §5.5 + §8.2）
   ============================================================================= */

.cta-section {
    text-align: center;
    padding: var(--section-spacing) 0;
    background: #ebeef3;
}

.cta-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 auto 32px;            /* 强制居中 */
    text-align: center;             /* 强制居中 */
    display: block;
    width: 100%;
}

.cta-button {
    display: inline-block;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 48px;
    border-radius: var(--card-radius);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.cta-button:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}

/* CTA 副标题：居中，标题与按钮之间 */
.cta-subtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
}

/* CTA 主操作行：按钮 + 邮箱 横排居中 */
.cta-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.cta-email-inline {
    font-size: 14px;
    color: var(--color-text-primary);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    padding: 6px 12px;
    background: var(--color-bg-primary);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

/* CTA 适合/不适合双卡片：横排两端对齐（左下、右下）*/
.cta-fit-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    max-width: 540px;
    margin: 0 auto;
}

.cta-fit-card {
    flex: 1;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 14px 16px;
    text-align: left;
}

.cta-fit-yes { border-left: 3px solid #34C759; }
.cta-fit-no { border-left: 3px solid #FF9500; }

.cta-fit-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cta-fit-tags {
    display: flex;
    flex-wrap: nowrap;   /* V1 Day 15 决策 5：不换行，4 chip 一行 */
    gap: 4px;
}

.cta-fit-tag {
    flex: 1;             /* 等宽：4 chip 平均占满 */
    min-width: 0;
    text-align: center;
    font-size: 11px;
    padding: 4px 6px;
    background: var(--color-bg-secondary);
    border-radius: 6px;  /* 改：100px → 6px · 略偏长条（不是 pill） */
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cta-fit-card:hover .cta-fit-tag {
    color: var(--color-text-primary);
}

/* CTA 移动端：卡片竖向堆叠 */
@media (max-width: 768px) {
    .cta-fit-row {
        flex-direction: column;
        max-width: 280px;
        gap: 12px;
    }
    .cta-action-row {
        flex-direction: column;
        gap: 12px;
    }
    .cta-subtitle { font-size: 14px; }
    .cta-title { font-size: 26px; }
}

/* =============================================================================
   Part 10.5: 页脚三栏布局（设计文档 §8 · V1 Day 9 B1）
   桌面端：Grid 三栏（1.2fr + 1fr + 1fr）| 移动端（<768px）：单栏堆叠
   设计动机：访客滚到底部 = 决策时刻，需要品牌强化 + 便捷导航 + 联系通道
   ============================================================================= */

.site-footer {
    padding: 48px 0 32px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);  /* 轻微底色区分，与主区域分层 */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;  /* 品牌栏稍宽 */
    gap: 48px;
    align-items: start;
}

/* 左：品牌区 - Flex 纵向排列 logo + slogan */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-logo {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-logo:hover {
    color: var(--color-accent);
}

.footer-slogan {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* 中栏（导航）/ 右栏（联系）共用标题样式 */
.footer-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

.footer-nav,
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.footer-nav a,
.footer-contact a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.footer-nav a:hover,
.footer-contact a:hover {
    color: var(--color-accent);
}

.footer-copyright {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin: 8px 0 0;
}

/* V1 Day 15 决策 3 优化：footer 内嵌标签（融入 footer · 只红绿点呼吸）*/

.footer-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0;                          /* V1 Day 15 优化：去外框（无 padding）*/
    background: transparent;             /* V1 Day 15 优化：透明背景 */
    border: none;                        /* V1 Day 15 优化：无边框 */
    border-radius: 0;                    /* V1 Day 15 优化：无圆角 */
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    align-self: flex-start;
}

/* V1 Day 15 优化：移动端 footer-pulse 居中 */
@media (max-width: 768px) {
    .footer-pulse {
        align-self: center;
        width: 100%;
        justify-content: center;
    }
}

.footer-pulse-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
}

.footer-pulse-divider {
    width: 1px;
    height: 10px;
    background: var(--color-border);
}

.footer-pulse-icon {
    font-size: 0.875rem;
    line-height: 1;
}

.footer-pulse-number {
    font-weight: 600;
    color: var(--color-text-primary);
}

.footer-pulse-label {
    font-weight: 400;
}

.footer-pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.footer-pulse-dot-heartbeat {
    background: #ef4444;
    animation: heartbeat 1.4s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
}

.footer-pulse-dot-breathing {
    background: #10b981;
    animation: breathing 2.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

@keyframes breathing {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.85);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.footer-legal a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.15s ease;
}

.footer-legal a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* 响应式：md 以下（<768px）单栏堆叠 + 居中 */
@media (max-width: 767.98px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .footer-brand,
    .footer-nav,
    .footer-contact {
        align-items: center;
    }
}

/* =============================================================================
   Part 11: 响应式（设计文档 §7）—— Bootstrap 5 默认断点
   断点：sm 576 / md 768 / lg 992 / xl 1200
   ============================================================================= */

/* sm 以下 (<576px)：小屏手机 */
@media (max-width: 575.98px) {
    /* V1 Day 16 v28：手机端 hero-card 整体放大 1.6 倍（20px → 32px，13px → 21px） */
    .hero-card {
        padding: 6px 0 6px 22px;
        gap: 6px;
        border-left: 6px solid;
    }
    .hero-card-line1 {
        font-size: 32px;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }
    .hero-card-line2 {
        font-size: 21px;
        line-height: 1.5;
    }
    /* V1 Day 16 v28：手机端 spacer 6 → 3（再减半） */
    .hero-spacer {
        min-height: 0px;          /* V1 Day 16 v28：6 → 3 再减半 */
    }

    /* 2026-10-14 v31:mobile CTA 不再贴底（解放 margin-top: auto，让 CTA 跟在 tagline 下面） */
    .hero-cta-row {
        margin-top: 0;          /* 覆盖 desktop 的 margin-top: auto */
    }

    /* V1 Day 16 v20：移动端 hero-left 整体右移 + 宽度约束 */
    .hero-left {
        max-width: 92%;
        margin-left: auto;
        margin-right: 0;
    }

    /* V1 Day 16 v28：移动端头像+标题水平排 + 底边对齐 */
    .hero-identity {
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
    }

    /* V1 Day 16 v20：移动端 hero padding 缩小 */
    .hero {
        padding-top: 32px;
        padding-bottom: 24px;
    }

    :root {
        --container-padding: 16px;
        --section-spacing: 48px;
    }

    /* V1 Day 16 v20：移动端 hero-grid 单列 + 6 分类宽度约束 */
    .hero-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 20px;
        min-height: auto;            /* 移动端不需要固定高度 */
    }

    /* 移动端 hero-right 改成单列 + 宽度约束（防止超出右边界） */
    .hero-right {
        grid-template-columns: 1fr;
        grid-template-rows: auto;     /* 移动端用内容高度 */
        gap: 10px;
        width: 100%;                  /* V1 Day 16 v20：100%（不要固定 580px） */
        max-width: 100%;              /* 不超出 hero-grid */
        justify-self: stretch;        /* 移动端拉满 */
    }

    /* 移动端 category-strip 高度恢复 min-height: 64px */
    .category-strip {
        min-height: 64px;
    }

    /* 移动端 hero-right 改成单列 */
    .hero-right {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-tagline-band {
        padding: 24px 24px 72px 24px;  /* V1 Day 16 v28：手机端下边缘再加 24（48→72 = 再加一倍） */
        margin-top: 32px;
    }

    .hero-tagline-band-placeholder {
        font-size: 14px;
        padding: 18px 12px;
    }

    /* V1 Day 16 v16：移动端标题 36 → 32px */
    .hero-title {
        font-size: 32px;
    }
    /* V1 Day 16 v20：移动端 tagline 单独一行 + 间距和谐 */
    .hero-title .hero-tagline {
        font-size: 18px;
        margin-left: 0;
        margin-top: 6px;            /* 不挤不离 */
        display: block;
        line-height: 1.4;
    }
    .hero-subtitle-lead {
        font-size: 16px;
    }
    .hero-subtitle-vision {
        font-size: 14px;
    }
    .hero-subtitle-cta {
        font-size: 15px;
    }
    .cta-row-item {
        font-size: 14px;
    }
    .hero-cta-arrow-inline {
        width: 16px;
        height: 16px;
    }
    .hero-subtitle {
        font-size: 16px;
    }
    .hero-persona {
        margin-bottom: 40px;
        font-size: 14px;
        padding: 12px 14px;
    }
    .persona-label {
        font-size: 11px;
    }
    /* V1 Day 16 v20：移动端头像 64 → 88px（让头像 ≥ "大军 + tagline" 两行高度） */
    .hero-avatar {
        width: 88px;
        height: 88px;
    }
    .hero-title {
        font-size: 40px;
    }
    .hero-identity {
        gap: 12px;             /* 移动端更紧凑 */
    }

    .section-title {
        font-size: 28px;
    }

    .section-header {
        flex-direction: column;
        gap: 16px;
    }

    .card-grid {
        grid-template-columns: 1fr;  /* 1 列 */
    }

    .feature-card {
        padding: 24px;
    }

    .feature-title {
        font-size: 18px;       /* V1 Day 16 v16：移动端 tagline 缩小 24 → 18 */
    }

    .cta-button {
        display: block;  /* 移动端占满宽度 */
        padding: 16px 24px;
    }

    /* 时间轴移动端：纵向 */
    .timeline {
        padding: 16px 0;
    }

    .timeline-line {
        top: 0;
        bottom: 0;
        left: 8px;
        right: auto;
        width: 2px;
        height: auto;
        transform: none;
    }

    .timeline-nodes {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .timeline-node {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        text-align: left;
    }

    .timeline-dot {
        margin-left: 0;
    }

    .timeline-content {
        margin-top: 0;
    }
}

/* md (≥768px) */
/* === iPad 竖屏（576px - 1023.98px）：项目时间轴改成纵向，避免横排挤在一起 === */
@media (min-width: 576px) and (max-width: 1023.98px) {
    /* 项目时间轴：横排变纵向（避免 iPad 竖屏挤在卡片上方） */
    .projects-timeline {
        display: none;             /* 隐藏桌面横排时间轴 */
    }
    .projects-cards {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }
    .projects-card-col {
        position: relative;
        padding: 0 0 0 36px;
        margin: 0;
    }
    .projects-card-col::before {
        content: '';
        position: absolute;
        left: 9px;
        top: 12px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 4px solid var(--color-bg-primary);
        background: currentColor;
        box-shadow: 0 0 0 2px currentColor;
        z-index: 2;
    }
    .projects-card-col[data-dot="projects-timeline-node-ongoing"] {
        color: #10b981;
    }
    .projects-card-col[data-dot="projects-timeline-node-ongoing"]::before {
        background: #10b981;
        animation: dot-pulse 2s ease-in-out infinite;
    }
    .projects-card-col[data-dot="projects-timeline-node-upcoming"] {
        color: var(--color-accent);
    }
    .projects-card-col[data-dot="projects-timeline-node-upcoming"]::before {
        background: var(--color-accent);
    }
    .projects-card-col:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 15px;
        top: 28px;
        bottom: -16px;
        width: 2px;
        background: linear-gradient(
            to bottom,
            rgba(16, 185, 129, 0.4),
            rgba(99, 102, 241, 0.4)
        );
        z-index: 1;
    }

    /* Hero 在 iPad 竖屏也用单列布局（避免横向挤） */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .hero-right {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
        justify-self: stretch;
    }
}

@media (min-width: 768px) {
    :root {
        --section-spacing: 72px;
    }
}

/* lg (≥992px) */
@media (min-width: 992px) {
    :root {
        --section-spacing: 96px;
    }
}


/* =============================================================================
   Part 12: 法律页面样式（privacy.html / V1.5 terms.html 共用）
   设计原则：阅读体验优先（窄栏 + 大字号 + 充足留白）
   ============================================================================= */

.legal-page {
    padding: 48px 0 96px;
}

.container-narrow {
    max-width: 760px;  /* 阅读最佳宽度（中文约 30-40 字/行）*/
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.legal-page h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.legal-updated {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin: 0 0 32px;
}

.legal-page h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.legal-page p,
.legal-page li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0 0 12px;
}

.legal-page ul,
.legal-page ol {
    padding-left: 24px;
    margin: 0 0 16px;
}

.legal-page a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.legal-page a:hover {
    text-decoration: underline;
}

.legal-page strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 16px;
    font-size: 14px;
}

.legal-table th,
.legal-table td {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.legal-table th {
    background: var(--color-bg-secondary);
    font-weight: 600;
    color: var(--color-text-primary);
}

.legal-table td {
    color: var(--color-text-secondary);
}

.legal-back {
    margin-top: 48px;
    font-size: 14px;
}

/* 移动端法律页微调 */
@media (max-width: 575.98px) {
    .legal-page h1 { font-size: 26px; }
    .legal-page h2 { font-size: 18px; }
    .legal-page p,
    .legal-page li { font-size: 14px; }
}

/* =============================================================================
   Part 99: DEMO 样式（仅 ?demo=1 时生效 · V1 上线前删除）
   5 套 6 分类卡片样式对照，通过 body[data-style="A|B|C|D|E"] 切换
   默认方案 A = 白底 + 彩色 icon（与生产环境一致）
   ============================================================================= */

/* === 方案 A：白底（默认） ============================
   已在 Part 6 定义，无需重复
   仅说明：默认就是当前方案 */

/* === 方案 B：淡渐变背景 ============================
   整条背景换成对应颜色的极淡渐变
   渐变方向：135deg（左上→右下）
   透明度：8% → 2%（最深处也几乎看不出来）
*/
body[data-style="B"] .category-strip {
    background: linear-gradient(
        135deg,
        rgba(0, 102, 204, 0.08) 0%,
        rgba(0, 102, 204, 0.02) 100%
    );
}
body[data-style="B"] .category-strip[data-color="blue"] {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(0, 102, 204, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="green"] {
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.08) 0%, rgba(34, 139, 34, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="orange"] {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08) 0%, rgba(255, 140, 0, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="red"] {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.08) 0%, rgba(220, 20, 60, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="purple"] {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.08) 0%, rgba(138, 43, 226, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="pink"] {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.08) 0%, rgba(255, 105, 180, 0.02) 100%);
}

/* === 方案 C：Hover 时渐变 ============================
   平时白底，悬停时背景淡入对应颜色
   默认仍是克制方案，互动时才有彩色反馈
*/
body[data-style="C"] .category-strip {
    transition: background 0.3s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
body[data-style="C"] .category-strip[data-color="blue"]:hover {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(0, 102, 204, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="green"]:hover {
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.12) 0%, rgba(34, 139, 34, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="orange"]:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.12) 0%, rgba(255, 140, 0, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="red"]:hover {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.12) 0%, rgba(220, 20, 60, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="purple"]:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.12) 0%, rgba(138, 43, 226, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="pink"]:hover {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.12) 0%, rgba(255, 105, 180, 0.04) 100%);
}

/* === 方案 D：左侧色条 ============================
   左边 4px 竖向色条 = 双重分类信号
   不抢眼色，但一眼区分
*/
body[data-style="D"] .category-strip {
    border-left: 4px solid var(--cat-bar, var(--color-border));
    padding-left: 20px;  /* 补偿色条占用的空间 */
}
body[data-style="D"] .category-strip[data-color="blue"]   { --cat-bar: #0066cc; }
body[data-style="D"] .category-strip[data-color="green"]  { --cat-bar: #228b22; }
body[data-style="D"] .category-strip[data-color="orange"] { --cat-bar: #d97a00; }
body[data-style="D"] .category-strip[data-color="red"]    { --cat-bar: #c91842; }
body[data-style="D"] .category-strip[data-color="purple"] { --cat-bar: #7d22ce; }
body[data-style="D"] .category-strip[data-color="pink"]   { --cat-bar: #e754a8; }

/* === 方案 E：选中态渐变 ============================
   仅第 1 个分类显示选中态（模拟"当前正在浏览"）
   其余仍是白底
*/
body[data-style="E"] .category-strip:first-of-type {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.10) 0%, rgba(0, 102, 204, 0.03) 100%);
    border-left: 4px solid #0066cc;
    padding-left: 20px;
}

/* === Demo 切换器工具条样式 ============================ */
.demo-toolbar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    display: flex;
    gap: 6px;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    max-width: calc(100vw - 40px);
    flex-wrap: wrap;
}

.demo-toolbar strong {
    color: #24292f;
    margin-right: 4px;
    font-weight: 600;
}

.demo-toolbar button {
    border: 1px solid #d0d7de;
    background: #f6f8fa;
    color: #24292f;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
    font-family: inherit;
}

.demo-toolbar button:hover {
    background: #eaeef2;
    border-color: #afb8c1;
}

.demo-toolbar button.is-active {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
    font-weight: 500;
}

.demo-toolbar button.is-active:hover {
    background: #0052a3;
    border-color: #0052a3;
}

/* 暗色模式适配 */
[data-theme="dark"] .demo-toolbar {
    background: #1c2128;
    border-color: #444c56;
}

[data-theme="dark"] .demo-toolbar strong {
    color: #e6edf3;
}

[data-theme="dark"] .demo-toolbar button {
    background: #2d333b;
    color: #adbac7;
    border-color: #444c56;
}

[data-theme="dark"] .demo-toolbar button:hover {
    background: #373e47;
}

[data-theme="dark"] .demo-toolbar button.is-active {
    background: #2188ff;
    border-color: #2188ff;
}

/* 移动端：工具条自适应 */
@media (max-width: 575.98px) {
    .demo-toolbar {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: calc(100vw - 20px);
        justify-content: center;
    }
}


/* =============================================================================
   推荐板块 C 方案（PRD v1.1 决策 2 · 2026-09-15）
   Section 2.1: 3 大卡（stage-cards）
   Section 2.2: 5 小卡（milestone-cards）
   ============================================================================= */

/* V1 Day 16 v16：推荐阅读（块 2）· 极浅灰 */
.recommend-section {
    padding: 3.4rem 0 3rem;          /* V1 Day 16 v28：上 padding 2rem→3.4rem（+22px ≈ 标题高度一半） */
    background: var(--color-bg-tertiary);
}

/* V1 Day 15 优化：recommend-section 的 container 需要 relative（让书签绝对定位）*/
.recommend-container {
    position: relative;
}

/* ========== Section 2.1: 3 大卡 ========== */

.stage-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;           /* V1 Day 15 决策 2：紧凑 24→16 */
    margin-top: 24px;    /* V1 Day 15 决策 2：紧凑 40→24 */
}

.stage-card {
    background: var(--color-bg-card);
    border-radius: 16px;
    padding: 20px;       /* V1 Day 15 决策 2：紧凑 28→20 */
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.stage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stage-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px 18px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(  /* 默认蓝紫（agent 阶段）*/
        90deg,
        rgba(99, 102, 241, 0.05) 0%,
        rgba(168, 85, 247, 0.05) 100%
    );
    transition: background 0.3s ease;
}

/* 入门玩家：绿色渐变（对应 🌱 豆苗）*/
.stage-beginner .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(34, 197, 94, 0.07) 0%,
        rgba(132, 204, 22, 0.07) 100%
    );
}
.stage-beginner:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(34, 197, 94, 0.14) 0%,
        rgba(132, 204, 22, 0.12) 100%
    );
}

/* 折腾一派：蓝紫渐变（对应 🤖 agent）*/
.stage-agent .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.07) 0%,
        rgba(99, 102, 241, 0.07) 100%
    );
}
.stage-agent:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.14) 0%,
        rgba(99, 102, 241, 0.12) 100%
    );
}

/* 建设高手：紫色渐变（对应 🧠 知识库）*/
.stage-knowledge .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(168, 85, 247, 0.07) 0%,
        rgba(236, 72, 153, 0.07) 100%
    );
}
.stage-knowledge:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(168, 85, 247, 0.14) 0%,
        rgba(236, 72, 153, 0.12) 100%
    );
}

.stage-card:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(0, 102, 204, 0.08) 0%,
        var(--color-accent-bg) 100%
    );
}

.stage-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.stage-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
}

.stage-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

.stage-posts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.stage-post-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s;
}

.stage-post-link:hover {
    background: var(--color-accent);
    color: white;
}

.stage-post-title {
    flex: 1;
    margin-right: 8px;
}

.stage-post-arrow {
    font-weight: 600;
    opacity: 0.6;
}

.stage-empty-note {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

.stage-more {
    font-size: 13px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

.stage-more:hover {
    text-decoration: underline;
}

/* ========== Section 2.2: 5 小卡 ========== */

.milestone-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;            /* V1 Day 15 决策 2：紧凑 16→12 */
    margin-top: 20px;     /* V1 Day 15 决策 2：紧凑 32→20 */
}

.milestone-card {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 12px;          /* V1 Day 15 决策 2：紧凑 18→12 */
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 90px;       /* V1 Day 15 决策 2：紧凑 120→90 */
    display: flex;
    flex-direction: column;
}

.milestone-card:hover:not(.milestone-card-empty) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.milestone-card-empty {
    opacity: 0.5;
    border-style: dashed;
}

.milestone-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-accent);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 12px;
    align-self: flex-start;
}

.milestone-card-empty .milestone-type-badge {
    background: var(--color-text-secondary);
}

.milestone-post-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.milestone-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.milestone-read {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 500;
    margin-top: auto;
}

.milestone-empty-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: auto 0;
    text-align: center;
}

/* ========== 响应式 ========== */

@media (max-width: 1024px) {
    .stage-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .milestone-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .stage-cards {
        grid-template-columns: 1fr;
    }
    .milestone-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .milestone-cards .milestone-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    .stage-card,
    .milestone-card {
        transition: none;
    }
    .stage-card:hover,
    .milestone-card:hover:not(.milestone-card-empty) {
        transform: none;
    }
}


/* =============================================================================
   数字面板（PRD v1.1 决策 4 · 2026-09-15）
   4 个数字：持续天数 / 文章数 / 类别数 / 版本号
   ============================================================================= */

/* V1 Day 15 决策 3：数字面板改为方案 C（sidebar 小标签）
   风格：横向小标签条，替代大数字面板
   配色：浅色背景 + 蓝色边线 + 小图标 + 紧凑字号
*/
.stats-panel {
    padding: 2.5rem 0;            /* 紧凑（之前是 section-spacing 96px）*/
    background: var(--color-bg-secondary);  /* 浅灰背景，融入页面节奏 */
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;     /* 居中 */
    gap: 12px;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 100px;         /* pill 标签样式 */
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.stat-item:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.stat-icon {
    font-size: 1rem;
    line-height: 1;
}

.stat-number {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* 移动端：保持横排但更紧凑 */
@media (max-width: 768px) {
    .stats-panel {
        padding: 1.5rem 0;
    }
    .stats-grid {
        gap: 8px;
    }
    .stat-item {
        padding: 6px 12px;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        justify-content: flex-start;
    }
    .stat-item {
        padding: 5px 10px;
    }
}


/* =============================================================================
   我读到的外部文章（PRD v1.1 决策 6 · 2026-09-15）
   ============================================================================= */

.reading-section {
    padding: 2rem 0 2.5rem;
    position: relative;
}

/* V1 Day 15 优化：reading 卡片样式（不再单调）*/
.reading-section .section-header-right {
    position: relative;
    padding-left: 16px;
    border-left: 3px solid linear-gradient;  /* 视觉上靠左 */
}

.reading-section .section-header-right::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: linear-gradient(180deg, var(--color-accent), rgba(99, 102, 241, 0.3));
    border-radius: 2px;
}

/* reading section 的容器：浅色卡片样式 */
.reading-section .container {
    position: relative;
}

/* V1 Day 16 v20：reading section · 5 大块方案 A · 与 recommend-section 同色 */
.reading-section {
    background: var(--color-bg-tertiary);
    border-top: none;
    border-bottom: none;
}

/* 给 reading-mini-link 加卡片感 */
.reading-section .reading-mini-link {
    background: linear-gradient(90deg, var(--color-bg-card) 0%, rgba(99, 102, 241, 0.02) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.reading-section .reading-mini-link:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    border-color: var(--color-accent);
    transform: translateX(4px);
}

.reading-section .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.external-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-warning, #f59e0b);
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.reading-list {
    display: grid;
    gap: 16px;
    margin-top: 32px;
}

/* V1 Day 15 决策 1：主页 reading 区域精简成 3 个小链接 */
.reading-mini-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

/* V1 Day 15 优化：reading 区域右对齐 + 左边距 1/4 行宽（与 .section-header-right 一致）*/
.reading-mini-list-right {
    margin-left: 28%;
    max-width: 72%;
    margin-top: 8px;
}

/* V1 Day 15 优化：移动端取消左端留白（占满屏宽）*/
@media (max-width: 768px) {
    .reading-mini-list-right {
        margin-left: 0;
        max-width: 100%;
    }
}

/* V1 Day 16 v31：reading-mini-link 改 column 布局（让 header + reason 上下排）*/
.reading-mini-link {
    display: flex;
    flex-direction: column;        /* header + reason 上下排 */
    align-items: stretch;          /* 子元素占满宽度 */
    padding: 10px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    gap: 6px;                      /* header 和 reason 之间间距 */
}

.reading-mini-link:hover {
    border-color: var(--color-accent);
    transform: translateX(2px);
}

/* V1 Day 16 v31：reading-mini-header 让 title + source 同行(横向)*/
.reading-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

/* V1 Day 16 v31：reading-mini-reason 我为什么推荐 - 比 title 小,次要色,最多 2 行截断*/
.reading-mini-reason {
    font-size: 0.6875rem;          /* 11px,比 title 0.9375rem 小 2 号(15→11,差 4px)*/
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
    width: 100%;
    text-indent: 2em;              /* 首行缩进 2 个字(空两格)*/
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* 最多 2 行,避免长评撑爆卡片 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reading-mini-reason-label {
    /* 不加粗,色跟 reason 一致 - 避免视觉压过 title(0.6875rem + secondary)*/
    color: var(--color-text-secondary);
}

.reading-mini-title {
    font-size: 0.9375rem;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* V1 Day 16 v31：reading-mini-source 加 B 方案 - 左侧蓝线 + 灰色文字(像引文标注)*/
.reading-mini-source {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    border-left: 2px solid var(--color-accent);
    padding-left: 6px;
    line-height: 1.4;
}

.reading-more-wrap {
    margin-top: 12px;
    text-align: right;
}

.reading-more-link {
    font-size: 0.875rem;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.reading-more-link:hover {
    opacity: 0.7;
}

/* V1 Day 16 v32：readings 详情页(我读到的外部文章)—— hero / 列表 / 间距优化 */
.readings-hero {
    padding: 48px 0 24px 0;        /* 上 48(跟导航拉开),下 24(给列表留过渡) */
}

.readings-hero-title {
    font-size: 1.875rem;            /* 30px,跟主标题协调 */
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.readings-hero-subtitle {
    font-size: 1rem;                /* 16px,跟副标题一致 */
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
    text-indent: 2em;                /* 前面空两字(跟理由块一致) */
}

.readings-list-section {
    padding: 0 0 48px 0;            /* 底部 48 给"回到首页"留呼吸 */
}

.readings-list {
    display: flex;
    flex-direction: column;
    gap: 20px;                       /* 列表项之间 20px,告别挤一起 */
    margin-top: 16px;                /* 跟 hero subtitle 再留 16px */
}

.reading-card {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.reading-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.reading-card-header {
    margin-bottom: 12px;
}

.reading-title-link {
    text-decoration: none;
    color: inherit;
}

.reading-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.reading-title-link:hover .reading-title {
    color: var(--color-accent);
}

.reading-source {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.reading-reason {
    font-size: 14px;
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.reading-reason-label {
    font-weight: 600;
    color: var(--color-accent);
    margin-right: 4px;
}

.reading-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reading-tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: 4px;
    font-size: 12px;
}

.reading-empty {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 32px;
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .reading-card,
    .reading-card:hover {
        transition: none;
        transform: none;
    }
}


.section-subtitle-line {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

.section-title-with-line:hover .section-subtitle-line {
    color: var(--color-text-primary);
}

.section-subtitle-line {
    padding-left: 0;
    border-left: none;
    position: relative;
    transition: all 0.3s ease;
}

.section-subtitle-line::before {
    content: "—————";
    margin-right: 0.5em;       /* V1 Day 15 优化：破折号后 2 个汉字距（em 相对字体） */
    margin-left: 1em;          /* V1 Day 15 优化：破折号前 3 个汉字距（标题字号下） */
    opacity: 0.4;
    font-weight: 300;
    transition: all 0.3s ease;
    display: inline-block;
}

.section-title-with-line:hover .section-subtitle-line {
    color: var(--color-text-primary);
}

.section-title-with-line:hover .section-subtitle-line::before {
    opacity: 0.7;
}

@keyframes bookmark-slide-in {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .section-title-with-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .section-subtitle-line::before {
        content: "";
        margin-right: 0;
    }
}

.section-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.section-link:hover {
    color: var(--color-accent-hover);
}

/* =============================================================================
   Part 8: 主推卡 + 普通卡（设计文档 §6.2）
   ============================================================================= */

.feature-card {
    display: block;
    background: var(--gradient-beta);
    border-radius: var(--card-radius);
    padding: 40px;
    margin-bottom: 32px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--color-border);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.15);
}

.feature-tag {
    display: inline-block;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.feature-date {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: 12px;
}

.feature-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.feature-excerpt {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.feature-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-accent);
}

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

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-tag {
    display: inline-block;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.card-excerpt {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1;
}

.card-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent);
}

/* =============================================================================
   Part 9: 折腾预告时间轴（设计文档 §6.3）
   ============================================================================= */

.timeline {
    position: relative;
    padding: 32px 0;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
    transform: translateY(-50%);
}

.timeline-nodes {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;                 /* 新：节点间距 */
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1 1 180px;           /* 改：1 → 1 1 180px（最小 180px，平分剩余）*/
    min-width: 0;              /* 允许内容压缩 */
    text-align: center;
    position: relative;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1 1 180px;       /* 改：1 → 1 1 180px（最小 180px，平分剩余）*/
    min-width: 0;          /* 允许内容压缩 */
    text-align: center;
    position: relative;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid var(--color-bg-primary);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;            /* 勾的颜色 */
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* planned：空心圆（只有边框）*/
.timeline-node[data-status="planned"] .timeline-dot {
    background: transparent;
    border: 3px solid var(--color-text-secondary);
    width: 20px;
    height: 20px;
}

.timeline-node[data-status="planned"] .timeline-dot::after {
    content: none;             /* 不显示勾 */
}

/* in-progress：蓝色脉动 */
.timeline-node[data-status="in-progress"] .timeline-dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
    animation: dot-pulse 2s ease-in-out infinite;
}

.timeline-node[data-status="in-progress"] .timeline-dot::after {
    content: none;
}

/* done：绿色 + 勾 */
.timeline-node[data-status="done"] .timeline-dot {
    background: #34C759;
    border-color: #34C759;
}

.timeline-node[data-status="done"] .timeline-dot::after {
    content: "✓";
}

/* 脉动动画 */
@keyframes dot-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.6);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px rgba(0, 102, 204, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-node[data-status="in-progress"] .timeline-dot {
        animation: none;
    }
}

.timeline-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

.timeline-content {
    margin-top: 8px;
    max-width: 160px;
}

.timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.timeline-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
/* =============================================================================
   "即将要折腾" 时间轴 + 横排卡片（设计文档 §6.3 终版）
   - 时间轴：顶部横排5节点 + 横线
   - 卡片：横排5列，默认显示完整3字段（事项名 + 痛点 + 预期）
   - hover：抬升+边框变蓝+浅蓝渐变（参考6分类风格，保持一致）
   - 移动端：1列堆叠+左侧纵向时间轴+卡片在右
   ============================================================================= */

/* 时间轴容器 */
.upup-timeline {
    position: relative;
    margin-bottom: 48px;
}

/* 时间轴节点容器：横排5个 */
.upup-timeline-nodes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* 时间轴横线（连接线）*/
.upup-timeline::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
    transform: translateY(-50%);
    z-index: 0;
}

/* 时间轴节点（药丸）*/
.upup-timeline-node {
    position: relative;
    z-index: 1;
    background: var(--color-bg-secondary);
    padding: 6px 16px;
    border-radius: 100px;
    border: 2px solid var(--color-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: all 0.25s ease;
}

/* 行容器：桌面 5 列横排，移动 1 列堆叠 */
.upup-rows {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* 单个 row：节点 + 卡片（桌面竖排，移动横排）*/
.upup-row {
    display: flex;
    flex-direction: column;                  /* 桌面：节点在上，卡片在下 */
    gap: 16px;
}

/* 桌面端：节点容器（顶部小药丸）*/
.upup-row-timeline {
    display: flex;
    justify-content: center;                 /* 居中对齐 */
    padding: 8px 0;
}

/* 卡片样式 */
.upup-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 24px;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.25s ease;
}

/* hover：抬升+边框变蓝+浅蓝渐变（参考6分类）*/
.upup-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 102, 204, 0.15);
    border-color: var(--color-accent);
    background: linear-gradient(
        135deg,
        rgba(0, 102, 204, 0.02) 0%,
        var(--color-accent-bg) 100%
    );
}

/* 月份标签 */
.upup-month {
    display: inline-block;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    align-self: flex-start;                  /* 防止被拉伸 */
}

/* 卡片内项目标题 — V1 Day 16 v6：header 风格（参照 stage-card-header）*/
.upup-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    /* 负 margin 贴卡片顶部 */
    margin: -18px -18px 14px -18px;
    padding: 14px 18px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--color-border);
    /* 默认蓝紫渐变（即将折腾） */
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(99, 102, 241, 0.08) 100%
    );
    transition: background 0.3s ease;
}

/* 正在折腾 — 青绿色调（低调） */
.projects-card-col[data-dot="projects-timeline-node-ongoing"] .upup-title {
    background: linear-gradient(
        90deg,
        rgba(16, 185, 129, 0.10) 0%,
        rgba(132, 204, 22, 0.08) 100%
    );
}

/* hover 时加深（可选，让卡片 hover 时 header 更明显）*/
.projects-card-col:hover .upup-title {
    filter: brightness(0.97);
}

/* 完整字段（默认显示）*/
.upup-field {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.upup-field:last-child {
    margin-bottom: 0;
}

.upup-field-label {
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-right: 4px;
}

/* 底部说明条 */
.upup-note {
    margin-top: 40px;
    padding: 16px 20px;
    background: var(--color-bg-secondary);
    border-radius: var(--card-radius);
    border-left: 3px solid var(--color-accent);
}

.upup-note p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

/* === 响应式 === */

/* 中等屏幕（< 1200px）：3列 */
@media (max-width: 1199px) and (min-width: 769px) {
    .upup-rows {
        grid-template-columns: repeat(3, 1fr);
    }
    .upup-timeline-node {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* 移动端（< 768px）：节点左 + 卡片右，一一对应 */
@media (max-width: 768px) {
    /* 隐藏桌面横排时间轴 */
    .upup-timeline {
        display: none;                         /* 桌面那条横线不显示 */
    }

    /* 行：横向（节点左 + 卡片右）*/
    .upup-rows {
        grid-template-columns: 1fr;            /* 移动：单列堆叠 */
        gap: 24px;
        position: relative;
    }

    /* 单个 row：横排（节点 + 卡片）*/
    .upup-row {
        flex-direction: row;                   /* 移动：横向布局 */
        gap: 16px;
        align-items: stretch;
    }

    /* 节点容器：左侧固定宽度 */
    .upup-row-timeline {
        flex: 0 0 70px;                        /* 固定 70px 宽 */
        padding: 0;
        align-items: center;
        justify-content: flex-start;
        display: flex;
        position: relative;                    /* 为节点圆点定位 */
    }

    /* 节点：左对齐 */
    .upup-timeline-node {
        font-size: 12px;
        padding: 3px 10px;
    }

    /* 节点容器前画圆点（左侧纵向连接线）*/
    .upup-row-timeline::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 12px;
        bottom: -24px;                         /* 跨到下一个 row */
        width: 2px;
        background: var(--color-border);
    }

    /* 最后一个 row 的连线不画到底 */
    .upup-row:last-child .upup-row-timeline::before {
        bottom: 50%;
    }

    /* 节点圆点（在连接线左侧）*/
    .upup-row-timeline::after {
        content: "";
        position: absolute;
        left: 2px;
        top: 12px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--color-accent);
        border: 2px solid var(--color-bg-secondary);
        box-shadow: 0 0 0 3px var(--color-bg-secondary);
    }

    /* 卡片：右自适应 */
    .upup-card {
        flex: 1;                               /* 占据剩余空间 */
    }
}

/* 尊重"减少动画" */
@media (prefers-reduced-motion: reduce) {
    .upup-card,
    .upup-card:hover {
        transition: none !important;
    }
    .upup-card:hover {
        transform: translateY(-2px);
    }
}
    .upup-card:hover {
        transform: translateY(-4px);          /* 仅保留轻微抬升 */
    }
}
    .upup-title {
        font-size: 18px;
    }
}


/* =============================================================================
   Part 10: CTA 区 + 页脚（设计文档 §5.5 + §8.2）
   ============================================================================= */

.cta-section {
    text-align: center;
    padding: var(--section-spacing) 0;
    background: var(--gradient-beta);
}

.cta-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 auto 32px;            /* 强制居中 */
    text-align: center;             /* 强制居中 */
    display: block;
    width: 100%;
}

.cta-button {
    display: inline-block;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 48px;
    border-radius: var(--card-radius);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.cta-button:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3);
}

/* CTA 副标题：居中，标题与按钮之间 */
.cta-subtitle {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
}

/* CTA 主操作行：按钮 + 邮箱 横排居中 */
.cta-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.cta-email-inline {
    font-size: 14px;
    color: var(--color-text-primary);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    padding: 6px 12px;
    background: var(--color-bg-primary);
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

/* CTA 适合/不适合双卡片：横排两端对齐（左下、右下）*/
.cta-fit-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    max-width: 540px;
    margin: 0 auto;
}

.cta-fit-card {
    flex: 1;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: 14px 16px;
    text-align: left;
}

.cta-fit-yes { border-left: 3px solid #34C759; }
.cta-fit-no { border-left: 3px solid #FF9500; }

.cta-fit-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cta-fit-tags {
    display: flex;
    flex-wrap: nowrap;   /* V1 Day 15 决策 5：不换行，4 chip 一行 */
    gap: 4px;
}

.cta-fit-tag {
    flex: 1;             /* 等宽：4 chip 平均占满 */
    min-width: 0;
    text-align: center;
    font-size: 11px;
    padding: 4px 6px;
    background: var(--color-bg-secondary);
    border-radius: 6px;  /* 改：100px → 6px · 略偏长条（不是 pill） */
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cta-fit-card:hover .cta-fit-tag {
    color: var(--color-text-primary);
}

/* CTA 移动端：卡片竖向堆叠 */
@media (max-width: 768px) {
    .cta-fit-row {
        flex-direction: column;
        max-width: 280px;
        gap: 12px;
    }
    .cta-action-row {
        flex-direction: column;
        gap: 12px;
    }
    .cta-subtitle { font-size: 14px; }
    .cta-title { font-size: 26px; }
}

/* =============================================================================
   Part 10.5: 页脚三栏布局（设计文档 §8 · V1 Day 9 B1）
   桌面端：Grid 三栏（1.2fr + 1fr + 1fr）| 移动端（<768px）：单栏堆叠
   设计动机：访客滚到底部 = 决策时刻，需要品牌强化 + 便捷导航 + 联系通道
   ============================================================================= */

.site-footer {
    padding: 48px 0 32px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);  /* 轻微底色区分，与主区域分层 */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;  /* 品牌栏稍宽 */
    gap: 48px;
    align-items: start;
}

/* 左：品牌区 - Flex 纵向排列 logo + slogan */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-logo {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-logo:hover {
    color: var(--color-accent);
}

.footer-slogan {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* 中栏（导航）/ 右栏（联系）共用标题样式 */
.footer-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

.footer-nav,
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav a,
.footer-contact a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.footer-nav a:hover,
.footer-contact a:hover {
    color: var(--color-accent);
}

.footer-copyright {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin: 8px 0 0;
}

/* 法律链接（B1 修复 · V1 Day 9 B2）
   隐私政策链接放在联系区底部，行业标准做法 */
.footer-legal {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.footer-legal a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.15s ease;
}

.footer-legal a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* 响应式：md 以下（<768px）单栏堆叠 + 居中 */
@media (max-width: 767.98px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .footer-brand,
    .footer-nav,
    .footer-contact {
        align-items: center;
    }
}

/* =============================================================================
   Part 11: 响应式（设计文档 §7）—— Bootstrap 5 默认断点
   断点：sm 576 / md 768 / lg 992 / xl 1200
   ============================================================================= */

/* sm 以下 (<576px)：小屏手机 */
@media (max-width: 575.98px) {
    :root {
        --container-padding: 16px;
        --section-spacing: 48px;
    }

    /* V1 Day 16 v20：移动端 hero-grid 单列 + 6 分类宽度约束 */
    .hero-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
        gap: 20px;
        min-height: auto;            /* 移动端不需要固定高度 */
    }

    /* 移动端 hero-right 改成单列 + 宽度约束（防止超出右边界） */
    .hero-right {
        grid-template-columns: 1fr;
        grid-template-rows: auto;     /* 移动端用内容高度 */
        gap: 10px;
        width: 100%;                  /* V1 Day 16 v20：100%（不要固定 580px） */
        max-width: 100%;              /* 不超出 hero-grid */
        justify-self: stretch;        /* 移动端拉满 */
    }

    /* 移动端 category-strip 高度恢复 min-height: 64px */
    .category-strip {
        min-height: 64px;
    }

    /* 移动端 hero-right 改成单列 */
    .hero-right {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-tagline-band {
        padding: 24px 24px 72px 24px;  /* V1 Day 16 v28：手机端下边缘再加 24（48→72 = 再加一倍） */
        margin-top: 32px;
    }

    .hero-tagline-band-placeholder {
        font-size: 14px;
        padding: 18px 12px;
    }

    /* V1 Day 16 v16：移动端标题 36 → 32px */
    .hero-title {
        font-size: 32px;
    }
    /* V1 Day 16 v20：移动端 tagline 单独一行 + 间距和谐 */
    .hero-title .hero-tagline {
        font-size: 18px;
        margin-left: 0;
        margin-top: 6px;            /* 不挤不离 */
        display: block;
        line-height: 1.4;
    }
    .hero-subtitle-lead {
        font-size: 16px;
    }
    .hero-subtitle-vision {
        font-size: 14px;
    }
    .hero-subtitle-cta {
        font-size: 15px;
    }
    .cta-row-item {
        font-size: 14px;
    }
    .hero-cta-arrow-inline {
        width: 16px;
        height: 16px;
    }
    .hero-subtitle {
        font-size: 16px;
    }
    .hero-persona {
        margin-bottom: 40px;
        font-size: 14px;
        padding: 12px 14px;
    }
    .persona-label {
        font-size: 11px;
    }
    /* V1 Day 16 v20：移动端头像 64 → 88px（让头像 ≥ "大军 + tagline" 两行高度） */
    .hero-avatar {
        width: 88px;
        height: 88px;
    }
    .hero-title {
        font-size: 40px;
    }
    .hero-identity {
        gap: 12px;             /* 移动端更紧凑 */
    }

    .section-title {
        font-size: 28px;
    }

    .section-header {
        flex-direction: column;
        gap: 16px;
    }

    .card-grid {
        grid-template-columns: 1fr;  /* 1 列 */
    }

    .feature-card {
        padding: 24px;
    }

    .feature-title {
        font-size: 18px;       /* V1 Day 16 v16：移动端 tagline 缩小 24 → 18 */
    }

    .cta-button {
        display: block;  /* 移动端占满宽度 */
        padding: 16px 24px;
    }

    /* 时间轴移动端：纵向 */
    .timeline {
        padding: 16px 0;
    }

    .timeline-line {
        top: 0;
        bottom: 0;
        left: 8px;
        right: auto;
        width: 2px;
        height: auto;
        transform: none;
    }

    .timeline-nodes {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .timeline-node {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        text-align: left;
    }

    .timeline-dot {
        margin-left: 0;
    }

    .timeline-content {
        margin-top: 0;
    }
}

/* md (≥768px) */
@media (min-width: 768px) {
    :root {
        --section-spacing: 72px;
    }
}

/* lg (≥992px) */
@media (min-width: 992px) {
    :root {
        --section-spacing: 96px;
    }
}


/* =============================================================================
   Part 12: 法律页面样式（privacy.html / V1.5 terms.html 共用）
   设计原则：阅读体验优先（窄栏 + 大字号 + 充足留白）
   ============================================================================= */

.legal-page {
    padding: 48px 0 96px;
}

.container-narrow {
    max-width: 760px;  /* 阅读最佳宽度（中文约 30-40 字/行）*/
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.legal-page h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.legal-updated {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin: 0 0 32px;
}

.legal-page h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.legal-page p,
.legal-page li {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0 0 12px;
}

.legal-page ul,
.legal-page ol {
    padding-left: 24px;
    margin: 0 0 16px;
}

.legal-page a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.legal-page a:hover {
    text-decoration: underline;
}

.legal-page strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 16px;
    font-size: 14px;
}

.legal-table th,
.legal-table td {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
}

.legal-table th {
    background: var(--color-bg-secondary);
    font-weight: 600;
    color: var(--color-text-primary);
}

.legal-table td {
    color: var(--color-text-secondary);
}

.legal-back {
    margin-top: 48px;
    font-size: 14px;
}

/* 移动端法律页微调 */
@media (max-width: 575.98px) {
    .legal-page h1 { font-size: 26px; }
    .legal-page h2 { font-size: 18px; }
    .legal-page p,
    .legal-page li { font-size: 14px; }
}

/* =============================================================================
   Part 99: DEMO 样式（仅 ?demo=1 时生效 · V1 上线前删除）
   5 套 6 分类卡片样式对照，通过 body[data-style="A|B|C|D|E"] 切换
   默认方案 A = 白底 + 彩色 icon（与生产环境一致）
   ============================================================================= */

/* === 方案 A：白底（默认） ============================
   已在 Part 6 定义，无需重复
   仅说明：默认就是当前方案 */

/* === 方案 B：淡渐变背景 ============================
   整条背景换成对应颜色的极淡渐变
   渐变方向：135deg（左上→右下）
   透明度：8% → 2%（最深处也几乎看不出来）
*/
body[data-style="B"] .category-strip {
    background: linear-gradient(
        135deg,
        rgba(0, 102, 204, 0.08) 0%,
        rgba(0, 102, 204, 0.02) 100%
    );
}
body[data-style="B"] .category-strip[data-color="blue"] {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(0, 102, 204, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="green"] {
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.08) 0%, rgba(34, 139, 34, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="orange"] {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08) 0%, rgba(255, 140, 0, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="red"] {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.08) 0%, rgba(220, 20, 60, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="purple"] {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.08) 0%, rgba(138, 43, 226, 0.02) 100%);
}
body[data-style="B"] .category-strip[data-color="pink"] {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.08) 0%, rgba(255, 105, 180, 0.02) 100%);
}

/* === 方案 C：Hover 时渐变 ============================
   平时白底，悬停时背景淡入对应颜色
   默认仍是克制方案，互动时才有彩色反馈
*/
body[data-style="C"] .category-strip {
    transition: background 0.3s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
body[data-style="C"] .category-strip[data-color="blue"]:hover {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(0, 102, 204, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="green"]:hover {
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.12) 0%, rgba(34, 139, 34, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="orange"]:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.12) 0%, rgba(255, 140, 0, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="red"]:hover {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.12) 0%, rgba(220, 20, 60, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="purple"]:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.12) 0%, rgba(138, 43, 226, 0.04) 100%);
}
body[data-style="C"] .category-strip[data-color="pink"]:hover {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.12) 0%, rgba(255, 105, 180, 0.04) 100%);
}

/* === 方案 D：左侧色条 ============================
   左边 4px 竖向色条 = 双重分类信号
   不抢眼色，但一眼区分
*/
body[data-style="D"] .category-strip {
    border-left: 4px solid var(--cat-bar, var(--color-border));
    padding-left: 20px;  /* 补偿色条占用的空间 */
}
body[data-style="D"] .category-strip[data-color="blue"]   { --cat-bar: #0066cc; }
body[data-style="D"] .category-strip[data-color="green"]  { --cat-bar: #228b22; }
body[data-style="D"] .category-strip[data-color="orange"] { --cat-bar: #d97a00; }
body[data-style="D"] .category-strip[data-color="red"]    { --cat-bar: #c91842; }
body[data-style="D"] .category-strip[data-color="purple"] { --cat-bar: #7d22ce; }
body[data-style="D"] .category-strip[data-color="pink"]   { --cat-bar: #e754a8; }

/* === 方案 E：选中态渐变 ============================
   仅第 1 个分类显示选中态（模拟"当前正在浏览"）
   其余仍是白底
*/
body[data-style="E"] .category-strip:first-of-type {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.10) 0%, rgba(0, 102, 204, 0.03) 100%);
    border-left: 4px solid #0066cc;
    padding-left: 20px;
}

/* === Demo 切换器工具条样式 ============================ */
.demo-toolbar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    display: flex;
    gap: 6px;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    max-width: calc(100vw - 40px);
    flex-wrap: wrap;
}

.demo-toolbar strong {
    color: #24292f;
    margin-right: 4px;
    font-weight: 600;
}

.demo-toolbar button {
    border: 1px solid #d0d7de;
    background: #f6f8fa;
    color: #24292f;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
    font-family: inherit;
}

.demo-toolbar button:hover {
    background: #eaeef2;
    border-color: #afb8c1;
}

.demo-toolbar button.is-active {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
    font-weight: 500;
}

.demo-toolbar button.is-active:hover {
    background: #0052a3;
    border-color: #0052a3;
}

/* 暗色模式适配 */
[data-theme="dark"] .demo-toolbar {
    background: #1c2128;
    border-color: #444c56;
}

[data-theme="dark"] .demo-toolbar strong {
    color: #e6edf3;
}

[data-theme="dark"] .demo-toolbar button {
    background: #2d333b;
    color: #adbac7;
    border-color: #444c56;
}

[data-theme="dark"] .demo-toolbar button:hover {
    background: #373e47;
}

[data-theme="dark"] .demo-toolbar button.is-active {
    background: #2188ff;
    border-color: #2188ff;
}

/* 移动端：工具条自适应 */
@media (max-width: 575.98px) {
    .demo-toolbar {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: calc(100vw - 20px);
        justify-content: center;
    }
}


/* =============================================================================
   推荐板块 C 方案（PRD v1.1 决策 2 · 2026-09-15）
   Section 2.1: 3 大卡（stage-cards）
   Section 2.2: 5 小卡（milestone-cards）
   ============================================================================= */


/* ========== Section 2.1: 3 大卡 ========== */

.stage-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;           /* V1 Day 15 决策 2：紧凑 24→16 */
    margin-top: 24px;    /* V1 Day 15 决策 2：紧凑 40→24 */
}

.stage-card {
    background: var(--color-bg-card);
    border-radius: 16px;
    padding: 20px;       /* V1 Day 15 决策 2：紧凑 28→20 */
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.stage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stage-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px 18px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(  /* 默认蓝紫（agent 阶段）*/
        90deg,
        rgba(99, 102, 241, 0.05) 0%,
        rgba(168, 85, 247, 0.05) 100%
    );
    transition: background 0.3s ease;
}

/* 入门玩家：绿色渐变（对应 🌱 豆苗）*/
.stage-beginner .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(34, 197, 94, 0.07) 0%,
        rgba(132, 204, 22, 0.07) 100%
    );
}
.stage-beginner:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(34, 197, 94, 0.14) 0%,
        rgba(132, 204, 22, 0.12) 100%
    );
}

/* 折腾一派：蓝紫渐变（对应 🤖 agent）*/
.stage-agent .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.07) 0%,
        rgba(99, 102, 241, 0.07) 100%
    );
}
.stage-agent:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.14) 0%,
        rgba(99, 102, 241, 0.12) 100%
    );
}

/* 建设高手：紫色渐变（对应 🧠 知识库）*/
.stage-knowledge .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(168, 85, 247, 0.07) 0%,
        rgba(236, 72, 153, 0.07) 100%
    );
}
.stage-knowledge:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(168, 85, 247, 0.14) 0%,
        rgba(236, 72, 153, 0.12) 100%
    );
}

.stage-card:hover .stage-card-header {
    background: linear-gradient(
        90deg,
        rgba(0, 102, 204, 0.08) 0%,
        var(--color-accent-bg) 100%
    );
}

.stage-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.stage-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
}

.stage-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

.stage-posts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.stage-post-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s;
}

.stage-post-link:hover {
    background: var(--color-accent);
    color: white;
}

.stage-post-title {
    flex: 1;
    margin-right: 8px;
}

.stage-post-arrow {
    font-weight: 600;
    opacity: 0.6;
}

.stage-empty-note {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

.stage-more {
    font-size: 13px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

.stage-more:hover {
    text-decoration: underline;
}

/* ========== Section 2.2: 5 小卡 ========== */

.milestone-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;            /* V1 Day 15 决策 2：紧凑 16→12 */
    margin-top: 20px;     /* V1 Day 15 决策 2：紧凑 32→20 */
}

.milestone-card {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 12px;          /* V1 Day 15 决策 2：紧凑 18→12 */
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 90px;       /* V1 Day 15 决策 2：紧凑 120→90 */
    display: flex;
    flex-direction: column;
}

.milestone-card:hover:not(.milestone-card-empty) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.milestone-card-empty {
    opacity: 0.5;
    border-style: dashed;
}

.milestone-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-accent);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 12px;
    align-self: flex-start;
}

.milestone-card-empty .milestone-type-badge {
    background: var(--color-text-secondary);
}

.milestone-post-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.milestone-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.milestone-read {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 500;
    margin-top: auto;
}

.milestone-empty-text {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: auto 0;
    text-align: center;
}

/* ========== 响应式 ========== */

@media (max-width: 1024px) {
    .stage-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .milestone-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .stage-cards {
        grid-template-columns: 1fr;
    }
    .milestone-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .milestone-cards .milestone-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    .stage-card,
    .milestone-card {
        transition: none;
    }
    .stage-card:hover,
    .milestone-card:hover:not(.milestone-card-empty) {
        transform: none;
    }
}


/* =============================================================================
   数字面板（PRD v1.1 决策 4 · 2026-09-15）
   4 个数字：持续天数 / 文章数 / 类别数 / 版本号
   ============================================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 8px;
    color: white;
}
    font-weight: 500;
    letter-spacing: 0.05em;
}

    .stat-item {
        padding: 16px 8px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
   ============================================================================= */

.reading-section {
    padding: 2rem 0 2.5rem;
    position: relative;
}

/* V1 Day 15 优化：reading 卡片样式（不再单调）*/
.reading-section .section-header-right {
    position: relative;
    padding-left: 16px;
    border-left: 3px solid linear-gradient;  /* 视觉上靠左 */
}

.reading-section .section-header-right::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: linear-gradient(180deg, var(--color-accent), rgba(99, 102, 241, 0.3));
    border-radius: 2px;
}

/* reading section 的容器：浅色卡片样式 */
.reading-section .container {
    position: relative;
}

/* 给 reading-mini-link 加卡片感 */
.reading-section .reading-mini-link {
    background: linear-gradient(90deg, var(--color-bg-card) 0%, rgba(99, 102, 241, 0.02) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.reading-section .reading-mini-link:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.reading-section .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.external-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-warning, #f59e0b);
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.reading-list {
    display: grid;
    gap: 16px;
    margin-top: 32px;
}

/* V1 Day 15 决策 1：主页 reading 区域精简成 3 个小链接 */
.reading-mini-list {
    display: flex;
    flex-direction: column;
    gap: 6px;                  /* V1 Day 15 优化：8→6 更紧凑 */
    margin-top: 12px;          /* V1 Day 15 优化：16→12 */
}

/* V1 Day 16 v31：reading-mini-link 改 column 布局（让 header + reason 上下排）*/
.reading-mini-link {
    display: flex;
    flex-direction: column;        /* header + reason 上下排 */
    align-items: stretch;          /* 子元素占满宽度 */
    padding: 10px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    gap: 6px;                      /* header 和 reason 之间间距 */
}

.reading-mini-link:hover {
    border-color: var(--color-accent);
    transform: translateX(2px);
}

.reading-mini-header {
    display: block;                /* 2026-10-16 v33: 横排 → 竖排 3 行布局(仅 mobile) */
    width: 100%;
}

/* V1 Day 16 v31：reading-mini-reason mobile 段 v33：竖排 3 行,reason 2 行截断 */
@media (max-width: 768px) {
    .reading-mini-reason {
        font-size: 0.6875rem;          /* 11px,跟 desktop 一样 */
        line-height: 1.4;              /* mobile 紧凑:1.5→1.4 */
        color: var(--color-text-secondary);
        margin: 0;
        width: 100%;
        text-indent: 1em;              /* mobile 缩进减半:2em→1em(避免 label 换行撑高)*/
        display: -webkit-box;
        -webkit-line-clamp: 2;         /* 2026-10-16 v33: mobile 跟 desktop 一致 2 行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 2026-10-18: source 右对齐（用户要求"出处放第二行,居右对齐,全部显示"）*/
    .reading-mini-source {
        text-align: right;
    }
}

.reading-mini-reason-label {
    /* 不加粗,色跟 reason 一致 - 避免视觉压过 title(0.6875rem + secondary)*/
    color: var(--color-text-secondary);
}

.reading-mini-title {
    font-size: 0.9375rem;
    font-weight: 500;
    display: block;                /* 2026-10-16 v33: 独占第 1 行 */
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;            /* 2026-10-16 v33: 和 source 间隔 */
}

/* V1 Day 16 v31：reading-mini-source 加 B 方案 - 左侧蓝线 + 灰色文字(像引文标注)*/
.reading-mini-source {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    display: block;                /* 2026-10-16 v33: 独占第 2 行 */
    border-left: 2px solid var(--color-accent);
    padding-left: 6px;
    line-height: 1.4;
    margin-bottom: 6px;            /* 2026-10-16 v33: 和 reason 间隔 */
}

.reading-more-wrap {
    margin-top: 12px;
    text-align: right;
}

.reading-more-link {
    font-size: 0.875rem;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.reading-more-link:hover {
    opacity: 0.7;
}

.reading-card {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.reading-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.reading-card-header {
    margin-bottom: 12px;
}

.reading-title-link {
    text-decoration: none;
    color: inherit;
}

.reading-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.reading-title-link:hover .reading-title {
/* V1 Day 16 v32 mobile：readings 详情页间距略缩 */
.readings-hero {
    padding: 32px 0 16px 0;
}

.readings-hero-title {
    font-size: 1.5rem;              /* mobile 24px,比 desktop 略小 */
}

.readings-hero-subtitle {
    text-indent: 1.5em;              /* mobile 略缩,2em→1.5em(屏幕窄) */
    line-height: 1.5;
}

.readings-list {
    gap: 16px;                       /* mobile 间距略缩,20→16 */
    margin-top: 12px;
}

.reading-card {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 20px 16px;              /* mobile 内边距略缩,24→20,左右 16 */
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
}

    color: var(--color-accent);
}

.reading-source {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.reading-reason {
    font-size: 14px;
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.reading-reason-label {
    font-weight: 600;
    color: var(--color-accent);
    margin-right: 4px;
}

.reading-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reading-tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-radius: 4px;
    font-size: 12px;
}

.reading-empty {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 32px;
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .reading-card,
    .reading-card:hover {
        transition: none;
        transform: none;
    }
}