body.player-profile-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
}

.profile-background-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.profile-background-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(90deg, #26252a, #282828, #322c22);
}

.profile-background-surface img,
.profile-background-surface video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-background-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--profile-bg-dim, 0);
    pointer-events: none;
}

.profile-background-toggle {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 20;
    padding: 8px 12px;
    background: #252525;
    color: #fff;
    border: 1px solid #666;
    border-radius: 6px;
    cursor: pointer;
}

.profile-background-form {
    display: grid;
    gap: 12px;
}

.profile-background-form [hidden],
#profile-editor-background-section[hidden] {
    display: none !important;
}

.profile-background-form input:not([type=checkbox]):not([type=color]),
.profile-background-form select {
    width: 100%;
    box-sizing: border-box;
}

.profile-background-form input,
.profile-background-form select,
.profile-bg-buttons button {
    padding: 9px;
    border: 1px solid #666;
    border-radius: 5px;
    background: #2a2a2a;
    color: #fff;
}

.profile-background-form input[type=color] {
    height: 42px;
    width: 100%;
    padding: 3px;
}

.profile-background-form label {
    display: block;
    margin: 6px 0;
}

.profile-bg-colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-bg-preview {
    position: relative;
    height: 200px;
    overflow: hidden;
    border: 1px solid #555;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.profile-bg-preview>span {
    position: relative;
    z-index: 1;
    padding: 12px;
    background: #1e1e1ecc;
    border-radius: 6px;
}

.profile-bg-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-bg-buttons button {
    cursor: pointer;
}

#profile-bg-save {
    background: #e5a93d;
    color: #161616;
}

.profile-bg-buttons button:disabled {
    opacity: .5;
    cursor: wait;
}

/* Замена кнопки «Сохранить фон» на витрине: там сохранять некуда, и кнопка
   рядом с работающими ползунками вводила бы в заблуждение. */
.bg-no-save {
    align-self: center;
    color: #e5a93d;
    font-size: .8rem;
}

.profile-gradient-paint {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    animation-duration: var(--gradient-duration, 15s);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.profile-gradient-shift {
    background-size: 220% 220%;
    animation-name: profile-gradient-shift;
}

.profile-gradient-rotate {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: profile-gradient-rotate;
    animation-timing-function: linear;
    will-change: transform;
}

.profile-gradient-pulse {
    background-position: center;
    animation-name: profile-gradient-pulse;
}

.profile-gradient-wave {
    background-size: 300% 300%;
    animation-name: profile-gradient-wave;
}

.profile-gradient-aurora {
    background-size: 180% 180%, 160% 200%, 100% 100%;
    animation-name: profile-gradient-aurora;
}

.profile-gradient-orbit {
    background-size: 100% 140%, 120% 100%, 100% 100%;
    animation-name: profile-gradient-orbit;
}

@keyframes profile-gradient-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes profile-gradient-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes profile-gradient-pulse {

    0%,
    100% {
        background-size: 100% 100%;
    }

    50% {
        background-size: 180% 180%;
    }
}

@keyframes profile-gradient-wave {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }
}

@keyframes profile-gradient-aurora {

    0%,
    100% {
        background-position: 0% 20%, 100% 80%, center;
    }

    50% {
        background-position: 100% 70%, 0% 30%, center;
    }
}

@keyframes profile-gradient-orbit {

    0%,
    100% {
        background-position: -40% 0%, 140% 100%, center;
    }

    25% {
        background-position: 50% -40%, 50% 140%, center;
    }

    50% {
        background-position: 140% 100%, -40% 0%, center;
    }

    75% {
        background-position: 50% 140%, 50% -40%, center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-gradient-paint {
        animation: none !important;
    }
}

/* Background editor */
#profile-editor-background-section {
    --bg-accent: #e5a93d;
    --bg-line: #ffffff12;
}

.bg-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
}

.bg-eyebrow {
    color: #b1a18a;
    font-size: 10px;
    letter-spacing: .16em;
}

.bg-editor-heading h3 {
    margin: 5px 0 0;
    font-size: 21px;
    color: #f5f1e9;
}

.bg-state {
    flex-shrink: 0;
    border: 1px solid #ffffff14;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    color: #9aab9d;
}

.bg-state.is-dirty {
    color: #edc580;
    background: #e5a93d12;
    border-color: #e5a93d38;
}

.bg-kind-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
}

.bg-kind-card {
    display: grid;
    gap: 5px;
    justify-items: center;
    border: 1px solid #ffffff14;
    border-radius: 10px;
    padding: 12px 4px;
    background: #242424;
    color: #b6b5b2;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.bg-kind-card>span {
    font-size: 23px;
    line-height: 1.2;
}

.bg-kind-card[aria-pressed=true] {
    color: #f3ce86;
    border-color: #e5a93d99;
    background: linear-gradient(145deg, #e5a93d20, #e5a93d08);
    box-shadow: inset 0 0 0 1px #e5a93d15;
}

.bg-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.bg-preview-column {
    position: sticky;
    top: 0;
}

.bg-settings-column {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--bg-line);
    border-radius: 12px;
    background: #17171760;
}

.bg-panel-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #b6b1a6;
    font-size: 9px;
    letter-spacing: .12em;
    margin: 0 0 9px;
}

.bg-panel-label span {
    color: #81817e;
    letter-spacing: 0;
}

#profile-bg-preview {
    height: 260px;
    border-radius: 12px;
    border-color: #ffffff1c;
}

.bg-profile-mock {
    position: relative;
    z-index: 1;
    width: 85%;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #fff;
}

.bg-mock-avatar {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: #1b1b1bdd;
    border: 1px solid #ffffff40;
    border-radius: 14px;
    color: #e5a93d;
    font-weight: bold;
}

.bg-profile-mock>strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    text-shadow: 0 1px 6px #000;
}

.bg-profile-mock>span {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    background: #171717aa;
}

.bg-mock-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 5px;
    border: 1px solid #ffffff20;
    border-radius: 8px;
    background: #171717d9;
    font-size: 10px;
}

.bg-dim-control {
    padding: 14px 0;
}

#profile-editor-background-section label {
    color: #ccc8c0;
    font-size: 12px;
    margin: 10px 0 6px;
}

#profile-editor-background-section output {
    float: right;
    font-variant-numeric: tabular-nums;
    color: #e5c184;
}

#profile-editor-background-section small,
#profile-editor-background-section p {
    color: #92928c;
    font-size: 11px;
    line-height: 1.6;
}

#profile-editor-background-section input[type=range] {
    accent-color: #e5a93d;
    padding: 0;
    cursor: pointer;
}

#profile-editor-background-section input[type=checkbox] {
    accent-color: #e5a93d;
}

#profile-editor-background-section input:not([type=range]):not([type=color]):not([type=checkbox]),
#profile-editor-background-section select {
    border-color: #ffffff20;
    background: #1e1e1e;
    border-radius: 7px;
    font-size: 12px;
}

#profile-editor-background-section :is(button, input, select):focus-visible {
    outline: 2px solid #e5a93d;
    outline-offset: 3px;
}

.bg-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 208px;
    overflow-y: auto;
    margin-top: 10px;
    padding: 2px;
}

.bg-preset-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid #ffffff12;
    border-radius: 7px;
    background: #292929;
    color: #bcb9b1;
    text-align: left;
    cursor: pointer;
}

