/* ============================================================
   MOOD ACCOUNT — личный кабинет, написан с нуля на mood-base.css.
   Заменяет раскладку кабинета из mood-overrides.css / casino.css,
   которые в mood больше не подключаются.

   Разметка в mood: #accountModal — это НЕ модалка, а страница.
   mood-account-page.js вешает на body класс .mood-account-page-mode
   каждый раз, когда casino.js «открывает» модалку, поэтому основной
   режим здесь — страница, а модальный оставлен как запасной.

   DOM-контракт casino.js сохранён полностью: все id, data-acc-tab,
   data-acc-panel и классы, которые переключает JS, остались как были.

   Порядок файла:
     1  режим страницы (каркас)
     2  запасной модальный режим
     3  плашки статуса аккаунта
     4  гостевое состояние
     5  сетка «сайдбар + панели»
     6  сайдбар: карточка игрока
     7  сайдбар: навигация
     8  сайдбар: подпись и выход
     9  панели и заголовки
     10 общие примитивы кабинета
     11 профиль: форма
     12 профиль: email и телефон
     13 профиль: дата рождения
     14 профиль: блоки-карточки
     15 профиль: приватность
     16 профиль: рефералы
     17 профиль: Telegram
     18 модалка выбора даты рождения
     19 модалка смены пароля
     20 адаптив
     21 светлая тема
   ============================================================ */

/* ------------------------------------------------------------
   1. РЕЖИМ СТРАНИЦЫ — основной для mood
   ------------------------------------------------------------ */

/* Прячем обычный контент: кабинет занимает всю рабочую область.
   .casino-layout не скрываем целиком — внутри него лежит боковое
   меню (position: fixed), оно должно остаться на месте. */
body.mood-account-page-mode .casino-main,
body.mood-account-page-mode .casino-footer,
body.mood-account-page-mode .footer-shell,
body.mood-account-page-mode .footer-disclaimer {
    display: none !important;
}

/* У .casino-layout в базе min-height: 100vh. Со скрытым .casino-main она
   всё равно занимала целый экран, и кабинет уезжал ниже первого экрана —
   над ним оставалась пустая полоса высотой во весь вьюпорт. */
body.mood-account-page-mode .casino-layout { min-height: 0; }

body.mood-account-page-mode #accountModal {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    overflow: visible;
    /* Кабинет сам держит высоту экрана, чтобы короткие вкладки
       не оставляли пустую полосу фона под собой. */
    min-height: calc(100vh - var(--mood-header-h));
    background: var(--bg);
}

/* Затемнение и крестик нужны только модальному режиму */
body.mood-account-page-mode #accountModalBackdrop,
body.mood-account-page-mode .account-modal-close {
    display: none !important;
}

body.mood-account-page-mode #accountModal .account-modal-box {
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
    overflow: visible;
}

@media (min-width: 1024px) {
    body.mood-account-page-mode #accountModal {
        margin-left: var(--mood-rail-w);
        width: calc(100% - var(--mood-rail-w));
        transition: margin-left var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out);
    }
}

/* ------------------------------------------------------------
   2. ЗАПАСНОЙ МОДАЛЬНЫЙ РЕЖИМ
   Если mood-account-page.js не сработал, кабинет обязан остаться
   пригодным для работы: обычное окно с внутренней прокруткой.
   ------------------------------------------------------------ */
#accountModal .modal-dialog.account-modal-box {
    width: 100%;
    max-width: 1180px;
    max-height: calc(100vh - var(--space-6));
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
}

#accountModal .account-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
#accountModal .account-modal-close:hover {
    background: var(--accent-2-dim);
    border-color: var(--accent-2);
    color: var(--accent-2);
    transform: rotate(90deg);
}
#accountModal .account-modal-close svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   3. ПЛАШКИ СТАТУСА АККАУНТА
   ------------------------------------------------------------ */
#accountModal .account-test-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--warning-dim);
    border-bottom: 1px solid var(--border);
    color: var(--warning);
    font-size: 13px;
    font-weight: 700;
}
#accountModal .account-test-banner-icon {
    flex: none;
    width: 17px;
    height: 17px;
}
#accountModal .account-multi-acc-banner {
    align-items: flex-start;
    background: var(--danger-dim);
    color: var(--danger);
    font-weight: 600;
    line-height: 1.5;
}
#accountModal .account-multi-acc-banner .account-test-banner-icon { margin-top: 2px; }
#accountModal .account-multi-acc-banner-text { font-size: 12.5px; }

body.mood-account-page-mode #accountModal .account-test-banner {
    padding: 12px var(--gutter);
    border-radius: 0;
}

/* ------------------------------------------------------------
   4. ГОСТЕВОЕ СОСТОЯНИЕ
   ------------------------------------------------------------ */
#accountModal .account-guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}
#accountModal .account-guest p {
    max-width: 380px;
    color: var(--text-muted);
    font-size: 15px;
}

/* ------------------------------------------------------------
   5. СЕТКА «ДАШБОРД + РАБОЧАЯ ОБЛАСТЬ»
   Слева — сводка игрока (кто он, сколько денег, что не дозаполнено),
   справа — лента разделов и контент выбранного раздела.
   ------------------------------------------------------------ */
#accountModal .account-modal-body { min-width: 0; }

#accountModal .account-auth {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--space-5);
    /* start, а не stretch: дашборду нужен sticky, а он требует,
       чтобы элемент не растягивался на всю высоту трека */
    align-items: start;
    /* min-height у страничного режима больше контента, и свободную высоту
       grid по умолчанию раздаёт рядам — на мобильном это рвало вёрстку
       пустой полосой между карточкой игрока и панелью */
    align-content: start;
}

#accountModal .acc-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* В модальном режиме прокручивается вся правая колонка целиком, а лента
   разделов липнет к её верху — переключаться можно с любого места вкладки. */
body:not(.mood-account-page-mode) #accountModal .acc-main {
    gap: var(--space-3);
    /* 32px — рамка модалки, 32px — её внутренние отступы сверху и снизу */
    max-height: calc(100vh - var(--space-6) - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
}
body:not(.mood-account-page-mode) #accountModal .acc-main .acc-nav {
    position: sticky;
    top: 0;
    z-index: 4;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
}

body.mood-account-page-mode #accountModal .account-auth {
    min-height: calc(100vh - var(--mood-header-h));
    max-width: 1420px;
    margin-inline: auto;
    padding: var(--space-5) var(--gutter) var(--space-8);
}

/* Модальный режим: у каждой колонки своя прокрутка, а общие отступы держит
   сетка — так лента разделов и контент выровнены по одной вертикали. */
body:not(.mood-account-page-mode) #accountModal .account-auth {
    max-height: calc(100vh - var(--space-6));
    gap: var(--space-4);
    padding: var(--space-4);
}

/* ------------------------------------------------------------
   6. ДАШБОРД ИГРОКА (левая колонка)
   ------------------------------------------------------------ */
#accountModal .acc-dash {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--border);
}

body.mood-account-page-mode #accountModal .acc-dash {
    position: sticky;
    top: calc(var(--mood-header-h) + var(--space-4));
    max-height: calc(100vh - var(--mood-header-h) - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
}

