.stats-page {
    width: min(1480px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 90px;
    color: #e8edf2
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px
}

.stats-header h1 {
    margin: 0;
    font-size: 2rem
}

.stats-header p {
    margin: 6px 0 0;
    color: #7f8d9b
}

.period-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px
}

.period-selector a,
.chart-button,
.type-filter {
    padding: 8px 13px;
    border: 1px solid #263441;
    border-radius: 7px;
    background: #0b1015;
    color: #8797a7;
    text-decoration: none;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s
}

.period-selector a:hover,
.chart-button:hover,
.type-filter:hover {
    border-color: #3a526b;
    color: #c6d2dd
}

.period-selector a.active,
.chart-button.active,
.type-filter.active {
    border-color: #386fae;
    background: #17365b;
    color: #d8eaff
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}

.stat-card {
    position: relative;
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 18px 14px;
    border: 1px solid #25313d;
    border-radius: 12px;
    background: #0f141a;
    text-align: center
}

.stat-icon {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 12px;
    background: #152235;
    color: #6fa8ef;
    font-size: 1.15rem
}

.stat-label {
    margin: 0 0 8px;
    color: #8392a1;
    font-size: .76rem;
    font-weight: 600
}

.stat-value,
.stat-film {
    color: #eef3f7;
    font-size: 1.35rem;
    font-weight: 800;
    text-decoration: none
}

.stat-text {
    font-size: 1.05rem
}

.stat-film:hover {
    color: #78b0f1
}

.stat-secondary {
    margin: 7px 0 0;
    color: #8998a7;
    font-size: .76rem
}

.evolution,
.previous-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: .74rem;
    font-weight: 700
}

.evolution.up {
    color: #57c785
}

.evolution.down {
    color: #e06464
}

.evolution.equal,
.previous-text {
    color: #788694
}

.previous-text i {
    font-size: .35rem
}

.record-tooltip {
    display: none;
    position: absolute;
    z-index: 10;
    top: calc(100% - 10px);
    left: 50%;
    width: 230px;
    padding: 12px;
    border: 1px solid #2b3946;
    border-radius: 9px;
    background: #111820;
    box-shadow: 0 15px 35px #0008;
    transform: translateX(-50%);
    gap: 6px
}

.record-card:hover .record-tooltip,
.record-card:focus .record-tooltip,
.record-card.open .record-tooltip {
    display: flex;
    flex-direction: column
}

.record-tooltip a {
    color: #b8c8d7;
    text-decoration: none;
    font-size: .75rem
}

.compare-section,
.heatmap-section,
.analysis-section,
.podiums-section,
.movies-section {
    margin-top: 20px;
    padding: 22px;
    border: 1px solid #253341;
    border-radius: 13px;
    background: #0f141a
}

.section-heading,
.movies-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px
}

.section-heading h2,
.movies-heading h2,
.podium-block h2 {
    margin: 0;
    font-size: 1.1rem
}

.section-kicker {
    display: block;
    margin-bottom: 5px;
    color: #6fa8ef;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 2fr) 1fr;
    align-items: center;
    gap: 20px
}

.compare-card {
    text-align: center
}

.compare-card i {
    color: #6fa8ef;
    font-size: 1.4rem
}

.compare-card h3 {
    margin: 8px 0;
    color: #9aa8b6;
    font-size: .8rem
}

.compare-card strong {
    display: block;
    font-size: 2rem
}

.compare-card span,
.compare-card small {
    display: block;
    margin-top: 5px;
    color: #8393a2
}

.compare-bar {
    display: flex;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #25384d
}

.compare-bar-cinema {
    height: 100%;
    background: #6fa8ef
}

.heatmap-year {
    margin-top: 18px
}

.heatmap-year>strong {
    display: block;
    margin-bottom: 8px
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(53, 12px);
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 12px);
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 5px
}

.heatmap-day {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #151c23
}

.heatmap-day.empty {
    visibility: hidden
}

.heatmap-day[data-level="1"],
.heatmap-legend i[data-level="1"] {
    background: #17365b
}

.heatmap-day[data-level="2"],
.heatmap-legend i[data-level="2"] {
    background: #245b94
}

.heatmap-day[data-level="3"],
.heatmap-legend i[data-level="3"] {
    background: #397fc7
}

.heatmap-day[data-level="4"],
.heatmap-legend i[data-level="4"] {
    background: #6fa8ef
}

.heatmap-legend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    color: #728190;
    font-size: .7rem
}

.heatmap-legend i {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: #151c23
}

.chart-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 420px
}

.podiums-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.podium-block {
    min-width: 0
}

.mini-podium {
    display: flex;
    min-height: 210px;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    margin-top: 16px
}

.podium-item {
    display: flex;
    width: 33.333%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 12px 7px;
    border: 1px solid #293746;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: #111820;
    text-align: center
}

.podium-item.rank-1 {
    min-height: 180px;
    border-color: #416a99;
    background: #142238
}

