/*
Add here your custom css styles Example: p { text-align: center; color: red; }
*/

/* Мобильный Chrome/Android сам раздувает мелкий текст ("font boosting"/
   text autosizer) внутри узких overflow-x:auto flex-блоков - именно
   такими стали пункты сайдбара (.pt_home_sidebar_nav/_cats) на мобильных
   (см. ниже). Из-за этого на телефоне пункты меню становились огромными
   и не помещались в экран ("меню занимает весь экран" - реальная причина,
   а не отсутствие адаптации: медиа-запросы применялись верно, просто
   браузер поверх них сам увеличивал шрифт). У сайта уже есть собственная
   адаптивная вёрстка через media queries, поэтому автоувеличение шрифта
   браузером отключаем полностью и везде.
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ============================================================
   Блочный редизайн карточек видео (youplay)
   ============================================================
   На сайте НЕ один переиспользуемый компонент карточки, а несколько с
   одинаковыми именами классов (.video-wrapper/.video-thumb), но в РАЗНЫХ
   раскладках на разных страницах: сеточная карточка на categories/hashtag,
   но горизонтальная строка на search (col-md-12), третья раскладка на
   history/saved (video-wrapper прямо на колонке, без .video-thumb).
   Правим только ДВА подтверждённо одинаковых паттерна сеточной карточки -
   через составные (не голые) селекторы, чтобы не задеть остальные
   раскладки с теми же именами классов. HTML/JS не трогаем - слайдеры
   (.cus_slider) работают на исходной bootstrap col-* сетке.

   Паттерн 1 - themes/youplay/layout/home/{list,shorts_list}.html
               (карусели на главной + шортсы): .keep-padding > .video-list
   Паттерн 2 - themes/youplay/layout/{videos,hashtag}/list.html
               (сетка категорий/тегов): .no-padding-right-at-all.no-padding-mobile-left > .video-wrapper

   Не покрыто этим проходом (другая разметка карточки - при следующем
   заходе смотреть отдельно): search (горизontальная строка), history,
   saved, playlist, subscriptions, liked-videos, video_studio,
   manage-videos, paid-videos, watch/сайдбар похожих видео.
*/

/* PT_LAYOUT_SETTINGS_START - этот блок перезаписывается со страницы админки
   "Layout Settings" (admin-panel/pages/layout-settings) - не редактируйте
   вручную, правки затрутся при следующем сохранении там. */
:root {
    --pt-card-radius: 12px;
    --pt-card-shadow: 0 1px 3px rgba(0,0,0,.08);
    --pt-card-shadow-hover: 0 12px 28px rgba(0,0,0,.18);
    --pt-card-gap: 14px;
    --pt-card-zoom: scale(1.06);
}
/* PT_LAYOUT_SETTINGS_END */

/* Цветовая схема "DQSQUAD" (ребрендинг с "Ember" по референсам пользователя -
   скриншоты сайта dqsquad.com: красный акцент на почти чёрном фоне, белый
   текст на акцентных поверхностях вместо тёмного). Сам тёмный фон страницы
   задаётся отдельно в night-mode.css (только для тёмного режима - сайт по
   умолчанию открывается в нём), а акцент здесь общий для обоих режимов. */
:root {
    --pt-accent: #E4273D;
    --pt-accent-2: #FF4D5E;
    --pt-accent-ink: #FFFFFF;
    /* Поверхность карточки - светлая тема по умолчанию (тёмная переопределяет
       в night-mode.css). Раньше фона у карточки не было вообще, только у
       превью - на затекстуренном фоне подложка с заголовком/метой сливалась
       с страницей. */
    --pt-card-bg: #FFFFFF;
    --pt-card-border: rgba(20,20,25,.06);
}

/* ---- Светлая тема: чуть сероватый фон вместо голого #f0f2f5, + едва
   заметная текстура зерна для того же "живого" ощущения, что и в тёмной
   теме, но сдержанно. Никаких !important не нужно - это база без
   ночного режима, style.css грузится раньше и не имеет !important на
   background, так что этот слой просто ложится поверх штатно. ---- */
body {
    background-color: #E7E8EB;
    background-image:
        radial-gradient(circle at 10% 8%, rgba(228,39,61,.05), transparent 45%),
        radial-gradient(circle at 92% 82%, rgba(120,130,150,.10), transparent 50%),
        radial-gradient(circle at 3% 3%, rgba(0,0,0,.035) 0, transparent 1.4px),
        radial-gradient(circle at 45% 63%, rgba(0,0,0,.03) 0, transparent 1.4px);
    background-size: auto, auto, 26px 26px, 26px 26px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}

/* ---- Паттерн 1: главная (карусели + шортсы) ---- */
.keep-padding {
    padding-left: calc(var(--pt-card-gap) / 2);
    padding-right: calc(var(--pt-card-gap) / 2);
    margin-bottom: var(--pt-card-gap);
}
.keep-padding .video-list {
    border-radius: var(--pt-card-radius);
    overflow: hidden;
    box-shadow: var(--pt-card-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
    margin-bottom: 0;
}
.keep-padding .video-list:hover {
    transform: translateY(-3px);
    box-shadow: var(--pt-card-shadow-hover);
}
.keep-padding .video-list-image {
    aspect-ratio: 16 / 9;
    background: rgba(0,0,0,.06);
}
.keep-padding .video-list.short .video-list-image {
    aspect-ratio: 9 / 16;
}
.keep-padding .video-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.keep-padding .video-list:hover .video-list-image img {
    transform: var(--pt-card-zoom);
}
/* Play-кнопка по наведению и таймкод. На главной (это разметка "Паттерн 1")
   селекторы из style.css (.video-latest-list .video-thumb ...) не совпадают
   с классами .video-list-image - кнопка и время рендерились в обычном потоке
   документа (сползали вниз под картинку) вместо позиционирования поверх неё. */
.keep-padding .video-list-image .play_hover_btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    border-radius: inherit;
}
.keep-padding .video-list-image:hover .play_hover_btn {
    opacity: 1;
    visibility: visible;
}
.keep-padding .video-list-image .play_hover_btn svg.feather {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) scale(.7);
    width: 45px;
    height: 45px;
    transition: transform .2s ease;
}
.keep-padding .video-list-image:hover .play_hover_btn svg.feather {
    transform: translate(-50%, -50%) scale(1);
}
.keep-padding .video-list-image .duration {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    font-weight: 500;
    font-size: 11px;
    background-color: rgba(0,0,0,.75);
    color: #ededed;
    height: 16px;
    line-height: 14px;
    border-radius: 2px;
}
.keep-padding .pt_vid_fixed_height {
    min-height: 0;
    max-height: none;
    padding: 10px 10px 12px;
}
.keep-padding .video-list-title h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 4px;
}
.keep-padding .video-list-by {
    font-size: 12px;
    opacity: .65;
    line-height: 1.5;
}