body:not(.mood-account-page-mode) #accountModal .acc-dash {
    max-height: calc(100vh - var(--space-6) - var(--space-6));
    overflow-y: auto;
}

/* ——— Шапка дашборда: кто играет ——— */
#accountModal .acc-dash__hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

/* Свечение в цветах логотипа: два градиента расходятся из угла карточки */
#accountModal .acc-dash__hero-glow {
    position: absolute;
    top: -60%;
    right: -35%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--grad-brand);
    opacity: 0.16;
    filter: blur(28px);
    pointer-events: none;
}

#accountModal .acc-dash__identity {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

#accountModal .acc-avatar-wrap {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
}

#accountModal .acc-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    /* Заглушка — градиент логотипа, чтобы аватар без фото не был серым */
    background: var(--grad-brand);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--border-strong);
    color: var(--btn-primary-text);
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    transition: box-shadow var(--transition), transform var(--transition);
}
#accountModal .acc-avatar:hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px var(--accent);
}

#accountModal .acc-avatar__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
#accountModal .acc-avatar__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* С загруженным фото подложка-градиент не нужна */
#accountModal .acc-avatar-wrap--photo .acc-avatar { background: var(--surface-2); }

#accountModal .acc-avatar__camera {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(5, 8, 13, 0.62);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity var(--transition);
}
#accountModal .acc-avatar:hover .acc-avatar__camera,
#accountModal .acc-avatar:focus-visible .acc-avatar__camera { opacity: 1; }
#accountModal .acc-avatar__camera svg { width: 20px; height: 20px; }

/* Уровень лояльности живёт на аватаре: своя строка под именем её не заслуживает */
#accountModal .acc-avatar__level {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    border: 2px solid var(--bg-card);
    color: var(--btn-primary-text);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

#accountModal .acc-avatar__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#accountModal .acc-dash__who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
#accountModal .acc-dash__name {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
}
#accountModal .acc-dash__level-title {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* Текстовый градиент логотипа — акцент без лишней плашки */
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ID — кнопка: клик копирует, поэтому выглядит нажимаемым */
#accountModal .acc-dash__id {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
#accountModal .acc-dash__id::after {
    content: "";
    width: 11px;
    height: 11px;
    background-color: currentColor;
    /* Иконка «копировать» без лишнего svg в разметке */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 012-2h10'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 012-2h10'/%3E%3C/svg%3E") center/contain no-repeat;
}
#accountModal .acc-dash__id:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

/* ——— Опыт до следующего уровня ——— */
#accountModal .acc-dash__xp {
    position: relative;
    margin-top: var(--space-4);
}
#accountModal .acc-dash__xp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 7px;
}
#accountModal .acc-dash__xp-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
#accountModal .acc-dash__xp-value {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
#accountModal .acc-dash__xp-track {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
}
#accountModal .acc-dash__xp-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
    transition: width var(--dur-3) var(--ease-out);
}

/* ——— Деньги ——— */
#accountModal .acc-dash__wallet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
#accountModal .acc-dash__wallet .acc-balance-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
/* Реальный счёт — главный: тонкая градиентная кромка сверху */
#accountModal .acc-dash__wallet-main {
    position: relative;
    overflow: hidden;
}
#accountModal .acc-dash__wallet-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-brand);
}
#accountModal .acc-dash__wallet .acc-balance-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}
#accountModal .acc-dash__wallet .acc-balance-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    flex-wrap: wrap;
}
#accountModal .acc-dash__wallet .acc-balance-amount strong {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
#accountModal .acc-dash__wallet .acc-balance-cur {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
#accountModal .acc-dash__wallet-bonus .acc-balance-amount strong { color: var(--accent-2); }

#accountModal .acc-dash__wallet-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
#accountModal .acc-dash__wallet-actions .btn { width: 100%; }

/* ——— Чипы статусов ——— */
#accountModal .acc-dash__statuses {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#accountModal .acc-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 10px var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    text-align: left;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
#accountModal .acc-status:hover {
    border-color: var(--border-strong);
    transform: translateX(2px);
}
#accountModal .acc-status__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
}
#accountModal .acc-status__ico svg { width: 16px; height: 16px; }
#accountModal .acc-status__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
#accountModal .acc-status__label {
    font-size: 12px;
    color: var(--text-muted);
}
#accountModal .acc-status__value {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
}

/* Тон статуса задаёт только иконку и значение: рамку красим лишь у проблем,
   иначе три цветные плашки подряд перетягивают внимание с балансов. */
#accountModal .acc-status--ok .acc-status__ico { background: var(--success-dim); color: var(--success); }
#accountModal .acc-status--ok .acc-status__value { color: var(--success); }
#accountModal .acc-status--wait .acc-status__ico { background: var(--warning-dim); color: var(--warning); }
#accountModal .acc-status--wait .acc-status__value { color: var(--warning); }
#accountModal .acc-status--bad .acc-status__ico { background: var(--danger-dim); color: var(--danger); }
#accountModal .acc-status--bad .acc-status__value { color: var(--danger); }
#accountModal .acc-status--bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
#accountModal .acc-status--idle .acc-status__value { color: var(--text-muted); }

/* ——— Факты об аккаунте ——— */
#accountModal .acc-dash__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
#accountModal .acc-dash__fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#accountModal .acc-dash__fact dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
#accountModal .acc-dash__fact dd {
    margin: 0;
    overflow: hidden;
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-muted);
}

#accountModal .acc-dash__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-lg);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 700;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
#accountModal .acc-dash__logout svg { width: 16px; height: 16px; }
#accountModal .acc-dash__logout:hover {
    background: var(--danger-dim);
    border-color: var(--danger);
    color: var(--danger);
}

/* ------------------------------------------------------------
   7. ЛЕНТА РАЗДЕЛОВ (верх правой колонки)
   ------------------------------------------------------------ */
/* На широком экране лента переносится на вторую строку: семь разделов не
   влезают в правую колонку, а прятать их в скрытую прокрутку нельзя —
   до «Самоконтроля» никто не долистает. */
#accountModal .acc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding: 6px;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--border);
}

body.mood-account-page-mode #accountModal .acc-nav {
    position: sticky;
    top: calc(var(--mood-header-h) + var(--space-4));
    z-index: 4;
    /* Полупрозрачная подложка: лента липнет к шапке и не должна
       показывать сквозь себя проезжающие карточки. */
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px);
}

#accountModal .acc-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 9px 14px;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
#accountModal .acc-nav-item svg {
    flex: none;
    width: 17px;
    height: 17px;
}
#accountModal .acc-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}
#accountModal .acc-nav-item.active {
    background: var(--grad-brand);
    color: var(--btn-primary-text);
    box-shadow: 0 6px 18px -10px var(--accent);
}
#accountModal .acc-nav-item.active:hover { color: var(--btn-primary-text); }

#accountModal .acc-nav-item-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
#accountModal .acc-nav-item-title { white-space: nowrap; }

#accountModal .acc-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--accent-2);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
#accountModal .acc-nav-item.active .acc-nav-badge {
    background: rgba(8, 11, 16, 0.28);
    color: var(--btn-primary-text);
}

/* Точка «нужно действие» — для верификации, которая не пройдена */
#accountModal .acc-nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-2);
}
#accountModal .acc-nav-item.active .acc-nav-dot { background: var(--btn-primary-text); }

