/* ===== Comments wrapper width on desktop ===== */
.prosettings-comments {
    width: 100%;
    max-width: 920px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1024px) {
    .prosettings-comments {
        max-width: 100%;
    }
}

/*
Theme Name: ProSettings Theme
Theme URI: https://prosettings.ru/
Author: Yury
Author URI: https://prosettings.ru/
Description: Кастомная тема для ProSettings.ru по CS2 (игроки, конфиги, прицелы).
Version: 1.0.0
Text Domain: prosettings-guru
*/

:root {
    --prosettings-content-width: 1020px;
    --prosettings-font-main: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --player-card-team-icon-size: 20px;
    --mobile-page-title-size: clamp(21px, 6vw, 27px);
    --prosettings-pubg-accent-rgb: 247, 119, 28;

    --color-primary: #F27622;
    --color-primary-hover: #FF8733;
    --color-primary-light: #FFF4EC;
    --color-primary-rgb: 242, 118, 34;

    /* Canonical page background used by every template. */
    --color-bg: #F5F5F6;
    --color-bg-card: #FFFFFF;
    --color-border: #E7EAF0;
    --color-layout-edge: #D9DEE6;
    --color-text: #111827;
    --color-text-secondary: #6B7280;
    --prosettings-ui-icon-color: #000000;

    /* backwards compatibility for existing theme tokens */
    --brand-color: var(--color-primary);
    --brand-color-hover: var(--color-primary-hover);
    --brand-color-light: var(--color-primary-light);
    --brand-color-rgb: var(--color-primary-rgb);
    --prosettings-accent: var(--color-primary);
}

.prosettings-player-photo-placeholder {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f4f6f8;
}

.prosettings-player-photo-placeholder__image {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url('assets/img/player-placeholder.webp') bottom center / contain no-repeat;
    opacity: .86;
    transform: scaleX(.95);
    transform-origin: center bottom;
}

:where(
    .cs-home-player-card__team-bg,
    .cs-home-config-card__team-bg,
    .player-card__thumb-team-bg,
    .player-viewmodel-archive-card__team-bg,
    .prosettings-player-teammate__team-bg
) {
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.cs-home-player-card:is(:hover, :focus-within) .cs-home-player-card__team-bg,
.player-card:is(:hover, :focus-within) .player-card__thumb-team-bg,
.prosettings-player-teammate:is(:hover, :focus-within) .prosettings-player-teammate__team-bg {
    transform: scale(1.045);
    filter: saturate(120%) contrast(106%) brightness(1.08);
}

.cs-home-config-card:is(:hover, :focus-within) .cs-home-config-card__team-bg {
    transform: translateZ(0) scale(1.045);
}

.player-viewmodel-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
    transform: translateX(-50%) scale(1.045);
    filter: saturate(120%) contrast(106%) brightness(1.08);
}

.prosettings-cs-home .cs-home-viewmodel-grid .player-viewmodel-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg,
.prosettings-cs-home .cs-home-devices-players-grid .devices-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
    transform: translateX(-50%) scale(1.045);
    filter: saturate(120%) contrast(106%) brightness(1.08);
}

.cs-home-player-card:is(:hover, :focus-within) .cs-home-player-card__team-bg,
.cs-home-config-card:is(:hover, :focus-within) .cs-home-config-card__team-bg,
.prosettings-player-teammate:is(:hover, :focus-within) .prosettings-player-teammate__team-bg {
    opacity: .25;
}

.player-card:is(:hover, :focus-within) .player-card__thumb-team-bg {
    opacity: .56;
}

.team-page .team-roster-card:is(:hover, :focus-within) .team-roster-card__team-bg {
    opacity: .25;
}

.player-viewmodel-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
    opacity: .62;
}

.devices-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
    opacity: .25;
}

.prosettings-cs-home .cs-home-viewmodel-grid .player-viewmodel-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
    opacity: .62;
}

.prosettings-cs-home .cs-home-devices-players-grid .devices-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
    opacity: .25;
}

@media (prefers-reduced-motion: reduce) {
    :where(
        .cs-home-player-card__team-bg,
        .cs-home-config-card__team-bg,
        .player-card__thumb-team-bg,
        .player-viewmodel-archive-card__team-bg,
        .prosettings-player-teammate__team-bg
    ) {
        transition: none;
    }

    .cs-home-player-card:is(:hover, :focus-within) .cs-home-player-card__team-bg,
    .cs-home-config-card:is(:hover, :focus-within) .cs-home-config-card__team-bg,
    .player-card:is(:hover, :focus-within) .player-card__thumb-team-bg,
    .prosettings-player-teammate:is(:hover, :focus-within) .prosettings-player-teammate__team-bg {
        transform: none;
    }

    .player-viewmodel-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
        transform: translateX(-50%);
    }

    .prosettings-cs-home .cs-home-viewmodel-grid .player-viewmodel-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg,
    .prosettings-cs-home .cs-home-devices-players-grid .devices-archive-card:is(:hover, :focus-within) .player-viewmodel-archive-card__team-bg {
        transform: translateX(-50%);
    }
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-cyrillic-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-cyrillic-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-cyrillic-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-cyrillic-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-cyrillic-800-normal.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-latin-800-normal.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ====================================
   ГЛОБАЛЬНЫЕ СТИЛИ САЙТА
   ==================================== */
.container {
    max-width: var(--prosettings-content-width);
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

:root {
    --prosettings-header-offset-fallback: 58px;
    --prosettings-header-breadcrumb-gap: 20px;
}

@media (max-width: 1024px) {
    :root {
        --prosettings-header-offset-fallback: 54px;
    }
}

@media (max-width: 768px) {
    :root {
        --prosettings-header-offset-fallback: 54px;
        --prosettings-header-breadcrumb-gap: 12px;
    }
}

#content {
    padding-top: calc(var(--prosettings-header-offset, var(--prosettings-header-offset-fallback)) + var(--prosettings-header-breadcrumb-gap));
}



/* Базовая коробка и сглаживание */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    min-height: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* База для всего текста на сайте */
body {
    margin: 0;
    padding: 0;
    font-family: var(--prosettings-font-main);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

#page.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1 1 auto;
}

body.home #page.site,
body.home .site-content,
body.home .site-content.fixed,
body.home .site-content-inner {
    background: transparent;
}

/* Типографика */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