.bg-preset-card span:first-child {
    font-size: 20px;
    color: #b39a72;
}

.bg-preset-card span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
}

.bg-preset-card[aria-pressed=true] {
    border-color: #e5a93d;
    color: #f4d5a0;
    background: #e5a93d14;
}

.bg-upload-box {
    margin-top: 15px;
    padding: 12px;
    border: 1px dashed #ffffff2a;
    border-radius: 9px;
}

.bg-upload-box input[type=file]::file-selector-button {
    background: #39352e;
    border: 0;
    border-radius: 4px;
    color: #e9d3ab;
    padding: 6px;
    margin-right: 7px;
    cursor: pointer;
}

.bg-upload-box button {
    background: none;
    border: 0;
    color: #efc582;
    cursor: pointer;
    margin-top: 8px;
}

.bg-palette-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.bg-palette {
    padding: 0;
    border: 0;
    background: none;
    color: #b2aea5;
    font-size: 10px;
    cursor: pointer;
    text-align: left;
}

.bg-palette>span {
    display: block;
    height: 30px;
    border-radius: 7px;
    border: 1px solid #ffffff18;
    margin-bottom: 5px;
}

.bg-default-note {
    padding: 28px 5px;
    text-align: center;
}

.bg-default-note>span {
    font-size: 40px;
    color: #b49c72;
}

.bg-default-note h4 {
    color: #e5ded0;
    margin: 12px 0;
    font-size: 15px;
}

#profile-bg-message:empty {
    display: none;
}

#profile-editor-background-section .profile-bg-buttons {
    position: sticky;
    bottom: -1px;
    padding: 14px 0 3px;
    margin-top: 0;
    background: #1e1e1ef5;
    border-top: 1px solid var(--bg-line);
    z-index: 3;
    gap: 8px;
}

#profile-bg-save {
    order: 3;
    margin-left: auto;
    font-weight: 600;
}

#profile-bg-reset {
    order: 1;
    background: none;
    border-color: transparent;
    color: #aaa296;
}

#profile-bg-undo {
    order: 2;
}

.bg-kind-card:hover,
.bg-preset-card:hover {
    border-color: #e5a93d66;
}

.bg-glass-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    margin: 0 0 14px !important;
    border: 1px solid #ffffff18;
    border-radius: 9px;
    background: #ffffff08;
    cursor: pointer;
}

.bg-glass-toggle input {
    margin-top: 3px;
}

.bg-glass-toggle span {
    display: grid;
    gap: 3px;
}

.bg-glass-toggle strong {
    color: #eee7da;
    font-size: 12px;
}

.bg-glass-toggle small {
    color: #95928b;
    font-size: 10px !important;
}

.bg-glass-slider {
    margin: 0 0 14px;
}

/* Панели, которые получают стекло.
 *
 * Про `.custom-stats-wrapper > section`. Раньше здесь стояло
 * `.custom-stats-wrapper > section:not([hidden])`, и селектор попадал
 * ровно на общий родитель, а не на панели: внутри
 * #player-profile-container.custom-stats-wrapper лежит шесть <section>,
 * и все шесть - это .profile-category-panel, то есть обёртки вкладок.
 * Ни одной листовой панели этот селектор никогда не выбирал. Правило
 * делало ровно обратное тому, что обещает комментарий ниже: красило
 * обёртку, а панели оставляло без стекла.
 *
 * Перебить это одной прозрачностью нельзя. Сравнение шло на
 * специфичность, потому что !important есть у обоих правил:
 *   .custom-stats-wrapper > section:not([hidden])   -> (0,3,2)
 *   .profile-category-panel в правиле прозрачности  -> (0,2,1)
 * Побеждал стекло, и background-image с !important перекрывал
 * background: transparent !important. Поэтому здесь честное исключение,
 * а не попытка перебить приоритет.
 *
 * `.side-container` добавлен рядом с `.panel-dark`: сам он классом
 * panel-dark не помечен, но это ровно такой же блок, как панель
 * статистики, - та же подложка #2e2e2e из шаблона, те же 15px отступа.
 * Без него он оставался плотной заливкой, а стоял вплотную к панели
 * статистики с тем же цветом, и две панели вместе читались как один
 * большой тёмный блок.
 *
 * background-color: transparent обязателен и не избыточен: у
 * .stats-grid-container и .side-container свой background-color в
 * шаблоне есть (#2e2e2e), и правило стекла, не объявляя цвет,
 * оставляло им право голоса. Под градиентом лежал сплошной тёмный
 * прямоугольник, и backdrop-filter blur ему было нечего размывать.
 */
body.profile-liquid-glass .panel-dark:not([hidden]),
body.profile-liquid-glass .custom-stats-wrapper>section:not([hidden]):not(.profile-category-panel),
body.profile-liquid-glass .side-container:not([hidden]),
body.profile-liquid-glass .battlepass-panel:not([hidden]),
body.profile-liquid-glass .battlepass-track-panel:not([hidden]) {
    position: relative;
    overflow: hidden;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .18) !important;
    -webkit-backdrop-filter: saturate(1.2) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.2) blur(var(--profile-glass-blur, 12px));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .28), inset 0 0 18px rgba(255, 255, 255, .035), 0 10px 28px rgba(0, 0, 0, .16);
}

/* Шапка профиля - исключение из overflow: hidden.
 *
 * Общее правило панелей выше обрезает всё, что выходит за их край, а шапка
 * как раз единственная панель, где выход за край - часть рисунка:
 *   - слой украшения лежит в .profile-avatar-wrapper, у которого переполнение
 *     намеренно не задано (см. комментарий в шаблоне про ушки зайца);
 *   - украшение сверху, корона, уходит ещё и на 30px над панель: DECORATION_LAYOUT
 *     считает --dec-pad как «подъём минус 30px выхода», то есть эти 30px
 *     должны рисоваться поверх фона страницы.
 *
 * Без этого исключения стекло включало обрезание, которого без стекла не
 * было: корона и ушки зайца срезались по краю панели ровно по линии обрезки.
 *
 * На саму стеклянную подложку это не влияет: backdrop-filter и в этом случае
 * берёт подложку по границе рамки элемента, то есть стекло остаётся в панели,
 * а за её пределами рисунок выходит на фон страницы.
 */
body.profile-liquid-glass .panel-dark.profile-header:not([hidden]) {
    overflow: visible;
}

body.profile-liquid-glass [hidden] {
    display: none !important;
    visibility: hidden !important;
}

/* Дети панелей: свой слой размытия в 2.5 раза сильнее панели.
 *
 * Селектор общий для обеих панелей, потому что класс panel-dark есть у
 * обеих: <div class="panel-dark stats-grid-container …"> и
 * <div class="panel-dark side-container …">. Плюс z-index из прежнего
 * правила - без него содержимое тонет под полупрозрачной подложкой.
 *
 * Учтено, что .stat-cell лежит уровнем глубже и имеет собственное
 * правило с тем же множителем 2.5: вложенного размытия в два слоя
 * здесь не возникает, потому что это разные элементы, а не два
 * backdrop-filter на одном.
 */
body.profile-liquid-glass .panel-dark:not([hidden])>* {
    position: relative;
    z-index: 1;
    -webkit-backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
}