/* ------------------------------------------------------------
   9. ПАНЕЛИ И ЗАГОЛОВКИ
   ------------------------------------------------------------ */
/* Внешние отступы держит .account-auth в обоих режимах */
#accountModal .acc-panels {
    min-width: 0;
    padding: 0;
}

/* Ключевое правило кабинета: активна ровно одна вкладка.
   Без него casino.js переключает класс .active, а браузер
   продолжает показывать все панели подряд. */
#accountModal .acc-panel { display: none; }
#accountModal .acc-panel.active {
    display: block;
    animation: mood-acc-panel-in var(--dur-3) var(--ease-out);
}

@keyframes mood-acc-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

#accountModal .acc-panel-title {
    position: relative;
    margin: 0 0 var(--space-2);
    padding-bottom: 12px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}
#accountModal .acc-panel-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
}

/* Вводный текст под заголовком панели */
#accountModal .acc-panel > p.muted:first-of-type,
#accountModal .acc-notifications-intro,
#accountModal .payment-history-hint {
    margin: var(--space-3) 0 var(--space-5);
    max-width: 660px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ------------------------------------------------------------
   10. ОБЩИЕ ПРИМИТИВЫ КАБИНЕТА
   ------------------------------------------------------------ */

#accountModal .acc-panel h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Сообщение об успехе/ошибке рядом с формой */
#accountModal .profile-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-4);
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: var(--success-dim);
    border: 1px solid transparent;
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    color: var(--success);
    font-size: 13.5px;
    font-weight: 600;
}
#accountModal .profile-message.error-msg {
    background: var(--danger-dim);
    border-color: color-mix(in srgb, var(--danger) 34%, transparent);
    color: var(--danger);
}

#accountModal .profile-showcase-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}
#accountModal .profile-showcase-hint {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Подпись под заголовком раздела. Заголовок остаётся прямым потомком
   .acc-panel — на него завязаны селекторы i18n в casino.js. */
#accountModal .acc-panel-sub {
    margin: var(--space-3) 0 var(--space-5);
    max-width: 640px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Вертикальный ритм разделов */
#accountModal .acc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Карточка раздела: единый контейнер для всех вкладок кабинета */
#accountModal .acc-card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
#accountModal .acc-card--flat {
    padding: var(--space-4);
    background: var(--surface);
}
#accountModal .acc-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
#accountModal .acc-card__head:last-child { margin-bottom: 0; }
#accountModal .acc-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--accent-dim);
    color: var(--accent);
}
#accountModal .acc-card__ico svg { width: 19px; height: 19px; }
#accountModal .acc-card__ico--warn { background: var(--warning-dim); color: var(--warning); }
#accountModal .acc-card__ico--danger { background: var(--danger-dim); color: var(--danger); }
#accountModal .acc-card__ico--muted { background: var(--surface-2); color: var(--text-muted); }
#accountModal .acc-card__text {
    flex: 1;
    min-width: 0;
}
#accountModal .acc-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}
#accountModal .acc-card__sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
#accountModal .acc-card__aside {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}
#accountModal .acc-card__body > * + * { margin-top: var(--space-3); }
#accountModal .acc-card__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* Статусная пилюля — один вид для всех вкладок */
#accountModal .acc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
#accountModal .acc-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
#accountModal .acc-pill--plain::before { display: none; }
#accountModal .acc-pill--ok { background: var(--success-dim); color: var(--success); }
#accountModal .acc-pill--wait { background: var(--warning-dim); color: var(--warning); }
#accountModal .acc-pill--bad { background: var(--danger-dim); color: var(--danger); }
#accountModal .acc-pill--info { background: var(--accent-dim); color: var(--accent); }

/* Плашка-подсказка внутри вкладки */
#accountModal .acc-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}
#accountModal .acc-note svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--text-dim);
}
#accountModal .acc-note strong { color: var(--text); font-weight: 700; }
#accountModal .acc-note--info {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    color: var(--text);
}
#accountModal .acc-note--info svg { color: var(--accent); }
#accountModal .acc-note--warn {
    background: var(--warning-dim);
    border-color: color-mix(in srgb, var(--warning) 26%, transparent);
    color: var(--text);
}
#accountModal .acc-note--warn svg { color: var(--warning); }
#accountModal .acc-note--danger {
    background: var(--danger-dim);
    border-color: color-mix(in srgb, var(--danger) 26%, transparent);
    color: var(--text);
}
#accountModal .acc-note--danger svg { color: var(--danger); }

/* Пустое состояние / загрузка / ошибка внутри вкладки */
#accountModal .acc-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    text-align: center;
}
#accountModal .acc-state__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-1);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-dim);
}
#accountModal .acc-state__ico svg { width: 21px; height: 21px; }
#accountModal .acc-state__title {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
}
#accountModal .acc-state__text {
    max-width: 380px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}
#accountModal .acc-state--error .acc-state__ico { background: var(--danger-dim); color: var(--danger); }

/* Пустое «Последние операции» — диалог Mood */
#accountModal .acc-recent-empty {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background:
        radial-gradient(ellipse 80% 60% at 12% 0%, rgba(100, 116, 139, 0.08) 0%, transparent 58%),
        radial-gradient(ellipse 70% 55% at 88% 100%, rgba(68, 235, 213, 0.1) 0%, transparent 55%),
        var(--surface);
    overflow: hidden;
}

#accountModal .acc-recent-empty__void {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 10px;
    text-align: center;
}

#accountModal .acc-recent-empty__ledger {
    display: flex;
    color: var(--text-dim);
    opacity: 0.7;
}

#accountModal .acc-recent-empty__ledger svg {
    width: 42px;
    height: 42px;
}

#accountModal .acc-recent-empty__void-face {
    display: flex;
    margin-top: -4px;
}

#accountModal .acc-recent-empty__void-face .mood-face-mini {
    width: 34px;
    height: 34px;
}

#accountModal .acc-recent-empty__void-text {
    margin: 0;
    font: 700 13px/1.3 var(--font-display);
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

#accountModal .acc-recent-empty__thread {
    display: flex;
    justify-content: center;
    padding: 2px 0 6px;
}

#accountModal .acc-recent-empty__thread-line {
    display: block;
    width: 2px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(100, 116, 139, 0.35) 0%, rgba(68, 235, 213, 0.55) 100%);
}

#accountModal .acc-recent-empty__reply {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#accountModal .acc-recent-empty__bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px 14px 14px 4px;
    background: linear-gradient(135deg, rgba(68, 235, 213, 0.1) 0%, var(--surface-2) 55%, var(--surface) 100%);
    border: 1px solid rgba(68, 235, 213, 0.22);
}

#accountModal .acc-recent-empty__bubble-face {
    flex: 0 0 36px;
    display: flex;
}

#accountModal .acc-recent-empty__bubble-face .mood-face-mini {
    width: 36px;
    height: 36px;
}

#accountModal .acc-recent-empty__bubble-copy {
    flex: 1;
    min-width: 0;
}

#accountModal .acc-recent-empty__bubble-lead {
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
}

#accountModal .acc-recent-empty__bubble-lead strong {
    color: var(--c-mint, #44ebd5);
    font-weight: 700;
}