/* ---- Паттерн 2: сетка категорий/тегов ---- */
.no-padding-right-at-all.no-padding-mobile-left .video-wrapper {
    border-radius: var(--pt-card-radius);
    overflow: hidden;
    box-shadow: var(--pt-card-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
    margin-bottom: var(--pt-card-gap);
    background: transparent;
    height: auto;
}
.no-padding-right-at-all.no-padding-mobile-left .video-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: var(--pt-card-shadow-hover);
}
.no-padding-right-at-all.no-padding-mobile-left .video-thumb {
    aspect-ratio: 16 / 9;
    background: rgba(0,0,0,.06);
    height: auto;
}
.no-padding-right-at-all.no-padding-mobile-left .video-wrapper.short .video-thumb {
    aspect-ratio: 9 / 16;
}
.no-padding-right-at-all.no-padding-mobile-left .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.no-padding-right-at-all.no-padding-mobile-left .video-wrapper:hover .video-thumb img {
    transform: var(--pt-card-zoom);
}
.no-padding-right-at-all.no-padding-mobile-left .video-title {
    padding: 10px 10px 0;
    max-height: none;
}
.no-padding-right-at-all.no-padding-mobile-left .video-title h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0;
    max-height: none;
}
.no-padding-right-at-all.no-padding-mobile-left .video-info {
    padding: 4px 10px 10px;
    font-size: 12px;
    opacity: .65;
    margin-top: 0;
}
.no-padding-right-at-all.no-padding-mobile-left .descc {
    display: none;
}

/* ---- Паттерн 3: сайдбар похожих видео на странице просмотра
   (themes/youplay/layout/watch/video-sidebar.html) - раньше без своей
   подложки вообще (только превью), заголовок жёстко чёрным текстом
   (.video-title a{color:black} в style.css - на тёмном фоне почти не видно),
   категория - серым бейджем. Даём ту же поверхность/акцент, что и на
   остальных карточках сайта. ---- */
.related-video-wrapper {
    background: var(--pt-card-bg);
    border: 1px solid var(--pt-card-border);
    border-left: 3px solid var(--cat-color, var(--pt-accent));
    border-radius: var(--pt-card-radius, 12px);
    padding: 8px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.related-video-wrapper:hover {
    box-shadow: var(--pt-card-shadow-hover, 0 12px 28px rgba(0,0,0,.18));
}
.related-video-wrapper .ra-thumb {
    border-radius: calc(var(--pt-card-radius, 12px) - 4px);
}
.related-video-wrapper .ra-title .video-title a {
    color: var(--ink, #ECEAE4) !important;
}
.related-video-wrapper .ra-title .video-publisher {
    color: var(--ink-dim, #A7A9AD);
    opacity: .8;
}
.related-video-wrapper .ra-title .video-category a {
    background: var(--accent-soft, rgba(255,90,54,.16)) !important;
    color: var(--pt-accent, #E4273D) !important;
}

/* ---- Карточка видео "С прогрессом": цветная полоса-категория (--cat-color,
   PT_CategoryAccent() в functions_general.php), бейдж цены/шортса (переиспользует
   существующий .shorts_badge), тонкая полоса "продолжить просмотр" (.pt-progress,
   красится в JS из localStorage - см. PT_PaintWatchProgress в extra-js). Один
   набор правил на оба паттерна карточки (главная + категории/теги/поиск). ---- */
.keep-padding .video-list,
.no-padding-right-at-all.no-padding-mobile-left .video-wrapper {
    border-left: 4px solid var(--cat-color, var(--pt-accent));
    background-color: var(--pt-card-bg);
    border-top: 1px solid var(--pt-card-border);
    border-right: 1px solid var(--pt-card-border);
    border-bottom: 1px solid var(--pt-card-border);
}
.keep-padding .video-list-image,
.no-padding-right-at-all.no-padding-mobile-left .video-thumb {
    position: relative;
}
.shorts_badge {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    color: var(--pt-accent-ink) !important;
    font-weight: 700;
    font-size: 12px;
    border-radius: 999px !important;
    padding: 3px 9px !important;
}
.pt-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(0,0,0,.28);
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.pt-progress.is-visible {
    opacity: 1;
}
.pt-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-2));
}

/* ---- Футер: раньше был вообще без оформления (голый текст ссылок через
   точки) - теперь отдельная поверхность с верхней акцентной линией,
   разрядкой, брендовой строкой и подсвеченным hover в цвет темы. ---- */
.pt_footer {
    padding: 0 !important;
    margin-top: 32px;
    border-top: 1px solid rgba(125,125,125,.16);
    position: relative;
}
.pt_footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 160px;
    max-width: 40%;
    height: 2px;
    background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-2), transparent);
}
.pt_footer_inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 20px 28px;
    text-align: center;
}
.pt_footer_brand {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px;
}
.pt_footer_links {
    display: block;
    line-height: 2.4;
}
.pt_footer_links a {
    opacity: .68;
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 1px;
}
.pt_footer_links a:hover {
    opacity: 1;
    color: var(--pt-accent);
    border-color: var(--pt-accent);
}
.pt_footer_links .dot {
    opacity: .3;
    margin: 0 12px;
    font-size: 11px;
}
.pt_footer .copyright {
    margin: 18px 0 0 !important;
    font-size: 11px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .45 !important;
}
@media (max-width: 560px) {
    .pt_footer_links { line-height: 2.2; }
    .pt_footer_links .dot { margin: 0 7px; }
}

/* ---- Страница Shorts (themes/youplay/layout/shorts/content.html) ----
   .roww/.col-md-3w/.col-md-6w не Bootstrap-классы (буква "w" в конце) и
   нигде в style.css не определены вообще - колонка с плеером не была ничем
   отцентрирована/ограничена по ширине, из-за чего верстка "плыла": видео
   прижималось влево, размытая подложка растягивалась на всю ширину, кнопки
   реакций съезжали. Дописываем сам layout, который шаблон предполагал. */
.roww {
    display: flex;
    width: 100%;
    justify-content: center;
}
.col-md-3w {
    flex: 1 1 0%;
}
.col-md-6w.pt_shorts_page {
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
}
@media (max-width: 992px) {
    .col-md-3w { display: none; }
    .col-md-6w.pt_shorts_page { max-width: 100%; }
}
.pt_shorts_swipe .swiper-wrapper .videocontainer {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.pt_shorts_page_title .btn {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    color: var(--pt-accent-ink) !important;
}
.shorts_events > div svg {
    background-color: rgba(0,0,0,.38);
    backdrop-filter: blur(6px);
}

/* ---- Пополнение баланса (card_ru/card_ua/crypto) ---- */
.topup_methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.topup_details_panel {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--pt-card-radius, 12px);
    background: rgba(0,0,0,.04);
}
.topup_amount_row {
    font-size: 16px;
    margin-bottom: 10px;
}
.topup_detail_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.topup_copy_value {
    font-weight: 600;
    word-break: break-all;
    text-align: right;
}
.topup_telegram_btn {
    display: inline-block;
    margin-top: 12px;
    margin-right: 8px;
}
.topup_telegram_btn.disabled {
    pointer-events: none;
    opacity: .5;
}
.topup_cancel_btn {
    margin-top: 12px;
}

