.page-changelog {
    max-width: 100%;
    min-height: 100vh;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-family: var(--font-sans);
    color: var(--color-on-background);
}

/* Title */
.changelog-title {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin: 1rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Loading spinner */
.loading {
    text-align: center;
    font-size: 1.5rem;
    padding: 4rem 0;
    color: var(--color-primary);
}

/* List */
.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual entry */
.changelog-entry {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--color-background-hover);
    transition: background-color 0.2s;
}

.changelog-entry:hover {
    background-color: var(--color-background-active);
}

/* Date & text */
.entry-date {
    font-weight: 700;
    min-width: 8rem;
    color: var(--color-primary);
}

.entry-text {
    flex: 1;
}

/* Entry type colors */
.type-1 { /* Placed */
    border-left: 4px solid #507515; /* primary green */
}
.type-2 { /* Raised */
    border-left: 4px solid #f5a623; /* orange */
}
.type-3 { /* Lowered */
    border-left: 4px solid #d0021b; /* red */
}
.type-4 { /* Swapped */
    border-left: 4px solid #4a90e2; /* blue */
}
.type-5 { /* Removed */
    border-left: 4px solid #9b9b9b; /* gray */
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
}

.page-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.page-info {
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    color: var(--color-on-background);
}