.updates-site-body {
    min-width: 320px;
}

.updates-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nav-links a.is-current {
    color: var(--accent-deep);
    font-weight: 800;
}

.updates-page-header,
.updates-fix-board,
.updates-date-nav,
.updates-log-card,
.updates-footer {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px) saturate(1.08);
}

.updates-page-header {
    border-radius: 20px;
    padding: 28px 32px;
    background:
        radial-gradient(circle at 92% 0%, rgba(242, 189, 93, .28), transparent 28%),
        linear-gradient(135deg, rgba(255, 252, 246, .94), rgba(255, 247, 232, .82));
}

.updates-page-header h1 {
    margin: 0;
    color: var(--accent-deep);
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: 0;
}

.updates-page-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

.updates-fix-board {
    border-color: rgba(198, 80, 54, .26);
    border-radius: 18px;
    padding: 26px 28px;
    background:
        linear-gradient(135deg, rgba(255, 247, 239, .94), rgba(255, 252, 246, .82)),
        radial-gradient(circle at 100% 0%, rgba(198, 80, 54, .15), transparent 32%);
}

.updates-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.updates-section-title span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #9a3a22;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.updates-section-title h2 {
    margin: 0;
    color: #8a351f;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0;
}

.fix-list,
.updates-log-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fix-list {
    display: grid;
    gap: 10px;
}

.fix-list li {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 2px;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.75;
}

.fix-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .82em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #9a3a22;
}

.fix-list b {
    flex: 0 0 auto;
    color: #7f2f1d;
    font-weight: 800;
}

.fix-list span {
    min-width: 0;
}

.updates-content-shell {
    display: grid;
    grid-template-columns: minmax(254px, 282px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.updates-date-nav {
    position: sticky;
    top: 118px;
    border-radius: 18px;
    padding: 18px 16px 18px 18px;
    background:
        linear-gradient(180deg, rgba(255, 252, 246, .96), rgba(255, 247, 232, .84)),
        linear-gradient(90deg, rgba(184, 127, 25, .08), transparent 42%);
}

.updates-date-nav h2 {
    margin: 0 0 14px;
    color: var(--accent-deep);
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0;
}

.date-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 2px 0 2px;
    list-style: none;
}

.date-timeline::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(184, 127, 25, .58), rgba(30, 117, 168, .28));
}

.date-timeline li {
    min-width: 0;
}

.date-timeline a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 5px 8px 5px 32px;
    color: var(--muted);
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.date-timeline a::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 252, 246, .98);
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(184, 127, 25, .2);
}

.date-timeline a:hover,
.date-timeline a:focus-visible {
    border-color: rgba(184, 127, 25, .18);
    color: var(--accent-deep);
    background: rgba(255, 255, 255, .64);
    outline: 0;
    transform: translateX(2px);
}

.date-timeline a:hover::before,
.date-timeline a:focus-visible::before {
    background: var(--blue);
    box-shadow: 0 0 0 3px rgba(30, 117, 168, .16);
}

.date-timeline strong,
.date-timeline span {
    min-width: 0;
    white-space: nowrap;
    word-break: keep-all;
}

.date-timeline strong {
    flex: 0 0 auto;
    color: inherit;
    font-size: 14.5px;
    font-weight: 900;
    line-height: 1.2;
}

.date-timeline span {
    flex: 0 0 auto;
    border: 1px solid rgba(121, 94, 52, .12);
    border-radius: 999px;
    padding: 2px 6px;
    color: var(--faint);
    background: rgba(255, 255, 255, .55);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
}

.updates-list {
    display: grid;
    gap: 22px;
}

.updates-log-card {
    overflow: hidden;
    border-radius: 18px;
    scroll-margin-top: 118px;
}

.updates-log-card header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    border-bottom: 1px solid var(--line);
    padding: 18px 24px;
    background: rgba(255, 252, 246, .78);
}

.updates-log-card header div {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.updates-log-card header strong {
    color: var(--accent-deep);
    font-size: 19px;
    line-height: 1.3;
}

.updates-log-card header div span {
    color: var(--text);
    font-weight: 800;
    line-height: 1.45;
}

.updates-log-card header time {
    color: var(--faint);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.updates-log-card ul {
    display: grid;
    padding: 8px 24px 18px;
}

.updates-log-card li {
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border-bottom: 1px solid rgba(121, 94, 52, .12);
    padding: 13px 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.updates-log-card li:last-child {
    border-bottom: 0;
}

.updates-log-card li::before {
    content: attr(data-kind);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border: 1px solid rgba(30, 117, 168, .2);
    border-radius: 999px;
    padding: 0 8px;
    color: var(--blue);
    background: rgba(30, 117, 168, .1);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.updates-log-card li[data-kind="新增"]::before {
    border-color: rgba(22, 138, 74, .24);
    color: #168a4a;
    background: rgba(22, 138, 74, .1);
}

.updates-log-card li[data-kind="修复"]::before {
    border-color: rgba(198, 80, 54, .24);
    color: #9a3a22;
    background: rgba(198, 80, 54, .1);
}

.updates-footer {
    border-radius: 18px;
    padding: 18px;
    text-align: center;
}

.updates-footer p {
    margin: 0;
    color: var(--faint);
    font-size: 14px;
}

.updates-page-header h1,
.updates-page-header p,
.fix-list li,
.updates-log-card header strong,
.updates-log-card header div span,
.updates-log-card li {
    overflow-wrap: anywhere;
}

@media (max-width: 820px) {
    .updates-page {
        gap: 18px;
    }

    .updates-page-header,
    .updates-fix-board {
        padding: 22px 16px;
    }

    .updates-content-shell {
        display: block;
    }

    .updates-date-nav {
        position: sticky;
        top: 10px;
        z-index: 30;
        max-height: none;
        margin-bottom: 18px;
        overflow: visible;
        padding: 12px;
    }

    .updates-date-nav h2 {
        margin-bottom: 10px;
    }

    .date-timeline {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 1px 1px 8px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .date-timeline::before {
        display: none;
    }

    .date-timeline li {
        flex: 0 0 auto;
    }

    .date-timeline a {
        justify-content: center;
        min-width: 148px;
        border: 1px solid rgba(184, 127, 25, .18);
        border-radius: 999px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, .58);
        text-align: center;
        scroll-snap-align: start;
    }

    .date-timeline span {
        padding: 2px 5px;
    }

    .date-timeline a::before {
        display: none;
    }

    .date-timeline a:hover,
    .date-timeline a:focus-visible {
        transform: none;
    }

    .updates-log-card {
        scroll-margin-top: 96px;
    }

    .updates-page-header h1 {
        font-size: 28px;
    }

    .updates-log-card header {
        padding: 16px;
    }

    .updates-log-card header time {
        white-space: normal;
    }

    .updates-log-card ul {
        padding: 6px 16px 14px;
    }

    .updates-log-card li {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .fix-list li {
        display: block;
    }

    .updates-log-card li {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .updates-log-card li::before {
        width: fit-content;
    }
}