/* Полоса прокрутки трека баттлпасса и колонка подписей слева.
 *
 * Стекла получала только сама .battlepass-track-panel: она есть в списке
 * панелей выше. Всё, что внутри неё, рисовало собственную непрозрачную
 * подложку и закрывало стекло целиком, поэтому полоса и подписи оставались
 * плотными тёмными плашками:
 *     .battlepass-track-inner     background: var(--bp-background)   (#262423)
 *     .battlepass-track-labels   background: var(--bp-background)
 *     бегунок и его дорожка      те же цвета
 *
 * Общее правило «Дети панелей» их не накрывает: оно завязано на
 * .panel-dark, а .battlepass-track-panel панелью не помечен. Добавлять
 * ему класс panel-dark нельзя: специфичность стала бы (0,3,2) против
 * (0,2,1) у правила прозрачности, и стекло снова победило бы - ровно тот
 * случай, что разобран выше на .custom-stats-wrapper. Поэтому здесь
 * честное исключение для её детей.
 *
 * Подложку снимают только у этих блоков. Карточки наград и пустые слоты
 * свои цвета сохраняют: без них уровни перестали бы читаться, а это уже
 * не стекло, а дырки в треке.
 */
body.profile-liquid-glass .battlepass-track-panel:not([hidden])>* {
    position: relative;
    z-index: 1;
}

body.profile-liquid-glass .battlepass-track-scroll,
body.profile-liquid-glass .battlepass-track-inner {
    background-color: transparent !important;
}

/* Колонка подписей - sticky: при прокрутке под ней проезжают карточки
 * уровней. Совсем прозрачной она быть не может, подписи перестали бы
 * читаться на проезжающем фоне, поэтому у неё своя тонкая стеклянная
 * подложка вместо плотной.
 */
body.profile-liquid-glass .battlepass-track-labels {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(8, 12, 20, .06)) !important;
    -webkit-backdrop-filter: saturate(1.1) blur(8px);
    backdrop-filter: saturate(1.1) blur(8px);
}

/* Бегунок и его дорожка держали --bp-background, то есть непрозрачную
 * полосу под самым треком. Дорожка становится прозрачной, у бегунка
 * рамка берёт цвет подложки, поэтому с прозрачной дорожкой он тоже
 * должен быть без неё.
 */
body.profile-liquid-glass .battlepass-track-scroll {
    scrollbar-color: var(--bp-border) transparent;
}

body.profile-liquid-glass .battlepass-track-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

body.profile-liquid-glass .battlepass-track-scroll::-webkit-scrollbar-thumb {
    border-color: transparent;
    background: var(--bp-border);
}

/* Боковые колонки страницы профиля.
 *
 * .sidebar-left и .sidebar-right живут в base.html, то есть есть на
 * каждой странице. Собственный фон у них непрозрачный:
 *     background-color: #1c1c1c;
 *     padding: 1rem;
 *     border-radius: 4px;
 * Стекло им нужно только здесь, на странице профиля, и это выполняется
 * само собой: этот CSS подключён лишь в player_profile_csr.html, а
 * класс profile-liquid-glass ставится лишь там же. Дополнительно
 * страховка от селекторов вида body .sidebar-left в style.css: правило
 * ниже по файлу, значит при равной специфичности выигрывает оно.
 *
 * :not(.modal-open) - уважение к существующему поведению. В style.css
 * есть body.modal-open .sidebar-left с background-color: transparent:
 * при открытой модалке колонки намеренно становятся прозрачными, чтобы
 * не спорить с оверлеем. Без этого условия стекло перебило бы его.
 *
 * Оформление повторяет боевые панели профиля: прозрачный фон, размытие
 * по общей переменной, inset 0 0 и внешняя тень. Без рамки и без
 * градиента - в том же духе, в каком они убраны у панелей.
 */

body.profile-liquid-glass:not(.modal-open) .sidebar-left,
body.profile-liquid-glass:not(.modal-open) .sidebar-right {
    background-color: transparent !important;
    -webkit-backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .18), 0 10px 28px rgba(0, 0, 0, .16);
}

/* Карточки в колонках: операция слева, игрок недели справа.
 *
 * Обе лежат внутри колонок, но стеклом не были: у них собственные
 * непрозрачные заливки.
 *     .operation-card  background: linear-gradient(135deg, rgba(25,25,25,.95), …)
 *     .potw-card       background: linear-gradient(145deg, #2a2a2a, #1e1e1e)
 *
 * Скругления свои у каждой оставлены как были, они заданы в style.css и к
 * стеклу отношения не имеют.
 *
 * Рамка border: 1px solid #e5a93d у .potw-card намеренно сохранена: это
 * акцент сайта, тот же золотой, что у активной кнопки, а не след стекла.
 * Убирать её - значит менять оформление карточки сверх задачи.
 *
 * Условие :not(.modal-open) то же, что у самих колонок: при открытой
 * модалке содержимое сайдбаров намеренно уходит в фон.
 */

body.profile-liquid-glass:not(.modal-open) .operation-card,
body.profile-liquid-glass:not(.modal-open) .potw-card {
    background: transparent !important;
    -webkit-backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .18), 0 10px 28px rgba(0, 0, 0, .16);
}

/* Плитки с цифрами внутри карточки игрока недели.
 *
 * Карточка стала стеклянной, а её содержимое - нет: у .potw-stat-item своя
 * непрозрачная заливка,    background: #252525
 * которая закрывала собой и размытие, и подложку карточки. Плиток четыре,
 * и в них как раз цифры: elo, kills, deaths и подобное - то есть ровно то,
 * ради чего карточка и открывается.
 *
 * Плотность .22 - та же, что у блоков боковой панели, и по той же формуле
 * от --profile-glass-opacity, поэтому ползунок прозрачности управляет и
 * ими: 12% белого при значении 45, 20% при 10, 3% при 85.
 *
 * Размытие 2.5x - множитель детей панелей и плиток, тот же, что у
 * .stat-cell: карточка это панель и размывается в 1x, её плитки сильнее.
 *
 * Фон задан сокращением background, а не background-color, потому что в
 * style.css это тоже сокращение: так заодно сбрасывается background-image,
 * если он когда-нибудь появится.
 *
 * Рамки у плиток нет ни в разметке, ни в style.css, так что добавляется
 * только inset 0 0 - как у всех прочих стеклянных блоков в этом файле.
 * Скругление 4px задано в style.css и остаётся.
 *
 * Условие :not(.modal-open) то же, что у самой карточки.
 */

body.profile-liquid-glass:not(.modal-open) .potw-stat-item {
    background: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .22)) !important;
    -webkit-backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .16);
}