#accountModal .acc-recent-empty__bubble-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
    font-style: italic;
}

#accountModal .acc-recent-empty__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-left: 46px;
}

#accountModal .acc-recent-empty__cta {
    appearance: none;
    cursor: pointer;
    padding: 9px 16px;
    border: none;
    border-radius: 999px;
    font: 700 12px/1 var(--font-sans);
    color: #0a1a1f;
    background: var(--c-mint, #44ebd5);
    transition: background 0.15s, transform 0.15s;
}

#accountModal .acc-recent-empty__cta:hover {
    background: #52f0db;
    transform: translateY(-1px);
}

#accountModal .acc-recent-empty__link {
    appearance: none;
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    font: 600 11.5px/1.4 var(--font-sans);
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#accountModal .acc-recent-empty__link:hover {
    color: var(--c-mint, #44ebd5);
}

@media (max-width: 480px) {
    #accountModal .acc-recent-empty__actions {
        padding-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    #accountModal .acc-recent-empty__cta {
        width: 100%;
        text-align: center;
    }

    #accountModal .acc-recent-empty__link {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    #accountModal .acc-recent-empty__cta:hover { transform: none; }
}

/* Скелет загрузки списков */
#accountModal .acc-skeleton {
    display: block;
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
    background-size: 200% 100%;
    animation: mood-acc-shimmer 1.2s linear infinite;
}
#accountModal .acc-skeleton + .acc-skeleton { margin-top: var(--space-2); }
@keyframes mood-acc-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Пара «подпись — значение» */
#accountModal .acc-kv {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 12.5px;
}
#accountModal .acc-kv dt {
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
#accountModal .acc-kv dd {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    #accountModal .acc-card { padding: var(--space-4); }
    #accountModal .acc-card__head { gap: var(--space-3); }
    #accountModal .acc-state { padding: var(--space-5) var(--space-4); }
}

/* ------------------------------------------------------------
   11. ПРОФИЛЬ: ФОРМА
   ------------------------------------------------------------ */
/* Оформление берёт .acc-card, здесь только внутренний ритм полей */
#accountModal .profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
#accountModal .profile-form .acc-card__head { margin-bottom: 0; }

#accountModal .profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
#accountModal .profile-form-grid .profile-field { margin-bottom: 0; }
#accountModal .profile-field--full { grid-column: 1 / -1; }

#accountModal .profile-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#accountModal .profile-label { margin-bottom: 7px; }

#accountModal .profile-input--readonly {
    background: var(--surface);
    border-style: dashed;
    color: var(--text-muted);
    cursor: default;
}
#accountModal .profile-input--readonly:focus {
    border-color: var(--border);
    box-shadow: none;
}

#accountModal .profile-field-hint {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

#accountModal .profile-additional-details {
    margin: 0;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}
#accountModal .profile-additional-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px var(--space-4);
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-muted);
    transition: color var(--transition);
}
#accountModal .profile-additional-summary::-webkit-details-marker { display: none; }
#accountModal .profile-additional-summary::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--transition);
}
#accountModal .profile-additional-details[open] .profile-additional-summary::before { transform: rotate(45deg); }
#accountModal .profile-additional-summary:hover { color: var(--accent); }
#accountModal .profile-additional-grid { padding: 0 var(--space-4) var(--space-4); }

#accountModal .profile-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-2);
}
#accountModal .profile-form-actions .btn { min-width: 148px; }

/* ------------------------------------------------------------
   12. ПРОФИЛЬ: EMAIL И ТЕЛЕФОН
   ------------------------------------------------------------ */
#accountModal .profile-email-row,
#accountModal .profile-phone-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
#accountModal .profile-email-row .profile-input,
#accountModal .profile-phone-row .profile-input {
    flex: 1;
    min-width: 180px;
}

#accountModal .profile-phone-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 6px 11px;
    border-radius: var(--radius-pill);
    background: var(--success-dim);
    color: var(--success);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
#accountModal .profile-phone-badge--verified::before {
    content: "";
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 6.2l2.8 2.8L10.2 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 6.2l2.8 2.8L10.2 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#accountModal .profile-phone-verify-prompt { flex: none; }

/* Панель ввода кода подтверждения */
#accountModal .profile-phone-verify-inline {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--accent-dim);
    border: 1px solid var(--border);
}
#accountModal .profile-phone-verify-inline .profile-showcase-hint { margin-bottom: 10px; }
#accountModal .profile-verify-code-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
#accountModal .profile-verify-code-input {
    width: 132px;
    flex: none;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.16em;
    text-align: center;
}
#accountModal .profile-phone-verify-inline .profile-message { margin: var(--space-3) 0 0; }

/* ------------------------------------------------------------
   13. ПРОФИЛЬ: ДАТА РОЖДЕНИЯ
   ------------------------------------------------------------ */
#accountModal .profile-dob-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
}
#accountModal .profile-dob-trigger:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
}
#accountModal .profile-dob-trigger--empty { color: var(--text-dim); }
#accountModal .profile-dob-trigger--ok { border-color: color-mix(in srgb, var(--success) 44%, transparent); }
#accountModal .profile-dob-trigger-status {
    display: inline-flex;
    align-items: center;
    flex: none;
}
#accountModal .profile-dob-trigger-icon { width: 17px; height: 17px; }
/* Цвет иконки задаём здесь, а не в SVG: она обязана следовать теме */
#accountModal .profile-dob-trigger-icon--ok { color: var(--success); }
#accountModal .profile-dob-trigger-icon--bad { color: var(--danger); }

/* ------------------------------------------------------------
   14. ПРОФИЛЬ: БЛОКИ-КАРТОЧКИ
   ------------------------------------------------------------ */
#accountModal .profile-referral-block,
#accountModal .profile-telegram-block,
#accountModal .profile-privacy-block { margin-top: var(--space-4); }

#accountModal .profile-referral-block .acc-card__title,
#accountModal .profile-telegram-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}
#accountModal .profile-referral-block .acc-card__sub,
#accountModal .profile-telegram-lead {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

#accountModal .profile-logout-wrap {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------
   15. ПРОФИЛЬ: ПРИВАТНОСТЬ
   ------------------------------------------------------------ */
#accountModal .profile-privacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
}

#accountModal .profile-privacy-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
#accountModal .profile-privacy-item:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
#accountModal .profile-privacy-item__text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

/* Переключатель: скрытый чекбокс + отрисованный трек */
#accountModal .profile-privacy-switch {
    position: relative;
    flex: none;
    display: inline-block;
    width: 40px;
    height: 22px;
}
#accountModal .profile-privacy-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
#accountModal .profile-privacy-switch__ui {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1px solid var(--border);
    transition: background var(--transition), border-color var(--transition);
    pointer-events: none;
}
#accountModal .profile-privacy-switch__ui::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-dim);
    transform: translateY(-50%);
    transition: transform var(--transition), background var(--transition);
}
#accountModal .profile-privacy-input:checked ~ .profile-privacy-switch__ui {
    background: var(--accent-dim);
    border-color: var(--accent);
}
#accountModal .profile-privacy-input:checked ~ .profile-privacy-switch__ui::after {
    background: var(--accent);
    transform: translate(18px, -50%);
}
#accountModal .profile-privacy-input:focus-visible ~ .profile-privacy-switch__ui {
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ------------------------------------------------------------
   16. ПРОФИЛЬ: РЕФЕРАЛЫ
   ------------------------------------------------------------ */
