/* ==================== 设计令牌（Design Tokens） ==================== */
:root {
    /* 成功色系 */
    --color-success: #0d7a3e;
    --color-success-bg: #f0fdf4;
    --color-success-bg-alt: #e6f7ed;
    --color-success-border: #a3e0bd;

    /* 错误色系 */
    --color-error: #b91c1c;
    --color-error-bg: #fde8e8;
    --color-error-border: #f5a3a3;

    /* 警告色系 */
    --color-warning: #b35c00;
    --color-warning-bg: #fff7e6;
    --color-warning-border: #ffd699;
}

[data-md-color-scheme="slate"] {
    --color-success: #4ade80;
    --color-success-bg: #0d2818;
    --color-success-bg-alt: #0d2818;
    --color-success-border: #166534;

    --color-error: #f87171;
    --color-error-bg: #2d0d0d;
    --color-error-border: #991b1b;

    --color-warning: #fbbf24;
    --color-warning-bg: #2d1f0d;
    --color-warning-border: #92400e;
}


/* ==================== 首页：简约精修版 ==================== */
.md-header__button.md-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 1.55rem;
    margin: 0.2rem 0.5rem 0.2rem 0.2rem;
    background: #fff;
    border-radius: 0.3rem;
    padding: 0.1rem;
}

.md-header__button.md-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-hero {
    padding: 0.9rem 0 1.4rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.home-eyebrow {
    margin-bottom: 0.55rem;
    color: var(--md-primary-fg-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero h1 {
    margin: 0 0 0.7rem;
    color: var(--md-default-fg-color);
    font-size: clamp(2rem, 4.8vw, 3.2rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.home-hero p {
    max-width: 40rem;
    margin: 0;
    color: var(--md-default-fg-color--light);
    font-size: 0.88rem;
    line-height: 1.8;
}

.home-quick-grid,
.home-tag-grid,
.home-resource-grid,
.home-stats,
.home-notices {
    display: grid;
    gap: 0.75rem;
}

.home-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.35rem 0 1.8rem;
}

.home-card,
.home-timeline-item,
.home-notice {
    min-width: 0;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.45rem;
    background: var(--md-default-bg-color);
    box-sizing: border-box;
}

.home-card {
    padding: 1rem;
}

.home-quick-card {
    min-height: 8.5rem;
}

.home-quick-card small {
    display: inline-block;
    color: var(--md-primary-fg-color);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.home-card h3,
.home-timeline-item h3,
.home-resource-card h3 {
    margin: 0.35rem 0 0.35rem;
    font-size: 0.98rem;
    line-height: 1.45;
}

.home-card p,
.home-timeline-item p {
    margin: 0 0 0.75rem;
    color: var(--md-default-fg-color--light);
    font-size: 0.78rem;
    line-height: 1.7;
}

.home-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.home-links a,
.home-resource-card a {
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.3rem;
    background: var(--md-code-bg-color);
    padding: 0.18rem 0.48rem;
    color: var(--md-typeset-a-color);
    font-size: 0.72rem;
    line-height: 1.45;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.home-links a:hover,
.home-resource-card a:hover {
    color: var(--md-accent-fg-color);
}

.home-timeline {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.home-timeline-item {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.9rem;
}

.home-step {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 0.4rem;
    background: var(--md-code-bg-color);
    color: var(--home-step-color, var(--md-primary-fg-color));
    font-size: 0.9rem;
    font-weight: 700;
}

.home-timeline-item:nth-child(2) .home-step {
    --home-step-color: #0f8f5f;
}

.home-timeline-item:nth-child(3) .home-step {
    --home-step-color: #b7791f;
}

.home-timeline-item:nth-child(4) .home-step {
    --home-step-color: #7453c8;
}

.home-timeline-item h3 {
    margin-top: 0;
}

.home-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0.9rem 0 1.1rem;
}

.home-stat {
    min-width: 0;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.4rem;
    padding: 0.85rem 0.55rem;
    text-align: center;
    background: var(--md-default-bg-color);
}

.home-stat strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--md-primary-fg-color);
    font-size: 1.35rem;
    line-height: 1.1;
}

.home-stat span {
    color: var(--md-default-fg-color--light);
    font-size: 0.68rem;
}

.home-tag-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0.9rem;
}

.home-tag-card {
    min-height: 9.2rem;
}

.home-notices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.9rem;
}

.home-notice {
    padding: 0.95rem;
}

.home-notice strong {
    display: block;
    margin-bottom: 0.45rem;
}

.home-notice ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--md-default-fg-color--light);
    font-size: 0.78rem;
}