/* Карточки живых матчей в левом сайдбаре.
 *
 * Последние непрозрачные блоки в колонке. У .match-item своя заливка,
 *     background-color: #252525;
 * та же, что была у плиток игрока недели, - из-за неё карточка матча
 * оставалась плотным тёмным прямоугольником, когда колонка вокруг неё
 * стала стеклянной.
 *
 * Насыщенность .22 и формула от --profile-glass-opacity прежние: 12%
 * белого при ползунке 45, 20% при 10, 3% при 85. Размытие 2.5x, как у
 * прочих плиток.
 *
 * Отдельно про :hover - без него наведение просто пропало бы. В style.css
 * есть .match-item:hover с background-color: #3a3a3a, но без !important,
 * а базовое правило ниже с !important, поэтому выигрывало бы оно всегда.
 * Наведение задано здесь же, с !important и с тем же расчётом, только с
 * коэффициентом .34 вместо .22 - чуть плотнее, как и была задумана
 * подсветка #3a3a3a.
 *
 * Свойства border не объявляются намеренно: у .match-item есть
 * border-left: 4px solid transparent, а у .match-item.live он становится
 * золотым - это и есть полоска LIVE, и снимать её нельзя.
 *
 * transition: background-color 0.3s ease из style.css продолжает работать:
 * правило задаёт background, то есть меняет именно background-color, к
 * которому переход и привязан.
 *
 * Селектор без :not(.live), потому что .match-item.live - тот же самый
 * элемент с добавленным классом: разделять их незачем, LIVE-полоска
 * задаётся border-цветом, а не фоном.
 *
 * Блок собирается двумя способами - серверной разметкой в base.html и
 * через innerHTML в static/js/common.js, - но класс в обоих случаях
 * один и тот же, match-item live, так что правило ловит оба.
 */

body.profile-liquid-glass:not(.modal-open) .match-item {
    background: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .22)) !important;
    -webkit-backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .16);
}

body.profile-liquid-glass:not(.modal-open) .match-item:hover {
    background: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .34)) !important;
}

/* Мелкие остатки вне стекла.
 *
 * Четыре разные вещи, объединённые одним признаком: к моменту, когда всё
 * вокруг стало стеклянным, они остались тёмными или прозрачными и выглядели
 * вклеенными.
 */

/* Рамка карточки игрока недели.
 *
 * Золотая, как и прочие акцентные рамки на сайте, но в стеклянной карточке
 * она читалась как чужеродная рамка, а не как блик стекла. Остальные
 * стеклянные панели давно переведены на общий блик rgba(255,255,255,.18),
 * и карточка игрока недели была последним исключением.
 *
 * Толщина 1px и скругление 8px заданы в style.css и не меняются: правило
 * объявляет только цвет, поэтому геометрия не затронута.
 */
body.profile-liquid-glass:not(.modal-open) .potw-card {
    border-color: rgba(255, 255, 255, .18) !important;
}

/* Разделитель левой колонки.
 *
 * Это 4px полоса-градиент, а не блок, поэтому стекло к ней неприменимо и
 * речь только о цвете: тёмная линия #2f2f2f на стекле выглядела
 * вклеенной, теперь это тот же блик, что у панелей.
 *
 * Меняется исключительно background-image, а не весь background. В
 * style.css полоса задана сокращением вместе с геометрией:
 *     background: linear-gradient(...) center / 100% 4px no-repeat;
 * и сокращение целиком снесло бы center, размер 100% 4px и no-repeat -
 * полоса растянулась бы на всю высоту блока в 24px вместо 4px по центру.
 * Отдельно объявленный background-image сохраняет и позицию, и размер,
 * и повтор.
 *
 * Условие :not(.modal-open) то же, что у самой колонки.
 */
body.profile-liquid-glass:not(.modal-open) .sidebar-divider {
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, .18) 12%, rgba(255, 255, 255, .18) 88%, transparent) !important;
}

/* Разделители футера: верхняя линия самого футера и верхняя линия
 * .footer-bottom. Обе тёмные, #2a2a2a, обе переведены на общий блик.
 * Меняется только цвет, толщина 1px не трогается. */
body.profile-liquid-glass:not(.modal-open) .footer,
body.profile-liquid-glass:not(.modal-open) .footer-bottom {
    border-top-color: rgba(255, 255, 255, .18) !important;
}

/* Разделитель внутри секции «Информация» футера.
 *
 * Тот же #2a2a2a, что у линий самого футера, но про него забыли: у <hr>
 * нет класса, а цвет задан устаревшим атрибутом color, поэтому он не попал
 * ни в одно правило выше и оставался тёмным при включённом стекле.
 *
 * Меняется и border-top-color, и color: атрибут color у <hr> —
 * презентационная подсказка, которая влияет на линию в браузере, и одной
 * border-top-color может не хватить.
 */
body.profile-liquid-glass:not(.modal-open) .footer hr {
    border-top-color: rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .18) !important;
}

/* Кнопка «Полный рейтинг» в правой колонке.
 *
 * У неё и раньше был background-color: transparent, но на стеклянной
 * колонке этого мало: прозрачная кнопка с рамкой #444 и текстом #b0b0b0
 * по размытому фону почти не читалась.
 *
 * Плотность .44 - ровно вдвое больше .22 у плиток, по требованию сделать
 * её вдвое менее прозрачной. При ползунке прозрачности 45 это 24% белого,
 * при 10 - 40%, при 85 - 7%.
 *
 * Как и с карточками матчей, :hover задан здесь же: в style.css есть
 * .full-ranking-btn:hover с background-color: #2a2a2a и без !important, а
 * базовое правило ниже несёт !important, и наведение пропало бы совсем.
 * Шаг вверх тот же, что у карточек матчей, +.12.
 *
 * Рамка #444 не тронута: про неё в задании речи не было.
 */
body.profile-liquid-glass:not(.modal-open) .full-ranking-btn {
    background: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .44)) !important;
    -webkit-backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .16);
}

body.profile-liquid-glass:not(.modal-open) .full-ranking-btn:hover {
    background: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .56)) !important;
}

/* Хедер и футер страницы профиля.
 *
 * Оба живут в base.html, то есть есть на каждой странице, и у каждого
 * своя непрозрачная заливка:
 *     .navbar  background-color: #171717;  position: fixed;  z-index: 2000;
 *               border-bottom: 1px solid #151515;
 *     .footer  background-color: #1d1d1d;  margin-top: auto;
 *               border-top: 1px solid #2a2a2a;
 *
 * Рамки намеренно сохранены. У навбара это нижняя линия, отделяющая шапку
 * от про scrollящего контента, а у футера - верхняя, отделяющая его от
 * страницы; на прозрачном фоне без них содержимое подходит вплотную к краю.
 * Это границы оформления, а не след стекла. Скруглений у обоих нет.
 *
 * :not(.modal-open) - тот же guard, что у колонок. Оверлей модалки имеет
 * z-index 3000 при 2000 у навбара, то есть и так перекрывает шапку и сам
 * размывает её своим backdrop-filter. Условие снимает лишний вложенный
 * backdrop-filter в момент, когда оверлей всё равно поверх: два блира
 * подряд на всю ширину экрана.
 *
 * backdrop-filter на .navbar создаёт backdrop root, то есть всё, что
 * окажется вложенным и тоже с блиром, размывало бы только содержимое
 * шапки. Проверено: у потомков navbar и footer своего backdrop-filter нет
 * (.user-dropdown, .dropdown-item, .user-profile-btn, .navbar-content
 * обходятся без него), так что ловушки нет.
 *
 * Позиционирование потомков не затронуто: .user-dropdown - absolute,
 * top: 100%, right: 0, и содержит его сам .navbar, который и до
 * backdrop-filter был position: fixed, то есть и раньше создавал
 * containing block для absolute.
 */