#accountModal .profile-ref-active {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
#accountModal .profile-ref-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
#accountModal .profile-ref-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 700;
}
#accountModal .profile-ref-status--ok { background: var(--success-dim); color: var(--success); }
#accountModal .profile-ref-status--bad { background: var(--danger-dim); color: var(--danger); }
#accountModal .profile-ref-status-ico { font-size: 13px; line-height: 1; }

#accountModal .profile-ref-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--space-2);
}
#accountModal .profile-ref-stat {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}
#accountModal .profile-ref-stat-val {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent);
}
#accountModal .profile-ref-stat-label {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}
#accountModal .profile-ref-ban-reason,
#accountModal .profile-ref-fallback-hint {
    margin: var(--space-2) 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}
#accountModal .profile-ref-banned { display: flex; flex-direction: column; }
#accountModal .profile-ref-loading { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------
   17. ПРОФИЛЬ: TELEGRAM
   ------------------------------------------------------------ */
#accountModal .profile-tg-status {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px var(--space-4);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
}
#accountModal .profile-tg-status--linked {
    background: var(--success-dim);
    color: var(--success);
}
#accountModal .profile-tg-status--pending {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
}
#accountModal .profile-tg-status--err {
    background: var(--danger-dim);
    color: var(--danger);
}
#accountModal .profile-tg-status__icon {
    display: inline-flex;
    flex: none;
    width: 19px;
    height: 19px;
}
#accountModal .profile-tg-status__icon svg { width: 100%; height: 100%; }
#accountModal .profile-tg-status__body { display: flex; flex-direction: column; min-width: 0; }
#accountModal .profile-tg-status__label { font-weight: 700; }
#accountModal .profile-tg-status__handle {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    opacity: 0.82;
}

#accountModal .profile-telegram-link-wrap { margin-top: var(--space-3); }
#accountModal .profile-telegram-link-wrap--empty { margin-top: 0; }
#accountModal .profile-tg-widget-row { min-height: 0; }
#accountModal .profile-tg-link-fallback { margin-top: var(--space-2); }

#accountModal .profile-tg-channel {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding: 11px var(--space-4);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
}
#accountModal .profile-tg-channel--ok { background: var(--success-dim); color: var(--success); }
#accountModal .profile-tg-channel--cta {
    background: var(--accent-dim);
    color: var(--text);
}
#accountModal .profile-tg-channel__ic { font-size: 14px; line-height: 1; }
#accountModal .profile-tg-channel__link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#accountModal .profile-phone-verify-wrap {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
#accountModal .profile-support-bot-wrap {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
#accountModal .profile-support-bot-title { margin: 0 0 6px; font-size: 14px; }
#accountModal .profile-support-bot-lead { margin: 0 0 var(--space-3); }
#accountModal .profile-support-bot-out {
    margin-top: var(--space-3);
    font-size: 13px;
    color: var(--text);
}
#accountModal .profile-support-bot-out--err { color: var(--danger); }
#accountModal .profile-support-bot-ok { margin-bottom: 10px; color: var(--text-muted); }
#accountModal .profile-support-bot-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
#accountModal .profile-support-bot-manual { margin-top: var(--space-3); }
#accountModal .profile-support-bot-manual > summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-muted);
}
#accountModal .profile-support-bot-manual-body { margin-top: 10px; }
#accountModal .profile-support-bot-code {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--accent);
}
#accountModal .profile-support-bot-cmd {
    margin-top: 8px;
    font-size: 12px;
}
#accountModal .profile-support-bot-cmd code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: 11.5px;
}
#accountModal .profile-support-bot-hint {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-dim);
}
#accountModal .profile-subscription-status:not(.hidden) { display: block; }

/* ------------------------------------------------------------
   18. МОДАЛКА ВЫБОРА ДАТЫ РОЖДЕНИЯ
   ------------------------------------------------------------ */
.profile-dob-wheel-modal { z-index: calc(var(--z-modal) + 20); }

.profile-dob-wheel-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: mood-modal-in var(--dur-3) var(--ease-out);
}

.profile-dob-wheel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 13px var(--space-4);
    border-bottom: 1px solid var(--border);
}
.profile-dob-wheel-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}
.profile-dob-wheel-btn {
    padding: 7px 13px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    font-weight: 700;
    transition: background var(--transition), color var(--transition);
}
.profile-dob-wheel-btn--ghost { color: var(--text-muted); }
.profile-dob-wheel-btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.profile-dob-wheel-btn--done {
    background: var(--accent-dim);
    color: var(--accent);
}
.profile-dob-wheel-btn--done:hover { background: var(--accent); color: var(--btn-primary-text); }

.profile-dob-wheel-stage { padding: var(--space-4); }

.profile-dob-wheel-columns-labels {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: var(--space-2);
    margin-bottom: 8px;
}
.profile-dob-wheel-col-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-dim);
}