@media (max-width: 768px) {
    #page h1 {
        max-width: 100%;
        font-size: var(--mobile-page-title-size);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -.025em;
        overflow-wrap: normal;
        text-wrap: balance;
    }

    #page h2,
    #page h3 {
        line-height: 1.22;
        overflow-wrap: normal;
        text-wrap: balance;
    }
}

p {
    margin: 0 0 1em;
}

/* Ссылки (единый стиль) */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color .15s ease, opacity .15s ease;
}

a:hover {
    color: var(--color-primary-hover);
}

.prosettings-more-link__icon,
.prosettings-arrow-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    overflow: visible;
    transition: transform .18s ease;
}

.prosettings-arrow-icon__back {
    fill: currentColor;
    stroke: none;
    opacity: .12;
}

.prosettings-arrow-icon__chevron {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.prosettings-ui-icon {
    display: inline-block;
    flex: 0 0 20px;
    width: 20px !important;
    height: 20px !important;
    overflow: visible;
    color: var(--prosettings-ui-icon-color);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

.prosettings-ui-icon__solid {
    fill: currentColor;
    stroke: none;
}

.prosettings-ui-icon__like-fill {
    opacity: 0;
    transition: opacity .16s ease;
}

:is(.prosettings-crosshair-like, .valorant-crosshair-like):is(:hover, :focus-visible, .is-liked, [aria-pressed="true"]) .prosettings-ui-icon__like-fill {
    opacity: 1;
}

.prosettings-ui-icon--light {
    color: inherit;
}

.prosettings-ui-icon--compact {
    flex-basis: 16px;
    width: 16px !important;
    height: 16px !important;
}

.prosettings-ui-icon--large {
    flex-basis: 26px;
    width: 26px !important;
    height: 26px !important;
}

.prosettings-slider-nav-icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.players-filters-toggle img,
.cs-home-directory__filters-toggle img {
    display: block;
    width: 20px;
    height: 20px;
}

a:hover .prosettings-arrow-icon,
a:focus-visible .prosettings-arrow-icon,
.prosettings-more-link:hover .prosettings-more-link__icon,
.prosettings-more-link:focus-visible .prosettings-more-link__icon {
    transform: translateX(2px);
}

.prosettings-player-game-switcher {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 4px 0 18px;
    isolation: isolate;
}

.prosettings-player-game-switcher::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: -1;
    height: 1px;
    background: #dfe5ed;
    content: "";
}

.prosettings-player-game-switcher__details {
    position: relative;
    width: min(270px, calc(100vw - 44px));
    color: #151a23;
    background: var(--color-bg);
    box-shadow: 0 0 0 11px var(--color-bg);
}

.prosettings-player-game-switcher__summary,
.prosettings-player-game-switcher__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    color: #151a23;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.2;
}

.prosettings-player-game-switcher__summary {
    padding: 8px 11px;
    background: #e5e7eb;
    border: 1px solid #d8dde5;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.prosettings-player-game-switcher__summary::-webkit-details-marker {
    display: none;
}

.prosettings-player-game-switcher__summary:hover,
.prosettings-player-game-switcher__details[open] .prosettings-player-game-switcher__summary {
    background: #dcdee2;
    border-color: #cfd5de;
}

.prosettings-player-game-switcher__summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.prosettings-player-game-switcher__label {
    flex: 1 1 auto;
    min-width: 0;
}

.prosettings-player-game-switcher__icon {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 22px;
    object-fit: contain;
}

.prosettings-player-game-switcher__icon--valorant {
    width: 22px;
}

.prosettings-player-game-switcher__icon--pubg {
    width: 22px;
}

.prosettings-player-game-switcher__chevron {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.prosettings-player-game-switcher__details[open] .prosettings-player-game-switcher__chevron {
    transform: rotate(180deg);
}

.prosettings-player-game-switcher__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 30;
    overflow: hidden;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #dce1e8;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.prosettings-player-game-switcher__link {
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.prosettings-player-game-switcher__link:hover,
.prosettings-player-game-switcher__link:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-light);
    outline: none;
}

.prosettings-player-settings-heading > .prosettings-player-settings-heading__icon {
    display: block;
    flex: 0 0 auto;
    width: 39px;
    height: 20px;
    object-fit: contain;
}

.prosettings-player-settings-heading > .prosettings-player-settings-heading__icon--valorant {
    width: 22px;
}

.prosettings-player-settings-heading > .prosettings-player-settings-heading__icon--pubg {
    width: 22px;
}

@media (max-width: 680px) {
    .prosettings-player-settings-heading {
        flex-wrap: wrap;
        gap: 8px;
        text-wrap: balance;
    }

    .prosettings-player-settings-heading::before,
    .prosettings-player-settings-heading::after {
        display: none;
    }

    .prosettings-player-game-switcher {
        margin-bottom: 14px;
    }

    .prosettings-player-game-switcher__details {
        width: min(250px, calc(100vw - 40px));
        box-shadow: 0 0 0 8px var(--color-bg);
    }

    .prosettings-player-game-switcher__summary,
    .prosettings-player-game-switcher__link {
        min-height: 40px;
        font-size: 14px;
    }

    .prosettings-player-game-switcher__icon {
        width: 29px;
        height: 20px;
    }

    .prosettings-player-game-switcher__icon--valorant {
        width: 20px;
    }

    .prosettings-player-game-switcher__icon--pubg {
        width: 20px;
    }

    .prosettings-player-settings-heading > .prosettings-player-settings-heading__icon {
        width: 34px;
        height: 18px;
    }

    .prosettings-player-settings-heading > .prosettings-player-settings-heading__icon--valorant {
        width: 20px;
    }

    .prosettings-player-settings-heading > .prosettings-player-settings-heading__icon--pubg {
        width: 20px;
    }
}

@media (max-width: 768px) {
    #page .prosettings-more-link {
        display: inline-grid;
        flex: 0 0 34px;
        place-items: center;
        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;
        color: #374151;
        background: rgba(255, 255, 255, .92);
        border: 1px solid var(--color-border);
        border-radius: 9px;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .07);
        font-size: 0;
        line-height: 1;
        transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    #page .prosettings-more-link:hover,
    #page .prosettings-more-link:focus-visible {
        color: var(--color-primary);
        background: #ffffff;
        border-color: rgba(var(--color-primary-rgb), .30);
        box-shadow: 0 5px 14px rgba(15, 23, 42, .10);
        transform: translateY(-1px);
    }

    #page .prosettings-more-link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    #page .prosettings-more-link__label {
        display: none;
    }

    #page .prosettings-more-link__icon {
        width: 16px;
        height: 16px;
    }
}