body.profile-liquid-glass:not(.modal-open) .navbar,
body.profile-liquid-glass:not(.modal-open) .footer {
    background-color: transparent !important;
    -webkit-backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .18), 0 10px 28px rgba(0, 0, 0, .16);
}

/* Модалки профиля: редактор профиля и просмотр предмета.
 *
 * На странице их ровно две, и обе - это .modal-overlay > .modal-content,
 * поэтому селектор взят общим классом .modal-content и ограничен
 * body.profile-liquid-glass. Ни одна третья модалка сюда не попадёт
 * случайно, а новая, если её добавят, станет стеклянной сама.
 *
 * background-color с !important здесь обязателен, а не перестраховка.
 * У инвентарной модалки фон задан через id:
 *     #inventory-item-modal .inv-item-modal-content
 *         background-color: rgba(30, 30, 30, .8);
 * Специфичность (1, 1, 0), а у body.profile-liquid-glass .modal-content
 * всего (0, 2, 1) - id перевешивает классы, и правило просто не применилось
 * бы. У модалки редактора фон тоже свой: .modal-content background-color:
 * #1e1e1e. У обоих !important снимает вопрос.
 *
 * Рамки намеренно сохранены, и у каждой своя причина.
 *     .modal-content                        border: 1px solid #e5a93d
 *     #inventory-item-modal .inv-item-modal-content
 *                                           border: 2px solid var(--inv-frame)
 * У инвентарной это цвет редкости предмета, и снятие рамки убило бы сам
 * признак редкости, а не просто декор. У редактора золото - акцент сайта.
 * Стилей border в правиле нет, поэтому --inv-frame продолжает работать
 * и rare-предметты не теряют окраску.
 *
 * В отличие от навбара и колонок здесь нет :not(.modal-open), и это
 * обратное намерение: у тех элементов стекло снималось, пока открыта
 * модалка, чтобы не спорить с оверлеем. Здесь стекло нужно ровно тогда,
 * когда модалка открыта.
 *
 * Сам .modal-overlay не трогается: у него своя затемняющая заливка и своё
 * размытие (blur 10px, у инвентарной 16px). Он и есть подложка, из
 * которой модалка делает матовое стекло.
 */

body.profile-liquid-glass .modal-content {
    background-color: transparent !important;
    -webkit-backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .18), 0 10px 28px rgba(0, 0, 0, .16);
}

/* Блоки внутри боковой панели профиля.
 *
 * Речь про .registration-box и .player-details-box. Класс
 * border-block-horizontal у них не рамка, а утилита с собственным фоном и
 * тремя inset-тенями:
 *     background-color: var(--border-block-background);
 *     box-shadow: inset 0 <size> 0 …, inset 0 -<size> 0 …, inset 0 0 0 …;
 *     padding: var(--border-block-border-size);
 * То есть они не прозрачные, а просто лежат на стеклянной панели
 * непрозрачными полосами.
 *
 * Свойства здесь только цветовые - фон, тень, скругление. Отступы и
 * размер не трогаются, поэтому геометрия не меняется.
 *
 * Ограничение страницей выполняется само собой: этот CSS подключён
 * только в player_profile_csr.html, и класс profile-liquid-glass
 * ставится только там же. Ни одно из этих правил никуда не утекает.
 */

/* Блок пользователя в шапке: баланс, ник, выпадающее меню.
 *
 * Эти блоки лежат в base.html, то есть есть на каждой странице, но стекло
 * им нужно только здесь: этот CSS подключён лишь в player_profile_csr.html,
 * а класс profile-liquid-glass ставится лишь там же.
 *
 * Без этого правила при включённом стекле в правом верхнем углу оставался
 * непрозрачный блок с балансом и ником, который выпадал из общего вида.
 * Плотность та же, что у .side-container .registration-box: мелкий белый
 * текст в uppercase на полностью прозрачном фоне читался плохо.
 *
 * Кнопка входа сюда не входит: она синяя, и стекло убрало бы её цвет.
 */
body.profile-liquid-glass .user-balance,
body.profile-liquid-glass .user-profile-btn,
body.profile-liquid-glass .user-dropdown {
    background-color: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .5)) !important;
    -webkit-backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .16), 0 6px 16px rgba(0, 0, 0, .14);
}

body.profile-liquid-glass .side-container .registration-box,
body.profile-liquid-glass .side-container .player-details-box {
    /* Плотность подложки повышена с прозрачной до расчётной. Эти три
     * блока - дата регистрации, кнопка просмотра прицела, кнопка правки
     * и инфо о игроке - держат мелкий белый текст в uppercase, и на
     * полностью прозрачном фоне он читался плохо. Теперь при ползунке
     * прозрачности 45 это (1 - 0.45) * .22 = 12% белого, при ползунке
     * 10 - 20%, при 85 - всего 3%.
     *
     * Значение считается от --profile-glass-opacity, то есть ползунок
     * в редакторе по-прежнему управляет плотностью, а не задаёт её
     * намертво. Направление прежнее: чем выше ползунок, тем
     * прозрачнее. */
    background-color: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .5)) !important;
    -webkit-backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.15) blur(var(--profile-glass-blur, 12px));
    /* inset 0 0 - как и у всех остальных в этом файле */
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .16), 0 6px 16px rgba(0, 0, 0, .14);
}

/* Стекло в предпросмотре редактора.
 *
 * Без этого ползунки прозрачности и размытия меняли только фон заново,
 * а на глаз ничего не происходило: стекло на странице рисуется только
 * при body.profile-liquid-glass, а в макете его не было чем рисовать.
 *
 * Множители копируют боевые - панель 1x, её содержимое и плитки 2.5x.
 * Если их разъедутся, предпросмотр начнёт врать.
 */
.profile-bg-preview.has-glass .bg-profile-mock {
    background-color: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .1));
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    padding: 10px;
    -webkit-backdrop-filter: saturate(1.2) blur(var(--profile-glass-blur, 12px));
    backdrop-filter: saturate(1.2) blur(var(--profile-glass-blur, 12px));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .28), 0 10px 24px rgba(0, 0, 0, .2);
}

.profile-bg-preview.has-glass .bg-mock-avatar,
.profile-bg-preview.has-glass .bg-profile-mock>span {
    -webkit-backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
}

/* Переключатель разделов профиля: стеклянная обёртка + стеклянные
 * неактивные кнопки.
 *
 * Раньше здесь стояли отрицательные поля margin:13px -13px, рамка и
 * градиент подложки - они выкусывали геометрию, и без компенсации
 * кнопки сузились бы на 24px, а блок вырос бы по высоте. Сейчас их нет
 * по требованию: блок остаётся стеклянным за счёт backdrop-filter,
 * рамки и тени.
 *
 * Активная кнопка не тронута: :not(.active) ниже, а её жёлтый фон и
 * собственные inset-тени задаются в шаблоне.
 */
body.profile-liquid-glass .profile-category-selector {
    width: auto;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: transparent !important;
    -webkit-backdrop-filter: saturate(1.15) blur(10px);
    backdrop-filter: saturate(1.15) blur(10px);
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .22), 0 8px 22px rgba(0, 0, 0, .16);
}

body.profile-liquid-glass .profile-category-btn:not(.active) {
    background: transparent !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 45%, rgba(8, 12, 20, .05)) !important;
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: saturate(1.1) blur(8px);
    backdrop-filter: saturate(1.1) blur(8px);
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .18);
}