.profile-dob-wheel-columns {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

/* Подсветка выбранной строки посередине колонок */
.profile-dob-wheel-slot {
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Затемнение верха и низа колонок — эффект «колеса» */
.profile-dob-wheel-mask {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(
        to bottom,
        var(--surface) 0%,
        color-mix(in srgb, var(--surface) 12%, transparent) 32%,
        color-mix(in srgb, var(--surface) 12%, transparent) 68%,
        var(--surface) 100%
    );
    pointer-events: none;
}

.profile-dob-wheel-scroll {
    position: relative;
    height: 190px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.profile-dob-wheel-scroll::-webkit-scrollbar { display: none; }

.profile-dob-wheel-list {
    /* Отбивка сверху и снизу, чтобы крайние значения доезжали до центра */
    padding: 76px 0;
    margin: 0;
}
.profile-dob-wheel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    scroll-snap-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition);
}
.profile-dob-wheel-item:hover { color: var(--text); }

/* ------------------------------------------------------------
   19. МОДАЛКА СМЕНЫ ПАРОЛЯ
   ------------------------------------------------------------ */
#changePasswordModal .modal-dialog { max-width: 420px; }
#changePasswordModal .input-wrap + .input-wrap { margin-top: var(--space-3); }
#changePasswordModal #changePasswordError { margin-top: var(--space-3); }

/* ------------------------------------------------------------
   20. АДАПТИВ
   ------------------------------------------------------------ */

/* Планшет: дашборд уже, панели плотнее */
@media (max-width: 1180px) {
    #accountModal .account-auth { grid-template-columns: 286px minmax(0, 1fr); }
    #accountModal .acc-dash__facts { grid-template-columns: minmax(0, 1fr); }
}

/* Ниже 900px кабинет становится «экраном приложения»: дашборд — компактная
   шапка с деньгами, лента разделов липнет к верху, дальше только контент. */
@media (max-width: 900px) {
    #accountModal .account-auth {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }
    body.mood-account-page-mode #accountModal .account-auth {
        padding: var(--space-3) var(--gutter) var(--space-7);
    }

    /* Карточку-обёртку убираем: внутренние блоки сами выглядят как секции
       мобильного экрана, двойная рамка только съедает ширину. */
    #accountModal .acc-dash {
        gap: var(--space-2);
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }
    body.mood-account-page-mode #accountModal .acc-dash,
    body:not(.mood-account-page-mode) #accountModal .acc-dash {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }

    #accountModal .acc-dash__hero { padding: var(--space-3); }
    #accountModal .acc-dash__xp { margin-top: var(--space-3); }

    /* Три плитки в ряд: статусы — чек-лист «что мешает выводу», поэтому все
       три должны быть видны сразу, а вертикальный список из трёх строк
       отжимал ленту разделов далеко вниз. */
    #accountModal .acc-dash__statuses {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
    }
    #accountModal .acc-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 10px;
    }
    #accountModal .acc-status__ico { width: 26px; height: 26px; }
    #accountModal .acc-status__ico svg { width: 14px; height: 14px; }
    #accountModal .acc-status__label { font-size: 10.5px; }
    #accountModal .acc-status__value {
        font-size: 12px;
        white-space: normal;
        line-height: 1.25;
    }
    #accountModal .acc-status:hover { transform: none; }

    #accountModal .acc-dash__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Лента разделов прилипает к шапке и едет по горизонтали до краёв
       экрана, как таб-бар в приложении: на телефоне это главный способ
       переключаться, и она не должна уезжать вверх вместе с балансом. */
    #accountModal .acc-nav {
        flex-wrap: nowrap;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        border-radius: 0;
        border-inline: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    #accountModal .acc-nav::-webkit-scrollbar { display: none; }
    #accountModal .acc-nav-item { scroll-snap-align: center; }
    body.mood-account-page-mode #accountModal .acc-nav {
        top: var(--mood-header-h);
        padding-block: 8px;
    }
    body:not(.mood-account-page-mode) #accountModal .acc-nav {
        position: sticky;
        top: 0;
        z-index: 4;
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter: blur(14px);
    }
    #accountModal .acc-nav-item { padding: 8px 13px; }

    /* Сверху оставляем место под крестик закрытия: на всплывающем листе он
       висит в углу и иначе ложится на карточку игрока. */
    body:not(.mood-account-page-mode) #accountModal .account-auth {
        max-height: 100vh;
        padding: var(--space-6) var(--gutter) var(--space-6);
    }
    /* На телефоне колонки прокручиваются вместе со страницей: две
       независимые области прокрутки в одном экране только мешают. */
    body:not(.mood-account-page-mode) #accountModal .acc-main,
    body:not(.mood-account-page-mode) #accountModal .acc-dash {
        max-height: none;
        overflow: visible;
    }
    body:not(.mood-account-page-mode) #accountModal .account-modal-body {
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 640px) {
    #accountModal .acc-panel-title { font-size: 20px; }

    #accountModal .profile-form,
    /* На узком экране двухколоночная форма нечитаема */
    #accountModal .profile-form-grid { grid-template-columns: minmax(0, 1fr); }
    #accountModal .profile-form-actions .btn { flex: 1; min-width: 0; }
    #accountModal .profile-privacy-grid { grid-template-columns: minmax(0, 1fr); }

    #accountModal .acc-avatar-wrap,
    #accountModal .acc-avatar { width: 54px; height: 54px; }
    #accountModal .acc-avatar { font-size: 21px; }
    #accountModal .acc-dash__name { font-size: 16px; }
    #accountModal .acc-dash__wallet .acc-balance-amount strong { font-size: 19px; }

    /* Модальный режим на телефоне — лист во весь экран */
    body:not(.mood-account-page-mode) #accountModal { padding: 0; }
    body:not(.mood-account-page-mode) #accountModal .modal-dialog.account-modal-box {
        max-width: none;
        max-height: 100vh;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }
}

@media (max-width: 360px) {
    /* Кнопки кассы в столбик: рядом они становятся по ~120px и текст рвётся */
    #accountModal .acc-dash__wallet-actions { grid-template-columns: minmax(0, 1fr); }
    /* Плитки статусов в два ряда: три колонки на 320px — по 88px, ломается «Не подтверждён» */
    #accountModal .acc-dash__statuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   21. СВЕТЛАЯ ТЕМА
   ------------------------------------------------------------ */
html[data-theme="light"] #accountModal .acc-dash,
html[data-theme="light"] #accountModal .acc-nav { background: var(--bg-elevated); }
html[data-theme="light"] #accountModal .acc-dash__hero,
html[data-theme="light"] #accountModal .acc-dash__wallet .acc-balance-card,
html[data-theme="light"] #accountModal .acc-status,
html[data-theme="light"] #accountModal .acc-dash__facts { background: var(--bg); }
html[data-theme="light"] #accountModal .acc-nav-item:hover { background: var(--surface-2); }
html[data-theme="light"] #accountModal .acc-dash__id { background: var(--bg-elevated); }

@media (max-width: 900px) {
    html[data-theme="light"] #accountModal .acc-dash { background: transparent; }
    html[data-theme="light"] body.mood-account-page-mode #accountModal .acc-nav,
    html[data-theme="light"] body:not(.mood-account-page-mode) #accountModal .acc-nav {
        background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    }
}

/* Аватар и бейдж уровня вырезаны из карточки: рамка повторяет её фон */
html[data-theme="light"] #accountModal .acc-avatar,
html[data-theme="light"] #accountModal .acc-avatar__level { border-color: var(--bg); }
html[data-theme="light"] #accountModal .acc-nav-item.active .acc-nav-badge { background: rgba(16, 24, 40, 0.24); }

html[data-theme="light"] #accountModal .profile-input--readonly { background: var(--bg); }
html[data-theme="light"] #accountModal .profile-additional-details { background: var(--bg); }
html[data-theme="light"] #accountModal .profile-privacy-item { background: var(--bg); }
html[data-theme="light"] #accountModal .profile-ref-stat { background: var(--bg); }
html[data-theme="light"] #accountModal .profile-tg-status--pending { background: var(--bg); }
html[data-theme="light"] .profile-dob-wheel-columns { background: var(--bg); }
html[data-theme="light"] .profile-dob-wheel-mask {
    background: linear-gradient(
        to bottom,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg) 12%, transparent) 32%,
        color-mix(in srgb, var(--bg) 12%, transparent) 68%,
        var(--bg) 100%
    );
}
html[data-theme="light"] #accountModal .acc-avatar__camera { background: rgba(16, 24, 40, 0.58); }

/* ------------------------------------------------------------
   22. ВКЛАДКА «БАЛАНС»
   ------------------------------------------------------------ */
/* Подсказка про крипто-счета: обычная плашка .acc-note внутри карточки счетов */
#accountModal .acc-crypto-deposit-hint {
    display: block;
    margin: var(--space-4) 0 0;
    font-size: 12.5px;
}
#accountModal .acc-crypto-deposit-hint strong { color: var(--accent); font-weight: 800; }
#accountModal .acc-crypto-deposit-hint.hidden { display: none; }

/* Карточка счетов оформлена примитивом .acc-card, здесь только внутренняя раскладка */
#accountModal .acc-wallets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--space-3);
}

#accountModal .acc-wallet-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    overflow: hidden;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: left;
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
        transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