/* ============================================================
   Страница пополнения баланса (/wallet) - переделана как отдельная
   полноэкранная "checkout"-страница 1в1 по структуре и УХ с чекаутом
   пополнения на AHOST CMS (templates/user/topup.php): шапка с балансом,
   вкладки способа оплаты, быстрые суммы, поле ввода с валютой,
   кольцо-таймер и код/адрес с копированием на экране ожидания, трастовые
   значки внизу - только в тёмной палитре сайта вместо их светлой, и без
   мульти-сетевого крипто-выбора/live-курсов/чата поддержки, которых нет
   в бэкенде этого скрипта (card_ru/card_ua/crypto - фиксированные,
   admin-panel -> Настройки платежей). Отдельный namespace pt_checkout_*
   (не .topup_*) - тот класс уже занят общей модалкой оплаты pro/видео/
   подписки (modals/payment_modal.html), её не трогаем.
   ============================================================ */
/* /wallet использует обычную шапку сайта (владелец явно попросил вернуть
   её - см. container.html) в родной тёмной красной палитре сайта, не
   отдельной светлой - первая попытка со светлой темой (var(--ink)/
   var(--pt-card-bg) переопределялись на .pt_checkout_shell) не работала:
   night-mode.css переопределяет --pt-card-bg на :root с !important (см.
   night-mode.css, "Поверхность карточки в тёмной теме"), что всегда
   побеждает не-!important переопределение здесь, независимо от
   специфичности/порядка. Проще и надёжнее не воевать с каскадом, а просто
   ничего не переопределять - карточка/текст и так корректно тёмные через
   те же var(--pt-card-bg, #17161A) фоллбэки, что и everywhere на сайте.
   Только футер/рекламные блоки скрыты (см. container.html) - высота под
   контролем без раздувания лишними блоками снизу. Ссылка "назад" - просто
   {{LANG back_to_site}} над карточкой, без дублирующего логотипа/своего
   переключателя языка - шапка сайта уже даёт и то, и другое (обычный
   .pt_lang_switcher из header/content.html, не модалка с картинкой). */