/* Layout wrappers stay clear; the glass belongs to their panels.
 *
 * Селекторы - именно обёртки, без потомков: правило не должно
 * проникать внутрь, иначе стекло съехало бы с карточек на панели,
 * которые сами по себе являются контентом. Поэтому здесь нет `*`
 * и нет вложенных комбинаторов.
 *
 * `.profile-category-panel` - это <section> вкладки, такой же простой
 * обёрткой, как .bottom-layout: своего фона у него нет, но в список
 * прозрачных он раньше не входил, и полагаться на «а оно и так
 * ничего не красит» здесь не стоит. */
body.profile-liquid-glass .bottom-layout,
body.profile-liquid-glass .profile-overview-layout,
body.profile-liquid-glass .profile-category-panel {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Стекло, которое сейчас не видно, не рендерится.
 *
 * backdrop-filter - не дешёвая операция: подложку под элементом нужно снять
 * и размыть заново на каждом кадре, а под профилем подложка меняется
 * непрерывно, за панелями играет видеофон. Пятнадцать правил с размытием в
 * этом файле продолжали считаться и тогда, когда элемент уехал за экран или
 * оказался под полноэкранной модалкой.
 *
 * Разметка и наблюдатель живут в static/js/profile-background.js: он
 * расставляет корням атрибут data-glass="off", когда корень ушёл за экран
 * или когда открыта модалка.
 *
 * Селектор через "*" вместо повторения всех списков из этого файла -
 * сознательно. Перечислить здесь заново каждый стеклянный элемент означало
 * бы в третий раз продублировать один и тот же список: ещё раз менять его
 * при добавлении новой стеклянной поверхности. Потомки отключённого корня
 * отключаются вместе с ним, включая вложенные стеклянные дети - .stat-cell
 * и прочие, - и отдельно перечислять их не нужно.
 *
 * !important обязателен: у всех объявлений backdrop-filter в этом файле
 * важности нет, а по специфичности (0, 2, 1) против, скажем, (0, 2, 0) у
 * .stat-cell не было бы гарантии. С !important правило выигрывает у всего.
 *
 * Ставится и -webkit-backdrop-filter: none тоже, на случай Safari.
 *
 * Что намеренно не отключается: .navbar и .footer (position: fixed, за
 * экран не уезжают, а на время модалки у них есть :not(.modal-open)) и
 * предпросмотр редактора (живёт внутри самой модалки и обязан размываться).
 * Корни для них в списке наблюдателя не значит.
 */

body.profile-liquid-glass [data-glass="off"],
body.profile-liquid-glass [data-glass="off"] * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Мелкий стеклянный вид отдельных плиток статистики.
 *
 * Плотность повышена с .075 до .2. Прежде при ползунке прозрачности 45
 * это давало (1 - 0.45) * .075 = 4% белого - плитка почти не отличалась от
 * фона панели, и мелкий белый текст BOMB_DEFUSE, K/D RATIO и подобных
 * плавал по картинке. Теперь это 11% при 45 и до 18% при ползунке 10.
 * Формула и направление прежние: чем выше ползунок прозрачности, тем
 * прозрачнее плитка.
 */
body.profile-liquid-glass .stat-cell:not([hidden]) {
    background: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * 0.5)) !important;
    /* background-image: none прописан явно, хотя сокращение background выше
     * уже сбрасывает его в none. В static/style.css нет ни одного
     * объявления background-image, у .stat-cell там вообще нет своего
     * правила, а утилита .border-block-horizontal задаёт только
     * background-color и inset-тени, так что картинки под плиткой и не
     * было. Пишется отдельной строкой, чтобы это было видно в правиле, а не
     * выводилось из чужого сокращения: если кто-то позже заменит background
     * на background-color, заливка поедет, а эта строка останется. */
    background-image: none !important;
    border-color: rgba(255, 255, 255, .12) !important;
    /* Плитки статистики берут радиус в 2.5 раза больше общего. */
    -webkit-backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 4.5));
    backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 4.5));
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .12), inset 0 0 10px rgba(255, 255, 255, .025);
}

/* Карточки истории матчей и трансферов.
 *
 * Обе секции обёрнуты в .panel-dark.stats-grid-container, то есть панель
 * стеклянной уже была, - но у самих карточек собственный непрозрачный фон
 * #252525 (задан в инлайновых стилях шаблона), и они оставались тёмными
 * прямоугольниками поверх стекла.
 *
 * Селектор ограничен :not(.modal-open): история матчей читается и внутри
 * редактора профиля, и там карточки обязаны остаться обычными - подложка
 * предпросмотра не та же, что у страницы, и размывать ей нечего.
 *
 * Множитель размытия 2.5 такой же, как у прямых детей .panel-dark:
 * карточка - их внук через .match-history-container и .transfer-history-container,
 * но визуально она принадлежит панели и обязана играть с ней в одном слое.
 */
body.profile-liquid-glass:not(.modal-open) .match-card,
body.profile-liquid-glass:not(.modal-open) .transfer-card {
    background: rgb(255 255 255 / calc((1 - var(--profile-glass-opacity, .45)) * .22)) !important;
    -webkit-backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    backdrop-filter: saturate(1.08) blur(calc(var(--profile-glass-blur, 12px) * 2.5));
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, .12);
}

@media (max-width: 640px) {
    .bg-editor-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bg-preview-column {
        position: static;
    }

    #profile-bg-preview {
        height: 200px;
    }

    .bg-kind-card {
        font-size: 10px;
    }

    .bg-editor-heading {
        flex-wrap: wrap;
    }

    .bg-editor-heading h3 {
        font-size: 18px;
    }

    #profile-bg-save {
        width: 100%;
        order: 0;
    }

    #profile-editor-background-section .profile-bg-buttons {
        position: static;
    }
}