#accountModal .acc-wallet-chip:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-2px);
}
#accountModal .acc-wallet-chip.active {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset;
    cursor: default;
}
#accountModal .acc-wallet-chip.active:hover { transform: none; }
#accountModal .acc-wallet-chip__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
}
#accountModal .acc-wallet-chip-curr {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}
#accountModal .acc-wallet-chip.active .acc-wallet-chip-curr { color: var(--accent); }
#accountModal .acc-wallet-chip__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--btn-primary-text, #06231F);
}
#accountModal .acc-wallet-chip__mark svg { width: 10px; height: 10px; }
#accountModal .acc-wallet-chip-balance {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
#accountModal .acc-wallet-chip__sym {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
}
#accountModal .acc-wallet-chip__name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    color: var(--text-muted);
}
#accountModal .acc-wallet-chip__state {
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
#accountModal .acc-wallet-chip:hover .acc-wallet-chip__state { opacity: 1; }
#accountModal .acc-wallet-chip.active .acc-wallet-chip__state { opacity: 1; color: var(--accent); }

#accountModal .acc-wallets-add {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
#accountModal .acc-wallets-add-label {
    margin-right: auto;
    font-size: 12.5px;
    color: var(--text-muted);
}
#accountModal .acc-wallet-currency-select { min-width: 190px; }

@media (max-width: 560px) {
    #accountModal .acc-wallets-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    #accountModal .acc-wallets-add-label { flex: 1 0 100%; margin: 0 0 var(--space-1); }
    #accountModal .acc-wallet-currency-select { flex: 1; min-width: 0; }
}

#accountModal .acc-balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}
#accountModal .acc-balance-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
/* Мягкая подсветка углом — основной счёт бирюзовый, бонусный коралловый */
#accountModal .acc-balance-card::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--accent-glow);
    filter: blur(38px);
    pointer-events: none;
}
#accountModal .acc-balance-card--bonus::after { background: var(--accent-2-dim); }
#accountModal .acc-balance-label {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#accountModal .acc-balance-amount {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 7px;
}
#accountModal .acc-balance-amount strong {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}
#accountModal .acc-balance-cur {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
}
#accountModal .acc-balance-card--bonus .acc-balance-amount strong { color: var(--accent-2); }

#accountModal .acc-balance-hint {
    margin: var(--space-3) 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
}
#accountModal .acc-balance-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
#accountModal .acc-balance-actions .btn { min-width: 150px; }

/* ------------------------------------------------------------
   23. БАЛАНС: ВЫВОД СРЕДСТВ
   ------------------------------------------------------------ */
#accountModal .acc-withdraw-header { margin-bottom: var(--space-4); }
#accountModal .acc-balance-withdraw-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-3);
    padding: 7px 13px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}
#accountModal .acc-balance-withdraw-back:hover { background: var(--surface-3); color: var(--text); }
#accountModal .acc-withdraw-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
#accountModal .acc-withdraw-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

#accountModal .acc-withdraw-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#accountModal .acc-withdraw-bonus-block {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--warning-dim);
    border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
}
#accountModal .acc-withdraw-bonus-block-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
#accountModal .acc-withdraw-bonus-block-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--warning);
}
#accountModal .acc-withdraw-bonus-block-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

#accountModal .acc-withdraw-panel { min-width: 0; }
#accountModal .acc-withdraw-panel--checklist:empty,
#accountModal .acc-withdraw-panel--checklist:has([hidden]) { display: none; }

#accountModal .acc-withdraw-form {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
}
#accountModal .acc-withdraw-form-head { margin-bottom: var(--space-4); }
#accountModal .acc-withdraw-form-title {
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
}
#accountModal .acc-withdraw-form-lead {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}
#accountModal .acc-withdraw-form-lead strong { color: var(--accent); }

#accountModal .acc-withdraw-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
#accountModal .acc-withdraw-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#accountModal .acc-withdraw-field--full { grid-column: 1 / -1; }
#accountModal .acc-withdraw-label {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#accountModal .acc-withdraw-limits {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
}
#accountModal .acc-withdraw-error {
    margin-top: var(--space-3);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--danger-dim);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
}
#accountModal .acc-withdraw-submit { margin-top: var(--space-4); }

/* Выпадающий список способов вывода и валют */
#accountModal .deposit-custom-select { position: relative; min-width: 0; }
#accountModal .deposit-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14.5px;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
}
#accountModal .deposit-custom-select-trigger:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-3);
}
#accountModal .deposit-custom-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
#accountModal .deposit-custom-select-chevron {
    flex: none;
    font-size: 9px;
    color: var(--text-dim);
    transition: transform var(--transition);
}
#accountModal .deposit-custom-select.open .deposit-custom-select-chevron { transform: rotate(180deg); }

#accountModal .deposit-custom-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    display: none;
    max-height: 244px;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-md);
}
#accountModal .deposit-custom-select.open .deposit-custom-select-dropdown {
    display: block;
    animation: mood-acc-drop-in var(--dur-2) var(--ease-out);
}
@keyframes mood-acc-drop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
#accountModal .deposit-custom-option {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
#accountModal .deposit-custom-option:hover { background: var(--surface-2); }
#accountModal .deposit-custom-option.selected { background: var(--accent-dim); color: var(--accent); font-weight: 700; }
#accountModal .acc-wallet-option--placeholder { color: var(--text-dim); }
#accountModal .deposit-custom-option .acc-wallet-option-symbol,
#accountModal .deposit-custom-option .acc-wallet-option-text { display: inline-block; vertical-align: baseline; }
#accountModal .deposit-custom-option .acc-wallet-option-symbol {
    min-width: 22px;
    margin-right: 8px;
    font-weight: 800;
    color: var(--accent);
    text-align: center;
}
#accountModal .acc-wallet-option--disabled {
    color: var(--text-dim);
    cursor: default;
    pointer-events: none;
}
#accountModal .acc-wallet-option--disabled:hover { background: transparent; }

/* ------------------------------------------------------------
   24. ВКЛАДКА «УВЕДОМЛЕНИЯ»
   ------------------------------------------------------------ */
#accountModal .acc-notifications-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
}
#accountModal .acc-notifications-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
#accountModal .acc-notification-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: default;
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
#accountModal .acc-notification-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
}
#accountModal .acc-notification-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-dim);
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
#accountModal .acc-notification-ico svg { width: 18px; height: 18px; }
#accountModal .acc-notification-main { flex: 1; min-width: 0; }
/* Непрочитанное: акцентная иконка, точка у заголовка и лёгкая подложка */
#accountModal .acc-notification-card--unread {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    cursor: pointer;
}
#accountModal .acc-notification-card--unread .acc-notification-ico {
    background: var(--accent-dim);
    color: var(--accent);
}
#accountModal .acc-notification-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
#accountModal .acc-notification-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
#accountModal .acc-notification-head-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}
#accountModal .acc-notification-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}
#accountModal .acc-notification-time {
    flex: none;
    font-size: 11.5px;
    white-space: nowrap;
    color: var(--text-dim);
}
#accountModal .acc-notification-body {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}
#accountModal .acc-notification-body p + p { margin-top: 8px; }
#accountModal .acc-notification-body strong { color: var(--text); font-weight: 700; }
#accountModal .notif-cta-row,
#accountModal .acc-notification-link {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}
#accountModal .acc-notification-link { display: inline-flex; }
#accountModal .acc-notifications-more-wrap {
    margin-top: var(--space-4);
    text-align: center;
}

