/**
 * 学习端更新日志。
 * 视觉重点放在日期、标题和用户能感知到的变化，不展示版本号或技术提交信息。
 */
.study-updates-page {
    --study-update-card-bg: var(--mxj-surface-2);
    --study-update-card-border: color-mix(in srgb, var(--mxj-primary, #2563eb) 11%, var(--mxj-border-color, #e5e7eb));
    width: min(920px, 100%);
    margin: 0 auto;
}

/* 森林绿、暖阳橙和樱花粉中的日志卡片跟随主题浅色，不再使用纯白背景。 */
:root:is(
    [data-mxj-theme-id="forest-green"],
    [data-mxj-theme-id="warm-sun"],
    [data-mxj-theme-id="sakura-pink"]
) .study-updates-page {
    --study-update-card-bg: var(--mxj-education-accent-soft);
    --study-update-card-border: var(--mxj-education-accent-border);
}

.study-updates-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1.25rem, 4vw, 3rem) max(1rem, env(safe-area-inset-right)) clamp(2rem, 5vw, 4rem) max(1rem, env(safe-area-inset-left));
}

/* 公共更新日志与学习端共用标题字号及手机端收缩规则。 */

.study-updates-head {
    margin-bottom: 1.25rem;
}

.study-updates-intro {
    margin: 0.4rem 0 0;
    color: var(--mxj-text-secondary, #6b7280);
    font-size: 0.92rem;
}

.study-updates-timeline {
    position: relative;
    display: grid;
    gap: 1rem;
    padding-left: 1.65rem;
}

.study-updates-timeline::before {
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0.4rem;
    width: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mxj-primary, #2563eb) 26%, transparent);
    content: "";
}

.study-update-card {
    position: relative;
    overflow: visible;
    border: 1px solid var(--study-update-card-border);
    background: var(--study-update-card-bg);
}

.study-update-card::before {
    position: absolute;
    top: 1.45rem;
    left: -1.67rem;
    width: 0.82rem;
    height: 0.82rem;
    border: 3px solid var(--mxj-body-bg, #fff);
    border-radius: 50%;
    background: var(--mxj-primary, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mxj-primary, #2563eb) 28%, transparent);
    content: "";
}

.study-update-card .card-body {
    padding: 1.3rem 1.4rem;
}

.study-update-date {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.55rem;
    color: var(--mxj-primary, #2563eb);
    font-size: 0.8rem;
    font-weight: 600;
}

.study-update-title {
    margin: 0;
    color: var(--mxj-text-primary, #111827);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.45;
}

.study-update-summary {
    margin: 0.55rem 0 0;
    color: var(--mxj-text-secondary, #6b7280);
    line-height: 1.75;
}

.study-update-list {
    display: grid;
    gap: 0.6rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.study-update-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    color: var(--mxj-text-primary, #374151);
    font-size: 0.94rem;
    line-height: 1.7;
}

.study-update-list i {
    display: inline-grid;
    flex: 0 0 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    margin-top: 0.2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mxj-primary, #2563eb) 12%, transparent);
    color: var(--mxj-primary, #2563eb);
    font-size: max(12px, 0.6rem);
}

.study-updates-empty-icon {
    color: #22c55e;
    font-size: 2.4rem;
}

.study-updates-empty {
    border-color: var(--study-update-card-border);
    background: var(--study-update-card-bg);
}

.study-updates-empty h2 {
    font-size: 1.1rem;
}

.study-updates-empty p {
    margin-bottom: 0;
    color: var(--mxj-text-secondary, #6b7280);
}

.study-updates-pagination .pagination {
    justify-content: center;
}

@media (max-width: 575.98px) {
    .study-updates-intro {
        font-size: 0.86rem;
        line-height: 1.6;
    }

    .study-updates-timeline {
        gap: 0.85rem;
        padding-left: 1.25rem;
    }

    .study-updates-timeline::before {
        left: 0.27rem;
    }

    .study-update-card::before {
        left: -1.3rem;
        width: 0.72rem;
        height: 0.72rem;
    }

    .study-update-card .card-body {
        padding: 1.05rem;
    }

    .study-update-title {
        font-size: 1.08rem;
    }
}