/* Фокус для клавиатурной навигации — важно для UX и SEO */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Списки по умолчанию */
ul,
ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

/* Картинки — никогда не вылезают из контейнера */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Формы / кнопки */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button,
input[type="submit"],
.button {
    cursor: pointer;
}

.button,
button {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.button:hover,
button:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.card,
.block {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
}

/* Базовый контейнер контента */
.container {
    max-width: var(--prosettings-content-width);
    margin: 0 auto;
    padding: 0 16px;
}

@media (max-width: 900px) {
    .container {
        padding: 0 12px;
    }
}

/* Карточка для обычных страниц/записей (index.php и т.п.) */
.content-card {
    max-width: 800px;
    margin: 0 auto 40px;
}

/* Хлебные крошки */
.breadcrumbs,
.player-breadcrumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.breadcrumbs > span,
.player-breadcrumbs > span {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.breadcrumbs a,
.player-breadcrumbs a {
    color: #374151;
    text-decoration: none;
    transition: color .16s ease, text-decoration-color .16s ease;
}

.breadcrumbs a:hover,
.player-breadcrumbs a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.breadcrumbs .breadcrumb_last,
.breadcrumbs [aria-current="page"],
.breadcrumbs > span:last-child:not(.prosettings-bc-sep):not(.breadcrumb-sep),
.player-breadcrumbs .breadcrumb_last,
.player-breadcrumbs [aria-current="page"],
.player-breadcrumbs > span:last-child:not(.prosettings-bc-sep):not(.breadcrumb-sep) {
    color: #111827;
    font-weight: 700;
}

.breadcrumbs .prosettings-bc-sep,
.breadcrumbs .breadcrumb-sep,
.player-breadcrumbs .prosettings-bc-sep,
.player-breadcrumbs .breadcrumb-sep {
    color: #9ca3af;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}

/* Заголовки секций (один стиль по сайту) */
section h2,
.player-section__title,
.team-section__title,
.tournament-section__title {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Карточки, таблицы, базовый фон под тематические блоки */
.player-section,
.team-section,
.tournament-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.player-table,
.team-table,
.tournament-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.player-table th,
.player-table td {
    padding: 6px 4px;
    text-align: left;
}

.player-table tr:nth-child(odd) {
    background: rgba(255,255,255,0.02);
}

/* Текстовые области (обычные записи / страницы) */
.post-card {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

.post-card__title {
    font-size: 22px;
    margin: 0 0 6px;
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--color-primary-hover);
}

.post-card__meta {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.post-card__excerpt {
    font-size: 15px;
    line-height: 1.7;
}

/* Адаптив для текста на телефонах */
@media (max-width: 768px) {
    .content-card {
        margin-bottom: 32px;
    }

    .post-card__title {
        font-size: 20px;
    }

    .post-card__excerpt {
        font-size: 14px;
    }
}


/* Адаптив для крупных сеток (игрок, команда, турнир) */
@media (max-width: 900px) {
    .player-header__main,
    .team-layout,
    .tournament-layout {
        grid-template-columns: 1fr;
    }

    .tournament-header__main {
        grid-template-columns: 1fr;
    }

    .tournament-match__link {
        grid-template-columns: 1fr;
    }

    .tournament-match__teams {
        grid-template-columns: 1fr;
        text-align: center;
    }
}






/* ====================================
   TEAM PAGE
   ==================================== */

.team-header__main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.team-header__flag img {
    width: 32px;
    height: auto;
    border-radius: 3px;
}
.team-header__titles {
    display: flex;
    flex-direction: column;
}
.team-header__name {
    font-size: 26px;
    margin: 0;
}
.team-header__tag {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}
.team-header__rating {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.85;
}
.team-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
.team-players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.team-player-card {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.team-player-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.team-player-card__thumb img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.team-player-card__info {
    padding: 8px 10px 10px;
}
.team-player-card__name {
    font-size: 15px;
    margin: 0 0 4px;
}
.team-player-card__role {
    font-size: 13px;
    opacity: 0.8;
}
.team-player-card:hover {
    background: rgba(255,255,255,0.03);
    transform: translateY(-2px);
}

/* ====================================
   MATCH PAGE
   ==================================== */

.match-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}
.match-header__event {
    display: flex;
    align-items: center;
    gap: 10px;
}
.match-header__event-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.match-header__event-name {
    font-size: 18px;
    font-weight: 600;
}
.match-header__meta {
    text-align: right;
    font-size: 13px;
    opacity: 0.85;
}

.match-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: radial-gradient(circle at top, rgba(var(--brand-color-rgb), 0.15), transparent 60%);
    margin-bottom: 20px;
}
.match-card__team {
    text-align: center;
}
.match-card__team-link {
    color: inherit;
    text-decoration: none;
}
.match-card__team-name {
    font-size: 16px;
    font-weight: 600;
}
.match-card__score {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.match-card__score-separator {
    opacity: 0.7;
}

/* ====================================
   TOURNAMENT SINGLE PAGE
   ==================================== */

.tournament-page { margin-bottom: 40px; }
.tournament-header__main {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}
.tournament-header__logo img {
    width: 110px; height: 110px;
    object-fit: contain;
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 10px;
}
.tournament-header__title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
}
.tournament-header__meta {
    display: grid;
    gap: 6px;
    font-size: 14px;
}
.tournament-header__meta-item {
    display: flex;
    gap: 6px;
}
.tournament-header__meta-label {
    opacity: .7;
    min-width: 96px;
}
.tournament-header__meta-value {
    opacity: .95;
}

.tournament-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.tournament-matches {
    display: grid;
    gap: 10px;
}
.tournament-match {
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    transition: background .15s ease, transform .15s ease;
}
.tournament-match__link {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
}
.tournament-match:hover {
    background: rgba(255,255,255,0.04);
    transform: translateY(-1px);
}
.tournament-match__date {
    font-size: 13px;
    opacity: .75;
}
.tournament-match__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    align-items: center;
    font-weight: 600;
}
.tournament-match__team {
    text-align: center;
    font-size: 15px;
}
.tournament-match__score {
    opacity: .9;
}

.tournament-teams {
    display: grid;
    gap: 8px;
}
.tournament-team {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    transition: background .15s ease;
}
.tournament-team__link {
    display: block;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
}
.tournament-team:hover {
    background: rgba(255,255,255,0.06);
}

.tournament-bracket {
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    overflow: hidden;
}
.tournament-bracket iframe {
    width: 100%;
    min-height: 520px;
    display: block;
    border: 0;
}

/* ====================================
   TOURNAMENTS ARCHIVE
   ==================================== */

.tournaments-archive__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}
.tournaments-archive__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}
.tournaments-filter__select {
    margin-left: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.25);
    color: inherit;
}

.tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.tournament-card {
    background: rgba(0,0,0,0.22);
    border-radius: 12px;
    transition: transform .15s ease, background .15s ease;
}
.tournament-card:hover {
    background: rgba(255,255,255,0.04);
    transform: translateY(-2px);
}
.tournament-card__link {
    display: grid;
    grid-template-rows: auto auto 1fr;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    gap: 10px;
}
.tournament-card__header {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 10px;
}
.tournament-card__logo img {
    width: 56px; height: 56px;
    object-fit: contain;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 6px;
}
.tournament-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.tournament-card__tier {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(var(--brand-color-rgb), 0.15);
    border: 1px solid rgba(var(--brand-color-rgb), 0.25);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tournament-card__meta {
    display: grid;
    gap: 6px;
    font-size: 13px;
}
.tournament-card__meta-item {
    display: flex;
    gap: 6px;
}
.tournament-card__meta-label {
    opacity: 0.7;
    min-width: 72px;
}
.tournament-card__meta-value {
    opacity: 0.95;
}
.tournament-card__excerpt {
    font-size: 14px;
    opacity: 0.9;
}

/* ====================================
   ADAPTIVE
   ==================================== */
@media (max-width: 900px) {
    .player-header__main,
    .team-layout,
    .tournament-layout {
        grid-template-columns: 1fr;
    }
    .tournament-header__main {
        grid-template-columns: 1fr;
    }
    .tournament-match__link {
        grid-template-columns: 1fr;
    }
    .tournament-match__teams {
        grid-template-columns: 1fr;
        text-align: center;
    }
}



/* Архив девайсов использует уже готовые .tournaments-grid карточки */

/* ===== Popular lists (global top) ===== */
.popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.popular-list__item {
  background: rgba(0,0,0,0.22);
  border-radius: 12px;
  transition: transform .15s ease, background .15s ease;
}
.popular-list__item:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}
.popular-list__link {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
}
.popular-list__thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.popular-list__title {
  font-weight: 700;
  margin-bottom: 2px;
}
.popular-list__rank {
  margin-right: 6px;
  opacity: 0.85;
}
.popular-list__sub {
  font-size: 13px;
  opacity: .8;
  margin-bottom: 6px;
}
.popular-list__stats {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 6px;
}
.popular-list__percent {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--brand-color-rgb), 0.15);
  border: 1px solid rgba(var(--brand-color-rgb), 0.25);
}
.popular-list__count { opacity: .85; }





.site-main-wrapper {
    padding: 20px 18px 40px; /* меньше сверху и снизу */
}

/* Белая карта с контентом */
.site-main-card {
    max-width: var(--prosettings-content-width);
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 32px 48px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

/* На маленьких экранах делаем помягче */
@media (max-width: 768px) {
    .site-main-wrapper {
        padding: 8px 10px 24px; /* контент почти сразу под шапкой */
    }
    .site-main-card {
        padding: 0;             /* убираем внутренний отступ карты */
        border-radius: 0;       /* без скруглений */
        box-shadow: none;       /* без тени */
        background: transparent;
    }
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--prosettings-font-main);
    font-weight: 700;
    letter-spacing: 0;
}


.site-content,
.site-content.fixed {
    max-width: none;          /* пусть тянется на всю ширину */
    background: transparent;  /* убираем белый фон позади карточки */
    box-shadow: none;         /* убираем тень, если была */
    padding: 0;               /* убираем внутренние отступы */
}

/* Внутреннюю обёртку тоже делаем прозрачной и без лишних отступов */
.site-content-inner {
    background: transparent;
    box-shadow: none;
    padding: 0;
}




/* 5 карточек: FOV / Offsets / Presetpos */
.pc-viewmodel-main {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 10px;
}

.pc-viewmodel-item-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
    margin-bottom: 4px;
}

.pc-viewmodel-item-value {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}

.pc-viewmodel-note {
    font-size: 13px;
    color: #4b5563;
    margin-top: 10px;
}

/* ---- строка для консоли (копирование) ---- */

.pc-viewmodel-code-block {
    margin-top: 14px;
}

.pc-viewmodel-code-row {
    display: block;
}

.pc-viewmodel-code {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 13px;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
    transition: background-color .15s ease,
                border-color .15s ease,
                box-shadow .15s ease;
}

.pc-viewmodel-code:hover {
    background: #ffffff;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 1px rgba(var(--brand-color-rgb), 0.18);
}

.pc-viewmodel-copy-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.pc-viewmodel-copy-hint--success {
    color: #10b981;
}

/* адаптив сетки параметров */

@media (max-width: 1024px) {
    .pc-viewmodel-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .pc-viewmodel-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }
}