.home-resource-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0.9rem;
}

.home-resource-card a {
    display: block;
    width: fit-content;
    margin-top: 0.32rem;
}

/* ==================== 通用优化 ==================== */
.md-typeset h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.md-typeset h2 {
    margin-top: 1.8rem;
}

.md-typeset table:not([class]) {
    font-size: 0.82rem;
}

.md-typeset table:not([class]) th {
    border-bottom: 0.05rem solid var(--md-default-fg-color--lighter);
    background-color: var(--md-code-bg-color);
    color: var(--md-default-fg-color);
    font-weight: 600;
}

.md-typeset .admonition.tip {
    border-left-color: #00a878;
}

.md-typeset .admonition.warning {
    border-left-color: var(--color-warning);
}

[data-md-color-scheme="slate"] .home-timeline-item:nth-child(2) .home-step {
    --home-step-color: #5ee0ad;
}

[data-md-color-scheme="slate"] .home-timeline-item:nth-child(3) .home-step {
    --home-step-color: #f0b45a;
}

[data-md-color-scheme="slate"] .home-timeline-item:nth-child(4) .home-step {
    --home-step-color: #b8a4ff;
}

/* ==================== 向上滚动时显示顶部主导航 ==================== */
@media screen and (min-width: 76.25em) {
    .scroll-tabs {
        position: fixed;
        top: var(--scroll-header-height, 2.4rem);
        right: 0;
        left: 0;
        z-index: 2;
        background: var(--md-primary-fg-color);
        box-shadow: none;
        opacity: 1;
        pointer-events: none;
        transform: translateY(-100%);
        transition:
            transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.24s;
        visibility: hidden;
        will-change: transform;
    }

    .md-scroll-up:not(.md-scroll-top) .md-header,
    .md-scroll-up:not(.md-scroll-top) .md-header--shadow {
        box-shadow: none;
    }

    .scroll-tabs__inner {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 2.35rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .scroll-tabs__inner::-webkit-scrollbar {
        display: none;
    }

    .scroll-tabs__link {
        display: inline-flex;
        align-items: center;
        min-height: 2.35rem;
        padding: 0 0.65rem;
        border-bottom: 2px solid transparent;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    }

    .scroll-tabs__link:hover,
    .scroll-tabs__link--active {
        color: #fff;
        border-bottom-color: currentColor;
        background: rgba(255, 255, 255, 0.07);
        text-decoration: none;
    }

    .md-scroll-up:not(.md-scroll-top) .scroll-tabs {
        pointer-events: auto;
        transform: translateY(0);
        transition:
            transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s;
        visibility: visible;
    }

    .md-scroll-up:not(.md-scroll-top) .md-top {
        top: calc(var(--scroll-header-height, 2.4rem) + 2.35rem + 0.8rem) !important;
    }
}

@media screen and (max-width: 76.19em) {
    .scroll-tabs {
        display: none;
    }
}

/* ==================== 难度标识 ==================== */
.tutorial-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1.2rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.difficulty-beginner {
    background: var(--color-success-bg-alt);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

.difficulty-intermediate {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.difficulty-advanced {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-border);
}

[data-md-color-scheme="slate"] .difficulty-beginner {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success-border);
}

[data-md-color-scheme="slate"] .difficulty-intermediate {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-border);
}

[data-md-color-scheme="slate"] .difficulty-advanced {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error-border);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--md-default-fg-color--light);
    font-size: 0.75rem;
}

.meta-item svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: currentColor;
}

/* ==================== 阅读进度条 ==================== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--md-primary-fg-color);
    z-index: 100;
    transition: width 0.1s;
}

/* ==================== 相关推荐 ==================== */
.related-tutorials {
    margin: 2rem 0;
    padding: 1.2rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.4rem;
    background: var(--md-code-bg-color);
}

.related-tutorials h4 {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    color: var(--md-default-fg-color);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.related-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.3rem;
    background: var(--md-default-bg-color);
    text-decoration: none;
    color: var(--md-typeset-a-color);
    font-size: 0.78rem;
    transition: all 0.2s;
}

.related-item:hover {
    border-color: var(--md-primary-fg-color);
    background: var(--md-code-bg-color);
    text-decoration: none;
    color: var(--md-accent-fg-color);
}

.related-item:focus-visible {
    outline: 2px solid var(--md-primary-fg-color);
    outline-offset: 2px;
}

.related-item-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.related-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== 快捷键提示 ==================== */
.kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--md-default-fg-color--lighter);
    border-radius: 0.2rem;
    background: var(--md-code-bg-color);
    color: var(--md-default-fg-color--light);
    font-family: monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    box-shadow: 0 1px 0 var(--md-default-fg-color--lighter);
}

