.archive-header-box {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 35px 25px;
        margin-bottom: 35px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    }
    .archive-title {
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--text-dark);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .archive-subtitle {
        color: var(--text-muted);
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    /* Filter search bar */
    .filter-search-wrap {
        display: flex;
        gap: 12px;
        max-width: 700px;
        margin-bottom: 20px;
    }
    .filter-input {
        flex: 1;
        padding: 12px 20px;
        border: 1.5px solid var(--border-color);
        border-radius: 50px;
        font-size: 0.95rem;
        outline: none;
        background: var(--input-bg);
        color: var(--text-dark);
        transition: 0.2s ease;
    }
    .filter-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 12px rgba(108, 92, 231, 0.15);
    }
    .filter-input::placeholder {
        color: var(--input-placeholder, var(--text-muted));
        opacity: 0.85;
    }

    /* Rhythm Filter Pills */
    .rhythm-filter-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .rhythm-pill {
        padding: 6px 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-color);
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        transition: 0.2s ease;
    }
    .rhythm-pill:hover, .rhythm-pill.active {
        background: var(--primary);
        color: #ffffff !important;
        border-color: var(--primary);
        box-shadow: 0 4px 10px rgba(108, 92, 231, 0.25);
    }

    /* Pagination */
    .pagination-container {
        margin-top: 45px;
        display: flex;
        justify-content: center;
    }
    .pagination-container nav {
        display: flex;
        gap: 6px;
    }
    .pagination-container a, .pagination-container span {
        padding: 8px 16px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-dark);
        font-weight: 600;
        font-size: 0.9rem;
        transition: 0.2s;
    }
    .pagination-container a:hover {
        border-color: var(--primary);
        color: var(--primary);
    }
    .pagination-container .active span, .pagination-container .active a {
        background: var(--primary);
        border-color: var(--primary);
        color: #ffffff !important;
    }

    @media (max-width: 768px) {
        .archive-header-box { padding: 22px 16px; border-radius: 16px; margin-bottom: 24px; }
        .archive-title { font-size: 1.15rem; gap: 8px; line-height: 1.5; }
        .archive-title svg { width: 20px; height: 20px; }
        .archive-subtitle { font-size: 0.88rem; margin-bottom: 16px; }
        .filter-search-wrap { flex-direction: column; gap: 8px; }
        .filter-pills { gap: 6px; }
        .filter-pill { padding: 6px 14px; font-size: 0.82rem; }
    }
    @media (max-width: 480px) {
        .archive-title { font-size: 1.02rem; }
    }