@media (max-width: 480px) {
    .pc-viewmodel-panel {
        padding: 12px 12px 10px;
    }
    .pc-viewmodel-main {
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        row-gap: 8px;
    }
    .pc-viewmodel-item-value {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .pc-viewmodel-main {
        grid-template-columns: 1fr;
    }
}

/* ============================
   Viewmodel — свайпер с руками
   ============================ */

.vm-hands {
    margin-top: 16px;
}

/* вариант, встроенный внутрь карточки */
.vm-hands--inline {
    margin-top: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.vm-hands--inline .vm-hands-swiper {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 280px;        /* чуть ниже по высоте */
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    margin-top: 0;
}

.vm-hands--inline .vm-hands-slide {
    margin: 0;
}

.vm-hands--inline .vm-hands-slide img {
    width: 100%;
    height: auto;             /* сохраняем пропорции изображения */
    display: block;
}

/* навигационные стрелки */
.vm-hands-swiper-prev,
.vm-hands-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.vm-hands-swiper-prev::before { content: "‹"; }
.vm-hands-swiper-next::before { content: "›"; }

.vm-hands-swiper-prev { left: 10px; }
.vm-hands-swiper-next { right: 10px; }

.vm-hands-swiper-prev:hover,
.vm-hands-swiper-next:hover {
    background: var(--brand-color-hover);
}

/* пагинация */
.vm-hands-pagination {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 6;
}

.vm-hands-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    opacity: 1;
    margin: 0 4px !important;
    transition: width .15s ease, background-color .15s ease;
}

.vm-hands-pagination .swiper-pagination-bullet-active {
    width: 18px;
    background: var(--brand-color);
}

/* адаптив по высоте свайпера */

@media (max-width: 768px) {
    .vm-hands--inline .vm-hands-swiper {
        max-height: 230px;
    }
}

@media (max-width: 480px) {
    .vm-hands--inline .vm-hands-swiper {
        max-height: 190px;
    }
}

@media (max-width: 768px) {
    .player-viewmodel-page .vm-nav-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
@media (max-width: 768px) {
    .pc-nav-card__content {
        padding: 14px 14px;
    }
}



.player-settings-page .pc-settings-section {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 6px;
}

.player-settings-page .pc-settings-section--last {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.player-settings-page .pc-settings-section__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
}

.player-settings-page .pc-settings-section__title--sub {
    margin-top: 20px;
}

/* Таблица параметров в виде сетки */

.player-settings-page .pc-settings-table {
    border-top: 1px solid #e5e7eb;
    margin-top: 10px;
}

.player-settings-page .pc-settings-table__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

/* Одна ячейка */

.player-settings-page .pc-settings-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 56px; /* чтобы значения выглядели ровнее между собой */
}

.player-settings-page .pc-settings-cell-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 3px;
}

.player-settings-page .pc-settings-cell-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

/* Адаптив: 2 колонки на средних, 1 — на мобиле */

@media (max-width: 1024px) {
    .player-settings-page .pc-settings-table__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .player-settings-page .pc-settings-table__row {
        grid-template-columns: 1fr;
    }
}



.player-settings-page .cr-nav {
    margin-top: 26px;
}

.player-settings-page .cr-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* 2×2 на среднем экране */
@media (max-width: 1100px) {
    .player-settings-page .cr-nav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1×N на маленьких */
@media (max-width: 640px) {
    .player-settings-page .cr-nav-grid {
        grid-template-columns: 1fr;
    }
}

/* === Launch options (settings page) === */

.player-settings-page .pc-settings-card--launch {
    padding: 20px 20px 18px;
}

.player-settings-page .pc-launch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148,163,184,0.35);
}

.player-settings-page .pc-launch-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-settings-page .pc-launch-body {
    background: #f9fafb;
    border-radius: 10px;
    padding: 10px 12px;
}

.player-settings-page .pc-launch-code {
    display: block;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.4;
    color: #4b5563;
    white-space: nowrap;
    overflow-x: auto;
}

/* кнопка "Скопировать" */

.player-settings-page .pc-launch-copy {
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    background: #e5e7eb;
    color: #111827;
    box-shadow: 0 0 0 1px rgba(148,163,184,0.6);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.player-settings-page .pc-launch-copy:hover {
    background: var(--brand-color-light);
    box-shadow: 0 0 0 1px rgba(var(--brand-color-rgb), 0.32);
}

.player-settings-page .pc-launch-copy:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 1px rgba(var(--brand-color-rgb), 0.42);
}


/* ===============================
   Блок биндов на странице /settings/
   =============================== */

/* Секция биндов — как обычные секции с линией */
.player-settings-page .pc-settings-section--binds {
    padding-top: 16px; /* примерно как у других секций */
    margin-top: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.35); /* линия под заголовком */
}

/* текст при отсутствии биндов */
.player-settings-page .pc-settings-binds__empty {
    margin: 4px 0 0;
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
}

/* Область с текстом биндов */
.player-settings-page .pc-binds-console__body {
    position: relative;
}

/* textarea с биндерами */
.player-settings-page .pc-binds-console__textarea {
    width: 100%;
    min-height: 160px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #111827;
    resize: none;
    box-sizing: border-box;
    white-space: pre;
    overflow: auto;
}

/* Низ: кнопка «Скопировать» и подсказка */
.player-settings-page .pc-binds-console__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 8px;
}

/* Кнопка «Скопировать» */
.player-settings-page .pc-binds-console__copy {
    border-radius: 9999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #374151;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
    white-space: nowrap;
}

.player-settings-page .pc-binds-console__copy:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.player-settings-page .pc-binds-console__copy:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

/* Подсказка / статус копирования */
.player-settings-page .pc-binds-console__hint {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 0;
}

/* класс, который JS добавляет при успешном копировании */
.player-settings-page .pc-binds-copy-status--visible {
    color: #16a34a;
}

/* Адаптив под мобилки */
@media (max-width: 768px) {
    .player-settings-page .pc-binds-console__textarea {
        font-size: 11px;
    }

    .player-settings-page .pc-binds-console__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .player-settings-page .pc-binds-console__copy {
        width: 100%;
        text-align: center;
    }
}

/* убираем нижнюю линию в последней строке таблицы */
.player-settings-page .pc-settings-table__row:last-child {
    border-bottom: none;
}

/* Кнопки */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.btn--full {
    width: 100%;
}

.btn--primary {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
    font-weight: 600;
}

.btn--primary:hover {
    background: var(--brand-color-hover);
    border-color: var(--brand-color-hover);
    filter: none;
}

/* ====================================
   CS GURU — COMMENTS (global)
   Единый модуль комментариев для всего сайта
   ==================================== */

.prosettings-comments {
    /* ближе к основному контенту */
    margin-top: 10px;
    padding: 16px 16px 14px;
    border-radius: 16px;
}

.prosettings-comments__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.prosettings-comments__head .prosettings-comments__sortbar {
    margin: 0;
}

.prosettings-comments__head .prosettings-comments__sortbar--guest {
    margin: 0;
}

.prosettings-comments__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

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