/* ==================== 测验样式 ==================== */
.quiz-container {
    margin: 1.5rem 0;
}

.quiz-item {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.4rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.quiz-question {
    padding: 0.8rem 1rem;
    background: var(--md-code-bg-color);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quiz-question::before {
    content: "Q";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.2rem;
    background: var(--md-primary-fg-color);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.quiz-options {
    padding: 0.6rem 1rem 0.8rem;
    display: grid;
    gap: 0.4rem;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.82rem;
}

.quiz-option:hover {
    border-color: var(--md-primary-fg-color);
    background: var(--md-code-bg-color);
}

.quiz-option input[type="radio"] {
    margin: 0;
    accent-color: var(--md-primary-fg-color);
}

.quiz-option.correct {
    border-color: var(--color-success);
    background: var(--color-success-bg-alt);
}

.quiz-option.incorrect {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

[data-md-color-scheme="slate"] .quiz-option.correct {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

[data-md-color-scheme="slate"] .quiz-option.incorrect {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.quiz-explanation {
    display: none;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    background: var(--md-code-bg-color);
    font-size: 0.82rem;
    color: var(--md-default-fg-color--light);
}

.quiz-explanation.show {
    display: block;
}

.quiz-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 1rem;
    border: none;
    border-radius: 0.25rem;
    background: var(--md-primary-fg-color);
    color: white;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.quiz-submit:hover {
    opacity: 0.9;
}

.quiz-submit:focus-visible {
    outline: 2px solid var(--md-primary-fg-color);
    outline-offset: 2px;
}

.quiz-score {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.4rem;
    background: var(--md-code-bg-color);
    text-align: center;
    font-size: 0.95rem;
}

.quiz-score strong {
    color: var(--md-primary-fg-color);
    font-size: 1.2rem;
}

/* ==================== 进度追踪 ==================== */
.progress-tracker {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.4rem;
    background: var(--md-default-bg-color);
}

.progress-bar {
    height: 0.5rem;
    background: var(--md-code-bg-color);
    border-radius: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: var(--md-primary-fg-color);
    border-radius: 0.25rem;
    transition: width 0.3s;
}

.progress-text {
    font-size: 0.78rem;
    color: var(--md-default-fg-color--light);
    text-align: center;
}

/* ==================== TOC 侧边栏滚动修复 ==================== */
.md-sidebar--secondary .md-sidebar__scrollwrap {
    overflow-y: auto;
    max-height: calc(100vh - 8rem);
}

/* ==================== 学习中心 2.0 ==================== */
.learning-center-2 {
    margin: 1.5rem 0;
}

.learning-summary {
    margin-bottom: 1.5rem;
}

.summary-card {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.45rem;
    padding: 1.2rem;
    background: var(--md-default-bg-color);
}

.summary-card h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.recommendation-box {
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 0.3rem;
    background: var(--md-code-bg-color);
    border-left: 3px solid var(--md-primary-fg-color);
}

.recommendation-box strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--md-primary-fg-color);
}

.recommendation-box p {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
}

.recommendation-link {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 0.25rem;
    background: var(--md-primary-fg-color);
    color: white;
    font-size: 0.82rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

.recommendation-link:hover {
    opacity: 0.9;
    text-decoration: none;
    color: white;
}

.recommendation-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.phases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.phase-card {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.45rem;
    padding: 1rem;
    background: var(--md-default-bg-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.phase-card:hover {
    border-color: var(--md-primary-fg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.phase-card.phase-current {
    border-color: var(--md-primary-fg-color);
    border-width: 2px;
}

.phase-card.phase-completed {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

[data-md-color-scheme="slate"] .phase-card.phase-completed {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.phase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.phase-number {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--md-primary-fg-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.phase-status {
    font-size: 0.72rem;
    color: var(--md-default-fg-color--light);
}

.phase-name {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.phase-desc {
    margin: 0 0 0.8rem;
    font-size: 0.82rem;
    color: var(--md-default-fg-color--light);
    line-height: 1.6;
}

.phase-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.8rem;
}

.phase-link {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.2rem;
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--md-typeset-a-color);
    transition: all 0.2s;
}

.phase-link:hover {
    border-color: var(--md-primary-fg-color);
    background: var(--md-code-bg-color);
    text-decoration: none;
}

.phase-link:focus-visible {
    outline: 2px solid var(--md-primary-fg-color);
    outline-offset: 2px;
}

.phase-percentage {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--md-primary-fg-color);
}

.phases-details {
    margin-top: 2rem;
}

.phase-detail {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.45rem;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    background: var(--md-default-bg-color);
}

.phase-detail h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.phase-detail-desc {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: var(--md-default-fg-color--light);
}

.tutorial-checklist {
    display: grid;
    gap: 0.4rem;
}

.tutorial-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.3rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-item:hover {
    border-color: var(--md-primary-fg-color);
    background: var(--md-code-bg-color);
}

.tutorial-item.learned {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

[data-md-color-scheme="slate"] .tutorial-item.learned {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.tutorial-item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--md-primary-fg-color);
    cursor: pointer;
}

.tutorial-item a {
    color: var(--md-typeset-a-color);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s;
}

.tutorial-item a:hover {
    color: var(--md-accent-fg-color);
}

.tutorial-item.learned a {
    color: var(--md-default-fg-color--light);
}

.quiz-links {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

.quiz-links strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}

.quiz-link {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.25rem;
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--md-typeset-a-color);
    transition: all 0.2s;
}

.quiz-link:hover {
    border-color: var(--md-primary-fg-color);
    background: var(--md-code-bg-color);
    text-decoration: none;
}

.quiz-link:focus-visible {
    outline: 2px solid var(--md-primary-fg-color);
    outline-offset: 2px;
}

.learning-tip {
    margin: 1.5rem 0;
    padding: 0.8rem 1rem;
    border-radius: 0.3rem;
    background: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning);
    font-size: 0.88rem;
}

[data-md-color-scheme="slate"] .learning-tip {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
}

.learning-tip p {
    margin: 0;
}

/* ==================== 教程完成按钮 ==================== */
.tutorial-complete-btn {
    margin: 2rem 0;
    text-align: center;
}

.complete-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border: 2px solid var(--md-default-fg-color--lightest);
    border-radius: 0.4rem;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.complete-toggle:hover {
    border-color: var(--md-primary-fg-color);
    background: var(--md-code-bg-color);
}

.complete-toggle:focus-visible {
    outline: 2px solid var(--md-primary-fg-color);
    outline-offset: 2px;
}

.complete-toggle.completed {
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--color-success);
}

[data-md-color-scheme="slate"] .complete-toggle.completed {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* ==================== 测验反馈增强 ==================== */
.quiz-feedback {
    text-align: left;
}

.quiz-score-main {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.quiz-advice {
    margin: 1rem 0;
    padding: 0.8rem;
    border-radius: 0.3rem;
    background: var(--md-code-bg-color);
}

.advice-good {
    color: var(--color-success);
    margin: 0;
}

.advice-ok {
    color: var(--color-warning);
    margin: 0;
}

.advice-need-work {
    color: var(--color-error);
    margin: 0;
}

[data-md-color-scheme="slate"] .advice-good {
    color: var(--color-success);
}

[data-md-color-scheme="slate"] .advice-ok {
    color: var(--color-warning);
}

[data-md-color-scheme="slate"] .advice-need-work {
    color: var(--color-error);
}

.quiz-wrong-analysis {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.3rem;
    background: var(--md-default-bg-color);
}

.quiz-wrong-analysis h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.quiz-wrong-analysis ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.quiz-wrong-analysis li {
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}

.quiz-review-suggestion {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

.quiz-review-suggestion h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.quiz-review-suggestion ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.quiz-review-suggestion li {
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}

.quiz-review-suggestion a {
    color: var(--md-typeset-a-color);
    text-decoration: none;
}

.quiz-review-suggestion a:hover {
    color: var(--md-accent-fg-color);
    text-decoration: underline;
}

.quiz-next-step {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--color-success);
    border-radius: 0.3rem;
    background: var(--color-success-bg);
}

[data-md-color-scheme="slate"] .quiz-next-step {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.quiz-next-step h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--color-success);
}

[data-md-color-scheme="slate"] .quiz-next-step h4 {
    color: var(--color-success);
}

.quiz-next-step ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.quiz-next-step li {
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}

.quiz-next-step a {
    color: var(--color-success);
    text-decoration: none;
    font-weight: 600;
}

[data-md-color-scheme="slate"] .quiz-next-step a {
    color: var(--color-success);
}

.quiz-next-step a:hover {
    text-decoration: underline;
}

/* ==================== 教程下一步建议 ==================== */
.tutorial-next-steps {
    margin: 2rem 0;
    padding: 1.5rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.45rem;
    background: var(--md-default-bg-color);
}

.tutorial-next-steps h3 {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    color: var(--md-primary-fg-color);
}

.tutorial-next-steps ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.tutorial-next-steps li {
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
}

.tutorial-next-steps ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.tutorial-next-steps ol li {
    margin-bottom: 0.5rem;
}

.tutorial-next-steps a {
    color: var(--md-typeset-a-color);
    text-decoration: none;
    font-weight: 600;
}

.tutorial-next-steps a:hover {
    color: var(--md-accent-fg-color);
    text-decoration: underline;
}

.tutorial-next-steps input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: var(--md-primary-fg-color);
}

/* ==================== 响应式 ==================== */
@media (max-width: 76.19em) {
    .home-quick-grid,
    .home-tag-grid,
    .home-resource-grid,
    .home-stats,
    .home-notices {
        grid-template-columns: 1fr;
    }

    .home-timeline-item {
        grid-template-columns: 2.9rem minmax(0, 1fr);
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .home-step {
        width: 2.9rem;
        height: 2.9rem;
        font-size: 0.78rem;
    }

    .home-tag-card {
        min-height: auto;
    }

    .phases-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== 移动端优化 ==================== */
@media (max-width: 44.9375em) {
    /* 首页优化 */
    .home-hero {
        padding: 0.6rem 0 1rem;
        margin-bottom: 1rem;
    }

    .home-hero h1 {
        font-size: 1.8rem;
    }

    .home-hero p {
        font-size: 0.82rem;
    }

    /* 卡片优化 */
    .home-card {
        padding: 0.8rem;
    }

    .home-quick-card {
        min-height: auto;
    }

    .home-quick-card h3 {
        font-size: 0.95rem;
    }

    .home-quick-card p {
        font-size: 0.78rem;
    }

    /* 时间线优化 */
    .home-timeline-item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.6rem;
    }

    .home-step {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.72rem;
    }

    /* 测验优化 */
    .quiz-container {
        padding: 0.5rem;
    }

    .quiz-item {
        padding: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .quiz-question {
        font-size: 0.95rem;
    }

    .quiz-option {
        padding: 0.5rem 0.6rem;
        font-size: 0.88rem;
    }

    /* 学习进度优化 */
    .learning-center-2 {
        padding: 0.5rem;
    }

    .tutorial-item {
        padding: 0.4rem 0.6rem;
    }

    .tutorial-item a {
        font-size: 0.82rem;
    }

    /* 表格优化 */
    .md-typeset table {
        font-size: 0.82rem;
    }

    .md-typeset table th,
    .md-typeset table td {
        padding: 0.5rem 0.6rem;
    }

    /* 代码块优化 */
    .md-typeset pre {
        padding: 0.6rem;
        font-size: 0.78rem;
    }

    /* 导航优化 */
    .md-nav__link {
        font-size: 0.82rem;
    }

    /* 按钮优化 */
    .md-button {
        padding: 0.5rem 1rem;
        font-size: 0.82rem;
    }
}

/* ==================== 触摸优化 ==================== */
@media (hover: none) and (pointer: coarse) {
    /* 增大触摸目标 */
    .md-nav__link,
    .md-tabs__link,
    .md-header__button {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
    }

    /* 优化按钮触摸 */
    .md-button {
        min-height: 44px;
        padding: 0.6rem 1.2rem;
    }

    /* 优化卡片触摸 */
    .home-card {
        padding: 1rem;
    }

    /* 优化测验选项触摸 */
    .quiz-option {
        padding: 0.6rem 0.8rem;
    }

    /* 优化教程项触摸 */
    .tutorial-item {
        padding: 0.6rem 0.8rem;
    }
}

/* ==================== 打印样式 ==================== */
@media print {
    /* 隐藏导航 */
    .md-header,
    .md-sidebar,
    .md-footer {
        display: none !important;
    }

    /* 隐藏交互元素 */
    .tutorial-complete-btn,
    .quiz-container {
        display: none !important;
    }

    /* 优化内容区域 */
    .md-content {
        margin: 0;
        padding: 0;
    }

    /* 优化代码块 */
    .md-typeset pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

/* ==================== 移动端导航优化 ==================== */

/* 标签栏在移动端可横向滚动，防止溢出截断 */
@media (max-width: 76.1875em) {
    .md-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
    }

    .md-tabs::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari */
    }

    .md-tabs .md-tabs__list {
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .md-tabs .md-tabs__item {
        flex-shrink: 0;
    }
}

/* 手机端（< 48em）：收起标签栏，减少横向空间占用 */
@media (max-width: 48em) {
    .md-tabs {
        padding: 0 0.4rem;
        gap: 0;
    }

    .md-tabs .md-tabs__link {
        font-size: 0.65rem;
        padding: 0.5rem 0.45rem;
    }
}