.pt_checkout_shell {
    padding-top: 14px;
    padding-bottom: 14px;
}
.pt_checkout_back_link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-dim, #B8B2A6) !important;
    text-decoration: none;
}
.pt_checkout_back_link:hover {
    color: var(--ink, #ECEAE4) !important;
}
.pt_checkout_history_link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-dim, #B8B2A6);
    text-decoration: none;
}
.pt_checkout_history_link:hover {
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_checkout {
    max-width: 400px;
    margin: 0 auto;
}
.pt_checkout_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.pt_checkout_head h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    margin: 0;
    color: var(--ink, #ECEAE4);
}
.pt_checkout_balance {
    background: linear-gradient(135deg, rgba(228,39,61,.14), rgba(255,77,94,.05));
    border: 1px solid rgba(228,39,61,.25);
    border-radius: 12px;
    padding: 7px 16px;
    text-align: center;
}
.pt_checkout_balance_label {
    display: block;
    font-size: 9px;
    color: var(--ink-mute, #8A8378);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pt_checkout_balance_amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_checkout_tabs {
    display: flex;
    gap: 6px;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 12px;
}
.pt_checkout_tab {
    flex: 1;
    padding: 9px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-dim, #B8B2A6);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s ease, color .2s ease;
}
.pt_checkout_tab.active {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    color: #fff;
}
.pt_checkout_card {
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 16px;
    padding: 22px 20px;
    margin-bottom: 14px;
}
.pt_checkout_empty {
    margin: 0;
    color: var(--ink-mute, #8A8378);
    text-align: center;
}
.pt_checkout_card_head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.pt_checkout_method_icon {
    font-size: 20px;
}
.pt_checkout_card_head h3 {
    font-size: 14px;
    margin: 0;
    color: var(--ink, #ECEAE4);
}
.pt_checkout_method_sub {
    font-size: 11px;
    color: var(--ink-mute, #8A8378);
}
.pt_checkout_quick_row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pt_checkout_qa {
    flex: 1;
    min-width: 60px;
    min-height: 38px;
    background: var(--pt-input-bg, rgba(255,255,255,.04));
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.1));
    color: var(--ink, #ECEAE4);
    padding: 8px 6px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pt_checkout_qa:hover {
    border-color: var(--pt-accent, #E4273D);
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_checkout_qa.active {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    border-color: transparent;
    color: #fff;
}
.pt_checkout_amount_box {
    display: flex;
    background: var(--pt-input-bg, rgba(255,255,255,.04));
    border: 1.5px solid var(--pt-card-border, rgba(255,255,255,.1));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 4px;
}
.pt_checkout_amount_box:focus-within {
    border-color: var(--pt-accent, #E4273D);
}
.pt_checkout_amount_field {
    flex: 1;
    background: none;
    border: none;
    color: var(--ink, #ECEAE4);
    font-size: 16px;
    font-weight: 700;
    padding: 13px 12px;
    outline: 0;
    min-width: 0;
}
.pt_checkout_amount_curr {
    color: var(--ink-dim, #B8B2A6);
    font-size: 12px;
    font-weight: 700;
    padding: 10px 14px;
    background: var(--pt-input-bg, rgba(255,255,255,.06));
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pt_checkout_hint {
    text-align: center;
    font-size: 11px;
    color: var(--ink-mute, #8A8378);
    margin: 6px 0 14px;
}
.pt_checkout_hint_sub {
    display: block;
    color: var(--pt-accent-2, #FF4D5E);
    font-weight: 600;
    margin-top: 2px;
}
/* Двухуровневый выбор крипты (монета -> сеть) - те же select'ы и та же
   "карточка выбранной монеты" под ними, что и в чекауте старого движка. */
.pt_checkout_crypto_select_wrap {
    margin-bottom: 12px;
}
.pt_checkout_crypto_label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-dim, #B8B2A6);
    margin-bottom: 4px;
}
.pt_checkout_select_row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.pt_checkout_select_wrap {
    flex: 1;
    min-width: 0;
}
.pt_checkout_select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 12px 30px 12px 14px;
    background: var(--pt-input-bg, rgba(255,255,255,.04));
    border: 1.5px solid var(--pt-card-border, rgba(255,255,255,.1));
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #ECEAE4);
    cursor: pointer;
    font-family: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238A8378' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}
.pt_checkout_select:hover,
.pt_checkout_select:focus {
    border-color: var(--pt-accent, #E4273D);
    outline: none;
}
.pt_checkout_crypto_summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--pt-input-bg, rgba(255,255,255,.04));
    border: 1.5px solid var(--pt-card-border, rgba(255,255,255,.1));
    border-radius: 12px;
}
.pt_checkout_crypto_summary_icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pt-input-bg, rgba(255,255,255,.05));
    border-radius: 50%;
    flex-shrink: 0;
}
.pt_checkout_crypto_summary_info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.pt_checkout_crypto_summary_name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #ECEAE4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt_checkout_crypto_summary_network {
    font-size: 10px;
    color: var(--ink-mute, #8A8378);
}
.pt_checkout_crypto_summary_rate {
    font-size: 12px;
    font-weight: 700;
    color: var(--pt-accent-2, #FF4D5E);
    background: rgba(228,39,61,.1);
    padding: 3px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}
.pt_checkout_submit_btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-decoration: none;
    background: linear-gradient(135deg, var(--pt-accent, #E4273D), var(--pt-accent-2, #FF4D5E)) !important;
    border: none !important;
}
.pt_checkout_pending_card {
    text-align: center;
}
.pt_checkout_wait_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}
.pt_checkout_wait_ring {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 5px solid var(--pt-card-border, rgba(255,255,255,.1));
    border-top-color: var(--pt-accent, #E4273D);
    border-right-color: var(--pt-accent, #E4273D);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink, #ECEAE4);
    font-variant-numeric: tabular-nums;
}
.pt_checkout_wait_label {
    font-size: 10px;
    color: var(--ink-mute, #8A8378);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pt_checkout_send_block {
    margin-bottom: 14px;
}
.pt_checkout_send_label {
    display: block;
    font-size: 10px;
    color: var(--ink-mute, #8A8378);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.pt_checkout_send_value {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink, #ECEAE4);
}
.pt_checkout_send_sub {
    font-size: 12px;
    color: var(--ink-dim, #B8B2A6);
    margin-top: 2px;
}
.pt_checkout_code_box {
    display: flex;
    gap: 6px;
    align-items: stretch;
    margin-bottom: 4px;
    text-align: left;
}
.pt_checkout_code {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--ink, #ECEAE4);
    word-break: break-all;
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.1));
    background: var(--pt-input-bg, rgba(255,255,255,.04));
}
.pt_checkout_copy_btn {
    flex-shrink: 0;
}
.pt_checkout_recipient {
    text-align: center;
    font-size: 12px;
    color: var(--ink-dim, #B8B2A6);
    margin: 8px 0 2px;
}
.pt_checkout_warn {
    text-align: center;
    font-size: 11px;
    color: var(--pt-accent-2, #FF4D5E);
    margin: 6px 0 14px;
}
.pt_checkout_method_hint {
    text-align: center;
    font-size: 10px;
    color: var(--ink-mute, #8A8378);
    margin-top: 8px;
}
/* Ссылки под кнопкой "Проверить платёж" на экране ожидания крипто-оплаты
   (поддержка / отмена) - у карт вместо этого своя кнопка pt_checkout_cancel_btn. */
.pt_checkout_wait_links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    margin-top: 10px;
}
.pt_checkout_wait_links a {
    color: var(--pt-accent-2, #FF4D5E);
    text-decoration: none;
    font-weight: 600;
}
.pt_checkout_wait_links span {
    color: var(--ink-mute, #8A8378);
}
.pt_checkout_link_btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ink-mute, #8A8378);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}
.pt_checkout_link_btn:hover {
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_checkout_cancel_btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px;
    margin-top: 8px;
    border-radius: 12px;
    background: rgba(228,39,61,.1);
    color: var(--pt-accent-2, #FF4D5E);
    border: 1px solid rgba(228,39,61,.25);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.pt_checkout_cancel_btn:hover {
    background: rgba(228,39,61,.18);
}
.pt_checkout_trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}
.pt_checkout_trust_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 9px 8px;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 12px;
    font-size: 10px;
    color: var(--ink-dim, #B8B2A6);
    font-weight: 600;
}
.pt_checkout_trust_item span:first-child {
    font-size: 17px;
}
@media (max-width: 520px) {
    .pt_checkout_qa { min-width: 52px; padding: 7px 4px; font-size: 11.5px; }
}

/* Статус тарифа на странице /subscriptions - у слова "подписки" в этом
   скрипте два смысла (подписки на каналы vs платный тариф), карточка
   сверху страницы закрывает оба: явно показывает активен ли тариф и даёт
   ссылку на покупку/тарифы, независимо от того, что пользователь ищет. */
.pt_plan_status_card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.pt_plan_status_icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    background: rgba(228,39,61,.12);
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_plan_status_icon.pt_plan_status_active {
    background: rgba(67,160,71,.14);
    color: #4CAF50;
}
.pt_plan_status_text {
    flex: 1;
    min-width: 180px;
}
.pt_plan_status_text b {
    display: block;
    color: var(--ink, #ECEAE4);
    font-size: 14px;
}
.pt_plan_status_text p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ink-mute, #8A8378);
}
.pt_plan_status_btn {
    flex: none;
}

/* ---- Оверлей "купить" по окончании демо-ролика платного видео ---- */
.video_ended_buy_overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    background: rgba(0,0,0,.75);
    text-align: center;
}
.video_ended_buy_overlay_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 360px;
    padding: 24px;
    color: #fff;
}
.video_ended_buy_overlay_inner p {
    font-size: 16px;
    margin: 0 0 14px;
}
.video_ended_buy_overlay_inner .btn {
    margin: 0 6px;
}
.video_ended_buy_overlay_close {
    position: absolute;
    top: -6px;
    right: 6px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* ---- Панель сортировки/фильтра главной (и videos/top, videos/latest) -
   тот же визуальный язык, что у строки категорий сверху (.pt_sec_nav_cats
   в night-mode.css): стеклянная панель, полупрозрачная белая обводка
   пиллов, активный - Ember/красный градиент со свечением. Раньше эта
   панель была на голубых #2196F3 цветах, не в тон остальному сайту, и
   визуально не сочеталась со строкой категорий прямо над ней. ---- */
.pt_home_filter_bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: var(--pt-card-gap, 14px);
    background: rgba(20,13,9,.6);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: var(--pt-card-radius, 12px);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.pt_home_filter_bar_group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pt_home_filter_bar .sort-btn,
.pt_home_filter_bar .filter-badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.75);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pt_home_filter_bar .sort-btn:hover,
.pt_home_filter_bar .filter-badge:hover {
    border-color: rgba(228,39,61,.55);
    background: rgba(228,39,61,.10);
    color: #fff;
}
.pt_home_filter_bar .sort-btn.active {
    background: linear-gradient(135deg, var(--pt-accent, #E4273D), var(--pt-accent-2, #FF4D5E));
    border-color: transparent;
    color: var(--pt-accent-ink, #FFFFFF);
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(228,39,61,.32);
}
.pt_home_filter_bar .filter-badge.active {
    color: #fff;
}
.pt_home_filter_bar .filter-badge.free.active {
    background: linear-gradient(135deg,#43a047,#2e7d32);
    border-color: #2e7d32;
}
.pt_home_filter_bar .filter-badge.premium.active {
    background: linear-gradient(135deg,#f9a825,#f57f17);
    border-color: #f57f17;
}
.pt_home_filter_bar .filter-badge:not(.free):not(.premium).active {
    background: #607d8b;
    border-color: #607d8b;
}
@media (max-width: 560px) {
    .pt_home_filter_bar {
        justify-content: flex-start;
    }
}

/* ---- Акцент по всему сайту на основных кнопках (.btn-main было #04abf2 -
   ничем не связано с Ember-палитрой; .btn-subscribe было отдельным красным
   #F44336 - разнобой цветов). Покрывает в том числе кнопки "Купить полное
   видео"/"Тариф" на странице просмотра и в оверлее по окончании демо. ---- */
.btn-main {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    color: var(--pt-accent-ink) !important;
    border: 0 !important;
}
.btn-main:hover, .btn-main:focus {
    filter: brightness(1.08);
    color: var(--pt-accent-ink) !important;
}
.btn-main:disabled {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    opacity: .5;
}
.btn-default {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: var(--ink, #ECEAE4);
}
.btn-default:hover, .btn-default:focus {
    border-color: var(--pt-accent) !important;
    color: var(--pt-accent);
}
.btn-subscribe {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    color: var(--pt-accent-ink) !important;
}
.btn-subscribed {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

/* ---- Страница просмотра ("Классика"): категорийное меню в сайдбаре
   убрано (см. шаблон), плеер+блок описания/комментариев - одна колонка
   70% СЛЕВА, сайдбар с похожими видео - отдельная колонка 30% СПРАВА.
   В реальном DOM плеер (.col-md-8.player-video) и сайдбар (.col-md-4.desktop)
   - прямые дети одной безымянной обёртки (первый div внутри .row), а блок
   описания/комментариев (второй .col-md-8) - ОТДЕЛЬНЫЙ сосед этой обёртки
   на уровне .row, а не третий ребёнок той же обёртки. Чисто CSS-раскладкой
   (flex/grid только на обёртке) это не решить аккуратно: высота обёртки
   равнялась бы высоте самого длинного из двух её детей (сайдбара, если в
   нём больше карточек, чем помещается видео+его высота), и блок описания
   съезжал вниз под сайдбар вместо того чтобы идти сразу под плеером.
   PT_ReflowWatchLayout() (extra-js/content.html) переносит блок описания
   внутрь той же обёртки, рядом с плеером - после этого grid ниже кладёт
   [плеер, описание] в первую колонку (друг под другом), а сайдбар - во
   вторую колонку на всю высоту обеих строк, независимо от их высоты.
   Только на десктопе (≥992px, как у bootstrap .col-md-*) - на мобильной
   версии сайдбар вообще другой (.mobile вместо .desktop), эти правила
   там не нужны и один раз уже ломали мобильную раскладку без гварда. */
@media (min-width: 992px) {
    .video-player-page > .row > div:first-child {
        display: grid !important;
        grid-template-columns: calc(70% - 20px) 30%;
        column-gap: 20px;
        align-items: start;
        float: none !important;
        width: 100% !important;
    }
    .video-player-page > .row > div:first-child > .col-md-8.player-video {
        grid-column: 1;
        grid-row: 1;
        width: auto !important;
        float: none !important;
    }
    .video-player-page > .row > div:first-child > .col-md-8:not(.player-video) {
        grid-column: 1;
        grid-row: 2;
        width: auto !important;
        float: none !important;
    }
    .video-player-page > .row > div:first-child > .col-md-4.desktop {
        grid-column: 2;
        grid-row: 1 / span 2;
        float: none !important;
        width: auto !important;
    }
}
.pt_watch_related_heading {
    font-size: 16px;
    font-weight: 700;
    margin: 16px 0 12px;
    color: var(--ink, #ECEAE4);
}
/* Метка "Следующее" на первой карточке объединённого списка похожих
   видео (было отдельным блоком "Следующий" со своим заголовком - теперь
   один список, один заголовок, а следующее видео просто помечено). */
.pt_next_badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--pt-accent-ink, #FFFFFF);
    background: linear-gradient(135deg, var(--pt-accent, #E4273D), var(--pt-accent-2, #FF4D5E));
    border-radius: 4px;
    pointer-events: none;
}

/* ============================================================
   Плеер (MediaElement.js, player_type=default - активный на сайте
   сейчас; JWPlayer/FluidPlayer/Plyr не используются, поэтому не трогаем)
   + карточка инфо-блока под видео ("Вариант 2 - Карточка" из макетов).
   ============================================================ */
.mejs__container {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 77, 94, .18);
    box-shadow: 0 12px 30px -12px rgba(228, 39, 61, .28);
}
.mejs__controls {
    background: linear-gradient(0deg, rgba(18, 16, 17, .82), rgba(18, 16, 17, 0)) !important;
}
.mejs__time-total, .mejs__time-buffering {
    background: rgba(255, 255, 255, .18) !important;
}
.mejs__time-loaded {
    background: rgba(255, 255, 255, .12) !important;
}
.mejs__time-current {
    background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-2)) !important;
}
.mejs__time-handle-content {
    background: var(--pt-accent-2) !important;
    border-color: var(--pt-accent-ink) !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 94, .25);
}
.mejs__overlay-button {
    background-color: var(--pt-accent) !important;
}

/* Карточка инфо-блока: весь .video-title.pt_video_info оборачиваем в
   единую панель, а существующие внутренние блоки (у которых УЖЕ есть
   свои border-top/border-bottom и фон из style.css/night-mode.css -
   каждый сам по себе задумывался как самостоятельная строка) сводим к
   одному общему разделителю сверху, без вложенных фонов, чтобы не
   было "двойных" рамок между соседними секциями. */
.pt_watch_info_card {
    background: var(--pt-card-bg, #1E1712) !important;
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.07));
    border-radius: 12px;
    padding: 20px;
}
.pt_watch_info_card .video-options {
    border-top: 1px solid var(--pt-card-border, rgba(255,255,255,.08)) !important;
    border-bottom: none !important;
    margin-top: 16px !important;
    padding: 16px 0 !important;
}
.pt_watch_info_card .publisher-element {
    background: transparent !important;
    border-top: 1px solid var(--pt-card-border, rgba(255,255,255,.08)) !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 16px 0 !important;
}
.pt_watch_buy_banner {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    padding: 16px 0;
}
.pt_watch_buy_banner .btn {
    flex: 1 1 200px;
    text-align: center;
    justify-content: center;
}
.pt_watch_info_card .video-published {
    border-top: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    margin: 0 !important;
    padding: 16px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt_watch_info_card .video-published a {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--pt-accent-2, #FF4D5E) !important;
    background: rgba(228, 39, 61, .12);
    border: 1px solid rgba(228, 39, 61, .22);
    font-size: 13px;
    font-weight: 600;
}
.pt_watch_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.pt_watch_tag {
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    color: var(--ink-dim, #B8B2A6);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
}
.pt_watch_tag:hover {
    color: var(--pt-accent-2, #FF4D5E);
    border-color: rgba(255, 77, 94, .3);
}
.pt_watch_info_card .watch-video-description {
    border-top: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    margin-top: 16px;
    padding-top: 16px;
}

/* ============================================================
   Страница тарифов (/go_pro) - "Выбери свой уровень доступа".
   Переиспользует готовую БД/JS-инфраструку manage_pro/PayUsingWallet(),
   только заново оформлен шаблон (themes/youplay/layout/go_pro/content.html).
   ============================================================ */
.pt_plans_page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 16px 56px;
}
.pt_plans_hero {
    background: linear-gradient(135deg, rgba(228,39,61,.16), rgba(11,11,13,.4)), var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 16px;
    padding: 40px 32px;
    margin-bottom: 32px;
}
.pt_plans_eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pt-accent-2, #FF4D5E);
    margin-bottom: 12px;
}
.pt_plans_hero h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--ink, #ECEAE4);
    margin: 0 0 14px;
    line-height: 1.2;
}
.pt_plans_hero h1 span {
    color: var(--pt-accent, #E4273D);
}
.pt_plans_hero p {
    font-size: 14px;
    color: var(--ink-dim, #B8B2A6);
    max-width: 560px;
    margin: 0;
    line-height: 1.6;
}
.pt_plans_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.pt_plan_card {
    position: relative;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
}
.pt_plan_popular {
    border-color: var(--pt-accent, #E4273D);
    box-shadow: 0 0 0 1px var(--pt-accent, #E4273D), 0 16px 40px -18px rgba(228,39,61,.5);
    transform: translateY(-6px);
}
.pt_plan_badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.pt_plan_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}
.pt_plan_name {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink, #ECEAE4);
    letter-spacing: .01em;
}
.pt_plan_desc {
    font-size: 12px;
    color: var(--ink-mute, #8A8378);
    margin-top: 2px;
}
.pt_plan_icon {
    color: var(--plan-color, var(--pt-accent));
    flex: none;
}
.pt_plan_price {
    margin-bottom: 18px;
}
.pt_plan_price b {
    font-size: 34px;
    font-weight: 800;
    color: var(--ink, #ECEAE4);
}
.pt_plan_price span {
    font-size: 13px;
    color: var(--ink-mute, #8A8378);
    margin-left: 4px;
}
.pt_plan_features {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    flex: 1;
}
.pt_plan_features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-dim, #B8B2A6);
    padding: 6px 0;
}
.pt_plan_features li svg {
    color: var(--plan-color, var(--pt-accent));
    flex: none;
    margin-top: 2px;
}
.pt_plan_btn {
    width: 100%;
    border: none;
    border-radius: 9px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--plan-color, var(--pt-accent));
    cursor: pointer;
}
.pt_plan_btn:hover {
    filter: brightness(1.1);
}
.pt_plans_trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.pt_plans_trust_item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_plans_trust_item div {
    display: flex;
    flex-direction: column;
}
.pt_plans_trust_item b {
    font-size: 13px;
    color: var(--ink, #ECEAE4);
    font-weight: 700;
}
.pt_plans_trust_item span {
    font-size: 12px;
    color: var(--ink-mute, #8A8378);
}
@media (max-width: 900px) {
    .pt_plans_grid { grid-template-columns: 1fr; }
    .pt_plan_popular { transform: none; }
    .pt_plans_trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .pt_plans_trust { grid-template-columns: 1fr; }
    .pt_plans_hero h1 { font-size: 24px; }
}

/* Ссылка "Премиум" в шапке - красная, с короной, как на референсе. */
.pt_premium_link a {
    color: var(--pt-accent-2, #FF4D5E) !important;
    display: flex !important;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
}
.pt_premium_link svg {
    color: var(--pt-accent-2, #FF4D5E);
}

/* Плашка баланса в шапке рядом с профилем (вместо пункта "Кошелёк" в
   выпадающем меню) - клик ведёт на /wallet, которая теперь и есть
   "страница баланса" (после удаления монетизации со второй карточки
   "Заработок" на ней остался только сам баланс пользователя). */
.pt_balance_link a {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink, #ECEAE4) !important;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 20px;
    padding: 7px 14px 7px 10px;
    transition: border-color .2s ease, background .2s ease;
}
.pt_balance_link a:hover {
    border-color: var(--pt-accent, #E4273D);
    background: rgba(228,39,61,.1);
}
.pt_balance_link svg {
    color: var(--pt-accent-2, #FF4D5E);
    flex: none;
}

/* ============================================================
   Постоянный сайдбар на главной (навигация + категории + промо-карточка) -
   по референсу пользователя. Раньше на главной такого блока не было
   вовсе - только верхняя строка категорий (.pt_sec_nav_cats, не трогаем)
   и строка сортировки. Только desktop (≥992px) - на мобильных сайдбар
   уходит наверх узкой прокручиваемой строкой ссылок вместо колонки.
   ============================================================ */
.pt_home_layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.pt_home_sidebar {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 76px;
}
.pt_home_main {
    flex: 1 1 0;
    min-width: 0;
}
.pt_home_sidebar_nav,
.pt_home_sidebar_cats {
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 10px;
}
.pt_home_sidebar_cats h5 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute, #8A8378);
    margin: 4px 8px 8px;
}
.pt_home_sidebar_link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-dim, #B8B2A6) !important;
    margin-bottom: 2px;
    background: rgba(255,255,255,0);
    transition: background .28s ease, color .2s ease, box-shadow .28s ease, transform .15s ease;
}
.pt_home_sidebar_link svg {
    flex: none;
    color: var(--ink-mute, #8A8378);
    transition: color .2s ease;
}
.pt_home_sidebar_link:hover {
    background: rgba(228,39,61,.12);
    color: var(--ink, #ECEAE4) !important;
    transform: translateX(2px);
}
.pt_home_sidebar_link:hover svg {
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_home_sidebar_link.active {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(228,39,61,.4);
}
.pt_home_sidebar_link.active svg {
    color: #fff;
}
.pt_home_sidebar_link.active:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(228,39,61,.55);
}
.pt_home_sidebar_promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 190px;
    background-image: linear-gradient(180deg, rgba(11,11,13,.15) 0%, rgba(11,11,13,.55) 55%, rgba(11,11,13,.92) 100%), url("../img/brand/sidebar-promo-bg.jpg");
    background-size: cover;
    background-position: center 20%;
    border: 1px solid rgba(228,39,61,.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    overflow: hidden;
}
.pt_home_sidebar_promo_title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .02em;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.pt_home_sidebar_promo_sub {
    font-size: 11px;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 4px 0 14px;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.pt_home_sidebar_promo_btn {
    display: block;
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(228,39,61,.4);
    transition: box-shadow .28s ease, transform .15s ease, filter .2s ease;
}
.pt_home_sidebar_promo_btn:hover {
    box-shadow: 0 6px 18px rgba(228,39,61,.55);
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff;
}
/* Мобильный тулбар "Меню | Фильтры" - на десктопе сайдбар/фильтры уже
   видны сами по себе (колонка слева / полоска пилюль), тулбар не нужен.
   На мобильных наоборот: сайдбар и строка фильтров по умолчанию скрыты,
   разворачиваются в выпадающую панель под тулбаром по тапу - раньше
   сайдбар сворачивался в узкую горизонтальную прокрутку пунктов, что на
   маленьком экране было неудобно тыкать и не видно сразу все пункты. */
.pt_mobile_toolbar {
    display: none;
}
@media (max-width: 991px) {
    .pt_home_layout {
        flex-direction: column;
    }
    .pt_mobile_toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }
    .pt_mobile_toolbar_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 10px;
        background: var(--pt-card-bg, #17161A);
        border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
        border-radius: 10px;
        color: var(--ink-dim, #B8B2A6);
        font-size: 13px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        transition: border-color .15s ease, color .15s ease, background .15s ease;
    }
    .pt_mobile_toolbar_btn.active {
        background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
        border-color: transparent;
        color: #fff;
    }
    .pt_home_sidebar {
        display: none;
        flex: 0 0 auto;
        width: 100%;
        position: static;
        flex-direction: column;
        margin-bottom: 12px;
        max-height: 60vh;
        overflow-y: auto;
    }
    .pt_home_sidebar.pt_mobile_open {
        display: flex;
    }
    .pt_home_sidebar_nav,
    .pt_home_sidebar_cats {
        display: flex;
        flex-direction: column;
        flex: none;
    }
    .pt_home_sidebar_promo {
        display: none;
    }
    .pt_home_filter_bar {
        display: none;
    }
    .pt_home_filter_bar.pt_mobile_open {
        display: flex;
    }
}

/* Логотип - присланный пользователем файл (themes/youplay/img/brand/
   logo.png) - это цельная плоская картинка (значок+"DQSQUAD"+слоган
   одним PNG 1774x887), в компактную шапку высотой ~50px она не влезает
   читаемо целиком - текст на ней превратился бы в нечитаемое пятно.
   Взял только левую часть (значок-плей-кнопка) обрезкой через GD
   (themes/youplay/img/brand/logo-icon.png) и добавил название сайта
   рядом обычным HTML-текстом - тем же {{CONFIG name}}, что и везде на
   сайте, той же цветовой переменной, что при масштабировании остаётся
   чётким на любом размере, в отличие от текста, запечённого в растр. */
.pt_logo {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.pt_logo_icon {
    height: 34px;
    width: auto;
}
.pt_logo_word {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink, #ECEAE4);
}

/* Главная: контейнер на всю ширину (без max-width:1400px из style.css) -
   иначе на широких экранах сайдбар не прижат к краю окна, а центрирован
   вместе с колонкой 1400px, оставляя пустые поля по бокам. */
.container-home.pt_home_wide {
    max-width: 100%;
    padding: 0 20px;
}

/* Главная: основная сетка видео (.videos-latest-list, карточки Pattern 1
   .keep-padding) использует голые bootstrap float-колонки col-md-3 (=4 в
   ряд) - при разной высоте карточек (1 vs 2 строки в названии) float-сетка
   ломается и оставляет дыры в раскладке (классическая проблема float-
   "мазонри"). Раньше это было незаметно, т.к. сетка занимала всю ширину
   страницы и названия реже переносились на 2 строки; после добавления
   сайдбара колонка сузилась и дыры стали видны. Фикс - CSS grid вместо
   floats, 5 карточек в ряд по референсу (не 4 из исходного col-md-3),
   только в контексте сайдбара главной (не трогаем те же классы на других
   страницах - там та же сетка на всю ширину, где бага не видно). */
.pt_home_main .videos-latest-list.row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.pt_home_main .videos-latest-list.row > * {
    width: auto;
    float: none;
}
/* Bootstrap's .row:before/.row:after clearfix (content:" "; display:table;)
   становятся настоящими (невидимыми) grid-элементами внутри display:grid -
   занимают первую и последнюю ячейку, сдвигая все настоящие карточки на
   одну позицию и оставляя дыру в начале сетки. Clearfix для grid всё равно
   не нужен - просто убираем псевдоэлементы из потока. */
.pt_home_main .videos-latest-list.row::before,
.pt_home_main .videos-latest-list.row::after {
    content: none;
    display: none;
}
@media (max-width: 1500px) {
    .pt_home_main .videos-latest-list.row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1200px) {
    .pt_home_main .videos-latest-list.row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .pt_home_main .videos-latest-list.row { grid-template-columns: repeat(2, 1fr); }
}

/* Футер теперь короче (см. footer/content.html - только 3 ссылки), а
   юридические страницы (terms/*) часто короче высоты экрана - футер
   (.pt_footer, прямой сосед .yp_side_menu на уровне body) шёл в обычном
   потоке сразу после контента и "подвисал" в середине экрана на таких
   страницах вместо того чтобы быть внизу. Раньше правили только для
   /go_pro (body:has(.pt_plans_page)) - теперь то же самое сайтвайд:
   короткий футер иначе будет "плавать" на любой не очень длинной
   странице, не только на тарифах. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body .yp_side_menu {
    flex: 1 0 auto;
}

/* Главная: блок SEO-текста под сеткой видео (заменил собой строку
   шортс-видео - см. home/content.html и настройку home_seo_text/
   home_seo_text_en в админке -> Общие настройки). H1 убран по просьбе
   пользователя (config home_h1/home_h1_en оставлены в админке - вдруг
   ещё пригодятся под meta title, просто больше не рендерятся на странице). */
.pt_home_seo_text {
    margin-top: 20px;
    padding: 18px 20px;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 12px;
}
.pt_home_seo_text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-dim, #B8B2A6);
}

/* ============================================================
   Юридические страницы (terms/privacy-policy, terms, about-us,
   refund-policy, faqs, 2257, csam) - все используют один и тот же
   шаблон-обёртку (.wo_about_wrapper_parent/.mat_header/.user-setting-panel
   .termsofuse), поэтому одна общая правка приводит все страницы разом к
   стилю сайта - раньше была огромная (280px) цветная плашка-хиро с
   зашитым инлайн-цветом (зелёный/синий по разным страницам), не в тон
   красно-чёрной палитре. !important нужен только там, где перебиваем
   инлайновые style="" в самих шаблонах.
   ============================================================ */
/* .wo_about_wrapper_parent в style.css - position:absolute; left:0; width:100% -
   приём "full-bleed", рассчитанный на старую вёрстку БЕЗ сайдбара, где эта
   плашка была единственным блоком в контейнере и должна была тянуться на
   всю его ширину. Теперь, когда юридические страницы обёрнуты в
   .pt_home_main рядом с сайдбаром (см. блок про сайдбар выше), left:0
   отсчитывается от ближайшего позиционированного предка не сайдбара, а
   всей строки #main-container, и плашка перекрывает сайдбар целиком,
   делая пункты меню нечитаемыми. Внутри .pt_home_main прижимаем её
   обратно в нормальный поток и ограничиваем шириной колонки контента. */
.pt_home_main .wo_about_wrapper_parent {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
}
.wo_about_wrapper_parent {
    min-height: 140px !important;
    max-height: 140px !important;
}
.wo_about_wrapper {
    min-height: 140px !important;
}
.wo_about_wrapper .hero-overlay {
    background: linear-gradient(120deg, #1A0D08 0%, rgba(228,39,61,.35) 55%, rgba(255,77,94,.25) 100%) !important;
}
.mat_header {
    margin-bottom: 40px !important;
}
.mat_header h1 {
    color: var(--ink, #ECEAE4) !important;
}
.mat_header h1 svg {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(228,39,61,.35) !important;
}
.user-setting-panel.termsofuse {
    background: var(--pt-card-bg, #17161A) !important;
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08)) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 28px 30px !important;
}
.user-setting-panel.termsofuse h2 {
    font-size: 17px;
    color: var(--ink, #ECEAE4);
    margin: 26px 0 10px;
}
.user-setting-panel.termsofuse h2:first-child {
    margin-top: 0;
}
.user-setting-panel.termsofuse p,
.user-setting-panel.termsofuse li {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink-dim, #B8B2A6);
}
.user-setting-panel.termsofuse ul {
    padding-left: 20px;
}
.user-setting-panel.termsofuse strong {
    color: var(--pt-accent-2, #FF4D5E);
}
/* FAQ-аккордеон (faqs.html) - те же карточки на том же termsofuse-фоне */
.user-setting-panel.termsofuse .card {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.user-setting-panel.termsofuse .card h4 {
    color: var(--ink, #ECEAE4);
    font-size: 14px;
    margin: 0;
}

/* ============================================================
   Личный кабинет (настройки профиля, кошелёк) - .user-setting-panel
   везде использовал голый bootstrap-фон (background-color:#fff из
   style.css) - единственный большой раздел сайта, так и не получивший
   тёмную DQSQUAD-тему. Одна общая правка вместо точечных на ~15 вкладках
   (general/profile/password/avatar/verification/two_factor/
   blocked_users/manage_sessions/invitation_links/my_affiliates/delete/
   wallet и т.д. - все используют один и тот же класс-обёртку).
   ============================================================ */
.user-setting-panel {
    background: var(--pt-card-bg, #17161A) !important;
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 12px;
    box-shadow: none !important;
}
.user-setting-panel .yp_sett_header h4,
.user-setting-panel h4,
.user-setting-panel h5,
.user-setting-panel label {
    color: var(--ink, #ECEAE4);
}
.user-setting-panel .form-control,
.user-setting-panel select,
.user-setting-panel textarea {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.1)) !important;
    color: var(--ink, #ECEAE4) !important;
    box-shadow: none !important;
}
.user-setting-panel .form-control::placeholder {
    color: var(--ink-mute, #8A8378);
}
.user-setting-panel small,
.user-setting-panel .admin-info,
.user-setting-panel p {
    color: var(--ink-mute, #8A8378);
}

/* Сайдбар вкладок настроек - было: синий акцент (#04abf2, из старой
   палитры плеера/шапки), чёрный текст активного пункта (нечитаемо на
   тёмном фоне сайта). Тот же красный градиент, что у сайдбара главной. */
.settings-sidebar {
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 12px;
    overflow: hidden;
}
.settings-sidebar ul li a {
    color: var(--ink-dim, #B8B2A6) !important;
    transition: background .2s ease, color .2s ease;
}
.settings-sidebar ul li a:hover {
    background: rgba(228,39,61,.1);
    color: var(--ink, #ECEAE4) !important;
}
.settings-sidebar ul li.active a {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2)) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ============================================================
   /balance - "История операций": баланс + журнал заявок на пополнение,
   отдельно от /wallet (сама форма пополнения) - по образцу /balance на
   AHOST CMS (там тоже отдельная страница истории, без форм оплаты).
   В своей, не светлой checkout-палитре: обычная тёмная страница сайта
   с полной навигацией, как и на референсе.
   ============================================================ */
.pt_balance_page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 0;
}
.pt_balance_profile_card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.pt_balance_avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
}
.pt_balance_email {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink, #ECEAE4);
}
.pt_balance_id_badge {
    display: inline-block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-mute, #8A8378);
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    padding: 2px 9px;
    border-radius: 10px;
}
.pt_balance_top_row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
}
.pt_balance_money {
    min-width: 220px;
}
.pt_balance_label {
    display: block;
    font-size: 10px;
    color: var(--ink-mute, #8A8378);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.pt_balance_big {
    font-size: 32px;
    font-weight: 800;
    color: var(--gold, #c9a84c);
    display: block;
}
.pt_balance_progress_bar {
    width: 220px;
    max-width: 100%;
    height: 4px;
    background: var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}
.pt_balance_progress_fill {
    height: 100%;
    background: var(--gold, #c9a84c);
}
.pt_balance_progress_text {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--ink-mute, #8A8378);
}
.pt_balance_actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.pt_balance_topup_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--gold, #c9a84c), #e0c06a) !important;
    color: #1a1408 !important;
    border: none !important;
    font-weight: 700 !important;
}
.pt_balance_quick_row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pt_balance_quick_label {
    font-size: 10px;
    color: var(--ink-mute, #8A8378);
}
.pt_balance_qa {
    background: var(--pt-card-border, rgba(255,255,255,.08));
    color: var(--ink-dim, #B8B2A6);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 20px;
    text-decoration: none;
}
.pt_balance_qa:hover {
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    color: #fff;
}
.pt_balance_history_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.pt_balance_history_head h3 {
    font-size: 14px;
    margin: 0;
    color: var(--ink, #ECEAE4);
}
.pt_balance_all_link {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-dim, #B8B2A6);
    text-decoration: none;
}
.pt_balance_all_link:hover {
    color: var(--pt-accent-2, #FF4D5E);
}
.pt_balance_chat_card {
    margin-top: 18px;
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 16px;
    overflow: hidden;
}
.pt_balance_chat_head {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.pt_balance_chat_messages {
    max-height: 320px;
    min-height: 100px;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt_balance_chat_empty {
    margin: auto;
    color: var(--ink-mute, #8A8378);
    font-size: 12px;
}
.pt_balance_chat_form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
}
.pt_balance_chat_form textarea {
    flex: 1;
    min-height: 40px;
    max-height: 100px;
    resize: none;
    padding: 9px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 12px;
    color: var(--ink, #ECEAE4);
    font-size: 12.5px;
    font-family: inherit;
}
.pt_balance_chat_form button {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-2));
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media (max-width: 600px) {
    .pt_balance_top_row { flex-direction: column; }
    .pt_balance_actions { align-items: flex-start; width: 100%; }
    .pt_balance_quick_row { justify-content: flex-start; }
}
.pt_balance_table_wrap {
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 14px;
    overflow: hidden;
}
.pt_balance_row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1fr;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    font-size: 12.5px;
}
.pt_balance_row:last-child {
    border-bottom: none;
}
.pt_balance_row_head {
    background: rgba(255,255,255,.03);
    font-size: 10px;
    color: var(--ink-mute, #8A8378);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pt_balance_date {
    color: var(--ink-dim, #B8B2A6);
    font-size: 11.5px;
}
.pt_balance_method {
    color: var(--ink, #ECEAE4);
}
.pt_balance_amount {
    font-weight: 700;
    color: var(--green, #3d8b40);
}
.pt_balance_status_confirmed { color: var(--green, #3d8b40); }
.pt_balance_status_pending { color: var(--gold, #c9a84c); }
.pt_balance_status_failed { color: var(--pt-accent-2, #FF4D5E); }
.pt_balance_empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--ink-mute, #8A8378);
    background: var(--pt-card-bg, #17161A);
    border: 1px solid var(--pt-card-border, rgba(255,255,255,.08));
    border-radius: 14px;
}
@media (max-width: 700px) {
    .pt_balance_row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
    .pt_balance_row_head { display: none; }
}