/* Перекраска текста под светлый фон. СГЕНЕРИРОВАНО, руками не править.
 *
 * Источник: tools/gen_light_overrides.py по всем объявлениям `color: #hex`
 * из static/style.css, static/player-profile.css и из <style> блоков шаблона
 * профиля. Разметка для отбора классов берётся из base.html,
 * player_profile_csr.html и строк-шаблонов static/js/player-profile.js.
 *
 * Пять условий, по которым элемент не перекрашивается:
 *   1. Цвет тёмный. На светлом стекле он и так читается.
 *   2. Элемент лежит на непрозрачно тёмной подложке, которую стекло не
 *      перекрывает: карточки кланов, матчей, турниров, меню, тултип. Там
 *      светлый текст остаётся светлым, иначе вышло бы тёмное по тёмному.
 *      Подложкой считается и тёмный rgba() с альфой от 0.6.
 *   3. Селектор из админки или страницы техработ: профильного фона там не
 *      бывает вовсе.
 *   4. Класса нет в разметке страницы профиля: он живёт на другой странице.
 *
 * Учитываются и цвета из таблиц стилей, и цвета из атрибута style.
 * Инлайн на странице профиля много - заголовки разделов, подписи метрик,
 * тексты витрины, - и он перебивает любые правила стилей, поэтому без
 * !important-перекраски он остался бы светлым на светлом фоне.
 *
 * Класс profile-bg-light ставит JS по светлоте фона, profile-liquid-glass -
 * галочка стекла. Второе условие обязательно: при выключенном стекле панели
 * тёмные, и светлый текст на них прав.
 *
 * Тон цвета сохраняется, светлота инвертируется и добивается до контраста не
 * ниже 4.5:1 на белом стекле.
 *
 * ВАЖНО: при добавлении нового цвета текста в style.css, в
 * player-profile.css или в шаблон профиля этот блок надо перегенерировать,
 * иначе новый цвет останется светлым на светлом фоне.
 */
    body.profile-bg-light.profile-liquid-glass .operation-title { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .operation-subtitle { color: #555555 !important; }
    body.profile-bg-light.profile-liquid-glass .logo-text { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .logo-suffix { color: #1f1f1f !important; }
    body.profile-bg-light.profile-liquid-glass .nav-desktop .nav-links a { color: #4f4f4f !important; }
    body.profile-bg-light.profile-liquid-glass .nav-desktop .nav-links a:hover { color: #9c6700 !important; }
    body.profile-bg-light.profile-liquid-glass .user-balance { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .user-profile-btn { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .sidebar-title { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .live-status { color: #af1310 !important; }
    body.profile-bg-light.profile-liquid-glass .match-event { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .team-score span:last-child { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .ranking-item span:first-child { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .ranking-item span:last-child:hover { color: #9c6700 !important; }
    body.profile-bg-light.profile-liquid-glass .full-ranking-btn { color: #4f4f4f !important; }
    body.profile-bg-light.profile-liquid-glass .full-ranking-btn:hover { color: #1f1f1f !important; }
    body.profile-bg-light.profile-liquid-glass .footer-section h3 { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .footer-section p { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .footer-links a { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .footer-links a:hover { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .footer-socials a { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .footer-socials a:hover { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .footer-bottom strong { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .close-modal { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .potw-header { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .potw-player-name { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .potw-player-name:hover { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .potw-date { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .potw-stat-label { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .potw-stat-value { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .potw-stat-value.elo-gain.positive { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .potw-stat-value.elo-gain.negative { color: #af1310 !important; }
    body.profile-bg-light.profile-liquid-glass .match-modal-title { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .match-modal-map { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .match-modal-vs { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .profile-name { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .shop-title { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .shop-lead { color: #222222 !important; }
    body.profile-bg-light.profile-liquid-glass .shop-lead strong { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .shop-name { color: #222222 !important; }
    body.profile-bg-light.profile-liquid-glass .shop-price { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .shop-detail-title { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .shop-cost-label { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .shop-price-big { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .shop-cost-unit { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .shop-hint { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .decoration-inventory-row { color: #444444 !important; }
    body.profile-bg-light.profile-liquid-glass .badge-custom { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .profile-nickname { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .stat-cell { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .registration-box { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .detail-label { color: #555555 !important; }
    body.profile-bg-light.profile-liquid-glass .detail-value { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .clan-link { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .ban-card { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .ban-card__moderator { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .ban-card__moderator:hover { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .clan-link:hover { color: #9c6700 !important; }
    body.profile-bg-light.profile-liquid-glass .config-label { color: #555555 !important; }
    body.profile-bg-light.profile-liquid-glass .config-value { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .live-indicator { color: #0a6bb8 !important; }
    body.profile-bg-light.profile-liquid-glass .showcase-slot-modal-header h3 { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .showcase-add-modal-header h3 { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-filter-btn { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .inv-filter-btn:hover { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-def { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.CONSUMER { color: #26394f !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.INDUSTRIAL { color: #255d9d !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.MILSPEC { color: #001eb4 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.MILITARY { color: #001eb4 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.MILITARY_GRADE { color: #001eb4 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.CLASSIFIED { color: #9e15ad !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.COVERT { color: #ae1313 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.CONTRABAND { color: #906814 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-rarity.COMMON { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-st-badge { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-modal-title { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-modal-stats { color: #555555 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-modal-stats .stattrack { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-modal-hint { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-modal-cases-title { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-item-modal-hint strong { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .battlepass-track-label { color: #a06a03 !important; }
    body.profile-bg-light.profile-liquid-glass .battlepass-level.is-track-complete .battlepass-level-number { color: #008569 !important; }
    body.profile-bg-light.profile-liquid-glass .battlepass-level.is-current .battlepass-level-number { color: #a06a03 !important; }
    body.profile-bg-light.profile-liquid-glass .battlepass-reward-name { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .battlepass-reward-xp { color: #a06a03 !important; }
    body.profile-bg-light.profile-liquid-glass .battlepass-error { color: #954827 !important; }
    body.profile-bg-light.profile-liquid-glass .inv-hidden-state { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .inventory-auth-required { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .inventory-auth-required h3 { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .inventory-auth-required p { color: #555555 !important; }
    body.profile-bg-light.profile-liquid-glass .card-label { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .card-value { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .fa-box-open { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .fa-exclamation-triangle { color: #af1310 !important; }
    body.profile-bg-light.profile-liquid-glass .fa-long-arrow-alt-right { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .fa-medal { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .gauge-label { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .gauge-value { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .hltv-metric-label { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .hltv-metric-value { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .hltv-rating-sub { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .hltv-rating-value { color: #0d0d0d !important; }
    body.profile-bg-light.profile-liquid-glass .inv-showcase-hint { color: #616161 !important; }
    body.profile-bg-light.profile-liquid-glass .results-title { color: #996a14 !important; }
    body.profile-bg-light.profile-liquid-glass .stats-grid-results-title { color: #996a14 !important; }
/* Серый инлайн-текст без класса. СГЕНЕРИРОВАНО, руками не править.
 *
 * Часть серых подписей на странице профиля задана прямо в атрибуте style и
 * не имеет класса, поэтому перекраска по классу её не достаёт. Цвет здесь
 * выбирается по значению атрибута - иначе такие подписи остаются серыми на
 * светлом стекле, что и было жалобой «серый текст плохо читаем».
 *
 * Контраст: #888 на белом даёт 3.5:1, #aaa - 2.3:1, оба ниже порога 4.5:1.
 *
 * Подложка. Правила сгруппированы по панели: подпись внутри .panel-dark
 * перекрашивается, а внутри .inv-item-modal-content - нет, там своя тёмная
 * подложка и светлый текст прав.
 */
body.profile-bg-light.profile-liquid-glass :is(.panel-dark, .stat-cell, .side-container, .sidebar-left, .sidebar-right, .battlepass-panel, .battlepass-track-panel, .profile-category-panel, .bottom-layout, .stats-grid-container, .custom-stats-wrapper, .profile-overview-layout, .team-ranking, .sidebar-matches, .profile-showcase-empty):not(.inv-item-modal-content):not(.modal-content):not(.profile-editor-modal-content):not(.inv-item-card):not(.dropdown-item):not(.clan-card):not(.modal-overlay):not(.alert):not(.shop-item):not(.frame-item):not(#profile-editor-modal):not(#inventory-item-modal):not(#showcase-slot-modal):not(#showcase-add-modal):not(#profile-shop-modal):not(#custom-tooltip):not(.config-display):not(.controls-section):not(.inv-item-modal-cases-list):not(.mannequin-note):is(p, span, label, div, h3, h4, li):is([style*="color: #888"], [style*="color:#888"], [style*="color: #888;"], [style*="color:#888;"]) {
    color: #616161 !important;
}
body.profile-bg-light.profile-liquid-glass :is(.panel-dark, .stat-cell, .side-container, .sidebar-left, .sidebar-right, .battlepass-panel, .battlepass-track-panel, .profile-category-panel, .bottom-layout, .stats-grid-container, .custom-stats-wrapper, .profile-overview-layout, .team-ranking, .sidebar-matches, .profile-showcase-empty):not(.inv-item-modal-content):not(.modal-content):not(.profile-editor-modal-content):not(.inv-item-card):not(.dropdown-item):not(.clan-card):not(.modal-overlay):not(.alert):not(.shop-item):not(.frame-item):not(#profile-editor-modal):not(#inventory-item-modal):not(#showcase-slot-modal):not(#showcase-add-modal):not(#profile-shop-modal):not(#custom-tooltip):not(.config-display):not(.controls-section):not(.inv-item-modal-cases-list):not(.mannequin-note):is(p, span, label, div, h3, h4, li):is([style*="color: #8a8a8a"], [style*="color:#8a8a8a"], [style*="color: #8a8a8a;"], [style*="color:#8a8a8a;"]) {
    color: #616161 !important;
}
body.profile-bg-light.profile-liquid-glass :is(.panel-dark, .stat-cell, .side-container, .sidebar-left, .sidebar-right, .battlepass-panel, .battlepass-track-panel, .profile-category-panel, .bottom-layout, .stats-grid-container, .custom-stats-wrapper, .profile-overview-layout, .team-ranking, .sidebar-matches, .profile-showcase-empty):not(.inv-item-modal-content):not(.modal-content):not(.profile-editor-modal-content):not(.inv-item-card):not(.dropdown-item):not(.clan-card):not(.modal-overlay):not(.alert):not(.shop-item):not(.frame-item):not(#profile-editor-modal):not(#inventory-item-modal):not(#showcase-slot-modal):not(#showcase-add-modal):not(#profile-shop-modal):not(#custom-tooltip):not(.config-display):not(.controls-section):not(.inv-item-modal-cases-list):not(.mannequin-note):is(p, span, label, div, h3, h4, li):is([style*="color: #aaa"], [style*="color:#aaa"], [style*="color: #aaa;"], [style*="color:#aaa;"]) {
    color: #555555 !important;
}
body.profile-bg-light.profile-liquid-glass :is(.panel-dark, .stat-cell, .side-container, .sidebar-left, .sidebar-right, .battlepass-panel, .battlepass-track-panel, .profile-category-panel, .bottom-layout, .stats-grid-container, .custom-stats-wrapper, .profile-overview-layout, .team-ranking, .sidebar-matches, .profile-showcase-empty):not(.inv-item-modal-content):not(.modal-content):not(.profile-editor-modal-content):not(.inv-item-card):not(.dropdown-item):not(.clan-card):not(.modal-overlay):not(.alert):not(.shop-item):not(.frame-item):not(#profile-editor-modal):not(#inventory-item-modal):not(#showcase-slot-modal):not(#showcase-add-modal):not(#profile-shop-modal):not(#custom-tooltip):not(.config-display):not(.controls-section):not(.inv-item-modal-cases-list):not(.mannequin-note):is(p, span, label, div, h3, h4, li):is([style*="color: #ccc"], [style*="color:#ccc"], [style*="color: #ccc;"], [style*="color:#ccc;"]) {
    color: #333333 !important;
}
body.profile-bg-light.profile-liquid-glass :is(.panel-dark, .stat-cell, .side-container, .sidebar-left, .sidebar-right, .battlepass-panel, .battlepass-track-panel, .profile-category-panel, .bottom-layout, .stats-grid-container, .custom-stats-wrapper, .profile-overview-layout, .team-ranking, .sidebar-matches, .profile-showcase-empty):not(.inv-item-modal-content):not(.modal-content):not(.profile-editor-modal-content):not(.inv-item-card):not(.dropdown-item):not(.clan-card):not(.modal-overlay):not(.alert):not(.shop-item):not(.frame-item):not(#profile-editor-modal):not(#inventory-item-modal):not(#showcase-slot-modal):not(#showcase-add-modal):not(#profile-shop-modal):not(#custom-tooltip):not(.config-display):not(.controls-section):not(.inv-item-modal-cases-list):not(.mannequin-note):is(p, span, label, div, h3, h4, li):is([style*="color: #777"], [style*="color:#777"], [style*="color: #777;"], [style*="color:#777;"]) {
    color: #616161 !important;
}

/* Adaptive chrome for bright backgrounds without forcing dark text onto the
 * opaque profile panels. The previous rules only ran with Liquid Glass on,
 * leaving tabs and the page-level controls unreadable on a bright image. */
body[data-profile-tone="dark"] {
    color: var(--profile-text-color, #11151b);
}

body[data-profile-tone="dark"] .profile-category-selector {
    color: var(--profile-text-color, #11151b);
    background: rgba(255, 255, 255, .38);
    border-color: rgba(15, 23, 42, .24);
    text-shadow: 0 1px 1px var(--profile-shadow-color, rgba(255,255,255,.72));
}

body[data-profile-tone="dark"] .profile-category-btn:not(.active) {
    color: var(--profile-text-color, #11151b) !important;
    border-color: rgba(15, 23, 42, .22);
    background: rgba(255, 255, 255, .26) !important;
    text-shadow: 0 1px 1px var(--profile-shadow-color, rgba(255,255,255,.72));
}

body[data-profile-tone="dark"] .profile-category-btn:not(.active):hover,
body[data-profile-tone="dark"] .profile-category-btn.active {
    color: #8a5b00 !important;
}

body[data-profile-tone="dark"] .profile-category-btn .tab-lock,
body[data-profile-tone="dark"] .profile-category-selector small {
    color: var(--profile-muted-color, #4b5563) !important;
}

body[data-profile-tone="dark"] .profile-background-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, .035);
}

/* ===== Библиотека фонов игрока ===== */
.bg-library {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.bg-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #e5a93d;
}
.bg-library-title { font-weight: 600; }
.bg-library-count {
    background: rgba(229, 169, 61, 0.15);
    color: #e5a93d;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.bg-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.bg-library-card {
    position: relative;
    background: #222;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.bg-library-card:hover {
    border-color: rgba(229, 169, 61, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.bg-library-card.active {
    border-color: #e5a93d;
    box-shadow: 0 0 0 2px rgba(229, 169, 61, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.bg-library-card:disabled {
    opacity: 0.7;
    cursor: wait;
}
.bg-library-preview {
    width: 100%;
    aspect-ratio: 3 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-library-name {
    display: block;
    padding: 8px 10px;
    font-size: 0.8rem;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bg-library-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #e5a93d;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.bg-library-card:hover .bg-library-badge,
.bg-library-card.active .bg-library-badge {
    opacity: 1;
}
.bg-library-empty {
    text-align: center;
    color: #888;
    font-size: 0.85rem;
    padding: 1.5rem;
    margin: 0;
}

/* Для редактора игрока (не админа) скрываем настройки стекла по умолчанию.
   JS покажет их, если библиотека не пуста. */
.profile-background-form.player-editor .bg-glass-toggle,
.profile-background-form.player-editor .bg-glass-slider {
    display: none !important;
}