.history-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
    color: #172033;
}

.history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.history-heading h1 {
    margin: 0.15rem 0 0.35rem;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}

.history-heading p {
    margin: 0;
    color: #697489;
}

.history-eyebrow {
    color: #3157d5;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.history-filter {
    display: grid;
    grid-template-columns: minmax(230px, 1.7fr) minmax(130px, 0.7fr) minmax(120px, 0.65fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) auto;
    align-items: end;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #e0e5ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(19, 31, 55, 0.05);
}

.history-filter.usage-filter {
    grid-template-columns: minmax(340px, 2fr) minmax(155px, 0.8fr) minmax(155px, 0.8fr) auto;
}

.history-filter label {
    display: grid;
    gap: 0.35rem;
}

.history-filter label > span {
    color: #606b80;
    font-size: 0.75rem;
    font-weight: 750;
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.history-summary > div {
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e2e7ef;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f7f9fd);
}

.history-summary span {
    color: #778195;
    font-size: 0.76rem;
}

.history-summary strong {
    font-size: 1.35rem;
}

.history-card {
    overflow: hidden;
    border: 1px solid #e0e5ee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(20, 31, 55, 0.06);
}

.history-table th {
    padding: 0.8rem 0.9rem;
    border-bottom-color: #dde3ec;
    color: #687489;
    background: #f7f9fc;
    font-size: 0.73rem;
    white-space: nowrap;
}

.history-table td {
    min-width: 130px;
    padding: 0.95rem 0.9rem;
    border-bottom-color: #edf0f5;
    font-size: 0.82rem;
    vertical-align: top;
}

.history-title-cell {
    min-width: 240px !important;
}

.history-title-cell strong,
.history-title-cell span,
.user-cell strong,
.user-cell span,
.history-subtext,
.history-count-cell strong,
.history-count-cell > span {
    display: block;
}

.history-title-cell span,
.user-cell span,
.history-subtext,
.history-count-cell > span {
    margin-top: 0.25rem;
    color: #788397;
    font-size: 0.74rem;
}

.user-cell strong {
    color: #173d7a;
    font-size: 0.9rem;
}

.history-badge {
    display: inline-flex;
    margin-bottom: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    color: #77500e;
    background: #fff0cd;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}

.history-badge.active {
    color: #12613d;
    background: #dff5e8;
}

.history-badge.cancelled {
    color: #9a2b37;
    background: #fde4e7;
}

.history-meter {
    width: 150px;
    height: 6px;
    overflow: hidden;
    margin-top: 0.45rem;
    border-radius: 999px;
    background: #e8ecf3;
}

.history-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3157d5, #45a67b);
}

.reward-list {
    display: flex;
    min-width: 210px;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.reward-list span {
    padding: 0.25rem 0.42rem;
    border: 1px solid #dde4ef;
    border-radius: 7px;
    color: #4c586d;
    background: #f8f9fc;
    font-size: 0.7rem;
    white-space: nowrap;
}

.history-empty {
    min-height: 270px;
    display: grid;
    place-content: center;
    color: #778195;
}

.history-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.9rem;
    border-top: 1px solid #e8ecf2;
    color: #697489;
    font-size: 0.78rem;
}

@media (max-width: 1050px) {
    .history-filter,
    .history-filter.usage-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .history-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .history-filter,
    .history-filter.usage-filter,
    .history-summary {
        grid-template-columns: 1fr;
    }

    .history-search {
        grid-column: auto;
    }
}