@media (max-width: 640px) {
    #accountModal .acc-notification-card { padding: var(--space-3); }
    #accountModal .acc-notification-ico { width: 30px; height: 30px; }
    #accountModal .acc-notification-ico svg { width: 15px; height: 15px; }
    #accountModal .acc-notification-card-head { flex-direction: column; gap: 2px; }
}

/* ------------------------------------------------------------
   27. ВКЛАДКА «ИСТОРИЯ ОПЕРАЦИЙ»
   ------------------------------------------------------------ */
/* Панель фильтров */
#accountModal .acc-history-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}
#accountModal .payment-history-filters,
#accountModal .payment-history-date-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
#accountModal .payment-history-filters-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Сегментированный переключатель типа операций */
#accountModal .acc-seg-group {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
}
#accountModal .acc-seg {
    padding: 7px 15px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
#accountModal .acc-seg:hover { color: var(--text); background: var(--surface-2); }
#accountModal .acc-seg.active {
    background: var(--grad-brand);
    color: var(--btn-primary-text, #06231F);
    box-shadow: var(--shadow-sm);
}

/* Чипы быстрых периодов */
#accountModal .acc-period-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
#accountModal .acc-chip {
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
        background var(--dur-2) var(--ease-out);
}
#accountModal .acc-chip:hover { border-color: var(--border-strong); color: var(--text); }
#accountModal .acc-chip.active {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
    color: var(--accent);
}

#accountModal .payment-history-custom {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
#accountModal .payment-history-custom.hidden { display: none; }
#accountModal .payment-history-date-label {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
#accountModal .payment-history-datetime {
    width: auto;
    min-width: 190px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
#accountModal .payment-history-datetime:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
#accountModal .payment-history-datetime::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
}

/* Список операций: общий примитив истории и карточки «Последние операции» */
#accountModal .acc-history-wrap { margin-top: var(--space-4); }
#accountModal .acc-oplist {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
#accountModal .acc-op {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
#accountModal .acc-op:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
}
#accountModal .acc-oplist--compact .acc-op {
    padding: 10px var(--space-3);
    background: var(--surface);
}
#accountModal .acc-op__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-muted);
}
#accountModal .acc-op__ico svg { width: 18px; height: 18px; }
#accountModal .acc-op__ico--in { background: var(--success-dim); color: var(--success); }
#accountModal .acc-op__ico--out { background: var(--surface-2); color: var(--text-muted); }
#accountModal .acc-op--withdraw .acc-op__ico { background: var(--accent-2-dim); color: var(--accent-2); }
#accountModal .acc-op--bonus .acc-op__ico { background: var(--accent-dim); color: var(--accent); }
#accountModal .acc-op__body { flex: 1; min-width: 0; }
#accountModal .acc-op__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
#accountModal .acc-op__line--sub { margin-top: 2px; }
#accountModal .acc-op__title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
#accountModal .acc-op__amount {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
#accountModal .acc-op__amount--in { color: var(--success); }
#accountModal .acc-op__amount--out { color: var(--text); }
#accountModal .acc-op__detail {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--text-muted);
}
#accountModal .acc-op__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 5px;
}
#accountModal .acc-op__time {
    font-size: 11.5px;
    color: var(--text-dim);
}
#accountModal .acc-op__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
#accountModal .acc-op__id {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    opacity: 0.85;
}
#accountModal .acc-op__id + .acc-op__id { border-left: 1px solid var(--border); padding-left: var(--space-2); }

#accountModal .payment-history-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: 13px;
}

/* ------------------------------------------------------------
   28. ВКЛАДКА «БЕЗОПАСНОСТЬ»
   ------------------------------------------------------------ */
#accountModal .acc-security-item + .acc-security-item,
#accountModal .acc-security-tip { margin-top: var(--space-3); }
#accountModal .acc-security-info { min-width: 180px; }
#accountModal .acc-security-status { color: var(--text-dim); }

#accountModal .player-totp-inline {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
/* Инлайн-шаг 2FA держим уже основного текста: QR и код читаются лучше в колонке */
#accountModal .player-totp-inline-step { max-width: 420px; }
#accountModal .player-totp-lead {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}
#accountModal .player-totp-qr-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
}
#accountModal .player-totp-qr {
    padding: 10px;
    border-radius: var(--radius-md);
    /* QR читается сканером только на белом — фон не темним */
    background: #FFFFFF;
}
#accountModal .player-totp-secret-label {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--text-dim);
}
#accountModal .player-totp-secret {
    display: block;
    margin-bottom: var(--space-3);
    padding: 10px 13px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 13.5px;
    letter-spacing: 0.08em;
    word-break: break-all;
    color: var(--accent);
}
#accountModal .player-totp-field { margin-bottom: var(--space-3); }
#accountModal .player-totp-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
#accountModal .player-totp-inline-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
#accountModal #playerTotpError { margin-top: var(--space-3); }

/* ------------------------------------------------------------
   32. АДАПТИВ ОСТАЛЬНЫХ ВКЛАДОК
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    #accountModal .acc-balance-amount strong { font-size: 26px; }
    #accountModal .acc-balance-actions .btn { flex: 1; min-width: 0; }
    #accountModal .acc-withdraw-form-grid { grid-template-columns: minmax(0, 1fr); }
    #accountModal .acc-withdraw-form { padding: var(--space-4); }
    #accountModal .payment-history-datetime { min-width: 0; width: 100%; }
    #accountModal .payment-history-date-label { flex: 1; min-width: 140px; }
    /* Сегменты типов не влезают в строку — прокручиваем их горизонтально,
       чтобы фильтры не занимали половину экрана. */
    #accountModal .acc-seg-group {
        display: flex;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #accountModal .acc-seg-group::-webkit-scrollbar { display: none; }
    #accountModal .acc-seg { flex: 1 0 auto; padding: 8px 14px; }
    #accountModal .payment-history-custom .btn { flex: 1; }
    #accountModal .acc-op { padding: var(--space-3); gap: var(--space-3); }
    #accountModal .acc-op__ico { width: 32px; height: 32px; }
    #accountModal .acc-op__ico svg { width: 16px; height: 16px; }
    #accountModal .acc-op__line { flex-direction: column; align-items: flex-start; gap: 2px; }
    #accountModal .acc-op__line--sub {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        margin-top: 4px;
    }
    #accountModal .acc-op__foot .btn { width: 100%; }
    /* Действия карточки уходят под заголовок: в строку они не влезают */
    #accountModal .acc-card__head { flex-wrap: wrap; }
    #accountModal .acc-card__aside { flex: 1 0 100%; justify-content: flex-start; }
    #accountModal .acc-card__aside .btn { flex: 1; }
}

/* ------------------------------------------------------------
   33. СВЕТЛАЯ ТЕМА ОСТАЛЬНЫХ ВКЛАДОК
   ------------------------------------------------------------ */
html[data-theme="light"] #accountModal .acc-wallet-chip,
html[data-theme="light"] #accountModal .player-totp-secret {
    background: var(--bg);
}
html[data-theme="light"] #accountModal .history-table th {
    background: var(--bg);
}