.prosettings-comments__count {
    font-size: 13px;
    color: var(--prosettings-muted, #6b7280);
    font-weight: 600;
}

.prosettings-comments__sortbar{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--prosettings-muted, #6b7280);
}
.prosettings-comments__sortbar--guest{
    margin-bottom: 18px;
}
.prosettings-comments__sort-label{
    font-weight: 700;
    color: var(--prosettings-muted, #6b7280);
}
.prosettings-comments__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.prosettings-comment {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prosettings-comment__body {
    padding: 12px 12px 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

/* верхняя строка: аватар + meta */
.prosettings-comment__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* аватар */
.prosettings-comment__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 1px solid var(--prosettings-border, #e5e7eb);
}

.prosettings-comment__avatar-img {
    width: 40px;
    height: 40px;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}

.prosettings-comment__avatar span.prosettings-comment__avatar-img {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    padding: 0;
}

.prosettings-comment__meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.prosettings-comment__authorline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.prosettings-comment__author {
    font-weight: 800;
    color: var(--prosettings-text, #111827);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prosettings-comment__badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-color-hover);
    background: var(--brand-color-light);
    border: 1px solid rgba(var(--brand-color-rgb), 0.24);
}

.prosettings-comment__author a {
    font-weight: 800;
    color: var(--prosettings-text, #111827);
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prosettings-comment__author a:hover {
    color: var(--prosettings-accent, var(--brand-color));
}

/* Время (иконка + относительная дата) */
.prosettings-comment__timewrap{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.prosettings-comment__time {
    font-size: 12px;
    color: var(--prosettings-muted, #6b7280);
    display: inline;
}

.prosettings-comment__time-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: block;
    opacity: 0.9;
}

.prosettings-comment__text {
    margin-top: 6px;
    font-size: 14px;
    color: var(--prosettings-text, #111827);
    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: break-word;
}


.prosettings-comment__text p {
    margin: 0 0 8px;
}

.prosettings-comment__text p:last-child {
    margin-bottom: 0;
}

.prosettings-comment__moderation {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(var(--brand-color-rgb), 0.12);
    border: 1px solid rgba(var(--brand-color-rgb), 0.25);
    font-size: 13px;
}

/* ===== Actions (votes left, reply right) ===== */
.prosettings-comment__actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.prosettings-comment__votes {
    display: inline-flex;
    gap: 6px;

    align-items: center;
}

.prosettings-vote-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 30px;
    border: 1px solid #cfd6e2;
    border-radius: 6px;
    background: #f5f7fb;
    overflow: hidden;
}

.prosettings-vote-stack__score {
    display: none !important;
}

.prosettings-vote-stack .prosettings-vote {
    padding: 0 8px;
    width: auto;
    height: 30px;
    justify-content: flex-start;
    border-radius: 0;
    border: 0;
    color: #111827;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

.prosettings-vote-stack .prosettings-vote + .prosettings-vote {
    border-left: 1px solid #cfd6e2;
}

.prosettings-vote__arrow {
    display: inline-block;
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
}

.prosettings-vote {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 7px;
    border-radius: 10px;
    border: none;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}

.prosettings-vote:active {
    transform: translateY(1px);
}

.prosettings-vote:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.prosettings-vote--like {
    color: #111827;
}

.prosettings-vote--dislike {
    color: #111827;
}

/* счётчик — того же цвета, что кнопка */
.prosettings-vote__count {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.prosettings-vote--like .prosettings-vote__count { color: #16a34a; }
.prosettings-vote--dislike .prosettings-vote__count { color: #ef4444; }

.prosettings-vote:hover {
    background: #e9edf5;
    box-shadow: none;
    text-decoration: none;
}
.prosettings-vote--like[aria-pressed="true"],
.prosettings-vote--dislike[aria-pressed="true"]{
    background: #e3e9f3;
}

.prosettings-vote-stack.is-disabled {
    opacity: 0.65;
}

.prosettings-vote-stack.is-disabled .prosettings-vote {
    pointer-events: none;
    cursor: default;
}

.prosettings-vote:focus { outline: none; }
.prosettings-vote:focus-visible {
    outline: 2px solid rgba(var(--brand-color-rgb), 0.45);
    outline-offset: 2px;
}


/* SVG-иконки лайка/дизлайка (img/like.svg / img/dislike.svg)
   ВАЖНО: не переопределяем stroke-width/linecap и прочее — используем исходный SVG как есть.
   Hover/active делаем только через лёгкую заливку. */
.prosettings-vote__icon{
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    aspect-ratio: 1 / 1;
    flex: 0 0 18px;
    display: block;
}

.prosettings-vote__count {
    display: inline-flex;
    min-width: 10px;
}

.prosettings-comment__reply .comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--prosettings-text, #111827);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}

.prosettings-comment__reply .comment-reply-link:hover {
    background: #ffffff;
    border-color: #d1d5db;
    transform: translateY(-1px);
}


.prosettings-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    background: transparent;
    border: none;
    padding: 6px 4px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, opacity .15s ease;
}

.prosettings-reply-toggle__icon{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: block;
    opacity: 0.9;
}

.prosettings-reply-toggle:hover {
    color: var(--prosettings-accent, var(--brand-color));
}

.prosettings-reply-toggle:active {
    opacity: 0.85;
}
/* ===== Nested replies ===== */
.prosettings-comments ol.children {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 0 0 14px;
    border-left: 3px solid rgba(17, 24, 39, 0.08);
    display: grid;
    gap: 10px;
}
.prosettings-comments ol.children:empty {
    display: none;
}
.prosettings-comment--hidden {
    display: none;
}

.prosettings-comments__more-replies {
    margin-top: 10px;
    width: fit-content;
}

/* ===== Form ===== */
.prosettings-comments__form {
    margin-top: 14px;
}

.prosettings-comment-form__title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
}

.prosettings-comment-form__textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    background: #ffffff;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    min-height: 110px;
    /* запрещаем ручное растягивание, высоту ведём JS-ом */
    max-height: 320px;
    overflow-y: hidden;
}

.prosettings-comment-form__textarea:focus {
    outline: none;
    border-color: var(--prosettings-accent, var(--brand-color));
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.18);
}

.prosettings-comment-form__submit {
    margin-top: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 800;
    background: var(--prosettings-accent, var(--brand-color));
    color: #111827;
    box-shadow: 0 0 0 1px rgba(var(--brand-color-rgb), 0.35);
    transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.prosettings-comment-form__submit:hover {
    filter: brightness(1.02);
    box-shadow: 0 0 0 1px rgba(var(--brand-color-rgb), 0.6);
}

.prosettings-comment-form__submit:active {
    transform: translateY(1px);
}

.prosettings-comment-form__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Кнопка "Отправить" + сортировка в одну линию */
.prosettings-comment-form__bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.prosettings-comment-form__bottom .prosettings-comment-form__submit{
    margin-top: 0;
}

.prosettings-comment-form__bottom--submit{
    justify-content: flex-start;
}

.prosettings-comments__sort{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--prosettings-muted, #6b7280);
}

.prosettings-comments__sort-select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 12px;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    background: #ffffff;
    color: var(--prosettings-text, #111827);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(17,24,39,.04);
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    -webkit-tap-highlight-color: transparent;
}

.prosettings-comments__sort-select:focus{ outline: none; box-shadow: none; }
.prosettings-comments__sort-select:focus-visible{ box-shadow: none; }

@media (max-width: 520px){
    .prosettings-comment-form__bottom{ flex-direction: column; align-items: stretch; }
    .prosettings-comments__sort{ width: 100%; justify-content: flex-end; }
    .prosettings-comments__sort-select{ width: 100%; }
}


/* ===== Form (user header) ===== */
.prosettings-comments__form--top {
    margin-top: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    border-radius: 12px;
    background: #ffffff;
}

.prosettings-comments__form--top .prosettings-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    align-items: end;
}

.prosettings-comments__form--top .prosettings-comment-form__field {
    grid-column: 1 / -1;
}

.prosettings-comments__form--top .prosettings-comment-form__guest-fields {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    margin-bottom: 8px;
}

.prosettings-comments__form--top .prosettings-comment-form__guest-fields > .prosettings-comment-form__field {
    grid-column: auto;
    min-width: 0;
}

.prosettings-comments__form--top .comment-form-comment {
    grid-column: 1 / 2;
    margin: 0;
}

.prosettings-comments__form--top .prosettings-comment-form__field--textarea {
    margin-bottom: 0;
}

.prosettings-comments__form--top .prosettings-comment-form__bottom--submit {
    grid-column: 2 / 3;
    justify-content: flex-end;
    margin-top: 0;
}

.prosettings-comments__form--top .prosettings-comment-form__bottom--with-consent {
    grid-column: 1 / -1;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.prosettings-comments__form--top .prosettings-comment-form__consent--inline {
    margin: 0;
    align-items: center;
}

.prosettings-comments__form--top .prosettings-comment-form__submit-wrap {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.prosettings-comments__form--top .prosettings-comment-form__submit {
    padding: 10px 20px;
    min-width: 140px;
    color: #ffffff;
    background: var(--brand-color);
    box-shadow: none;
}

.prosettings-comments__form--top .prosettings-comment-form__submit:hover {
    background: var(--brand-color-hover);
    box-shadow: none;
}

.prosettings-comments__form--top .prosettings-comment-form__textarea {
    min-height: 64px;
    border-radius: 8px;
}

@media (max-width: 760px) {
    .prosettings-comments__form--top .prosettings-comment-form {
        grid-template-columns: 1fr;
    }

    .prosettings-comments__form--top .prosettings-comment-form__guest-fields {
        grid-column: 1 / -1;
        max-width: none;
    }

    .prosettings-comments__form--top .comment-form-comment {
        grid-column: 1 / -1;
    }

    .prosettings-comments__form--top .prosettings-comment-form__bottom--submit {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .prosettings-comments__form--top .prosettings-comment-form__bottom--with-consent {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .prosettings-comments__form--top .prosettings-comment-form__submit-wrap {
        margin-left: 0;
        justify-content: flex-start;
    }
}

.prosettings-comments__toolbar{
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 6px;
}

.prosettings-comment-form__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.prosettings-comment-form__user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.prosettings-comment-form__avatar {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    flex: 0 0 40px;
    overflow: hidden;
}

.prosettings-comment-form__avatar-img {
    width: 40px;
    height: 40px;
    border-radius: inherit;
    display: block;
    object-fit: cover;
    line-height: 1;
}

.prosettings-comment-form__avatar span.prosettings-comment-form__avatar-img {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    padding: 0;
}

.prosettings-comment-form__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #374151;
}

.prosettings-comment-form__name {
    font-size: 14px;
    font-weight: 800;
    color: var(--prosettings-text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prosettings-comment-form__field {
    width: 100%;
}

.prosettings-comments .comment-form-with-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prosettings-comments .comment-avatar-preview {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-self: center;
    transform: translateY(-4px);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    background: #f3f4f6;
}

.prosettings-comments .comment-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prosettings-comments .comment-textarea {
    flex: 1 1 auto;
    min-width: 0;
}

.prosettings-comment-form__guest-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.prosettings-comment-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: #f8fafc;
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
}

.prosettings-comment-form__consent-input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex: 0 0 16px;
    accent-color: #64748b;
}

.prosettings-comment-form__consent-text {
    min-width: 0;
}

.prosettings-comment-form__consent-text a {
    color: #334155;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prosettings-comment-form__consent--reply {
    margin-top: 4px;
}

.prosettings-comment-form__input {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    background: #ffffff;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--prosettings-text, #111827);
}

.prosettings-comment-form__input:focus {
    outline: none;
    border-color: var(--prosettings-accent, var(--brand-color));
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.18);
}

.prosettings-comment-form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 520px) {
    .prosettings-comment-form__guest-fields {
        grid-template-columns: 1fr;
    }

    .prosettings-reply-form__guest-fields {
        grid-template-columns: 1fr;
    }

    .prosettings-comments .comment-form-with-avatar {
        gap: 8px;
    }

    .prosettings-comments .comment-avatar-preview {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}

@media (max-width: 360px) {
    .prosettings-comments__title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .prosettings-comments__title-count,
    .prosettings-comments__title-text {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .prosettings-comments__form--top {
        padding: 10px;
    }

    .prosettings-comments__form--top .prosettings-comment-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .prosettings-comments__form--top .prosettings-comment-form__guest-fields {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 6px;
    }

    .prosettings-comments .comment-form-with-avatar {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        gap: 8px;
    }

    .prosettings-comments .comment-avatar-preview {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        transform: none;
        align-self: start;
    }

    .prosettings-comments .comment-textarea {
        min-width: 0;
    }

    .prosettings-comment-form__textarea {
        width: 100%;
        min-height: 88px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .prosettings-comments__form--top .prosettings-comment-form__bottom--with-consent,
    .prosettings-comments__form--top .prosettings-comment-form__bottom--submit {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .prosettings-comment-form__consent {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    .prosettings-comment-form__consent-text {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .prosettings-comments__form--top .prosettings-comment-form__submit-wrap,
    .prosettings-comments__form--top .prosettings-comment-form__submit {
        width: 100%;
        min-width: 0;
    }

    .prosettings-comments__form--top .prosettings-comment-form__submit {
        justify-content: center;
    }

    .prosettings-comments__empty {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (min-width: 1024px) {
    .prosettings-reply-toggle:hover,
    .prosettings-reply-toggle:active,
    .prosettings-reply-toggle:focus-visible {
        color: #111827;
        background: transparent;
        box-shadow: none;
        transform: none;
        text-decoration: none;
        opacity: 1;
    }
}


/* ===== Reply mini form ===== */
.prosettings-comment__replybox {
    display: none;
    margin-top: 10px;
    padding: 12px 12px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid var(--prosettings-border, #e5e7eb);
}

.prosettings-comment__replybox.is-open {
    display: block;
}

.prosettings-reply-form__textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--prosettings-border, #e5e7eb);
    background: #ffffff;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    min-height: 80px;
    /* запрещаем ручное растягивание, высоту ведём JS-ом */
    max-height: 240px;
    overflow-y: hidden;
}

.prosettings-reply-form__textarea:focus {
    outline: none;
    border-color: var(--prosettings-accent, var(--brand-color));
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.18);
}

.prosettings-reply-form__guest-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.prosettings-reply-form__bottom {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.prosettings-reply-form__submit {
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 10px 20px;
    min-width: 140px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    background: var(--brand-color);
    color: #ffffff;
    box-shadow: none;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.prosettings-reply-form__submit:hover {
    background: var(--brand-color-hover);
    box-shadow: none;
}

.prosettings-reply-form__submit:active {
    transform: translateY(1px);
}

.prosettings-reply-form__cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 140px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.45);
    cursor: pointer;
}

.prosettings-reply-form__cancel:hover {
    background: #ffffff;
    color: #111827;
    border-color: rgba(107,114,128,0.45);
}


/* ===== Empty / Load more ===== */
.prosettings-comments__empty {
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px dashed rgba(17, 24, 39, 0.22);
    background: #f9fafb;
    font-size: 14px;
    color: var(--prosettings-muted, #6b7280);
}

.prosettings-comments__more {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.prosettings-comments__more-btn {
    border: 1px solid rgba(148,163,184,0.45);
    background: #f3f4f6;
    color: #111827;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}

.prosettings-comments__more-btn:hover {
    background: #ffffff;
    border-color: rgba(var(--brand-color-rgb), 0.35);
    transform: translateY(-1px);
}

.prosettings-comments__more-btn:active {
    transform: translateY(1px);
}

.prosettings-comments__more-btn[disabled]{
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}


/* ===== Mobile ===== */
@media (max-width: 520px) {
    .prosettings-comments {
        padding: 14px 12px;
    }

    .prosettings-comment__body {
        padding: 12px 12px 10px;
    }

    .prosettings-comment__avatar,
    .prosettings-comment__avatar-img {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .prosettings-comment-form__avatar,
    .prosettings-comment-form__avatar-img {
        width: 40px;
        height: 40px;
    }

    .prosettings-comment__actions {
        justify-content: flex-start;
    }
}
/* активное состояние голосов */
.prosettings-vote[aria-pressed="true"] {
    transform: none;
    opacity: 1;
    filter: brightness(1.05);
}


/* ===== Head title icon ===== */
.prosettings-comments__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.prosettings-comments__title-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
}

/* inline notice вместо alert() */
.prosettings-comments__notice {
    margin: 8px 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    border: 1px solid transparent;
}

.prosettings-comments__notice.is-error {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.30);
    color: #991b1b;
}

.prosettings-comments__notice.is-success {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.30);
    color: #065f46;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 520px) {
    .prosettings-comments__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .prosettings-comment__head {
        gap: 10px;
    }

    .prosettings-comment__avatar,
    .prosettings-comment__avatar-img {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .prosettings-comment-form__consent {
        padding: 12px;
        font-size: 13px;
    }

    .prosettings-comments__notice {
        margin: 10px 0 14px;
        padding: 12px 14px;
    }

    .prosettings-vote {
        padding: 8px 10px;
        gap: 6px;
    }

    .prosettings-comment__actions {
        gap: 8px;
    }
}

/* если иконки монохромные — подкрашиваем через filter */
.prosettings-vote--like .prosettings-vote__img {
    filter: invert(33%) sepia(88%) saturate(467%) hue-rotate(93deg) brightness(92%) contrast(92%);
}
.prosettings-vote--dislike .prosettings-vote__img {
    filter: invert(32%) sepia(78%) saturate(2570%) hue-rotate(343deg) brightness(97%) contrast(102%);
}

.prosettings-comments__title-count{
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
}

.prosettings-comments__title-text{
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
}

.prosettings-toc{
  position: fixed;
  top: 86px;
  left: max(16px, calc((100vw - 1640px) / 4));
  width: 196px;
  max-height: calc(100vh - 96px);
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 30;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.65) transparent;
}

.prosettings-toc:not(.is-ready){
  visibility: hidden;
}

.prosettings-toc.is-hidden{ display:none; }

.prosettings-toc__title{
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-color);
  margin: 0 0 16px;
  letter-spacing: 0;
}

.prosettings-toc__nav{
  display: grid;
  gap: 0;
}

.prosettings-toc__group{
  margin: 20px 0 9px;
  padding: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.prosettings-toc__group:first-child{
  margin-top: 0;
}

.prosettings-toc__link{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 37px;
  padding: 6px 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  color: #6b7280;
  background: transparent;
  transition: background .15s ease, color .15s ease;
  word-break: break-word;
}

.prosettings-toc__link::before{
  display: none;
}

.prosettings-toc__link--child{
  min-height: 37px;
  padding-left: 16px;
  color: #64748b;
  font-size: 14.5px;
}

.prosettings-toc__link:hover{
  background: transparent;
  color: var(--brand-color-hover);
}

.prosettings-toc__link.is-active{
  background: transparent;
  color: var(--brand-color);
  font-weight: 800;
}

@media (max-width: 1100px){
  .prosettings-toc{ display:none; }
}