.podium-item.rank-2 {
    min-height: 145px
}

.podium-item.rank-3 {
    min-height: 120px
}

.podium-rank {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 50%;
    background: #1d2a37;
    color: #82b6f5;
    font-weight: 800
}

.podium-item strong {
    max-width: 100%;
    overflow: hidden;
    color: #eef3f7;
    font-size: .8rem;
    text-overflow: ellipsis
}

.podium-item>span:last-child {
    margin-top: 6px;
    color: #8fa0b0;
    font-size: .68rem
}

.movie-count {
    color: #91a5b8;
    font-size: .85rem
}

.movie-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px
}

.movie-search {
    position: relative;
    width: min(420px, 100%)
}

.movie-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #66798b;
    transform: translateY(-50%)
}

.movie-search input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1px solid #283643;
    border-radius: 8px;
    outline: none;
    background: #0a0f14;
    color: #e5ebf1;
    font: inherit
}

.movie-search input:focus {
    border-color: #3d78ba
}

.type-filters,
.movie-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.movie-legend {
    color: #8595a5;
    font-size: .75rem
}

.movie-legend span {
    display: flex;
    align-items: center;
    gap: 6px
}

.legend-color {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 3px
}

.legend-color.animation {
    background: #703e59
}

.legend-color.marvel {
    background: #703b3b
}

.movies-table-wrapper {
    overflow-x: auto;
    border: 1px solid #202c37;
    border-radius: 9px
}

.movies-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse
}

.movies-table th {
    padding: 12px 14px;
    border-bottom: 1px solid #2a3743;
    background: #151d25;
    color: #a8b4c0;
    text-align: left;
    font-size: .75rem
}

.movies-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #1d2730;
    color: #bdc7d0;
    font-size: .8rem
}

.movies-table tbody tr {
    background: #0c1116
}

.movies-table tbody tr:hover {
    background: #121a22
}

.movies-table tbody tr.animation-row {
    background: #a53f75
}

.movies-table tbody tr.marvel-row {
    background: #b02727
}

.movies-table a {
    color: #e6ebef;
    text-decoration: none;
    font-weight: 600
}

.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #18222c;
    color: #9fb1c2;
    font-size: .7rem
}

.type-badge.cinema {
    background: #172b42;
    color: #8bbcf5
}

.no-movies {
    display: none;
    padding: 35px 20px;
    color: #768696;
    text-align: center
}

@media(max-width:1100px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .podiums-section {
        grid-template-columns: 1fr
    }
    .podium-block {
        max-width: 650px;
        width: 100%;
        margin: auto
    }
    .movie-tools {
        align-items: flex-start;
        flex-direction: column
    }
    .movie-search {
        width: 100%
    }
}

@media(max-width:760px) {
    .stats-page {
        width: min(100% - 20px, 1480px);
        padding-top: 22px
    }
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }
    .stat-card {
        min-height: 175px
    }
    .compare-grid {
        grid-template-columns: 1fr
    }
    .compare-bar {
        order: 2
    }
    .compare-card:last-child {
        order: 3
    }
    .chart-wrapper {
        height: 330px
    }
    .compare-section,
    .heatmap-section,
    .analysis-section,
    .podiums-section,
    .movies-section {
        padding: 16px
    }
}

@media(max-width:440px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr
    }
    .stat-card {
        min-height: 165px;
        padding: 14px 8px
    }
    .stat-value,
    .stat-film {
        font-size: 1.05rem
    }
    .stat-text {
        font-size: .88rem
    }
    .chart-selector {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
    .chart-button {
        width: 100%
    }
}

.top-films-section {
    margin-top: 32px;
}

.top-films-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.top-film-item {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px;
    overflow: hidden;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.top-film-item:hover {
    background: #1c2128;
    border-color: #58a6ff;
    transform: translateY(-2px);
}

.top-film-rank {
    position: absolute;
    top: 7px;
    right: 12px;
    color: rgba(139, 148, 158, 0.18);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
}

.top-film-item:first-child {
    border-color: rgba(88, 166, 255, 0.55);
}

.top-film-item:first-child .top-film-rank {
    color: rgba(88, 166, 255, 0.2);
}

.top-film-item strong {
    position: relative;
    z-index: 1;
    min-height: 42px;
    padding-right: 30px;
    overflow: hidden;
    color: #f0f6fc;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.top-film-item>span:last-child {
    position: relative;
    z-index: 1;
    color: #8b949e;
    font-size: 12px;
}

.top-film-item:hover strong {
    color: #58a6ff;
}

@media (max-width: 1000px) {
    .top-films-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .top-films-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .top-film-item {
        min-height: 64px;
        justify-content: center;
        padding: 13px 55px 13px 16px;
    }
    .top-film-item strong {
        min-height: 0;
        padding-right: 0;
        font-size: 14px;
        -webkit-line-clamp: 1;
    }
    .top-film-rank {
        top: 50%;
        right: 15px;
        font-size: 38px;
        transform: translateY(-50%);
    }
}