/* ========== Skills 落地页专属样式（自包含，仅依赖 site.css 的主题变量） ========== */

/* site.css 未定义等宽字体 token，此处补齐（代码块用） */
:root {
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

    /* ========== 页面容器 ========== */
    .skills-page {
        max-width: 1080px;
        margin: 0 auto;
        /* 顶部 padding-top: 64px = 导航栏高度 56px + 8px 呼吸位，
           避免 .sk-header 标题被 fixed 导航栏遮住（与 site.css 锚点偏移量保持一致）；
           水平内边距 24px 与首页 .container 对齐 */
        padding: 64px 24px 20px;
    }

    /* ========== 标题区 ========== */
    .sk-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        gap: 16px;
    }

    .sk-title {
        font-size: 22px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .sk-subtitle {
        font-size: 13px;
        color: var(--text-secondary);
        margin-top: 4px;
    }

    /* 风险免责申明：警示框结构（图标 + 标题 + 正文），左侧色条 + 浅色底，
       字体加大加粗、关键句着色，遵循低饱和、轻量风格 */
    .sk-disclaimer {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 12px;
        padding: 12px 14px;
        background: color-mix(in srgb, var(--color-up) 8%, var(--bg-secondary));
        border: 1px solid color-mix(in srgb, var(--color-up) 28%, var(--border-color));
        border-left: 4px solid var(--color-up);
        border-radius: 8px;
        line-height: 1.6;
    }
    .sk-disclaimer__icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        color: var(--color-up);
    }
    .sk-disclaimer__body {
        flex: 1;
        min-width: 0;
    }
    .sk-disclaimer__title {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-up);
        letter-spacing: 0.3px;
        margin-bottom: 4px;
    }
    .sk-disclaimer__text {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.7;
    }
    .sk-disclaimer__text b {
        color: var(--color-up);
        font-weight: 600;
    }
    @media (max-width: 680px) {
        .sk-disclaimer {
            padding: 10px 12px;
        }
        .sk-disclaimer__title,
        .sk-disclaimer__text {
            font-size: 12px;
        }
    }

    /* ========== 文档更新提示 ========== */
    .sk-update-tip {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
    }

    /* 更新圆点：呼吸动画提示有新内容 */
    .sk-update-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-blue);
        flex-shrink: 0;
        animation: sk-update-pulse 2s ease-in-out infinite;
    }

    /* "新"标记：极淡底色 + 彩色文字，不使用实色胶囊 */
    .sk-update-new {
        margin-left: 2px;
        padding: 1px 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--accent-blue);
        background: rgba(88, 166, 255, 0.10);
        border-radius: 4px;
        line-height: 1.4;
    }

    .sk-update-time {
        color: var(--text-primary);
    }

    @keyframes sk-update-pulse {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.25); }
    }

    .sk-download-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: linear-gradient(135deg, var(--accent-blue), #3b82f6);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .sk-download-btn svg { width: 16px; height: 16px; }

    .sk-download-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(88, 166, 255, 0.4);
    }

    /* 步骤 1 操作按钮组：下载主按钮 + GitHub 次按钮并排，极窄屏自动换行 */
    .sk-step-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    /* GitHub 源码入口：outline 次级风格，弱于下载主按钮，轻量低饱和 */
    .sk-source-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .sk-source-btn svg { width: 16px; height: 16px; }

    .sk-source-btn:hover {
        background: rgba(88, 166, 255, 0.08);
        border-color: var(--accent-blue);
        color: var(--text-primary);
    }

    /* ========== 区块标题 ========== */
    .sk-section {
        margin-bottom: 32px;
    }

    .sk-section-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }

    /* ========== 使用教程 ========== */
    .sk-tutorial {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* 步骤：轻量卡片化（与「详细说明」区同语言），用编号圆圈作为流程锚点，
       区别于「详细说明」的色条标题卡；卡片间用 margin 间距替代分隔线，三步独立成块。 */
    .sk-step {
        display: flex;
        gap: 16px;
        padding: 20px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin-bottom: 16px;
    }

    .sk-step:last-child {
        margin-bottom: 0;
    }

    .sk-step-num {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--accent-blue);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }

    .sk-step-body {
        flex: 1;
        min-width: 0;
    }

    .sk-step-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 6px;
    }

    .sk-step-desc {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.7;
        margin-bottom: 10px;
    }

    .sk-step-desc code {
        font-family: var(--font-mono);
        font-size: 12px;
        background: var(--bg-tertiary);
        padding: 1px 5px;
        border-radius: 3px;
        color: var(--accent-blue);
    }

    .sk-step-desc a code {
        cursor: pointer;
    }

    /* 步骤内左右分栏：文案居左、操作按钮居右（步骤 1 下载入口） */
    .sk-step-body--row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    /* 文案区占据剩余空间，min-width:0 防止长内容撑破 flex 布局 */
    .sk-step-text {
        flex: 1;
        min-width: 0;
    }

    /* 代码块 */
    .sk-step-code {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 12px 16px;
        overflow-x: auto;
        margin-bottom: 12px;
    }

    /* 代码块作为卡片内末尾元素时不再追加底部间距，避免与卡片 padding 叠加留空 */
    .sk-step-code:last-child {
        margin-bottom: 0;
    }

    .sk-step-code pre {
        font-family: var(--font-mono);
        font-size: 12px;
        line-height: 1.6;
        color: var(--text-secondary);
        margin: 0;
        white-space: pre;
    }

    .sk-step-code code {
        font-family: var(--font-mono);
    }

    /* 示例列表 */
    .sk-step-examples {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* 步骤内紧凑列表（如步骤 4「默认行为」「日志与排障」的要点列表）。
       与全站正文段落区分：缩进加大、用小圆点、间距紧凑，避免与上方段落黏在一起。 */
    .sk-step-list {
        margin: 4px 0 12px;
        padding-left: 20px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.7;
    }

    .sk-step-list li {
        margin-bottom: 2px;
    }

    .sk-step-list li::marker {
        color: var(--text-tertiary, var(--text-secondary));
    }

    /* 紧凑列表内的外部链接：着色 + 微妙半透明下划线区分可点击，hover 时下划线转实色，保持低饱和轻量风格 */
    .sk-step-list a {
        color: var(--accent-blue);
        text-decoration: underline;
        text-decoration-color: rgba(88, 166, 255, 0.4);
        text-underline-offset: 2px;
        transition: text-decoration-color 0.15s ease;
    }

    .sk-step-list a:hover {
        text-decoration-color: var(--accent-blue);
    }

    .sk-example {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }

    .sk-example-tag {
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(88, 166, 255, 0.1);
        color: var(--accent-blue);
        border: 1px solid rgba(88, 166, 255, 0.25);
        white-space: nowrap;
    }

    .sk-example-text {
        font-size: 13px;
        color: var(--text-primary);
    }

    /* ========== 详细说明 section（按需阅读，区别于「如何使用」的编号步骤） ========== */

    /* section 标题旁的次级提示（如「按需阅读」「有基础看这里」），弱化字重与颜色以区分主标题 */
    .sk-section-hint {
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        margin-left: 8px;
    }

    /* 详细说明内的主题块：轻量卡片化（半透明感底色 + 微妙边框 + 圆角），
       让「项目包里有什么 / 方式A / 方式B」三个主题各自成块、一眼可辨，
       而非靠分隔线连成一片连续正文。底色用 bg-secondary（深色下比主背景浅一档才可见）。 */
    .sk-detail-block {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 20px 24px;
        margin-bottom: 16px;
    }

    .sk-detail-block:last-child {
        margin-bottom: 0;
    }

    /* 详细说明的主题标题（L1）：独立于「如何使用」的 .sk-step-title，
       用左侧 3px 强调色条 + 16px 字号建立主题锚点，
       让三个主题从连续正文中脱颖而出。 */
    .sk-detail-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.4;
        padding-left: 12px;
        border-left: 3px solid var(--accent-blue);
        margin-bottom: 14px;
    }

    /* 详细说明主题内的小节标题（L2）：独立于「如何使用」的步骤标题，
       用更亮的文字色（primary 而非 secondary）+ 左侧 2px 色条，
       让「默认行为 / 启动 / 常用参数」等小节跳出同色正文，形成第二层视觉层级。 */
    .sk-detail-subtitle {
        margin: 18px 0 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        padding-left: 10px;
        border-left: 2px solid var(--tint-border-blue);
    }

    /* 紧跟主题标题/首段的首个小节，顶部不留过大间距 */
    .sk-detail-subtitle:first-child {
        margin-top: 8px;
    }

    /* ========== 页签栏（Tabs） ========== */
    /* 经典下划线页签：inactive 弱色文字，active 用强调色 + 底部 2px 色条指示。
       轻量低饱和、无实色背景；窄屏 flex-wrap 换行避免挤压，不出现横向滚动条。切换逻辑见 skills.js initTabs。 */
    .sk-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--border-color);
    }

    .sk-tab {
        position: relative;
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

    .sk-tab:hover {
        color: var(--text-primary);
    }

    .sk-tab.is-active {
        color: var(--accent-blue);
        border-bottom-color: var(--accent-blue);
        font-weight: 600;
    }

    /* ========== 页签面板（Panels） ========== */
    /* 默认隐藏，is-active 才显示；display:none 让隐藏面板不占布局 */
    .sk-panel {
        display: none;
    }

    .sk-panel.is-active {
        display: block;
    }

    /* ========== 板块介绍提示（轻量，区别于红色免责警示框） ========== */
    /* 蓝色弱底 + 左色条，说明「此板块是什么 + 完整版去哪看 + 免责」，
       与顶部红色 sk-disclaimer（风险警示）拉开语义层级，不抢视觉焦点。 */
    .sk-intro-note {
        padding: 12px 16px;
        margin-bottom: 16px;
        background: color-mix(in srgb, var(--accent-blue) 6%, var(--bg-secondary));
        border: 1px solid color-mix(in srgb, var(--accent-blue) 20%, var(--border-color));
        border-left: 3px solid var(--accent-blue);
        border-radius: 6px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.7;
    }

    .sk-intro-note code {
        font-family: var(--font-mono);
        font-size: 12px;
        background: var(--bg-tertiary);
        padding: 1px 5px;
        border-radius: 3px;
        color: var(--accent-blue);
    }

    .sk-intro-note strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    /* em 在 intro-note 内复用为「免责语句」的弱化语气，不用斜体，色调更弱 */
    .sk-intro-note em {
        font-style: normal;
        color: var(--text-tertiary, var(--text-secondary));
    }

    /* ========== 选股策略：卡片网格（一行 3 个，点击跳转「自然语言选股」页） ========== */
    /* 卡片网格容器：3 列等宽，窄屏逐级降为 2 列 / 1 列 */
    .sk-strategy-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    @media (max-width: 980px) {
        .sk-strategy-cards { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
        .sk-strategy-cards { grid-template-columns: 1fr; }
    }

    /* 策略卡片：左侧色条 + 轻量边框 + 弱底，整体可点击跳转。
       --strategy-accent / --strategy-tint 由 modifier（--intraday / --auction）覆盖，eod 回退蓝色。
       flex 纵向布局 + 末段 margin-top:auto 让 meta 沉底，多张卡片底部对齐。 */
    .sk-strategy-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 18px;
        text-decoration: none;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-left: 3px solid var(--strategy-accent, var(--accent-blue));
        border-radius: 8px;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }
    .sk-strategy-card:hover {
        background: color-mix(in srgb, var(--strategy-accent, var(--accent-blue)) 4%, var(--bg-secondary));
        border-color: color-mix(in srgb, var(--strategy-accent, var(--accent-blue)) 45%, var(--border-color));
        transform: translateY(-1px);
    }
    .sk-strategy-card:focus-visible {
        outline: 2px solid var(--accent-blue);
        outline-offset: 2px;
    }

    /* 时段配色 modifier：盘中（橙红）/ 早盘竞价（金），未命中时回退盘后蓝 */
    .sk-strategy-card--intraday {
        --strategy-accent: var(--color-up);
        --strategy-tint: var(--tint-up);
    }
    .sk-strategy-card--auction {
        --strategy-accent: var(--accent-gold);
        --strategy-tint: var(--tint-gold);
    }

    /* 卡片头部：类型标签（左）+ 选股数量徽章（右） */
    .sk-strategy-card__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .sk-strategy-card__type {
        flex-shrink: 0;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--strategy-accent, var(--accent-blue));
        background: var(--strategy-tint, var(--tint-blue));
        border-radius: 4px;
    }
    /* 选股数量：淡蓝底圆角徽章，突出当前命中数 */
    .sk-strategy-card__count {
        flex-shrink: 0;
        min-width: 22px;
        padding: 1px 7px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
        color: var(--accent-blue);
        background: color-mix(in srgb, var(--accent-blue) 12%, transparent);
        border-radius: 10px;
    }

    /* 策略名称：主文字色 + 600 字重，建立卡片标题锚点 */
    .sk-strategy-card__name {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--text-primary);
    }

    /* 策略描述：限制高度避免长描述撑高卡片，超出的内容裁剪隐藏，保持多卡等高 */
    .sk-strategy-card__desc {
        margin: 0;
        font-size: 12px;
        line-height: 1.7;
        color: var(--text-secondary);
        max-height: 7em;
        overflow: hidden;
    }
    .sk-strategy-card__desc--empty {
        color: var(--text-tertiary, var(--text-secondary));
    }
    .sk-strategy-card__desc p,
    .sk-strategy-card__desc ul,
    .sk-strategy-card__desc ol {
        margin: 0;
    }
    .sk-strategy-card__desc ul,
    .sk-strategy-card__desc ol {
        padding-left: 18px;
    }
    .sk-strategy-card__desc strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    /* 卡片底部 meta：策略 ID + 最后选股时间，顶部细分隔线，margin-top:auto 沉底对齐 */
    .sk-strategy-card__meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
        margin-top: auto;
        border-top: 1px solid var(--border-color);
        font-size: 11px;
        color: var(--text-secondary);
    }
    .sk-strategy-card__id {
        font-family: var(--font-mono);
        color: var(--text-tertiary, var(--text-secondary));
    }
    .sk-strategy-card__sep {
        color: var(--border-color);
    }

    /* 空数据兜底：虚线边框 + 居中提示，避免无公开策略时留白 */
    .sk-strategy-empty {
        padding: 32px 16px;
        text-align: center;
        font-size: 13px;
        color: var(--text-secondary);
        background: var(--bg-secondary);
        border: 1px dashed var(--border-color);
        border-radius: 8px;
    }

    /* ========== 移动端 ========== */
    @media (max-width: 767px) {
        .sk-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .sk-title { font-size: 20px; }

        .sk-step { gap: 12px; padding: 16px; }

        /* 窄屏下步骤 1 左右分栏回退为上下堆叠，按钮折回文案下方 */
        .sk-step-body--row {
            flex-direction: column;
            align-items: flex-start;
        }

        .sk-step-code pre { font-size: 11px; }

        /* 窄屏下卡片左右内边距收窄，给代码块/示例留出更多横向空间 */
        .sk-detail-block { padding: 16px; }

        .sk-example {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }
    }

/* ========== 常见问题（GEO：与 analysis-guide 同一设计语言 —— 紧凑轻量卡片 + 3 列网格） ========== */
.sk-faq {
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 0 16px 40px;
}

/* 标题：左侧色条 + 彩色文字，不用实色徽章 */
.sk-faq__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 2px solid var(--accent-blue);
    letter-spacing: 0.3px;
}

.sk-faq__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.sk-faq__item {
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.15s, background 0.15s;
}

.sk-faq__item:hover {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-tertiary));
}

.sk-faq__q {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: 0.2px;
}

.sk-faq__a {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 900px) {
    .sk-faq__grid { grid-template-columns: 1fr; }
}