img.solar-icon {
    height: 1.15em;
    width: 1.15em;
    margin: 0 .07em;
    vertical-align: middle;
    display: inline-block;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
    position: relative;
    top: -0.06em;
}

.case-showcase-emoji img.solar-icon, .case-emoji img.solar-icon {
    height: 2em;
    width: 2em;
    top: 0;
    vertical-align: middle;
}

.deposit-menu-tab, .nav-btn, button {
    align-items: center;
}

.nav-btn img.solar-icon, .ghost-btn img.solar-icon, .primary-btn img.solar-icon, .profile-wallet-btn img.solar-icon, .deposit-menu-tab-icon img.solar-icon {
    height: 1.1em;
    width: 1.1em;
    top: 0;
    vertical-align: middle;
    margin: 0 .05em;
}

/* .nav-btn стал flex с gap:7px (см. правило .nav-btn ниже по файлу) --
   собственный margin у иконки теперь только удваивал бы отступ вдобавок к
   gap, поэтому обнуляем его именно здесь. */
.nav-btn img.solar-icon {
    margin: 0;
}

:root {
    --bg: #050810;
    --panel: #0a0e18;
    --panel-2: #101a2c;
    --text: #FFFFFF;
    --muted: #5A7086;
    --line: rgba(255, 255, 255, .06);
    --accent: #3868C0;
    --accent-2: #2A54A0;
    --accent-3: #58A6FF;
    --success: #22C55E;
    --warning: #F59E0B;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 28px;
}

* {
    box-sizing: border-box;
    border-radius: 0 !important;
}

html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #0c1220 0%, #050810 70%) !important;
    color: var(--text) !important;
    font-family: 'Syne', 'Segoe UI', system-ui, sans-serif !important;
}

.sidebar-live {
    background: linear-gradient(180deg, rgba(5, 7, 13, .97), rgba(2, 3, 6, .94)) !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

.sidebar-title, .panel-title {
    color: var(--muted) !important;
    letter-spacing: .2em !important;
}

.live-card {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
}

.live-card:hover {
    border-color: rgba(56, 104, 192, .3) !important;
}

.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 150 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 0 !important;
    background: rgba(3, 4, 7, .96) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6) !important;
}

.brand-btn {
    background: rgba(56, 104, 192, .08) !important;
    border-color: rgba(56, 104, 192, .24) !important;
    color: #58A6FF !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

.nav-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, .13) !important;
}

.nav-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border: none !important;
    color: #fff !important;
}

.primary-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .36) !important;
}

.primary-btn:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 30px rgba(88, 166, 255, .44) !important;
}

.wheel-sell-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 18px rgba(56, 104, 192, .3) !important;
}

.speed-toggle-pill {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 16px rgba(56, 104, 192, .3) !important;
}

.speed-toggle {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.ghost-btn.accent {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #58A6FF !important;
}

.hero-banner, .profile-card, .case-card, .inventory-card, .item-hero, .item-related-panel, .profile-hero, .ops-layout .profile-card, .case-showcase, .case-info-panel, .fuse-panel, .inventory-panel {
    background: rgba(4, 6, 12, .85) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .5) !important;
}

.case-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(56, 104, 192, .38) !important;
    box-shadow: 0 0 36px rgba(56, 104, 192, .14), 0 8px 24px rgba(0, 0, 0, .5) !important;
}

.case-card:active {
    transform: translateY(-1px) scale(.98) !important;
}

.case-card {
    position: relative !important;
    overflow: hidden !important;
}

.case-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #3868C0, transparent) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform .3s ease !important;
    pointer-events: none !important;
}

.case-card:hover::after {
    transform: scaleX(1) !important;
}

.hero-banner {
    position: relative !important;
    overflow: hidden !important;
}

.hero-copy h1 {
    font-size: 26px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    font-family: 'DM Mono', 'Space Grotesk', system-ui, sans-serif !important;
}

.hero-badge {
    background: linear-gradient(135deg, rgba(56, 104, 192, .88), rgba(30, 64, 130, .78)) !important;
    color: #fff !important;
}

.hero-banner::before {
    content: 'WIN' !important;
    position: absolute !important;
    right: -10px !important;
    bottom: -28px !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 200px !important;
    font-weight: 800 !important;
    color: rgba(30, 64, 130, .05) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 0 !important;
}

.hero-copy, .promo-card {
    position: relative !important;
    z-index: 1 !important;
}

.promo-stat {
    background: rgba(4, 6, 12, .7) !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

.promo-stat:hover {
    border-color: rgba(56, 104, 192, .3) !important;
}

input, select, textarea, .search-wrap input, .ops-input, .auth-input, .ops-weight-input, .ops-image-input, .ops-icon-size-input, .ops-ladder-row input {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: var(--text) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(56, 104, 192, .4) !important;
    outline: none !important;
    box-shadow: 0 0 16px rgba(56, 104, 192, .1) !important;
}

.loot-card, .inventory-card, .target-card, .related-card, .roulette-item {
    background: rgba(5, 7, 13, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.loot-card:hover, .inventory-card:hover, .target-card:hover, .related-card:hover {
    border-color: rgba(56, 104, 192, .28) !important;
}

.target-card.active {
    outline: 2px solid rgba(255, 255, 255, .24) !important;
    background: linear-gradient(180deg, rgba(56, 104, 192, .18), rgba(255, 255, 255, .05)) !important;
}

.loot-chip {
    background: rgba(5, 7, 13, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.loot-chip:hover {
    border-color: rgba(56, 104, 192, .28) !important;
}

.case-price {
    color: #FFFFFF !important;
}

.case-visual {
    background: rgba(4, 6, 12, .5) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.modal {
    background: rgba(2, 2, 4, .86) !important;
}

.modal-card {
    background: linear-gradient(180deg, #080b15, #030509) !important;
    border-color: rgba(56, 104, 192, .14) !important;
}

.icon-close {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

.roulette-window {
    background: rgba(4, 6, 12, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.roulette-item {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.roulette-pointer {
    background: linear-gradient(180deg, #58A6FF, #fff, #3868C0) !important;
    box-shadow: 0 0 20px rgba(88, 166, 255, .5) !important;
}

.roulette-browser-edge {
    background: linear-gradient(90deg, transparent, rgba(2, 2, 4, .45), rgba(2, 2, 4, .94)) !important;
}

.toast {
    background: #06080f !important;
    border-color: rgba(56, 104, 192, .2) !important;
}

.auth-card {
    background: linear-gradient(180deg, rgba(7, 10, 17, .98), rgba(3, 5, 9, .98)) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

.auth-badge {
    background: rgba(56, 104, 192, .18) !important;
}

.auth-input {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .09) !important;
}

.profile-tab.is-active, .ops-tab.is-active {
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58A6FF !important;
}

.deposit-fullscreen-shell, .support-inapp-shell {
    background: linear-gradient(180deg, #080b14, #030509) !important;
}

.deposit-menu-tab.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .22), rgba(30, 64, 130, .12)) !important;
    border-color: rgba(56, 104, 192, .35) !important;
}

.payment-method-btn {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.payment-method-btn:hover {
    border-color: rgba(56, 104, 192, .35) !important;
}

.deposit-terminal-pay-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .36) !important;
}

.support-floating-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 8px 22px rgba(56, 104, 192, .36) !important;
}

.support-message-bot {
    background: rgba(56, 104, 192, .12) !important;
    border-color: rgba(56, 104, 192, .22) !important;
}

.case-group.pick-one-group .case-card {
    background: linear-gradient(180deg, rgba(56, 104, 192, .3), rgba(20, 30, 55, .92)) !important;
    border-color: rgba(88, 166, 255, .34) !important;
}

.pick-one-card {
    background: linear-gradient(180deg, rgba(59, 130, 246, .35), rgba(15, 23, 42, .9)) !important;
    border-color: rgba(88, 166, 255, .3) !important;
}

.pick-card.revealed {
    background: linear-gradient(180deg, rgba(30, 64, 130, .96), rgba(10, 16, 30, .98)) !important;
    border-color: rgba(88, 166, 255, .28) !important;
}

.hidden-drop, .hidden-pick-card {
    background: linear-gradient(180deg, rgba(56, 104, 192, .18), rgba(255, 255, 255, .04)) !important;
    border-color: rgba(56, 104, 192, .2) !important;
}

.case-section-title {
    color: var(--text) !important;
}

.case-section-title::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(56, 104, 192, .65), rgba(255, 255, 255, 0)) !important;
}

.ops-weights-panel, .ops-appearance-panel, .ops-presets-panel, .ops-card {
    background: rgba(4, 6, 12, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.ops-weight-row, .result-line-wrap {
    background: rgba(5, 7, 13, .5) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

*::-webkit-scrollbar-track {
    background: transparent !important;
}

*::-webkit-scrollbar-thumb {
    background: rgba(56, 104, 192, .2) !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 104, 192, .35) !important;
}

:root {
    --bg: #11171b;
    --panel: #182127;
    --panel-2: #202b32;
    --text: #eef3f6;
    --muted: #97a8b4;
    --line: rgba(175, 198, 212, .16);
    --accent: #3868C0;
    --accent-2: #2A54A0;
    --accent-3: #58A6FF;
    --success: #54c48b;
    --warning: #e7b163;
    --accent-rgb: 176, 53, 34;
    --accent-2-rgb: 215, 101, 45;
    --accent-3-rgb: 240, 163, 94;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 28px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at 12% 0%, rgba(42, 84, 160, .22) 0%, rgba(42, 84, 160, 0) 28%), radial-gradient(circle at 88% 8%, rgba(42, 84, 160, .16) 0%, rgba(42, 84, 160, 0) 26%), linear-gradient(180deg, #10161a 0%, #0b1013 52%, #090d10 100%);
    color: var(--text);
    font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}

button, input {
    font: inherit;
}

button {
    cursor: pointer;
    border: none;
    touch-action: manipulation;
}

a {
    text-decoration: none;
    color: inherit;
}

.token-inline-icon {
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    vertical-align: -.18em;
    margin-left: .18em;
}

@media (max-width: 767px) {
    .profile-best-drop-value {
        font-size: 18px !important;
    }
}

.app-shell {
    display: block;
    min-height: 100vh;
}

.sidebar-live {
    position: fixed;
    top: 0;
    left: 0;
    width: 175px;
    height: 100vh;
    border-right: 1px solid var(--line);
    padding: 92px 10px 24px;
    background: linear-gradient(180deg, rgba(24, 33, 39, .94), rgba(14, 20, 24, .88));
    backdrop-filter: blur(18px);
    overflow-y: auto;
    z-index: 50;
}

.main-content {
    margin-left: 175px;
    width: auto;
    padding-top: 100px !important;
}

.sidebar-title, .panel-title {
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    color: #b4c0c8;
    margin-bottom: 14px;
}

.live-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.live-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.live-item {
    font-weight: 700;
}

/* ── Наведённая пауза + превью источника (десктоп) ────────────────────────
   Только на реальных мышках/трекпадах -- (hover:hover) исключает сенсорные
   экраны, где :hover залипает после тапа и превью осталось бы открытым без
   способа его закрыть. Само появление/скрытие превью -- чистый CSS через
   :hover, JS (app.js, bindLiveFeedHoverPause) отвечает только за паузу
   потока, самого рендера превью не касается вообще. */
@media (hover: hover) and (pointer: fine) {
    .live-card:hover .live-card-avatar,
    .live-card:hover .live-item {
        opacity: 0;
    }

    .live-card:hover .live-card-preview {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.live-card-avatar, .live-item {
    transition: opacity .18s ease;
}

.live-card-preview {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background: rgba(5, 7, 13, .94);
    opacity: 0;
    transform: translateY(10px) scale(.92);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    text-align: center;
}

.live-card-preview-media {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
}

.live-card-preview-emoji {
    font-size: 24px;
    line-height: 1;
}

.live-card-preview-image {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.live-card-preview-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

/* Постоянный (без наведения) значок радужного/медового дайса -- независимый
   "крючок", видимый сразу, ровно так, как просили: замечаешь издалека, что
   выбило что-то особое. */
.live-card-special-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 13px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

/* Значку мутации нужен позиционированный родитель. Отдельным правилом, а не
   добавлением в общую группу выше (там вместе с .inventory-card-top лежат
   .deposit-row, .ops-form-row и другие — им это ни к чему).
   .inventory-card тоже: в краше карточка ставки собрана БЕЗ обёртки
   .inventory-card-top, и значок там висел бы относительно страницы, а не
   карточки. Абсолютных потомков у этих контейнеров больше нет, так что сдвинуть
   правилом нечего — проверено грепом по стилям. */
.inventory-card-top,
.inventory-card {
    position: relative;
}

/* Значок мутации вместо приставки к названию. Приставка «[Radioactive]»
   удлиняла имя до 40 символов, и в мелких карточках оно не влезало — теперь
   цвет виден кубиком в углу, а имя остаётся коротким.
   Скаттер/мёд у ленты сидят в правом НИЖНЕМ углу, поэтому мутация — в верхнем,
   углы не конфликтуют. */
.mut-badge {
    position: absolute;
    z-index: 2;
    display: block;
    line-height: 0;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

.mut-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Плашка «1 OF 1» — картинка ленты с короной от владельца
   (public/badges/one-of-one.webp), пропорции 360x149. Размер задаёт карточка
   своим классом (.oneof-badge-*) ЧЕРЕЗ ШИРИНУ: высота идёт следом сама, потому
   что тут задан aspect-ratio. Позиционирование — как у .mut-badge выше. */
.oneof-badge {
    position: absolute;
    z-index: 3;
    display: block;
    aspect-ratio: 360 / 149;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}

/* Место как в самой игре (скрин владельца): лента сидит СПРАВА ВНИЗУ карточки,
   над ценой, а не в углу с мутацией.

   Лента рулетки: правый нижний угол арта (плашка лежит внутри .roulette-emoji,
   см. правило position ниже), то есть над именем и ценой. */
.oneof-badge-roulette {
    right: 0;
    bottom: 0;
    width: 54px;
}

/* Инвентарь и карточки ставок, собранные из тех же .inventory-card. Плашка
   лежит ВНУТРИ блока с артом, поэтому её низ — нижний край картинки предмета,
   а не строка с названием: от неё отсчёт был бы поверх текста. */
.item-emoji.big,
.roulette-emoji {
    position: relative;
}

.oneof-badge-inv {
    right: 0;
    bottom: 0;
    width: 58px;
}

/* Витрина дропов кейса: плашка на арте справа, цена лежит слева от неё.
   Селектор длиннее соседних не для красоты: прямых потомков-span у
   .loot-chip-art уже ловит правило эмодзи-заглушки
   (.loot-preview--square .loot-chip .loot-chip-art > span, 40px). */
.loot-chip .loot-chip-art > .oneof-badge-loot {
    right: 6px;
    bottom: 6px;
    width: 48px;
}

/* Лента живых дропов — единственное место, где правый НИЗ занят значком
   скаттера/мёда, а под артом идёт название во всю ширину. Поэтому здесь лента
   встаёт справа на уровне арта: та же правая сторона, что и везде, но выше
   подписи. */
.oneof-badge-live {
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
}

@media (max-width: 720px) {
    .oneof-badge-inv {
        right: 6px;
        bottom: 4px;
        width: 50px;
    }
}


.mut-badge-live {
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
}

/* На карточке «лучший дроп» мутация стоит в правом НИЖНЕМ углу (так попросил
   владелец). Правый верхний там занят пилюлей «24Ч» (.live-card-best-badge),
   левый верхний — аватаром, а скаттер/мёд, который обычно сидит справа снизу,
   на этих карточках уводится влево правилом ниже — иначе значки наложились бы. */
.live-card-best .mut-badge-live {
    top: auto;
    right: 4px;
    bottom: 4px;
    left: auto;
}

.live-card-best .live-card-special-badge {
    right: auto;
    left: 4px;
}

.live-best-banner-mobile-media {
    position: relative;
}

/* В инвентаре карточка мелкая, поэтому значок меньше и ближе к краю.
   Этот же класс переиспользуют карточки ставки в краше — они собраны из тех же
   .inventory-card. */
.mut-badge-inv {
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
}

/* Слот вклада в апгрейдере. У слота ЦЕЛИ значка нет намеренно — там цвет
   показывает кнопка выбора цвета (.upg-mut-chip), и значок дал бы второй
   такой же кубик рядом. */
.mut-badge-upg {
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
}

/* Страховка от второго кубика на «ЖЕЛАЕМОМ ПРЕДМЕТЕ». Правило раздела: на
   слоте цели цвет показывает КНОПКА выбора цвета (.upg-mut-chip), и значок
   рядом с ней читается как дубликат — ровно это и было видно. В разметке
   значок там больше не ставится (см. withMutBadge в _upgSlotFill), но у игрока
   в кэше может лежать старый upgrader.js с безусловной вставкой, а статика
   отдаётся как immutable на год. Пусть тогда хотя бы не показывается. */
#upgTargetCard .mut-badge {
    display: none !important;
}

/* Мини-карточка в сетке из нескольких предметов вклада — она мелкая. */
.mut-badge-upg-mini {
    top: 1px;
    right: 1px;
    width: 13px;
    height: 13px;
}

.upg-slot-item,
.upg-slot-mini {
    position: relative;
}

/* Выбиралка предметов (дайсы и панель владельца) — значок на картинке. */
.mut-badge-picker {
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
}

.br-picker-card-img {
    position: relative;
}

/* Иконка выбранной ставки в дайсах. */
.mut-badge-dice {
    bottom: -2px;
    right: -2px;
    width: 15px;
    height: 15px;
}

.dice-stake-icon {
    position: relative;
}

@media (max-width: 760px) {
    .mut-badge-inv {
        width: 14px;
        height: 14px;
    }
}

.live-user, .live-time, .muted {
    color: var(--muted);
}

.live-time {
    font-size: 12px;
    margin-top: 6px;
}

@keyframes live-card-pop {
    0% {
        opacity: 0;
        transform: scale(.7) translateX(-12px);
    }
    55% {
        opacity: 1;
        transform: scale(1.06) translateX(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes live-card-glow {
    0% {
        box-shadow: 0 0 0 2px rgba(56, 104, 192, .9), 0 0 32px rgba(56, 104, 192, .6);
    }
    100% {
        box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
    }
}

@keyframes live-card-fall {
    from {
        transform: translateY(var(--live-fall-from, -76px));
    }
    to {
        transform: translateY(0);
    }
}

.live-card {
    transition: border-color .6s ease;
}

.live-card-incoming {
    animation: live-card-pop .45s cubic-bezier(.2, .9, .3, 1) forwards,
    live-card-glow .8s ease forwards;
    border-color: rgba(56, 104, 192, .8) !important;
}

.live-card-falling {
    animation: live-card-fall .4s cubic-bezier(.2, .9, .3, 1) both;
}

/* Horizontal counterpart to live-card-fall/-falling above, for the mobile
   strip's row layout — existing cards shift sideways (translateX) to make
   room for a new one instead of the sidebar's vertical translateY, same
   timing/easing. live-card-pop (already translateX-based) and
   live-card-glow are reused as-is on the new card via .live-card-incoming
   — only the "make room" side needed a new axis. */
@keyframes live-card-shift-x {
    from {
        transform: translateX(var(--live-shift-from, -76px));
    }
    to {
        transform: translateX(0);
    }
}

.live-card-shifting-x {
    animation: live-card-shift-x .4s cubic-bezier(.2, .9, .3, 1) both;
}

/* Pinned "best drop of the last 24h" card — always the first entry, sits
   outside the rolling live-drop buffer (see getBestDropLast24h/app.js) so it
   never falls/shifts with the regular feed's pop-in animation. Reuses
   .live-card/.live-item/.live-item-name as-is for the inner layout so it
   stays visually identical to a regular drop card, just with a gold accent
   + corner badge layered on top instead of a different card shape. */
.live-feed-best:empty,
.live-best-banner-mobile:empty {
    display: none !important;
}

.live-feed-best {
    margin-bottom: 10px;
}

.live-card-best {
    border-color: rgba(255, 191, 71, .55);
    background: linear-gradient(180deg, rgba(255, 191, 71, .12), rgba(255, 255, 255, .02));
    box-shadow: 0 0 0 1px rgba(255, 191, 71, .16) inset, 0 8px 22px rgba(255, 156, 20, .18);
}

.live-card-best:hover {
    border-color: rgba(255, 191, 71, .85);
}

/* Badge sits INSIDE the card's own box (top-right corner), mirroring how
   .live-card-avatar already sits top-left with a small positive offset —
   a negative offset (poking above the card border) was tried first and
   clipped against the fixed topbar's higher z-index for the sidebar's very
   first card, and ate into neighboring cards on the mobile strip. Staying
   inside the existing 96px/64px card box sidesteps that whole class of bug. */
.live-card-best-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    max-width: calc(100% - 12px);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD873, #FF9C14);
    color: #2A1600;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(255, 156, 20, .4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.live-card-best-badge-icon {
    display: inline-flex;
    flex: none;
}

/* Mobile gets its own distinct banner shape instead of reusing the small-tile
   strip layout — a second identically-shaped row (just gold instead of blue)
   sitting right above the regular strip read as "the same list, split in
   two" rather than something separate ("на телефоне лайвдроп топ предмет в
   отдельной вкладке а не в сплошной линии как на компе"). This is a full-
   width banner with its own label + a visible TOK value (deliberately more
   info than the compact tiles show, since a one-off featured callout can
   afford it) so it's unmistakably a different kind of element, not another
   feed row. Hidden by default; only shown under the same max-width:1023px
   breakpoint the mobile strip itself uses (.home-live-feed-mobile above). */
.live-best-banner-mobile {
    display: none;
}

@media (max-width: 1023px) {
    .live-best-banner-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        margin: 10px 0 14px;
        border: 1px solid rgba(255, 191, 71, .5);
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(255, 191, 71, .16), rgba(14, 20, 24, .8) 60%);
        box-shadow: 0 8px 22px rgba(255, 156, 20, .16);
    }

    .live-best-banner-mobile.live-best-banner-clickable {
        cursor: pointer;
    }

    .live-best-banner-mobile-media {
        flex: none;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
    }

    .live-best-banner-mobile-media img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .live-best-banner-mobile-info {
        flex: 1;
        min-width: 0;
    }

    .live-best-banner-mobile-label {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #FFC94A;
        margin-bottom: 3px;
    }

    .live-best-banner-mobile-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .live-best-banner-mobile-value {
        flex: none;
        padding: 5px 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, #FFD873, #FF9C14);
        color: #2A1600;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }
}

.main-content {
    padding: 100px 24px 40px;
    max-width: 1400px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(19, 27, 32, .72);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

.brand-btn, .nav-btn, .ghost-btn, .primary-btn, .user-box {
    border-radius: 14px;
}

.brand-btn, .nav-btn, .ghost-btn {
    background: transparent;
    color: var(--text);
    border: none;
    padding: 12px 16px;
}

.brand-btn {
    font-weight: 800;
    background: linear-gradient(135deg, rgba(42, 84, 160, .22), rgba(42, 84, 160, .14));
}

.main-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-btn.active, .ghost-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
}

.user-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .04);
    padding: 8px 12px;
    border: 1px solid var(--line);
    color: var(--text);
}

.user-avatar, .profile-avatar-large {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    font-weight: 800;
    color: #fff;
    overflow: hidden;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.profile-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    font-size: 26px;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-label {
    font-size: 12px;
    color: var(--muted);
}

.user-name, .profile-username {
    font-weight: 800;
}

.balance-chip {
    padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    border-radius: 14px;
    border: 1px dashed rgba(175, 198, 212, .18);
}

.balance-chip span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.hero-banner, .profile-card, .case-card, .inventory-card, .item-hero, .item-related-panel, .profile-hero, .ops-layout .profile-card, .case-showcase, .case-info-panel, .fuse-panel, .inventory-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .24), 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.hero-banner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
    margin-bottom: 14px;
}

.hero-badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(42, 84, 160, .85), rgba(42, 84, 160, .75));
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 10px;
}

.hero-copy h1 {
    font-size: 34px;
    line-height: 1.1;
    margin: 0;
    max-width: none;
}

.hero-copy p {
    margin: 0;
    color: var(--muted);
    max-width: none;
    font-size: 13px;
    line-height: 1.4;
}

.hero-promo-row {
    display: flex;
    gap: 10px;
}

.promo-card {
    display: grid;
    gap: 8px;
}

.promo-stat {
    flex: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
}

.promo-stat span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 3px;
    font-family: 'DM Mono', monospace;
    letter-spacing: .03em;
    text-transform: none;
    font-weight: 400;
}

.promo-stat strong {
    font-size: 18px;
    font-family: 'DM Mono', monospace;
    font-weight: 500;
}

.search-row {
    margin-bottom: 18px;
}

.search-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-wrap input, .deposit-row input, .ops-form-row input, .ops-price-input {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 14px 16px;
    border-radius: 14px;
    width: 100%;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 14px;
    margin-bottom: 14px;
}

.section-head h2 {
    margin: 0;
    font-size: 28px;
}

.section-head span {
    color: var(--muted);
}

.section-head-stack {
    align-items: start;
}

.cases-grid, .loot-preview, .inventory-grid, .related-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.case-card {
    position: relative;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 280px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.case-card:hover {
    transform: translateY(-4px);
    border-color: rgba(240, 163, 94, .28);
}

.case-card:active {
    transform: translateY(-1px) scale(.98);
}

.case-ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 700;
}

.case-visual {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.case-glow {
    display: none !important;
}

.case-emoji {
    font-size: 72px;
    z-index: 1;
    line-height: 1;
}

.case-title {
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    margin-top: 12px;
    line-height: 1.25;
    width: 100%;
}

.case-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.case-subtitle {
    color: var(--muted);
    font-size: 12px;
}

.case-body {
    display: none;
}

.case-price-row {
    display: none;
}

.case-price {
    font-size: 16px;
    font-weight: 800;
}

.primary-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: 13px 18px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(42, 84, 160, .24);
}

.primary-btn.small {
    padding: 10px 14px;
    font-size: 14px;
}

.full-width {
    width: 100%;
}

.view {
    display: none;
}

.active-view {
    display: block;
}

/* Раздел уже открыт, но его разметка и стили ещё едут. Держим содержимое
   невидимым: иначе на мгновение показывался голый каркас без оформления.
   Класс снимает loadSection по готовности — и по страховочному таймеру,
   если загрузка упала. */
.view.section-booting {
    opacity: 0;
    pointer-events: none;
}

.view {
    transition: opacity .12s ease;
}

.case-page-layout, .item-page-layout, .fuse-layout, .profile-layout {
    display: grid;
    grid-template-columns:.95fr 1.05fr;
    gap: 18px;
}

.case-showcase, .case-info-panel, .item-hero, .item-related-panel, .inventory-panel, .fuse-panel {
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.case-showcase-emoji, .item-hero-emoji {
    font-size: 84px;
}

.case-showcase-name, .item-hero-name {
    font-size: 28px;
    font-weight: 800;
    margin-top: 12px;
}

.case-showcase-meta, .item-hero-meta {
    display: flex;
    gap: 12px;
    margin: 18px 0;
}

.case-showcase-meta div, .chance-box div {
    flex: 1;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 18px;
}

.case-showcase-meta span, .chance-box span, .item-hero-meta span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

/* The number itself (referral count, earned TOK, etc.) -- these boxes are
   flex:1 with no min-width:0 protection on the number specifically, so a
   value growing from 3 to 5 digits (a partner accumulating referrals/
   earnings over time) had nothing keeping the digit width predictable,
   only the mobile flex-wrap fix nearby (driven by long RU labels, unrelated
   to digit count) offered any protection, and only below 700px. Tabular
   figures don't jitter sibling boxes as digits change width mid-count-up
   animation either. */
.case-showcase-meta strong, .chance-box strong {
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
}

.case-show.case-glow {
    display: none !important;
}

.multi-open-row {
    display: flex;
    gap: 10px;
    margin: 12px 0 14px;
    position: relative;
    z-index: 2;
}

.open-count-btn {
    flex: 1;
    position: relative;
    z-index: 2;
}

.case-showcase > *:not(.case-showcase-glow) {
    position: relative;
    z-index: 2;
}

.case-showcase {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.case-showcase-emoji {
    font-size: 110px !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

.case-showcase-name {
    text-align: center !important;
    font-size: 26px !important;
}

.case-showcase-meta {
    width: 100% !important;
    text-align: left !important;
}

.multi-open-row, #openSelectedCaseBtn {
    width: 100% !important;
}

.loot-card, .inventory-card, .target-card, .related-card, .roulette-item {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 14px;
    transition: .18s transform, .18s box-shadow, .18s border-color;
}

.loot-card:hover, .inventory-card:hover, .target-card:hover, .related-card:hover {
    transform: translateY(-2px);
}

.loot-card, .related-card {
    text-align: center;
    cursor: pointer;
}

.loot-emoji, .item-emoji.big, .target-emoji, .roulette-emoji {
    font-size: 40px;
    margin-bottom: 8px;
}

.loot-name, .item-name, .target-name, .roulette-name {
    font-weight: 800;
}

.loot-value, .item-value, .target-value, .roulette-value {
    color: var(--muted);
    margin-top: 6px;
}

.rarity-common {
    border-color: rgba(109, 106, 131, .35);
    box-shadow: 0 0 0 1px rgba(109, 106, 131, .08), 0 0 22px rgba(109, 106, 131, .12) inset;
}

.rarity-rare {
    border-color: rgba(127, 102, 255, .45);
    box-shadow: 0 0 0 1px rgba(127, 102, 255, .1), 0 0 28px rgba(127, 102, 255, .16);
}

.rarity-epic {
    border-color: rgba(197, 102, 255, .5);
    box-shadow: 0 0 0 1px rgba(197, 102, 255, .12), 0 0 32px rgba(197, 102, 255, .18);
}

.rarity-legendary {
    border-color: rgba(255, 122, 223, .52);
    box-shadow: 0 0 0 1px rgba(255, 122, 223, .12), 0 0 34px rgba(255, 122, 223, .18);
}

.rarity-mythic {
    border-color: rgba(255, 179, 87, .55);
    box-shadow: 0 0 0 1px rgba(255, 179, 87, .12), 0 0 38px rgba(255, 179, 87, .22);
}

.inventory-card-top, .profile-user-block, .deposit-row, .ops-form-row, .ops-case-row, .inventory-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inventory-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inventory-actions {
    justify-content: space-between;
}

.sell-btn {
    white-space: nowrap;
}

.item-source {
    font-size: 12px;
}

.slot-emoji {
    font-size: 32px;
}

.target-block {
    margin-top: 10px;
}

.target-picker {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 380px;
    overflow: auto;
    margin: 10px 0 14px;
}

.target-card.active {
    outline: 2px solid rgba(255, 255, 255, .24);
    background: linear-gradient(180deg, rgba(141, 91, 255, .18), rgba(255, 255, 255, .05));
}

.chance-box {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.profile-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.profile-balance-box span {
    display: block;
    color: var(--muted);
}

.profile-balance-box strong {
    font-size: 34px;
}

.profile-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.profile-card {
    padding: 16px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.activity-time {
    color: var(--muted);
    white-space: nowrap;
}

.ops-layout {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px;
}

.ops-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.ops-case-row, .ops-promo-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
}

.ops-case-row strong, .ops-promo-row strong {
    min-width: 120px;
}

.ops-case-row-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ops-case-row-compact:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
}

.ops-case-compact-media {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border-radius: 10px;
}

.ops-case-compact-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ops-case-compact-emoji {
    font-size: 24px;
}

.ops-case-compact-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ops-case-compact-main strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-case-compact-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.ops-case-badge {
    font-size: 11px;
    font-weight: 700;
}

.ops-case-open-editor-btn {
    flex-shrink: 0;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 12, .74);
    display: grid;
    place-items: center;
    z-index: 200;
    padding: 20px;
}

.hidden {
    display: none;
}

.modal-card {
    width: min(1120px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: linear-gradient(180deg, #1a242b, #10171b);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}

.modal-top, .modal-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.icon-close {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.roulette-windows {
    display: grid;
    gap: 14px;
    margin: 18px 0;
}

.roulette-windows.single {
    grid-template-columns:1fr;
}

.roulette-windows.multiple {
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.roulette-window {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
    min-height: 220px;
}

.roulette-window.mini {
    min-height: 150px;
}

.roulette-browser-edge {
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(5, 3, 9, .45), rgba(5, 3, 9, .94));
    z-index: 2;
    pointer-events: none;
}

.roulette-pointer {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-3), #fff, var(--accent));
    z-index: 3;
    box-shadow: 0 0 20px rgba(255, 255, 255, .35);
}

.roulette-track {
    display: flex;
    gap: 12px;
    position: absolute;
    left: 0;
    top: 18px;
    padding: 0 40px;
    will-change: transform;
}

.roulette-window.mini .roulette-track {
    top: 14px;
    padding: 0 26px;
    gap: 10px;
}

.roulette-item {
    min-width: 150px;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.roulette-item.compact {
    min-width: 122px;
    height: 122px;
    border-radius: 0;
    padding: 10px;
}

.roulette-item.compact .roulette-emoji {
    font-size: 30px;
    margin-bottom: 6px;
}

.roulette-item.compact .roulette-name {
    font-size: 13px;
}

.roulette-item.compact .roulette-value {
    font-size: 12px;
}

/* Пчёлка на предмете, выпавшем как медовый дроп -- раньше это было видно
   только текстом в истории активности постфактум, теперь виден прямо в
   момент раскрытия рулетки. .is-honey-drop ставится только на реальный
   выигрышный слот (app.js), поэтому position:relative тут ничего другого
   не задевает. !important -- т.к. .roulette-item много раз переопределяется
   ниже по каскаду темами/брейкпоинтами с !important. */
.roulette-item.is-honey-drop {
    position: relative !important;
}

.roulette-bee-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: radial-gradient(circle at 32% 28%, #FFE28A, #F5A623 72%);
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 0 10px rgba(255, 196, 56, .55);
    animation: rouletteBeeBob 1.7s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

/* Тот же маскот, что в нав-баре/на странице ивента -- см. .nav-bee-* в
   комментарии у #navEventBtn. Тут не анимируем крылья отдельно (значок и так
   покачивается целиком через rouletteBeeBob на родителе) -- просто размер. */
.roulette-bee-icon {
    width: 15px;
    height: 15px;
    overflow: visible;
    flex-shrink: 0;
}

.roulette-item.compact .roulette-bee-badge {
    width: 16px;
    height: 16px;
    top: 2px;
    right: 2px;
}

.roulette-item.compact .roulette-bee-icon {
    width: 12px;
    height: 12px;
}

/* ── Пчела-жало (декоративная, см. spawnRouletteBeeSting в app.js) ─────────
   Летит к координатам --sting-x/--sting-y (центр случайно выбранной ВИДИМОЙ
   карточки на момент прилёта), недолго повисает над ней, затем срывается
   вбок и гаснет. Целиком отдельный механизм от настоящего медового дропа
   (.is-honey-drop/.roulette-bee-badge выше) -- не путать. */
.roulette-sting-bee {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    z-index: 6;
    pointer-events: none;
    /* Было 650ms -- слишком быстро, пролёт толком не читался. */
    animation: rouletteStingBeeFly 1600ms cubic-bezier(.3, 1.3, .4, 1) forwards;
}

.roulette-sting-bee svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes rouletteStingBeeFly {
    0%   { transform: translate(-30px, calc(var(--sting-y) - 10px)) rotate(-10deg); opacity: 0; }
    12%  { opacity: 1; }
    55%  { transform: translate(calc(var(--sting-x) - 11px), calc(var(--sting-y) - 11px)) rotate(6deg); opacity: 1; }
    70%  { transform: translate(calc(var(--sting-x) - 11px), calc(var(--sting-y) - 16px)) rotate(-14deg); opacity: 1; }
    100% { transform: translate(calc(var(--sting-x) + 60px), calc(var(--sting-y) - 42px)) rotate(24deg); opacity: 0; }
}

/* Настоящая заливка ФОНА жёлтым (не box-shadow-вспышка, как было раньше) --
   через ::before-оверлей ПОЗАДИ карточки, а не через собственный background
   элемента: у .roulette-item фон много раз переопределяется по каскаду
   редкостями/темами с !important (см. комментарий у .is-honey-drop выше), и
   отдельный слой не задевает это. z-index:-1 у ::before + z-index:0 (создаёт
   свой локальный стек, чтобы -1 не улетел за пределы самой карточки, под
   фон всего трека/окна) -- картинка и текст остаются в обычном потоке НАД
   этим слоем автоматически, ничего заливкой не перекрывается. Держится
   стабильно жёлтым (без затухания) до конца прокрутки -- .forwards плюс
   снятие класса только в finishSpin() (app.js), без отдельного таймера
   отключения. ::before на .roulette-item больше никем не занят
   (.near-top-item::before нигде не навешивается JS -- мёртвый класс), по
   времени тоже не пересекается с .winner-focus/.winner-landed (те
   выставляются только в момент остановки, жало давно отгорело к тому
   моменту).
   БАГ, из-за которого заливка вообще не показывалась: position:relative тут
   был БЕЗ !important -- а .roulette-item много раз переопределяется ниже по
   каскаду темами/брейкпоинтами с !important (тот же нюанс уже учтён у
   .is-honey-drop выше, тут забыли). Без реального position:relative
   ::before искал ближайшего ПОЗИЦИОНИРОВАННОГО предка выше по дереву
   (.roulette-track), а не саму карточку -- заливка рисовалась где-то там,
   а не на карточке, то есть визуально не происходило вообще ничего. */
.roulette-item.is-bee-stung {
    position: relative !important;
    z-index: 0 !important;
}

.roulette-item.is-bee-stung::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 201, 74, .9), rgba(245, 158, 11, .75));
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    animation: rouletteBeeStingFill 500ms ease-in forwards;
}

@keyframes rouletteBeeStingFill {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .roulette-sting-bee { display: none !important; }
    .roulette-item.is-bee-stung::before { animation: none !important; opacity: 1 !important; }
}

/* ── "Тайна-таймер" ──────────────────────────────────────────────────────
   Чёрный блок с "???" в шторе навигации, между карточкой профиля и первым
   пунктом меню (см. index.html #mysteryTimerBlock, порядок задаёт обычный
   DOM-порядок -- профиль держит order:-1 выше по каскаду, этот блок без
   явного order просто следующий). Намеренно НЕ кликабелен: ни data-nav, ни
   обработчика клика нет вовсе, плюс pointer-events:none тут же на случай,
   если что-то всё-таки окажется под ним. Данные — state.mysteryTimer из
   бутстрапа (server.js), рендерит renderMysteryTimer() в app.js. Визуальный
   язык — та же карточка-с-ячейками, что у .hv-timer на странице ивента,
   только чёрная/загадочная палитра вместо мёда: это должно читаться как
   "что-то другое, отдельное", а не как забытый огрызок медового виджета. */
.mystery-timer-block {
    order: 0;
    width: 100%;
    margin: 12px 0 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #000000, #0a0a0f);
    border: 1px solid rgba(168, 130, 255, .22);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 18px rgba(120, 80, 220, .12);
    pointer-events: none;
    text-align: center;
}

.mystery-timer-block.hidden {
    display: none !important;
}

.mystery-timer-label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3em;
    color: rgba(200, 170, 255, .85);
    text-shadow: 0 0 12px rgba(168, 130, 255, .55);
    animation: mysteryTimerFlicker 3.2s ease-in-out infinite;
}

.mystery-timer-cells {
    display: flex;
    gap: 6px;
}

.mystery-timer-cell {
    flex: 1;
    min-width: 0;
    padding: 6px 4px 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
}

.mystery-timer-cell b {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.mystery-timer-cell span {
    display: block;
    margin-top: 2px;
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

@keyframes mysteryTimerFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
    .mystery-timer-label { animation: none !important; }
}

/* ── Кастомная иконка "Апгрейдер" в шапке нав ────────────────────────────
   Та же техника, что у пчелы-маскота (.nav-bee выше) -- простые SVG-примити-
   вы (path/line/circle) вместо стороннего icon-набора. Не абстрактный значок
   "волшебная палочка" (был Solar magic-stick-3-bold) -- узнаваемый циферблат
   со стрелкой, эхо настоящего колеса апгрейдера (#upgWheelSvg: дуга победы/
   поражения + стрелка), только сильно упрощённый под размер нав-иконки. */
/* Фьюз: привидение — режим называется Haunted Fuse (и в OPS у него 👻), а
   не абстрактная колба (была Solar test-tube-bold). Дом со страницы фьюза
   на 17px не отличить от иконки «Главной». */
.nav-icon-fuse {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: #58A6FF;
}

.nav-icon-upg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    overflow: visible;
}

.nav-icon-upg .nav-upg-track,
.nav-icon-upg .nav-upg-fill,
.nav-icon-upg .nav-upg-needle {
    fill: none;
    stroke-linecap: round;
}

.nav-icon-upg .nav-upg-track {
    stroke: rgba(88, 166, 255, .28);
    stroke-width: 2.2;
}

.nav-icon-upg .nav-upg-fill {
    stroke: #58A6FF;
    stroke-width: 2.2;
}

.nav-icon-upg .nav-upg-needle {
    stroke: #58A6FF;
    stroke-width: 2;
}

.nav-icon-upg .nav-upg-hub {
    fill: #58A6FF;
}

/* Та же иконка переиспользуется в hover-превью живой ленты (app.js:
   _liveDropUpgraderIconHtml) под слот 42px вместо родных 17px нав-бара --
   составной селектор специфичнее одиночного .nav-icon-upg (0,2,0 vs 0,1,0),
   значит побеждает всегда, независимо от порядка правил в файле. Цвета/
   обводки остаются от .nav-icon-upg .nav-upg-* выше, тут только размер. */
.nav-icon-upg.live-drop-upg-icon {
    width: 42px;
    height: 42px;
}

@keyframes rouletteBeeBob {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-3px) rotate(8deg); }
}

.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #182127;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    z-index: 300;
    max-width: min(92vw, 360px);
}

.toast.show {
    display: block;
    animation: pop .18s ease;
}

@keyframes pop {
    from {
        transform: translateY(6px);
        opacity: .5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .app-shell {
        display: block;
    }

    .sidebar-live {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

    .hero-banner, .case-page-layout, .item-page-layout, .fuse-layout, .profile-layout, .ops-layout {
        grid-template-columns:1fr;
    }

    .topbar {
        flex-wrap: wrap;
    }

    .profile-hero {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .roulette-windows.multiple {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .main-content {
        padding: 16px 14px 28px;
    }

    .topbar {
        align-items: stretch;
    }

    .user-box {
        width: 100%;
        justify-content: space-between;
    }

    .hero-copy h1 {
        font-size: 30px;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .cases-grid, .loot-preview, .inventory-grid, .related-grid {
        grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    }

    .case-card {
        min-height: 280px;
    }

    .case-visual {
        height: 150px;
    }

    .case-emoji {
        font-size: 54px;
    }

    .multi-open-row {
        flex-wrap: wrap;
    }

    .open-count-btn {
        min-width: 86px;
    }

    .deposit-row, .inventory-card-top, .inventory-actions, .ops-form-row, .ops-case-row {
        flex-wrap: wrap;
    }

    .roulette-windows.multiple {
        grid-template-columns:1fr;
    }

    .modal {
        padding: 10px;
    }

    .modal-card {
        width: 100%;
        border-radius: 14px;
        padding: 14px;
    }

    .roulette-window {
        min-height: 170px;
    }

    .roulette-window.mini {
        min-height: 132px;
    }

    .roulette-item {
        min-width: 132px;
        height: 136px;
        padding: 10px;
    }

    .roulette-emoji {
        font-size: 30px;
    }

    .roulette-name {
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    .brand-btn, .nav-btn, .ghost-btn, .primary-btn {
        padding: 11px 13px;
    }

    .main-nav {
        width: 100%;
    }

    .nav-btn {
        flex: 1;
    }

    .profile-avatar-large {
        width: 60px;
        height: 60px;
        border-radius: 20px;
    }

    .profile-balance-box strong {
        font-size: 28px;
    }

    .fuse-slots, .chance-box {
        grid-template-columns:1fr;
    }

    .target-picker {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .cases-grid, .loot-preview, .inventory-grid, .related-grid {
        grid-template-columns:1fr 1fr;
    }

    .case-showcase-emoji, .item-hero-emoji {
        font-size: 66px;
    }

    .case-showcase-name, .item-hero-name {
        font-size: 24px;
    }
}

@media (max-width: 390px) {
    .cases-grid, .loot-preview, .inventory-grid, .related-grid {
        grid-template-columns:1fr;
    }

    .target-picker {
        grid-template-columns:1fr;
    }

    .user-box {
        padding: 8px;
    }

    .balance-chip {
        padding: 8px 10px;
    }
}

.loot-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px 16px;
    color: var(--text);
    transition: .18s transform, .18s box-shadow, .18s border-color;
}

.loot-chip:hover {
    transform: translateY(-2px);
}

.loot-chip span {
    font-size: 28px;
    line-height: 1;
}

.loot-chip strong {
    flex: 1;
}

.loot-chip em {
    font-style: normal;
    color: var(--muted);
    white-space: nowrap;
}

.activity-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.activity-row strong {
    color: var(--muted);
    white-space: nowrap;
    font-size: 13px;
    min-width: 62px;
}

.activity-row span {
    flex: 1;
}

.case-info-panel {
    min-width: 0;
}

.loot-preview {
    align-content: start;
}

.inventory-actions {
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inventory-actions .ghost-btn, .inventory-actions .primary-btn {
    min-width: 110px;
}

.inventory-actions .item-source {
    margin-left: auto;
}

@media (max-width: 760px) {
    .inventory-actions {
        display: grid;
        grid-template-columns:1fr 1fr;
        align-items: stretch;
    }

    .inventory-actions .item-source {
        grid-column: 1/-1;
        margin-left: 0;
    }

    .loot-chip {
        padding: 12px 14px;
    }

    .loot-chip span {
        font-size: 24px;
    }
}

.pick-options {
    display: grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.pick-card {
    min-height: 160px;
}

.compact.selected {
    outline: 2px solid rgba(255, 255, 255, .22);
}

@media (max-width: 900px) {
    .pick-options {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .pick-options {
        grid-template-columns:1fr;
    }
}

.hidden-drop {
    background: linear-gradient(180deg, rgba(141, 91, 255, .18), rgba(255, 255, 255, .04));
    border: 1px dashed rgba(255, 255, 255, .2);
}

.hidden-pick-card {
    background: linear-gradient(180deg, rgba(141, 91, 255, .18), rgba(255, 255, 255, .04));
    border: 1px dashed rgba(255, 255, 255, .22);
}

.hidden-pick-card .target-emoji {
    filter: drop-shadow(0 0 14px rgba(165, 108, 255, .35));
}

.pick-card.revealed {
    border-style: solid;
}

.pick-card.dimmed {
    opacity: .35;
    filter: grayscale(1);
}

.target-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.target-card.target-focus {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(214, 192, 255, .82);
    box-shadow: 0 0 26px rgba(142, 88, 255, .22);
}

@keyframes fusePulse {
    0%, 100% {
        transform: scale(.92);
        opacity: .58;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes fuseSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fuseCoreShell {
    0%, 100% {
        transform: scale(.94);
    }
    50% {
        transform: scale(1.08);
    }
}

@keyframes fuseCore {
    0% {
        transform: rotate(0deg) scale(.95);
    }
    50% {
        transform: rotate(180deg) scale(1.08);
    }
    100% {
        transform: rotate(360deg) scale(.95);
    }
}

@keyframes fuseGlow {
    0%, 100% {
        transform: scale(.88);
        opacity: .55;
    }
    50% {
        transform: scale(1.14);
        opacity: 1;
    }
}

@keyframes fuseParticle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.3);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15);
    }
}

@keyframes fuseSweep {
    0% {
        transform: translateX(-120%) rotate(8deg);
    }
    100% {
        transform: translateX(140%) rotate(8deg);
    }
}

@keyframes fuseReveal {
    0% {
        transform: translateY(8px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fuseImpact {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-3px);
    }
}

@keyframes fuseSacrifice {
    0% {
        transform: translate(var(--sx), var(--sy)) scale(1);
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(.2);
        opacity: 0;
    }
}

@keyframes fuseResultPop {
    0% {
        transform: scale(.45) translateY(22px);
        opacity: 0;
    }
    55% {
        transform: scale(1.08) translateY(-4px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.case-group {
    margin: 0 0 var(--space-lg);
}

.case-group-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.case-group-head h3 {
    margin: 0;
    font-size: 20px;
}

.case-group-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.case-group-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 260px);
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px;
    scroll-snap-type: x proximity;
}

.case-group-row::-webkit-scrollbar {
    height: 10px;
}

.case-group-row::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}

.case-group-row .case-card {
    min-width: 220px;
    scroll-snap-align: start;
}

.case-group.pick-one-group .case-card {
    background: linear-gradient(180deg, rgba(110, 72, 180, .32), rgba(32, 20, 52, .92));
    border-color: rgba(205, 154, 255, .34);
    box-shadow: 0 0 0 1px rgba(205, 154, 255, .1), 0 0 28px rgba(181, 116, 255, .10) inset;
}

.case-group.pick-one-group .case-title {
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}

.case-group.pick-one-group .case-subtitle, .case-group.pick-one-group .pick-visible-text {
    color: #f3eaff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.case-group.pick-one-group .case-price {
    color: #ffffff;
}

.case-group.pick-one-group .open-case-page-btn {
    border-color: rgba(255, 255, 255, .18);
    color: #ffffff;
    background: rgba(255, 255, 255, .06);
}

@media (max-width: 700px) {
    .case-group-row {
        grid-auto-columns: minmax(200px, 84vw);
    }
}

.case-section {
    margin-bottom: var(--space-lg);
    width: 100%;
}

#casesGrid {
    display: block;
    width: 100%;
}

.case-section-title-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
}

.case-section-title {
    margin: 0;
    font-size: 24px;
    color: #f5ecff;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    position: relative;
    padding: 0 20px 10px;
}

.case-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(201, 120, 255, .65), rgba(255, 255, 255, 0));
}

.case-row {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 14px;
    padding: 4px 0 10px;
    align-items: start;
}

.case-row .case-card {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1200px) {
    .case-row {
        grid-template-columns:repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .case-row {
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .case-row {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .case-row {
        grid-template-columns:1fr;
    }
}

.pick-one-section .case-section-title {
    color: #fff2ff;
}

.pick-one-card {
    background: linear-gradient(180deg, rgba(120, 80, 200, .35), rgba(25, 15, 40, .9));
    border: 1px solid rgba(200, 140, 255, .3);
}

.pick-one-card .case-title {
    color: #fff;
}

.pick-one-card .case-subtitle, .pick-one-card .pick-visible-text {
    color: #f0e2ff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.pick-card.revealed {
    background: linear-gradient(180deg, rgba(68, 44, 110, .96), rgba(24, 14, 40, .98));
    border-color: rgba(224, 190, 255, .28);
}

.pick-card.revealed .target-name {
    color: #ffffff !important;
    font-weight: 800;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.pick-card.revealed .target-value {
    color: #f2dfff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.pick-card.revealed .target-emoji {
    filter: drop-shadow(0 0 14px rgba(180, 118, 255, .22));
}

.open-count-btn.disabled {
    opacity: .38;
    pointer-events: none;
    filter: grayscale(.35);
}

.win-result-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 4px;
}

.win-result-title {
    font-weight: 800;
    color: var(--text);
}

.win-result-price {
    color: var(--muted);
    font-weight: 700;
}

.win-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.win-actions.multi {
    max-height: 220px;
    overflow: auto;
    padding-right: 4px;
}

.result-line-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
}

.result-line-main {
    font-weight: 700;
}

.instant-sell-btn {
    white-space: nowrap;
}

.pick-win-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.sold-inline-note {
    color: var(--success);
    font-weight: 700;
}

@media (max-width: 760px) {
    .result-line-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

.topbar-user-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-toggle-btn {
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 44px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
    font-size: 22px;
}

.lang-toggle-btn:hover {
    background: rgba(255, 255, 255, .07);
}

body.theme-light-red .lang-toggle-btn:hover {
    background: rgba(0, 0, 0, .06);
}

.profile-logout-btn {
    padding: 6px 14px;
    border: 1px solid rgba(56, 104, 192, 0.35);
    border-radius: 8px;
    background: rgba(56, 104, 192, 0.08);
    color: #58a6ff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.profile-logout-btn:hover {
    background: rgba(56, 104, 192, 0.18);
    border-color: rgba(56, 104, 192, 0.6);
}

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 2, 10, .74);
    backdrop-filter: blur(10px);
}

.auth-overlay.hidden {
    display: none;
}

.auth-card {
    width: min(440px, 94vw);
    background: linear-gradient(180deg, rgba(19, 12, 31, .98), rgba(11, 8, 20, .98));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.auth-badge {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(141, 91, 255, .18);
    font-weight: 700;
    margin-bottom: 12px;
}

.auth-card h2 {
    margin: 0 0 10px;
}

.auth-card p {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.45;
}

.auth-input {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 12px;
}

.auth-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.auth-actions > * {
    flex: 1;
}

.auth-status {
    min-height: 20px;
    margin-top: 12px;
    color: var(--muted);
}

.roulette-windows.clean-sell-layout {
    align-items: start !important;
}

.roulette-windows.clean-sell-layout.multiple {
    grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 18px !important;
}

.roulette-windows.clean-sell-layout.single {
    grid-template-columns:minmax(0, 1fr) !important;
}

.roulette-lane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
}

.roulette-lane .roulette-window {
    width: 100%;
    margin: 0 !important;
}

.roulette-lane-actions {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lane-actions-placeholder {
    width: 104px;
    height: 38px;
}

.roulette-result-under, .roulette-result-wrapper {
    display: none !important;
}

.wheel-sell-btn {
    min-width: 104px !important;
    padding: 8px 14px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(42, 84, 160, .24);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.wheel-sell-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 22px rgba(42, 84, 160, .32);
    filter: brightness(1.03);
}

.wheel-sell-btn:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 6px 14px rgba(42, 84, 160, .22);
}

.sold-inline-note {
    min-width: 104px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--success);
    font-weight: 800;
}

@media (max-width: 760px) {
    .roulette-windows.clean-sell-layout.multiple {
        grid-template-columns:1fr !important;
        gap: 14px !important;
    }

    .roulette-lane {
        gap: 8px;
    }

    .roulette-lane-actions {
        min-height: 36px;
    }

    .wheel-sell-btn, .sold-inline-note {
        min-width: 96px !important;
        height: 36px;
        font-size: 13px !important;
    }
}

.roulette-track {
    backface-visibility: hidden;
    will-change: transform;
}

.roulette-track-crisp {
    will-change: auto;
}

.roulette-item {
    transform: translateZ(0);
}

.roulette-name, .roulette-value {
    -webkit-font-smoothing: antialiased;
}

.sell-pop-in {
    animation: sellPopIn .28s cubic-bezier(.2, .8, .2, 1);
}

@keyframes sellPopIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.92);
    }
    65% {
        opacity: 1;
        transform: translateY(-1px) scale(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ops-case-row-extended {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.ops-case-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.ops-case-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ops-case-price-edit {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ops-weights-panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, .025);
}

.ops-weights-title {
    font-weight: 800;
    margin-bottom: 12px;
}

.ops-weights-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ops-weight-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
}

.ops-weight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ops-weight-emoji {
    font-size: 24px;
}

.ops-weight-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ops-weight-meta strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-weight-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ops-weight-input {
    width: 92px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
}

.ops-weight-percent {
    min-width: 64px;
    text-align: right;
    font-weight: 700;
    color: var(--muted);
}

.ops-weights-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .ops-weight-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ops-weight-controls {
        justify-content: space-between;
    }

    .ops-weight-percent {
        text-align: left;
    }
}

.case-image, .case-showcase-image, .loot-chip-image, .item-hero-image, .related-image, .inventory-image, .live-item-image, .roulette-image, .target-image, .slot-image, .loot-card-image, .ops-preview-image, .ops-weight-image {
    object-fit: contain;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.case-image {
    width: 68px;
    height: 68px;
}

.case-showcase-image {
    width: 96px;
    height: 96px;
}

.loot-chip-image {
    width: 28px;
    height: 28px;
}

.item-hero-image {
    width: 84px;
    height: 84px;
}

.related-image, .inventory-image, .loot-card-image, .target-image {
    width: 88px;
    height: 88px;
    margin: auto;
    display: block;
}

.live-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
}

.live-item-image {
    width: 52px !important;
    height: 52px !important;
}

.live-item-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.live-card {
    position: relative;
}

.live-card-clickable {
    cursor: pointer;
}

.live-card-avatar {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
}

.live-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mirrors the desktop .sidebar-live feed's data (same renderLiveFeed()/
   prependLiveDrop() calls, see app.js) into a small horizontal strip for
   screens where the fixed sidebar is hidden — without this, mobile/tablet
   had no live-drop feed at all. Reuses the same .live-card/.live-item
   markup from _liveCardHtml(), just scoped smaller for a single compact row
   instead of the sidebar's tall stacked list.
   Breakpoint must match .sidebar-live's own exactly (max-width:1023px here,
   .sidebar-live reappears via `@media (min-width:1024px) { ... !important }`
   further down) — .sidebar-live's OTHER, earlier max-width:1100px rule
   looked like the real cutoff at a glance but gets re-overridden by that
   later 1024px block, so 1100px silently overlapped with the sidebar for
   1024-1100px widths (both visible at once) before this was measured
   empirically and corrected. */
.home-live-feed-mobile {
    display: none;
}

@media (max-width: 1023px) {
    .home-live-feed-mobile {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        /* First attempt put a glowing ring on every individual card — didn't
           read right ("сделай какая-то рамка", not per-card glow). What was
           actually wanted: the whole strip framed as one self-contained
           panel, matching how the desktop .sidebar-live is its own bordered/
           backgrounded panel rather than loose floating cards. */
        padding: 12px 10px;
        margin: 10px 0 14px;
        border: 1px solid rgba(56, 104, 192, .35);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(24, 33, 39, .7), rgba(14, 20, 24, .55));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .home-live-feed-mobile::-webkit-scrollbar {
        display: none;
    }

    .home-live-feed-mobile .live-card {
        flex: 0 0 auto;
        width: 64px;
        height: 64px;
        padding: 6px;
        border-radius: 12px;
    }

    .home-live-feed-mobile .live-item-image {
        width: 30px !important;
        height: 30px !important;
    }

    .home-live-feed-mobile .live-item-name {
        font-size: 8.5px;
        max-width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-live-feed-mobile .live-card-avatar {
        width: 16px;
        height: 16px;
        top: 3px;
        left: 3px;
        font-size: 7px;
    }

    /* Превью дропа с "Апгрейдера" в мобильной ленте лайвдропа (наведение/тап
       на карточку) выглядело слишком крупным — иконка режима "апгрейдер"
       (.live-drop-upg-icon, см. _liveDropUpgraderIconHtml в app.js) сидит на
       составном селекторе .nav-icon-upg.live-drop-upg-icon с жёстко заданным
       42px (специально сделан сильнее по specificity, чтобы точно побеждать,
       см. комментарий у самого правила выше по файлу) — и не уменьшается
       вместе с остальной карточкой (тут 64px), в отличие от иконок кейсов/
       дайсов/баттлов на обычных .live-card-preview-image/-emoji. Только этот
       конкретный режим — остальные типы дропа в ленте не трогаем. */
    .home-live-feed-mobile .nav-icon-upg.live-drop-upg-icon {
        width: 24px;
        height: 24px;
    }
}

.roulette-image {
    width: 40px;
    height: 40px;
}

.slot-image {
    width: 32px;
    height: 32px;
}

.ops-preview-image {
    width: 52px;
    height: 52px;
}

.ops-weight-image {
    width: 26px;
    height: 26px;
}

.ops-preview-fallback, .ops-weight-fallback {
    display: inline-grid;
    place-items: center;
}

.ops-appearance-panel, .ops-presets-panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, .025);
}

.ops-appearance-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ops-image-input {
    min-width: 260px;
    flex: 1;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
}

.ops-presets-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ops-weight-row {
    align-items: flex-start;
}

.ops-item-appearance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ops-item-appearance .ops-image-input {
    min-width: 220px;
}

@media (max-width: 760px) {
    .ops-appearance-row, .ops-item-appearance {
        align-items: stretch;
    }

    .ops-image-input {
        min-width: 0;
        width: 100%;
    }
}

.speed-btn {
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    cursor: pointer;
    font-weight: 700;
}

.speed-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
}

.multi-open-row.hidden-pick-multi {
    display: none !important;
}

.hidden-pick-multi {
    display: none !important;
}

.hidden-pick-speed {
    display: none !important;
}

body.pick-mode .multi-open-row {
    display: none !important;
}

body.pick-mode .spin-speed-switch {
    display: none !important;
}

body.pick-mode .open-count-btn {
    display: none !important;
}

#pickCaseHint {
    display: none !important;
}

.ops-icon-size-input {
    width: 96px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 12px;
}

.pick-preview {
    min-height: 0;
}

.hidden {
    display: none !important;
}

.telegram-auth-mount {
    display: flex;
    justify-content: center;
    padding: 8px 0 2px;
}

.telegram-auth-mount iframe {
    max-width: 100%;
}

#openSelectedCaseBtn:disabled {
    opacity: .6;
    cursor: not-allowed;
    filter: saturate(.8);
}

.auth-card {
    position: relative;
}

.auth-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
}

.auth-close:hover {
    color: #fff;
}

.telegram-auth-mount {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    min-height: 56px;
}

.tg-login-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.tg-ios-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: none;
    font-weight: 600;
    font-size: 15px;
    background: linear-gradient(180deg, #2AABEE, #229ED9);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(34, 158, 217, .4);
    transition: all .2s ease;
}

.tg-ios-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 25px rgba(34, 158, 217, .6);
}

.tg-ios-btn:active {
    transform: scale(.97);
}

.tg-icon {
    font-size: 16px;
}

/* Вход через Discord в том же окне входа. Геометрия одна в одну с .tg-ios-btn
   выше — это две кнопки одного выбора, и разъезжаться им нельзя; отличается
   только цвет, иначе игрок не поймёт, куда он жмёт. */
.discord-auth-row {
    margin-top: 14px;
}

.discord-auth-or {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.discord-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    background: linear-gradient(180deg, #5865F2, #4752C4);
    color: #fff;
    box-shadow: 0 6px 20px rgba(71, 82, 196, .4);
    transition: all .2s ease;
}

.discord-auth-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.discord-auth-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 25px rgba(71, 82, 196, .6);
}

.discord-auth-btn:active {
    transform: scale(.97);
}

#openSelectedCaseBtn:disabled {
    opacity: .6;
    cursor: not-allowed;
    filter: saturate(.8);
}

.hidden {
    display: none !important;
}

.ghost-btn.accent {
    border-color: rgba(109, 241, 174, .28);
    color: #c9ffe0;
}

#ladderView {
    width: 100%;
    min-width: 0;
}

#ladderView .section-head {
    margin-bottom: 16px;
}

.ladder-step-main .muted, .ladder-side-text, #ladderEventLog, #ladderRewardPreview {
    word-break: break-word;
}

.ops-ladder-rows {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 14px;
}

.ops-ladder-row {
    display: grid;
    grid-template-columns:1.4fr .8fr .8fr;
    gap: 10px;
}

.ops-ladder-row input {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 12px;
    color: #fff;
}

.ops-card {
    margin-top: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 16px;
    background: rgba(255, 255, 255, .03);
}

.ops-card-head {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

@media (max-width: 760px) {
    .ops-ladder-row {
        grid-template-columns:1fr;
    }
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

#userAvatar, #profileAvatarLarge {
    overflow: hidden;
}

.spin-speed-switch {
    width: auto;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 0 auto;
}

.case-open-row-with-speed .spin-speed-switch {
    margin-top: 10px;
}

.speed-toggle {
    position: relative;
    display: inline-grid;
    grid-template-columns:1fr 1fr;
    gap: 0;
    padding: 4px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
    overflow: hidden;
}

.speed-toggle-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 16px rgba(42, 84, 160, .24);
    transition: transform .22s ease;
    pointer-events: none;
}

.speed-toggle[data-speed="slow"] .speed-toggle-pill {
    transform: translateX(100%);
}

.speed-toggle-btn {
    position: relative;
    z-index: 1;
    min-width: 116px;
    border: none;
    background: transparent;
    color: #cdd6e0;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 10px;
    transition: color .18s ease;
}

.speed-toggle-btn.active {
    color: #fff;
}

@media (max-width: 720px) {
    .spin-speed-switch {
        width: 100%;
        margin: 0;
    }

    .case-open-row-with-speed .spin-speed-switch {
        margin-top: 10px;
    }

    .speed-toggle {
        width: 100%;
    }

    .speed-toggle-btn {
        min-width: 0;
        width: 100%;
    }
}

#userAvatar, #profileAvatarLarge {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

#profileAvatarLarge {
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    box-sizing: border-box;
}

#userAvatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    box-sizing: border-box;
}

.profile-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: inherit !important;
}

.profile-head, .profile-userbox {
    align-items: center;
}

.profile-userbox {
    display: flex;
    gap: 14px;
}

.ops-card {
    margin-top: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 16px;
    background: rgba(255, 255, 255, .03);
}

.ops-card-head {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.ops-ladder-rows {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.ops-ladder-row {
    display: grid;
    grid-template-columns:1.4fr .8fr .8fr;
    gap: 10px;
}

.ops-ladder-row input {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    color: #fff;
    padding: 12px;
}

@media (max-width: 760px) {
    .ops-ladder-row {
        grid-template-columns:1fr;
    }
}

#profileAvatarLarge {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, .06);
}

#userAvatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, .06);
}

.profile-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: inherit !important;
}

.ops-top-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.field {
    display: grid;
    gap: 8px;
}

.field input, .ops-ladder-row input {
    background: #0b1812;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    padding: 12px;
}

.ops-ladder-rows {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.ops-ladder-row {
    display: grid;
    grid-template-columns:1.4fr .8fr .8fr;
    gap: 10px;
}

@media (max-width: 760px) {
    .ops-top-grid, .ops-ladder-row {
        grid-template-columns:1fr;
    }
}

.ops-layout-full {
    display: grid;
    /* minmax(0, 1fr), not bare 1fr -- a bare fr track has an implicit auto
       minimum, so any wide descendant (a nowrap table, a long token) forces
       the whole track past the container's own width instead of shrinking
       it and letting the descendant's own overflow-x:auto handle it. This
       was the actual cause of OPS analytics cards clipping their last column
       on phones -- not the cards' own internal grids, which were already
       responsive. */
    grid-template-columns:minmax(0, 1fr);
    gap: 16px;
}

.ops-grid-2 {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ops-cases-card #opsCaseFilter {
    margin-bottom: 12px;
}

.ops-case-meta-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.ops-case-description-input {
    width: 100%;
    min-height: 72px;
    margin-bottom: 12px;
    border-radius: 14px;
    padding: 10px;
    background: rgba(255, 255, 255, .04);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .08);
}

.ops-case-items-full {
    max-height: none;
}

.ops-ladder-editor {
    display: grid;
    gap: 12px;
}

.ops-ladder-row {
    display: grid;
    grid-template-columns:1.6fr .7fr .7fr;
    gap: 10px;
}

@media (max-width: 900px) {
    .ops-grid-2, .ops-case-meta-grid, .ops-ladder-row {
        grid-template-columns:1fr;
    }
}

.ops-overview-grid {
    align-items: start;
}

.ops-surface {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .26);
}

.ops-surface::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    pointer-events: none;
}

.ops-card {
    padding: 20px;
}

.ops-card-head {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.ops-form-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.ops-form-grid-2 {
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.compact-grid {
    grid-template-columns:1.4fr .8fr auto;
}

.ops-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.ops-field-wide {
    grid-column: span 2;
}

.ops-field-search {
    margin-bottom: 14px;
}

.ops-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #cdbdf6;
}

.ops-input, .ops-select, .ops-case-description-input, .ops-price-input, .ops-weight-input, .ops-item-image-input, .ops-ladder-row input {
    width: 100%;
    min-height: 48px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(197, 176, 255, .14);
    background: linear-gradient(180deg, rgba(14, 10, 24, .96), rgba(10, 8, 18, .92));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 20px rgba(0, 0, 0, .16);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ops-case-description-input {
    min-height: 108px;
    resize: vertical;
}

.ops-input::placeholder, .ops-case-description-input::placeholder, .ops-item-image-input::placeholder {
    color: rgba(228, 220, 255, .38);
}

.ops-input:focus, .ops-select:focus, .ops-case-description-input:focus, .ops-price-input:focus, .ops-weight-input:focus, .ops-item-image-input:focus, .ops-ladder-row input:focus {
    outline: none;
    border-color: rgba(176, 129, 255, .6);
    box-shadow: 0 0 0 4px rgba(138, 82, 255, .14), 0 16px 32px rgba(0, 0, 0, .24);
    transform: translateY(-1px);
}

.ops-stretch-btn, .ops-save-btn {
    min-height: 48px;
    border-radius: 16px;
}

.ops-list-soft {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    padding: 10px;
}

.ops-promo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .06);
}

.ops-promo-delete-btn {
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(56, 104, 192, .12);
    border: 1px solid rgba(56, 104, 192, .22);
    color: rgba(56, 104, 192, .85);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ops-promo-delete-btn:hover {
    background: rgba(56, 104, 192, .26);
    color: #58A6FF;
}

.ops-ladder-shell {
    gap: 12px;
}

.ops-ladder-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.ops-inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(131, 85, 255, .12);
    border: 1px solid rgba(166, 126, 255, .22);
    color: #efe7ff;
    font-size: 13px;
    font-weight: 600;
}

.ops-ladder-row {
    grid-template-columns:1.45fr .8fr .8fr;
}

.ops-case-list {
    gap: 14px;
}

.ops-case-row-extended {
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(17, 12, 28, .94), rgba(12, 8, 20, .95));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .2);
}

.ops-case-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.ops-case-main strong {
    font-size: 18px;
    display: block;
    margin-bottom: 4px;
}

.ops-case-price-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ops-case-price-row .primary-btn {
    height: 48px;
    border-radius: 16px;
}

.ops-case-meta-grid {
    margin: 0 0 12px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.ops-case-actions-row, .ops-weights-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ops-case-items-full {
    display: grid;
    gap: 10px;
    max-height: 560px;
    overflow: auto;
    padding-right: 4px;
}

.ops-item-row {
    display: grid;
    grid-template-columns:minmax(0, 1.3fr) 130px minmax(220px, .9fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
}

.ops-item-name {
    min-width: 0;
    line-height: 1.35;
}

.ops-weight-input {
    max-width: none;
}

.ops-item-image-input {
    min-width: 0;
}

.ops-case-items-full::-webkit-scrollbar {
    width: 10px;
}

.ops-case-items-full::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
}

@media (max-width: 1100px) {
    .compact-grid, .ops-form-grid, .ops-form-grid-2, .ops-case-meta-grid, .ops-item-row {
        grid-template-columns:1fr;
    }

    .ops-field-wide {
        grid-column: auto;
    }

    .ops-case-price-row {
        width: 100%;
    }

    .ops-case-price-row .ops-price-input {
        flex: 1;
    }

    .ops-ladder-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .ops-card {
        padding: 16px;
    }

    .ops-case-row-extended {
        padding: 14px;
    }

    .ops-promo-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .ops-case-head, .ops-case-actions-row, .ops-weights-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ops-case-price-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.ops-ladder-row {
    grid-template-columns:minmax(180px, 1.3fr) minmax(120px, 0.7fr);
}

.ops-ladder-toolbar-stack {
    display: grid;
    gap: 12px;
}

.ops-ladder-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ops-ladder-mode-btn {
    border: 1px solid rgba(197, 176, 255, .16);
    background: linear-gradient(180deg, rgba(18, 13, 31, .96), rgba(11, 8, 20, .92));
    color: #e9ddff;
    border-radius: 14px;
    min-height: 44px;
    padding: 0 16px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ops-ladder-mode-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(176, 129, 255, .38);
}

.ops-ladder-mode-btn.is-active {
    background: linear-gradient(135deg, #9f63ff, #6d59ff);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(111, 75, 255, .28);
}

.ops-ladder-meta {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    margin-top: 2px;
}

.ops-ladder-row-head {
    grid-template-columns:72px 1.4fr .8fr .6fr !important;
    align-items: center;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 16px;
    padding: 12px 14px;
}

.ops-ladder-row-head .ops-ladder-head-label, .ops-ladder-row-head .ops-ladder-step-no {
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ops-ladder-row {
    grid-template-columns:72px 1.4fr .8fr .6fr !important;
    align-items: center;
}

.ops-ladder-cell.ops-ladder-step-no {
    min-height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(180deg, rgba(30, 23, 49, .96), rgba(15, 11, 27, .94));
    border: 1px solid rgba(197, 176, 255, .12);
}

@media (max-width: 900px) {
    .ops-ladder-row-head, .ops-ladder-row {
        grid-template-columns:1fr !important;
    }

    .ops-ladder-row-head {
        display: none;
    }

    .ops-ladder-cell.ops-ladder-step-no {
        justify-content: flex-start;
        padding: 0 16px;
    }
}

.roulette-window {
    isolation: isolate;
}

.roulette-window .roulette-near-top-flash {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22), transparent 32%),
    radial-gradient(circle at 50% 18%, rgba(255, 210, 120, .18), transparent 28%);
    transition: opacity .35s ease;
}

.roulette-window.near-top-active .roulette-near-top-flash {
    opacity: 1;
    animation: nearTopPulse 1.15s ease 1;
}

@keyframes nearTopPulse {
    0% {
        opacity: 0;
        transform: scale(.94);
    }
    38% {
        opacity: .95;
        transform: scale(1.02);
    }
    100% {
        opacity: .1;
        transform: scale(1.05);
    }
}

.roulette-window.speed-fast .roulette-track, .roulette-window.speed-slow .roulette-track {
    filter: none;
}

.roulette-window[data-spin-tone="violet"] .roulette-pointer {
    box-shadow: 0 0 18px rgba(179, 126, 255, .28), 0 0 32px rgba(255, 255, 255, .22);
}

.roulette-window[data-spin-tone="neon"] .roulette-pointer {
    box-shadow: 0 0 18px rgba(88, 255, 178, .24), 0 0 32px rgba(255, 255, 255, .2);
}

.roulette-window[data-spin-tone="ice"] .roulette-pointer {
    box-shadow: 0 0 18px rgba(111, 214, 255, .25), 0 0 32px rgba(255, 255, 255, .2);
}

.roulette-window[data-spin-tone="sun"] .roulette-pointer {
    box-shadow: 0 0 18px rgba(255, 194, 92, .25), 0 0 32px rgba(255, 255, 255, .18);
}

.roulette-window[data-spin-tone="rose"] .roulette-pointer {
    box-shadow: 0 0 18px rgba(255, 124, 201, .24), 0 0 32px rgba(255, 255, 255, .18);
}

.roulette-window[data-spin-tone="mint"] .roulette-pointer {
    box-shadow: 0 0 18px rgba(103, 255, 221, .24), 0 0 32px rgba(255, 255, 255, .18);
}

.roulette-window[data-spin-tone="amber"] .roulette-pointer {
    box-shadow: 0 0 18px rgba(255, 180, 67, .24), 0 0 32px rgba(255, 255, 255, .18);
}

.roulette-window[data-spin-sheen="soft"]::after, .roulette-window[data-spin-sheen="hard"]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .03), transparent);
    mix-blend-mode: screen;
}

.roulette-window[data-spin-sheen="hard"]::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02), transparent);
}

.roulette-item.near-top-item {
    position: relative;
}

.roulette-item.near-top-item::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    border: 1px solid rgba(255, 214, 120, .18);
    opacity: 0;
    transition: opacity .25s ease;
}

.roulette-item.near-top-focus::before {
    opacity: 1;
}

.roulette-item.near-top-focus {
    box-shadow: 0 0 0 1px rgba(255, 214, 120, .18), 0 0 24px rgba(255, 196, 88, .18);
    transform: translateY(-1px);
}

:root, body.theme-dark-blue, body.theme-carnage {
    --bg: #050810;
    --panel: #0a0e18;
    --panel-2: #101a2c;
    --text: #FFFFFF;
    --muted: #5A7086;
    --line: rgba(255, 255, 255, .06);
    --accent: #3868C0;
    --accent-2: #2A54A0;
    --accent-3: #58A6FF;
    --success: #22C55E;
    --warning: #F59E0B;
    --accent-rgb: 239, 68, 68;
    --accent-2-rgb: 192, 32, 32;
    --accent-3-rgb: 255, 136, 136;
}

body.theme-light-red {
    --bg: #FFFFFF;
    --panel: #FAFAFA;
    --panel-2: #F4F4F4;
    --text: #04060b;
    --muted: #607086;
    --line: rgba(4, 6, 12, .24);
    --accent: #4C7FDB;
    --accent-2: #3868C0;
    --accent-3: #6FA3FF;
    --success: #16A34A;
    --warning: #D97706;
    --accent-rgb: 76, 127, 219;
    --accent-2-rgb: 56, 104, 192;
    --accent-3-rgb: 111, 163, 255;
}

html, body {
    background: linear-gradient(180deg, #0c1220 0%, #050810 70%) !important;
    color: var(--text) !important;
    font-family: 'Syne', 'Segoe UI', system-ui, sans-serif !important;
}

body.theme-light-red {
    background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 60%) !important;
}

body.theme-switching .app-shell {
    opacity: 0;
    pointer-events: none;
}

body.palette-blue.theme-dark-blue, body.palette-blue.theme-carnage {
    --accent: #3868C0;
    --accent-2: #2A54A0;
    --accent-3: #7BAFD4;
    --muted: #4e728f;
    --line: rgba(100, 160, 220, .12);
    --accent-rgb: 56, 104, 192;
    --accent-2-rgb: 42, 84, 160;
    --accent-3-rgb: 123, 175, 212;
    --bg: #0d0e10;
    --panel: #141617;
    --panel-2: #1a1c1f;
    --text: #e8f0ff;
}

body.palette-blue.theme-dark-blue, body.palette-blue.theme-carnage {
    background: radial-gradient(circle at 15% 0%, rgba(56, 104, 192, .07) 0%, transparent 25%), linear-gradient(180deg, #0d0e10 0%, #0a0b0c 60%, #080909 100%) !important;
}

body.palette-blue.theme-light-red {
    --accent: #2563eb;
    --accent-2: #1d4ed8;
    --accent-3: #60a5fa;
    --accent-rgb: 37, 99, 235;
    --accent-2-rgb: 29, 78, 216;
    --accent-3-rgb: 96, 165, 250;
    --muted: #5b7fa8;
    --line: rgba(37, 99, 235, .15);
    --bg: #f0f5ff;
    --panel: #f8faff;
    --panel-2: #eef3fc;
    --text: #0a1428;
    background: linear-gradient(180deg, #e8f0ff 0%, #f4f8ff 60%) !important;
}

body.palette-blue .primary-btn {
    box-shadow: 0 12px 24px rgba(56, 104, 192, .28) !important;
}

body.palette-blue .hero-badge {
    background: linear-gradient(135deg, rgba(56, 104, 192, .85), rgba(42, 84, 160, .75)) !important;
}

body.palette-blue .roulette-pointer {
    background: linear-gradient(180deg, #7BAFD4, #fff, #3868C0) !important;
}

body.palette-grey.theme-dark-blue, body.palette-grey.theme-carnage {
    --accent: #7288a0;
    --accent-2: #536175;
    --accent-3: #a8bccf;
    --accent-rgb: 114, 136, 160;
    --accent-2-rgb: 83, 97, 117;
    --accent-3-rgb: 168, 188, 207;
    --muted: #556070;
    --line: rgba(140, 170, 195, .10);
    --bg: #080b0e;
    --panel: #0f1317;
    --panel-2: #161b21;
    --text: #dde4ea;
}

body.palette-grey.theme-dark-blue, body.palette-grey.theme-carnage {
    background: radial-gradient(circle at 20% 0%, rgba(90, 120, 145, .12) 0%, transparent 30%),
    linear-gradient(180deg, #090c10 0%, #050709 60%, #030507 100%) !important;
}

body.palette-grey.theme-light-red {
    --accent: #64748b;
    --accent-2: #475569;
    --accent-3: #94a3b8;
    --accent-rgb: 100, 116, 139;
    --accent-2-rgb: 71, 85, 105;
    --accent-3-rgb: 148, 163, 184;
    --muted: #6b7a8d;
    --line: rgba(100, 116, 139, .14);
    --bg: #f4f6f8;
    --panel: #fafbfc;
    --panel-2: #eef0f3;
    --text: #0f1318;
    background: linear-gradient(180deg, #edf0f4 0%, #f6f8fa 60%) !important;
}

body.palette-grey .primary-btn {
    box-shadow: 0 12px 24px rgba(100, 116, 139, .26) !important;
}

body.palette-grey .hero-badge {
    background: linear-gradient(135deg, rgba(100, 116, 139, .85), rgba(71, 85, 105, .75)) !important;
}

body.palette-grey .roulette-pointer {
    background: linear-gradient(180deg, #a8bccf, #fff, #7288a0) !important;
}

.palette-picker-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.palette-swatch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border: 2px solid var(--line);
    background: rgba(255, 255, 255, .03);
    cursor: pointer;
    color: var(--text);
    transition: border-color .18s, transform .14s;
    position: relative;
    min-width: 100px;
}

.palette-swatch-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .2);
}

.palette-swatch-btn.is-active {
    border-color: var(--accent) !important;
}

.palette-swatch-btn.is-active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 11px;
    color: var(--accent);
    font-weight: 800;
}

.palette-swatch-preview {
    width: 56px;
    height: 32px;
    position: relative;
    overflow: hidden;
}

.palette-swatch-preview::before, .palette-swatch-preview::after {
    content: '';
    position: absolute;
    border-radius: 50% !important;
}

.palette-swatch-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.palette-swatch-btn[data-palette="red"] .palette-swatch-preview {
    background: #050810;
}

.palette-swatch-btn[data-palette="red"] .palette-swatch-preview::before {
    width: 28px;
    height: 28px;
    background: #3868C0;
    top: 4px;
    left: 6px;
    opacity: .7;
    filter: blur(8px);
}

.palette-swatch-btn[data-palette="red"] .palette-swatch-preview::after {
    width: 16px;
    height: 16px;
    background: #58A6FF;
    top: 9px;
    left: 11px;
}

.palette-swatch-btn[data-palette="blue"] .palette-swatch-preview {
    background: #0d0e10;
}

.palette-swatch-btn[data-palette="blue"] .palette-swatch-preview::before {
    width: 28px;
    height: 28px;
    background: #3868C0;
    top: 4px;
    left: 6px;
    opacity: .7;
    filter: blur(8px);
}

.palette-swatch-btn[data-palette="blue"] .palette-swatch-preview::after {
    width: 16px;
    height: 16px;
    background: #7BAFD4;
    top: 9px;
    left: 11px;
}

.palette-swatch-btn[data-palette="grey"] .palette-swatch-preview {
    background: #080b0e;
}

.palette-swatch-btn[data-palette="grey"] .palette-swatch-preview::before {
    width: 28px;
    height: 28px;
    background: #7288a0;
    top: 4px;
    left: 6px;
    opacity: .6;
    filter: blur(8px);
}

.palette-swatch-btn[data-palette="grey"] .palette-swatch-preview::after {
    width: 16px;
    height: 16px;
    background: #a8bccf;
    top: 9px;
    left: 11px;
}

body.theme-light-red .sidebar-live, body.theme-light-red .hero-banner, body.theme-light-red .profile-card, body.theme-light-red .case-card, body.theme-light-red .inventory-card, body.theme-light-red .item-hero, body.theme-light-red .item-related-panel, body.theme-light-red .profile-hero, body.theme-light-red .case-showcase, body.theme-light-red .case-info-panel, body.theme-light-red .fuse-panel, body.theme-light-red .inventory-panel, body.theme-light-red .promo-stat, body.theme-light-red .modal-card, body.theme-light-red .auth-card, body.theme-light-red .ladder-panel, body.theme-light-red .battle-sidebar-premium, body.theme-light-red .battle-main-premium, body.theme-light-red .live-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07), 0 1px 0 rgba(255, 255, 255, .9) inset !important;
}

body.theme-light-red .brand-btn, body.theme-light-red .nav-btn, body.theme-light-red .user-box, body.theme-light-red .balance-chip {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
}

body.theme-light-red .topbar {
    background: rgba(255, 255, 255, .97) !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important;
}

body.theme-light-red .sidebar-title, body.theme-light-red .panel-title, body.theme-light-red .muted, body.theme-light-red .user-label, body.theme-light-red .battle-create-copy, body.theme-light-red .battle-status-text, body.theme-light-red .battle-list-meta, body.theme-light-red .battle-case-meta, body.theme-light-red .battle-log, body.theme-light-red .battle-round-btn span {
    color: var(--muted) !important;
}

body.theme-light-red .brand-btn, body.theme-light-red .user-name, body.theme-light-red .profile-username, body.theme-light-red .case-title, body.theme-light-red .case-price, body.theme-light-red .section-head h2, body.theme-light-red .battle-create-title, body.theme-light-red .battle-case-card-body strong, body.theme-light-red .battle-case-dropdown-label, body.theme-light-red .battle-case-dropdown-option strong, body.theme-light-red .battle-round-btn {
    color: var(--text) !important;
}

body.theme-light-red .nav-btn.active, body.theme-light-red .ghost-btn.active, body.theme-light-red .primary-btn, body.theme-light-red .user-avatar, body.theme-light-red .profile-avatar-large, body.theme-light-red .speed-toggle-pill, body.theme-light-red .ladder-progress-fill, body.theme-light-red .battle-round-btn.is-active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border: none !important;
    color: #fff !important;
}

body.theme-light-red input, body.theme-light-red select, body.theme-light-red textarea, body.theme-light-red .ops-input, body.theme-light-red .ops-select, body.theme-light-red .battle-case-dropdown-btn, body.theme-light-red .battle-case-dropdown-menu {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: var(--text) !important;
}

.theme-toggle-single {
    position: relative;
    align-self: stretch;
    width: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
    transition: background .15s;
}

.theme-toggle-single:hover {
    background: rgba(255, 255, 255, .07);
}

.theme-toggle-single .theme-toggle-orbit {
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
}

.theme-toggle-single .theme-toggle-icon-img {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
}

.theme-toggle-single .theme-toggle-icon-next {
    opacity: 0;
    transform: translateX(18px) scale(.2) rotate(-120deg);
}

.theme-toggle-single.is-animating .theme-toggle-icon-current {
    animation: themeSuckIn .52s cubic-bezier(.22, .9, .24, 1) forwards;
}

.theme-toggle-single.is-animating .theme-toggle-icon-next {
    animation: themeSpitOut .56s cubic-bezier(.18, .84, .18, 1) .04s forwards;
}

body.theme-light-red .theme-toggle-single {
    background: transparent;
}

body.theme-light-red .theme-toggle-single:hover {
    background: rgba(0, 0, 0, .06);
}

@keyframes themeSuckIn {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
    35% {
        opacity: 1;
        transform: translateX(2px) scale(.78) rotate(45deg);
    }
    100% {
        opacity: 0;
        transform: translateX(0) scale(.05) rotate(220deg);
        filter: blur(2px);
    }
}

@keyframes themeSpitOut {
    0% {
        opacity: 0;
        transform: translateX(-2px) scale(.05) rotate(-200deg);
        filter: blur(2px);
    }
    55% {
        opacity: 1;
        transform: translateX(-1px) scale(1.12) rotate(16deg);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

.item-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

body.theme-light-red .item-source-badge {
    background: #fff;
    border-color: rgba(4, 6, 12, .24);
}

body.theme-light-red .payment-method-btn {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: var(--text) !important;
}

body.theme-light-red .payment-method-action {
    background: #f4f4f4 !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: var(--text) !important;
}

body.theme-light-red .loot-card, body.theme-light-red .inventory-card, body.theme-light-red .target-card, body.theme-light-red .related-card {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .ops-surface {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07) !important;
}

#battleCaseCards {
    display: none !important;
}

#cancelBattleBtn:not(.hidden) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

#ladderAdvanceBtn {
    display: none !important;
}

#openSelectedCaseBtn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: #fff !important;
    box-shadow: none !important;
}

#createBattleBtn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    color: #fff !important;
    box-shadow: none !important;
}

#ladderAdvanceBtn {
    display: none !important;
}

#openLadderModeBtn, #ladderCashoutBtn {
    min-height: 52px;
    border-radius: 18px;
    font-weight: 800;
}

#ladderCashoutBtn {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    color: var(--text);
}

.ops-ladder-step-count-field {
    max-width: 220px;
    margin: 12px 0 14px;
}

.ops-ladder-mode-switch {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ops-ladder-mode-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.item-source-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

body.modal-fullscreen-open {
    overflow: hidden;
}

body.modal-fullscreen-open .modal {
    padding: 0 !important;
    background: rgba(6, 8, 12, .94) !important;
}

body.modal-fullscreen-open #rouletteModal .modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 18px 14px 18px !important;
    border: none !important;
    box-shadow: none !important;
    background: linear-gradient(180deg, #0b1220, #0a111b) !important;
}

body.modal-fullscreen-open #rouletteModal .modal-top {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-bottom: 10px;
    background: linear-gradient(180deg, #0b1220 70%, rgba(11, 18, 32, .6));
}

body.modal-fullscreen-open #rouletteModal .roulette-windows.clean-sell-layout.multiple {
    grid-template-columns:1fr !important;
    gap: 14px !important;
}

body.modal-fullscreen-open #rouletteModal .roulette-window {
    min-height: 180px !important;
}

body.modal-fullscreen-open #rouletteModal .roulette-window.single {
    min-height: 190px !important;
}

body.modal-fullscreen-open #rouletteModal .roulette-item {
    box-shadow: none !important;
}

.sidebar-live {
    backdrop-filter: none !important;
}

.live-card, .case-card, .profile-card, .inventory-card, .hero-banner, .modal-card {
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18) !important;
}

.case-glow, .case-showcase-glow {
    filter: blur(10px) !important;
}

@media (max-width: 760px) {
    body.modal-fullscreen-open #rouletteModal .modal-card {
        padding: 12px 10px 14px !important;
    }

    body.modal-fullscreen-open #rouletteModal .roulette-window.single {
        min-height: 190px !important;
    }
}

.payment-box {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 12px;
}

.payment-box-head {
    display: grid;
    gap: 4px;
}

.payment-gui {
    display: grid;
    gap: 10px;
}

.payment-method-btn {
    width: 100%;
    display: grid;
    grid-template-columns:44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.payment-method-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .14);
}

.payment-method-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
}

.payment-method-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.payment-method-body strong {
    color: var(--text);
}

.payment-method-body small {
    color: var(--muted);
}

.payment-method-action {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.payment-method-hint {
    line-height: 1.45;
}

body.theme-light-red .payment-method-btn {
    background: rgba(255, 255, 255, .86) !important;
    border-color: var(--line) !important;
}

body.theme-light-red .payment-method-action {
    background: rgba(255, 255, 255, .82) !important;
}

@media (max-width: 680px) {
    .payment-method-btn {
        grid-template-columns:44px minmax(0, 1fr);
    }

    .payment-method-action {
        grid-column: 2;
        justify-self: start;
    }
}

.payment-currency-switch {
    display: grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.payment-currency-btn {
    min-height: 44px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    font-weight: 800;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.payment-currency-btn:hover {
    transform: translateY(-1px);
}

.payment-currency-btn.is-active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
}

.payment-methods-group {
    display: none;
    gap: 10px;
}

.payment-methods-group.is-active {
    display: grid;
}

body.theme-light-red .payment-currency-btn {
    background: rgba(255, 255, 255, .82) !important;
}

body.theme-light-red .payment-currency-btn.is-active {
    color: #fff !important;
}

@media (max-width: 760px) {
    .payment-currency-switch {
        grid-template-columns:1fr 1fr;
    }
}

.payment-amount-summary {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
}

.payment-amount-summary strong {
    font-size: 18px;
}

.payment-amount-summary span {
    color: var(--muted);
    line-height: 1.45;
}

/* .payment-amount-summary is display:grid for its usual <strong>+<span> shape
   (deposit terminal), which stacks each direct child on its own row. But
   #withdrawalFormHint holds plain hint/error text, and the TOK-icon
   MutationObserver (replaceTokenTextNodes) splits any "TOK" inside it into
   separate text/img/text child nodes — grid then puts each on its own row
   instead of flowing them inline, so any message containing "TOK" broke
   into 2-3 stacked rows regardless of how short the text was. */
#withdrawalFormHint {
    display: block;
}

.payment-rates-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
}

.payment-rates-title {
    font-weight: 900;
    color: var(--text);
}

.payment-rates-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px;
}

.payment-rates-grid div {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .04);
}

.payment-rates-grid strong {
    color: var(--text);
}

.payment-rates-grid span {
    color: var(--muted);
    font-size: 13px;
}

.support-floating-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 170;
    width: 62px;
    height: 62px;
    border-radius: 50% !important;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .14);
}

.support-floating-btn:hover {
    transform: translateY(-2px) scale(1.03);
}

.support-floating-icon {
    font-size: 26px;
    line-height: 1;
}

body.theme-light-red .payment-amount-summary, body.theme-light-red .payment-rates-card, body.theme-light-red .payment-rates-grid div {
    background: rgba(255, 255, 255, .86) !important;
    border-color: var(--line) !important;
}

@media (max-width: 760px) {
    .payment-rates-grid {
        grid-template-columns:1fr;
    }

    .support-floating-btn {
        right: 14px;
        bottom: 14px;
        width: 58px;
        height: 58px;
    }
}

.payment-method-btn[data-payment-method="telegram_stars"] .payment-method-icon {
    background: linear-gradient(135deg, #5d7cff, #8d5fff);
}

.ops-case-count {
    margin: 6px 0 12px;
    font-weight: 700;
}

.support-floating-btn {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
}

.support-floating-btn span {
    pointer-events: none;
}

.payment-history-box {
    margin-top: 16px;
}

.payment-history-list, .ops-deposit-list, .ops-battle-history-list, .battle-history-list {
    display: grid;
    gap: 10px;
}

.payment-history-row, .ops-deposit-row, .ops-battle-history-row, .battle-history-mini {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    border-radius: 16px;
    padding: 12px;
}

.payment-history-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.payment-history-row div, .ops-deposit-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.payment-history-row span, .ops-deposit-row span, .ops-deposit-row small, .ops-battle-history-row span, .ops-battle-history-row small, .battle-history-mini span {
    color: var(--muted);
}

.payment-history-row span, .ops-deposit-row span, .ops-deposit-row small, .ops-deposit-row strong, .ops-battle-history-row span, .ops-battle-history-row small, .battle-history-mini span {
    /* Deposit/withdrawal ids ("dep_1784932637010_7fe9c99e") are one long
       unbreakable token -- without this they silently overflow .ops-deposit-
       main's column and render underneath the action buttons next to them
       instead of wrapping, especially visible on narrow phone widths. */
    overflow-wrap: anywhere;
}

.payment-history-row em {
    font-style: normal;
    font-weight: 900;
}

.payment-history-row.status-paid em {
    color: #55e08a;
}

.payment-history-row.status-pending em {
    color: #ffd36e;
}

.ops-deposit-row {
    display: grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.ops-deposit-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Below ~480px the auto-width actions column (often 2+ buttons) leaves too
   little room for the id/text column next to it -- stack instead of
   squeezing them side by side, same fix for every list built on this shared
   row (deposits, withdrawals, pet-deposits, bonus-promos, special-deposit-
   offers, quests). */
@media (max-width: 480px) {
    .ops-deposit-row {
        grid-template-columns: 1fr;
    }

    .ops-deposit-actions {
        width: 100%;
    }

    .ops-deposit-actions .primary-btn, .ops-deposit-actions .ghost-btn, .ops-deposit-actions button {
        flex: 1 1 auto;
    }
}

body.theme-light-red .payment-history-row, body.theme-light-red .ops-deposit-row, body.theme-light-red .ops-battle-history-row, body.theme-light-red .battle-history-mini, body.theme-light-red .battle-round-result {
    background: rgba(255, 255, 255, .86) !important;
}

.hero-banner {
    align-items: stretch;
}

.lobby-promo-card {
    display: grid;
    gap: 12px;
}

.lobby-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.lobby-action-btn {
    flex: 1;
    min-height: 42px;
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.lobby-deposit-main {
    flex: 1.7 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
}

.profile-tabs, .ops-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}

.profile-tab, .ops-tab {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
    transition: .16s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.profile-tab.is-active, .ops-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(42, 84, 160, .22);
}

.profile-tab-panel {
    display: none;
}

.profile-tab-panel.is-active {
    display: block;
}

.ops-section {
    display: none !important;
}

.ops-section.is-active {
    display: block !important;
}

.ops-grid-2.ops-overview-grid {
    display: block;
}

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

.payment-step {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    border-radius: 16px;
    padding: 10px;
    display: grid;
    gap: 4px;
    text-align: center;
}

.payment-step b {
    margin: auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
}

.payment-step.is-active b, .payment-step.is-done b {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.payment-step span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

/* 210px на карточку не хватало: 44px картинка + ~110px кнопка «Удалить»
   оставляли названию сорок пикселей, и оно ломалось по буквам. */
.ops-items-list {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px;
    align-items: start;
}

.ops-item-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ops-item-overview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.ops-item-actions {
    display: flex;
    gap: 8px;
}

.ops-item-actions .ghost-btn {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
}

/* Название — одной строкой с многоточием; полное лежит в title. Раньше здесь
   работал overflow-wrap:anywhere, который в узкой колонке рвал слово по
   буквам вместо того, чтобы обрезать его. */
.ops-item-overview-body strong {
    display: block;
    font-size: 14px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-item-price {
    font-weight: 700;
    color: var(--text) !important;
    font-size: 13px;
}

.ops-item-id {
    font-size: 11px;
    opacity: .7;
}

.ops-item-overview span {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.ops-item-overview-media {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.ops-item-overview-image {
    object-fit: contain;
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 4px;
}

.ops-item-overview-image[src] {
    object-position: center;
}

.ops-item-overview-media img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
}

.ops-item-overview-media img[src] {
    display: block;
    object-fit: contain;
    width: 52px;
    height: 52px;
    margin: 0 auto;
}

.ops-item-overview-media img[src]:not([src=""]) {
    display: block;
    object-fit: contain;
    width: 52px;
    height: 52px;
    margin: 0 auto;
}

.ops-item-overview-emoji {
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: 22px;
}

.ops-item-edit-form {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .04);
    border-radius: 10px;
    margin-top: 4px;
}

/* Гриду 1fr 1fr нужен явный min-width:0 на детях: без него колонка не
   ужимается ниже собственной ширины поля, и форма вылезала за карточку. */
.ops-item-edit-form input,
.ops-item-edit-form select {
    min-width: 0;
    box-sizing: border-box;
}

.ops-item-ret {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ops-item-ret-head {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}

.ops-item-ret-head .muted {
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.ops-item-ret-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.ops-item-ret-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
}

.ops-item-ret-nums {
    flex-shrink: 0;
    white-space: nowrap;
}

.ops-item-ret-diff.is-up { color: var(--success); font-weight: 800; }
.ops-item-ret-diff.is-down { color: #FF6B6B; font-weight: 800; }
.ops-item-ret-diff.is-flat { color: var(--muted); }

.ops-item-ret-empty {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.ops-item-edit-form input {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    padding: 4px 8px;
    color: inherit;
    font-size: 13px;
}

.ops-item-edit-form .ops-item-edit-actions {
    grid-column: 1/-1;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* Кнопка «Изменить» теперь такая же ghost-btn, как «Удалить» — вид у пары
   действий должен быть один. От прежнего вида остаётся только подсветка
   активного режима правки ниже. */

.ops-item-edit-btn.is-editing {
    opacity: 1;
    background: rgba(127, 77, 255, .15);
    border-color: rgba(127, 77, 255, .3);
}

body.theme-light-red .profile-tab, body.theme-light-red .ops-tab, body.theme-light-red .payment-step, body.theme-light-red .ops-item-overview, body.theme-light-red .ladder-win-side-block {
    background: rgba(255, 255, 255, .86) !important;
}

@media (max-width: 760px) {
    .payment-steps {
        grid-template-columns:1fr 1fr;
    }

    .lobby-actions, .ladder-actions-row {
        grid-template-columns:1fr;
    }
}

.deposit-terminal {
    display: grid;
    grid-template-columns:110px minmax(0, 1fr);
    padding: 0 !important;
    overflow: hidden;
    border-radius: 0;
    background: #111722 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
}

.deposit-menu-tabs {
    background: #1a2232;
    border-right: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    align-content: start;
}

.deposit-menu-tab {
    min-height: 86px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    color: #7f8899;
    display: grid;
    place-items: center;
    gap: 6px;
    font-weight: 900;
    cursor: pointer;
    position: relative;
}

.deposit-menu-tab.is-active {
    color: #fff;
    background: #30394f;
}

.deposit-menu-tab.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ff9838;
}

.deposit-menu-tab-icon {
    font-size: 28px;
    line-height: 1;
}

.deposit-menu-tab strong {
    font-size: 13px;
}

.deposit-terminal-main {
    padding: 26px 30px;
    display: grid;
    gap: 18px;
}

.deposit-terminal-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.deposit-terminal-head .panel-title {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.deposit-currency-select {
    width: 98px;
    height: 34px;
    background: #1a2232;
    border: 1px solid rgba(255, 255, 255, .28);
    color: #ff9838;
    border-radius: 0;
    padding: 0 10px;
    font-weight: 900;
}

.deposit-terminal .payment-steps, .deposit-terminal .payment-currency-switch, .deposit-terminal .payment-rates-card {
    display: none !important;
}

.deposit-terminal .payment-amount-summary {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0;
    background: transparent;
    color: #aeb8ca;
    padding: 16px 0 0;
}

.deposit-terminal .payment-gui {
    display: grid;
    grid-template-columns:repeat(4, minmax(120px, 1fr));
    gap: 20px;
}

.deposit-terminal .payment-methods-group {
    display: contents !important;
}

.deposit-terminal .payment-method-btn {
    min-height: 110px;
    border-radius: 0;
    border: 1px solid #2f3850;
    background: #171e2d;
    color: #fff;
    display: grid;
    align-content: center;
    justify-items: start;
    padding: 18px 14px;
    position: relative;
}

.deposit-terminal .payment-method-btn:hover, .deposit-terminal .payment-method-btn:focus {
    border-color: #ff9838;
    outline: 0;
}

.deposit-terminal .payment-method-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    pointer-events: none;
}

.deposit-terminal .payment-method-btn:hover::before {
    border-color: #ff9838;
}

.deposit-terminal .payment-method-icon {
    width: auto;
    height: auto;
    background: transparent !important;
    color: #fff;
    font-size: 28px;
    margin-bottom: 8px;
}

.deposit-terminal .payment-method-body {
    display: grid;
    gap: 8px;
}

.deposit-terminal .payment-method-body strong {
    color: #fff;
    font-size: 15px;
}

.deposit-terminal .payment-method-body small {
    color: #aeb8ca;
    font-size: 11px;
}

.deposit-terminal .payment-method-action {
    display: none;
}

.deposit-terminal .is-hidden-by-category {
    display: none !important;
}

.deposit-terminal-bottom {
    display: grid;
    grid-template-columns:minmax(160px, 220px) minmax(160px, 220px) minmax(180px, 1fr);
    gap: 16px;
    align-items: end;
}

.deposit-terminal-field {
    display: grid;
    grid-template-columns:130px 1fr;
    align-items: center;
    gap: 4px 10px;
}

.deposit-terminal-field span {
    color: #fff;
    font-weight: 800;
    grid-column: 1;
}

.deposit-terminal-field small {
    grid-column: 1;
    color: #7f8899;
    font-size: 12px;
}

.deposit-terminal-input {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    min-height: 44px;
    border: 0;
    background: #1a2232;
    color: #fff;
    padding: 0 14px;
    font-weight: 900;
}

.deposit-terminal-pay-btn {
    min-height: 44px;
    border: 0;
    background: #ff9838;
    color: #fff;
    font-weight: 1000;
    letter-spacing: .02em;
    cursor: pointer;
}

.deposit-terminal-pay-btn:hover {
    filter: brightness(1.06);
}

.deposit-terminal .payment-method-hint {
    color: #aeb8ca;
}

body.theme-light-red .deposit-terminal {
    background: #f8f3f0 !important;
    border-color: #ead8d0 !important;
}

body.theme-light-red .deposit-menu-tabs {
    background: #f0e7e2;
}

body.theme-light-red .deposit-menu-tab {
    color: #9a8981;
}

body.theme-light-red .deposit-menu-tab.is-active {
    color: #2b2220;
    background: #fff;
}

body.theme-light-red .deposit-terminal-head .panel-title, body.theme-light-red .deposit-terminal-field span {
    color: #2b2220;
}

body.theme-light-red .deposit-terminal .payment-method-btn, body.theme-light-red .deposit-terminal-input, body.theme-light-red .deposit-currency-select {
    background: #fff !important;
    color: #2b2220 !important;
    border-color: #ead8d0 !important;
}

body.theme-light-red .deposit-terminal .payment-method-body strong {
    color: #2b2220;
}

@media (max-width: 840px) {
    .deposit-terminal {
        grid-template-columns:1fr;
    }

    .deposit-menu-tabs {
        grid-template-columns:repeat(4, 1fr);
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .deposit-menu-tab {
        min-height: 68px;
    }

    .deposit-terminal-main {
        padding: 18px;
    }

    .deposit-terminal .payment-gui {
        grid-template-columns:1fr 1fr;
        gap: 12px;
    }

    .deposit-terminal-bottom {
        grid-template-columns:1fr;
    }

    .deposit-terminal-field {
        grid-template-columns:1fr;
    }

    .deposit-terminal-input {
        grid-column: auto;
        grid-row: auto;
    }
}

.deposit-open-modal-btn {
    margin-top: 12px;
    min-height: 52px;
}

.deposit-fullscreen-modal.hidden {
    display: none !important;
}

.deposit-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 22px;
}

.deposit-fullscreen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 14, .72);
    backdrop-filter: blur(16px);
}

.deposit-fullscreen-shell {
    position: relative;
    width: min(980px, 100%);
    max-height: min(760px, 92vh);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 28px;
    background: #111722;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .45);
}

.deposit-fullscreen-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px 0;
}

.deposit-fullscreen-kicker {
    color: #ff9838;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .11em;
}

.deposit-fullscreen-head h3 {
    margin: 6px 0 0;
    color: #fff;
    font-size: 28px;
}

.deposit-fullscreen-close {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    font-weight: 900;
}

.deposit-modal-open {
    overflow: hidden;
}

.deposit-fullscreen-shell .deposit-terminal {
    margin: 22px 28px 28px;
    border-radius: 22px;
    overflow: hidden;
}

.deposit-terminal {
    grid-template-columns:120px minmax(0, 1fr);
    border-radius: 0 !important;
}

.deposit-terminal-main {
    gap: 20px;
}

.deposit-terminal .payment-gui {
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}

.deposit-terminal .payment-method-btn {
    border-radius: 18px;
    min-height: 122px;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.deposit-terminal .payment-method-btn:hover {
    transform: translateY(-2px);
    background: #1c2538;
}

.deposit-terminal-bottom {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.deposit-terminal-pay-btn {
    border-radius: 14px;
    min-height: 50px;
}

.deposit-terminal-input {
    border-radius: 14px;
}

.deposit-currency-select {
    border-radius: 12px;
}

.profile-card > .payment-box.deposit-terminal {
    display: none !important;
}

body.theme-light-red .deposit-fullscreen-backdrop {
    background: rgba(255, 245, 241, .70);
}

body.theme-light-red .deposit-fullscreen-shell {
    background: #fff8f5;
    border-color: #ead8d0;
}

body.theme-light-red .deposit-fullscreen-head h3 {
    color: #2b2220;
}

body.theme-light-red .deposit-fullscreen-close {
    color: #2b2220;
    background: #fff;
    border-color: #ead8d0;
}

@media (max-width: 760px) {
    .deposit-fullscreen-modal {
        padding: 10px;
        align-items: stretch;
    }

    .deposit-fullscreen-shell {
        max-height: calc(100vh - 20px);
        border-radius: 22px;
    }

    .deposit-fullscreen-head {
        padding: 18px 18px 0;
    }

    .deposit-fullscreen-head h3 {
        font-size: 22px;
    }

    .deposit-fullscreen-shell .deposit-terminal {
        margin: 16px;
    }
}

.profile-tab-panel-hidden-spacer {
    display: none !important;
}

.profile-tab-panel:not(.is-active) {
    display: none !important;
}

.profile-tab-panel.is-active {
    display: block !important;
}

.deposit-fullscreen-modal .profile-tab-panel, .deposit-fullscreen-modal .payment-box {
    display: grid !important;
}

#profileView .profile-tab-panel:not(.is-active) {
    display: none !important;
}

#profileView .profile-tab-panel.is-active {
    display: block !important;
}

.support-inapp-modal.hidden {
    display: none !important;
}

.support-inapp-modal {
    position: fixed;
    inset: 0;
    z-index: 230;
    display: grid;
    place-items: center;
    padding: 18px;
}

.support-inapp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 14, .72);
    backdrop-filter: blur(14px);
}

.support-inapp-shell {
    position: relative;
    width: min(520px, 100%);
    max-height: min(720px, 92vh);
    display: grid;
    grid-template-rows:auto minmax(220px, 1fr) auto;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: var(--panel);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
    overflow: hidden;
    animation: carnageModalIn .38s cubic-bezier(.17, .67, .3, 1.1) both;
}

.support-inapp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.support-inapp-kicker {
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .1em;
    color: var(--accent);
}

.support-inapp-head h3 {
    margin: 4px 0 0;
    color: var(--text);
}

.support-inapp-close {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.support-messages {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

.support-message {
    max-width: 86%;
    padding: 11px 13px;
    border-radius: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.support-message-bot {
    align-self: flex-start;
    color: var(--text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
}

.support-message-user {
    align-self: flex-end;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.support-inapp-form {
    display: grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid var(--line);
}

.support-inapp-form input {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    padding: 0 14px;
}

.support-modal-open {
    overflow: hidden;
}

body.theme-light-red .support-inapp-shell {
    background: #fff;
}

body.theme-light-red .support-message-bot, body.theme-light-red .support-inapp-form input, body.theme-light-red .support-inapp-close {
    background: #fff8f5 !important;
}

@media (max-width: 560px) {
    .support-inapp-modal {
        padding: 10px;
        align-items: stretch;
    }

    .support-inapp-shell {
        max-height: calc(100vh - 20px);
    }

    .support-inapp-form {
        grid-template-columns:1fr;
    }
}

.profile-wallet-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-left: auto;
    min-width: min(420px, 42%);
}

.profile-wallet-area .profile-balance-box {
    text-align: left;
    min-width: 170px;
    transform: translateX(-18px);
}

.profile-wallet-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}

.profile-tabs {
    display: none !important;
}

.profile-areas-layout .profile-column {
    display: grid;
    gap: 18px;
}

.profile-areas-layout .profile-column.wide {
    display: grid;
    grid-template-rows:auto auto;
    gap: 18px;
}

#profileView .profile-area-card, #profileView .profile-tab-panel, #profileView .profile-tab-panel:not(.is-active), #profileView .profile-tab-panel.is-active {
    display: block !important;
}

.profile-balance-area {
    order: 1;
}

.profile-inventory-area {
    order: 1;
    min-height: 360px;
}

.profile-history-area {
    order: 2;
}

.profile-actions-area {
    order: 2;
    max-height: 520px;
    overflow: auto;
}

.profile-history-area, .profile-actions-area {
    border-color: rgba(255, 255, 255, .12);
}

.profile-history-area .payment-history-list, .profile-actions-area .activity-list {
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

body.theme-light-red .profile-wallet-icon {
    box-shadow: 0 18px 38px rgba(88, 166, 255, .18);
}

@media (max-width: 920px) {
    .profile-hero {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .profile-wallet-area {
        min-width: auto;
        width: auto;
        justify-content: flex-end;
    }

    .profile-wallet-area .profile-balance-box {
        transform: none;
    }

    .profile-areas-layout {
        grid-template-columns:1fr;
    }
}

.profile-tabs {
    display: none !important;
}

.profile-balance-area {
    display: none !important;
}

.profile-wallet-btn {
    border: 0;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}

.profile-wallet-btn:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.06);
}

.profile-history-area {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.profile-actions-area.hidden {
    display: none !important;
}

.combined-history-list {
    display: grid;
    gap: 10px;
    max-height: 620px;
    overflow: auto;
    padding-right: 4px;
}

.combined-history-row {
    display: grid;
    grid-template-columns:42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.combined-history-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
}

.combined-history-row strong {
    display: block;
    color: var(--text);
}

.combined-history-row span, .combined-history-row small {
    color: var(--muted);
}

.payment-history-list.hidden {
    display: none !important;
}

body.theme-light-red .combined-history-row {
    background: rgba(255, 255, 255, .86) !important;
}

@media (max-width: 920px) {
    .profile-history-area {
        grid-column: auto;
        grid-row: auto;
    }
}

.profile-history-primary, .profile-balance-area.profile-history-primary {
    display: block !important;
}

.ops-add-item-grid, .ops-case-add-item-row {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ops-add-item-grid .ops-field-wide {
    grid-column: span 2;
}

/* .ops-item-overview is display:flex (see the base rule above) -- this used
   to be a dead grid-template-columns override with zero effect (a leftover
   from before it was switched to flex). The real reason the name/id text
   was pushing the edit/delete buttons off narrow screens: as a flex item
   with no min-width:0, that text block never shrank below its own natural
   content width, no matter how little room was left. */
.ops-item-overview-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ops-item-overview-body span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.danger-btn {
    border: 1px solid rgba(88, 166, 255, .45);
    background: rgba(88, 166, 255, .12);
    color: #58A6FF;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
}

.ops-case-remove-item-btn {
    margin-left: 8px;
}

@media (max-width: 760px) {
    .ops-add-item-grid, .ops-case-add-item-row {
        grid-template-columns:1fr;
    }
}

.main-content {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.app-shell {
    align-items: start;
}

.view {
    width: 100%;
    min-width: 0;
}

.profile-column, .profile-column.wide {
    min-width: 0;
}

.profile-actions-area {
    display: none !important;
}

.ops-add-case-grid {
    display: grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.live-feed {
    overflow: visible !important;
}

.live-card-static {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.roulette-windows {
    display: grid !important;
    gap: 14px !important;
}

.roulette-window.mini {
    display: block !important;
}

.roulette-lanes, .roulette-multi {
    display: grid !important;
    gap: 14px !important;
}

@media (max-width: 960px) {
    .profile-areas-layout {
        grid-template-columns:1fr !important;
    }

    .profile-inventory-area, .profile-history-primary {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .ops-add-case-grid {
        grid-template-columns:1fr;
    }
}

.empty-history {
    color: var(--muted);
    padding: 12px;
}

.ops-battle-history-row {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    margin-bottom: 10px;
}

.ops-battle-history-row strong {
    color: var(--text);
}

.ops-battle-history-row span, .ops-battle-history-row small {
    color: var(--muted);
}

.ui-fallback-node {
    display: none !important;
}

* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.profile-history-primary, .profile-inventory-area {
    min-height: 0 !important;
    height: auto !important;
}

.profile-history-primary {
    max-height: 640px !important;
    overflow: hidden !important;
}

.profile-inventory-area {
    max-height: 360px !important;
    overflow: hidden !important;
}

.profile-inventory-area .inventory-grid {
    max-height: 250px !important;
    overflow-y: scroll !important;
    display: block !important;
    width: 100% !important;
}

.profile-inventory-area .inventory-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.combined-history-list {
    max-height: 580px !important;
    overflow: auto !important;
    padding-right: 0 !important;
}

.combined-history-row {
    grid-template-columns:44px minmax(0, 1fr) max-content !important;
}

.combined-history-row small {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.profile-layout.profile-areas-layout {
    margin-top: 14px !important;
}

.profile-card {
    padding: 16px !important;
}

.profile-hero {
    margin-bottom: 12px !important;
}

@media (max-width: 960px) {
    .profile-areas-layout {
        grid-template-columns:1fr !important;
    }

    .profile-history-primary, .profile-inventory-area {
        max-height: none !important;
    }
}

.inventory-open-btn, .inventory-card button:has(+ .inventory-source), .inventory-card .ghost-btn:has(+ .inventory-source) {
    display: none !important;
}

.inventory-card .inventory-actions > .ghost-btn, .inventory-card .inventory-actions > button:first-child {
    display: none !important;
}

.inventory-card .inventory-actions .inv-action-btns .sell-btn, .inventory-card .inventory-actions .inv-action-btns .inv-withdraw-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.profile-history-primary {
    max-height: 520px !important;
}

.combined-history-list {
    max-height: 460px !important;
}

.profile-inventory-area {
    max-height: 260px !important;
    min-height: 0 !important;
}

.profile-inventory-area .inventory-grid {
    max-height: 190px !important;
}

.profile-card {
    padding: 14px !important;
}

.inventory-card {
    min-height: auto !important;
    padding: 14px !important;
}

.inventory-card .inventory-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.promo-banner, .auto-promo-section, .promo-panel, section:has(#promoCode), section:has(#promoTimer) {
    min-height: 0 !important;
}

.promo-hero, .promo-content, .bonus-hero {
    padding: 18px 20px !important;
    min-height: 0 !important;
}

.promo-hero h1, .bonus-hero h1, .promo-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
    margin: 4px 0 8px !important;
}

.promo-hero p, .bonus-hero p {
    margin: 0 !important;
    font-size: 14px !important;
}

.promo-side, .promo-stats, .bonus-side {
    gap: 8px !important;
}

.promo-side .stat-card, .bonus-side .stat-card {
    padding: 10px 14px !important;
    min-height: 64px !important;
}

.promo-actions .open-case-btn, .promo-actions .battle-btn, #promoOpenCaseBtn, #promoBattleBtn {
    display: none !important;
}

.promo-actions, .bonus-actions {
    display: grid !important;
    grid-template-columns:1fr !important;
    gap: 8px !important;
}

.promo-actions button:not(#promoDepositBtn):not(.deposit-btn), .bonus-actions button:not(#promoDepositBtn):not(.deposit-btn) {
    display: none !important;
}

.ops-add-item-grid, .ops-add-case-grid, .ops-case-add-item-row {
    display: grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.ops-add-item-grid .ops-field-wide {
    grid-column: span 2 !important;
}

.danger-btn {
    border: 1px solid rgba(88, 166, 255, .45);
    background: rgba(88, 166, 255, .12);
    color: #58A6FF;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 960px) {
    .profile-areas-layout {
        grid-template-columns:1fr !important;
    }

    .ops-add-item-grid, .ops-add-case-grid, .ops-case-add-item-row {
        grid-template-columns:1fr !important;
    }
}

.roulette-windows.multiple {
    display: grid !important;
    grid-template-columns:1fr !important;
    gap: 16px !important;
}

.roulette-lane {
    display: grid !important;
    gap: 10px !important;
}

.roulette-window {
    overflow: hidden !important;
}

.roulette-windows.multiple {
    display: grid !important;
    grid-template-columns:1fr !important;
    gap: 16px !important;
}

.roulette-lane {
    display: grid !important;
    gap: 10px !important;
}

.roulette-window {
    overflow: hidden !important;
}

.profile-areas-layout {
    display: grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 16px !important;
}

.profile-history-primary, .profile-inventory-area {
    width: 100% !important;
    min-width: 0 !important;
    height: 480px !important;
    max-height: 480px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.profile-inventory-area .inventory-grid {
    flex: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
    display: grid !important;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    align-content: start !important;
    justify-content: center !important;
    justify-items: center !important;
}

.profile-inventory-area .inventory-card {
    min-height: 120px !important;
}

.profile-inventory-area .inventory-head {
    margin-bottom: 8px !important;
}

.ops-balance-form {
    display: grid;
    grid-template-columns:1.2fr .7fr 1.4fr auto auto;
    gap: 10px;
    align-items: end;
}

.ops-balance-result {
    margin-top: 12px;
}

.ops-users-list {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.ops-user-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    cursor: pointer;
}

.ops-user-row span {
    display: grid;
    text-align: left;
}

.ops-user-row em {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
}

.ops-user-row b {
    color: var(--accent);
}

@media (max-width: 1180px) {
    .profile-areas-layout {
        grid-template-columns:1fr !important;
    }

    .profile-inventory-area {
        grid-column: auto !important;
        height: auto !important;
        min-height: 420px !important;
        max-height: none !important;
    }

    .profile-inventory-area .inventory-grid {
        height: auto !important;
        max-height: 420px !important;
    }

    .ops-balance-form {
        grid-template-columns:1fr;
    }
}

#profileView .profile-inventory-area {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: min(70vh, 760px) !important;
    overflow: hidden !important;
}

#profileView .profile-inventory-area .inventory-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

#profileView .profile-inventory-area .inventory-card {
    min-height: 168px !important;
}

#profileView .profile-inventory-area .inventory-card .inventory-actions {
    margin-top: auto !important;
}

#profileAvatarLarge img, #userAvatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
}

.roulette-window {
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(circle at 50% 10%, rgba(var(--accent-rgb), .14), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
}

.roulette-window::before, .roulette-window::after {
    content: '';
    position: absolute;
    top: 0;
    width: 18%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.roulette-window::before {
    left: 0;
    background: linear-gradient(90deg, rgba(10, 13, 18, .92), rgba(10, 13, 18, .25), transparent);
}

.roulette-window::after {
    right: 0;
    background: linear-gradient(270deg, rgba(10, 13, 18, .92), rgba(10, 13, 18, .25), transparent);
}

.roulette-velocity-fx {
    display: none;
}

.roulette-window.is-spinning .roulette-track {
    filter: none;
}

.roulette-window.is-finished .roulette-track {
    filter: none;
}

.roulette-pointer {
    width: 3px !important;
    background: linear-gradient(180deg, transparent, #fff 14%, var(--accent-3) 50%, #fff 86%, transparent) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, .52), 0 0 34px rgba(var(--accent-rgb), .34) !important;
}

.roulette-pointer::before, .roulette-pointer::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.roulette-pointer::before {
    top: 0;
    border-top: 12px solid #fff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .45));
}

.roulette-pointer::after {
    bottom: 0;
    border-bottom: 12px solid #fff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .45));
}

.roulette-item.winner-focus {
    position: relative;
    z-index: 4;
    transform: translateY(-6px) scale(1.03) !important;
    border-color: rgba(var(--accent-3-rgb), .88) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 0 32px rgba(var(--accent-rgb), .38), inset 0 0 26px rgba(var(--accent-3-rgb), .16) !important;
    animation: rouletteWinnerPulse 1.05s ease-in-out infinite;
}

.roulette-item.winner-focus::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, .22), transparent 82%);
    animation: rouletteWinnerShine 1.25s ease-in-out infinite;
}

/* Золото в ленте — только на выпавшем предмете и только если он дорогой
   (is-lux, от 1000 TOK). Во время прокрутки подсветки нет намеренно: она
   заранее выдавала результат, когда дорогая карточка проезжала мимо. Здесь
   же ленте уже нечего скрывать — предмет выпал, и обводка читается как
   «повезло», а не как подсказка. Правило из трёх классов специфичнее
   .roulette-item.winner-focus выше, поэтому перекрывает синюю рамку
   победителя независимо от порядка в файле. */
.roulette-item.is-lux.winner-focus {
    border-color: var(--lux-line) !important;
    box-shadow: 0 0 0 2px var(--lux-line), 0 0 34px var(--lux-glow), inset 0 0 26px rgba(255, 215, 106, .14) !important;
}

/* !important обязателен: цену в ленте красят сразу два правила с приоритетом —
   общее .roulette-value и палитра темы. Без него обводка становилась золотой,
   а цена оставалась серой. */
.roulette-item.is-lux.winner-focus .roulette-value {
    color: var(--lux) !important;
}

/* One-shot "impact" flourish for the exact instant a reel lands — layered
   on top of winner-focus's perpetual pulse/shine above, not replacing it.
   .winner-landed is added alongside .winner-focus only in finishSpin() and
   stripped again after ~600ms (see app.js), so it plays once as a
   punctuation mark on landing rather than becoming another ambient loop. */
.roulette-item.winner-landed {
    animation: rouletteLandingBounce .5s cubic-bezier(.25, .9, .3, 1.3) 1 both;
}

.roulette-item.winner-landed::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, .75);
    z-index: 1;
    animation: rouletteLandingRing .55s ease-out 1 both;
}

@keyframes rouletteLandingBounce {
    0%   { transform: translateY(-6px) scale(.92); }
    45%  { transform: translateY(-10px) scale(1.16); }
    70%  { transform: translateY(-4px) scale(.98); }
    100% { transform: translateY(-6px) scale(1.03); }
}

@keyframes rouletteLandingRing {
    0%   { opacity: .9; transform: scale(.6); }
    100% { opacity: 0; transform: scale(1.9); }
}

@keyframes rouletteWindowLandShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

.roulette-window.landing-shake {
    animation: rouletteWindowLandShake .28s ease-out 1;
}

@keyframes rouletteVelocity {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-44px);
    }
}

@keyframes rouletteWinnerPulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .18), 0 0 28px rgba(var(--accent-rgb), .32), inset 0 0 22px rgba(var(--accent-3-rgb), .12);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .28), 0 0 44px rgba(var(--accent-rgb), .52), inset 0 0 34px rgba(var(--accent-3-rgb), .26);
    }
}

@keyframes rouletteWinnerShine {
    0% {
        opacity: 0;
        transform: translateX(-80%);
    }
    35% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(80%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .roulette-window.is-spinning .roulette-velocity-fx, .roulette-item.winner-focus, .roulette-item.winner-focus::after,
    .roulette-item.winner-landed, .roulette-item.winner-landed::before, .roulette-window.landing-shake {
        animation: none;
    }
}

.roulette-window.spin-impact.is-spinning::before, .roulette-window.spin-countdown.is-spinning::before, .roulette-window.spin-pulse.is-spinning::before {
    background: linear-gradient(90deg, rgba(6, 7, 12, .96), rgba(6, 7, 12, .32), transparent);
}

.roulette-window.spin-impact.is-spinning::after, .roulette-window.spin-countdown.is-spinning::after, .roulette-window.spin-pulse.is-spinning::after {
    background: linear-gradient(270deg, rgba(6, 7, 12, .96), rgba(6, 7, 12, .32), transparent);
}

.roulette-window.spin-thriller.is-spinning .roulette-track, .roulette-window.spin-breathe.is-spinning .roulette-track, .roulette-window.spin-tension.is-spinning .roulette-track, .roulette-window.spin-suspense.is-spinning .roulette-track {
    filter: none;
}

.roulette-window.spin-thriller.is-spinning::before, .roulette-window.spin-breathe.is-spinning::before, .roulette-window.spin-tension.is-spinning::before, .roulette-window.spin-suspense.is-spinning::before {
    background: linear-gradient(90deg, rgba(4, 5, 10, .98), rgba(4, 5, 10, .40), transparent);
    width: 22%;
}

.roulette-window.spin-thriller.is-spinning::after, .roulette-window.spin-breathe.is-spinning::after, .roulette-window.spin-tension.is-spinning::after, .roulette-window.spin-suspense.is-spinning::after {
    background: linear-gradient(270deg, rgba(4, 5, 10, .98), rgba(4, 5, 10, .40), transparent);
    width: 22%;
}

.roulette-window.spin-thriller.is-spinning .roulette-pointer, .roulette-window.spin-breathe.is-spinning .roulette-pointer, .roulette-window.spin-tension.is-spinning .roulette-pointer, .roulette-window.spin-suspense.is-spinning .roulette-pointer {
    animation: roulettePointerDrama 1.6s ease-in-out infinite;
}

@keyframes roulettePointerDrama {
    0%, 100% {
        box-shadow: 0 0 16px rgba(255, 255, 255, .42), 0 0 28px rgba(var(--accent-rgb), .28);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, .75), 0 0 52px var(--accent), 0 0 72px var(--accent);
    }
}

.roulette-window.spin-marathon.is-spinning .roulette-track, .roulette-window.spin-ceremony.is-spinning .roulette-track, .roulette-window.spin-epoch.is-spinning .roulette-track, .roulette-window.spin-trance.is-spinning .roulette-track, .roulette-window.spin-legend.is-spinning .roulette-track, .roulette-window.spin-ritual.is-spinning .roulette-track {
    filter: none;
}

.roulette-window.spin-ceremony.is-spinning::before, .roulette-window.spin-epoch.is-spinning::before, .roulette-window.spin-trance.is-spinning::before, .roulette-window.spin-legend.is-spinning::before, .roulette-window.spin-ritual.is-spinning::before {
    background: linear-gradient(90deg, rgba(3, 4, 8, .99), rgba(3, 4, 8, .45), transparent);
    width: 24%;
}

.roulette-window.spin-ceremony.is-spinning::after, .roulette-window.spin-epoch.is-spinning::after, .roulette-window.spin-trance.is-spinning::after, .roulette-window.spin-legend.is-spinning::after, .roulette-window.spin-ritual.is-spinning::after {
    background: linear-gradient(270deg, rgba(3, 4, 8, .99), rgba(3, 4, 8, .45), transparent);
    width: 24%;
}

.roulette-window.spin-trance.is-spinning .roulette-pointer, .roulette-window.spin-legend.is-spinning .roulette-pointer, .roulette-window.spin-ritual.is-spinning .roulette-pointer {
    animation: roulettePointerCeremony 2.0s ease-in-out infinite;
}

@keyframes roulettePointerCeremony {
    0%, 100% {
        box-shadow: 0 0 14px rgba(255, 255, 255, .35), 0 0 24px rgba(var(--accent-rgb), .24);
        width: 3px !important;
    }
    45% {
        box-shadow: 0 0 36px rgba(255, 255, 255, .82), 0 0 60px var(--accent), 0 0 90px var(--accent);
        width: 5px !important;
    }
}

#rouletteModal .roulette-windows.clean-sell-layout, #rouletteModal .roulette-windows.single, #rouletteModal .roulette-windows.multiple {
    width: 100% !important;
    max-width: 100% !important;
}

#rouletteModal .roulette-windows.clean-sell-layout.single {
    display: grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
}

#rouletteModal .roulette-lane {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: stretch !important;
}

#rouletteModal .roulette-windows.clean-sell-layout.single .roulette-lane {
    max-width: 980px !important;
    margin: 0 auto !important;
}

#rouletteModal .roulette-lane .roulette-window {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 230px !important;
}

#rouletteModal .roulette-window.single {
    min-height: 220px !important;
}

#rouletteModal .roulette-window.mini {
    min-height: 175px !important;
}

#rouletteModal .roulette-track {
    left: 0 !important;
    right: auto !important;
    top: 22px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
}

#rouletteModal .roulette-item {
    flex: 0 0 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;   /* ширина карточки ленты жёстко фиксирована */
    width: 150px !important;
    height: 180px !important;
    overflow: hidden !important;
}

#rouletteModal .roulette-item.compact {
    flex-basis: 122px !important;
    min-width: 122px !important;
    width: 122px !important;
    max-width: 122px !important;   /* ширина карточки ленты жёстко фиксирована */
    height: 122px !important;
}

#rouletteModal .roulette-name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#rouletteModal .roulette-lane-actions {
    width: 100% !important;
    justify-content: center !important;
}

/* Мульти-открытие: полноразмерная "Продать" под каждой рулеткой была
   отдельным блоком в потоке, из-за чего рулетки не могли встать вплотную
   друг к другу -- отступ между ними складывался из grid-gap ПЛЮС высоты
   этого блока. Теперь для .multiple кнопка -- компактный круглый оверлей в
   углу самой карточки (position:absolute, вынута из потока), лента остаётся
   доступна для точечной продажи, а рулетки наконец стоят строго по gap
   контейнера. Одиночное открытие (.single) не тронуто -- там своя, более
   специфичная #rouletteModal .roulette-windows.clean-sell-layout.single
   .roulette-lane ветка выше этот селектор не матчит вовсе. */
#rouletteModal .roulette-windows.multiple .roulette-lane {
    position: relative !important;
}

#rouletteModal .roulette-windows.multiple .roulette-lane-actions {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-height: 0 !important;
    z-index: 5;
}

/* Кнопка подписана словом, а не монеткой: иконка доллара в углу карточки не
   читалась как «продать этот предмет». Ширина по содержимому, высота прежняя —
   оверлей остаётся вне потока, ленты по-прежнему стоят вплотную. */
#rouletteModal .roulette-windows.multiple .roulette-lane-actions .wheel-sell-btn-compact {
    min-width: 0 !important;
    width: auto !important;
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4) !important;
}

#rouletteModal .roulette-windows.multiple .roulette-lane-actions .sold-inline-note {
    min-width: 0;
    height: auto;
    padding: 4px 9px;
    font-size: 10px;
    white-space: nowrap;
    border-radius: 20px;
    background: rgba(5, 7, 13, .88);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

#rouletteModal .roulette-windows.multiple .lane-actions-placeholder {
    display: none !important;
}

@media (max-width: 760px) {
    #rouletteModal .roulette-windows.clean-sell-layout.single .roulette-lane {
        max-width: 100% !important;
    }

    #rouletteModal .roulette-lane .roulette-window {
        min-height: 190px !important;
    }

    #rouletteModal .roulette-window.single {
        min-height: 175px !important;
    }

    #rouletteModal .roulette-item {
        flex-basis: 132px !important;
        min-width: 132px !important;
        width: 132px !important;
        max-width: 132px !important;
        height: 140px !important;
    }
}

#rouletteModal:not(.hidden) {
    display: grid !important;
}

#rouletteModal .modal-card {
    overflow-x: hidden !important;
}

#rouletteModal .roulette-windows.clean-sell-layout {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
}

#rouletteModal .roulette-windows.clean-sell-layout.single {
    grid-template-columns:1fr !important;
}

#rouletteModal .roulette-windows.clean-sell-layout.multiple {
    grid-template-columns:1fr !important;
}

#rouletteModal .roulette-lane {
    display: grid !important;
    grid-template-columns:1fr !important;
    width: 100% !important;
    min-width: 0 !important;
}

#rouletteModal.count-3 .roulette-windows.clean-sell-layout.multiple {
    display: grid !important;
    grid-template-columns:1fr 1fr !important;
    gap: 12px !important;
}

#rouletteModal.count-3 .roulette-windows.clean-sell-layout.multiple .roulette-lane:nth-child(3) {
    grid-column: 1 / -1 !important;
    width: calc(50% - 6px) !important;
    margin: 0 auto !important;
}

#rouletteModal.count-5 .roulette-windows.clean-sell-layout.multiple {
    display: grid !important;
    grid-template-columns:repeat(6, 1fr) !important;
    gap: 12px !important;
}

#rouletteModal.count-5 .roulette-windows.clean-sell-layout.multiple .roulette-lane {
    grid-column: span 2 !important;
}

#rouletteModal.count-5 .roulette-windows.clean-sell-layout.multiple .roulette-lane:nth-child(4) {
    grid-column: 2 / 4 !important;
}

#rouletteModal.count-5 .roulette-windows.clean-sell-layout.multiple .roulette-lane:nth-child(5) {
    grid-column: 4 / 6 !important;
}

@media (max-width: 760px) {
    #rouletteModal.count-3 .roulette-windows.clean-sell-layout.multiple, #rouletteModal.count-5 .roulette-windows.clean-sell-layout.multiple {
        grid-template-columns:1fr !important;
    }

    #rouletteModal.count-3 .roulette-windows.clean-sell-layout.multiple .roulette-lane:nth-child(3), #rouletteModal.count-5 .roulette-windows.clean-sell-layout.multiple .roulette-lane:nth-child(n) {
        grid-column: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

#rouletteModal .roulette-lane .roulette-window {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 320px !important;
    justify-self: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#rouletteModal .roulette-track {
    position: absolute !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0);
}

#rouletteModal .roulette-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    color: var(--text) !important;
}

#rouletteModal .roulette-pointer {
    left: 50% !important;
    right: auto !important;
}

@media (max-width: 760px) {
    #rouletteModal .roulette-lane .roulette-window {
        width: 100% !important;
        min-width: 0 !important;
    }
}

#rouletteModal, #rouletteModal.hidden, #rouletteModal.modal.hidden, #rouletteModal.roulette-modal.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#rouletteModal.roulette-open {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 12px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}

#rouletteModal.roulette-open .modal-card {
    position: relative !important;
    display: block !important;
    width: min(1200px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(92vh, 900px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    translate: none !important;
    border-radius: 0 !important;
    background: radial-gradient(circle at 50% -10%, rgba(var(--accent-rgb), .18), transparent 42%),
    linear-gradient(180deg, rgba(16, 22, 26, .98), rgba(9, 13, 16, .98)) !important;
    border: 1px solid rgba(var(--accent-3-rgb), .16) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 34px rgba(var(--accent-rgb), .14) !important;
}

body.theme-light-red #rouletteModal.roulette-open .modal-card {
    background: radial-gradient(circle at 50% -10%, rgba(88, 166, 255, .15), transparent 42%),
    linear-gradient(180deg, rgba(255, 248, 245, .98), rgba(255, 242, 237, .98)) !important;
    border: 1px solid rgba(88, 166, 255, .16) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .12), 0 0 34px rgba(88, 166, 255, .08) !important;
}

body.theme-light-red #rouletteModal.roulette-open .modal-top h3, body.theme-light-red #rouletteModal.roulette-open #rouletteTitle {
    color: #0f172a !important;
}

body.theme-light-red #rouletteModal.roulette-open .modal-top .muted {
    color: #667085 !important;
}

body.theme-light-red #rouletteModal.roulette-open .roulette-item {
    background: rgba(255, 255, 255, .86) !important;
    border-color: #e8edf5 !important;
    color: #0f172a !important;
}

body.theme-light-red #rouletteModal.roulette-open .roulette-name {
    color: #0f172a !important;
}

body.theme-light-red #rouletteModal.roulette-open .roulette-value {
    color: #667085 !important;
}

body.theme-light-red #rouletteModal.roulette-open .icon-close {
    background: rgba(255, 255, 255, .86) !important;
    border: 1px solid #e8edf5 !important;
    color: #0f172a !important;
}

#rouletteModal.roulette-open .icon-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 50 !important;
    width: 34px !important;
    height: 34px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#rouletteModal.roulette-open .modal-top {
    margin: 0 0 8px !important;
    padding-right: 40px !important;
    gap: 8px !important;
}

#rouletteModal.roulette-open #rouletteTitle, #rouletteModal.roulette-open .modal-top h3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
}

#rouletteModal.roulette-open .modal-top .muted {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

#rouletteModal.roulette-open .roulette-windows {
    display: grid !important;
    grid-template-columns:1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    margin: 8px 0 !important;
    padding: 0 !important;
}

/* Было одно жёсткое значение (190px/132px) на ВСЕ ширины экрана без единого
   @media — из четырёх конкурирующих источников высоты .roulette-window
   именно этот блок побеждает в каскаде (та же специфичность 1 id + 2 класса,
   что и у #rouletteModal .roulette-lane .roulette-window, но идёт позже в
   файле), из-за чего desktop-вариант (230px, см. #rouletteModal .roulette-lane
   .roulette-window выше) и mobile-вариант (190px, там же в @media max-width:
   760px) оба были мертвым кодом — отсюда и "то один отступ, то другой,
   в зависимости от экрана". Ниже — те же самые числа, что уже были заданы
   выше по каскаду для двух версий, просто теперь реально доходят до экрана
   каждая на своей ширине. */
@media (min-width: 761px) {
    #rouletteModal.roulette-open .roulette-window {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        border-radius: 0 !important;
    }

    #rouletteModal.roulette-open .roulette-window.mini {
        height: 175px !important;
        min-height: 175px !important;
        max-height: 175px !important;
    }
}

@media (max-width: 760px) {
    #rouletteModal.roulette-open .roulette-window {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        border-radius: 0 !important;
    }

    #rouletteModal.roulette-open .roulette-window.mini {
        height: 132px !important;
        min-height: 132px !important;
        max-height: 132px !important;
    }
}

#rouletteModal.roulette-open .roulette-track {
    top: 16px !important;
    gap: 8px !important;
    width: max-content !important;
    min-width: max-content !important;
}

/* Ширина карточки ленты. Раньше это были жёсткие 118px/96px на любой экран, и
   на телефоне в окно попадала едва одна карточка: прокрутка выглядела как
   мелькание одного слота, а не как лента, из которой выбирают. Теперь ширина
   привязана к ширине экрана и берётся МЕНЬШЕЕ из двух — прежний потолок и
   доля вьюпорта. На широком экране всё как было, на узком карточки ужимаются
   ровно настолько, чтобы влезло нужное количество.

   Дробный делитель (3.4 и 4.4) намеренный: половинки карточек по краям
   показывают, что лента продолжается за границей окна. С целым числом лента
   выглядит как ровно выложенный ряд и теряет ощущение прокрутки.

   Делители были 6.5/7.5 и это перекрутило в другую сторону: на 390px карточка
   выходила 56px (компактная 49px) -- «плитки по 40 пикселей», в которых не
   разобрать ни картинку, ни имя. На телефоне лента стала полноэкранной (все
   дорожки при <=760px укладываются в одну колонку, см. count-3/count-5 ниже),
   так что делить её на 6-7 частей незачем: 3.4/4.4 дают ~105px/~83px на 390px
   и ~99px/~77px на 360px, то есть три с половиной карточки в окне вместо
   шести с половиной. Потолок 118/96 для планшетов остался прежним.

   Движку рулетки эта смена безразлична: с момента переписывания позиционирования
   он берёт РЕАЛЬНЫЕ offsetLeft и getBoundingClientRect().width каждой карточки,
   а числа 150/122 в коде остались лишь запасными значениями на случай, если
   элемент ещё не отрисован. Стрелка по-прежнему указывает на выданный предмет. */
#rouletteModal.roulette-open .roulette-item {
    flex: 0 0 min(118px, calc((100vw - 24px) / 3.4)) !important;
    width: min(118px, calc((100vw - 24px) / 3.4)) !important;
    max-width: min(118px, calc((100vw - 24px) / 3.4)) !important;
    min-width: min(118px, calc((100vw - 24px) / 3.4)) !important;
    border-radius: 0 !important;
    padding: 8px !important;
}

#rouletteModal.roulette-open .roulette-item.compact {
    flex-basis: min(96px, calc((100vw - 24px) / 4.4)) !important;
    width: min(96px, calc((100vw - 24px) / 4.4)) !important;
    max-width: min(96px, calc((100vw - 24px) / 4.4)) !important;
    min-width: min(96px, calc((100vw - 24px) / 4.4)) !important;
}

/* Высота карточек тут раньше была одним жёстким числом (154px/96px) на все
   ширины — тем же багом, что и у .roulette-window/.roulette-window.mini
   выше (см. комментарий там): эти числа были подогнаны под mobile-высоту
   окна (190px/132px), а с тех пор как у desktop появилась своя, большая
   высота (230px/175px), карточки внутри остались низкими -- отсюда "куча
   пустого места" под брейнротами в .roulette-window.mini на десктопе (63px
   пустоты: 175px окно − 16px отступ трека − 96px карточка). Высота карточки
   подогнана под высоту своего окна на каждой ширине отдельно, с тем же
   нижним отступом (~20px), что был у исходных mobile-чисел. */
@media (min-width: 761px) {
    #rouletteModal.roulette-open .roulette-item {
        height: 194px !important;
    }

    #rouletteModal.roulette-open .roulette-item.compact {
        height: 139px !important;
    }
}

@media (max-width: 760px) {
    #rouletteModal.roulette-open .roulette-item {
        height: 154px !important;
    }

    /* 104, а не прежние 96: карточка мульти-открытия стала шире (~83px против
       ~49px) и картинка внутри выросла с 20px до 32px, из-за чего длинные
       имена на третьей строке вылезали за нижнюю границу. В окне высотой 132px
       при отступе трека 16px запас есть — карточка занимает 120px из 132. */
    #rouletteModal.roulette-open .roulette-item.compact {
        height: 104px !important;
    }
}

#rouletteModal.roulette-open .roulette-emoji {
    font-size: 28px !important;
    min-height: 40px !important;
}

#rouletteModal.roulette-open .roulette-item.compact .roulette-emoji {
    min-height: 30px !important;
}

#rouletteModal.roulette-open .roulette-item.compact .roulette-image {
    width: 30px !important;
    height: 30px !important;
}

#rouletteModal.roulette-open .roulette-name {
    font-size: 12px !important;
    margin-top: 4px !important;
}

#rouletteModal.roulette-open .roulette-value {
    font-size: 11px !important;
}

#rouletteModal.roulette-open .modal-foot {
    margin-top: 8px !important;
    padding-top: 8px !important;
    gap: 8px !important;
}

#rouletteModal.roulette-open #rouletteResult {
    max-height: 80px !important;
    overflow: auto !important;
    font-size: 12px !important;
}

@media (max-width: 380px) {
    #rouletteModal.roulette-open .modal-card {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

body.in-battle .sidebar-battles, body.in-battle #battlesSidebar, body.in-battle .right-battles, body.in-battle .battles-panel {
    display: none !important;
}

.battle-history-sidebar, #battleHistoryList {
    display: none !important;
}

.ops-support-card {
    grid-column: 1 / -1;
}

/* ── Бонусы: тёплый золотой акцент вместо общего сайтового синего ──────────
   Раньше эта вкладка была визуально неотличима от любой другой: тот же
   --muted/--accent/--line, что и everywhere. Не "прибавить яркость серому",
   а осознанно выделить именно эту вкладку как "премиальную" зону заработка —
   тёплое золото тематически ложится на реферальный доход/уровни, и даёт
   реальный контраст с холодным синим акцентом остального сайта, а не просто
   более светлый серый. Свои custom properties, скоуплены на #bonusView,
   общая палитра сайта не трогается вообще. */
#bonusView {
    --bonus-gold: #e8b84f;
    --bonus-gold-soft: rgba(232, 184, 79, .14);
    --bonus-gold-line: rgba(232, 184, 79, .32);
    --bonus-gold-glow: rgba(232, 184, 79, .18);
}

#bonusView .section-head h2 {
    background: linear-gradient(135deg, #fff, var(--bonus-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#bonusView .panel-title {
    color: var(--bonus-gold) !important;
}

#bonusView .bonus-section-card {
    border-color: var(--bonus-gold-line) !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, .5), 0 0 40px var(--bonus-gold-glow) !important;
    position: relative;
    overflow: hidden;
}

/* Тонкая золотая полоса сверху каждой карточки -- маленький, но заметный
   акцент, не перекрашивающий всю тёмную заливку карточки (та идёт через
   !important общесайтовым правилом, трогать его рискованно), достаточный,
   чтобы вкладка сразу читалась как "другая". */
#bonusView .bonus-section-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bonus-gold), transparent);
}

#bonusView .ref-code-row,
#bonusView .ref-link-row {
    border-color: var(--bonus-gold-line);
    background: var(--bonus-gold-soft);
}

#bonusView .ref-level-badge {
    background: linear-gradient(135deg, var(--bonus-gold), #c9932a);
}

#bonusView .ref-progress-fill {
    background: linear-gradient(90deg, #c9932a, var(--bonus-gold));
    box-shadow: 0 0 10px var(--bonus-gold-glow);
}

#bonusView .ref-level-item.is-active {
    border-color: var(--bonus-gold);
    background: var(--bonus-gold-soft);
}

#bonusView .ref-level-item-pct {
    color: var(--bonus-gold);
}

#bonusView #refClaimBtn:not(.is-inactive),
#bonusView #partnerClaimBtn:not(.is-inactive) {
    background: linear-gradient(135deg, var(--bonus-gold), #c9932a) !important;
    box-shadow: 0 6px 22px var(--bonus-gold-glow) !important;
}

.bonus-layout {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px;
    align-items: start;
}

.bonus-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bonus-section-card {
    padding: 20px;
}

.ref-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 16px;
    margin-top: 10px;
}

.ref-code-val {
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--text);
    word-break: break-all;
}

.ref-code-copy-btn.is-copied {
    color: var(--success, #54c48b);
}

/* The actual shareable https://telegram.me/...?start=ref_CODE link, shown
   under the code itself with its own copy button -- previously only existed
   as uncopyable plain text (partner card) or not at all (plain referral
   card). Reuses .ref-code-row's box treatment but tighter (a full URL is
   long -- font-size/padding trimmed so it doesn't visually outweigh the
   short code above it). */
.ref-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 12px;
    margin-top: 8px;
}

.ref-link-val {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--muted);
    word-break: break-all;
}

.ref-link-copy-btn {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    padding: 6px 10px;
}

.ref-level-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.ref-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 99px;
    width: fit-content;
}

.ref-progress-wrap {
    margin-bottom: 16px;
}

.ref-progress-track {
    height: 6px;
    background: rgba(255, 255, 255, .08);
    border-radius: 99px;
    overflow: hidden;
}

.ref-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 99px;
    transition: width .4s ease;
}

.ref-levels-grid {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.ref-level-item {
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 4px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color .15s;
}

.ref-level-item.is-active {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 176, 53, 34), .12);
}

.ref-level-item.is-passed {
    opacity: .5;
}

.ref-level-item-icon {
    font-size: 18px;
    line-height: 1;
}

.ref-level-item-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

#refLevelIcon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

.ref-level-item-name {
    font-weight: 700;
    color: var(--text);
}

.ref-level-item-req {
    color: var(--muted);
}

.ref-level-item-pct {
    color: var(--accent-3, var(--accent));
    font-weight: 700;
}

.ref-level-item-bonus {
    color: var(--muted);
}

.ref-level-item-bonus.empty {
    color: var(--muted);
    opacity: .4;
}

.ref-growth-period-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 14px;
}

.ref-growth-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--muted);
}

.ref-growth-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ref-growth-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.ref-growth-chart {
    width: 100%;
    height: 140px;
    display: block;
}

.ref-growth-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
}

.ref-growth-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 140px;
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
    background: rgba(255, 255, 255, .03);
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 12px;
}

.ref-growth-empty-icon {
    font-size: 28px;
    opacity: .6;
}

/* Hover tooltip on the growth charts -- positioned via JS (left/right %,
   matching the hovered day's x-position), CSS only owns the box's own look.
   #partnerGrowthChartWrap/#refGrowthChartWrap need position:relative for
   this absolute box to anchor against the chart itself, not the page. */
#partnerGrowthChartWrap, #refGrowthChartWrap {
    position: relative;
}
.ref-growth-hover-line {
    pointer-events: none;
}
.ref-growth-tooltip {
    display: none;
    position: absolute;
    top: 8px;
    min-width: 168px;
    background: rgba(20, 22, 32, .96);
    border: 1px solid var(--line);
    border-radius: 10px !important;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    pointer-events: none;
    z-index: 5;
    transform: translateX(-50%);
}
.ref-growth-tooltip-date {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.ref-growth-tooltip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.ref-growth-tooltip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ref-growth-tooltip-label {
    color: var(--muted);
    flex: 1;
}
.ref-growth-tooltip-value {
    color: var(--text);
    font-weight: 700;
    font-family: 'DM Mono', monospace;
}

.ref-growth-stat-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.ref-growth-stat-grid strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin-top: 2px;
}

.ref-growth-headline {
    text-align: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}

.ref-growth-headline b {
    font-size: 22px;
    font-weight: 800;
    color: #6ddc9e;
    margin: 0 4px;
}

.ref-apply-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ref-apply-result.is-shake {
    animation: shake .3s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-6px);
    }
    75% {
        transform: translateX(6px);
    }
}

.ref-apply-success, .ref-apply-error, .promo-success, .promo-error {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
}

.ref-apply-success, .promo-success {
    background: rgba(84, 196, 139, .12);
    border: 1px solid rgba(84, 196, 139, .3);
    color: #54c48b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ref-apply-error, .promo-error {
    background: rgba(56, 104, 192, .1);
    border: 1px solid rgba(56, 104, 192, .25);
    color: #58a6ff;
}

.bonus-promo-card {
    min-height: 240px;
}

@media (max-width: 700px) {
    .bonus-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ref-levels-grid {
        grid-template-columns:repeat(5, 1fr);
    }

    /* .case-showcase-meta's 3-4 flex:1 stat boxes (Ставка/Рефералов/Заработано
       всего/Выплачено всего on the ref/partner cards here) have no min-width:0,
       so multi-word Russian labels like "Заработано" refused to shrink below
       their own min-content width — the row (and the whole card + grid column
       above it, since a plain 1fr track's auto-minimum is its content's
       min-content) blew out past the viewport instead of wrapping. Wrapping
       onto 2 rows of 2 fixes it at the source instead of just clamping the
       symptom with overflow-x. */
    #bonusView .case-showcase-meta {
        flex-wrap: wrap;
    }

    #bonusView .case-showcase-meta div {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
}

.ops-support-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
    font-size: 13px;
}

.ops-support-stat {
    color: var(--muted);
}

.ops-support-stat strong {
    color: var(--text);
    font-size: 16px;
    margin-right: 2px;
}

.ops-support-stat.is-unread strong {
    color: var(--accent);
}

.ops-support-stat.is-open strong {
    color: #22c55e;
}

.ops-support-stat.is-closed strong {
    color: var(--muted);
}

.ops-support-filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ops-support-filter-btn {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ops-support-filter-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.ops-support-filter-btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.ops-support-panes {
    display: grid;
    grid-template-columns:280px 1fr;
    gap: 12px;
    height: 520px;
    overflow: hidden;
}

.ops-support-chatlist-pane {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ops-support-chat-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ops-support-chat-row:last-child {
    border-bottom: none;
}

.ops-support-chat-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ops-support-chat-row.is-active {
    background: rgba(141, 91, 255, 0.15);
    border-left: 3px solid var(--accent);
}

.ops-support-chat-row.has-attention {
    background: rgba(141, 91, 255, 0.08);
}

.ops-support-chat-row.is-closed {
    opacity: 0.55;
}

.ops-support-chat-row.is-closed.has-attention {
    opacity: 1;
    background: rgba(56, 104, 192, 0.1);
    border-left: 3px solid #3868c0;
}

.ops-support-chat-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.ops-support-chat-row-preview {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-support-chat-row-time {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.ops-support-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
}

.ops-support-badge.is-unread {
    background: var(--accent);
    color: #fff;
}

.ops-support-badge.is-closed {
    background: var(--line);
    color: var(--muted);
}

.ops-support-badge.is-reopened {
    background: #3868c0;
    color: #fff;
    animation: support-pulse 1.5s ease-in-out infinite;
}

@keyframes support-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.ops-support-chat-pane {
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ops-support-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 14px;
}

.ops-support-chat-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ops-support-chat-detail.hidden {
    display: none;
}

.ops-support-chat-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.ops-support-chat-head-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.ops-support-chat-head-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.ops-support-head-uid {
    color: var(--muted);
}

.ops-support-head-status {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
}

.ops-support-head-status.is-open {
    background: rgba(34, 197, 94, 0.18);
    color: #22c55e;
}

.ops-support-head-status.is-closed {
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
}

.ops-support-head-status.is-reopened {
    background: rgba(56, 104, 192, 0.18);
    color: #58a6ff;
}

.ops-support-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-support-msg-bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.ops-support-msg-bubble.is-user {
    background: var(--panel-2);
    border: 1px solid var(--line);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.ops-support-msg-bubble.is-staff {
    background: rgba(141, 91, 255, 0.18);
    border: 1px solid rgba(141, 91, 255, 0.3);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.ops-support-bubble-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
}

.ops-support-bubble-meta strong {
    color: var(--text);
}

.ops-support-bubble-text {
    color: var(--text);
    word-break: break-word;
}

.ops-support-chat-reply-box {
    padding: 10px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}

.ops-support-reply-textarea {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    padding: 8px 10px;
    font-size: 13px;
    resize: vertical;
    min-height: 56px;
    margin-bottom: 8px;
    box-sizing: border-box;
    font-family: inherit;
}

.ops-support-reply-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.ops-support-reply-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ops-support-empty {
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 800px) {
    .ops-support-panes {
        grid-template-columns:1fr;
        height: auto;
    }

    .ops-support-chatlist-pane {
        max-height: 240px;
    }

    .ops-support-chat-pane {
        min-height: 400px;
    }
}

.ops-support-list {
    display: none;
}

.ops-support-reply-row {
    display: none;
}

.dashboard-grid {
    display: grid;
    gap: 20px;
}

.dash-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .26);
    position: relative;
    overflow: hidden;
}

.dash-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    pointer-events: none;
}

.dash-section-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 16px;
    color: #efe7ff;
}

.dash-cards {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.dash-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
    transition: .18s ease;
}

.dash-card:hover {
    background: rgba(255, 255, 255, .07);
    transform: translateY(-1px);
}

.dash-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(228, 220, 255, .5);
}

.dash-value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.dash-value.green {
    color: #4ade80;
}

.dash-value.gold {
    color: #facc15;
}

.dash-value.blue {
    color: #60a5fa;
}

.dash-value.pink {
    color: #f472b6;
}

.dash-value.purple {
    color: #a78bfa;
}

.dash-value.red {
    color: #f87171;
}

.dash-value.cyan {
    color: #22d3ee;
}

.dash-top-items {
    display: grid;
    gap: 8px;
}

.dash-top-item {
    display: grid;
    grid-template-columns:28px 32px 1fr 60px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: .18s ease;
}

.dash-top-item:hover {
    background: rgba(255, 255, 255, .06);
}

.dash-top-rank {
    font-size: 13px;
    font-weight: 700;
    color: rgba(228, 220, 255, .4);
    text-align: center;
}

.dash-top-emoji {
    font-size: 20px;
    text-align: center;
}

.dash-top-name {
    font-size: 13px;
    font-weight: 600;
    color: #efe7ff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-top-count {
    font-size: 13px;
    font-weight: 700;
    color: #a78bfa;
    text-align: right;
}

.dash-system-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.dash-system-item {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 2px;
}

.dash-system-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(228, 220, 255, .4);
}

.dash-system-value {
    font-size: 13px;
    font-weight: 600;
    color: #cdbdf6;
    word-break: break-all;
}

@media (max-width: 600px) {
    .dash-cards {
        grid-template-columns:repeat(2, 1fr);
    }

    .dash-section {
        padding: 16px;
    }

    .dash-top-item {
        grid-template-columns:24px 28px 1fr 50px;
        padding: 8px 12px;
    }
}

* {
    border-radius: 0 !important;
}

html, body {
    font-family: 'Syne', 'Segoe UI', system-ui, sans-serif !important;
}

button, input, select, textarea {
    font-family: inherit !important;
}

a {
    text-decoration: none;
    color: inherit;
}

#profileAvatarLarge, #userAvatar {
    border-radius: 50% !important;
}

.online-dot, .live-dot, .badge-dot {
    border-radius: 50% !important;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(56, 104, 192, .22);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 104, 192, .42);
}

html, body, body.theme-dark-blue, body.theme-carnage {
    background: linear-gradient(180deg, #0c1220 0%, #050810 70%) !important;
    color: #FFFFFF !important;
}

.sidebar-live {
    background: linear-gradient(180deg, rgba(5, 7, 13, .98), rgba(2, 3, 6, .95)) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    backdrop-filter: none !important;
}

.sidebar-title, .panel-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    color: #5A7086 !important;
}

.live-card {
    background: rgba(6, 9, 16, .7) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.live-card:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    box-shadow: 0 4px 20px rgba(56, 104, 192, .1) !important;
    transform: translateX(2px) !important;
}

.live-item {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

.live-user {
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 11px !important;
}

.topbar {
    background: rgba(3, 4, 7, .97) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .6) !important;
}

.brand-btn {
    background: rgba(56, 104, 192, .08) !important;
    border-color: rgba(56, 104, 192, .24) !important;
    color: #58A6FF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    transition: all .2s ease !important;
}

.brand-logo-icon {
    width: 1.6em;
    height: 1.6em;
    object-fit: contain;
    vertical-align: middle;
    position: relative;
    top: -.19em;
    margin: 0 .12em;
    display: inline-block;
}

.brand-btn:hover {
    background: rgba(56, 104, 192, .14) !important;
    border-color: rgba(56, 104, 192, .45) !important;
    box-shadow: 0 0 22px rgba(56, 104, 192, .18) !important;
}

.nav-btn {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    transition: background .18s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.nav-btn::after {
    display: none !important;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, .13) !important;
}

.nav-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(56, 104, 192, .30) !important;
}

.ghost-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    color: var(--text) !important;
    transition: background .15s ease, border-color .15s ease !important;
}

.ghost-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .28) !important;
}

.ghost-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.case-edit-color-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.case-edit-color-picker {
    width: 44px;
    height: 44px;
    padding: 2px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    flex-shrink: 0;
}

.case-edit-status {
    font-size: 13px;
    text-align: center;
    min-height: 18px;
    transition: color .2s;
}

.case-edit-status.is-ok {
    color: #4ade80 !important;
}

.case-edit-status.is-err {
    color: #58A6FF !important;
}

#caseEditBtn {
    align-self: flex-start;
    padding: 8px 16px !important;
    font-size: 13px !important;
}

#caseEditorView {
    padding: 0 0 48px;
}

.ced-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ced-topbar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ced-topbar-emoji {
    font-size: 36px;
    line-height: 1;
}

.ced-stat-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(107, 70, 193, .18);
    padding: 2px 8px;
    display: inline-block;
}
.ced-stat-tag[hidden] { display: none; }

.ced-topbar-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 2px;
}

.ced-layout {
    display: grid;
    grid-template-columns:340px 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .ced-layout {
        grid-template-columns:1fr;
    }
}

.ced-meta-card, .ced-loot-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ced-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}

.ced-meta-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px;
}

@media (max-width: 500px) {
    .ced-meta-grid {
        grid-template-columns:1fr;
    }
}

.ced-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ced-field-full {
    grid-column: 1/-1;
}

.ced-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.ced-meta-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.ced-loot-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

.ced-loot-summary {
    font-size: 12px;
}

.ced-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ced-weight-mini {
    width: 80px !important;
    flex-shrink: 0;
}

.ced-preset-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ced-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ced-preset-label {
    font-size: 12px;
    margin-right: 2px;
}

.ced-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ced-search-row input {
    flex: 1;
}

.ced-loot-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

.ced-loot-row {
    display: grid;
    grid-template-columns:32px 1fr 90px 110px 36px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .05);
    transition: background .15s;
}

.ced-loot-row:hover {
    background: rgba(255, 255, 255, .055);
}

.ced-loot-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ced-loot-item-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0;
}

.ced-loot-item-emoji {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.ced-loot-item-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ced-loot-item-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ced-loot-item-sub {
    font-size: 11px;
}

.ced-loot-weight-wrap {
    display: flex;
    align-items: center;
}

.ced-loot-weight-input {
    width: 100% !important;
    text-align: center;
    padding: 6px 4px !important;
}

.ced-pct-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ced-pct-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-align: right;
}

.ced-pct-bar {
    height: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.ced-pct-fill {
    height: 100%;
    background: var(--accent);
    transition: width .2s;
}

.rarity-badge {
    display: none;
}

.ld-config-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 20px;
}

@media (max-width: 720px) {
    .ld-config-grid {
        grid-template-columns:1fr;
    }
}

.ld-config-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ld-interval-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ld-slider {
    flex: 1;
    accent-color: var(--accent);
    height: 4px;
    cursor: pointer;
}

.ld-interval-num {
    width: 90px !important;
    flex-shrink: 0;
}

.ld-interval-unit {
    font-size: 12px;
    flex-shrink: 0;
}

.ld-case-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.ld-case-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: background .12s;
}

.ld-case-row:hover {
    background: rgba(255, 255, 255, .055);
}

.ld-case-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.ld-case-emoji {
    font-size: 18px;
    flex-shrink: 0;
}

.ld-case-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-case-price {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

.ld-save-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

@keyframes bcmOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bcmCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#battleCreateOpenBtn {
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    white-space: nowrap;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

#battleCreateOpenBtn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .4s ease;
}

#battleCreateOpenBtn:hover::before {
    transform: translateX(100%);
}

.primary-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    color: #fff !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .36) !important;
    transition: all .2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.primary-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent 50%) !important;
    opacity: 0 !important;
    transition: opacity .2s ease !important;
}

.primary-btn:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(88, 166, 255, .48) !important;
}

.primary-btn:hover::before {
    opacity: 1 !important;
}

.primary-btn:active {
    transform: translateY(0) scale(.97) !important;
    box-shadow: 0 4px 14px rgba(56, 104, 192, .32) !important;
}

#openSelectedCaseBtn, #createBattleBtn, #startFuseBtn, #openLadderModeBtn, .deposit-terminal-pay-btn, .ops-stretch-btn, .ops-save-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .36) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

#openSelectedCaseBtn:hover, #createBattleBtn:hover, #startFuseBtn:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px) !important;
}

.user-box {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    transition: all .2s ease !important;
}

.user-box:hover {
    border-color: rgba(56, 104, 192, .32) !important;
    background: rgba(56, 104, 192, .06) !important;
}

.balance-chip {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

.hero-banner {
    background: rgba(4, 6, 12, .88) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .5) !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero-banner::before {
    content: 'WIN' !important;
    position: absolute !important;
    right: -8px !important;
    bottom: -30px !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 200px !important;
    font-weight: 800 !important;
    color: rgba(30, 64, 130, .05) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 0 !important;
    letter-spacing: -.02em !important;
}

.hero-banner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #3868C0 40%, transparent) !important;
    pointer-events: none !important;
}

.hero-copy, .promo-card {
    position: relative !important;
    z-index: 1 !important;
}

.hero-badge {
    background: linear-gradient(135deg, rgba(56, 104, 192, .9), rgba(30, 64, 130, .8)) !important;
    color: #fff !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.hero-copy h1 {
    font-family: 'Syne', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    line-height: 1.1 !important;
    color: #FFFFFF !important;
    max-width: none !important;
}

.promo-stat {
    background: rgba(4, 6, 12, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    transition: all .2s ease !important;
}

.promo-stat:hover {
    border-color: rgba(56, 104, 192, .32) !important;
    box-shadow: 0 0 20px rgba(56, 104, 192, .1) !important;
}

.promo-stat span {
    font-family: 'Syne', sans-serif !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-size: 9px !important;
    color: #5A7086 !important;
}

.promo-stat strong {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    color: #58A6FF !important;
}

.hero-banner, .profile-card, .case-card, .inventory-card, .item-hero, .item-related-panel, .profile-hero, .case-showcase, .case-info-panel, .fuse-panel, .inventory-panel {
    background: rgba(4, 6, 12, .88) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important;
}

.case-card {
    position: relative !important;
    overflow: hidden !important;
    transition: all .25s ease !important;
}

.case-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #3868C0, transparent) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform .3s ease !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.case-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(56, 104, 192, .38) !important;
    box-shadow: 0 0 36px rgba(56, 104, 192, .14), 0 8px 28px rgba(0, 0, 0, .6) !important;
}

.case-card:hover::after {
    transform: scaleX(1) !important;
}

.case-card:active {
    transform: translateY(-1px) scale(.98) !important;
}

.case-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
}

.case-subtitle {
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 12px !important;
}

/* Семейство даёт рантайм шрифта цифр (как у статистики в профиле), см.
   правило .item-value ниже. Полужирный: обычное начертание этого шрифта
   рядом с жирным таймером и статистикой выглядело бледным. */
.case-price {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #FFFFFF !important;
    letter-spacing: .01em !important;
}

.case-price-quest {
    color: #e8c840 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.case-price-quest img.solar-icon {
    width: 1em !important;
    height: 1em !important;
}

.case-card.case-card-quest {
    border-color: rgba(232, 200, 64, .28) !important;
}

.case-ribbon {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #58A6FF !important;
}

.case-visual {
    background: rgba(3, 5, 9, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.section-head h2 {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #FFFFFF !important;
}

.section-head span, .eyebrow {
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

input, select, textarea, .search-wrap input, .ops-input, .ops-select, .auth-input, .ops-weight-input, .ops-image-input, .ops-icon-size-input, .ops-case-description-input, .deposit-terminal-input {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: #FFFFFF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 500 !important;
    transition: all .2s ease !important;
}

input:focus, select:focus, textarea:focus, .ops-input:focus, .auth-input:focus {
    border-color: rgba(56, 104, 192, .5) !important;
    box-shadow: 0 0 18px rgba(56, 104, 192, .12), 0 0 0 3px rgba(56, 104, 192, .08) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

input::placeholder, textarea::placeholder, .ops-input::placeholder, .auth-input::placeholder {
    color: #5A7086 !important;
    opacity: 1 !important;
}

.loot-card, .inventory-card, .target-card, .related-card {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    transition: all .18s ease !important;
}

.loot-card:hover, .inventory-card:hover, .target-card:hover, .related-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(56, 104, 192, .3) !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .1) !important;
}

.target-card.active {
    outline: 2px solid rgba(56, 104, 192, .4) !important;
    background: rgba(56, 104, 192, .1) !important;
}

.loot-name, .item-name, .target-name, .roulette-name {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

/* Цены брейнротов и кейсов набраны шрифтом цифр сайта — тем же, что
   статистика аккаунта в профиле (правка 06.10: широкий Syne и DM Mono на ценах
   выбивались). Своего семейства здесь нет нарочно: его даёт рантайм шрифта
   (body * { '__gd', <шрифт цифр> }), и цены меняются вместе со статистикой. */
.loot-value, .item-value, .target-value, .roulette-value {
    color: #5A7086 !important;
}

.loot-chip {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    transition: all .18s ease !important;
}

.loot-chip:hover {
    border-color: rgba(56, 104, 192, .28) !important;
    transform: translateX(2px) !important;
}

.modal {
    background: rgba(2, 2, 4, .88) !important;
}

.modal-card {
    background: linear-gradient(180deg, #080b15, #030509) !important;
    border-color: rgba(56, 104, 192, .14) !important;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .6) !important;
}

.icon-close {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    transition: all .18s ease !important;
}

.icon-close:hover {
    background: rgba(56, 104, 192, .16) !important;
    border-color: rgba(56, 104, 192, .3) !important;
}

.roulette-window {
    background: rgba(4, 6, 12, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.roulette-pointer {
    background: linear-gradient(180deg, #58A6FF, #fff, #3868C0) !important;
    box-shadow: 0 0 22px rgba(88, 166, 255, .55) !important;
    animation: pointerPulse 1.5s ease-in-out infinite !important;
}

.roulette-item {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.roulette-item.near-top-focus {
    box-shadow: 0 0 0 1px rgba(56, 104, 192, .3), 0 0 28px rgba(56, 104, 192, .2) !important;
    transform: translateY(-1px) !important;
}

.roulette-browser-edge {
    background: linear-gradient(90deg, transparent, rgba(2, 2, 4, .5), rgba(2, 2, 4, .96)) !important;
}

.roulette-near-top-flash {
    background: radial-gradient(circle at 50% 50%, rgba(56, 104, 192, .22), transparent 32%),
    radial-gradient(circle at 50% 18%, rgba(88, 166, 255, .18), transparent 28%) !important;
}

.speed-toggle {
    background: rgba(5, 7, 13, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.speed-toggle-pill {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 16px rgba(56, 104, 192, .3) !important;
}

.speed-toggle-btn {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    color: #5A7086 !important;
    transition: color .18s ease !important;
}

.speed-toggle-btn.active {
    color: #fff !important;
}

.wheel-sell-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 18px rgba(56, 104, 192, .3) !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

.wheel-sell-btn:hover {
    box-shadow: 0 10px 26px rgba(88, 166, 255, .42) !important;
    transform: translateY(-1px) scale(1.04) !important;
}

.ops-item-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    min-width: 200px;
    flex: 1;
    transition: border-color .2s, background .2s;
}

.ops-item-picker-trigger:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .24);
}

.ops-item-picker-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.br-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .22s ease;
}

.br-picker-overlay.br-picker-visible {
    opacity: 1;
}

.br-picker-overlay.br-picker-visible .br-picker-modal {
    transform: translateY(0) scale(1);
}

.br-picker-modal {
    background: linear-gradient(160deg, #16090a 0%, #0e0508 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    width: min(860px, 95vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(88, 166, 255, .08);
    transform: translateY(24px) scale(.97);
    transition: transform .22s cubic-bezier(.34, 1.46, .64, 1);
    overflow: hidden;
}

.br-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.br-picker-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.br-picker-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.br-picker-close:hover {
    background: rgba(88, 166, 255, .18);
    color: #fff;
    border-color: rgba(88, 166, 255, .4);
}

.br-picker-search-row {
    padding: 12px 22px 8px;
}

/* ── Расширенный режим выбора (набивка кейсов) ──────────────────────────────
   Своей темы у блока нет намеренно: кнопки режима — те же .settings-lang-btn,
   что в настройках, поля диапазона — как поиск рядом. Новый вид здесь только
   мешал бы: окно и так плотное. */
.br-picker-modes {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px 0;
}

.br-picker-found {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted, rgba(255, 255, 255, .5));
}

.br-picker-range {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px 0;
    font-size: 12px;
    color: var(--muted, rgba(255, 255, 255, .55));
}

/* Поля узкие: в них вводят три-четыре цифры, а не текст. Ширину задаём явно —
   у глобального правила на input свои отступы и шрифт (styles.css форсирует их
   на каждый input), и без этого поля растянулись бы на всю строку. */
.br-picker-range input {
    width: 92px;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 7px 10px !important;
    color: var(--text) !important;
    font-size: 13px !important;
}

.br-picker-range.hidden { display: none; }

/* Счётчик: сколько раз пара уже лежит в кейсах. Ноль приглушён — взгляд должен
   цепляться за то, что УЖЕ использовано, а не за то, что свободно. */
.br-picker-used {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(232, 200, 64, .92);
    color: #1a1a1a;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.br-picker-used.is-zero {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .45);
}

.br-picker-card-used { outline: 1px solid rgba(232, 200, 64, .35); }

.br-picker-search {
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .2s, background .2s;
    box-sizing: border-box;
}

.br-picker-search:focus {
    border-color: rgba(88, 166, 255, .5);
    background: rgba(255, 255, 255, .07);
}

.br-picker-search::placeholder {
    color: rgba(255, 255, 255, .3);
}

.br-picker-filters {
    display: flex;
    gap: 6px;
    padding: 0 22px 10px;
    flex-wrap: wrap;
}

.br-picker-filter {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all .15s;
    white-space: nowrap;
}

.br-picker-filter small {
    opacity: .65;
    margin-left: 3px;
}

.br-picker-filter:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.br-picker-filter.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 0 10px rgba(255, 255, 255, .06);
}

.br-picker-filter[data-rarity]:not([data-rarity=""]).active {
    background: color-mix(in srgb, var(--rc) 18%, transparent);
    border-color: color-mix(in srgb, var(--rc) 55%, transparent);
    color: var(--rc);
    box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 22%, transparent);
}

.br-picker-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 4px 22px 22px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.br-picker-grid::-webkit-scrollbar {
    width: 5px;
}

.br-picker-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 3px;
}

.br-picker-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 10px 8px 10px;
    cursor: pointer;
    text-align: center;
    transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Якорь для счётчика использований в расширенном режиме (.br-picker-used):
       без него плашка ушла бы к ближайшему позиционированному предку — к самому
       окну — и все счётчики слиплись бы в одном углу. */
    position: relative;
}

.br-picker-card:hover {
    transform: translateY(-3px) scale(1.03);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.br-picker-card.br-picker-card-selected {
    transform: scale(1.07);
    border-color: rgba(255, 255, 255, .5) !important;
    box-shadow: 0 0 24px rgba(255, 255, 255, .2) !important;
}

.br-picker-card-img {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.br-picker-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.br-picker-fallback {
    font-size: 32px;
    line-height: 1;
}

.br-picker-card-name {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.br-picker-card-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.br-picker-rarity-badge {
    display: none;
}

.br-picker-value {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
}

.br-picker-value small {
    font-size: 9px;
}

.br-picker-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, .3);
    font-size: 14px;
}

.ops-surface {
    background: rgba(4, 6, 12, .75) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .3) !important;
}

.ops-surface::before {
    background: linear-gradient(90deg, transparent, rgba(56, 104, 192, .12), transparent) !important;
}

.ops-card {
    background: rgba(4, 6, 12, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.ops-input, .ops-select, .ops-case-description-input, .ops-price-input, .ops-weight-input, .ops-item-image-input, .ops-ladder-row input {
    background: rgba(6, 9, 16, .8) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    color: #fff !important;
    font-family: 'Syne', sans-serif !important;
}

.ops-input:focus, .ops-select:focus {
    border-color: rgba(56, 104, 192, .5) !important;
    box-shadow: 0 0 0 3px rgba(56, 104, 192, .1) !important;
}

.ops-label {
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
}

.ops-promo-row, .ops-weight-row, .ops-item-row, .result-line-wrap {
    background: rgba(6, 9, 16, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.ops-inline-chip {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #58A6FF !important;
}

.ops-ladder-mode-btn {
    background: rgba(6, 9, 16, .8) !important;
    border-color: rgba(255, 255, 255, .1) !important;
    color: #FFFFFF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
}

.ops-ladder-mode-btn:hover {
    border-color: rgba(56, 104, 192, .3) !important;
}

.ops-ladder-mode-btn.is-active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(56, 104, 192, .28) !important;
}

.ops-ladder-cell.ops-ladder-step-no {
    background: rgba(6, 9, 16, .8) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}

.ops-list-soft {
    background: rgba(4, 6, 12, .5) !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

.ops-weights-panel, .ops-appearance-panel, .ops-presets-panel {
    background: rgba(4, 6, 12, .5) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.ops-case-row-extended {
    background: rgba(6, 9, 16, .85) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

.deposit-fullscreen-shell {
    background: linear-gradient(180deg, #080b15, #030509) !important;
}

.deposit-menu-tab {
    background: rgba(6, 9, 16, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    transition: all .2s ease !important;
}

.deposit-menu-tab:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #FFFFFF !important;
}

.deposit-menu-tab.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(30, 64, 130, .12)) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58A6FF !important;
}

.payment-method-btn {
    background: rgba(6, 9, 16, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    transition: all .16s ease !important;
}

.payment-method-btn:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(56, 104, 192, .3) !important;
    background: rgba(56, 104, 192, .06) !important;
}

.payment-method-icon {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
}

.payment-method-action {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #58A6FF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

.payment-currency-btn {
    background: rgba(6, 9, 16, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
}

.payment-currency-btn.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(30, 64, 130, .12)) !important;
    border-color: rgba(56, 104, 192, .35) !important;
    color: #58A6FF !important;
}

.deposit-terminal-pay-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .36) !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
}

.deposit-terminal-input {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

.payment-rates-card {
    background: rgba(6, 9, 16, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.support-inapp-shell {
    background: linear-gradient(180deg, #080b15, #030509) !important;
}

.support-floating-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 8px 24px rgba(56, 104, 192, .4) !important;
    transition: all .2s ease !important;
}

.support-floating-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 32px rgba(88, 166, 255, .52) !important;
}

.support-message-bot {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
}

.support-message-user {
    background: rgba(56, 104, 192, .18) !important;
    border-color: rgba(56, 104, 192, .28) !important;
}

.auth-card {
    background: linear-gradient(180deg, rgba(7, 10, 17, .99), rgba(3, 5, 9, .98)) !important;
    border-color: rgba(255, 255, 255, .09) !important;
}

.auth-badge {
    background: rgba(56, 104, 192, .16) !important;
    color: #58A6FF !important;
}

.auth-card h2 {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.profile-tabs {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}

.profile-tab {
    background: rgba(6, 9, 16, .6) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    transition: all .18s ease !important;
}

.profile-tab:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #fff !important;
}

.profile-tab.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(30, 64, 130, .12)) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58A6FF !important;
}

.ops-tab {
    background: rgba(6, 9, 16, .6) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    transition: all .18s ease !important;
}

.ops-tab:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #fff !important;
}

.ops-tab.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(30, 64, 130, .12)) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58A6FF !important;
}

/* Компактные вкладки ВНУТРИ секции (напр. День/Неделя/Месяц у рейтинга
   депозитов) -- та же палитра/шрифт что .ops-tab, просто мельче и без
   верхнего уровня навигации. */
.ops-tabs-sub { display: flex; gap: 6px; margin-bottom: 10px; }
.ops-tab-sub {
    background: rgba(6, 9, 16, .6); border: 1px solid rgba(255, 255, 255, .07);
    color: #5A7086; font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    padding: 7px 16px; border-radius: 8px; cursor: pointer;
    transition: all .16s ease;
}
.ops-tab-sub:hover { border-color: rgba(56, 104, 192, .3); color: #fff; }
.ops-tab-sub.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(30, 64, 130, .12));
    border-color: rgba(56, 104, 192, .4); color: #58A6FF;
}

/* Сетка призовых мест (депозит-рейтинг): до 10 строк, каждая -- ранг +
   переключатель типа + значение + очистка. Плотная админ-таблица, не
   витрина -- цвета/шрифты как у остального OPS, без нового языка. */
.dc-rank-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.dc-rank-row { display: flex; align-items: center; gap: 8px; }
.dc-rank-num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
    font-family: 'Bebas Neue', cursive, sans-serif; font-size: 13px; color: #5A7086;
}
.dc-rank-row[data-rank="1"] .dc-rank-num { background: linear-gradient(135deg, #ffe08a, #e8c840); border-color: transparent; color: #1a1204; }
.dc-rank-row[data-rank="2"] .dc-rank-num { background: linear-gradient(135deg, #e4e9f0, #b9c2cf); border-color: transparent; color: #1a1f26; }
.dc-rank-row[data-rank="3"] .dc-rank-num { background: linear-gradient(135deg, #d99a5b, #a9662e); border-color: transparent; color: #241205; }
.dc-rank-type {
    flex-shrink: 0; width: 92px; background: rgba(6, 9, 16, .6) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important; color: var(--text) !important;
    font-size: 12px !important; padding: 7px 8px !important; border-radius: 8px !important;
}
/* Порог депозита вместо кружка с номером места (розыгрыши по порогу). */
.dc-tier-min { flex-shrink: 0; width: 92px; margin: 0 !important; }
.dc-rank-value { flex: 1; min-width: 0; }
.dc-rank-value input.ops-input { margin: 0; }
.dc-rank-value .ops-item-picker-trigger { min-width: 0; padding: 7px 12px; }
.dc-rank-clear {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
    color: #5A7086; cursor: pointer; font-size: 15px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all .16s ease;
}
.dc-rank-clear:hover { border-color: rgba(224, 74, 74, .4); color: #ff8a8a; }
.dc-rank-row.is-empty .dc-rank-clear { visibility: hidden; }

.profile-balance-box strong {
    font-size: 34px !important;
    color: #58A6FF !important;
}

.profile-balance-box span {
    font-family: 'Syne', sans-serif !important;
}

.profile-username {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

.user-name {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

.user-label {
    font-family: 'Syne', sans-serif !important;
}

.toast {
    background: #06080f !important;
    border-color: rgba(56, 104, 192, .22) !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5) !important;
}

.theme-toggle-single {
    background: transparent !important;
    border-color: transparent !important;
}

.theme-toggle-single:hover {
    border-color: rgba(56, 104, 192, .3) !important;
}

.case-section-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #fff !important;
}

.case-section-title::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(56, 104, 192, .65), rgba(255, 255, 255, 0)) !important;
}

.case-group-head h3 {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.case-group.pick-one-group .case-card {
    background: linear-gradient(180deg, rgba(56, 104, 192, .3), rgba(20, 30, 55, .92)) !important;
    border-color: rgba(88, 166, 255, .34) !important;
}

.pick-one-card {
    background: linear-gradient(180deg, rgba(59, 130, 246, .3), rgba(15, 23, 42, .9)) !important;
    border-color: rgba(88, 166, 255, .3) !important;
}

.pick-card.revealed {
    background: linear-gradient(180deg, rgba(30, 64, 130, .96), rgba(10, 16, 30, .98)) !important;
    border-color: rgba(88, 166, 255, .28) !important;
}

.hidden-drop, .hidden-pick-card {
    background: linear-gradient(180deg, rgba(56, 104, 192, .18), rgba(255, 255, 255, .04)) !important;
    border-color: rgba(56, 104, 192, .2) !important;
}

body.modal-fullscreen-open .modal {
    background: rgba(2, 2, 4, .96) !important;
}

body.modal-fullscreen-open #rouletteModal .modal-card {
    background: linear-gradient(180deg, #0c1220, #030509) !important;
}

body.modal-fullscreen-open #rouletteModal .modal-top {
    background: linear-gradient(180deg, #0c1220 70%, rgba(7, 10, 17, .6)) !important;
}

.dash-card {
    background: rgba(4, 6, 12, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.dash-stat-value {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    color: #58A6FF !important;
}

.dash-stat-label, .dash-section-title, .dash-system-label {
    font-family: 'Syne', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #5A7086 !important;
}

.dash-system-value {
    color: #FFFFFF !important;
    font-family: 'Syne', sans-serif !important;
}

.dash-section {
    background: rgba(4, 6, 12, .6) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.dash-top-item {
    border-color: rgba(255, 255, 255, .07) !important;
    transition: all .18s ease !important;
}

.dash-top-item:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    background: rgba(56, 104, 192, .05) !important;
}

.combined-history-row {
    border-color: rgba(255, 255, 255, .06) !important;
    transition: background .15s ease !important;
}

.combined-history-row:hover {
    background: rgba(56, 104, 192, .04) !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes legendPulse {
    0%, 100% {
        border-color: rgba(88, 166, 255, .5);
        box-shadow: 0 0 0 1px rgba(88, 166, 255, .1), 0 0 30px rgba(88, 166, 255, .16);
    }
    50% {
        border-color: rgba(88, 166, 255, .7);
        box-shadow: 0 0 0 1px rgba(88, 166, 255, .14), 0 0 44px rgba(88, 166, 255, .26);
    }
}

@keyframes pointerPulse {
    0%, 100% {
        box-shadow: 0 0 18px rgba(88, 166, 255, .4);
    }
    50% {
        box-shadow: 0 0 32px rgba(88, 166, 255, .65);
    }
}

@keyframes carnageGrain {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-2%, -2%);
    }
    50% {
        transform: translate(2%, 2%);
    }
    75% {
        transform: translate(-1%, 1%);
    }
    100% {
        transform: translate(1%, -1%);
    }
}

.hero-banner {
    animation: fadeInUp .5s ease both;
}

.topbar {
    animation: fadeInUp .3s ease both;
}

.sidebar-live {
    animation: fadeInLeft .4s ease both;
}

.speed-btn {
    background: rgba(6, 9, 16, .6) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    color: #5A7086 !important;
}

.speed-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(56, 104, 192, .28) !important;
}

.lobby-promo-card {
    background: rgba(4, 6, 12, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

.lobby-promo-card .promo-stat {
    border-color: rgba(56, 104, 192, .14) !important;
}

.pick-card.revealed {
    box-shadow: 0 8px 22px rgba(56, 104, 192, .12) !important;
}

.pick-card.dimmed {
    opacity: .3 !important;
    filter: grayscale(1) brightness(.5) !important;
}

.compact.selected {
    outline: 2px solid rgba(56, 104, 192, .5) !important;
}

body.theme-light-red html, body.theme-light-red {
    background: linear-gradient(180deg, #FFF5F5 0%, #FFFFFF 60%) !important;
    color: #04060b !important;
}

body.theme-light-red .sidebar-live {
    background: linear-gradient(180deg, #F8F2F2, #F5EFEF) !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .topbar {
    background: rgba(255, 255, 255, .97) !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important;
}

body.theme-light-red .brand-btn {
    background: rgba(56, 104, 192, .06) !important;
    border-color: rgba(56, 104, 192, .18) !important;
    color: #58A6FF !important;
}

body.theme-light-red .brand-btn:hover {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .36) !important;
}

body.theme-light-red .nav-btn {
    background: transparent !important;
    border: none !important;
    color: #04060b !important;
}

body.theme-light-red .nav-btn:hover {
    background: rgba(0, 0, 0, .10) !important;
}

body.theme-light-red .nav-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border: none !important;
    color: #fff !important;
}

body.theme-light-red .ghost-btn {
    background: transparent !important;
    border: 1px solid rgba(4, 6, 12, .18) !important;
    color: #04060b !important;
}

body.theme-light-red .ghost-btn:hover {
    background: rgba(0, 0, 0, .06) !important;
    border-color: rgba(4, 6, 12, .32) !important;
}

body.theme-light-red .ghost-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.theme-light-red .live-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important;
}

body.theme-light-red .live-card:hover {
    border-color: rgba(56, 104, 192, .28) !important;
    box-shadow: 0 4px 18px rgba(56, 104, 192, .1) !important;
}

body.theme-light-red .live-item {
    color: #04060b !important;
}

body.theme-light-red .live-user {
    color: #607086 !important;
}

body.theme-light-red .case-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06) !important;
}

body.theme-light-red .case-card:hover {
    border-color: rgba(56, 104, 192, .32) !important;
    box-shadow: 0 0 28px rgba(56, 104, 192, .12), 0 8px 24px rgba(0, 0, 0, .1) !important;
}

body.theme-light-red .case-title {
    color: #04060b !important;
}

body.theme-light-red .case-price {
    color: #0b101d !important;
}

body.theme-light-red .case-subtitle {
    color: #607086 !important;
}

body.theme-light-red .case-visual {
    background: rgba(56, 104, 192, .03) !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .case-ribbon {
    background: rgba(56, 104, 192, .07) !important;
    border-color: rgba(56, 104, 192, .18) !important;
    color: #58A6FF !important;
}

body.theme-light-red .hero-banner {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08) !important;
}

body.theme-light-red .hero-banner::before {
    color: rgba(56, 104, 192, .06) !important;
}

body.theme-light-red .hero-copy h1 {
    color: #04060b !important;
}

body.theme-light-red .hero-copy p {
    color: #607086 !important;
}

body.theme-light-red .lobby-promo-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-light-red .promo-stat {
    background: rgba(56, 104, 192, .05) !important;
    border-color: rgba(56, 104, 192, .15) !important;
    box-shadow: none !important;
}

body.theme-light-red .promo-stat span {
    color: #607086 !important;
}

body.theme-light-red .promo-stat strong {
    color: #58A6FF !important;
}

body.theme-light-red .section-head h2 {
    color: #04060b !important;
}

body.theme-light-red .section-head span {
    color: #607086 !important;
}

body.theme-light-red .muted {
    color: #607086 !important;
}

body.theme-light-red input, body.theme-light-red select, body.theme-light-red textarea {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #04060b !important;
}

body.theme-light-red input:focus, body.theme-light-red select:focus, body.theme-light-red textarea:focus {
    border-color: rgba(56, 104, 192, .4) !important;
    box-shadow: 0 0 16px rgba(56, 104, 192, .08) !important;
}

body.theme-light-red .loot-card, body.theme-light-red .target-card, body.theme-light-red .related-card {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .modal-card {
    background: linear-gradient(180deg, #FFFFFF, #F8F8F8) !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .auth-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .auth-badge {
    background: rgba(56, 104, 192, .1) !important;
    color: #58A6FF !important;
}

body.theme-light-red .roulette-window {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .roulette-item {
    background: #F8F4F4 !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .roulette-name {
    color: #04060b !important;
}

body.theme-light-red .roulette-value {
    color: #607086 !important;
}

body.theme-light-red .speed-toggle {
    background: #F8F4F4 !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .speed-toggle-btn {
    color: #607086 !important;
}

body.theme-light-red .speed-toggle-btn.active {
    color: #fff !important;
}

body.theme-light-red .toast {
    background: #FFFFFF !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #04060b !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12) !important;
}

body.theme-light-red .profile-card, .body.theme-light-red .profile-hero {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .profile-balance-box strong {
    color: #58A6FF !important;
}

body.theme-light-red .profile-tab {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #607086 !important;
}

body.theme-light-red .profile-tab.is-active {
    background: rgba(56, 104, 192, .07) !important;
    border-color: rgba(56, 104, 192, .3) !important;
    color: #58A6FF !important;
}

body.theme-light-red .ops-tab {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #607086 !important;
}

body.theme-light-red .ops-tab.is-active {
    background: rgba(56, 104, 192, .07) !important;
    border-color: rgba(56, 104, 192, .3) !important;
    color: #58A6FF !important;
}

body.theme-light-red .ops-surface {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07) !important;
}

body.theme-light-red .ops-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .ops-input, .body.theme-light-red .ops-select {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #04060b !important;
}

body.theme-light-red .ops-label {
    color: #607086 !important;
}

body.theme-light-red .payment-method-btn {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #04060b !important;
}

body.theme-light-red .payment-method-btn:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    background: rgba(56, 104, 192, .04) !important;
}

body.theme-light-red .deposit-fullscreen-shell, .body.theme-light-red .support-inapp-shell {
    background: #FFFFFF !important;
}

body.theme-light-red .rarity-common {
    border-color: rgba(90, 110, 140, .25) !important;
}

body.theme-light-red .rarity-rare {
    border-color: rgba(56, 104, 192, .35) !important;
}

body.theme-light-red .rarity-epic {
    border-color: rgba(59, 130, 246, .42) !important;
}

body.theme-light-red .rarity-legendary {
    border-color: rgba(88, 166, 255, .5) !important;
    animation: legendPulseLight 3s ease-in-out infinite !important;
}

body.theme-light-red .sidebar-title, body.theme-light-red .panel-title {
    color: #607086 !important;
}

@keyframes legendPulseLight {
    0%, 100% {
        border-color: rgba(59, 130, 246, .45);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, .08), 0 0 20px rgba(59, 130, 246, .1);
    }
    50% {
        border-color: rgba(88, 166, 255, .65);
        box-shadow: 0 0 0 1px rgba(88, 166, 255, .12), 0 0 32px rgba(88, 166, 255, .2);
    }
}

.ghost-btn.accent {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #58A6FF !important;
}

.item-source-badge {
    background: rgba(6, 9, 16, .6) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
}

body.theme-light-red .item-source-badge {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #607086 !important;
}

.activity-item, .activity-row {
    border-color: rgba(255, 255, 255, .06) !important;
}

body.theme-light-red .activity-item, body.theme-light-red .activity-row {
    border-color: rgba(4, 6, 12, .07) !important;
}

.profile-wallet-btn {
    background: linear-gradient(135deg, #4F46E5, #3B82F6) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, .3) !important;
    font-size: 28px !important;
    border-radius: 50% !important;
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.win-result-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

.sold-inline-note {
    color: #22C55E !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

.open-count-btn.disabled {
    opacity: .3 !important;
    filter: grayscale(1) !important;
}

body.theme-light-red .ops-weights-panel, body.theme-light-red .ops-appearance-panel, body.theme-light-red .ops-presets-panel, body.theme-light-red .ops-list-soft {
    background: #F8F4F4 !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .ops-weight-row, body.theme-light-red .ops-item-row, body.theme-light-red .result-line-wrap {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .ops-case-row-extended {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .ops-promo-row {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

#rouletteModal.modal {
    background: rgba(1, 2, 3, .93) !important;
}

#rouletteModal .modal-card {
    background: linear-gradient(180deg, #060911 0%, #030407 100%) !important;
    border: 1px solid rgba(56, 104, 192, .18) !important;
    border-radius: 0 !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .88), 0 0 80px rgba(56, 104, 192, .07) !important;
    animation: carnageModalIn .38s cubic-bezier(.17, .67, .3, 1.1) both !important;
    overflow: hidden !important;
    position: relative !important;
}

#rouletteModal .modal-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #3868C0 40%, transparent) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

#rouletteModal .modal-top {
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(56, 104, 192, .14) !important;
    margin-bottom: 16px !important;
    background: transparent !important;
}

#rouletteModal h3, #rouletteTitle {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    margin: 0 0 5px !important;
}

#rouletteModal .modal-top .muted {
    font-family: 'Syne', sans-serif !important;
    font-size: 10px !important;
    color: #5A7086 !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

#rouletteModal .icon-close {
    background: rgba(56, 104, 192, .08) !important;
    border: 1px solid rgba(56, 104, 192, .22) !important;
    border-radius: 0 !important;
    color: #58A6FF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: all .18s ease !important;
    flex-shrink: 0 !important;
}

#rouletteModal .icon-close:hover {
    background: rgba(56, 104, 192, .2) !important;
    border-color: rgba(56, 104, 192, .55) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(56, 104, 192, .22) !important;
    transform: scale(1.04) !important;
}

.roulette-window {
    background: rgba(3, 4, 7, .92) !important;
    border: 1px solid rgba(56, 104, 192, .1) !important;
    border-radius: 0 !important;
}

.roulette-window::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 88px !important;
    height: 100% !important;
    background: linear-gradient(270deg, transparent, rgba(1, 2, 3, .5), rgba(1, 2, 3, .96)) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.roulette-browser-edge {
    width: 88px !important;
    background: linear-gradient(90deg, transparent, rgba(1, 2, 3, .5), rgba(1, 2, 3, .96)) !important;
}

.roulette-pointer {
    width: 3px !important;
    background: #3868C0 !important;
    box-shadow: 0 0 10px rgba(88, 166, 255, .9),
    0 0 28px rgba(56, 104, 192, .55),
    0 0 60px rgba(56, 104, 192, .2) !important;
    animation: carnagePointerPulse 1.1s ease-in-out infinite !important;
}

.roulette-window[data-spin-tone] .roulette-pointer {
    box-shadow: 0 0 12px rgba(88, 166, 255, .9),
    0 0 32px rgba(56, 104, 192, .55) !important;
}

.roulette-item {
    background: rgba(4, 6, 12, .78) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

.roulette-item.compact {
    border-radius: 0 !important;
}

.roulette-emoji {
    font-size: 38px !important;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6)) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 44px !important;
}

.roulette-image {
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
}

.roulette-name {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
    color: #FFFFFF !important;
    width: 100% !important;
    /* Раньше жёсткая одна строка + эллипсис резала длинные имена вроде
       "Halloween Base" до нечитаемого "HALLOWEE..." -- в некомпактных
       карточках места хватает (194px/154px высоты, см. F1-фикс выше по
       файлу у #rouletteModal.roulette-open .roulette-item), так что даём
       имени переносится на вторую строку и обрезаем эллипсисом только то,
       что не влезло даже в неё. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    line-height: 1.18 !important;
}

.roulette-name.compact, .roulette-item.compact .roulette-name {
    font-size: 12px !important;
    /* Компактные карточки (мобильное мультиоткрытие) высотой впритык под
       одну строку -- вторая строка вылезла бы за пределы карточки, тут
       возвращаем классический однострочный эллипсис. */
    -webkit-line-clamp: 1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.roulette-value {
    font-weight: 600 !important;
    font-size: 11px !important;
    color: #5A7086 !important;
    margin-top: 3px !important;
}

.roulette-item.compact .roulette-value {
    font-size: 11px !important;
}

.roulette-item.near-top-item::before {
    border-radius: 0 !important;
    border-color: rgba(56, 104, 192, .25) !important;
}

.roulette-item.near-top-focus {
    border-color: rgba(56, 104, 192, .6) !important;
    box-shadow: 0 0 0 1px rgba(56, 104, 192, .24),
    0 0 28px rgba(56, 104, 192, .25) !important;
    transform: translateY(-2px) scale(1.01) !important;
}

.roulette-item.near-top-focus::before {
    opacity: 1 !important;
    border-color: rgba(56, 104, 192, .35) !important;
}

.roulette-near-top-flash {
    background: radial-gradient(circle at 50% 50%, rgba(56, 104, 192, .3), transparent 32%),
    radial-gradient(circle at 50% 18%, rgba(88, 166, 255, .2), transparent 28%) !important;
}

#rouletteModal .modal-foot {
    padding-top: 14px !important;
    border-top: 1px solid rgba(56, 104, 192, .12) !important;
    margin-top: 10px !important;
}

#rouletteResult {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
    color: #5A7086 !important;
    transition: color .3s ease, text-shadow .3s ease !important;
}

.roulette-result-win, #rouletteResult[data-state="win"] {
    color: #58A6FF !important;
    text-shadow: 0 0 20px rgba(56, 104, 192, .45) !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
}

/* justify-content тут стоял с самого начала, но сам ряд оставался блочным —
   на display: block это правило не делает ничего, и кнопка всё время жалась
   к левому краю. Плюс размер: «Продать все» — итоговое действие после
   открытия, мелкая кнопка в 138x36 под широкой лентой терялась. */
.roulette-bulk-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

.roulette-bulk-actions .wheel-sell-btn {
    min-width: min(320px, 90%) !important;
    min-height: 48px !important;
    padding: 0 26px !important;
    font-size: 15px !important;
}

@media (max-width: 600px) {
    .roulette-bulk-actions .wheel-sell-btn {
        min-width: 100% !important;
        font-size: 14px !important;
    }
}

.wheel-sell-btn {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 18px rgba(56, 104, 192, .3) !important;
}

.wheel-sell-btn:hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 10px 28px rgba(88, 166, 255, .44) !important;
    filter: brightness(1.08) !important;
}

.wheel-sell-btn:active {
    transform: translateY(0) scale(.97) !important;
}

.sold-inline-note {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #22C55E !important;
}

#pickOptions.pick-options {
    margin-top: 14px !important;
    gap: 10px !important;
}

#pickOptions .pick-card, .pick-options .pick-card {
    background: rgba(4, 6, 12, .78) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 0 !important;
    transition: all .2s ease !important;
    cursor: pointer !important;
    min-height: 150px !important;
}

#pickOptions .pick-card:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    box-shadow: 0 0 22px rgba(56, 104, 192, .1) !important;
    transform: translateY(-2px) !important;
}

#pickOptions .pick-card.revealed {
    background: rgba(56, 104, 192, .08) !important;
    border-color: rgba(56, 104, 192, .38) !important;
    box-shadow: 0 0 30px rgba(56, 104, 192, .14) !important;
}

#pickOptions .pick-card.dimmed {
    opacity: .22 !important;
    filter: grayscale(1) brightness(.4) !important;
}

#pickOptions .target-name {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #FFFFFF !important;
}

#pickOptions .target-value {
    color: #5A7086 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

#pickOptions .target-emoji {
    font-size: 40px !important;
}

#rouletteModal + * .spin-speed-switch, .spin-speed-switch {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

body.modal-fullscreen-open #rouletteModal .modal-card {
    background: linear-gradient(180deg, #060911 0%, #030407 100%) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.modal-fullscreen-open #rouletteModal .modal-top {
    background: linear-gradient(180deg, #060911 70%, rgba(6, 9, 17, .4)) !important;
    border-bottom-color: rgba(56, 104, 192, .14) !important;
}

@keyframes carnageModalIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes carnagePointerPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(88, 166, 255, .85), 0 0 26px rgba(56, 104, 192, .4);
    }
    50% {
        box-shadow: 0 0 18px rgba(88, 166, 255, 1), 0 0 50px rgba(56, 104, 192, .65), 0 0 90px rgba(56, 104, 192, .2);
    }
}

@keyframes carnageItemWin {
    0% {
        border-color: rgba(56, 104, 192, .2);
        box-shadow: 0 0 0 rgba(56, 104, 192, 0);
    }
    30% {
        border-color: rgba(88, 166, 255, .9);
        box-shadow: 0 0 50px rgba(56, 104, 192, .55), 0 0 100px rgba(56, 104, 192, .22);
    }
    100% {
        border-color: rgba(56, 104, 192, .65);
        box-shadow: 0 0 36px rgba(56, 104, 192, .28);
    }
}

body.theme-light-red #rouletteModal.modal {
    background: rgba(0, 0, 0, .74) !important;
}

body.theme-light-red #rouletteModal .modal-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .22), 0 0 60px rgba(56, 104, 192, .05) !important;
}

body.theme-light-red #rouletteModal .modal-card::before {
    background: linear-gradient(90deg, transparent, #3868C0 40%, transparent) !important;
}

body.theme-light-red #rouletteModal h3, body.theme-light-red #rouletteTitle {
    color: #04060b !important;
}

body.theme-light-red #rouletteModal .modal-top .muted {
    color: #607086 !important;
}

body.theme-light-red #rouletteModal .modal-top {
    border-bottom-color: rgba(56, 104, 192, .14) !important;
}

body.theme-light-red #rouletteModal .icon-close {
    background: rgba(56, 104, 192, .06) !important;
    border-color: rgba(56, 104, 192, .18) !important;
    color: #58A6FF !important;
}

body.theme-light-red #rouletteModal .icon-close:hover {
    background: rgba(56, 104, 192, .14) !important;
    border-color: rgba(56, 104, 192, .45) !important;
    color: #fff !important;
}

body.theme-light-red .roulette-window {
    background: #F4EEEE !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .roulette-window::before {
    background: linear-gradient(270deg, transparent, rgba(244, 238, 238, .55), rgba(244, 238, 238, .97)) !important;
}

body.theme-light-red .roulette-browser-edge {
    background: linear-gradient(90deg, transparent, rgba(244, 238, 238, .55), rgba(244, 238, 238, .97)) !important;
}

body.theme-light-red .roulette-item {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .roulette-name {
    color: #04060b !important;
}

body.theme-light-red .roulette-value {
    color: #607086 !important;
}

body.theme-light-red #rouletteResult {
    color: #607086 !important;
}

body.theme-light-red #rouletteModal .modal-foot {
    border-top-color: rgba(56, 104, 192, .1) !important;
}

body.theme-light-red #pickOptions .pick-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red #pickOptions .pick-card:hover {
    border-color: rgba(56, 104, 192, .28) !important;
    box-shadow: 0 4px 18px rgba(56, 104, 192, .09) !important;
}

body.theme-light-red #pickOptions .pick-card.revealed {
    background: rgba(56, 104, 192, .05) !important;
    border-color: rgba(56, 104, 192, .3) !important;
}

body.theme-light-red #pickOptions .target-name {
    color: #04060b !important;
}

body.theme-light-red #pickOptions .target-value {
    color: #607086 !important;
}

body.theme-light-red .speed-toggle {
    background: #F0EEEE !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .speed-toggle-btn {
    color: #607086 !important;
}

body.theme-light-red body.modal-fullscreen-open #rouletteModal .modal-card {
    background: #FFFFFF !important;
}

body.theme-light-red body.modal-fullscreen-open #rouletteModal .modal-top {
    background: linear-gradient(180deg, #FFFFFF 70%, rgba(255, 255, 255, .4)) !important;
}

body.theme-light-red .roulette-item.near-top-focus {
    border-color: rgba(56, 104, 192, .55) !important;
    box-shadow: 0 0 0 1px rgba(56, 104, 192, .2), 0 0 24px rgba(56, 104, 192, .15) !important;
}

html body #rouletteModal, html body #rouletteModal .modal-card, html body #rouletteModal .modal-card.large, html body #rouletteModal .modal-top, html body #rouletteModal .modal-foot, html body #rouletteModal .icon-close, html body .roulette-window, html body .roulette-window.mini, html body .roulette-item, html body .roulette-item.compact, html body #rouletteModal * {
    border-radius: 0 !important;
}

html body #rouletteModal #userAvatar, html body #rouletteModal #profileAvatarLarge {
    border-radius: 50% !important;
}

.roulette-window {
    border-top: 2px solid rgba(56, 104, 192, .35) !important;
}

.roulette-window::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(56, 104, 192, .2), transparent, rgba(56, 104, 192, .2)) !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

body.theme-light-red #rouletteModal, body.theme-light-red #rouletteModal *, body.theme-light-red #rouletteModal *::before, body.theme-light-red #rouletteModal *::after {
    border-radius: 0 !important;
}

.deposit-fullscreen-backdrop {
    background: rgba(1, 2, 3, .88) !important;
    backdrop-filter: blur(14px) !important;
}

/* Раньше уходил от #060911 к #030408 -- заметно темнее к низу шторки, а
   именно там, где сверстана история заявок (весь остальной контент выше
   заметно светлее). Подтверждено по пикселям реального скрина: над
   "ЗАЯВКИ" фон ~RGB(21,22,24), внутри блока истории ~RGB(12,13,15) --
   градиент, не отдельный элемент истории (тот уже проверен и чист). Мягкий
   градиент в той же тёмно-синей гамме вместо ухода в чёрный -- лёгкая
   глубина без заметного "темнее книзу". Трогаем только .deposit-fullscreen-
   shell -- #rouletteModal .modal-card/.modal-top используют тот же цвет
   отдельно, их не задеваем. */
.deposit-fullscreen-shell {
    background: linear-gradient(180deg, #0d121c 0%, #0a0e16 100%) !important;
    border: 1px solid rgba(56, 104, 192, .2) !important;
    border-radius: 0 !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .85), 0 0 80px rgba(56, 104, 192, .07) !important;
    animation: depositModalIn .38s cubic-bezier(.17, .67, .3, 1.1) both !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

.deposit-fullscreen-shell::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #3868C0 40%, transparent) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.deposit-fullscreen-head {
    padding: 26px 30px 0 !important;
}

.deposit-fullscreen-kicker {
    font-family: 'Syne', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: #58A6FF !important;
    margin-bottom: 6px !important;
}

.deposit-fullscreen-head h3 {
    font-family: 'Syne', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.deposit-fullscreen-close {
    background: rgba(56, 104, 192, .08) !important;
    border: 1px solid rgba(56, 104, 192, .22) !important;
    border-radius: 0 !important;
    color: #58A6FF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: all .18s ease !important;
    flex-shrink: 0 !important;
}

.deposit-fullscreen-close:hover {
    background: rgba(56, 104, 192, .2) !important;
    border-color: rgba(56, 104, 192, .55) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(56, 104, 192, .22) !important;
    transform: scale(1.04) !important;
}

.deposit-terminal, .deposit-fullscreen-shell .deposit-terminal {
    background: rgba(3, 5, 9, .98) !important;
    border: 1px solid rgba(56, 104, 192, .14) !important;
    border-radius: 0 !important;
    margin: 20px 28px 28px !important;
    overflow: hidden !important;
}

.deposit-menu-tabs {
    background: rgba(2, 2, 4, .9) !important;
    border-right: 1px solid rgba(56, 104, 192, .12) !important;
}

.deposit-menu-tab {
    min-height: 80px !important;
    border-bottom: 1px solid rgba(56, 104, 192, .08) !important;
    background: transparent !important;
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    transition: all .2s ease !important;
    cursor: pointer !important;
}

.deposit-menu-tab:hover {
    background: rgba(56, 104, 192, .06) !important;
    color: #58A6FF !important;
}

.deposit-menu-tab.is-active {
    background: rgba(56, 104, 192, .1) !important;
    color: #FFFFFF !important;
}

.deposit-menu-tab.is-active::before {
    background: #3868C0 !important;
    width: 3px !important;
}

.deposit-menu-tab-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

.deposit-menu-tab strong {
    font-family: 'Syne', sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    display: block !important;
    margin-top: 4px !important;
}

.deposit-terminal-main {
    padding: 24px 28px !important;
    gap: 18px !important;
}

.deposit-terminal-head .panel-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #FFFFFF !important;
}

.deposit-currency-select {
    background: rgba(6, 9, 16, .9) !important;
    border: 1px solid rgba(56, 104, 192, .25) !important;
    border-radius: 0 !important;
    color: #58A6FF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    transition: all .18s ease !important;
}

.deposit-currency-select:hover, .deposit-currency-select:focus {
    border-color: rgba(56, 104, 192, .55) !important;
    box-shadow: 0 0 14px rgba(56, 104, 192, .12) !important;
}

.deposit-terminal .payment-amount-summary {
    border-top: 1px solid rgba(56, 104, 192, .1) !important;
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: transparent !important;
    padding: 14px 0 0 !important;
}

.deposit-terminal .payment-method-btn {
    background: rgba(6, 9, 16, .85) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 0 !important;
    min-height: 110px !important;
    color: #FFFFFF !important;
    transition: all .18s ease !important;
    position: relative !important;
}

.deposit-terminal .payment-method-btn:hover, .deposit-terminal .payment-method-btn:focus {
    transform: translateY(-2px) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    background: rgba(56, 104, 192, .07) !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .1) !important;
    outline: 0 !important;
}

.deposit-terminal .payment-method-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border: 1px solid transparent !important;
    pointer-events: none !important;
    transition: border-color .18s ease !important;
}

.deposit-terminal .payment-method-btn:hover::before {
    border-color: rgba(56, 104, 192, .4) !important;
}

.deposit-terminal .payment-method-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #3868C0, transparent) !important;
    transform: scaleX(0) !important;
    transition: transform .3s ease !important;
    pointer-events: none !important;
}

.deposit-terminal .payment-method-btn:hover::after {
    transform: scaleX(1) !important;
}

.deposit-terminal .payment-method-icon {
    background: transparent !important;
    color: #FFFFFF !important;
    font-size: 26px !important;
    margin-bottom: 10px !important;
}

.deposit-terminal .payment-method-body strong {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.deposit-terminal .payment-method-body small {
    font-family: 'Syne', sans-serif !important;
    font-size: 10px !important;
    color: #5A7086 !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
}

.deposit-terminal-bottom {
    border-top: 1px solid rgba(56, 104, 192, .1) !important;
    padding-top: 16px !important;
    gap: 14px !important;
}

.deposit-terminal-field span {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #FFFFFF !important;
}

.deposit-terminal-field small {
    font-family: 'Syne', sans-serif !important;
    font-size: 10px !important;
    color: #5A7086 !important;
    font-weight: 600 !important;
}

.deposit-terminal-input {
    background: rgba(6, 9, 16, .9) !important;
    border: 1px solid rgba(56, 104, 192, .18) !important;
    border-radius: 0 !important;
    color: #FFFFFF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    transition: all .18s ease !important;
}

.deposit-terminal-input:focus {
    border-color: rgba(56, 104, 192, .5) !important;
    box-shadow: 0 0 16px rgba(56, 104, 192, .12) !important;
    outline: none !important;
}

.deposit-terminal-input::placeholder {
    color: #5A7086 !important;
    font-weight: 500 !important;
}

.deposit-terminal-pay-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    min-height: 48px !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .36) !important;
    transition: all .22s ease !important;
    cursor: pointer !important;
}

.deposit-terminal-pay-btn:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(88, 166, 255, .48) !important;
}

.deposit-terminal-pay-btn:active {
    transform: translateY(0) scale(.97) !important;
}

.deposit-terminal .payment-method-hint {
    font-family: 'Syne', sans-serif !important;
    font-size: 12px !important;
    color: #5A7086 !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
}

.payment-step {
    background: rgba(6, 9, 16, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    border-radius: 0 !important;
}

.payment-step b {
    background: rgba(255, 255, 255, .06) !important;
    border-radius: 0 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

.payment-step.is-active b, .payment-step.is-done b {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(56, 104, 192, .3) !important;
}

.payment-step span {
    font-family: 'Syne', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #5A7086 !important;
}

.payment-step.is-active span {
    color: #58A6FF !important;
}

.payment-currency-btn {
    background: rgba(6, 9, 16, .7) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    border-radius: 0 !important;
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    transition: all .18s ease !important;
}

.payment-currency-btn:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #fff !important;
}

.payment-currency-btn.is-active {
    background: rgba(56, 104, 192, .12) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58A6FF !important;
    box-shadow: 0 0 14px rgba(56, 104, 192, .1) !important;
}

.payment-rates-card {
    background: rgba(4, 6, 12, .6) !important;
    border: 1px solid rgba(56, 104, 192, .1) !important;
    border-radius: 0 !important;
    border-left: 3px solid rgba(56, 104, 192, .35) !important;
}

.payment-rates-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    color: #5A7086 !important;
}

.payment-rates-grid div {
    background: rgba(6, 9, 16, .6) !important;
    border-color: rgba(56, 104, 192, .1) !important;
    border-radius: 0 !important;
    transition: border-color .18s ease !important;
}

.payment-rates-grid div:hover {
    border-color: rgba(56, 104, 192, .28) !important;
}

.payment-rates-grid strong {
    color: #FFFFFF !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
}

.payment-rates-grid span {
    color: #5A7086 !important;
    font-family: 'Syne', sans-serif !important;
}

html body .deposit-fullscreen-shell, html body .deposit-fullscreen-shell *, html body .deposit-fullscreen-shell *::before, html body .deposit-fullscreen-shell *::after {
    border-radius: 0 !important;
}

@media (max-width: 760px) {
    html body .deposit-fullscreen-shell, html body .deposit-fullscreen-shell * {
        border-radius: 0 !important;
    }

    .deposit-fullscreen-shell {
        border-radius: 0 !important;
    }
}

@keyframes depositModalIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.theme-light-red .deposit-fullscreen-backdrop {
    background: rgba(0, 0, 0, .68) !important;
    backdrop-filter: blur(14px) !important;
}

body.theme-light-red .deposit-fullscreen-shell {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .22) !important;
}

body.theme-light-red .deposit-fullscreen-shell::before {
    background: linear-gradient(90deg, transparent, #3868C0 40%, transparent) !important;
}

body.theme-light-red .deposit-fullscreen-kicker {
    color: #58A6FF !important;
}

body.theme-light-red .deposit-fullscreen-head h3 {
    color: #04060b !important;
}

body.theme-light-red .deposit-fullscreen-close {
    background: rgba(56, 104, 192, .06) !important;
    border-color: rgba(56, 104, 192, .18) !important;
    color: #58A6FF !important;
}

body.theme-light-red .deposit-fullscreen-close:hover {
    background: rgba(56, 104, 192, .14) !important;
    border-color: rgba(56, 104, 192, .45) !important;
    color: #fff !important;
}

body.theme-light-red .deposit-terminal {
    background: #F8F4F4 !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .deposit-menu-tabs {
    background: #F0EEEE !important;
    border-right-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .deposit-menu-tab {
    color: #607086 !important;
    border-bottom-color: rgba(4, 6, 12, .07) !important;
}

body.theme-light-red .deposit-menu-tab:hover {
    background: rgba(56, 104, 192, .05) !important;
    color: #58A6FF !important;
}

body.theme-light-red .deposit-menu-tab.is-active {
    background: #FFFFFF !important;
    color: #04060b !important;
}

body.theme-light-red .deposit-terminal-head .panel-title {
    color: #04060b !important;
}

body.theme-light-red .deposit-terminal-field span {
    color: #04060b !important;
}

body.theme-light-red .deposit-terminal-field small {
    color: #607086 !important;
}

body.theme-light-red .deposit-currency-select {
    background: #fff !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #58A6FF !important;
}

body.theme-light-red .deposit-terminal .payment-method-btn {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #04060b !important;
}

body.theme-light-red .deposit-terminal .payment-method-btn:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    background: rgba(56, 104, 192, .04) !important;
    box-shadow: 0 4px 18px rgba(56, 104, 192, .1) !important;
}

body.theme-light-red .deposit-terminal .payment-method-body strong {
    color: #04060b !important;
}

body.theme-light-red .deposit-terminal .payment-method-body small {
    color: #607086 !important;
}

body.theme-light-red .deposit-terminal-input {
    background: #fff !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #04060b !important;
}

body.theme-light-red .deposit-terminal-input:focus {
    border-color: rgba(56, 104, 192, .4) !important;
}

body.theme-light-red .deposit-terminal .payment-amount-summary {
    color: #607086 !important;
    border-top-color: rgba(56, 104, 192, .1) !important;
}

body.theme-light-red .deposit-terminal-bottom {
    border-top-color: rgba(56, 104, 192, .1) !important;
}

body.theme-light-red .payment-step {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .payment-step b {
    background: rgba(4, 6, 12, .06) !important;
    color: #04060b !important;
}

body.theme-light-red .payment-step span {
    color: #607086 !important;
}

body.theme-light-red .payment-currency-btn {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    color: #607086 !important;
}

body.theme-light-red .payment-currency-btn.is-active {
    background: rgba(56, 104, 192, .07) !important;
    border-color: rgba(56, 104, 192, .3) !important;
    color: #58A6FF !important;
}

body.theme-light-red .payment-rates-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    border-left-color: rgba(56, 104, 192, .3) !important;
}

body.theme-light-red .payment-rates-title {
    color: #607086 !important;
}

body.theme-light-red .payment-rates-grid div {
    background: #F8F4F4 !important;
    border-color: rgba(4, 6, 12, .08) !important;
}

body.theme-light-red .payment-rates-grid strong {
    color: #04060b !important;
}

body.theme-light-red .payment-rates-grid span {
    color: #607086 !important;
}

body.theme-light-red .deposit-terminal .payment-method-hint {
    color: #607086 !important;
}

body.theme-light-red html body .deposit-fullscreen-shell, body.theme-light-red html body .deposit-fullscreen-shell * {
    border-radius: 0 !important;
}

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

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.app-shell {
    display: block !important;
    min-height: 100vh !important;
}

.sidebar-live {
    display: none !important;
}

.main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 113px 0 72px !important;
}

.topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 150 !important;
    box-sizing: border-box !important;
    width: auto !important;
}

.brand-btn {
    order: 1 !important;
    flex-shrink: 0 !important;
    padding: 8px 8px !important;
    font-size: 13px !important;
    min-height: 38px !important;
    white-space: nowrap !important;
}

.topbar-user-wrap {
    order: 2 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.main-nav {
    order: 3 !important;
    display: flex !important;
    flex-basis: 100% !important;
    width: 100% !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.main-nav::-webkit-scrollbar {
    display: none !important;
}

.nav-btn {
    flex: 1 1 auto !important;
    min-width: max-content !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    white-space: nowrap !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    /* Иконка+текст раньше центрировались только через text-align (inline-
       контент), а иконка держалась вплотную к тексту (margin:0 .05em ~0.5px
       у img.solar-icon) -- читалось как "слеплено" и криво по вертикали.
       display:flex с явным gap даёт настоящее центрирование (по коробке, а
       не по метрикам шрифта) и нормальный отступ, тот же gap:7px, что уже
       использует .nav-btn-event (кнопка "Ивент") -- для единообразия. Не
       ломает .main-nav .nav-btn{justify-content:flex-start} в шторе ниже по
       каскаду -- та специфичнее и просто переопределяет just-content. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

/* .nav-btn{display:flex!important} выше по каскаду -- та же специфичность
   (0,1,0), что и у .hidden{display:none!important} (styles.css, ~строка 6356),
   и стоит НИЖЕ по файлу -- значит побеждает по порядку и делает class="hidden"
   на нав-кнопках нерабочим (баг с видимыми Фьюз/Лесенкой после логина при
   высокой нагрузке). Явный составной селектор .nav-btn.hidden имеет более
   высокую специфичность (0,2,0) и побеждает ВСЕГДА, независимо от порядка --
   не полагаемся больше на случайный порядок правил в файле. */
.nav-btn.hidden {
    display: none !important;
}

.user-meta {
    display: none !important;
}

.balance-chip span {
    display: none !important;
}

.balance-chip {
    padding: 6px 10px !important;
}

.balance-chip strong {
    font-size: 13px !important;
}

.user-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
}

#siteLogoutBtn {
    display: none !important;
}

.main-content > section, .main-content > header {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.topbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.hero-banner {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    border-radius: 0 !important;
}

.hero-copy h1 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    max-width: none !important;
}

.hero-copy p {
    font-size: 13px !important;
    max-width: none !important;
}

.hero-badge {
    font-size: 10px !important;
    padding: 6px 10px !important;
}

.promo-card {
    padding: 14px !important;
}

.lobby-actions {
    display: flex !important;
    gap: 8px !important;
}

.lobby-action-btn {
    flex: 1 !important;
    min-height: 40px !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
}

.lobby-deposit-main {
    flex: 1.7 !important;
}

.section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-bottom: 10px !important;
}

.section-head h2 {
    font-size: 20px !important;
}

@media (max-width: 479px) {
    .case-row, .cases-grid {
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .case-card {
        min-height: 190px !important;
        border-radius: 0 !important;
        padding: 10px !important;
    }

    .case-visual {
        height: 100px !important;
        max-height: 100px !important;
    }

    .case-emoji {
        font-size: 40px !important;
    }

    .case-title {
        font-size: 12px !important;
    }

    .case-price-row {
        font-size: 11px !important;
    }

    .case-price {
        font-size: 14px !important;
    }

    .case-subtitle {
        font-size: 10px !important;
    }
}

.case-page-layout, .item-page-layout, .fuse-layout, .profile-layout:not(.profile-areas-layout) {
    grid-template-columns:1fr !important;
    gap: 12px !important;
}

.case-showcase {
    padding: 14px !important;
}

.case-showcase-emoji, .item-hero-emoji {
    font-size: 64px !important;
}

.case-showcase-name, .item-hero-name {
    font-size: 22px !important;
}

.loot-preview, .inventory-grid, .related-grid {
    grid-template-columns:repeat(3, 1fr) !important;
    gap: 8px !important;
}

.loot-card, .inventory-card, .related-card, .target-card {
    padding: 8px !important;
}

.loot-emoji {
    font-size: 28px !important;
}

.loot-name {
    font-size: 12px !important;
}

.loot-value {
    font-size: 11px !important;
    margin-top: 3px !important;
}

.multi-open-row {
    gap: 6px !important;
}

.open-count-btn {
    padding: 10px !important;
    min-height: 40px !important;
}

.chance-box {
    grid-template-columns:1fr 1fr !important;
}

.profile-layout.profile-areas-layout {
    grid-template-columns:1fr !important;
}

.profile-hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

.profile-user-block {
    flex-shrink: 0;
    min-width: 0;
}

.profile-wallet-area {
    margin-left: auto !important;
    min-width: 0 !important;
    flex-shrink: 0;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.profile-wallet-area .profile-balance-box {
    transform: none !important;
    min-width: 0 !important;
    text-align: right !important;
}

.profile-wallet-area .profile-balance-box span {
    font-size: 11px !important;
}

.profile-avatar-large {
    width: 52px !important;
    height: 52px !important;
}

.profile-balance-box strong {
    font-size: 22px !important;
}

.ops-layout {
    grid-template-columns:1fr !important;
}

.primary-btn, .ghost-btn {
    min-height: 44px !important;
    padding: 11px 14px !important;
}

.modal {
    padding: 10px !important;
}

.modal-card {
    width: 100% !important;
    border-radius: 14px !important;
    padding: 14px !important;
}

@media (min-width: 480px) {
    .main-content {
        padding: 113px 0 72px !important;
    }

    .topbar {
        margin: 0 !important;
        width: auto !important;
    }

    .hero-copy h1 {
        font-size: 26px !important;
    }

    .cases-grid {
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .case-card {
        min-height: 220px !important;
        padding: 14px 12px !important;
    }

    .case-visual {
        height: 120px !important;
        max-height: 120px !important;
    }

    .case-emoji {
        font-size: 46px !important;
    }

    .loot-preview, .inventory-grid, .related-grid {
        grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)) !important;
    }

    .user-meta {
        display: block !important;
    }

    .balance-chip span {
        display: block !important;
    }

    .lobby-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .lobby-action-btn {
        width: auto !important;
        flex: 1 !important;
    }
}

@media (min-width: 768px) {
    .main-content {
        padding: 113px 24px 60px !important;
        max-width: 960px !important;
        margin: 0 auto !important;
    }

    .topbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        margin: 0 !important;
        width: auto !important;
        border-radius: 0 !important;
    }

    .brand-btn {
        order: 1 !important;
        flex-shrink: 0 !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
        min-height: 40px !important;
    }

    .topbar-user-wrap {
        order: 2 !important;
        margin-left: auto !important;
    }

    .main-nav {
        order: 3 !important;
        flex-basis: 100% !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .nav-btn {
        flex: none !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        min-height: 40px !important;
        letter-spacing: 0.06em !important;
    }

    .user-meta {
        display: block !important;
    }

    .balance-chip span {
        display: block !important;
    }

    .balance-chip {
        padding: 8px 12px !important;
    }

    .user-avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 0 !important;
    }

    .hero-banner {
        display: flex !important;
        flex-direction: column !important;
        padding: 18px 22px !important;
        gap: 12px !important;
    }

    .hero-copy h1 {
        font-size: 28px !important;
        max-width: none !important;
    }

    .cases-grid {
        grid-template-columns:repeat(3, 1fr) !important;
        gap: 14px !important;
    }

    .case-card {
        min-height: 235px !important;
        padding: 18px 14px !important;
    }

    .case-visual {
        height: 130px !important;
        max-height: 130px !important;
    }

    .case-emoji {
        font-size: 52px !important;
    }

    .case-page-layout, .item-page-layout, .fuse-layout {
        grid-template-columns:1fr 1fr !important;
        gap: 16px !important;
    }

    .loot-preview, .inventory-grid, .related-grid {
        grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)) !important;
    }

    .ops-layout {
        grid-template-columns:1fr 1fr !important;
    }

    .section-head {
        flex-direction: row !important;
        align-items: flex-end !important;
    }

    .section-head h2 {
        font-size: 24px !important;
    }
}

@media (min-width: 1024px) {
    .app-shell {
        display: block !important;
    }

    .sidebar-live {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 180px !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }

    .main-content {
        margin-left: 180px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 113px 28px 60px !important;
    }

    .topbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 10px 16px !important;
        width: auto !important;
    }

    .brand-btn {
        order: unset !important;
        flex-shrink: 0 !important;
    }

    .main-nav {
        order: unset !important;
        flex: 1 !important;
        flex-basis: auto !important;
        width: auto !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none !important;
    }

    .nav-btn {
        flex: none !important;
        min-width: unset !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
    }

    .topbar-user-wrap {
        order: unset !important;
        margin-left: unset !important;
        flex-shrink: 0 !important;
    }

    .user-meta {
        display: block !important;
    }

    .balance-chip span {
        display: block !important;
    }

    #langToggleBtn {
        width: 72px !important;
        font-size: 16px !important;
        align-self: stretch !important;
    }

    #siteLogoutBtn {
        display: inline-flex !important;
    }

    .hero-copy h1 {
        font-size: 30px !important;
        max-width: none !important;
    }

    .cases-grid {
        grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important;
    }

    .case-card {
        min-height: 248px !important;
        padding: 20px 16px !important;
    }

    .case-visual {
        height: 140px !important;
        max-height: 140px !important;
    }

    .case-emoji {
        font-size: 60px !important;
    }
}

@media (min-width: 1280px) {
    .sidebar-live {
        width: 210px !important;
    }

    .main-content {
        margin-left: 210px !important;
        width: auto !important;
        padding: 113px 32px 60px !important;
    }

    .hero-copy h1 {
        font-size: 38px !important;
        max-width: none !important;
    }

    .cases-grid {
        grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
    }

    .case-card {
        min-height: 260px !important;
        padding: 22px 18px !important;
    }

    .case-visual {
        height: 150px !important;
        max-height: 150px !important;
    }

    .case-emoji {
        font-size: 64px !important;
    }

    .topbar {
        border-radius: 0 !important;
    }
}

@media (max-width: 767px) {
    .main-content > section.view, .main-content > section.active-view {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Брейкпоинт поднят с 767px до 1299px вместе со шторой (см. комментарий
   у @media(max-width:1299px) выше, .main-nav) -- этот блок и есть та самая
   компенсация: без него .topbar оставался fixed (унаследовано от базового
   легаси-правила .topbar на 11689), а .main-content всё ещё резервировал
   113px padding-top (см. @media(min-width:768px) выше) под старую
   двухстрочную инлайн-навигацию. В шторном режиме .main-nav скрыт
   (position:fixed, вне потока) и реальный .topbar -- это только
   brand+burger, ~56-64px высотой, а не ~110px. Разница читалась как пустой
   мусорный зазор между хедером и home-live-feed-mobile/live-best-banner
   на 768-1299px (репорт: "около 1014px куча дрисьни между хедером и топ
   дропом"). Ставим topbar в обычный поток (static) и режем padding-top до
   14px -- ровно то же самое решение, что уже стояло здесь для ≤767px,
   просто на весь диапазон шторы. 05.10.2026: штора теперь до 1599px
   (см. «ОТСТУПЫ ПО ВСЕМУ САЙТУ» в конце файла), блок идёт за ней. */
@media (max-width: 1599px) {
    .topbar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .main-content {
        padding-top: 14px !important;
    }
}

.house-ret-section {
    border-radius: 0 !important;
}

.house-state-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.house-state-step {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: default;
    transition: .15s ease;
    opacity: .55;
}

.house-state-step.is-active {
    opacity: 1;
    font-weight: 900;
    box-shadow: 0 0 12px currentColor;
}

.dash-sublabel {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .03em;
    margin-top: 2px;
}

body.theme-light-red .house-ret-section .dash-card {
    background: rgba(255, 255, 255, .6) !important;
}

body.theme-light-red .house-state-step {
    opacity: .45;
}

body.theme-light-red .house-state-step.is-active {
    opacity: 1;
    color: #fff !important;
}

.house-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.house-users-table th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .4);
    padding: 6px 10px 10px;
    white-space: nowrap;
}

.house-users-table td {
    padding: 8px 10px;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.house-user-row:hover td {
    background: rgba(255, 255, 255, .04);
}

.house-user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

body.theme-light-red .house-users-table th {
    color: rgba(0, 0, 0, .4);
}

body.theme-light-red .house-users-table td {
    border-color: rgba(0, 0, 0, .06);
}

body.theme-light-red .house-user-row:hover td {
    background: rgba(0, 0, 0, .03);
}

.lang-toggle-btn {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}

.theme-toggle-single .theme-toggle-orbit {
    width: 28px !important;
    height: 28px !important;
}

.theme-toggle-single .theme-toggle-icon-img {
    width: 28px !important;
    height: 28px !important;
}

.burger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    flex-shrink: 0;
    align-self: stretch;
    padding: 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.burger-btn:hover {
    background: rgba(56, 104, 192, .07) !important;
    border-color: rgba(56, 104, 192, .3) !important;
}

.burger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text, #eef6ff);
    border-radius: 2px;
    transition: transform .22s, opacity .22s;
}

.burger-btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger-btn.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.burger-btn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1599px) {
    .burger-btn {
        display: flex !important;
    }

    /* 05.10.2026: поднят ещё раз, до 1599px. Пунктов стало десять плюс
       «Ивент» с яйцом и пилюлей — строке с профилем нужно ~1620px, и на
       1366/1440/1536 хвост меню (FAQ, Бонусы, баланс) уезжал за край в
       горизонтальную прокрутку, которую мышью не найти.

       Брейкпоинт поднят с 760px до 1299px (2026-08-21) -- считали содержимое:
       10 пунктов меню + карточка профиля с балансом в одну строку реально
       влезают только начиная примерно с 1300-1400px. От 761 до ~1150px
       бургера уже не было, а .main-nav { flex-wrap:wrap } переносил хвост
       пунктов на вторую-третью строку -- на обычных ноутбучных/планшетных
       ширинах хедер выглядел рваным ни как компактная штора, ни как ровная
       строка. Штора теперь покрывает весь этот промежуток честно.

       Боковая штора вместо разворачивания меню внутри хедера. Раньше пункты
       раскрывались прямо в шапке, раздвигали её и уезжали за экран на длинном
       списке разделов. Теперь панель выезжает слева поверх контента. */
    .main-nav {
        /* Геометрия целиком через !important: выше по файлу у .main-nav уже
           стоит `width: 100% !important` (и ещё пара правил в других медиа),
           из-за которых панель растягивалась на всю ширину и оставалась
           высотой в одну строку. */
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        z-index: 1200 !important;
        width: min(292px, 84vw) !important;
        max-width: none !important;
        height: auto !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        margin: 0 !important;
        order: 0 !important;
        /* 74px -> 64px: с крупной карточкой профиля сверху (см. #mainNav
           .user-avatar ниже) панель больше не читается как пустой "лоб" над
           мелкой строкой -- саму карточку тоже подняли ближе к бургеру. */
        padding: 64px 14px calc(20px + env(safe-area-inset-bottom)) 14px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: linear-gradient(180deg, #0b1120 0%, #050810 100%);
        border-right: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 12px 0 40px rgba(0, 0, 0, .55);
        /* Закрытая штора убрана за край и не ловит касания: без
           visibility/pointer-events она перехватывала бы свайпы у левой
           кромки экрана, оставаясь невидимой. */
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .26s cubic-bezier(.32, .72, .3, 1), visibility 0s linear .26s;
    }

    .main-nav.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: transform .26s cubic-bezier(.32, .72, .3, 1), visibility 0s;
    }

    /* Пункты в шторе — крупные строки во всю ширину, а не чипы. */
    .main-nav .nav-btn {
        width: 100% !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 13px 14px !important;
        font-size: 15px !important;
    }

    .nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: rgba(0, 0, 0, .55);
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity .26s ease;
    }
    .nav-scrim.is-open { opacity: 1; }

    /* Пока штора открыта, фон под ней не должен прокручиваться. */
    body.nav-drawer-open { overflow: hidden !important; }

    /* Бургер поверх шторы, чтобы им же её и закрыть. */
    .burger-btn { position: relative; z-index: 1250; }

    .topbar {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    .theme-toggle-single {
        align-self: center !important;
        height: 44px !important;
    }

    .user-meta {
        display: none !important;
    }

    .user-name, .user-label {
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .user-box {
        width: auto !important;
        justify-content: flex-start !important;
    }

    .topbar-user-wrap, .user-box, .balance-chip {
        min-width: 0 !important;
    }

    .balance-chip strong {
        font-size: 12px !important;
    }

    /* Профиль переехал внутрь шторы (#mainNav, см. index.html) -- просторная
       карточка сверху панели вместо сплюснутой строки в хедере рядом с
       бургером. user-meta:none/max-width на .user-name чуть выше в этом же
       блоке были нужны именно под ту тесноту; здесь её снимаем, обрезка
       (ellipsis) остаётся страховкой на случай длинного имени. Селекторы
       через #mainNav -- специфичность выше голого класса, чтобы надёжно
       перебить все .topbar-user-wrap-правила, рассчитанные на старое место
       в хедере (ниже по каскаду и в других медиа-блоках). */
    #mainNav .topbar-user-wrap {
        order: -1 !important;
        width: 100% !important;
        /* margin-bottom:auto -- не просто отступ, а весь свободный остаток
           высоты шторы: прижимает профиль намертво к верху панели, а все
           пункты режимов ниже по флексу (order:0, естественный DOM-порядок)
           утягивает вниз, к нижнему краю шторы, вместо того чтобы кучковаться
           сразу под профилем с пустотой внизу. */
        margin: 0 0 auto !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    }

    #mainNav .user-box {
        /* .user-box — обычная флекс-строка (avatar+meta+balance-chip в один
           ряд): в широком хедере хватало места всем троим, в узкой шторе
           (~264px) balance-chip после укрупнения аватара и текста уже не
           помещался и вылезал за правый край. flex-wrap переносит его на
           свою строку -- см. flex-basis:100% на самом balance-chip ниже. */
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 16px 14px !important;
        gap: 10px 14px !important;
    }

    /* Аватар 48px терялся в полноширинной строке шторы -- крупнее и с чуть
       более округлым радиусом, чтобы карточка сама держала верх панели, а
       не только текст рядом с мелкой иконкой. */
    #mainNav .user-avatar {
        width: 64px !important;
        height: 64px !important;
        border-radius: 18px !important;
        flex-shrink: 0 !important;
    }

    #mainNav .user-meta {
        display: block !important;
    }

    #mainNav .user-name {
        font-size: 16px !important;
    }

    #mainNav .user-label {
        font-size: 12px !important;
    }

    #mainNav .balance-chip {
        /* flex-basis:100% -- гарантированно своя строка в flex-wrap ряду
           .user-box (ничему не с чем делить строку с ним), а не просто
           "если вдруг не влезет": иначе на чуть более широком телефоне он
           снова встал бы в один ряд с avatar+meta и был бы сплюснут. */
        flex: 1 1 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 12px !important;
        margin-top: 4px !important;
    }

    #mainNav .balance-chip strong {
        font-size: 15px !important;
    }
}

@media (min-width: 1600px) {
    /* На десктопе #mainNav — обычная горизонтальная строка, не штора
       (штора существует только до 1599px, см. блок выше). Профиль тут
       возвращаем в конец строки через order -- визуально то же самое
       место у правого края хедера, что было раньше, когда он был не
       пунктом меню, а отдельным соседом .topbar по флексу. */
    #mainNav .topbar-user-wrap {
        order: 99 !important;
        margin-left: auto !important;
    }

    /* "Тайна-таймер" -- по плану живёт строго в шторе (штора существует
       только до 1599px, см. блок выше), на десктопе горизонтальная строка
       #mainNav для него не место: profile тут уезжает в order:99 конец
       строки, и блок без своего order встал бы первым перед "Главная",
       оторванным от профиля -- визуально не туда. Проще и надёжнее просто
       прятать на десктопе. */
    #mainNav .mystery-timer-block {
        display: none !important;
    }

    /* .main-nav не задаёт align-items, значит по умолчанию stretch -- все
       флекс-дети тянутся под высоту самого высокого. Раньше topbar-user-wrap
       был соседом .topbar, а не .main-nav, и на кнопки-пункты это не влияло;
       теперь он внутри той же строки, и его аватар 48px+паддинги тянул
       компактные .nav-btn под свою высоту. Центрируем вместо растяжения. */
    #mainNav {
        align-items: center !important;
    }
}

.hero-banner {
    background: rgba(3, 5, 9, .94) !important;
    border-color: rgba(56, 104, 192, .1) !important;
    padding: 28px 28px 22px !important;
    gap: 22px !important;
    box-shadow: 0 4px 60px rgba(0, 0, 0, .6), inset 0 0 100px rgba(56, 104, 192, .03) !important;
}

.hero-banner::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse 70% 70% at 105% 115%, rgba(56, 104, 192, .07), transparent) !important;
    pointer-events: none !important;
}

.hero-banner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(56, 104, 192, .6) 40%, transparent) !important;
    pointer-events: none !important;
}

.hero-copy h1 {
    font-family: 'Syne', sans-serif !important;
    font-size: clamp(32px, 4.5vw, 54px) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-transform: uppercase !important;
    line-height: .96 !important;
    color: #fff !important;
    max-width: none !important;
}

.hero-copy h1 .h1-digit {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
}

.hero-badge {
    border-radius: 0 !important;
    letter-spacing: .2em !important;
    font-size: 9px !important;
    padding: 5px 12px !important;
    background: linear-gradient(135deg, rgba(56, 104, 192, .9), rgba(8, 60, 140, .85)) !important;
}

.hero-promo-row {
    display: grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    padding: 0 !important;
}

.promo-stat {
    background: rgba(5, 7, 13, .8) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}

.promo-stat:last-child {
    border-right: none !important;
}

.promo-stat span {
    font-size: 9px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .3) !important;
    margin-bottom: 6px !important;
}

.promo-stat strong {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #58a6ff !important;
    font-family: 'Oswald', sans-serif !important;
    letter-spacing: .01em !important;
}

.lobby-action-btn {
    border-radius: 0 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: 12px !important;
}

.lobby-deposit-main {
    font-size: 13px !important;
    letter-spacing: .04em !important;
}

@media (max-width: 520px) {
    .hero-promo-row {
        grid-template-columns:1fr 1fr !important;
    }

    .promo-stat:last-child {
        grid-column: 1 / -1 !important;
        border-right: none !important;
        border-top: 1px solid rgba(255, 255, 255, .06) !important;
    }

    .hero-copy h1 {
        font-size: 28px !important;
    }

    .promo-stat strong {
        font-size: clamp(12px, 3.8vw, 20px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@keyframes burger-item-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-nav.is-open > * {
    animation: burger-item-in .22s cubic-bezier(.2, .9, .4, 1) both;
}

.main-nav.is-open > *:nth-child(1) {
    animation-delay: 0ms;
}

.main-nav.is-open > *:nth-child(2) {
    animation-delay: 45ms;
}

.main-nav.is-open > *:nth-child(3) {
    animation-delay: 90ms;
}

.main-nav.is-open > *:nth-child(4) {
    animation-delay: 135ms;
}

.main-nav.is-open > *:nth-child(5) {
    animation-delay: 180ms;
}

.main-nav.is-open > *:nth-child(6) {
    animation-delay: 225ms;
}

.pf-card {
    margin-top: 14px;
    padding: 18px !important;
}

.pf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.pf-lock {
    font-size: 18px;
    line-height: 1;
}

.pf-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    flex: 1;
}

.pf-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.pf-btn-sm {
    background: rgba(56, 104, 192, .1);
    border: 1px solid rgba(56, 104, 192, .3);
    color: var(--accent);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.pf-btn-sm:hover {
    background: rgba(56, 104, 192, .2);
}

.pf-btn-sm:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#profileView .profile-areas-layout {
    display: block !important;
    grid-template-columns:none !important;
    gap: 0 !important;
    margin-top: 14px !important;
}

#profileView .profile-split-card {
    display: grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows:auto !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#profileView .profile-split-pane {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: clamp(380px, 62vh, 580px) !important;
    max-height: clamp(380px, 62vh, 580px) !important;
    padding: 16px 18px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .04) inset !important;
    overflow: hidden !important;
}

body.theme-light-red #profileView .profile-split-pane {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07), 0 1px 0 rgba(255, 255, 255, .9) inset !important;
}

#profileView .profile-split-pane > .panel-title {
    flex: 0 0 auto !important;
    margin-bottom: 12px !important;
}

#profileView .profile-split-divider {
    display: none !important;
}

#profileView .profile-split-history .combined-history-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    padding-right: 2px !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
}

#profileView .profile-split-inventory .inventory-grid {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    display: grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    grid-auto-rows: min-content !important;
    gap: 8px !important;
    padding: 8px !important;
    align-content: start !important;
    box-sizing: border-box !important;
}

#profileView .profile-split-inventory .inventory-head-wrapper {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 2px !important;
    margin-bottom: 12px !important;
}

#profileView .profile-split-inventory .inventory-actions-header {
    display: flex !important;
    gap: 12px !important;
}

#profileView .profile-split-inventory .inventory-actions-header button {
    flex: 0 0 auto !important;
}

#profileView .profile-split-inventory .inventory-card {
    min-height: 0 !important;
    height: auto !important;
}

@media (max-width: 760px) {
    #profileView .profile-split-card {
        grid-template-columns:minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
    }

    #profileView .profile-split-pane {
        height: clamp(300px, 46vh, 440px) !important;
        max-height: clamp(300px, 46vh, 440px) !important;
    }
}

.profile-history-accordion {
    margin-bottom: 14px !important;
}

.profile-history-toggle {
    width: 100% !important;
    min-height: 64px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025)) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .16) !important;
    cursor: pointer !important;
    text-align: left !important;
}

.profile-history-toggle:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .04)) !important;
}

.profile-history-toggle-main {
    display: grid !important;
    gap: 3px !important;
}

.profile-history-toggle-kicker {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: var(--muted) !important;
}

.profile-history-toggle-label {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.profile-history-toggle-caret {
    font-size: 20px !important;
    color: var(--muted) !important;
    transition: transform .2s ease !important;
    flex-shrink: 0 !important;
}

.profile-history-toggle[aria-expanded="true"] .profile-history-toggle-caret {
    transform: rotate(180deg) !important;
}

.profile-history-panel {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1) !important;
}

.profile-history-panel.is-open {
    max-height: 2000px !important;
}

.profile-history-panel-inner {
    padding: 16px 18px !important;
    margin-top: 10px !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
}

.profile-top-row {
    display: grid !important;
    grid-template-columns:1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.profile-bestdrop-card {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.profile-bestdrop-body {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 54px !important;
    /* Карточка тянется до высоты соседней «Статистики» (строка грида общая), и
       дроп в ней прижимался к верху, оставляя пустоту снизу. Отдаём телу всю
       свободную высоту — содержимое встаёт по центру, и пустое место читается
       как поле, а не как обрезанный блок. */
    flex: 1 !important;
}

/* Размер дропа. Высоту строки задаёт «Статистика аккаунта» — у неё свой
   честный набор счётчиков, — а картинка подстраивается под неё. Раньше было
   наоборот: картинка в 152px растягивала всю строку, и под счётчиками
   статистики оставалось 47 пикселей пустоты. Числа с замера на 1400: карточка
   статистики по содержимому 195, из них на картинку остаётся 124. */
.profile-bestdrop-item-image {
    width: 124px !important;
    height: 124px !important;
}

.profile-bestdrop-item-emoji {
    font-size: 96px !important;
}

.profile-bestdrop-item-name {
    font-size: 22px !important;
}

.profile-stats-card {
    padding: 16px 18px !important;
    /* Колонкой — чтобы сетку счётчиков можно было растянуть на всю карточку
       (ниже flex: 1). */
    display: flex !important;
    flex-direction: column !important;
}

.profile-stats-body {
    display: grid !important;
    grid-template-columns:1fr 1fr !important;
    gap: 10px 16px !important;
    /* Счётчиков бывает четыре, а бывает шесть — у того, кто играл во все
       режимы. При четырёх высоту строки задаёт уже соседний «Лучший дроп», и
       остаток собирался пустотой под последним счётчиком. Растягиваем сетку
       на карточку и ставим счётчики по центру: остаток делится поровну и
       читается как поле, а не как обрыв. */
    flex: 1 !important;
    align-content: center !important;
}

@media (max-width: 600px) {
    .profile-top-row {
        grid-template-columns:1fr !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
        /* В одну колонку карточки встают друг под другом, и общей строки грида
           у них больше нет — «Лучший дроп» оказывался вдвое ниже статистики
           (122 против 216). Равные строки подтягивают обе к высоте большей. */
        grid-auto-rows: 1fr !important;
    }

    .profile-bestdrop-card, .profile-stats-card {
        padding: 14px 15px !important;
    }

    .profile-stats-body {
        grid-template-columns:1fr 1fr !important;
        gap: 8px 12px !important;
    }

    .profile-stats-body > div > div:last-child {
        font-size: 18px !important;
    }

    /* На телефоне карточка тоже тянется до высоты «Статистики», и 40px в ней
       терялись. Держим предмет и название крупнее, но с запасом: тело карточки
       на узком экране ~148px, за него выходить нельзя. */
    .profile-bestdrop-item-image {
        width: 104px !important;
        height: 104px !important;
    }

    .profile-bestdrop-item-emoji {
        font-size: 82px !important;
    }

    .profile-bestdrop-item-name {
        font-size: 19px !important;
    }
}

body.theme-light-red {
    --line: rgba(4, 6, 12, .24);
}

body.theme-light-red .ops-surface, body.theme-light-red .ops-card {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
}

body.theme-light-red .combined-history-row, body.theme-light-red .ops-list-soft, body.theme-light-red .ops-promo-row, body.theme-light-red .ops-item-row, body.theme-light-red .ops-case-row-extended {
    border-color: rgba(4, 6, 12, .22) !important;
}

body.theme-light-red .combined-history-icon {
    background: rgba(4, 6, 12, .05) !important;
}

body.theme-light-red .theme-toggle-single {
    background: #FFFFFF !important;
    border-color: rgba(4, 6, 12, .24) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08) !important;
}

.profile-user-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.profile-avatar-large {
    flex: 0 0 auto !important;
}

.profile-user-block > div:not(.profile-avatar-large) {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
}

.profile-username, .profile-user-block .muted {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.profile-wallet-area {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    min-width: 0 !important;
}

.profile-wallet-area .profile-balance-box {
    min-width: 0 !important;
}

.profile-wallet-area .profile-balance-box strong {
    white-space: nowrap !important;
}

@media (max-width: 479px) {
    .profile-hero {
        gap: 8px !important;
    }

    #profileAvatarLarge {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex-basis: 48px !important;
        font-size: 20px !important;
        flex-shrink: 0 !important;
    }

    .profile-wallet-area {
        gap: 8px !important;
    }

    .profile-wallet-area .profile-balance-box strong {
        font-size: 16px !important;
    }
}

@media (max-width: 479px) {
    .lobby-actions {
        gap: 6px !important;
    }

    .lobby-action-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 9px 6px !important;
        font-size: 11px !important;
        letter-spacing: .02em !important;
    }

    .lobby-deposit-main {
        flex: 1 1 0 !important;
        font-size: 11px !important;
    }
}

#profileView .profile-split-inventory .inventory-card {
    aspect-ratio: 8/5 !important;
    min-height: unset !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    position: relative !important;
    min-height: 0 !important;
}

#profileView .profile-split-inventory .inventory-card .inventory-card-top {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 6px 4px !important;
    text-align: center !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#profileView .profile-split-inventory .inventory-card .inventory-image {
    width: 52% !important;
    height: auto !important;
    max-height: 55% !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

#profileView .profile-split-inventory .inventory-card .item-emoji.big {
    font-size: clamp(26px, 3.5vw, 38px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Безымянная обёртка вокруг имени и цены (см. разметку карточки в app.js) лежит
   в колоночном флексе с align-items:center, то есть её ширина равна ширине
   содержимого. У .item-name стоял nowrap, обёртка раздувалась до длины всего
   названия, а width:100% у имени считался от неё же — обрезать было нечего, и
   длинное имя вылезало за края карточки. Предел ставим обёртке, и только тогда
   обрезка ниже вообще начинает работать. */
#profileView .profile-split-inventory .inventory-card .inventory-card-top > div:not(.item-emoji) {
    width: 100% !important;
    min-width: 0 !important;
}

#profileView .profile-split-inventory .inventory-card .item-name {
    font-size: 10px !important;
    font-weight: 700 !important;
    /* Две строки, а не многоточие в одну: у цветных к названию дописывается
       мутация («Garama and Madundung [Yin Yang]»), и обрезка с конца съедала бы
       ровно то, чем цветной отличается от обычного. Худшее имя в каталоге —
       39 символов, «Hopilikalika Hopilikalako [Radioactive]». */
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 2px 0 0 !important;
    letter-spacing: .02em !important;
}

#profileView .profile-split-inventory .inventory-card .item-value {
    font-size: 9px !important;
    text-align: center !important;
    margin: 1px 0 0 !important;
    opacity: .75 !important;
}

#profileView .profile-split-inventory .inventory-card .inventory-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px 6px 6px !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
}

#profileView .profile-split-inventory .inventory-card .item-source {
    display: block !important;
    text-align: center !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    margin-bottom: 3px !important;
}

#profileView .profile-split-inventory .inventory-card .sell-btn {
    width: 100% !important;
    margin: 0 !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.loot-chip, .loot-chip-static {
    cursor: default !important;
    pointer-events: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.loot-chip:hover, .loot-chip-static:hover {
    transform: none !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.loot-chip strong {
    min-width: 0 !important;
    overflow: hidden !important;
}

.loot-chip em {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

#caseLootPreview.loot-preview {
    grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)) !important;
}

/* Прежний телефонный блок для #caseLootPreview удалён: он делал квадраты
   только на узких экранах и теперь дрался с общей сеткой — возвращал
   центрированную раскладку с мелким артом. */

body.theme-light-red .loot-chip {
    background: #FFFFFF !important;
}

body.theme-light-red .loot-chip strong {
    color: #04060b !important;
}

body.theme-light-red .loot-chip em {
    color: #3A5A8A !important;
}

body.theme-light-red .case-section-title {
    color: #04060b !important;
}

.topbar {
    width: auto !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
}

@media (max-width: 760px) {
    .deposit-terminal, .deposit-fullscreen-shell .deposit-terminal {
        grid-template-columns:1fr !important;
        margin: 14px !important;
    }

    .deposit-menu-tabs {
        grid-template-columns:repeat(4, 1fr) !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(56, 104, 192, .16) !important;
    }

    .deposit-menu-tab {
        min-height: 58px !important;
    }

    .deposit-menu-tab-icon {
        font-size: 20px !important;
    }

    .deposit-menu-tab strong {
        font-size: 8px !important;
    }

    .deposit-terminal-main {
        padding: 16px !important;
        min-width: 0 !important;
    }

    .deposit-terminal .payment-gui, .deposit-terminal .payment-methods-group {
        display: grid !important;
        grid-template-columns:1fr !important;
        gap: 10px !important;
    }

    .deposit-terminal .payment-method-btn {
        min-height: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .deposit-fullscreen-head h3 {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .deposit-terminal-head {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .deposit-terminal-head .panel-title {
        display: none !important;
    }
}

@media (min-width: 761px) {
    .deposit-terminal-bottom {
        grid-template-columns:1fr 1fr !important;
    }

    .deposit-terminal-bottom .deposit-terminal-pay-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

.ops-reset-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.ops-reset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
}

body.theme-light-red .ops-reset-card {
    background: #fff;
    border-color: rgba(4, 6, 12, .12);
}

.ops-reset-card-danger {
    border-color: rgba(56, 104, 192, .45);
    background: rgba(56, 104, 192, .06);
}

.ops-reset-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
}

.ops-reset-desc {
    font-size: 12px;
    line-height: 1.45;
    flex: 1;
}

.ops-reset-card .danger-btn {
    align-self: flex-start;
    padding: 8px 16px;
}

.ops-reset-result {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(34, 197, 94, .4);
    background: rgba(34, 197, 94, .1);
    color: #16a34a;
    font-weight: 700;
}

.ops-reset-card-player .ops-input {
    width: 100%;
}

.ops-reset-player-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.danger-btn.small {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1;
}

.ops-support-message {
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    margin-bottom: 8px;
}

body.theme-light-red .ops-support-message {
    background: #fff;
    border-color: rgba(4, 6, 12, .12);
}

.ops-support-message.is-unread {
    border-left: 3px solid var(--accent);
}

.ops-support-message.is-replied {
    border-left: 3px solid #16a34a;
}

.ops-support-msg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ops-support-msg-head strong {
    color: var(--text);
}

.ops-support-msg-head small {
    color: var(--muted);
    font-size: 12px;
}

.ops-support-msg-head .ops-support-delete {
    margin-left: auto;
}

.ops-support-msg-text {
    color: var(--text);
    word-break: break-word;
}

.ops-support-msg-reply {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    color: var(--text);
    word-break: break-word;
}

@keyframes ldr-fill-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .65;
    }
}

@keyframes ldr-idle-bob {
    0%, 100% {
        transform: translateX(-50%) translateY(0px);
    }
    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

@keyframes ldr-climb-bounce {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
    }
    25% {
        transform: translateX(-50%) scaleY(0.8) scaleX(1.15);
    }
    55% {
        transform: translateX(-50%) scaleY(1.15) scaleX(0.9);
    }
    80% {
        transform: translateX(-50%) scaleY(0.95) scaleX(1.03);
    }
    100% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
    }
}

@keyframes ldr-char-fall {
    0% {
        transform: translateX(-50%) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: translateX(-70%) rotate(-25deg);
    }
    50% {
        transform: translateX(-30%) rotate(40deg);
        opacity: 0.9;
    }
    80% {
        transform: translateX(-60%) rotate(-15deg) translateY(180px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(-50%) rotate(-10deg) translateY(260px);
        opacity: 0;
    }
}

@keyframes ldr-hazard-drop {
    0% {
        top: -64px;
        opacity: 0;
        transform: rotate(-10deg) scale(0.7);
    }
    12% {
        opacity: 1;
        transform: rotate(6deg) scale(1);
    }
    55% {
        transform: rotate(-8deg) scale(1.05);
    }
    80% {
        opacity: 0.88;
        transform: rotate(12deg) scale(1.12);
    }
    100% {
        top: 65%;
        opacity: 0;
        transform: rotate(-5deg) scale(0.5);
    }
}

.lsb-stones {
    flex-shrink: 0;
    width: 44px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lsb-stones svg {
    width: 100%;
    height: 100%;
}

.lsb-body {
    min-width: 0;
}

.lsb-name {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

.lsb-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
    margin-top: 2px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .lsb-stones {
        display: none;
    }
}

.lvc-icon {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: background .22s ease, transform .22s ease !important;
}

.lvc-icon svg {
    width: 80% !important;
    height: 80% !important;
    display: block !important;
}

.lvc-icon-easy {
    background: rgba(74, 222, 128, .08) !important;
    border: 1px solid rgba(74, 222, 128, .18) !important;
}

.lvc-icon-medium {
    background: rgba(148, 163, 184, .08) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
}

.lvc-icon-heavy {
    background: rgba(56, 104, 192, .08) !important;
    border: 1px solid rgba(56, 104, 192, .22) !important;
}

.lvc-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    align-items: center !important;
}

.lvc-name {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, .65) !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    line-height: 1 !important;
    font-family: var(--font-main, 'Syne', sans-serif) !important;
}

.lvc-subtitle {
    font-size: 10px !important;
    color: rgba(255, 255, 255, .28) !important;
    letter-spacing: .02em !important;
    line-height: 1.1 !important;
}

body.theme-light-red .lvc-name {
    color: rgba(0, 0, 0, .6) !important;
}

body.theme-light-red .lvc-subtitle {
    color: rgba(0, 0, 0, .35) !important;
}

@media (max-width: 480px) {
    .lvc-icon {
        width: 40px !important;
        height: 40px !important;
    }
}

#lsrHeightControls {
    display: none;
}

body.is-owner #lsrHeightControls {
    display: flex;
}

.nav-btn[data-nav].is-closed {
    position: relative !important;
    overflow: hidden !important;
    pointer-events: none !important;
    color: rgba(255, 255, 255, .35) !important;
}

.nav-btn[data-nav].is-closed.ops-can-open {
    pointer-events: auto !important;
    color: var(--text) !important;
}

.nav-btn[data-nav].is-closed::after {
    content: attr(data-ribbon-text) !important;
    position: absolute !important;
    left: -55% !important;
    right: -55% !important;
    top: 50% !important;
    margin-top: -11px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    background: #1E4082 !important;
    color: #fff !important;
    font-family: Impact, 'Arial Black', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.45em !important;
    text-transform: uppercase !important;
    transform: rotate(-21deg) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 20 !important;
}

.nav-btn[data-nav].is-closed.ops-can-open::after {
    opacity: 0.5 !important;
}

/* Та же лента «ЗАКРЫТО», что у закрытых разделов в навигации, — на кнопке
   пополнения. Кнопка не просто гаснет: серое читается как «сломалось», а
   не «закрыто». */
/* Селектор с html body — не красота, а необходимость: палитра красит
   кнопку правилом body.palette-blue .primary-btn с !important, и оно
   специфичнее простого .lobby-action-btn.is-closed. */
html body .lobby-action-btn.is-closed {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    /* !important обязателен: у .primary-btn свой градиент и своя тень, и
       без этого синяя лента ложится на синюю кнопку — не прочитать. */
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
    /* Прячем собственную подпись кнопки (и эмодзи вместе с ней): лента
       проходит ровно по ней, и два текста внахлёст не читаются. На
       табличке остаётся одно слово — «ЗАКРЫТО». */
    font-size: 0 !important;
    min-height: 46px;
}

/* Владельцу закрытая кнопка остаётся кликабельной — он и закрывал. */
.lobby-action-btn.is-closed.ops-can-open {
    pointer-events: auto;
}

.lobby-action-btn.is-closed::after {
    content: attr(data-ribbon-text);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -55%;
    right: -55%;
    top: 50%;
    margin-top: -10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #1E4082;
    color: #fff;
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    transform: rotate(-12deg);
    pointer-events: none;
    z-index: 20;
}

.lobby-action-btn.is-closed.ops-can-open::after {
    opacity: .5;
}

/* Вкладка закрытой категории депозита: метку «закрыто» дописывает app.js,
   здесь только помечаем состояние. Саму вкладку не гасим — см. правило
   .deposit-cat-tab:disabled ниже. */
.deposit-cat-tab.is-closed-tab {
    border-color: rgba(255, 107, 107, .28);
}

.deposit-cat-tab-closed {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 107, 107, .18);
    color: #ff9c9c;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ops-staff-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ops-staff-perm {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, .12));
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
    transition: border-color .15s, background .15s;
}

.ops-staff-perm:hover {
    border-color: rgba(88, 166, 255, .55);
}

.ops-staff-perm:has(input:checked) {
    border-color: #58A6FF;
    background: rgba(88, 166, 255, .12);
}

.ops-staff-perm input {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    accent-color: #58A6FF;
    cursor: pointer;
}

.ops-staff-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ops-staff-row.is-off {
    opacity: .5;
}

.ops-staff-row .ops-staff-login {
    font-weight: 700;
    min-width: 120px;
}

.ops-staff-row .ops-staff-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.ops-staff-tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(88, 166, 255, .14);
    border: 1px solid rgba(88, 166, 255, .3);
    font-size: 12px;
}

.ops-closures-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ops-closure-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, .07));
}

.ops-closure-row:last-child {
    border-bottom: none;
}

.ops-closure-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ops-closure-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.ops-closure-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.ops-closure-desc {
    font-size: 12px;
    margin-top: 2px;
    opacity: .6;
}

.ops-closure-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ops-closure-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ops-closure-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .12);
    border-radius: 24px;
    cursor: pointer;
    transition: background .2s;
}

.ops-closure-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}

.ops-closure-switch input:checked + .ops-closure-slider {
    background: #1E4082;
}

.ops-closure-switch input:checked + .ops-closure-slider::before {
    transform: translateX(20px);
}

.ops-closure-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    width: 48px;
    text-align: right;
    flex-shrink: 0;
}

.ops-closure-status.is-open {
    color: #22c55e;
}

.ops-closure-status.is-closed-label {
    color: #1E4082;
}

.char-prev-states {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.char-state-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.char-state-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
}

.char-state-btn.is-active {
    background: rgba(30, 64, 130, .25);
    border-color: rgba(30, 64, 130, .55);
    color: #fff;
}

body.theme-light-red .char-state-btn {
    border-color: rgba(0, 0, 0, .12);
    background: rgba(0, 0, 0, .04);
    color: rgba(0, 0, 0, .5);
}

body.theme-light-red .char-state-btn.is-active {
    background: rgba(30, 64, 130, .12);
    border-color: rgba(30, 64, 130, .4);
    color: #1E4082;
}

.char-prev-outer {
    overflow: auto;
    border-radius: 10px;
    background: #111;
    background-image: linear-gradient(45deg, #1c1c1c 25%, transparent 25%),
    linear-gradient(-45deg, #1c1c1c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1c1c1c 75%),
    linear-gradient(-45deg, transparent 75%, #1c1c1c 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #141414;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
}

body.theme-light-red .char-prev-outer {
    background-color: #e8e8e8;
    background-image: linear-gradient(45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(-45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d8d8d8 75%),
    linear-gradient(-45deg, transparent 75%, #d8d8d8 75%);
    border-color: rgba(0, 0, 0, .1);
}

.char-prev-viewport {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 120px;
    transition: min-height .2s, width .2s;
}

#opsCharCanvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

.char-prev-scale-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.char-scale-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.char-scale-btn:hover {
    background: rgba(255, 255, 255, .14);
}

body.theme-light-red .char-scale-btn {
    border-color: rgba(0, 0, 0, .15);
    background: rgba(0, 0, 0, .05);
    color: #222;
}

.char-prev-track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.char-prev-fill {
    height: 100%;
    background: #1E4082;
    border-radius: 3px;
    transition: width .15s;
}

body.theme-light-red .char-prev-track {
    background: rgba(0, 0, 0, .1);
}

#withdrawalModal .deposit-fullscreen-shell {
    max-width: 700px;
    /* Was also overflow:auto (inherited from the shared .deposit-fullscreen-
       shell base rule), stacking a SECOND scroll region on top of
       .withdrawal-modal-body's own overflow-y:auto below -- scrolling deep
       into the item list, then hitting the end of the shell's own scroll
       with more content still below, was disorienting. Flex column so the
       head stays fixed-height and the body flex-grows to fill the rest,
       with only the body actually scrolling.
       !important is required here: a later unscoped `.deposit-fullscreen-
       shell { overflow-y: auto !important; ... }` rule (styles.css ~10884,
       applies to every theme, not theme-scoped despite sitting near
       theme-scoped rules) otherwise wins regardless of this selector's
       higher specificity -- confirmed live: with few withdrawable items the
       shell's content happened to already fit under 92vh so the conflict
       was invisible, but it silently returns the double-scroll the moment
       content is tall enough (more items, wager block shown, etc.). */
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

#withdrawalModal .deposit-fullscreen-head {
    flex: 0 0 auto;
}

.withdrawal-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px 24px;
    overflow-y: auto;
    /* flex:1 1 auto + min-height:0 is what actually makes overflow-y:auto
       take effect inside a flex column instead of the body just growing
       past its flex parent's height (the classic flex-child-ignores-
       overflow trap). */
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Шаги вывода ─────────────────────────────────────────────────────────────
   Раньше всё шло подряд одним весом и сетка инвентаря съедала экран целиком.
   Теперь каждый шаг — отдельная карточка с номером, а выполненный подсвечен. */
.wdr-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: rgba(255, 255, 255, .022);
    transition: border-color .18s, background .18s;
}

.wdr-step.is-done {
    border-color: rgba(88, 166, 255, .34);
    background: rgba(88, 166, 255, .045);
}

.wdr-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wdr-step-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .22);
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, .62);
    transition: all .18s;
}

.wdr-step.is-done .wdr-step-num {
    border-color: transparent;
    background: var(--accent, #3868c0);
    color: #fff;
    font-size: 0;
}

.wdr-step.is-done .wdr-step-num::after {
    content: '✓';
    font-size: 14px;
    line-height: 1;
}

.wdr-step-titles {
    min-width: 0;
}

.wdr-step-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
}

.wdr-step-sub {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .5);
}

.withdrawal-selected-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    font-size: 13px;
}

.withdrawal-selected-bar #withdrawalSelectedCount {
    font-weight: 700;
    color: #fff;
}

.withdrawal-selected-bar .muted {
    color: var(--accent, #3868c0);
    font-weight: 700;
}

.withdrawal-selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.wdr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
}

.wdr-chip-remove {
    cursor: pointer;
    opacity: .55;
    font-size: 11px;
    transition: opacity .12s;
}

.wdr-chip-remove:hover {
    opacity: 1;
    color: var(--accent, #3868c0);
}

/* Липкая панель действия — итог и кнопка не уезжают за край длинной сетки. */
.wdr-actionbar {
    position: sticky;
    bottom: -28px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px -28px -28px;
    padding: 14px 28px 20px;
    /* Фон сплошной. Раньше здесь стоял градиент «панель 62% → прозрачность»:
       пока полоса была низкой (190px), просвечивал только её верхний край. Но
       внутри этой же полосы живёт аккордеон истории заявок, и с раскрытой
       историей она вырастает до 510px — то есть до 60% экрана, из которых
       верхняя треть прозрачная. Сквозь неё просвечивала сетка инвентаря, а
       поверх карточек шли даты и суммы из истории: именно это и выглядит как
       «всё поплыло». */
    background: var(--panel, #0f1620);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* Мягкий переход к содержимому оставляем, но узкой полоской НАД панелью, а не
   прозрачной частью самой панели. */
.wdr-actionbar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    background: linear-gradient(to top, var(--panel, #0f1620), rgba(15, 22, 32, 0));
    pointer-events: none;
}

/* Раньше сумма и кнопка стояли в ряд (сумма слева, кнопка справа) -- на
   обычной ширине (не только на мобильном, для которого ниже был отдельный
   @media) двухстрочный текст суммы рядом с крупной кнопкой читался криво.
   Колонка теперь всегда: сумма сверху, кнопка на всю ширину под ней --
   мобильный @media ниже, который делал ровно то же самое, стал не нужен. */
.wdr-actionbar-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.wdr-actionbar-sum {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.wdr-actionbar-count {
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, .55);
}

.wdr-actionbar-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Глобальная замена «TOK» на иконку задаёт ей размер в em и сдвиг базовой
   линии — на крупном полужирном числе монета отваливалась вбок и вниз,
   и сумма читалась как два не связанных куска. Здесь размер фиксированный,
   отступы снимаем: выравнивание держит сам flex. */
.wdr-actionbar-value .token-inline-icon {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: 0;
    flex: 0 0 auto;
}

.wdr-actionbar .withdrawal-submit-btn {
    width: 100%;
}

.wdr-actionbar-hint {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .48);
}

.wdr-actionbar-hint.is-blocking {
    color: #ffb454;
}

/* Обмен перед выводом: строка над историей, когда выбрано больше, чем
   можно поставить за день, и окно с превью обмена. */
.wdr-swap-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(255, 180, 84, .08);
    border: 1px solid rgba(255, 180, 84, .28);
}

.wdr-swap-offer-text {
    flex: 1 1 220px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
}

.wdr-swap-offer .ghost-btn {
    flex: 0 0 auto;
}

.wdr-swap-card {
    width: min(520px, 94vw);
}

.wdr-swap-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #777);
}

.wdr-swap-sum {
    color: var(--text, #e0e0e0);
    text-transform: none;
}

.wdr-swap-grid .wdr-item-card {
    cursor: default;
}

.wdr-swap-grid .wdr-item-card:hover {
    transform: none;
}

.wdr-swap-change {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

/* ─── История заявок -- внутри .wdr-actionbar, под подсказкой ника ─────
   Заголовок и панель без своей рамки/фона/тени -- голый текст внутри уже
   готового фона каркаса (.wdr-actionbar), не отдельная коробка поверх
   коробки. Только сами строки заявок в списке выглядят карточками, тем же
   приёмом, что уже проверенный .wdr-chip. */
.wdr-history {
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 4px 12px;
}

.wdr-history-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    cursor: pointer;
    text-align: left;
}

.wdr-history-head-label {
    font-size: 13px;
    font-weight: 700;
}

.wdr-history-head-caret {
    font-size: 15px;
    color: var(--muted);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.wdr-history-head[aria-expanded="true"] .wdr-history-head-caret {
    transform: rotate(180deg);
}

.wdr-history-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
}

.wdr-history-body.is-open {
    max-height: 320px;
}

.wdr-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.wdr-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
}

.wdr-history-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.wdr-history-top, .wdr-history-bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.wdr-history-items {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.wdr-history-status {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--muted);
}

.wdr-history-row.status-pending .wdr-history-status { color: #ffd36e; }
.wdr-history-row.status-approved .wdr-history-status { color: #55e08a; }
.wdr-history-row.status-rejected .wdr-history-status { color: #ff6b6b; }
.wdr-history-row.status-cancelled .wdr-history-status { color: var(--muted); }

.wdr-history-value {
    font-size: 11.5px;
    font-weight: 700;
    color: #e8c840;
}

.wdr-history-date {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .48);
    overflow-wrap: anywhere;
}

.wdr-history-actions {
    display: flex;
    flex-shrink: 0;
}

.wdr-history-locked {
    font-size: 11.5px;
    flex-shrink: 0;
    max-width: 130px;
    text-align: right;
}

@media (max-width: 560px) {
    .withdrawal-modal-body {
        padding: 14px 16px 20px;
    }

    .wdr-actionbar {
        margin: 4px -16px -20px;
        padding: 12px 16px 16px;
        bottom: -20px;
    }
}

.withdrawal-inventory-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px;
    /* No own max-height/overflow -- this used to be its own scroll region
       nested inside .withdrawal-modal-body, which is ALSO scrollable, which
       is ALSO nested inside .deposit-fullscreen-shell's own overflow:auto --
       three scroll containers stacked for one modal. Now it just grows with
       its content and the single outer .withdrawal-modal-body scroll (see
       below) handles everything, including the grid. */
    padding: 2px 2px 4px;
}

/* На телефоне — ровно три предмета в ряд. Через auto-fill не выходило: при
   ширине сетки 342px три колонки по 108px с двумя зазорами требуют 344px,
   не хватало двух пикселей, и раскладка сваливалась на две штуки во всю
   ширину. */
@media (max-width: 560px) {
    .withdrawal-inventory-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}

.wdr-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px 8px;
    border-radius: 16px;
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 2px solid rgba(255, 255, 255, .08);
    transition: border-color .15s, background .15s, transform .12s;
    position: relative;
    text-align: center;
    user-select: none;
}

.wdr-item-card:hover {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

.wdr-item-card.is-selected {
    border-color: var(--accent, #3868c0);
    background: rgba(56, 104, 192, .10);
}

.wdr-item-media {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wdr-item-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
}

.wdr-item-emoji {
    font-size: 36px;
}

.wdr-item-name {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    word-break: break-word;
    color: #fff;
}

.wdr-item-value {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

.wdr-item-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #3868c0);
    color: #fff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    opacity: 0;
    transition: opacity .15s;
}

.wdr-item-card.is-selected .wdr-item-check {
    opacity: 1;
}

.withdrawal-contact-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.withdrawal-contact-row .ops-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.withdrawal-contact-row .ops-input {
    width: 100%;
    padding: 0 16px;
    height: 48px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    transition: border-color .15s;
}

.withdrawal-contact-row .ops-input:focus {
    border-color: rgba(255, 255, 255, .3);
}

.withdrawal-contact-row .ops-input::placeholder {
    color: rgba(255, 255, 255, .28);
    font-weight: 400;
}

.withdrawal-queue-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* No margin-bottom -- this and .withdrawal-queue-booked are both direct
       children of #wdrStepTime, which is a .wdr-step and already applies its
       own flex `gap` between its children. Each block ALSO carrying its own
       margin-bottom stacked on top of that gap, double-spacing every step
       boundary in the modal -- a real contributor to the "too tall, need to
       scroll a lot" complaint, not just visual polish. */
}

.withdrawal-queue-block .ops-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.withdrawal-queue-note {
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
    line-height: 1.4;
}

.withdrawal-queue-windows {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.withdrawal-queue-window-btn {
    flex: 1 1 150px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}

.withdrawal-queue-window-btn:hover {
    border-color: rgba(255, 255, 255, .3);
}

/* День — первой строкой и крупно. Раньше дата шла мелким хвостом после
   времени, и игроки читали «14:09-14:12» как сегодняшнее время, приходили не в
   тот день и жаловались, что бот не написал. */
.withdrawal-queue-window-day {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
}

.withdrawal-queue-window-time {
    font-size: 13px;
    font-weight: 600;
    opacity: .72;
    font-variant-numeric: tabular-nums;
}

/* Подпись особого окна: какие брейнроты в нём выдают. Без неё непонятно,
   почему времён вдруг стало меньше, чем обычно. */
.withdrawal-queue-window-only {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 3px;
    color: var(--lux, #ffd76a);
}

.withdrawal-queue-window-btn.is-selected {
    background: rgba(76, 175, 129, .15);
    border-color: #4CAF81;
    color: #6ddc9e;
    box-shadow: 0 0 0 1px rgba(76, 175, 129, .3);
}

.withdrawal-queue-booked {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(76, 175, 129, .08);
    border: 1px solid rgba(76, 175, 129, .3);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 0;
}

.withdrawal-queue-booked-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.withdrawal-queue-booked-title {
    font-size: 14px;
    font-weight: 800;
    color: #6ddc9e;
    margin-bottom: 4px;
}

.withdrawal-queue-booked-detail {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.withdrawal-queue-booked-explain {
    font-size: 12px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.45;
    margin-bottom: 8px;
}

.withdrawal-queue-booked-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    line-height: 1.4;
}

/* Выдача по расписанию: строка «мест нет на сегодня — поставим на завтра»
   и расписание выбранных петов (строка на окно: время, петы этого окна).
   Цвета — те же, что у брони и окон этого шага. */
#withdrawDayInfo.is-shifted {
    padding: 9px 12px;
    background: rgba(255, 215, 106, .07);
    border-left: 3px solid var(--lux, #ffd76a);
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
}

.wdr-tl {
    display: flex;
    flex-direction: column;
}

.wdr-tl-day {
    margin: 6px 0 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6ddc9e;
}

.wdr-tl-day:first-child {
    margin-top: 0;
}

.wdr-tl-day.is-manual {
    color: var(--lux, #ffd76a);
}

.wdr-tl-day.is-off {
    color: #ff8a8a;
}

.wdr-tl-row {
    display: grid;
    grid-template-columns: 98px 1fr;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.wdr-tl-row.is-off {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
}

.wdr-tl-time {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wdr-tl-row.is-manual .wdr-tl-time {
    color: var(--lux, #ffd76a);
}

.wdr-tl-pets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    min-width: 0;
}

.wdr-tl-pet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.wdr-tl-img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

.wdr-tl-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    overflow-wrap: break-word;
}

.wdr-tl-row.is-off .wdr-tl-pet {
    opacity: .6;
}

.wdr-tl-why {
    margin-left: auto;
    font-size: 12px;
    color: #ff8a8a;
    text-align: right;
}

.wdr-tl + .withdrawal-queue-note,
.wdr-tl .withdrawal-queue-note {
    margin-top: 6px;
}

.withdrawal-submit-btn {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent, #3868c0), #2a54a0);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .32);
    transition: filter .15s, transform .12s;
}

.withdrawal-submit-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.withdrawal-submit-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.inv-pending-wrap {
    position: relative;
}

.inv-pending-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 18, 0.82);
    color: var(--accent, #3868c0);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 4px;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.inv-action-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}

.inv-withdraw-btn {
    white-space: nowrap;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border, rgba(255, 255, 255, .15));
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, .55));
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    line-height: 1.4;
}

.inv-withdraw-btn:hover {
    border-color: var(--accent, #3868c0);
    color: var(--accent, #3868c0);
    background: rgba(56, 104, 192, .06);
}

#profileView .profile-split-inventory .inventory-card {
    aspect-ratio: unset !important;
    min-height: 148px !important;
}

#profileView .profile-split-inventory .inventory-card .inv-action-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
}

#profileView .profile-split-inventory .inventory-card .sell-btn, #profileView .profile-split-inventory .inventory-card .inv-withdraw-btn, #profileView .profile-split-inventory .inventory-card .case-voucher-claim-btn {
    width: 100% !important;
    margin: 0 !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#profileView .profile-split-inventory .inventory-grid {
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important;
}

@media (min-width: 761px) and (max-width: 1180px) {
    #profileView .profile-split-inventory .inventory-grid {
        grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    #profileView .profile-split-inventory .inventory-grid {
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    #profileView .profile-split-inventory .inventory-card {
        min-height: 130px !important;
    }
}

@media (max-width: 480px) {
    #profileView .profile-split-inventory .inventory-grid {
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    #profileView .profile-split-inventory .inventory-card {
        min-height: 118px !important;
    }

    #profileView .profile-split-inventory .inventory-card .inventory-image {
        width: 44% !important;
    }

    #profileView .profile-split-inventory .inventory-card .item-name {
        font-size: 9px !important;
    }

    #profileView .profile-split-inventory .inventory-card .item-value {
        font-size: 8px !important;
    }

    #profileView .profile-split-inventory .inventory-card .sell-btn, #profileView .profile-split-inventory .inventory-card .inv-withdraw-btn, #profileView .profile-split-inventory .inventory-card .case-voucher-claim-btn {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
}

@media (max-width: 360px) {
    #profileView .profile-split-inventory .inventory-grid {
        gap: 5px !important;
    }

    #profileView .profile-split-inventory .inventory-card {
        min-height: 108px !important;
    }
}

.free-case-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(47, 125, 255, .18) 0%, rgba(116, 68, 255, .14) 100%);
    border: 1px solid rgba(88, 166, 255, .28);
    box-shadow: 0 0 0 1px rgba(88, 166, 255, .08) inset, 0 14px 32px rgba(0, 0, 0, .22);
    margin-bottom: 14px;
}

.free-case-banner-media {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
}

.free-case-banner-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.free-case-banner-emoji {
    font-size: 28px;
    line-height: 1;
}

.free-case-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.free-case-banner-kicker {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(88, 166, 255, .9);
}

.free-case-banner-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.free-case-banner-sub {
    font-size: 12px;
    color: var(--muted);
}

.free-case-banner-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.free-case-claim-btn {
    min-width: 100px;
    white-space: nowrap;
}

.free-case-countdown {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 480px) {
    .free-case-banner {
        flex-wrap: wrap;
        gap: 12px;
    }

    .free-case-banner-action {
        width: 100%;
    }

    .free-case-claim-btn, .free-case-countdown {
        width: 100%;
        text-align: center;
    }
}

.item-emoji.big {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 96px !important;
    height: 96px !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    font-size: 64px !important;
}

.inventory-card:has(.inv-pending-wrap):hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--line) !important;
    cursor: default !important;
}

.inventory-card:has(.inv-pending-wrap) button {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.inventory-card:has(.inv-pending-wrap) button:hover {
    transform: none !important;
    background: inherit !important;
    box-shadow: none !important;
}

.inventory-card .item-value {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #e8d87a !important;
}

#rouletteModal > div {
    margin-top: -30px !important;
}

@media (min-width: 861px) {
}

.pool-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 10px;
}

.pool-subtab {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.pool-subtab:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--text);
}

.pool-subtab.is-active {
    background: rgba(127, 77, 255, .18);
    border-color: var(--accent, #7f4dff);
    color: var(--accent, #7f4dff);
}

.pool-subpane {
    display: none;
}

.pool-subpane.is-active {
    display: block;
}

.pool-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.pool-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.pool-toggle-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--accent, #7f4dff);
    cursor: pointer;
}

.pool-btn-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pool-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-height: 440px;
    overflow-y: auto;
    padding: 2px 0 8px;
}

.pool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: var(--surface2, rgba(255, 255, 255, .05));
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
    text-align: center;
}

.pool-card:hover {
    background: var(--surface3, rgba(255, 255, 255, .09));
}

.pool-card-on {
    border-color: var(--accent, #7f4dff) !important;
    background: rgba(127, 77, 255, .12) !important;
}

.pool-card input[type="checkbox"] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    accent-color: var(--accent, #7f4dff);
    cursor: pointer;
}

.pool-card-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.pool-card-emoji {
    font-size: 36px;
    line-height: 1;
}

.pool-card-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}

.pool-card-val {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
}

.pool-card-he {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 5px;
    width: 100%;
}

.pool-card-he-input {
    width: 100%;
    min-width: 0;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    color: var(--text);
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

.pool-card-he-input::-webkit-inner-spin-button, .pool-card-he-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.pool-card-he-input:focus {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .10);
}

.pool-card-he-label {
    font-size: 10px;
    color: var(--muted);
    flex-shrink: 0;
}

.profile-wager-bar {
    background: var(--panel-2, rgba(4, 6, 12, .85));
    border: 1px solid rgba(var(--accent-rgb, 56, 104, 192), .24);
    border-radius: 14px;
    padding: 14px 16px 12px;
    margin-top: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.profile-wager-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.profile-wager-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.profile-wager-pct {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-3, #58A6FF);
    background: rgba(var(--accent-rgb, 56, 104, 192), .14);
    border: 1px solid rgba(var(--accent-rgb, 56, 104, 192), .3);
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.4;
}

.profile-wager-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}

.profile-wager-fill {
    height: 100%;
    min-width: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-2, #2A54A0), var(--accent-3, #58A6FF));
    box-shadow: 0 0 12px rgba(var(--accent-3-rgb, 88, 166, 255), .55);
    transition: width .45s cubic-bezier(.2, .8, .2, 1);
    position: relative;
    overflow: hidden;
}

.profile-wager-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: translateX(-100%);
    animation: profileWagerShine 2.4s ease-in-out infinite;
}

@keyframes profileWagerShine {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(220%); }
}

.profile-wager-bottom {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.profile-wager-nums {
    font-size: 14px;
    font-weight: 800;
    color: var(--text, #fff);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.profile-wager-hint {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    text-align: right;
}

.profile-wager-bar.is-complete {
    border-color: rgba(91, 232, 138, .32);
}

.profile-wager-bar.is-complete .profile-wager-fill {
    background: linear-gradient(90deg, #1e9e52, #5be88a);
    box-shadow: 0 0 12px rgba(91, 232, 138, .5);
}

.profile-wager-bar.is-complete .profile-wager-pct {
    color: #5be88a;
    background: rgba(91, 232, 138, .14);
    border-color: rgba(91, 232, 138, .35);
}

.profile-wager-bar.is-complete .profile-wager-hint {
    color: #5be88a;
    font-weight: 700;
}

.primary-btn.is-inactive {
    opacity: .45;
    filter: grayscale(.3);
    cursor: not-allowed;
}

.primary-btn.is-inactive:hover {
    filter: grayscale(.3) !important;
    transform: none !important;
    box-shadow: none !important;
}

.partner-revoked-notice {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text, #fff);
    background: rgba(148, 163, 184, .1);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.partner-history {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.partner-history-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.partner-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.partner-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .03);
    border-radius: 10px;
    font-size: 12.5px;
}

.partner-history-date {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.partner-history-delta {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.partner-history-delta.is-positive {
    color: #5be88a;
}

.partner-history-delta.is-negative {
    color: #58A6FF;
}

.withdrawal-wager-block {
    background: rgba(255, 100, 30, .08);
    border: 1px solid rgba(255, 100, 30, .25);
    border-radius: 10px;
    padding: 12px 14px;
    /* No margin-bottom -- direct child of .withdrawal-modal-body, which
       already applies its own flex `gap` between children (see the same
       fix on .withdrawal-queue-block/.withdrawal-queue-booked above). */
}

.wager-block-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.wager-block-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.wager-block-title {
    font-size: 13px;
    font-weight: 700;
    color: #ff8855;
    margin-bottom: 3px;
}

.wager-block-detail {
    font-size: 12px;
    color: var(--muted, #888);
}

.wager-block-track {
    margin-top: 0;
    margin-bottom: 0;
}

.wager-config-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.wager-user-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 12px;
}

.wager-user-result {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 14px;
    margin-top: 8px;
}

.wager-user-info {
    font-size: 13px;
    margin-bottom: 12px;
    color: var(--text);
}

.wager-user-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wager-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wager-reset-btn {
    color: #58A6FF !important;
    border-color: rgba(88, 166, 255, .3) !important;
}

.wager-reset-btn:hover {
    background: rgba(88, 166, 255, .1) !important;
}

.ced-lock-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}

.ced-lock-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ced-lock-icon {
    font-size: 16px;
    line-height: 1;
    transition: transform .15s, filter .15s;
    filter: grayscale(1) opacity(.45);
}

.ced-lock-wrap:hover .ced-lock-icon {
    filter: none;
    transform: scale(1.15);
}

.ced-loot-row-locked .ced-lock-icon {
    filter: none;
}

.ced-loot-row-locked {
    background: rgba(255, 180, 50, .04);
    border-left: 2px solid rgba(255, 180, 50, .35);
}

.ced-loot-row-locked .ced-loot-item-name {
    color: rgba(255, 200, 80, .85);
}

.free-case-card-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.free-case-card-ready {
    color: #5be88a !important;
    font-weight: 700;
}

.deposit-case-labeldeposit-case-label {
    color: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.deposit-case-label.deposit-case-ready {
    color: #5be88a !important;
}

body.palette-blue {
    background: radial-gradient(circle at 15% 0%, rgba(56, 104, 192, .07) 0%, transparent 25%), linear-gradient(180deg, #0d0e10 0%, #0a0b0c 60%, #080909 100%) !important;
}

body.palette-blue .sidebar-live {
    background: linear-gradient(180deg, rgba(13, 14, 17, .98), rgba(9, 10, 12, .95)) !important;
}

body.palette-blue .topbar {
    background: rgba(12, 13, 15, .97) !important;
}

body.palette-blue .sidebar-title, body.palette-blue .panel-title, body.palette-blue .section-head span, body.palette-blue .eyebrow, body.palette-blue .live-user, body.palette-blue .case-subtitle, body.palette-blue .promo-stat span, body.palette-blue .ops-label, body.palette-blue .loot-value, body.palette-blue .item-value, body.palette-blue .target-value, body.palette-blue .roulette-value, body.palette-blue .speed-toggle-btn, body.palette-blue .deposit-menu-tab, body.palette-blue .profile-tab, body.palette-blue .ops-tab, body.palette-blue .payment-currency-btn, body.palette-blue .speed-btn, body.palette-blue .ladder-stat-card span, body.palette-blue .dash-stat-label, body.palette-blue .dash-section-title, body.palette-blue .dash-system-label {
    color: #4e728f !important;
}

body.palette-blue .promo-stat strong, body.palette-blue .profile-balance-box strong, body.palette-blue .dash-stat-value {
    color: #7BAFD4 !important;
}

body.palette-blue .case-price {
    color: #FFFFFF !important;
}

body.palette-blue .brand-btn {
    background: rgba(56, 104, 192, .08) !important;
    border-color: rgba(56, 104, 192, .24) !important;
    color: #58A6FF !important;
}

body.palette-blue .brand-btn:hover {
    background: rgba(56, 104, 192, .14) !important;
    border-color: rgba(56, 104, 192, .45) !important;
    box-shadow: 0 0 22px rgba(56, 104, 192, .18) !important;
}

body.palette-blue .nav-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 4px 16px rgba(56, 104, 192, .30) !important;
}

body.palette-blue .ghost-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border-color: transparent !important;
}

body.palette-blue .primary-btn, body.palette-blue #openSelectedCaseBtn, body.palette-blue #createBattleBtn, body.palette-blue #startFuseBtn, body.palette-blue #openLadderModeBtn, body.palette-blue .deposit-terminal-pay-btn, body.palette-blue .ops-stretch-btn, body.palette-blue .ops-save-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .36) !important;
}

body.palette-blue .primary-btn:hover, body.palette-blue #openSelectedCaseBtn:hover, body.palette-blue #createBattleBtn:hover, body.palette-blue #startFuseBtn:hover {
    box-shadow: 0 10px 32px rgba(56, 104, 192, .48) !important;
}

body.palette-blue .primary-btn:active {
    box-shadow: 0 4px 14px rgba(56, 104, 192, .32) !important;
}

body.palette-blue .wheel-sell-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 18px rgba(56, 104, 192, .3) !important;
}

body.palette-blue .wheel-sell-btn:hover {
    box-shadow: 0 10px 26px rgba(56, 104, 192, .42) !important;
}

body.palette-blue .speed-toggle-pill {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 16px rgba(56, 104, 192, .3) !important;
}

body.palette-blue .speed-btn.active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 6px 18px rgba(56, 104, 192, .28) !important;
}

body.palette-blue .hero-badge {
    background: linear-gradient(135deg, rgba(56, 104, 192, .9), rgba(42, 84, 160, .8)) !important;
}

body.palette-blue .hero-banner::after {
    background: linear-gradient(90deg, transparent, #3868C0 40%, transparent) !important;
}

body.palette-blue .case-card::after {
    background: linear-gradient(90deg, transparent, #3868C0, transparent) !important;
}

body.palette-blue .case-card:hover {
    border-color: rgba(56, 104, 192, .38) !important;
    box-shadow: 0 0 36px rgba(56, 104, 192, .14), 0 8px 28px rgba(0, 0, 0, .6) !important;
}

body.palette-blue .case-ribbon {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #7BAFD4 !important;
}

body.palette-blue .case-section-title::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(56, 104, 192, .65), rgba(255, 255, 255, 0)) !important;
}

body.palette-blue .promo-stat:hover {
    border-color: rgba(56, 104, 192, .32) !important;
    box-shadow: 0 0 20px rgba(56, 104, 192, .1) !important;
}

body.palette-blue .lobby-promo-card .promo-stat {
    border-color: rgba(56, 104, 192, .14) !important;
}

body.palette-blue input:focus, body.palette-blue select:focus, body.palette-blue textarea:focus, body.palette-blue .ops-input:focus, body.palette-blue .ops-select:focus, body.palette-blue .auth-input:focus {
    border-color: rgba(56, 104, 192, .5) !important;
    box-shadow: 0 0 18px rgba(56, 104, 192, .12), 0 0 0 3px rgba(56, 104, 192, .08) !important;
}

body.palette-blue input::placeholder, body.palette-blue textarea::placeholder, body.palette-blue .ops-input::placeholder, body.palette-blue .auth-input::placeholder {
    color: #4e728f !important;
}

body.palette-blue .loot-card:hover, body.palette-blue .inventory-card:hover, body.palette-blue .target-card:hover, body.palette-blue .related-card:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    box-shadow: 0 6px 22px rgba(56, 104, 192, .1) !important;
}

body.palette-blue .target-card.active {
    outline: 2px solid rgba(56, 104, 192, .4) !important;
    background: rgba(56, 104, 192, .1) !important;
}

body.palette-blue .loot-chip:hover {
    border-color: rgba(56, 104, 192, .28) !important;
}

body.palette-blue .live-card:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    box-shadow: 0 4px 20px rgba(56, 104, 192, .1) !important;
}

body.palette-blue .user-box:hover {
    border-color: rgba(56, 104, 192, .32) !important;
    background: rgba(56, 104, 192, .06) !important;
}

body.palette-blue .modal-card {
    background: linear-gradient(180deg, #111316, #0c0d0e) !important;
    border-color: rgba(56, 104, 192, .14) !important;
}

body.palette-blue .icon-close:hover {
    background: rgba(56, 104, 192, .16) !important;
    border-color: rgba(56, 104, 192, .3) !important;
}

body.palette-blue .roulette-pointer {
    background: linear-gradient(180deg, #7BAFD4, #fff, #3868C0) !important;
    box-shadow: 0 0 22px rgba(56, 104, 192, .55) !important;
}

body.palette-blue .roulette-item.near-top-focus {
    box-shadow: 0 0 0 1px rgba(56, 104, 192, .3), 0 0 28px rgba(56, 104, 192, .2) !important;
}

body.palette-blue .roulette-near-top-flash {
    background: radial-gradient(circle at 50% 50%, rgba(56, 104, 192, .22), transparent 32%), radial-gradient(circle at 50% 18%, rgba(110, 165, 215, .18), transparent 28%) !important;
}

body.palette-blue .ops-surface::before {
    background: linear-gradient(90deg, transparent, rgba(56, 104, 192, .12), transparent) !important;
}

body.palette-blue .ops-inline-chip {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #7BAFD4 !important;
}

body.palette-blue .ops-ladder-mode-btn:hover {
    border-color: rgba(56, 104, 192, .3) !important;
}

body.palette-blue .ops-ladder-mode-btn.is-active {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(56, 104, 192, .28) !important;
}

body.palette-blue .deposit-fullscreen-shell {
    background: linear-gradient(180deg, #111316, #0c0d0e) !important;
}

body.palette-blue .deposit-menu-tab:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #fff !important;
}

body.palette-blue .deposit-menu-tab.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(42, 84, 160, .12)) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58A6FF !important;
}

body.palette-blue .payment-method-btn:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    background: rgba(56, 104, 192, .06) !important;
}

body.palette-blue .payment-method-icon {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
}

body.palette-blue .payment-method-action {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
    color: #7BAFD4 !important;
}

body.palette-blue .payment-currency-btn.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(42, 84, 160, .12)) !important;
    border-color: rgba(56, 104, 192, .35) !important;
    color: #58A6FF !important;
}

body.palette-blue .support-inapp-shell {
    background: linear-gradient(180deg, #111316, #0c0d0e) !important;
}

body.palette-blue .support-floating-btn {
    background: linear-gradient(135deg, #3868C0, #2A54A0) !important;
    box-shadow: 0 8px 24px rgba(56, 104, 192, .4) !important;
}

body.palette-blue .support-floating-btn:hover {
    box-shadow: 0 12px 32px rgba(56, 104, 192, .52) !important;
}

body.palette-blue .support-message-bot {
    background: rgba(56, 104, 192, .1) !important;
    border-color: rgba(56, 104, 192, .2) !important;
}

body.palette-blue .support-message-user {
    background: rgba(56, 104, 192, .18) !important;
    border-color: rgba(56, 104, 192, .28) !important;
}

body.palette-blue .auth-card {
    background: linear-gradient(180deg, rgba(14, 15, 18, .99), rgba(10, 11, 13, .98)) !important;
}

body.palette-blue .auth-badge {
    background: rgba(56, 104, 192, .16) !important;
    color: #7BAFD4 !important;
}

body.palette-blue .profile-tab:hover, body.palette-blue .ops-tab:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #fff !important;
}

body.palette-blue .profile-tab.is-active, body.palette-blue .ops-tab.is-active {
    background: linear-gradient(135deg, rgba(56, 104, 192, .2), rgba(42, 84, 160, .12)) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58A6FF !important;
}

body.palette-blue .toast {
    background: #04101e !important;
    border-color: rgba(56, 104, 192, .22) !important;
}

body.palette-blue .theme-toggle-single:hover {
    border-color: rgba(56, 104, 192, .3) !important;
}

body.palette-blue .case-group.pick-one-group .case-card {
    background: linear-gradient(180deg, rgba(56, 104, 192, .3), rgba(15, 30, 80, .92)) !important;
    border-color: rgba(88, 138, 208, .34) !important;
}

body.palette-blue .pick-one-card {
    background: linear-gradient(180deg, rgba(56, 104, 192, .28), rgba(15, 30, 70, .9)) !important;
    border-color: rgba(88, 138, 208, .3) !important;
}

body.palette-blue .pick-card.revealed {
    background: linear-gradient(180deg, rgba(20, 50, 100, .96), rgba(8, 18, 40, .98)) !important;
    border-color: rgba(88, 138, 208, .28) !important;
    box-shadow: 0 8px 22px rgba(56, 104, 192, .12) !important;
}

body.palette-blue .hidden-drop, body.palette-blue .hidden-pick-card {
    background: linear-gradient(180deg, rgba(56, 104, 192, .18), rgba(255, 255, 255, .04)) !important;
    border-color: rgba(56, 104, 192, .2) !important;
}

body.palette-blue .compact.selected {
    outline: 2px solid rgba(56, 104, 192, .5) !important;
}

body.palette-blue .dash-top-item:hover {
    border-color: rgba(56, 104, 192, .3) !important;
    background: rgba(56, 104, 192, .05) !important;
}

body.palette-blue .combined-history-row:hover {
    background: rgba(56, 104, 192, .04) !important;
}

body.palette-blue .ghost-btn.accent {
    border-color: rgba(56, 104, 192, .3) !important;
    color: #7BAFD4 !important;
}

body.palette-blue ::-webkit-scrollbar-thumb {
    background: rgba(56, 104, 192, .22) !important;
}

body.palette-blue ::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 104, 192, .42) !important;
}

body.palette-grey {
    background: radial-gradient(circle at 15% 0%, rgba(114, 136, 160, .12) 0%, transparent 30%), radial-gradient(circle at 85% 5%, rgba(83, 97, 117, .08) 0%, transparent 25%), linear-gradient(180deg, #0a0c0f 0%, #060709 60%, #040506 100%) !important;
}

body.palette-grey .sidebar-live {
    background: linear-gradient(180deg, rgba(12, 14, 17, .98), rgba(6, 7, 9, .95)) !important;
}

body.palette-grey .topbar {
    background: rgba(8, 9, 11, .97) !important;
}

body.palette-grey .sidebar-title, body.palette-grey .panel-title, body.palette-grey .section-head span, body.palette-grey .eyebrow, body.palette-grey .live-user, body.palette-grey .case-subtitle, body.palette-grey .promo-stat span, body.palette-grey .ops-label, body.palette-grey .loot-value, body.palette-grey .item-value, body.palette-grey .target-value, body.palette-grey .roulette-value, body.palette-grey .speed-toggle-btn, body.palette-grey .deposit-menu-tab, body.palette-grey .profile-tab, body.palette-grey .ops-tab, body.palette-grey .payment-currency-btn, body.palette-grey .speed-btn, body.palette-grey .ladder-stat-card span, body.palette-grey .dash-stat-label, body.palette-grey .dash-section-title, body.palette-grey .dash-system-label {
    color: #607080 !important;
}

body.palette-grey .promo-stat strong, body.palette-grey .profile-balance-box strong, body.palette-grey .dash-stat-value {
    color: #A8BCCF !important;
}

body.palette-grey .case-price {
    color: #FFFFFF !important;
}

body.palette-grey .brand-btn {
    background: rgba(114, 136, 160, .08) !important;
    border-color: rgba(114, 136, 160, .24) !important;
    color: #7288A0 !important;
}

body.palette-grey .brand-btn:hover {
    background: rgba(114, 136, 160, .14) !important;
    border-color: rgba(114, 136, 160, .45) !important;
    box-shadow: 0 0 22px rgba(114, 136, 160, .14) !important;
}

body.palette-grey .nav-btn.active {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    box-shadow: 0 4px 16px rgba(114, 136, 160, .28) !important;
}

body.palette-grey .ghost-btn.active {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    border-color: transparent !important;
}

body.palette-grey .primary-btn, body.palette-grey #openSelectedCaseBtn, body.palette-grey #createBattleBtn, body.palette-grey #startFuseBtn, body.palette-grey #openLadderModeBtn, body.palette-grey .deposit-terminal-pay-btn, body.palette-grey .ops-stretch-btn, body.palette-grey .ops-save-btn {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    box-shadow: 0 6px 22px rgba(114, 136, 160, .28) !important;
}

body.palette-grey .primary-btn:hover, body.palette-grey #openSelectedCaseBtn:hover, body.palette-grey #createBattleBtn:hover, body.palette-grey #startFuseBtn:hover {
    box-shadow: 0 10px 32px rgba(114, 136, 160, .38) !important;
}

body.palette-grey .primary-btn:active {
    box-shadow: 0 4px 14px rgba(114, 136, 160, .24) !important;
}

body.palette-grey .wheel-sell-btn {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    box-shadow: 0 6px 18px rgba(114, 136, 160, .24) !important;
}

body.palette-grey .wheel-sell-btn:hover {
    box-shadow: 0 10px 26px rgba(114, 136, 160, .34) !important;
}

body.palette-grey .speed-toggle-pill {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    box-shadow: 0 6px 16px rgba(114, 136, 160, .24) !important;
}

body.palette-grey .speed-btn.active {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    box-shadow: 0 6px 18px rgba(114, 136, 160, .22) !important;
}

body.palette-grey .hero-badge {
    background: linear-gradient(135deg, rgba(114, 136, 160, .85), rgba(83, 97, 117, .75)) !important;
}

body.palette-grey .hero-banner::after {
    background: linear-gradient(90deg, transparent, #7288A0 40%, transparent) !important;
}

body.palette-grey .case-card::after {
    background: linear-gradient(90deg, transparent, #7288A0, transparent) !important;
}

body.palette-grey .case-card:hover {
    border-color: rgba(114, 136, 160, .38) !important;
    box-shadow: 0 0 36px rgba(114, 136, 160, .12), 0 8px 28px rgba(0, 0, 0, .5) !important;
}

body.palette-grey .case-ribbon {
    background: rgba(114, 136, 160, .1) !important;
    border-color: rgba(114, 136, 160, .2) !important;
    color: #A8BCCF !important;
}

body.palette-grey .case-section-title::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(114, 136, 160, .55), rgba(255, 255, 255, 0)) !important;
}

body.palette-grey .promo-stat:hover {
    border-color: rgba(114, 136, 160, .28) !important;
    box-shadow: 0 0 20px rgba(114, 136, 160, .08) !important;
}

body.palette-grey .lobby-promo-card .promo-stat {
    border-color: rgba(114, 136, 160, .14) !important;
}

body.palette-grey input:focus, body.palette-grey select:focus, body.palette-grey textarea:focus, body.palette-grey .ops-input:focus, body.palette-grey .ops-select:focus, body.palette-grey .auth-input:focus {
    border-color: rgba(114, 136, 160, .5) !important;
    box-shadow: 0 0 18px rgba(114, 136, 160, .1), 0 0 0 3px rgba(114, 136, 160, .07) !important;
}

body.palette-grey input::placeholder, body.palette-grey textarea::placeholder, body.palette-grey .ops-input::placeholder, body.palette-grey .auth-input::placeholder {
    color: #607080 !important;
}

body.palette-grey .loot-card:hover, body.palette-grey .inventory-card:hover, body.palette-grey .target-card:hover, body.palette-grey .related-card:hover {
    border-color: rgba(114, 136, 160, .28) !important;
    box-shadow: 0 6px 22px rgba(114, 136, 160, .08) !important;
}

body.palette-grey .target-card.active {
    outline: 2px solid rgba(114, 136, 160, .38) !important;
    background: rgba(114, 136, 160, .08) !important;
}

body.palette-grey .loot-chip:hover {
    border-color: rgba(114, 136, 160, .24) !important;
}

body.palette-grey .live-card:hover {
    border-color: rgba(114, 136, 160, .28) !important;
    box-shadow: 0 4px 20px rgba(114, 136, 160, .08) !important;
}

body.palette-grey .user-box:hover {
    border-color: rgba(114, 136, 160, .28) !important;
    background: rgba(114, 136, 160, .05) !important;
}

body.palette-grey .modal-card {
    background: linear-gradient(180deg, #0d0f12, #080a0c) !important;
    border-color: rgba(114, 136, 160, .12) !important;
}

body.palette-grey .icon-close:hover {
    background: rgba(114, 136, 160, .14) !important;
    border-color: rgba(114, 136, 160, .28) !important;
}

body.palette-grey .roulette-pointer {
    background: linear-gradient(180deg, #A8BCCF, #fff, #7288A0) !important;
    box-shadow: 0 0 22px rgba(114, 136, 160, .45) !important;
}

body.palette-grey .roulette-item.near-top-focus {
    box-shadow: 0 0 0 1px rgba(114, 136, 160, .28), 0 0 28px rgba(114, 136, 160, .16) !important;
}

body.palette-grey .roulette-near-top-flash {
    background: radial-gradient(circle at 50% 50%, rgba(114, 136, 160, .18), transparent 32%), radial-gradient(circle at 50% 18%, rgba(168, 188, 207, .14), transparent 28%) !important;
}

body.palette-grey .ops-surface::before {
    background: linear-gradient(90deg, transparent, rgba(114, 136, 160, .1), transparent) !important;
}

body.palette-grey .ops-inline-chip {
    background: rgba(114, 136, 160, .1) !important;
    border-color: rgba(114, 136, 160, .2) !important;
    color: #A8BCCF !important;
}

body.palette-grey .ops-ladder-mode-btn:hover {
    border-color: rgba(114, 136, 160, .26) !important;
}

body.palette-grey .ops-ladder-mode-btn.is-active {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(114, 136, 160, .22) !important;
}

body.palette-grey .deposit-fullscreen-shell {
    background: linear-gradient(180deg, #0d0f12, #080a0c) !important;
}

body.palette-grey .deposit-menu-tab:hover {
    border-color: rgba(114, 136, 160, .26) !important;
    color: #fff !important;
}

body.palette-grey .deposit-menu-tab.is-active {
    background: linear-gradient(135deg, rgba(114, 136, 160, .18), rgba(83, 97, 117, .1)) !important;
    border-color: rgba(114, 136, 160, .36) !important;
    color: #7288A0 !important;
}

body.palette-grey .payment-method-btn:hover {
    border-color: rgba(114, 136, 160, .26) !important;
    background: rgba(114, 136, 160, .05) !important;
}

body.palette-grey .payment-method-icon {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
}

body.palette-grey .payment-method-action {
    background: rgba(114, 136, 160, .08) !important;
    border-color: rgba(114, 136, 160, .18) !important;
    color: #A8BCCF !important;
}

body.palette-grey .payment-currency-btn.is-active {
    background: linear-gradient(135deg, rgba(114, 136, 160, .18), rgba(83, 97, 117, .1)) !important;
    border-color: rgba(114, 136, 160, .3) !important;
    color: #7288A0 !important;
}

body.palette-grey .support-inapp-shell {
    background: linear-gradient(180deg, #0d0f12, #080a0c) !important;
}

body.palette-grey .support-floating-btn {
    background: linear-gradient(135deg, #7288A0, #536175) !important;
    box-shadow: 0 8px 24px rgba(114, 136, 160, .32) !important;
}

body.palette-grey .support-floating-btn:hover {
    box-shadow: 0 12px 32px rgba(114, 136, 160, .42) !important;
}

body.palette-grey .support-message-bot {
    background: rgba(114, 136, 160, .08) !important;
    border-color: rgba(114, 136, 160, .18) !important;
}

body.palette-grey .support-message-user {
    background: rgba(114, 136, 160, .14) !important;
    border-color: rgba(114, 136, 160, .24) !important;
}

body.palette-grey .auth-card {
    background: linear-gradient(180deg, rgba(13, 15, 18, .99), rgba(7, 9, 11, .98)) !important;
}

body.palette-grey .auth-badge {
    background: rgba(114, 136, 160, .14) !important;
    color: #A8BCCF !important;
}

body.palette-grey .profile-tab:hover, body.palette-grey .ops-tab:hover {
    border-color: rgba(114, 136, 160, .26) !important;
    color: #fff !important;
}

body.palette-grey .profile-tab.is-active, body.palette-grey .ops-tab.is-active {
    background: linear-gradient(135deg, rgba(114, 136, 160, .18), rgba(83, 97, 117, .1)) !important;
    border-color: rgba(114, 136, 160, .36) !important;
    color: #7288A0 !important;
}

body.palette-grey .toast {
    background: #0a0c0e !important;
    border-color: rgba(114, 136, 160, .2) !important;
}

body.palette-grey .theme-toggle-single:hover {
    border-color: rgba(114, 136, 160, .26) !important;
}

body.palette-grey .case-group.pick-one-group .case-card {
    background: linear-gradient(180deg, rgba(114, 136, 160, .22), rgba(30, 35, 45, .9)) !important;
    border-color: rgba(150, 170, 185, .3) !important;
}

body.palette-grey .pick-one-card {
    background: linear-gradient(180deg, rgba(114, 136, 160, .2), rgba(28, 32, 40, .88)) !important;
    border-color: rgba(150, 170, 185, .26) !important;
}

body.palette-grey .pick-card.revealed {
    background: linear-gradient(180deg, rgba(50, 60, 75, .95), rgba(25, 30, 38, .97)) !important;
    border-color: rgba(150, 170, 185, .24) !important;
    box-shadow: 0 8px 22px rgba(114, 136, 160, .1) !important;
}

body.palette-grey .hidden-drop, body.palette-grey .hidden-pick-card {
    background: linear-gradient(180deg, rgba(114, 136, 160, .14), rgba(255, 255, 255, .03)) !important;
    border-color: rgba(114, 136, 160, .18) !important;
}

body.palette-grey .compact.selected {
    outline: 2px solid rgba(114, 136, 160, .44) !important;
}

body.palette-grey .dash-top-item:hover {
    border-color: rgba(114, 136, 160, .26) !important;
    background: rgba(114, 136, 160, .04) !important;
}

body.palette-grey .combined-history-row:hover {
    background: rgba(114, 136, 160, .03) !important;
}

body.palette-grey .ghost-btn.accent {
    border-color: rgba(114, 136, 160, .28) !important;
    color: #A8BCCF !important;
}

body.palette-grey ::-webkit-scrollbar-thumb {
    background: rgba(114, 136, 160, .2) !important;
}

body.palette-grey ::-webkit-scrollbar-thumb:hover {
    background: rgba(114, 136, 160, .38) !important;
}

body.palette-blue {
    --accent: #3868c0;
    --accent-2: #2a54a0;
    --accent-3: #7bafd4;
    --muted: #4e728f;
    --line: rgba(100, 160, 220, .12);
}

body.palette-grey {
    --accent: #7288a0;
    --accent-2: #536175;
    --accent-3: #a8bccf;
    --muted: #607080;
    --line: rgba(114, 136, 160, .12);
}

@keyframes live-card-glow-blue {
    0% {
        box-shadow: 0 0 0 2px rgba(56, 104, 192, .9), 0 0 32px rgba(56, 104, 192, .6);
    }
    100% {
        box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
    }
}

@keyframes live-card-glow-grey {
    0% {
        box-shadow: 0 0 0 2px rgba(114, 136, 160, .9), 0 0 32px rgba(114, 136, 160, .6);
    }
    100% {
        box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
    }
}

body.palette-blue .live-card-incoming {
    animation-name: live-card-pop, live-card-glow-blue !important;
    border-color: rgba(56, 104, 192, .8) !important;
}

body.palette-grey .live-card-incoming {
    animation-name: live-card-pop, live-card-glow-grey !important;
    border-color: rgba(114, 136, 160, .8) !important;
}

body.palette-blue .deposit-terminal-pay-btn:hover {
    box-shadow: 0 10px 32px rgba(56, 104, 192, .48) !important;
}

body.palette-grey .deposit-terminal-pay-btn:hover {
    box-shadow: 0 10px 32px rgba(114, 136, 160, .35) !important;
}

body.palette-blue .deposit-terminal-input::placeholder {
    color: #4e728f !important;
}

body.palette-grey .deposit-terminal-input::placeholder {
    color: #607080 !important;
}

body.palette-blue .deposit-terminal .payment-method-hint {
    color: #6a92b0 !important;
}

body.palette-grey .deposit-terminal .payment-method-hint {
    color: #8090a0 !important;
}

body.palette-blue .combined-history-row span, body.palette-blue .combined-history-row small, body.palette-blue .payment-history-row span, body.palette-blue .payment-history-row small, body.palette-blue .ops-battle-history-row span, body.palette-blue .ops-battle-history-row small {
    color: #4e728f !important;
}

body.palette-grey .combined-history-row span, body.palette-grey .combined-history-row small, body.palette-grey .payment-history-row span, body.palette-grey .payment-history-row small, body.palette-grey .ops-battle-history-row span, body.palette-grey .ops-battle-history-row small {
    color: #607080 !important;
}

body.palette-blue .combined-history-row:hover {
    background: rgba(56, 104, 192, .05) !important;
}

body.palette-grey .combined-history-row:hover {
    background: rgba(114, 136, 160, .04) !important;
}

.pet-deposit-panel {
    padding: 18px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pet-deposit-panel-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pet-deposit-panel-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

.pet-deposit-panel-sub {
    font-size: 13px;
    color: var(--muted);
}

.pet-deposit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pet-deposit-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pet-deposit-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.pet-deposit-input {
    width: 100%;
    max-width: 340px;
}

.pet-deposit-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

.pet-deposit-search {
    flex: 1;
    min-width: 110px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    color: var(--text);
    font-size: 12px;
    padding: 5px 9px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}

.pet-deposit-search::placeholder {
    color: rgba(255, 255, 255, .25);
}

.pet-deposit-search:focus {
    border-color: var(--accent);
}

.pet-deposit-price-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pet-deposit-price-input {
    width: 62px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    color: var(--text);
    font-size: 12px;
    padding: 5px 7px;
    outline: none;
    transition: border-color .15s;
    -moz-appearance: textfield;
}

.pet-deposit-price-input::-webkit-outer-spin-button, .pet-deposit-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pet-deposit-price-input::placeholder {
    color: rgba(255, 255, 255, .2);
}

.pet-deposit-price-input:focus {
    border-color: var(--accent);
}

.pet-deposit-price-sep {
    color: rgba(255, 255, 255, .3);
    font-size: 12px;
    flex-shrink: 0;
}

.pet-deposit-sort-toggle {
    display: flex;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
}

.pet-sort-btn {
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, .1);
    color: var(--muted);
    font-size: 13px;
    padding: 4px 9px;
    cursor: pointer;
    transition: background .12s, color .12s;
    line-height: 1;
}

.pet-sort-btn:last-child {
    border-right: none;
}

.pet-sort-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--text);
}

.pet-sort-btn.is-active {
    background: var(--accent);
    color: #fff;
}

.pet-deposit-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 18px 8px;
    color: rgba(255, 255, 255, .3);
    font-size: 13px;
}

.pet-deposit-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
}

.pet-deposit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: .15s border-color, .15s background, .15s transform;
    text-align: center;
}

.pet-deposit-card:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

.pet-deposit-card.is-selected {
    border-color: var(--accent) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 0 14px var(--accent);
}

.pet-deposit-card.is-special-offer {
    border-color: rgba(255, 181, 69, .45);
}

.pet-deposit-card.is-special-offer.is-selected {
    border-color: #ffb545 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 0 14px #ffb545;
}

.pet-deposit-special-badge {
    background: linear-gradient(135deg, #ffb545, #b5650a);
    color: #1a1002;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.3;
    padding: 2px 6px;
    border-radius: 999px;
    max-width: 100%;
    box-shadow: 0 2px 6px rgba(181, 101, 10, .4);
}

.pet-deposit-card-emoji {
    font-size: 28px;
    line-height: 1;
}

.pet-deposit-card-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
}

.pet-deposit-card-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}

.pet-deposit-card-value {
    font-size: 11px;
    color: var(--muted);
}

.pet-deposit-qty-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    overflow: hidden;
    height: 26px;
}

.pet-qty-btn {
    background: rgba(255, 255, 255, .06);
    border: none;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    width: 28px;
    height: 26px;
    cursor: pointer;
    transition: background .13s;
    flex-shrink: 0;
    padding: 0;
}

.pet-qty-btn:hover {
    background: rgba(255, 255, 255, .14);
}

.pet-qty-btn:active {
    background: rgba(255, 255, 255, .2);
}

.pet-qty-num {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    min-width: 24px;
    text-align: center;
    padding: 0 4px;
    background: rgba(255, 255, 255, .03);
    height: 26px;
    line-height: 26px;
}

.pet-deposit-card.is-selected .pet-deposit-qty-row {
    border-color: var(--accent);
}

.pet-deposit-card.is-selected .pet-qty-num {
    color: var(--accent);
}

.pet-deposit-selected-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    margin: 10px 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--accent);
    border-radius: 10px;
    font-size: 13px;
}

.pet-sel-header {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}

.pet-sel-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pet-sel-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.pet-sel-emoji {
    font-size: 22px;
    line-height: 28px;
    flex-shrink: 0;
}

.pet-sel-name {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pet-sel-qty {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    flex-shrink: 0;
}

.pet-sel-val {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent);
    flex-shrink: 0;
}

.pet-sel-total {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    text-align: right;
}

.pet-sel-bonus {
    color: #5be88a;
    font-size: 11px;
    margin-left: 4px;
}

.pet-deposit-promo-hint {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: 6px;
}

.pet-deposit-promo-hint.is-valid {
    color: #6ddc9e;
    background: rgba(80, 200, 120, .10);
    border: 1px solid rgba(80, 200, 120, .25);
}

.pet-deposit-promo-hint.is-invalid {
    color: #58A6FF;
    background: rgba(88, 166, 255, .08);
    border: 1px solid rgba(88, 166, 255, .22);
}

.pet-deposit-next-btn {
    margin-top: 10px;
}

.pet-deposit-submit-btn {
    margin-top: 4px;
}

.pet-deposit-btn-hint {
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    min-height: 15px;
}

.pet-deposit-submit-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.pet-deposit-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.pet-deposit-status.is-success {
    background: rgba(80, 200, 120, .12);
    border: 1px solid rgba(80, 200, 120, .35);
    color: #6ddc9e;
}

.pet-deposit-status.is-error {
    background: rgba(88, 166, 255, .12);
    border: 1px solid rgba(88, 166, 255, .35);
    color: #58A6FF;
}

.pet-deposit-trade-modal {
    position: fixed;
    inset: 0;
    z-index: 9300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: fadeIn 0.25s ease-out;
}

.pet-deposit-trade-modal.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.trade-modal-content {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

.trade-modal-header, .trade-modal-footer {
    flex-shrink: 0;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.trade-modal-header {
    padding: 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trade-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #e0e0e0;
}

.trade-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.trade-modal-close:hover {
    color: #e0e0e0;
}

.trade-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    min-height: 0;
}

@media (max-width: 480px) {
    .trade-modal-content {
        width: 94%;
        max-height: 92vh;
    }

    .trade-modal-body {
        padding: 18px;
        gap: 16px;
    }

    .trade-modal-header {
        padding: 16px 18px;
    }

    .trade-modal-footer {
        padding: 14px 18px;
    }
}

.trade-account-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-account-info > label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trade-account-display {
    background: #0a0a0a;
    border: 2px solid #4CAF81;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #4CAF81;
    text-align: center;
    font-family: 'Courier New', monospace;
    user-select: all;
}

.trade-account-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.trade-account-info > label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trade-account-input {
    background: #0a0a0a;
    border: 2px solid #4CAF81;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #4CAF81;
    font-family: 'Courier New', monospace;
    cursor: text;
}

.trade-account-input:focus {
    outline: none;
    border-color: #6ddc9e;
    box-shadow: 0 0 0 2px rgba(76, 175, 129, 0.3);
}

.trade-user-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-user-info > label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trade-user-nick-input {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #e0e0e0;
    font-family: 'Courier New', monospace;
    cursor: text;
}

.trade-user-nick-input:focus {
    outline: none;
    border-color: #4CAF81;
    box-shadow: 0 0 0 2px rgba(76, 175, 129, 0.2);
}

.trade-copy-btn {
    background: rgba(76, 175, 129, 0.15);
    border: 1px solid rgba(76, 175, 129, 0.4);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6ddc9e;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-copy-btn:hover {
    background: rgba(76, 175, 129, 0.25);
    border-color: rgba(76, 175, 129, 0.6);
}

.trade-instructions {
    background: rgba(76, 175, 129, 0.08);
    border: 1px solid rgba(76, 175, 129, 0.2);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-instructions p {
    margin: 0;
    font-size: 13px;
    color: #b0b0b0;
    line-height: 1.5;
}

.trade-instructions p strong, .trade-account-name {
    color: #4CAF81;
    font-weight: 600;
}

.trade-ready-warning {
    background: rgba(255, 90, 110, 0.14);
    border: 1px solid rgba(255, 90, 110, 0.45);
    border-radius: 8px;
    padding: 12px 14px;
    color: #FF5A6E;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.trade-timer {
    text-align: center;
    font-size: 13px;
    color: #999;
    padding: 8px;
    background: rgba(255, 165, 0, 0.08);
    border-radius: 6px;
}

#petDepositTradeTimer {
    font-weight: 600;
    color: #ffa500;
    font-family: 'Courier New', monospace;
}

.trade-timeout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 8px 0 4px;
}

.trade-timeout-icon {
    font-size: 44px;
    line-height: 1;
    filter: grayscale(0.15);
}

.trade-timeout-title {
    font-size: 17px;
    font-weight: 700;
    color: #58A6FF;
}

.trade-timeout-text {
    font-size: 13.5px;
    color: #b0b0b0;
    line-height: 1.55;
}

.trade-timeout-hint {
    font-size: 12.5px;
    color: #999;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    line-height: 1.5;
}

.trade-success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 12px 0 4px;
}

.trade-success-icon {
    font-size: 48px;
    line-height: 1;
    animation: tradeSuccessPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tradeSuccessPop {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.trade-success-title {
    font-size: 18px;
    font-weight: 800;
    color: #6ddc9e;
}

.trade-success-text {
    font-size: 13.5px;
    color: #b0b0b0;
    line-height: 1.55;
}

.trade-success-amount {
    font-size: 28px;
    font-weight: 800;
    color: #4CAF81;
    font-family: 'Courier New', monospace;
    background: rgba(76, 175, 129, 0.1);
    border: 1px solid rgba(76, 175, 129, 0.3);
    border-radius: 10px;
    padding: 10px 24px;
}

.trade-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #333;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.trade-modal-close-btn {
    background: rgba(100, 100, 100, 0.3);
    border: 1px solid rgba(150, 150, 150, 0.3);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #d0d0d0;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-modal-close-btn:hover {
    background: rgba(100, 100, 100, 0.5);
    border-color: rgba(150, 150, 150, 0.5);
}

.queue-notice-modal-content {
    max-width: 440px;
}

.queue-notice-header {
    border-bottom-color: rgba(255, 165, 60, 0.18);
}

.queue-notice-body {
    align-items: center;
    text-align: center;
}

.queue-notice-icon-wrap {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 165, 60, 0.18) 0%, rgba(255, 165, 60, 0.04) 70%);
    border: 1.5px solid rgba(255, 165, 60, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 0;
}

.queue-notice-icon {
    font-size: 40px;
    line-height: 1;
    animation: queuePulse 1.8s ease-in-out infinite;
}

@keyframes queuePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: .85;
    }
}

.queue-notice-title {
    font-size: 17px;
    font-weight: 700;
    color: #f0f0f0;
    line-height: 1.4;
}

.queue-notice-text {
    font-size: 13.5px;
    color: #a8a8a8;
    line-height: 1.55;
}

.queue-notice-eta-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255, 165, 60, 0.08);
    border: 1px solid rgba(255, 165, 60, 0.25);
    border-radius: 10px;
    padding: 14px 18px;
}

.queue-notice-eta-label {
    font-size: 11px;
    font-weight: 700;
    color: #ffb066;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.queue-notice-eta-value {
    font-size: 26px;
    font-weight: 800;
    color: #ffa03c;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}

.queue-notice-footer {
    justify-content: stretch;
}

.queue-notice-close-btn {
    background: rgba(100, 100, 100, 0.25);
    border: 1px solid rgba(150, 150, 150, 0.3);
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #c8c8c8;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.queue-notice-close-btn:hover {
    background: rgba(100, 100, 100, 0.4);
}

.queue-notice-join-btn {
    flex: 1.4;
    background: linear-gradient(135deg, #ff9d3c, #ff7a3c);
    border: none;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1000;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(255, 140, 60, 0.25);
}

.queue-notice-join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 140, 60, 0.35);
}

.queue-notice-join-btn:active {
    transform: translateY(0);
}

.queue-wait-modal-content {
    max-width: 440px;
}

.queue-wait-header {
    border-bottom-color: rgba(90, 170, 255, 0.18);
}

.queue-wait-body {
    align-items: center;
    text-align: center;
}

.queue-wait-ring-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 4px auto 0;
}

.queue-wait-ring {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}

.queue-wait-ring-bg {
    fill: none;
    stroke: rgba(90, 170, 255, 0.12);
    stroke-width: 8;
}

.queue-wait-ring-fill {
    fill: none;
    stroke: #5aaaff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.7;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
    filter: drop-shadow(0 0 6px rgba(90, 170, 255, 0.5));
}

.queue-wait-ring-time {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #5aaaff;
    font-family: 'Courier New', monospace;
}

.queue-wait-title {
    font-size: 17px;
    font-weight: 700;
    color: #f0f0f0;
}

.queue-wait-text {
    font-size: 13.5px;
    color: #a8a8a8;
    line-height: 1.55;
}

.queue-wait-status {
    font-size: 12.5px;
    font-weight: 600;
    color: #5aaaff;
    background: rgba(90, 170, 255, 0.1);
    border: 1px solid rgba(90, 170, 255, 0.25);
    border-radius: 20px;
    padding: 6px 16px;
}

.queue-wait-status.is-ready {
    color: #6ddc9e;
    background: rgba(76, 175, 129, 0.12);
    border-color: rgba(76, 175, 129, 0.35);
}

.queue-wait-minimize-footer-btn {
    width: 100%;
    background: rgba(100, 100, 100, 0.2);
    border: 1px solid rgba(150, 150, 150, 0.25);
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #b0b0b0;
    cursor: pointer;
    transition: all 0.2s;
}

.queue-wait-minimize-footer-btn:hover {
    background: rgba(100, 100, 100, 0.35);
}

.trade-modal-cancel-btn {
    background: rgba(220, 80, 80, 0.12);
    border: 1px solid rgba(220, 80, 80, 0.35);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #e88;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-modal-cancel-btn:hover {
    background: rgba(220, 80, 80, 0.22);
    border-color: rgba(220, 80, 80, 0.55);
}

.trade-modal-cancel-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.oos-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.oos-modal-overlay.hidden {
    display: none;
}

.oos-modal-card {
    width: min(420px, 92vw);
    background: var(--panel, #161616);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: carnageModalIn .38s cubic-bezier(.17, .67, .3, 1.1) both;
}

.oos-modal-body {
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oos-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text, #e0e0e0);
    line-height: 1.3;
}

.oos-modal-desc {
    font-size: 14px;
    color: var(--muted, #777);
    line-height: 1.6;
}

/* Список заявок в окне с причиной отказа. Заявок обычно одна, но бывает
   две-три: каждая своей карточкой, иначе причины сливаются в абзац. */
.wdr-notice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

/* Список «что нового» — та же карточка-строка, что у уведомлений по выводу
   (.wdr-notice-row ниже): своего оформления для объявления не заводим, иначе
   на одной странице будет два разных способа показать список в модалке. */
.upd-notice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.upd-notice-row {
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    line-height: 1.4;
    color: var(--text, #e0e0e0);
}

.upd-notice-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    /* !important не для красоты: без него радиус приходит нулевым — в таблице
       есть правило шире по охвату, и маркер получался квадратом. Проверено
       через computed style, а не на глаз. */
    border-radius: 50% !important;
    background: var(--accent, #3868c0);
    /* Кружок к первой строке текста, а не к середине блока: при переносе на
       две строки он иначе уезжает вниз и выглядит как опечатка. */
    transform: translateY(-2px);
}

/* ── Праздничный вид объявления «мы обновились» ─────────────────────────────
   Это единственное окно, которое игрок видит сразу на входе, поэтому нарядное
   тут только оно. Золото берём ровно то, что уже живёт на площадке: --lux у
   дорогих карточек и пара #FFD98A→#FFB33C у стейкинга. Новых цветов и своей
   типографики не заводим — иначе окно выглядело бы с другого сайта. */
.upd-notice-card {
    position: relative;
    border-color: var(--lux-line, rgba(255, 215, 106, .55)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 30px var(--lux-glow, rgba(255, 215, 106, .22)) !important;
}

/* Лента по верхней кромке — единственная «мишура». */
.upd-notice-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFB33C, #FFE8B0 50%, #FFB33C);
    pointer-events: none;
    z-index: 2;
}

/* Блик наискось раз в 5 секунд. Карточку не двигаем и ничего не мигает: на
   входе в приложение дёргающееся окно раздражает, а медленный блик читается
   как «тут что-то новое». */
.upd-notice-card::after {
    content: '';
    position: absolute;
    top: -60%;
    bottom: -60%;
    width: 42%;
    left: -60%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 232, 176, .10), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    pointer-events: none;
    animation: updNoticeSheen 5s ease-in-out 1.1s infinite;
}

@keyframes updNoticeSheen {
    0% { left: -60%; }
    55%, 100% { left: 130%; }
}

.upd-notice-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Значок — такой же золотой «шильдик», как у стейкинга: тот же градиент, тот
   же тёмный цвет поверх него. */
.upd-notice-badge {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: linear-gradient(135deg, #FFD98A, #FFB33C);
    /* Радиус не задаём: в таблице есть глобальное `* { border-radius: 0 }` с
       !important, и вся площадка — с прямыми углами. Круглый шильдик был бы
       единственным скруглённым элементом на странице. */
    box-shadow: 0 6px 18px rgba(255, 179, 60, .3);
    animation: updNoticeBadgePop .5s cubic-bezier(.17, .67, .3, 1.35) .12s both;
}

/* Иконка из общего набора, а не эмодзи: эмодзи рисуется системным шрифтом и
   на каждой платформе выглядит по-своему, а весь остальной интерфейс — solar. */
.upd-notice-badge .solar-icon {
    display: block;
    width: 21px;
    height: 21px;
}

@keyframes updNoticeBadgePop {
    from { opacity: 0; transform: scale(.4) rotate(-18deg); }
    to { opacity: 1; transform: none; }
}

/* Заголовок крупнее обычного модального и залит тем же золотом. */
.upd-notice-card .oos-modal-title {
    font-size: 21px;
    color: var(--lux, #ffd76a);
    background: linear-gradient(135deg, #FFE8B0, #FFB33C);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Пункты выезжают по очереди — глаз проходит список сверху вниз, а не видит
   сразу стену строк. Номер строки приходит из app.js как --i. */
.upd-notice-card .upd-notice-row {
    border-color: rgba(255, 215, 106, .18);
    background: linear-gradient(135deg, rgba(255, 215, 106, .07), rgba(255, 255, 255, .03));
    animation: updNoticeRowIn .42s cubic-bezier(.17, .67, .3, 1.1) both;
    animation-delay: calc(160ms + var(--i, 0) * 85ms);
}

@keyframes updNoticeRowIn {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}

.upd-notice-card .upd-notice-dot {
    background: linear-gradient(135deg, #FFD98A, #FFB33C);
    box-shadow: 0 0 9px rgba(255, 179, 60, .55);
}

.upd-notice-card #updateNoticeOkBtn {
    background: linear-gradient(135deg, #FFD98A, #FFB33C) !important;
    color: #2a1b04 !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 18px rgba(255, 179, 60, .32) !important;
}

.upd-notice-card #updateNoticeOkBtn:hover {
    box-shadow: 0 10px 26px rgba(255, 179, 60, .44) !important;
}

/* Хлопушка при открытии. Слой свой, а не из upgrader.css: тот подключается
   только вместе с секцией апгрейдера, а объявление всплывает на главной, где
   его стилей на странице ещё нет. */
.upd-confetti-layer {
    position: fixed;
    inset: 0;
    /* Выше оверлея модалки (9200), иначе куски летят за затемнением. */
    z-index: 9300;
    pointer-events: none;
    overflow: hidden;
}

/* Три вложенных слоя на кусок, а не одна анимация на всё: по горизонтали и по
   вертикали у летящей бумажки разные законы движения, и свести их в один
   набор кадров можно только ломаными прямыми — именно от этого излома залп
   выглядел дёрганым. Внешний слой — точка вылета, средний — вертикаль,
   внутренний — сама бумажка со своим переворотом. */
.upd-confetti {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 0);
    will-change: transform;
    /* По горизонтали скорость гасится воздухом: быстро в начале, почти стоя
       на месте в конце. Кривая подобрана так, чтобы стартовая скорость была
       примерно втрое выше средней — выше выглядит как рывок. */
    animation: updConfettiX var(--dur, 2000ms) cubic-bezier(.15, .5, .35, 1) var(--delay, 0ms) both;
}

.upd-confetti-y {
    display: block;
    will-change: transform;
    animation: updConfettiY var(--dur, 2000ms) var(--delay, 0ms) both;
}

/* Покачивание вбок. Без него куски после верхней точки идут вниз строго
   параллельно и с одинаковой скоростью — получается дождь, а не конфетти.
   Период, амплитуда и направление у каждого куска свои, иначе весь залп
   качается в такт, что ещё хуже параллельных полос. */
.upd-confetti-s {
    display: block;
    will-change: transform;
    animation: updConfettiSway var(--sway, 1100ms) ease-in-out var(--delay, 0ms) infinite alternate;
    animation-direction: var(--swayDir, alternate);
}

.upd-confetti-p {
    display: block;
    width: var(--w, 8px);
    height: var(--h, 13px);
    background: var(--c, #FFD98A);
    /* Переворот вокруг своей оси, а не плоское вращение: бумажка то показывает
       плоскость, то сжимается в полоску — от этого полёт и читается живым.
       Крутится равномерно и всё время, пока летит. */
    animation: updConfettiSpin var(--spin, 700ms) linear var(--delay, 0ms) infinite,
               updConfettiFade var(--dur, 2000ms) linear var(--delay, 0ms) both;
}

@keyframes updConfettiX {
    from { transform: translateX(0); }
    to { transform: translateX(var(--dx, 0px)); }
}

@keyframes updConfettiY {
    /* Бросок вверх — замедляясь до верхней точки. */
    0% { transform: translateY(0); animation-timing-function: cubic-bezier(.15, .45, .35, 1); }
    /* Дальше падение: короткий разгон и ровная скорость до низа. Именно так
       падает бумажка — воздух почти сразу уравновешивает тяжесть. Кривая с
       сильным разгоном до самого конца даёт «зависло и свалилось», и весь
       залп от этого смотрится дёрганым. */
    34% { transform: translateY(var(--rise, -200px)); animation-timing-function: cubic-bezier(.2, 0, .65, .65); }
    100% { transform: translateY(var(--fall, 520px)); }
}

@keyframes updConfettiSway {
    from { transform: translateX(calc(var(--swayAmp, 14px) * -1)); }
    to { transform: translateX(var(--swayAmp, 14px)); }
}

@keyframes updConfettiSpin {
    from { transform: rotate3d(var(--ax, 1), var(--ay, 1), .15, 0deg); }
    to { transform: rotate3d(var(--ax, 1), var(--ay, 1), .15, 360deg); }
}

/* Нулевая прозрачность на старте — пока кусок ждёт свою задержку вылета, он
   не должен висеть видимой точкой на кромке карточки. */
@keyframes updConfettiFade {
    0% { opacity: 0; }
    2%, 76% { opacity: 1; }
    100% { opacity: 0; }
}

/* У кого анимации выключены системно — никакого движения: окно просто нарядное. */
@media (prefers-reduced-motion: reduce) {
    .upd-confetti { animation: none; display: none; }
    .upd-notice-card::after { animation: none; display: none; }
    .upd-notice-badge,
    .upd-notice-card .upd-notice-row { animation: none; }
}

.wdr-notice-row {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.wdr-notice-items {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #e0e0e0);
    line-height: 1.35;
}

.wdr-notice-reason {
    margin-top: 4px;
    font-size: 12px;
    color: #f8a4a4;
    line-height: 1.4;
}

/* Изъятие — отдельной строкой и заметнее причины: предмет не вернулся, и
   это главное, что человеку нужно понять. */
.wdr-notice-dropped {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid #ff6b6b;
    font-size: 12px;
    font-weight: 600;
    color: #ffb4b4;
    line-height: 1.4;
}

.wdr-notice-date {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, .38);
}

.oos-modal-footer {
    padding: 14px 28px 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.deposit-rules-card {
    width: min(420px, 92vw);
    max-height: min(640px, 86vh);
    position: relative;
}

.deposit-rules-card .oos-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.deposit-rules-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
    z-index: 1;
}

.deposit-rules-close:hover {
    background: rgba(255, 255, 255, .12);
}

.deposit-rules-card .oos-modal-title {
    padding-right: 40px;
}

.deposit-rules-list {
    margin: 4px 0 14px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.deposit-rules-list li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.deposit-rules-list li.deposit-rules-critical {
    color: #FF5C5C;
    font-weight: 600;
}

.deposit-rules-list li.deposit-rules-critical strong {
    color: #FF5C5C;
}

.deposit-rules-list a {
    color: #58A6FF;
    font-weight: 700;
    text-decoration: none;
}

.deposit-rules-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    cursor: pointer;
}

.deposit-rules-agree input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #58A6FF;
    cursor: pointer;
}

.deposit-rules-agree span {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

#depositRulesModal .oos-modal-footer {
    justify-content: center;
}

#depositRulesContinueBtn:disabled {
    opacity: .4;
    cursor: not-allowed;
    filter: grayscale(.3);
}

.public-profile-page-layout {
    max-width: 640px;
    margin: 0 auto;
}

/* A Telegram display name/username has no spaces to wrap at, so a long one
   (e.g. a full concatenated first+last name) doesn't wrap by default and
   overflows the viewport on mobile instead — scoped here rather than on
   the shared .section-head h2 since item/case names are always short and
   this hasn't needed it. */
#publicProfileName {
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: 'DM Mono', monospace !important;
    letter-spacing: -.01em;
}

.public-profile-avatar {
    width: 96px;
    height: 96px;
    /* !important needed — a sitewide `* { border-radius: 0 !important }`
       reset (styles.css:56/7642, the site's deliberate sharp-corner look
       for buttons/cards/modals) otherwise wins over this and the avatar
       renders as an unclipped square. Some source avatar photos (e.g. a
       Telegram video-avatar poster frame) already have their own circular
       mask baked into the JPEG with black outside it — without this
       clipping actually applying, that baked-in black circle's corners
       show up as a black square frame around the photo. */
    border-radius: 50% !important;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
}

.public-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.public-profile-inv-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 10px;
}

.public-profile-inv-title span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 480px) {
    .public-profile-avatar {
        width: 76px;
        height: 76px;
        font-size: 28px;
    }
}

.upg-preview-track {
    position: relative;
    display: flex;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
}

.upg-preview-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .7);
    overflow: hidden;
    white-space: nowrap;
}

.upg-preview-seg-spinup {
    background: rgba(56, 104, 192, .16);
}

.upg-preview-seg-cruise {
    background: rgba(56, 104, 192, .30);
}

.upg-preview-seg-decel {
    background: rgba(56, 104, 192, .48);
}

.upg-preview-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, .85);
    pointer-events: none;
}

.oos-cr-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
}

.oos-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: background .14s, border-color .14s;
    position: relative;
}

.oos-card input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.oos-card:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
}

.oos-card.oos-card-on {
    background: rgba(88, 166, 255, .12);
    border-color: rgba(88, 166, 255, .45);
}

.oos-card.oos-card-on::after {
    content: '✕';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    font-weight: 900;
    color: #58A6FF;
    line-height: 1;
}

.oos-card-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 5px;
}

.oos-card-emoji {
    font-size: 28px;
    line-height: 1;
}

.oos-card-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}

.oos-card-delta {
    font-size: 10px;
    font-weight: 800;
    color: var(--muted, #888);
}

.oos-card.oos-card-on .oos-card-delta {
    color: #58A6FF;
}

.oos-card.is-disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}

.exchange-shop-balance {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(88, 166, 255, .12);
    border: 1px solid rgba(88, 166, 255, .35);
    color: #58A6FF;
    font-size: 13px;
    font-weight: 800;
}

.exchange-shop-shell {
    width: min(1080px, 100%);
    height: min(740px, 90vh);
    max-height: min(740px, 90vh);
    display: flex;
    flex-direction: column;
}

.exchange-shop-columns {
    display: flex;
    gap: 18px;
    padding: 18px 28px 28px;
    flex: 1;
    min-height: 0;
}

.exchange-shop-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    padding: 18px;
    min-height: 0;
}

.exchange-shop-col-sell,
.exchange-shop-col-buy {
    flex: 1 1 0;
}

.exchange-shop-col-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.exchange-shop-col-title {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .01em;
}

.exchange-shop-col-sell .exchange-shop-col-title {
    color: #ff9838;
}

.exchange-shop-col-buy .exchange-shop-col-title {
    color: #58A6FF;
}

.exchange-shop-col-grid {
    flex: 1;
    max-height: none;
    align-content: flex-start;
}

.exchange-confirm-bar {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.exchange-confirm-bar span {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
}

.exchange-confirm-bar .primary-btn {
    width: 100%;
}

/* .primary-btn has no global :disabled style anywhere in the codebase, so
   #exchangeNextBtn's disabled state (no offer chosen yet) would otherwise
   look identical to enabled — scoped here rather than adding a global rule
   with unreviewed blast radius on every other primary-btn in the app. */
#exchangeNextBtn:disabled {
    opacity: .4;
    cursor: not-allowed;
    filter: grayscale(.3);
}

/* Quantity badge on an offer/given-chip card — bottom-left, so it never
   collides with .oos-card.oos-card-on's existing top-right ✕ checkmark. */
.exchange-offer-qty-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #58A6FF;
    color: #0a0a0a;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.exchange-offer-card {
    padding-bottom: 14px;
}

.exchange-offer-card .oos-card-delta.exchange-offer-topup {
    color: #ff6868 !important;
}

.exchange-offer-card .oos-card-delta.exchange-offer-change {
    color: #4ce08a !important;
}

/* Confirm / success modals reuse the .oos-modal-* shell (same family as
   minWithdrawModal/exchangeBlockedModal) but need more width for a row of
   item chips + arrow + received item. */
.exchange-confirm-card,
.exchange-success-card {
    width: min(520px, 94vw);
}

.exchange-confirm-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 6px 0 4px;
    flex-wrap: wrap;
}

.exchange-confirm-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.exchange-confirm-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.exchange-confirm-label-give {
    color: #ff9838;
}

.exchange-confirm-label-receive {
    color: #58A6FF;
}

.exchange-confirm-given {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.exchange-confirm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
}

.exchange-confirm-item-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted, #97a8b4);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.exchange-confirm-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.exchange-confirm-arrow-spacer {
    font-size: 11px;
    font-weight: 900;
    visibility: hidden;
}

.exchange-confirm-arrow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

/* Drawn as a solid triangle instead of a "→" glyph — text-arrow characters
   carry uneven font side-bearing that makes them look off-center inside
   their own box even when the box itself is geometrically centered. */
.exchange-confirm-arrow {
    display: block;
    width: 14px;
    height: 20px;
    background: #58A6FF;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    animation: fusePulse 1.6s ease-in-out infinite;
}

.exchange-confirm-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    flex-shrink: 0;
}

.exchange-confirm-chip .oos-card-img {
    width: 60px;
    height: 60px;
}

.exchange-confirm-chip .oos-card-emoji {
    font-size: 38px;
}

.exchange-confirm-received {
    background: rgba(88, 166, 255, .08);
    border-color: rgba(88, 166, 255, .4);
}

.exchange-confirm-receive-name {
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}

.exchange-confirm-delta {
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    margin-top: 6px;
}

.exchange-confirm-delta-negative {
    color: #ff6868;
}

.exchange-confirm-delta-positive {
    color: #4ce08a;
}

.exchange-success-card {
    width: min(360px, 90vw);
}

.exchange-success-card .oos-modal-body {
    padding: 22px 24px 14px;
    gap: 6px;
}

.exchange-success-card .oos-modal-footer {
    padding: 10px 24px 20px;
    justify-content: center;
}

.exchange-success-receive {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto 8px;
    width: 84px;
    height: 84px;
    background: rgba(88, 166, 255, .1);
    border: 1px solid rgba(88, 166, 255, .4);
}

.exchange-success-receive .oos-card-img {
    width: 60px;
    height: 60px;
}

.exchange-success-receive .oos-card-emoji {
    font-size: 40px;
}

.exchange-success-title {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: #4ce08a;
    letter-spacing: .02em;
}

.exchange-success-name {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.exchange-success-qty {
    color: #58A6FF;
    font-weight: 900;
}

@media (max-width: 760px) {
    .exchange-shop-shell {
        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    /* Stacked sell/buy columns used to fight over the shell's fixed height via
       flex:1 + min-height:0 (inherited from the desktop side-by-side rule) —
       each column got squeezed down to a sliver, and because that squeeze
       combined with the column's own overflow:visible, the shell never saw
       the true content height to scroll for it: neither the shell nor the
       columns wrapper scrolled, only each grid's own tiny internal scrollbox
       did (near-invisible on a real phone). Letting both columns grow to
       their natural full height and turning the shell into the single
       scroll container for the whole stacked modal fixes that — one normal
       page-like scroll instead of two cramped nested scrollboxes. */
    .exchange-shop-columns {
        flex-direction: column;
        flex: none;
        min-height: auto;
        padding: 12px 10px 18px;
        gap: 14px;
    }

    .exchange-shop-col {
        flex: none;
        /* Was 18px on every side — on a ~350px-wide stacked column that ate
           a third of the width before the grid even started, squeezing the
           cards below into icons with no visible labels. Freeing that width
           lets the cards below grow instead. */
        padding: 12px 10px;
        border-radius: 16px;
    }

    .exchange-shop-col-head {
        gap: 4px;
        margin-bottom: 10px;
    }

    .exchange-shop-col-title {
        font-size: 15.5px;
    }

    /* Bigger cards, fewer per row, instead of the desktop 90px minimum that
       was cramming 3+ tiny tiles into a narrow stacked column — this is the
       actual "spread it out" fix, scoped to the exchange grids only so the
       rest of the app's item grids (profile inventory, case picker, etc.)
       are untouched. */
    .exchange-shop-col-grid {
        max-height: none;
        overflow: visible;
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 12px;
    }

    .exchange-shop-col-grid .oos-card {
        padding: 14px 8px 10px;
        gap: 8px;
        border-radius: 14px;
    }

    .exchange-shop-col-grid .oos-card-img {
        width: 68px;
        height: 68px;
    }

    .exchange-shop-col-grid .oos-card-emoji {
        font-size: 42px;
    }

    .exchange-shop-col-grid .oos-card-name {
        font-size: 12.5px;
        line-height: 1.25;
    }

    .exchange-shop-col-grid .oos-card-delta {
        font-size: 12px;
    }

    .exchange-shop-col-grid .exchange-offer-qty-badge {
        min-width: 22px;
        height: 22px;
        font-size: 12px;
    }

    /* Confirm/success modal chips were being shrunk further below 420px
       (66px chips, 10px text) — the opposite of what's needed on a phone.
       Both .exchange-confirm-row and .exchange-confirm-given already wrap
       via flex-wrap, so there's no overflow risk from keeping these at
       full size; wrapping to an extra row is fine and reads better than
       tiny unreadable icons. */
    .exchange-confirm-item,
    .exchange-confirm-chip {
        width: 92px;
    }

    .exchange-confirm-chip {
        height: 92px;
    }

    .exchange-confirm-chip .oos-card-img {
        width: 70px;
        height: 70px;
    }

    .exchange-confirm-chip .oos-card-emoji {
        font-size: 44px;
    }

    .exchange-confirm-item-name {
        font-size: 12.5px;
    }

    .exchange-confirm-arrow-box {
        height: 92px;
    }

    .exchange-success-receive {
        width: 100px;
        height: 100px;
    }

    .exchange-success-receive .oos-card-img {
        width: 74px;
        height: 74px;
    }

    .exchange-success-receive .oos-card-emoji {
        font-size: 48px;
    }
}

.deposit-category-tabs {
    display: flex;
    gap: 8px;
    padding: 18px 28px 0;
}

.deposit-cat-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    /* Равноширинные и сжимаемые -- три вкладки должны гарантированно
       помещаться на любом экране без горизонтального скролла (раньше
       flex:0 0 auto по контенту + overflow-x:auto со скрытым скроллбаром
       давал на узких экранах утекающий вбок ряд без единого визуального
       намёка, что там ещё что-то есть). */
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 420px) {
    .deposit-cat-tab {
        padding: 10px 6px;
        font-size: 12px;
        gap: 4px;
    }
}

/* Вкладок стало четыре (добавилась крипта), и на телефоне первая обрезалась до
   «Брейнрот» с наполовину срезанной иконкой. Горизонтальный скролл здесь уже
   пробовали и отказались (см. комментарий выше: ряд молча утекал вбок), поэтому
   ужимаем сильнее: меньше шрифт, отступы и иконка — четыре подписи помещаются
   целиком на 360 px. */
@media (max-width: 440px) {
    .deposit-cat-tab {
        padding: 9px 3px;
        font-size: 12px;            /* было 10,5: мелко для телефона; места хватает (проверено 320–440) */
        gap: 3px;
        letter-spacing: -0.2px;
    }

    /* Селектор длиннее базового намеренно: правило .deposit-cat-tab-icon с
       шириной 18px объявлено НИЖЕ по файлу и при равной точности побеждало бы
       порядком. Без этого вкладке не хватало ровно одного пикселя. */
    .deposit-category-tabs .deposit-cat-tab-icon {
        width: 14px;
        height: 14px;
    }

    .deposit-category-tabs {
        gap: 5px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* На узких телефонах (до 389 px) четыре подписи не помещаются даже с
   уменьшенной иконкой — «Брейнроты» обрезается. Иконка там декоративная, а
   слово нет, поэтому на этой ширине показываем только текст. */
@media (max-width: 389px) {
    .deposit-category-tabs .deposit-cat-tab-icon {
        display: none;
    }
}
/* Четыре вкладки и больше на телефоне до 440px: с подписью 12px иконке рядом
   со словом места нет, оставляем только слово (как на 441–639). */
@media (max-width: 440px) {
    .deposit-category-tabs:has(> .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden)) .deposit-cat-tab-icon {
        display: none;
    }
}
/* Подписи 12px целиком: четыре вкладки уже 360px в один ряд не помещаются
   («Брейнроты» резалось многоточием), пять не помещаются до 760px. Тогда
   вкладки встают в два ряда, слово не обрезается и не переносится. */
@media (max-width: 359px) {
    .deposit-category-tabs:has(> .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden)) { flex-wrap: wrap; row-gap: 5px; }
    .deposit-category-tabs:has(> .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden)) .deposit-cat-tab { flex: 1 1 calc(50% - 3px); }
}
@media (max-width: 759px) {
    .deposit-category-tabs:has(> .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden)) { flex-wrap: wrap; row-gap: 5px; }
    .deposit-category-tabs:has(> .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden)) .deposit-cat-tab { flex: 1 1 calc(33.333% - 4px); }
}

.deposit-cat-tab:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: var(--text);
}

.deposit-cat-tab.is-active {
    background: rgba(255, 255, 255, .1);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 255, 255, .06);
}

.deposit-cat-tab:disabled {
    cursor: not-allowed;
    color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .06);
}

/* Гасим содержимое, а не саму вкладку: opacity на кнопке тушит и метку
   «закрыто» внутри неё — ребёнок ярче родителя быть не может, и слово
   переставало читаться. */
.deposit-cat-tab:disabled > *:not(.deposit-cat-tab-closed) {
    opacity: .4;
}

.deposit-cat-tab:disabled:hover {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .06);
    color: var(--muted);
}

/* Раньше это был <span> с эмодзи (font-size-размер) -- теперь картинка
   (ковёр/силуэт брейнрота/солнечная звезда), нужен настоящий width/height
   вместо font-size. object-fit:contain -- у иконок разное соотношение сторон
   (ковёр шире, чем высокий силуэт брейнрота), не хотим ни обрезки, ни
   растягивания. */
.deposit-cat-tab-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.deposit-cat-panel {
    padding: 14px 20px 20px;
}

.deposit-cat-sub {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.deposit-stars-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.deposit-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.deposit-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.deposit-field-opt {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .7;
}

.deposit-stars-amount-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.deposit-stars-amount-row .deposit-field {
    flex: 1;
}

.stars-conversion {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 0 12px;
    white-space: nowrap;
}

.stars-conversion-eq {
    color: var(--muted);
    font-size: 16px;
}

.stars-conversion-value {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.stars-conversion-unit {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}

.stars-pay-btn {
    margin-top: 4px;
}

.stars-pay-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.deposit-stars-status {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.deposit-stars-status.is-pending {
    background: rgba(255, 200, 50, .10);
    border: 1px solid rgba(255, 200, 50, .30);
    color: #ffd966;
}

.deposit-stars-status.is-success {
    background: rgba(80, 200, 120, .12);
    border: 1px solid rgba(80, 200, 120, .35);
    color: #6ddc9e;
}

.deposit-stars-status.is-error {
    background: rgba(88, 166, 255, .12);
    border: 1px solid rgba(88, 166, 255, .35);
    color: #58A6FF;
}

.ops-account-pool-container {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.ops-account-card {
    margin: 0 !important;
}

.ops-account-card .ops-card-head {
    margin-bottom: 15px;
}

.ops-account-card .ops-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ops-account-card .ops-input {
    padding: 8px 12px;
    font-size: 14px;
}

.ops-wq-windows-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ops-wq-window-row {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 12px;
}

.ops-wq-window-row .ops-field {
    min-width: 0;
}

/* Набор брейнротов у окна: чипы с крестиком плюс две кнопки под ними. Свой
   вид не выдумываем — рамка и фон те же, что у полей строки выше. */
.ops-wq-window-items {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-wq-item-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ops-wq-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--text, #fff);
}

.ops-wq-item-del {
    background: none;
    border: none;
    color: var(--muted, #5A7086);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

.ops-wq-item-del:hover {
    color: #ff6b6b;
}

.ops-wq-window-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ops-analytics-range-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 4px;
}

.ops-analytics-range-btn {
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    transition: all .15s;
}

.ops-analytics-range-btn:hover {
    color: #ddd;
}

.ops-analytics-range-btn.is-active {
    background: rgba(76, 175, 129, .18);
    color: #6ddc9e;
}

.ops-analytics-stats-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.ops-analytics-stat-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    padding: 14px 16px;
}

.ops-analytics-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    font-family: 'Courier New', monospace;
    line-height: 1.1;
}

.ops-analytics-stat-label {
    font-size: 11.5px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}

.ops-analytics-chart-wrap {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}

.ops-analytics-chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #ddd;
    margin-bottom: 8px;
}

.ops-analytics-chart-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.ops-analytics-legend-item {
    font-size: 11.5px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ops-analytics-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.ops-analytics-legend-dot.is-clicks {
    background: #5aaaff;
}

.ops-analytics-legend-dot.is-views {
    background: #6ddc9e;
}

.ops-analytics-chart {
    width: 100%;
    height: 160px;
    display: block;
    overflow: visible;
}

.ops-analytics-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #777;
    margin-top: 4px;
}

.ops-analytics-two-col {
    display: grid;
    grid-template-columns:1.4fr 1fr;
    gap: 20px;
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .ops-analytics-two-col {
        grid-template-columns:1fr;
    }
}

.ops-analytics-subtitle {
    font-size: 12.5px;
    font-weight: 700;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
}

.ops-analytics-bar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-analytics-bar-row {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}

.ops-analytics-bar-row-label {
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}

.ops-analytics-bar-row-track {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, .06);
    border-radius: 6px;
    height: 7px;
    overflow: hidden;
}

.ops-analytics-bar-row-fill {
    height: 100%;
    background: linear-gradient(90deg, #5aaaff, #6ddc9e);
    border-radius: 6px;
}

.ops-analytics-bar-row-count {
    color: #888;
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
}

.ops-analytics-device-split {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ops-analytics-device-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #ccc;
}

.ops-analytics-device-icon {
    font-size: 18px;
}

.ops-analytics-device-track {
    flex: 1;
    background: rgba(255, 255, 255, .06);
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}

.ops-analytics-device-fill {
    height: 100%;
    border-radius: 6px;
}

.ops-analytics-device-fill.is-mobile {
    background: #ffa03c;
}

.ops-analytics-device-fill.is-desktop {
    background: #5aaaff;
}

.ops-analytics-device-pct {
    width: 42px;
    text-align: right;
    font-family: 'Courier New', monospace;
    color: #999;
    font-size: 12px;
}

.ops-analytics-heatmap-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 12px;
}

.ops-analytics-heatmap-frame {
    position: relative;
    width: 390px;
    height: 640px;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #0d0d14;
}

.ops-analytics-heatmap-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 640px;
    border: none;
    pointer-events: none;
    background: #0d0d14;
}

#opsAnalyticsHeatmapCanvas.ops-analytics-heatmap-canvas-abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 640px;
    background: transparent;
}

.ops-analytics-heatmap-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.ops-analytics-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ops-analytics-section-btn {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    transition: all .15s;
}

.ops-analytics-section-btn:hover {
    color: #ddd;
    border-color: rgba(255, 255, 255, .18);
}

.ops-analytics-section-btn.is-active {
    background: rgba(90, 170, 255, .16);
    border-color: rgba(90, 170, 255, .4);
    color: #5aaaff;
}

.ops-analytics-period-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 4px;
}

.ops-analytics-custom-range {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
}

.ops-analytics-custom-range.hidden {
    display: none;
}

.ops-analytics-custom-range input[type="date"] {
    padding: 6px 8px;
    font-size: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #ddd;
}

.ops-analytics-panel {
    display: none;
}

.ops-analytics-panel.is-active {
    display: block;
}

.ops-analytics-widget-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .ops-analytics-widget-row {
        grid-template-columns:1fr;
    }
}

.ops-analytics-widget-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.ops-analytics-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ops-analytics-widget-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-analytics-widget-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ops-analytics-color-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ops-analytics-trend {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    padding: 3px 8px;
    border-radius: 6px;
}

.ops-analytics-trend.is-up {
    background: rgba(34, 197, 94, .14);
    color: #22c55e;
}

.ops-analytics-trend.is-down {
    background: rgba(56, 104, 192, .14);
    color: #58a6ff;
}

.ops-analytics-trend.is-flat {
    background: rgba(255, 255, 255, .06);
    color: #999;
}

.ops-analytics-csv-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
}

.ops-analytics-since {
    display: block;
    font-size: 11px;
    margin-bottom: 8px;
}

.ops-analytics-widget-body {
    font-size: 13px;
}

.ops-analytics-stat-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ops-analytics-stat-big {
    font-size: 28px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    color: #fff;
    line-height: 1.1;
}

.ops-analytics-substat-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

@media (max-width: 480px) {
    /* 3 sub-stats (Всего/Токены/Предметы etc.) at minmax(120px,...) plus gaps
       can just barely exceed a phone's available card width, clipping the
       last column's label instead of wrapping -- a lower floor guarantees
       all 3 fit without needing a 4th narrower row. */
    .ops-analytics-substat-grid {
        grid-template-columns:repeat(auto-fit, minmax(84px, 1fr));
        gap: 8px;
    }

    .ops-analytics-stat-big {
        font-size: 20px !important;
    }
}

.ops-analytics-revenue-headline {
    text-align: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 15px;
    color: var(--muted, #94a3b8);
}

.ops-analytics-revenue-headline b {
    font-size: 26px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    color: #6ddc9e;
    margin: 0 4px;
}

.ops-analytics-table-wrap {
    overflow-x: auto;
}

.ops-analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.ops-analytics-table th {
    text-align: left;
    padding: 8px 10px;
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    white-space: nowrap;
}

.ops-analytics-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #ccc;
    white-space: nowrap;
}

.ops-analytics-table tr:last-child td {
    border-bottom: none;
}

.ops-analytics-row-clickable {
    cursor: pointer;
}

.ops-analytics-row-clickable:hover td {
    background: rgba(255, 255, 255, .04);
}

.ops-analytics-drilldown-row td {
    background: rgba(0, 0, 0, .2);
    padding: 12px !important;
    white-space: normal;
}

.ops-players-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.ops-players-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 12.5px;
    color: #999;
}

.ops-players-pagination button {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    padding: 6px 12px;
    color: #ccc;
    cursor: pointer;
    font-size: 12px;
}

.ops-players-pagination button:disabled {
    opacity: .35;
    cursor: default;
}

.ops-players-pagination button:not(:disabled):hover {
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.ops-player-status-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ops-player-status-badge.is-active {
    background: rgba(34, 197, 94, .14);
    color: #22c55e;
}

.ops-player-status-badge.is-banned {
    background: rgba(56, 104, 192, .14);
    color: #58a6ff;
}

.ops-player-status-badge.is-whale {
    background: rgba(90, 170, 255, .16);
    color: #5aaaff;
}

.ops-player-status-badge.is-new {
    background: rgba(245, 158, 11, .14);
    color: #f59e0b;
}

.ops-pcard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 12px;
}

.ops-pcard-tab {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    transition: all .15s;
}

.ops-pcard-tab:hover {
    color: #ddd;
    border-color: rgba(255, 255, 255, .18);
}

.ops-pcard-tab.is-active {
    background: rgba(90, 170, 255, .16);
    border-color: rgba(90, 170, 255, .4);
    color: #5aaaff;
}

.ops-pcard-panel {
    display: none;
}

.ops-pcard-panel.is-active {
    display: block;
}

.ops-pcard-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.ops-pcard-action-row button {
    font-size: 12px !important;
    padding: 8px 14px !important;
}

.ops-pcard-action-row .is-danger {
    background: rgba(56, 104, 192, .14) !important;
    border-color: rgba(56, 104, 192, .4) !important;
    color: #58a6ff !important;
}

.ops-pcard-stat-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ops-pcard-section {
    margin-bottom: 18px;
}

.ops-pcard-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8A97A8;
    margin-bottom: 6px;
}

.ops-pcard-forcecase-active {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ops-pcard-forcecase-active-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .25);
    border-radius: 8px;
    font-size: 13px;
}

.ops-pcard-forcecase-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    max-height: 160px;
    overflow-y: auto;
}

.ops-pcard-forcecase-case-btn.is-active {
    border-color: rgba(88, 166, 255, .6) !important;
    color: #58A6FF !important;
}

.ops-pcard-forcecase-loot {
    margin-top: 4px;
}

.ops-pcard-forcecase-loot-list {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.ops-pcard-forcecase-item-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-align: center;
}

.ops-pcard-forcecase-item-btn:hover {
    background: rgba(34, 197, 94, .1);
    border-color: rgba(34, 197, 94, .4);
}

.ops-pcard-forcecase-item-btn img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ops-pcard-forcecase-item-emoji {
    font-size: 26px;
    display: block;
}

.ops-pcard-forcecase-item-btn span {
    font-size: 11px;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ops-pcard-note {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.ops-pcard-note-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.ops-pcard-note-text {
    font-size: 13px;
    color: #ddd;
    white-space: pre-wrap;
}

.ops-pcard-notes-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.ops-pcard-notes-form textarea {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 10px 12px;
    color: #ddd;
    font-family: inherit;
    font-size: 13px;
    min-height: 70px;
    resize: vertical;
}

.ops-live-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 640px;
    overflow-y: auto;
    margin-top: 12px;
}

.ops-live-feed-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    font-size: 13px;
    animation: opsLiveFeedIn .25s ease;
}

@keyframes opsLiveFeedIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ops-live-feed-time {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #888;
    flex-shrink: 0;
}

.ops-live-feed-text {
    color: #ddd;
}

.ops-live-feed-row-clickable {
    cursor: pointer;
}

.ops-live-feed-row-clickable:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .05);
}

.ops-partner-row-clickable {
    cursor: pointer;
}

.ops-partner-row-clickable:hover td {
    background: rgba(255, 255, 255, .05);
}

.ops-pcard-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ops-pcard-stream-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

.ops-pcard-stream-row:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .05);
}

.ops-pcard-stream-detail {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    margin: -4px 0 8px;
    background: rgba(255, 255, 255, .03);
}

.case-card.case-card-paused {
    filter: grayscale(.4);
    opacity: .72;
    cursor: pointer;
}

.case-card.case-card-paused .case-visual {
    opacity: .55;
}

.case-card.case-card-paused::after {
    content: attr(data-ribbon-text) !important;
    position: absolute !important;
    top: 16px !important;
    right: -34px !important;
    width: 132px !important;
    padding: 4px 0 !important;
    background: linear-gradient(135deg, #1E4082, #0d2a7a) !important;
    color: #fff !important;
    font-family: Impact, 'Arial Black', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: .32em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    transform: rotate(40deg) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Fully inert on purpose -- unlike .case-card-paused (still clickable,
   explains itself via a modal), a coming-soon case has no SPA route to
   navigate to at all. pointer-events:none is the real gate; the missing
   click binding in renderCases() is the second, belt-and-suspenders layer. */
.case-card.case-card-coming-soon {
    filter: grayscale(1);
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.case-card.case-card-coming-soon .case-visual {
    opacity: .6;
}

.case-coming-soon-label {
    color: #8A97A8 !important;
    font-style: italic;
}

.case-visual img.case-image, .case-visual .case-emoji {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.profile-username-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 2px;
}

/* Own-profile only — the raw numeric Telegram id, for support/verification
   ("напиши свой tgid в поддержку") purposes. state.user.publicId is this
   account's OWN unmasked id (serializeUser exposes it as-is; only the
   public-profile endpoint runs it through maskPublicIdentity), so showing
   it here doesn't need any new server data — see renderUser() in app.js.
   Never rendered on the public profile view — that page's own JS never
   touches this field at all. */
.profile-public-id {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: .02em;
    margin-top: 2px;
    opacity: .7;
}

@media (max-width: 760px) {
    /* Framed wordmark, forced onto one line — burger leads (order:1 puts
       brand-btn after it, matching the reference), balance/avatar box
       takes priority for shrink so the logo cluster (flex-shrink:0)
       never wraps regardless of balance digit count. */
    .brand-word {
        display: inline-block !important;
        font-family: 'Syne', sans-serif !important;
        font-weight: 400 !important;
        font-size: 13px !important;
        line-height: 1 !important;
        color: #5AC8FF !important;
        letter-spacing: .03em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .brand-btn {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        gap: 0 !important;
        align-self: stretch !important;
        padding: 5px 6px !important;
        min-width: 0 !important;
        border: 1.5px solid rgba(90, 200, 255, .4) !important;
        border-radius: 0 !important;
        background: rgba(56, 104, 192, .12) !important;
    }

    .brand-logo-icon {
        /* Equal fixed margin both sides (not flex gap) so the icon is
           guaranteed horizontally centered between the two words no
           matter what. top:-2px restores the slight upward nudge the
           base (desktop) rule already had (top:-.19em) — an earlier
           edit here zeroed it out, which visually sank the icon below
           the text's optical center even though the two share the same
           line-box vertical midpoint. */
        margin: 0 2px !important;
        top: -2px !important;
        width: 16px !important;
        height: 16px !important;
    }

    .topbar-user-wrap {
        min-width: 0 !important;
        /* margin-left:auto (not margin:0 auto — that centered it in the
           leftover space after burger+logo instead of hugging the right
           edge, which read as "floating in the middle") soaks up all the
           leading space and pins this flush against the topbar's right
           edge, same as the original space-between look. */
        margin-left: auto !important;
    }

    /* Trimmed down so burger + "Brain [icon] Battle" + avatar/balance
       reliably fit on one row even with a 6-digit balance — previously
       this content measured ~22px wider than the topbar's actual usable
       (padding-excluded) width, which is what forced the wrap-to-2-rows
       fallback below to trigger on every real account instead of staying
       dormant as intended. */
    .user-box {
        padding: 3px !important;
        gap: 4px !important;
    }

    .user-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    .balance-chip {
        padding: 3px 4px !important;
    }

    .topbar {
        gap: 3px !important;
    }

    /* Higher-specificity qualifier (body has class theme-carnage) — this
       stylesheet has dozens of scattered plain `.topbar { padding: ... }`
       rules across many other max-width:760px blocks; a plain .topbar
       selector here is at the mercy of source order against all of them.
       Qualifying with the body class guarantees this padding wins. */
    body.theme-carnage .topbar {
        padding: 8px 8px !important;
    }

    .topbar {
        /* Was nowrap — with a long balance (many digits) the profile box
           had nowhere to go and spilled past the topbar's right edge
           instead of just moving to its own line. flex-start (not
           space-between) keeps the burger flush left in every case;
           topbar-user-wrap's own auto margins above handle its position.
           Kept as a dormant safety net for extreme cases — the sizing
           above should keep this from ever actually triggering. */
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        row-gap: 8px !important;
    }

    .topbar:has(.main-nav.is-open) {
        flex-wrap: wrap !important;
    }
}

.free-case-banner.referral-case-banner {
    background: linear-gradient(135deg, rgba(255, 180, 60, .20) 0%, rgba(255, 110, 60, .14) 100%) !important;
    border-color: rgba(255, 180, 60, .32) !important;
    box-shadow: 0 0 0 1px rgba(255, 180, 60, .1) inset, 0 14px 32px rgba(0, 0, 0, .22) !important;
}

.referral-case-banner .free-case-banner-kicker {
    color: rgba(255, 180, 60, .95) !important;
}

.roulette-top-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.roulette-skip-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.roulette-skip-btn.is-consumed {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 760px) {
    /* Extra headroom for the floating skip button below — with a short
       1-line case title the reel used to start right under the close
       button, leaving no room for the button to sit above it. */
    #rouletteModal #rouletteWindows {
        margin-top: 70px !important;
    }

    #rouletteModal .roulette-skip-btn {
        /* top is set dynamically in JS (positionRouletteSkipBtn) — it has to
           track the reel's real position, which shifts with the case title's
           line count (1-3 lines) and differs between the pick-mode and
           regular spin layouts. This is just a sane fallback before JS runs. */
        position: fixed;
        right: 14px;
        top: 68px;
        z-index: 20;
        padding: 6px 12px;
        font-size: 11px;
        min-height: unset;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    }
}

/* Гасим НАЧИНКУ, а не саму карточку: прозрачность на родителе создаёт
   отдельный слой, и ребёнок не может оказаться ярче — причина невывода
   тонула в серости вместе с карточкой, хотя это единственное, что тут надо
   прочитать. */
.wdr-item-card.is-locked {
    cursor: not-allowed;
}

.wdr-item-card.is-locked .wdr-item-media,
.wdr-item-card.is-locked .wdr-item-name,
.wdr-item-card.is-locked .wdr-item-value {
    opacity: .38;
    filter: grayscale(.7);
}

.wdr-item-card.is-locked:hover {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
    transform: none;
}

@media (max-width: 480px) {
  .pet-deposit-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 6px;
  }
  .pet-deposit-card {
    padding: 6px 4px;
    gap: 3px;
  }
  .pet-deposit-card-img {
    width: 38px;
    height: 38px;
  }
  .pet-deposit-card-emoji {
    font-size: 20px;
  }
  .pet-deposit-card-name {
    font-size: 9px;
  }
  .pet-deposit-card-value {
    font-size: 9px;
  }
  .pet-deposit-qty-row {
    height: 22px;
  }
  .pet-qty-btn {
    width: 20px;
    height: 22px;
    font-size: 13px;
  }
  .pet-qty-num {
    font-size: 11px;
    min-width: 16px;
    padding: 0 2px;
  }
}

.pet-deposit-back-btn {
  margin-bottom: 12px;
  align-self: flex-start;
}

.chsub-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 14, .78);
    backdrop-filter: blur(8px);
    padding: 16px;
    animation: chsubFadeIn .2s ease;
}

@keyframes chsubFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chsub-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 36px 26px 28px;
    text-align: center;
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(88, 166, 255, .22), transparent 60%),
        linear-gradient(160deg, #131c2b, #0a0f18);
    border: 1px solid rgba(88, 166, 255, .24);
    border-radius: 20px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    animation: chsubPop .32s cubic-bezier(.2, .9, .3, 1.3);
}

@keyframes chsubPop {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.chsub-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.chsub-close:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .24);
}

/* Free-case "complete tasks to unlock" modal — the original single-modal's
   hero ring/title/subtitle header (.chsub-ring/-title/-sub, restored below)
   followed by tappable task rows + one bottom CTA, in the same dark card
   chrome every dynamic overlay in the app shares (.chsub-overlay/-card). */

.chsub-ring {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50% !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #58A6FF, #1B4F91);
    box-shadow: 0 0 0 6px rgba(88, 166, 255, .14), 0 14px 30px rgba(88, 166, 255, .3);
}

.chsub-ring--gift {
    background: linear-gradient(135deg, #ffb545, #b5650a);
    animation: chsubRingBreatheGold 2.6s ease-in-out infinite;
}

@keyframes chsubRingBreatheGold {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255, 181, 69, .16), 0 14px 30px rgba(255, 150, 40, .32); }
    50%      { box-shadow: 0 0 0 9px rgba(255, 181, 69, .24), 0 18px 38px rgba(255, 150, 40, .42); }
}

.chsub-ring-glyph {
    font-size: 26px;
    display: inline-block;
    transform: rotate(-38deg) translate(-1px, 1px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.chsub-ring-glyph--plain {
    transform: none;
}

.chsub-title {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 8px;
}

.chsub-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    margin-bottom: 24px;
}

.freecase-tasks-card {
    max-width: 380px;
}

.freecase-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    text-align: left;
}

.freecase-task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.freecase-task-row:hover {
    background: rgba(88, 166, 255, .12);
    border-color: rgba(88, 166, 255, .4);
}

.freecase-task-row.is-loading {
    opacity: .6;
    pointer-events: none;
}

.freecase-task-row.is-done {
    cursor: default;
    background: rgba(88, 224, 141, .08);
    border-color: rgba(88, 224, 141, .3);
}

.freecase-task-row.is-done:hover {
    background: rgba(88, 224, 141, .08);
    border-color: rgba(88, 224, 141, .3);
}

.freecase-task-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #58A6FF, #1B4F91);
}

.freecase-task-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%);
}

.freecase-task-icon-glyph {
    font-size: 17px;
    color: #fff;
    transform: rotate(-38deg) translate(-1px, 1px);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}

.freecase-task-label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.freecase-task-arrow {
    flex-shrink: 0;
    font-size: 16px;
    color: #58A6FF;
}

.freecase-task-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: #58e08d;
    background: rgba(88, 224, 141, .16);
    border: 1px solid rgba(88, 224, 141, .4);
}

.freecase-tasks-done-btn {
    width: 100%;
}

/* .profile-hero at line ~11167 sets flex-direction:row / align-items:center
   / flex-wrap:nowrap with !important, UNCONDITIONALLY (not inside a media
   query) — so its 3 children (user block, wallet area, wager bar) always
   try to sit in one row. On mobile that's ~360px for ~360+155+194px of
   content, so the wager bar overflowed off the right edge and overlapped
   the balance/avatar. None of the existing mobile overrides could win
   against it since they don't mark flex-direction/flex-wrap !important.
   This has to appear after that rule in the cascade (media queries add no
   specificity) to actually override it.

   Fix keeps the original row direction (avatar+name and balance+wallet
   share one line — .profile-user-block/.profile-username already have
   flex-shrink/ellipsis set up for exactly this) and just lets it wrap,
   forcing the wager bar onto its own second line via flex-basis:100%. */
@media (max-width: 760px) {
    .profile-hero {
        flex-wrap: wrap !important;
    }

    .profile-user-block {
        /* the unconditional flex:1 1 auto rule elsewhere makes this greedily
           grow to fill the row, leaving no room for the wallet area beside
           it. flex-basis:auto + max-width doesn't reliably stop the
           wrap-line decision in every engine (it can pick the line break
           using the pre-clamp hypothetical size) — an explicit pixel basis
           sidesteps that. */
        flex: 0 1 180px !important;
        max-width: 180px !important;
    }

    .profile-wallet-area {
        flex: 0 1 auto !important;
        margin-left: auto !important;
    }

    #profileWagerBar {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 4px;
    }
}

/* ─── Кнопка медового ивента в шапке ──────────────────────────────────────
   Отличается от остальных пунктов намеренно: всегда золотая и всегда светится,
   даже когда неактивна, — это витрина ивента, а не обычный раздел. Скрыта
   классом is-hidden, пока applyHoneyEventNav не увидит идущий ивент. */
.nav-btn-event.is-hidden { display: none !important; }

.nav-btn-event {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid rgba(245, 158, 11, .55) !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, .16) 0%, rgba(255, 201, 74, .09) 50%, rgba(184, 116, 7, .16) 100%) !important;
    color: #FFC94A !important;
    font-weight: 800;
    letter-spacing: .04em;
    overflow: hidden;
    animation: navEventGlow 2.6s ease-in-out infinite;
}
.nav-btn-event:hover {
    border-color: rgba(255, 201, 74, .95) !important;
    color: #FFE7AA !important;
    transform: translateY(-1px);
}
/* Селектор намеренно раздут: у каждой палитры есть своё
   `body.palette-X .nav-btn.active` с !important и специфичностью (0,3,1),
   которое иначе красит активную кнопку ивента в синий цвет темы.
   `body[class]` добавляет вес, не привязываясь к конкретной палитре. */
body[class] .nav-btn.nav-btn-event.active {
    border-color: #FFC94A !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, .34) 0%, rgba(255, 201, 74, .2) 50%, rgba(184, 116, 7, .34) 100%) !important;
    color: #FFE7AA !important;
}

/* Медовый блик, проезжающий по кнопке. */
.nav-btn-event::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -90%;
    width: 45%;
    height: 220%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 231, 170, .38) 50%, transparent 80%);
    transform: skewX(-16deg);
    animation: navEventShine 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes navEventGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(245, 158, 11, .18), 0 0 14px rgba(245, 158, 11, .28); }
    50%      { box-shadow: 0 0 0 1px rgba(245, 158, 11, .34), 0 0 26px rgba(245, 158, 11, .55); }
}
@keyframes navEventShine {
    0%, 100% { left: -90%; opacity: 0; }
    38%      { left: 150%; opacity: 1; }
    39%      { left: 150%; opacity: 0; }
}

.nav-bee {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    overflow: visible;
    animation: navBeeHover 1.9s ease-in-out infinite;
}
.nav-bee-body   { fill: #FFC94A; }
.nav-bee-stripe { stroke: #4a2d00; stroke-width: 1.6; stroke-linecap: round; }
.nav-bee-eye    { fill: #3a2200; }
.nav-bee-antenna{ stroke: #4a2d00; stroke-width: 1.3; stroke-linecap: round; fill: none; }
.nav-bee-wing {
    fill: rgba(255, 252, 235, .72);
    transform-origin: 12px 9px;
    animation: navBeeWing .18s ease-in-out infinite alternate;
}

@keyframes navBeeHover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@keyframes navBeeWing {
    from { transform: scaleY(1); }
    to   { transform: scaleY(.62); }
}

/* Уважаем системную настройку: постоянное свечение и машущие крылья —
   ровно тот вид движения, который просят отключить. */
@media (prefers-reduced-motion: reduce) {
    .nav-btn-event,
    .nav-btn-event::after,
    .nav-bee,
    .nav-bee-wing { animation: none !important; }
    .nav-btn-event { box-shadow: 0 0 0 1px rgba(245, 158, 11, .3), 0 0 16px rgba(245, 158, 11, .35); }
}


/* ─── Партнёрская программа: заявка и субпартнёрство ─────────────────────── */

.pa-pitch {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 12px;
}

.pa-perks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pa-perks li {
    position: relative;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
}

.pa-perks li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-3);
    box-shadow: 0 0 10px rgba(88, 166, 255, .55);
}

.pa-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pa-status {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.pa-status.is-pending { color: var(--warning); font-weight: 700; }
.pa-status.is-declined { color: #FF5C5C; font-weight: 700; }
.pa-status.is-approved { color: var(--success); font-weight: 700; }

/* ── Модалка анкеты ── */

.pa-modal-card {
    width: min(560px, 94vw);
    max-height: min(680px, 88vh);
    position: relative;
}

.pa-modal-card .oos-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.pa-modal-card .oos-modal-title {
    padding-right: 40px;
    letter-spacing: -.4px;
}

.pa-rules-list {
    margin-bottom: 6px;
}

.pa-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.pa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: text;
}

.pa-field-wide {
    grid-column: 1 / -1;
}

.pa-field > span {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

.pa-field > span i {
    font-style: normal;
    color: var(--accent-3);
}

.pa-field input,
.pa-field select,
.pa-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
}

.pa-field textarea {
    resize: vertical;
    min-height: 62px;
    line-height: 1.5;
}

.pa-hint {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 10px;
}

.pa-invited-note {
    padding: 10px 12px;
    border: 1px solid rgba(88, 166, 255, .28);
    border-radius: 10px;
    background: rgba(88, 166, 255, .07);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
}

.pa-error {
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 92, 92, .35);
    border-radius: 10px;
    background: rgba(255, 92, 92, .08);
    font-size: 12.5px;
    line-height: 1.45;
    color: #FF8A8A;
}

/* На первом шаге кнопка одна — она должна стоять справа, как во всех
   остальных окнах. Разнос по краям нужен только на шаге анкеты, где слева
   «Назад», справа «Отправить». */
#partnerApplyStep2Footer {
    justify-content: space-between;
}

/* На сайте нет общего вида для disabled-кнопки: у модалки правил депозита
   заблокированная «Продолжить» выглядит ровно как рабочая. Чинить это
   глобально здесь не место, но своя кнопка обязана показывать, что она пока
   не нажимается. */
.pa-modal-card .primary-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.5);
}

@media (max-width: 560px) {
    .pa-form { grid-template-columns: 1fr; }
    .pa-modal-card .oos-modal-body { padding: 24px 18px 16px; }
    .pa-modal-card .oos-modal-footer { padding: 12px 18px 18px; }
}

/* ── Карточка субпартнёрства ── */

.sp-note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 12px;
}

.sp-note b {
    color: var(--accent-3);
}

.sp-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    font-size: 13px;
}

.sp-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.sp-row-earned {
    flex-shrink: 0;
    font-weight: 800;
    color: var(--success);
}

.sp-row.is-pending .sp-row-earned {
    color: var(--warning);
    font-weight: 700;
    font-size: 12px;
}

.sp-row-off {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.sp-empty {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
}

/* ── Карточка ленты: сам предмет крупнее ────────────────────────────────────
   Картинка была 40×40 в карточке 118×194 с отступами 8. Под содержимое там
   102×178, а занято было 67 — сто одиннадцать пикселей по высоте просто
   пустовали, и предмет, ради которого ленту и крутят, оказывался вчетверо
   меньше рамки вокруг себя. Числа замерены на живой вёрстке, не на глаз.

   Размер САМОЙ карточки не трогаем: её ширину читает анимация (шаг ленты
   берётся с реальных элементов), да и число предметов в кадре менять не
   просили. Растёт только предмет внутри.

   Обёртке .roulette-emoji ОБЯЗАТЕЛЬНО поднимать min-height вместе с
   картинкой. Первая версия этой правки обнулила его — и картинка исчезла
   совсем: у неё глобально стоит max-height:100%, а сто процентов от схлопнутой
   в ноль обёртки это ноль.

   !important и позиция в самом конце файла — вынужденно: правило
   .roulette-image ниже по каскаду задаёт 40×40 !important, и запись без него
   проигрывает. */
#rouletteModal.roulette-open .roulette-item:not(.compact) .roulette-emoji {
    min-height: 96px !important;
    /* Кегль — запасной вариант для предметов без картинки: в разметке там
       эмодзи текстом. */
    font-size: 64px !important;
}

#rouletteModal.roulette-open .roulette-item:not(.compact) .roulette-image {
    width: 96px !important;
    height: 96px !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Мультиоткрытие: карточка 96×139, под содержимое 80×123 — картинка 72
   помещается вместе с именем и ценой с запасом. */
#rouletteModal.roulette-open .roulette-item.compact .roulette-emoji {
    min-height: 56px !important;
    font-size: 40px !important;
}

#rouletteModal.roulette-open .roulette-item.compact .roulette-image {
    width: 56px !important;
    height: 56px !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* ── Имя предмета в ленте: перенос вместо многоточия ────────────────────────
   Было две конкурирующие записи: #rouletteModal .roulette-name с
   white-space:nowrap и эллипсисом, и .roulette-name с -webkit-line-clamp:2.
   Побеждала первая — по специфичности у неё id, — поэтому в ленте имя всегда
   резалось в одну строку: «ROSEY A…», «LA SUPR…», «FOXINI L…».

   Места под имя хватает с запасом: карточка 194 при отступах 8, картинка 96 и
   цена 13 — под имя остаётся около 69 пикселей, это четыре строки. Так что
   переносим, а обрезать нечего.

   overflow-wrap:anywhere нужен именно anywhere, а не break-word: у части имён
   одно слово длиннее строки («Hopilikalika»), а break-word такое слово рвать
   отказывается, пока в строке есть другая точка переноса. */
#rouletteModal .roulette-name,
#rouletteModal.roulette-open .roulette-name {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: none !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
}

/* Ступени кегля для длинных имён. Класс вешает createRouletteWindow по длине
   строки — см. комментарий там же о том, почему не замером. */
#rouletteModal .roulette-name.name-long {
    font-size: 11px !important;
    letter-spacing: .01em !important;
}

#rouletteModal .roulette-name.name-xlong {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
}

/* В мультиоткрытии карточка уже (80 под содержимое против 102) и ниже, так
   что те же имена требуют ещё меньшего кегля. */
/* Компактная карточка 96x139 — под содержимое всего 80x123. При картинке 72
   и переносе имени 138 карточек из 225 вылезали за край: под имя оставалось
   меньше строки. Картинка ужата до 56, кегли — до значений ниже. */
#rouletteModal .roulette-item.compact .roulette-name {
    font-size: 11px !important;
}

#rouletteModal .roulette-item.compact .roulette-name.name-long {
    font-size: 9.5px !important;
}

#rouletteModal .roulette-item.compact .roulette-name.name-xlong {
    font-size: 8px !important;
}

/* ── Свой список «Чем занимаешься» ──────────────────────────────────────────
   Нативный select оставался единственным местом формы, которое рисует
   система: на Windows — свой выпадающий список поверх тёмной модалки, на
   телефоне — колесо во весь экран. Здесь всё своё.

   Триггер намеренно повторяет метрику полей ввода один в один (37px за счёт
   тех же отступов), иначе он снова выбьется из ряда — этим уже болел прежний
   select. */
.pa-field:has(.pa-picker) { cursor: default; }

.pa-picker { position: relative; }

.pa-picker-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

/* Шеврон рисуем псевдоэлементом, а не картинкой: его надо разворачивать при
   открытии, а фоновую картинку не повернёшь. */
.pa-picker-trigger::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 2px;
    border-right: 1.8px solid var(--muted);
    border-bottom: 1.8px solid var(--muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease, border-color .18s ease;
}

.pa-picker-trigger:hover { border-color: rgba(56, 104, 192, .35); }
.pa-picker-trigger:hover::after { border-color: #7f9ab5; }

.pa-picker.is-open .pa-picker-trigger {
    border-color: rgba(56, 104, 192, .5);
    background: rgba(255, 255, 255, .06);
}
.pa-picker.is-open .pa-picker-trigger::after {
    transform: translateY(2px) rotate(225deg);
    border-color: #58A6FF;
}

.pa-picker-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid rgba(56, 104, 192, .28);
    background: var(--panel);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
}

.pa-picker-list li {
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.pa-picker-list li:hover,
.pa-picker-list li.is-active { background: rgba(56, 104, 192, .18); color: #fff; }

/* Выбранный помечаем галкой, а не только цветом: цвет один в один совпал бы с
   наведением, и в списке нельзя было бы понять, что выбрано сейчас. */
.pa-picker-list li[aria-selected="true"] { color: #58A6FF; }
.pa-picker-list li[aria-selected="true"]::after { content: " ✓"; }

/* ── Лента рулетки на узком экране ───────────────────────────────────────────
   Идёт в паре с адаптивной шириной карточки выше (min(118px, доля вьюпорта)).
   Числа тут были подогнаны под карточку ~56px (делители 6.5/7.5): картинка
   28px, имя 9px в три строки. После того как карточка на телефоне стала
   ~105px (компактная ~83px), это содержимое повисло крошечным пятном в центре
   широкой плитки -- поэтому оно растёт вместе с карточкой.
   Порог 520px, а не общий 760px: на планшете карточка упирается в прежний
   потолок 118px, и уменьшать там нечего. */
@media (max-width: 520px) {
    #rouletteModal.roulette-open .roulette-item {
        padding: 7px !important;
    }

    #rouletteModal.roulette-open .roulette-item:not(.compact) .roulette-image {
        width: 46px !important;
        height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }

    #rouletteModal.roulette-open .roulette-item.compact .roulette-image {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    #rouletteModal.roulette-open .roulette-item:not(.compact) .roulette-emoji {
        font-size: 30px !important;
        min-height: 38px !important;
    }

    #rouletteModal.roulette-open .roulette-item.compact .roulette-emoji {
        min-height: 30px !important;
    }

    /* Две строки, а не три: в карточке ~105px строка держит 12-14 символов, и
       длинные имена вроде «Halloween Base» укладываются в две без эллипсиса. */
    #rouletteModal.roulette-open .roulette-name {
        font-size: 11px !important;
        letter-spacing: 0 !important;
        -webkit-line-clamp: 2 !important;
        line-height: 1.15 !important;
    }

    #rouletteModal.roulette-open .roulette-value {
        font-size: 10px !important;
    }

}

/* ── Мутации в депозите ──────────────────────────────────────────────────────
   Чип стоит прямо в строке «Выбрано», рядом с ценой: игрок видит и предмет, и
   как меняется сумма, не уходя с экрана выбора. Появляется только у выбранных
   позиций, поэтому тому, кто сдаёт без мутаций, ничего лишнего не показывается
   и ни одного лишнего действия не требуется.

   Шрифт под мутацию намеренно НЕ красим: серый «Фантом» и чёрно-белый
   «Инь-Ян» читались бы хуже обычного текста. Принадлежность передаёт свечение
   рамки в цвет мутации — он посчитан из самой картинки. */
.pet-sel-mut {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    /* Спокойный синий контур — середина между двумя крайностями, которые
       владелец забраковал: серый пунктир терялся рядом с ценой, а яркая
       заливка со свечением и пульсацией лезла в глаза. Цвет акцентный, чтобы
       кнопку было видно, но без подсветки и анимации: внимание она забирает
       ровно один раз, когда игрок скользит взглядом по строке. */
    border: 1px solid rgba(88, 166, 255, .55);
    background: rgba(88, 166, 255, .07);
    color: #9fc9f5;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}

/* Реакция только на наведение — то есть тогда, когда игрок уже потянулся к
   кнопке. Пульсацию убрал: постоянно мигающий элемент в форме, куда заходят
   по несколько раз в день, быстро начинает раздражать. */
.pet-sel-mut:hover {
    border-color: #58A6FF;
    background: rgba(88, 166, 255, .16);
    color: #fff;
}

/* Мутация выбрана — рамка сплошная и светится своим цветом. */
.pet-sel-mut.is-set {
    animation: none;
    border-style: solid;
    border-color: var(--mut-glow, #8b96a6);
    color: #fff;
    background: color-mix(in srgb, var(--mut-glow, #8b96a6) 14%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--mut-glow, #8b96a6) 28%, transparent);
}

.pet-sel-mut-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.pet-sel-split {
    border: 0;
    background: none;
    color: var(--muted, #9aa4b2);
    font-size: 10px;
    text-decoration: underline dotted;
    cursor: pointer;
    padding: 0 2px;
}

.pet-sel-split:hover { color: #fff; }

/* Подсказка гаснет навсегда после первого выбора мутации — см. app.js,
   hasEverPickedMutation. */
.pet-sel-hint {
    margin: 2px 0 8px;
    padding: 6px 2px;
    /* Без рамки и заливки: подсказка нужна один раз и исчезает навсегда после
       первого выбора, поэтому оформлять её как отдельный блок незачем — вместе
       с синей кнопкой рядом получалось два кричащих элемента в одной строке. */
    color: var(--muted, #9aa4b2);
    font-size: 11.5px;
    line-height: 1.35;
}

.pet-sel-hint b { color: #9fc9f5; }

/* Панель выбора раскрывается под строкой, а не модалкой поверх экрана: так
   остаётся виден сам брейнрот и его цена. */
.pet-mut-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 6px;
    margin: 6px 0 10px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .35);
}

.pet-mut-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    color: #e8edf5;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.pet-mut-opt:hover,
.pet-mut-opt.is-current {
    border-color: var(--mut-glow, rgba(255, 255, 255, .5));
    box-shadow: 0 0 12px color-mix(in srgb, var(--mut-glow, #ffffff) 40%, transparent);
    background: color-mix(in srgb, var(--mut-glow, #ffffff) 12%, transparent);
}

/* Кубик мутации в списке выбора — ТОЛЬКО подстраховка: он рисуется, когда арта
   этой пары нет и показывать пришлось бы обычного брейнрота (тогда строки были
   бы неотличимы). Обычный вид строки — сам мутировавший брейнрот, поэтому
   превью ниже крупнее: главное в строке, во что превратится предмет. */
.pet-mut-opt-cube {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.pet-mut-opt-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

/* flex:1 без min-width:0 не даёт элементу стать уже своего содержимого — у
   длинных названий («Radioactive») имя распирало карточку и выталкивало
   множитель за её правый край на 11px. min-width:0 разрешает ужиматься, а
   перенос по буквам не даёт длинному слову сделать это снова. */
/* overflow-wrap:anywhere убирает переполнение, но рвёт слова где попало —
   получались «Radioac tive» и «Phanto m» с одной буквой на второй строке.
   Слова больше не режем: колонке дана ширина, в которую помещается самое
   длинное название, а на совсем узких экранах остаётся многоточие. */
.pet-mut-opt-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

/* Множитель — то, ради чего игрок и смотрит в этот список, поэтому он не
   сжимается и не переносится: ужимается имя, а не цифра. */
.pet-mut-opt-x {
    flex: 0 0 auto;
    color: var(--mut-glow, #9aa4b2);
    font-weight: 800;
    white-space: nowrap;
}

.pet-mut-none { color: var(--muted, #9aa4b2); }

/* Метка у мутации из прошлого депозита — вторая из трёх мер против усталости
   (первая: «без мутации» по умолчанию, третья: «разделить» только там, где
   в позиции больше одной штуки). */
.pet-mut-opt-last {
    position: absolute;
    top: -7px;
    right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #58A6FF;
    color: #04121f;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 520px) {
    /* На телефоне 2 колонки вместо трёх: втиснуть «Radioactive» в треть
       узкого экрана можно только многоточием, а название мутации важнее
       лишней колонки. */
    .pet-mut-picker { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .pet-sel-mut { font-size: 10px; padding: 5px 9px; }

    /* Пальцем в кнопку 30px попадать неудобно — на узком экране поднимаем
       высоту до 38px за счёт вертикальных отступов, ширину не трогаем, иначе
       колонок станет две и меню вытянется. */
    .pet-mut-opt { padding: 10px 8px; }
    .pet-sel-split { padding: 4px; }
}

/* ── Строка «Выбрано»: предмет сверху, действия под ним ──────────────────────
   Кнопку выбора мутации сначала пробовали приглушённой (терялась) и яркой с
   пульсацией (лезла в глаза) — обе крайности владелец забраковал. Дело
   оказалось не в цвете, а в месте: стоя справа, она сливалась с ценой.
   Теперь у неё отдельная строка под названием, с воздухом вокруг и без
   соседей — заметность даёт позиция, а не подсветка. */
.pet-sel-row {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.pet-sel-row:last-of-type { border-bottom: 0; }

.pet-sel-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pet-sel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Отступ слева ровно под шириной иконки предмета — кнопка визуально
       принадлежит своему брейнроту, а не висит сама по себе. */
    margin: 6px 0 0 36px;
}

/* На своей строке кнопке можно быть крупнее: место больше не делится с ценой. */
.pet-sel-actions .pet-sel-mut {
    padding: 6px 14px;
    font-size: 12px;
}

@media (max-width: 520px) {
    .pet-sel-actions { margin-left: 30px; gap: 8px; }
}

/* ── Стейкинг баланса ────────────────────────────────────────────────────────
   Полоса показывает, сколько частей уже забрано — это главный ориентир: игрок
   должен с одного взгляда понимать, сколько ещё раз нужно вернуться. */
.staking-progress { margin-bottom: 12px; }

.staking-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.staking-progress-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #58A6FF, #7ee3a0);
    transition: width .35s ease;
}

.staking-progress-label {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted, #9aa4b2);
}

.staking-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.staking-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
}

.staking-stat strong { font-size: 14px; }

@media (max-width: 520px) {
    /* На узком экране три колонки схлопываются в нечитаемые столбики цифр. */
    .staking-stats { grid-template-columns: 1fr; }
    .staking-stat { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── Группы вкладок админки ──────────────────────────────────────────────────
   38 вкладок сплошной лентой невозможно просматривать глазами: нужную ищешь
   перечитыванием всего ряда. Теперь они разложены по смыслу — Обзор, Игроки,
   Деньги, Игры, Маркетинг, Контент, Система — каждая группа со своей подписью
   и отделена от соседней.

   Контейнер перестаёт быть простым flex-wrap: группы идут блоками, а кнопки
   внутри группы переносятся сами. */
.ops-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 18px;
}

.ops-tab-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Вертикальная черта вместо рамки вокруг всей группы: она отделяет
       соседей, не превращая панель в набор коробок. */
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

/* У первой группы черта не нужна — слева от неё ничего нет. */
.ops-tab-group:first-child {
    padding-left: 0;
    border-left: 0;
}

.ops-tab-group-title {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5A7086;
}

.ops-tab-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Кнопок стало видно больше за раз, поэтому они могут быть компактнее —
   иначе строка групп занимает пол-экрана. */
.ops-tab-group .ops-tab {
    padding: 7px 12px;
    font-size: 12px;
}

@media (max-width: 760px) {
    /* На телефоне группы идут одна под другой: в ряд они не помещаются, а
       горизонтальная прокрутка в админке хуже вертикальной. */
    .ops-tabs { flex-direction: column; gap: 12px; }
    .ops-tab-group {
        padding-left: 0;
        border-left: 0;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        width: 100%;
    }
    .ops-tab-group:first-child { padding-top: 0; border-top: 0; }
}

/* Поиск по разделам админки: узкое поле над группами вкладок. Специально не
   на всю ширину — это вспомогательный элемент, а не главный вход в панель. */
.ops-tab-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
}

.ops-tab-search .ops-input {
    max-width: 320px;
    padding: 8px 12px;
    font-size: 13px;
}

.ops-tab-search-hint {
    font-size: 12px;
    color: var(--muted, #9aa4b2);
}

.ops-tab-search-hint.is-empty { color: #ff6b6b; }

/* У группы задан display:flex, а он сильнее атрибута hidden — без этих двух
   правил при поиске оставались висеть заголовки групп, в которых не осталось
   ни одной кнопки. */
.ops-tab-group[hidden] { display: none !important; }
.ops-tab[hidden] { display: none !important; }

@media (max-width: 760px) {
    .ops-tab-search .ops-input { max-width: none; flex: 1; }
}

/* Результаты поиска по содержимому панели: список под полем. Показывает, ЧТО
   нашлось и ГДЕ оно лежит, потому что название вкладки часто не подсказывает
   ничего — карточка «Нет в наличии» живёт в «Выводах». */
.ops-tab-search { position: relative; flex-wrap: wrap; }

.ops-tab-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    width: min(420px, 100%);
    margin-top: 4px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #0b1220;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.ops-search-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #e8edf5;
    text-align: left;
    cursor: pointer;
}

.ops-search-result:hover { background: rgba(88, 166, 255, .14); }

.ops-search-result-text { font-size: 13px; font-weight: 700; }

.ops-search-result-where {
    font-size: 11px;
    color: var(--muted, #9aa4b2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Короткая вспышка на карточке, к которой перешли: на длинной странице иначе
   непонятно, куда именно ты попал. */
@keyframes opsSearchFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0); }
    30%      { box-shadow: 0 0 0 3px rgba(88, 166, 255, .55); }
}

.ops-search-flash { animation: opsSearchFlash 1.5s ease; }

@media (prefers-reduced-motion: reduce) {
    .ops-search-flash { animation: none; outline: 2px solid rgba(88, 166, 255, .6); }
}

/* Место в очереди под таймером ожидания депозита. Таймер отвечает «сколько
   ждать», но не отвечает «а очередь вообще идёт» — позиция отвечает. */
.pet-queue-position {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #58A6FF;
    text-align: center;
}

/* ── Модалка трейда на телефоне ──────────────────────────────────────────────
   У игрока пять минут на то, чтобы скопировать ник бота и уйти в Roblox, а
   кнопки копирования — 23px высотой: попасть пальцем с первого раза трудно, и
   каждая промашка стоит части этих пяти минут. Поднимаем до 44px — это
   минимум, на который надёжно попадают, — и растягиваем на всю ширину, чтобы
   мимо было уже не промахнуться.

   Порог 520px: на планшете и десктопе мышью хватает и прежнего размера. */
@media (max-width: 520px) {
    .trade-copy-btn {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 12px 14px;
        font-size: 13px;
    }

    /* Кнопки внизу модалки — по той же причине: «Отменить заявку» рядом с
       «Закрыть» на 23px это лотерея, а цена ошибки — отменённый депозит. */
    .pet-deposit-trade-foot .ghost-btn,
    .pet-deposit-trade-foot button {
        min-height: 44px;
    }

    /* Поле с ником бота — то, что игрок читает и копирует руками, если кнопка
       не сработала. Мелкий шрифт тут читается хуже всего. */
    .pet-deposit-trade-input {
        font-size: 15px;
        min-height: 44px;
    }
}

/* ── Мутации брейнрота прямо из карточки пула ─────────────────────────────
   Кнопка живёт в левом верхнем углу: правый занят крестиком, который карточка
   рисует через ::after, когда предмет выбран в пул. */
.oos-card-mut {
    position: absolute;
    top: 3px;
    left: 4px;
    z-index: 1;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: var(--muted);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    cursor: pointer;
    opacity: .55;
    transition: opacity .14s, color .14s, border-color .14s;
}

.oos-card:hover .oos-card-mut { opacity: 1; }

.oos-card-mut.has-set {
    opacity: 1;
    color: #FFD479;
    border-color: rgba(255, 212, 121, .45);
    background: rgba(255, 212, 121, .12);
}

.mut-var-modal { max-width: 860px; width: min(860px, 94vw); }

.mut-var-pet-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}

.mut-var-list {
    max-height: 62vh;
    overflow-y: auto;
    padding: 4px 2px;
}

.mut-var-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Выключенная пара остаётся читаемой, но явно гасится: владелец должен видеть
   её настройки, а не гадать, почему строка пропала. */
.mut-var-row.is-off { opacity: .45; }

.mut-var-pic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 74px;
    flex-shrink: 0;
}

.mut-var-pic img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.mut-var-nopic {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--muted);
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 8px;
}

.mut-var-upload,
.mut-var-clear {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    cursor: pointer;
}

.mut-var-upload:hover,
.mut-var-clear:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

.mut-var-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
    font-size: 13px;
}

.mut-var-name .muted { font-size: 11px; }

.mut-var-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.mut-var-f { max-width: 116px; }

.mut-var-eff {
    font-size: 12px;
    white-space: nowrap;
    margin-left: auto;
}

.mut-var-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
}

.mut-var-foot .mut-var-status { font-size: 12px; }

@media (max-width: 620px) {
    .mut-var-eff { margin-left: 0; }
    .mut-var-f { max-width: 100px; }
}

/* Строка варианта плотная: в ней шесть контролов, а глобальные ops-стили
   рассчитаны на просторные формы — 48px поля и заглавные подписи в 12px
   растягивали строку так, что подпись отрывалась от своего поля и читалась
   как заголовок соседней. */
.mut-var-row .ops-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mut-var-row .ops-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--muted);
}

.mut-var-row .ops-input {
    min-height: 30px;
    height: 30px;
    padding: 4px 7px;
    font-size: 12px;
}

/* Подвал не должен выглядеть продолжением последней строки: список
   прокручивается, и без границы обрезанная строка сливается с кнопкой. */
.mut-var-foot {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 10px 12px;
}

.mut-var-list { padding: 4px 12px; }

/* Своя подпись поля вместо .ops-label: тот стоит с
   text-transform:uppercase !important, и заглавная «МНОЖИТЕЛЬ» в 9px
   разъезжалась по ширине узкой колонки. */
.mut-var-f {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 116px;
}

.mut-var-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* ── Стейкинг: карточка должна выбиваться из ряда ────────────────────────────
   Раньше она была таким же плоским тёмным блоком, как реферальный код и
   бонусы вокруг, и владелец справедливо сказал, что её не видно. Синий на
   этой странице уже занят навигацией и кнопками, поэтому берём золото —
   и по смыслу это про деньги, и по цвету ни с чем не спорит. */
.staking-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 196, 92, .38);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(255, 196, 92, .16) 0%, rgba(255, 196, 92, 0) 55%),
        linear-gradient(160deg, #1c1408 0%, #120c06 60%, #0f0a05 100%);
    box-shadow: 0 0 0 1px rgba(255, 196, 92, .06), 0 18px 44px rgba(0, 0, 0, .5);
}

/* Тонкая золотая полоса сверху — якорь для глаза при прокрутке ленты карточек. */
.staking-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFC45C 25%, #FFE9B8 50%, #FFC45C 75%, transparent);
}

.staking-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.staking-title {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .01em;
    color: #FFE9B8;
}

.staking-sub {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
    max-width: 46ch;
}

.staking-head-badge {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    color: #2a1b04;
    background: linear-gradient(135deg, #FFD98A, #FFB33C);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(255, 179, 60, .32);
}

.staking-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.staking-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 6px 9px;
    cursor: pointer;
    text-align: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    transition: background .15s, border-color .15s, transform .15s;
}

.staking-plan:hover { background: rgba(255, 196, 92, .09); border-color: rgba(255, 196, 92, .34); }

.staking-plan.is-on {
    background: linear-gradient(160deg, rgba(255, 196, 92, .2), rgba(255, 196, 92, .07));
    border-color: #FFC45C;
    transform: translateY(-1px);
}

.staking-plan-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.staking-plan.is-on .staking-plan-name { color: #FFE9B8; }

/* Процент — то, ради чего игрок сюда смотрит, поэтому он и есть герой карточки. */
.staking-plan-pct {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05;
    color: #FFC45C;
}

.staking-plan-days { font-size: 11px; color: var(--muted); }

.staking-amount-row {
    display: flex;
    gap: 8px;
}

.staking-amount-input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .34) !important;
    border: 1px solid rgba(255, 196, 92, .26);
    border-radius: 12px;
}

.staking-amount-input:focus {
    outline: none;
    border-color: #FFC45C;
}

.staking-start-btn {
    flex-shrink: 0;
    padding: 0 22px;
    min-height: 46px;
    font-size: 14px;
    font-weight: 900;
    color: #2a1b04;
    background: linear-gradient(135deg, #FFD98A, #FFB33C);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 179, 60, .3);
    transition: filter .15s, transform .15s;
}

.staking-start-btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }

.staking-start-btn:disabled {
    filter: grayscale(.7);
    opacity: .55;
    cursor: default;
    box-shadow: none;
}

.staking-active-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.staking-active-plan {
    font-size: 15px;
    font-weight: 900;
    color: #FFE9B8;
}

.staking-active-pct {
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 900;
    color: #2a1b04;
    background: linear-gradient(135deg, #FFD98A, #FFB33C);
    border-radius: 999px;
}

/* Полосу прогресса тоже перекрашиваем: синяя в золотой карточке выглядела
   как чужой элемент, случайно сюда попавший. */
.staking-card .staking-progress-bar > span {
    background: linear-gradient(90deg, #FFB33C, #FFE9B8) !important;
}

@media (max-width: 480px) {
    .staking-plans { gap: 6px; }
    .staking-plan { padding: 9px 4px 8px; }
    .staking-plan-pct { font-size: 17px; }
    .staking-title { font-size: 17px; }
    .staking-amount-row { flex-wrap: wrap; }
    .staking-start-btn { width: 100%; }
}

/* Строка срока в админке. Как и в карточке вариантов мутаций, глобальные
   ops-стили тут слишком просторные: шесть контролов в ряд не помещаются. */
.ops-staking-plan {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 10px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
}

.ops-staking-plan-on {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 190px;
}

.ops-staking-plan-on .sp-name {
    min-height: 32px !important;
    height: 32px;
    font-size: 13px;
    font-weight: 700;
}

.ops-staking-plan .sp-f {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 118px;
}

.ops-staking-plan .ops-label {
    font-size: 9px;
    letter-spacing: .02em;
}

.ops-staking-plan .ops-input {
    min-height: 32px !important;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
}

.ops-staking-plan-preview {
    flex: 1;
    min-width: 200px;
    font-size: 11.5px;
    text-align: right;
}

/* ── Бонусы: рефералка сверху, стейкинг отдельным блоком снизу ───────────────
   Раньше стейкинг стоял первой карточкой в реферальной колонке и читался как
   часть реферальной программы, хотя механика к ней отношения не имеет. Теперь
   это две помеченные зоны с разделителем между ними. */
.bonus-zone + .bonus-zone { margin-top: 26px; }

.bonus-zone-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.bonus-zone-title {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
}

.bonus-zone-note {
    font-size: 12px;
    color: var(--muted);
}

/* Зона стейкинга отбивается своим цветом ещё в заголовке — иначе граница
   между блоками читается только по тонкой линии. */
.bonus-zone-staking .bonus-zone-title { color: #FFC45C; }

.bonus-zone-staking .bonus-zone-head { border-bottom-color: rgba(255, 196, 92, .28); }

/* Стейкинг во всю ширину, но не растянутый на два монитора: карточка с тремя
   сроками и одним полем ввода на 1400px выглядела бы пустой. */
.bonus-zone-staking .staking-card { max-width: 720px; }

/* Рефералка «компактно»: та же сетка, но плотнее — она теперь верхний блок,
   и её задача поместиться в экран, а не занять его целиком. */
.bonus-zone-ref .bonus-section-card { padding: 15px 16px; }

.bonus-zone-ref .bonus-layout { gap: 14px; }

.bonus-zone-ref .bonus-col { gap: 12px; }

.bonus-zone-ref .panel-title { margin-bottom: 8px; }

.bonus-zone-ref .ref-code-row { padding: 9px 13px; }

@media (max-width: 900px) {
    .bonus-zone + .bonus-zone { margin-top: 20px; }
    .bonus-zone-staking .staking-card { max-width: none; }
}

/* Зона кода — самый верх страницы, без заголовка: карточка сама себя
   подписывает, а лишняя строка отодвинула бы стейкинг ещё ниже. */
.bonus-zone-code .bonus-section-card { padding: 15px 16px; }

.bonus-zone-code + .bonus-zone-staking { margin-top: 16px; }

/* Реферальная программа теперь ПОД стейкингом, и её отбивка должна быть
   заметнее: иначе кажется, что стейкинг просто оборвался. */
.bonus-zone-ref { margin-top: 28px; }

/* Карточка кода осталась одна в своей зоне и растянулась во всю страницу —
   кнопка «Скопировать» уезжала к правому краю. Равняем по карточке
   стейкинга, чтобы верх страницы читался одной колонкой. */
.bonus-zone-code .bonus-section-card { max-width: 720px; }

@media (max-width: 900px) {
    .bonus-zone-code .bonus-section-card { max-width: none; }
}

/* ── Свой раздел стейкинга ───────────────────────────────────────────────────
   Механика переехала из «Бонусов»: к рефералам она отношения не имеет, и в
   чужом разделе её просто не находили. Ограничение по ширине — то же, что
   было в бонусах: три срока и одно поле ввода не должны растягиваться на всю
   ширину монитора. */
.staking-view-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

/* В своём разделе карточка уже не спорит с соседями за внимание, но золото
   оставляем: оно опознаёт механику и в меню (иконка сейфа того же цвета). */
.staking-how { padding: 18px 20px; }

.staking-how-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.staking-how-list li::marker {
    color: #FFC45C;
    font-weight: 800;
}

.staking-how-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .staking-view-wrap { max-width: none; }
}

/* ── Раздел стейкинга: две колонки, страница заполнена ───────────────────────
   Одна карточка на пустой странице выглядела недоделкой. Раскладка та же, что
   у реферальной программы: главное слева, сводки справа. */
.staking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.staking-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* В своём разделе карточка занимает всю колонку: ограничение в 720px было
   нужно, пока она стояла одна посреди широкой страницы. */
.staking-col .staking-card { max-width: none; }

.staking-panel { padding: 16px 18px; }

.staking-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.staking-panel-head .panel-title { margin: 0; }

.staking-panel-head .muted { font-size: 12px; }

/* Итоги */
.staking-totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.staking-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.staking-total:last-child { border-bottom: none; padding-bottom: 0; }

.staking-total span { font-size: 12.5px; }

.staking-total strong { font-size: 15px; font-weight: 900; }

.staking-total strong.is-plus { color: #6EE7A8; }


/* История */
.staking-history { display: flex; flex-direction: column; gap: 6px; }

.staking-history-row {
    display: grid;
    grid-template-columns: minmax(70px, auto) 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    font-size: 12.5px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 9px;
}

.staking-history-plan { font-weight: 800; }

.staking-history-delta { font-weight: 900; }

.staking-history-delta.is-plus { color: #6EE7A8; }

.staking-history-delta.is-minus { color: #ff8b8b; }

.staking-history-when { font-size: 11px; white-space: nowrap; }

.staking-history-empty { font-size: 12.5px; line-height: 1.5; padding: 4px 0; }

@media (max-width: 900px) {
    .staking-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .staking-history-row { grid-template-columns: 1fr auto; row-gap: 4px; }
    .staking-history-when { grid-column: 1 / -1; }
}

/* Настройка награды в админке — своей строкой под полями срока. */
.ops-staking-reward {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.ops-staking-reward > .ops-label { align-self: center; }

.ops-staking-reward .sp-rtype {
    width: 110px;
    min-height: 32px !important;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
}

.ops-staking-reward .sp-rpick {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 12px;
}

.ops-staking-reward .sp-rqty-wrap { max-width: 70px; }

/* ── Раздел стейкинга: одна колонка вместо двух ──────────────────────────────
   Две колонки делили содержимое пополам, и высота раздела равнялась большей
   из них — 329px на экране в 797, меньше половины. Складываем всё в один
   поток: теперь высота это сумма панелей, а не максимум. Ширину держим
   читаемой, иначе строка «Заморожено за всё время ... 0» растянется на метр. */
.staking-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
    gap: 14px;
}

/* Колонки перестают быть колонками — их содержимое встаёт в общий поток,
   чтобы порядок панелей задавала разметка, а не вложенность. */
.staking-col {
    display: contents;
}

/* Карточка стейка — главное на странице, и масштаб должен это показывать. */
.staking-card { padding: 22px 24px; }

.staking-plan { padding: 15px 8px 13px; gap: 5px; }

.staking-plan-pct { font-size: 26px; }

.staking-plan-name { font-size: 12px; }

.staking-plan-days { font-size: 12px; }

.staking-plans { gap: 10px; margin-bottom: 16px; }

.staking-amount-input,
.staking-start-btn {
    min-height: 54px;
    font-size: 16px;
}

.staking-panel { padding: 18px 20px; }

.staking-total { padding-bottom: 12px; }

.staking-total strong { font-size: 17px; }

.staking-reward { padding: 12px 13px; }

.staking-history-row { padding: 12px; }

@media (max-width: 900px) {
    .staking-layout { max-width: none; }
}

@media (max-width: 480px) {
    .staking-card { padding: 16px 15px; }
    .staking-plan-pct { font-size: 20px; }
    .staking-amount-input,
    .staking-start-btn { min-height: 48px; font-size: 15px; }
}

/* ── Раздел стейкинга: ширина тоже должна работать ───────────────────────────
   Одна колонка в 780px дала высоту, но оставила 677px пустыми справа.
   Компромисс: то, что по своей природе широкое — карточка стейка с тремя
   сроками, награды, календарь на 30 клеток — тянется во всю ширину, а две
   короткие панели встают парой под ними. */
.staking-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: none;
    gap: 14px;
}

#stakingCard,
#stakingRewardsCard {
    grid-column: 1 / -1;
}

/* Сроки получили ширину — забираем и высоту: процент здесь главное число
   страницы, и на широкой карточке ему тесно в прежнем масштабе. */
.staking-plan { padding: 20px 10px 17px; }

.staking-plan-pct { font-size: 32px; }

.staking-plan-name { font-size: 12.5px; }

@media (max-width: 900px) {
    .staking-layout { grid-template-columns: minmax(0, 1fr); }
    .staking-plan { padding: 15px 8px 13px; }
    .staking-plan-pct { font-size: 22px; }
}

/* ── Награда за срок: пластина с подписью ────────────────────────────────────
   Строкой списка награда читалась как строчка прайса. Плитка с крупной
   иконкой и лентой срока читается как трофей, который дают за доведённый до
   конца стейк.
   Углы намеренно прямые: на сайте глобально стоит
   `* { border-radius: 0 !important }` (styles.css, строка 61), поэтому любое
   скругление здесь было бы мёртвым кодом, вводящим в заблуждение при чтении. */
.staking-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.staking-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px 14px;
    text-align: center;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.staking-reward.is-mine {
    background: linear-gradient(160deg, rgba(255, 196, 92, .16), rgba(255, 196, 92, .04));
    border-color: rgba(255, 196, 92, .5);
}

/* Пластина: золотая рамка, внутри картинка награды, снизу лента со сроком. */
.staking-reward-medal {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(255, 196, 92, .2), rgba(255, 196, 92, .04) 70%);
    border: 2px solid rgba(255, 196, 92, .55);
    box-shadow: inset 0 0 18px rgba(255, 179, 60, .12), 0 8px 20px rgba(0, 0, 0, .45);
    margin-bottom: 10px;
}

.staking-reward.is-mine .staking-reward-medal {
    border-color: #FFC45C;
    box-shadow: inset 0 0 22px rgba(255, 179, 60, .22), 0 8px 24px rgba(255, 179, 60, .3);
}

.staking-reward-img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.staking-reward-emoji { font-size: 42px; line-height: 1; }

/* Лента со сроком сидит на нижнем крае пластины. */
.staking-reward-ribbon {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 11px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    color: #2a1b04;
    background: linear-gradient(135deg, #FFD98A, #FFB33C);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}

.staking-reward-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #FFE9B8;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staking-reward-caption {
    font-size: 11px;
    color: var(--muted);
}

.staking-reward-kind {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 480px) {
    .staking-rewards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
    .staking-reward { padding: 14px 8px 12px; }
    .staking-reward-medal { width: 78px; height: 78px; }
    .staking-reward-img { width: 48px; height: 48px; }
}

/* ── Карточка стейка и итоги — одной строкой ─────────────────────────────────
   Карточка занимает левую половину, «Мой стейкинг» правую; всё остальное
   тянется во всю ширину. Соседство задано порядком в разметке, здесь только
   ширины. */
#stakingCard { grid-column: 1; }

#stakingRewardsCard {
    grid-column: 1 / -1;
}

/* Итоги растягиваются по высоте карточки стейка (в гриде это поведение по
   умолчанию), поэтому разгоняем строки по всей высоте — иначе три значения
   липнут к верху, а под ними висит пустота. */
.staking-col-side .staking-panel:first-child,
#stakingCard + .staking-panel {
    display: flex;
    flex-direction: column;
}

#stakingCard + .staking-panel .staking-totals {
    flex: none;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    #stakingCard { grid-column: 1 / -1; }
    #stakingCard + .staking-panel .staking-totals {
        flex: none;
        justify-content: flex-start;
    }
}

/* В первой версии раскладки стояло align-items: start — тогда колонки были
   независимыми и это было правильно. Теперь карточка стейка и итоги делят
   строку, и итоги должны тянуться до её высоты, иначе справа висит пустота. */
.staking-layout { align-items: stretch; }

/* История осталась одна в своей строке — пусть занимает всю ширину, а не
   половину с пустотой справа. */
.staking-col-side .staking-panel:last-child { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .staking-layout { align-items: start; }
}

/* ── Телефон: раздел стейкинга ───────────────────────────────────────────────
   На узком экране плиточная сетка наград ломалась: две в ряд, третья сиротой
   рядом с пустой ячейкой, а имена вроде «Strawberry Elephant» обрезались
   многоточием. Разворачиваем плитку в строку — картинка слева, текст справа:
   содержимое то же, но имя помещается целиком и сирот не остаётся. */
@media (max-width: 560px) {
    .staking-rewards { grid-template-columns: minmax(0, 1fr); gap: 8px; }

    .staking-reward {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 10px 12px;
    }

    .staking-reward-medal {
        width: 62px;
        height: 62px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .staking-reward-img { width: 40px; height: 40px; }

    .staking-reward-emoji { font-size: 28px; }

    /* Лента уезжает из-под картинки на её угол — в строке ей снизу места нет. */
    .staking-reward-ribbon {
        bottom: auto;
        top: -7px;
        left: -4px;
        transform: none;
        padding: 2px 7px;
        font-size: 8.5px;
    }

    /* Имя больше не обрезаем: в строке на него хватает ширины. */
    .staking-reward-name {
        white-space: normal;
        overflow: visible;
        font-size: 13px;
        line-height: 1.25;
    }

    .staking-reward-caption { font-size: 10.5px; }

    .staking-reward-kind { margin-left: auto; flex-shrink: 0; }

    /* Заголовок панели и примечание налезали друг на друга — ставим в столбик. */
    .staking-panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 10px;
    }

    .staking-panel-head .muted { font-size: 11px; }

    /* Итоги на телефоне разъезжались по высоте — возвращаем плотный шаг. */
    .staking-total { padding-bottom: 9px; }

    /* Длинное вступление съедало пол-экрана над сроками. */
    .staking-sub { font-size: 12px; line-height: 1.4; }
}

/* Имя и подпись — одним блоком: на десктопе столбиком под картинкой, на
   телефоне столбиком справа от неё. Без обёртки они были самостоятельными
   flex-элементами и в строчной раскладке вставали бок о бок. */
.staking-reward-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    min-width: 0;
}

@media (max-width: 560px) {
    .staking-reward-text { align-items: flex-start; flex: 1; }
}

/* Стейкинг вернулся в «Бонусы» отдельной зоной. Разделитель между зонами уже
   рисует .bonus-zone-head; здесь только отбивка сверху, чтобы блок не липнул
   к заголовку страницы, и снятие ограничения ширины — внутри бонусов раскладка
   стейкинга должна вести себя так же, как вела в своём разделе. */
.bonus-zone-staking .staking-layout { max-width: none; }

.bonus-zone-staking { margin-bottom: 4px; }

/* ── Цветной брейнрот в кейсе ───────────────────────────────────────────────
   Кнопка ✦ сидит на иконке предмета — и в строке таблицы дропа, и в строке
   добавления. Тот же жест, что в апгрейдере, но свой класс: upgrader.css на
   странице редактора кейса не загружен.
   Углы прямые везде — глобальное * { border-radius: 0 !important } выше. */
.ced-loot-item-media {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.ced-add-mut-slot {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ced-mut-chip {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 2;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .9));
    transition: color .16s, filter .16s, transform .12s;
}

.ced-add-mut-slot .ced-mut-chip {
    position: static;
    width: 38px;
    height: 38px;
    font-size: 16px;
    border: 1.5px solid rgba(255, 255, 255, .12);
}

.ced-mut-chip:hover {
    color: var(--ced-mut-glow, #e8c840);
    filter: drop-shadow(0 0 7px var(--ced-mut-glow, #e8c840)) drop-shadow(0 2px 4px rgba(0, 0, 0, .9));
    transform: scale(1.12);
}

.ced-mut-chip.is-set {
    filter: drop-shadow(0 0 7px var(--ced-mut-glow, #e8c840)) drop-shadow(0 2px 5px rgba(0, 0, 0, .9));
}

.ced-mut-chip__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Строка с цветным вариантом заметна с одного взгляда: иначе в длинной
   таблице её не отличить от обычной, кроме суффикса в имени. */
.ced-loot-row-mut {
    box-shadow: inset 3px 0 0 rgba(232, 200, 65, .55);
}

.ced-mut-picker {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 4, 9, .78);
    backdrop-filter: blur(6px);
}

.ced-mut-picker__panel {
    width: 100%;
    max-width: 420px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0d1422 0%, #070a12 100%);
    border: 1.5px solid rgba(232, 200, 65, .22);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.ced-mut-picker__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ced-mut-picker__title {
    font-family: 'Bebas Neue', cursive, sans-serif;
    font-size: 21px;
    letter-spacing: 4px;
    color: #e8c840;
    line-height: 1;
}

.ced-mut-picker__sub {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, .42);
    margin-top: 5px;
}

.ced-mut-picker__close {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, .1);
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .16s, color .16s;
}

.ced-mut-picker__close:hover {
    border-color: rgba(239, 68, 68, .5);
    color: #ef4444;
}

.ced-mut-picker__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 14px 14px;
    overflow-y: auto;
}

.ced-mut-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .018);
    cursor: pointer;
    text-align: left;
    transition: border-color .16s, background .16s, transform .12s;
}

.ced-mut-opt:hover {
    border-color: var(--ced-mut-glow, #e8c840);
    background: rgba(255, 255, 255, .04);
    transform: translateX(2px);
}

.ced-mut-opt.is-selected {
    border-color: var(--ced-mut-glow, #e8c840);
    background: rgba(232, 200, 65, .06);
    box-shadow: inset 3px 0 0 var(--ced-mut-glow, #e8c840);
}

.ced-mut-opt__img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.ced-mut-opt__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ced-mut-opt__name {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ced-mut-opt__val {
    font-family: 'Bebas Neue', cursive, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: #e8c840;
}


/* ═══ НАСТРОЙКИ И РЕЖИМ СТРИМЕРА ════════════════════════════════════════════
   Шестерёнка встаёт в правый угол шапки — он был пуст на всех ширинах, где
   включается бургер (до 1299px), то есть у подавляющего большинства. Штора
   навигации выезжает слева, панель настроек справа: два разных жеста в двух
   разных углах невозможно перепутать.
   Скруглений нет нигде — на сайте глобальное * { border-radius: 0 !important }. */

.settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-left: auto;          /* прижимает кнопку к правому краю шапки */
    padding: 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .25s;
}

.settings-btn svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    pointer-events: none;
}

.settings-btn:hover {
    background: rgba(56, 104, 192, .1);
    border-color: rgba(56, 104, 192, .4);
    color: #58A6FF;
}

/* Шестерёнка доворачивается при открытии — маленький отклик на то, что панель
   принадлежит именно этой кнопке. */
.settings-btn.is-open {
    color: #58A6FF;
    border-color: rgba(56, 104, 192, .5);
    transform: rotate(60deg);
}

/* Шестерёнка всегда последняя в строке шапки. Без order она вставала бы по
   месту в разметке — сразу после бренда, то есть ПЕРЕД пунктами меню на
   десктопе. margin-left:auto доталкивает её к правому краю, когда в строке
   остаётся свободное место (на мобилке, где меню уехало в штору). */
.settings-btn { order: 99; }

.settings-scrim {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(2, 4, 9, .6);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .28s ease;
}

.settings-scrim.is-open { opacity: 1; }

.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0d1422 0%, #070a12 100%);
    border-left: 1.5px solid rgba(56, 104, 192, .22);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
}

.settings-panel.is-open { transform: translateX(0); }

.settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.settings-title {
    font-family: 'Bebas Neue', cursive, sans-serif;
    font-size: 26px;
    letter-spacing: 5px;
    color: #58A6FF;
    line-height: 1;
}

.settings-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, .1);
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .16s, color .16s;
}

.settings-close:hover { border-color: rgba(239, 68, 68, .5); color: #ef4444; }

.settings-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
}

.settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .15s;
}

.settings-row:hover { background: rgba(255, 255, 255, .025); }

.settings-row.hidden { display: none !important; }

.settings-row-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-row-name {
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.settings-row-note {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .38);
}

/* Тумблер рисуется из самого чекбокса: отдельная разметка для галочки тут
   лишняя, а :checked даёт всё нужное состояние.
   appearance:none обязателен — иначе браузер дорисует свою галочку поверх. */
.settings-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    margin: 2px 0 0;
    background: rgba(255, 255, 255, .08) !important;
    border: 1.5px solid rgba(255, 255, 255, .14) !important;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}

.settings-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    background: rgba(255, 255, 255, .5);
    transition: transform .18s, background .18s;
}

.settings-switch:checked {
    background: rgba(0, 230, 118, .16) !important;
    border-color: #00e676 !important;
}

.settings-switch:checked::after {
    transform: translateX(20px);
    background: #00e676;
}

.settings-lang { display: flex; gap: 6px; flex-wrap: wrap; }

.settings-lang-btn {
    padding: 7px 11px;
    border: 1.5px solid rgba(255, 255, 255, .1);
    background: transparent;
    color: rgba(255, 255, 255, .6);
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .16s, color .16s;
}

.settings-lang-btn.is-active { border-color: #58A6FF; color: #58A6FF; }

/* Набор режима стримера. Отдельной темы у блока нет намеренно: это те же
   строки настроек, просто вложенные — отступом слева и полосой у края видно,
   что они принадлежат строке выше. */
.settings-sub {
    padding: 2px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.settings-sub-title {
    padding: 2px 16px 6px 30px;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.settings-subrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 16px 9px 30px;
    cursor: pointer;
    border-left: 2px solid rgba(255, 255, 255, .07);
    margin-left: 14px;
    transition: background .15s, border-color .15s;
}

.settings-subrow:hover {
    background: rgba(255, 255, 255, .025);
    border-left-color: rgba(88, 166, 255, .5);
}

/* Строка с кнопками силы блюра ничего не переключает по клику на себя. Кнопки
   ставим под текстом в строку: справа от описания колонка узкая, и три слова
   вставали бы друг под другом лесенкой. */
.settings-subrow-plain {
    cursor: default;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.settings-subrow-plain:hover { border-left-color: rgba(255, 255, 255, .07); }
.settings-subrow-plain .settings-lang { gap: 8px; }
.settings-subrow-plain .settings-lang-btn { flex: 1; text-align: center; }

.settings-subrow .settings-row-name { font-size: 12px; }

/* ── Что именно прячет режим стримера ───────────────────────────────────────
   Набор разбит на части: у каждой свой класс на <html> (sm-balance, sm-prices,
   sm-reel и так далее), и стример собирает набор сам в настройках. Правила у
   площадок разные и меняются, поэтому «прятать всё всегда» — не решение: нужен
   набор, который можно пересобрать без правки кода.

   Блюр, а не display:none: пропавший блок ломает раскладку и сразу читается
   как «тут что-то скрыли», а размытое пятно выглядит частью интерфейса.
   user-select:none — чтобы текст под блюром не выделялся и не подсвечивался.

   Сила блюра приезжает переменной: --sm-blur ставит app.js (и ранний скрипт в
   <head>) из выбранного пресета. Значения здесь — запас на случай, если
   переменная не доехала. */
:root {
    --sm-blur: 9px;
    --sm-blur-soft: 5px;
}

/* Баланс и всё, по чему он восстанавливается: отыгрыш — это оборот, история —
   суммы каждой продажи и депозита, сводка профиля — сколько внесено и выиграно
   за всё время, партнёрские числа — личный доход. Любого из этих блоков хватает
   на пару кадров паузы, чтобы посчитать остаток. */
html.streamer-mode.sm-balance :is(
    .balance-chip, #headerBalance, .profile-wallet-area, .profile-balance-box,
    #profileWagerBar, #profileStatsBody, #activityList, .profile-history-panel,
    #partnerBalanceValue, #partnerTotalEarned, #partnerTotalClaimed, #partnerGrowthTotal,
    .sp-row-earned, .exchange-shop-balance, .quests-balance-pill, #withdrawalHistoryPanel
),
/* Пополнение и вывод. */
html.streamer-mode.sm-cashout :is(
    .deposit-fullscreen-shell, .withdrawal-modal-shell, [data-lobby-action="deposit"],
    #walletDepositBtn, #openWithdrawalModalBtn, .withdraw-item-btn, .inv-withdraw-btn,
    #withdrawalHistoryToggleBtn
),
/* Своя ставка в играх. Общий список ставок раунда не трогаем — это чужие
   ставки и часть зрелища, ради которого краш и смотрят. */
html.streamer-mode.sm-stakes :is(
    .crash-stake-block, #crashStakePicked, #diceStakeTrigger, .dice-stake-value-line,
    .ladder-stake-block, #ladderStakeHint
),
/* Цены и суммы везде, где на экране есть число в токенах: каталог, дропы,
   ленты, истории, игры. Список собран проходом по клиентским файлам, а не на
   глаз — пропущенный класс здесь означает видимую цену в эфире. */
html.streamer-mode.sm-prices :is(
    .case-price, .case-price-row, .ld-case-price, .loot-value, .loot-chip-price,
    .item-value, .target-value, .roulette-value, .win-result-price, .br-picker-value,
    .pet-deposit-card-value, .profile-best-drop-value, .live-best-banner-mobile-value,
    .wdr-item-value, .wdr-history-value, .wdr-actionbar-sum, .wdr-actionbar-value,
    .staking-history-amount, .ref-growth-tooltip-value, .slot-value, .upg-slot-value,
    .hv-perk-value, .rf-jackpot-amount, .rf-podium-amount, .rf-row-amount,
    .battle-case-dropdown-option-price, .battle-overlay-card-value, .ladder-side-win-value,
    .site-stat-value, .stars-conversion-value, .trade-success-amount, .payment-amount-summary
),
/* Прокрут кейса — кадр, который площадки узнают быстрее всего. Размываем РОВНО
   ОДИН узел на каждом экране, а не всю матрёшку #caseReel → .roulette-windows →
   .roulette-window: вложенные фильтры считаются на каждом уровне отдельно, и
   лента едет — значит пересчёт идёт каждый кадр. Замер на настоящем прокруте:
   60 кадров/с без режима, 47 с блюром на всех трёх уровнях. */
html.streamer-mode.sm-reel :is(#caseReel, #rouletteModal .roulette-windows),
/* Слова-триггеры, размеченные в app.js. */
html.streamer-mode.sm-words .sm-word {
    filter: blur(var(--sm-blur)) !important;
    /* Размытый текст всё ещё выделяется, а выделение в кадре подсвечивает
       ровно то, что прячем. Клики при этом не блокируем: под размытием живут
       рабочие кнопки, и глушить их целиком — ломать интерфейс ради вида.
       Опасные поверхности (пополнение, вывод) отключены отдельным правилом
       ниже. */
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: filter .28s ease;
}

/* Картинки — вдвое слабее: под полным блюром от кейса остаётся пятно, и ролик
   теряет то, ради чего снимался. Тут задача другая — чтобы кадр перестал
   выглядеть витриной, а не чтобы предмет стал неузнаваем. */
html.streamer-mode.sm-art :is(
    .case-image, .case-showcase-image, .loot-chip-image, .item-hero-image,
    .related-image, .inventory-image, .live-item-image, .roulette-image,
    .target-image, .slot-image, .loot-card-image
) {
    filter: blur(var(--sm-blur-soft)) !important;
    transition: filter .28s ease;
}

/* Показ под курсором. Стримеру надо играть, а не угадывать, и курсор в кадре
   один — его собственный. Проявляем плавно: резкий скачок в записи читается
   как «что-то мелькнуло», а плавное проявление выглядит частью интерфейса.
   @media (hover) — чтобы на телефоне размытое не залипало проявленным после
   касания: там :hover остаётся висеть на последнем нажатом элементе. */
@media (hover: hover) {
    html.streamer-mode.sm-hover :is(
        .balance-chip, #headerBalance, .profile-wallet-area, .profile-balance-box,
        #profileWagerBar, #profileStatsBody, #activityList, .profile-history-panel,
        #partnerBalanceValue, #partnerTotalEarned, #partnerTotalClaimed, #partnerGrowthTotal,
        .sp-row-earned, .exchange-shop-balance, .quests-balance-pill, #withdrawalHistoryPanel,
        .crash-stake-block, #crashStakePicked, #diceStakeTrigger, .dice-stake-value-line,
        .ladder-stake-block, #ladderStakeHint,
        .case-price, .case-price-row, .ld-case-price, .loot-value, .loot-chip-price,
        .item-value, .target-value, .roulette-value, .win-result-price, .br-picker-value,
        .pet-deposit-card-value, .profile-best-drop-value, .live-best-banner-mobile-value,
        .wdr-item-value, .wdr-history-value, .wdr-actionbar-sum, .wdr-actionbar-value,
        .staking-history-amount, .ref-growth-tooltip-value, .slot-value, .upg-slot-value,
        .hv-perk-value, .rf-jackpot-amount, .rf-podium-amount, .rf-row-amount,
        .battle-case-dropdown-option-price, .battle-overlay-card-value, .ladder-side-win-value,
        .site-stat-value, .stars-conversion-value, .trade-success-amount, .payment-amount-summary,
        #caseReel, #rouletteModal .roulette-windows, .sm-word,
        .case-image, .case-showcase-image, .loot-chip-image, .item-hero-image,
        .related-image, .inventory-image, .live-item-image, .roulette-image,
        .target-image, .slot-image, .loot-card-image
    ):hover {
        filter: none !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }
}

/* Переключение режима не анимируем. Во включение — потому что 0.2 с плавного
   появления блюра это 0.2 с читаемого баланса в кадре, ровно то, ради чего
   режим и включают. В выключение — потому что у денежных поверхностей стоит
   transition: all, и незавершённый переход оставлял бы их размытыми.
   Глушим переходы ТОЛЬКО на миг переключения (класс снимается следующим
   тиком в setStreamerMode), а не постоянно: иначе пропали бы обычные
   ховер-анимации кнопок у всех игроков. */
html.streamer-switching *,
html.streamer-switching *::before,
html.streamer-switching *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

/* Пополнение и вывод не только размыты, но и не нажимаются: размытую кнопку
   легко задеть вслепую прямо в эфире. Правило привязано к sm-cashout, а не к
   режиму целиком: выключил эту часть — кнопки снова рабочие. Поэтому же они
   единственные, кого не проявляет курсор: у них нет событий мыши вообще. */
html.streamer-mode.sm-cashout :is(
    [data-lobby-action="deposit"], #walletDepositBtn, #openWithdrawalModalBtn,
    .withdraw-item-btn, .inv-withdraw-btn, #withdrawalHistoryToggleBtn
) {
    pointer-events: none !important;
}

/* Метка в шапке, чтобы стример видел, что режим включён, и не гадал, почему
   баланс размыт. Строго рядом с шестерёнкой, ничего не перекрывает. */
html.streamer-mode .settings-btn::before {
    content: 'LIVE';
    position: absolute;
    top: -7px;
    right: -6px;
    padding: 1px 4px;
    background: #ef4444;
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    pointer-events: none;
}

.settings-btn { position: relative; }

/* Подпись «Стейк 500 TOK» на карточке кейса за стейкинг. nowrap и чуть мельче:
   полная формулировка ломалась на две строки и карточка ехала. */
.case-stake-label {
    white-space: nowrap;
    font-size: 13px !important;
    letter-spacing: 0 !important;
}


/* ── Страница кейса: одна колонка сверху вниз ─────────────────────────────
   Кейс -> лента -> кнопка -> что может выпасть. Раньше это были две колонки,
   лента жила во всплывающем окне поверх страницы, а список дропа стоял
   справа узкими строками, где длинные имена ломались посреди слова. */
.case-page-stack {
    display: grid;
    gap: 18px;
}

/* Шапка кейса: картинка и название, больше ничего. Цена и кнопка уехали под
   ленту — читается сверху вниз, как порядок действий. */
.case-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 20px 20px;
}

.case-hero .case-showcase-emoji {
    font-size: 64px;
}

.case-hero .case-showcase-emoji img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.case-hero .case-showcase-name {
    margin-top: 10px;
}

/* ── Лента ───────────────────────────────────────────────────────────────
   Один и тот же блок и для холостого хода, и для настоящей прокрутки:
   размеры, указатель и затемнение справа общие, иначе в момент открытия
   лента заметно "прыгала" бы. */
/* Блок ленты держит одну и ту же высоту в покое и во время прокрутки.
   Раньше при старте он вырастал: лента покоя ниже боевой, плюс снизу
   появляется строка действий под карточку результата. Замерено на
   390/520/768/1280/1600: покой 170/170/220/220/220, прокрутка
   276/276/280/280/280 — то есть скачок 106px на телефоне и 60 на десктопе.
   От этого всё, что ниже (кнопка открытия, цена, «Что может выпасть»),
   прыгало вниз, а на телефоне браузер ещё и подтягивал прокрутку, отчего
   казалось, что ленту толкает вверх.

   Резервируем высоту сразу: тогда старт прокрутки ничего не двигает, а
   кнопка «Пропустить» появляется в уже пустой полосе снизу. */
.case-reel {
    position: relative;
    min-height: 276px;
}

@media (min-width: 761px) {
    .case-reel {
        min-height: 280px;
    }
}

.case-reel .roulette-windows {
    margin: 0;
}

/* Лента покоя той же высоты, что и боевая (у той min-height: 230 по правилу
   #caseRouletteWindows .roulette-lane .roulette-window). Без этого при старте
   прокрутки лента подрастала на 60px, а после резервирования высоты блока
   вместо скачка в покое зияла пустая полоса на 106px. Теперь свободной
   остаётся только узкая полоса снизу — та самая, куда встаёт «Пропустить», а
   после прокрутки строка действий с карточкой результата. */
.case-reel-idle {
    min-height: 230px !important;
}

.case-reel-idle {
    overflow: hidden;
}

/* Бесконечный ход. Двигаем на половину дорожки: карточки в ней продублированы
   ровно дважды, поэтому на стыке кадр повторяется без рывка. */
.case-reel-idle-track {
    animation: caseReelIdle 36s linear infinite;
}

@keyframes caseReelIdle {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Кому важнее покой, чем движение: у системной настройки «меньше анимации»
   лента просто стоит. */
@media (prefers-reduced-motion: reduce) {
    .case-reel-idle-track { animation: none; }
}

/* Кнопка «Пропустить» стояла по низу .case-reel, а этот блок ВЫШЕ самой
   ленты: под ней зарезервировано место под карточку результата и кнопку
   продажи. Во время прокрутки там пусто — и полноразмерная кнопка висела
   в пустой полосе сама по себе, ни к чему не относясь.

   Поверх ленты её тоже ставить нельзя: на карточках она теряется.

   Поэтому кладём в ТУ полосу, но вплотную под ленту и по центру: полоса
   46-50 пикселей, кнопка 44 — помещается целиком, лента не перекрыта, а по
   центру кнопка читается как подпись к ленте, а не как забытый элемент у
   правого края. После прокрутки её всё равно прячут (is-consumed/hidden),
   так что карточке результата она не мешает. */
.case-reel .roulette-skip-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    top: auto;
    bottom: 3px;
    z-index: 4;
    /* Высоту кнопки держит .primary-btn/.ghost-btn с min-height: 44px
       !important — это размер под палец, и перебивать его тут незачем.
       Компактность даём кеглем, а не уменьшением области нажатия. */
    font-size: 11px;
    background: rgba(8, 11, 18, .82);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

/* ── Кнопка и счётчики ───────────────────────────────────────────────── */
.case-controls {
    display: grid;
    gap: 12px;
}

.case-controls .case-showcase-meta {
    margin: 0;
}

/* ── Что может выпасть ───────────────────────────────────────────────────
   Раскладка карточки: поле с артом, цена плашкой в его левом нижнем углу,
   имя строкой под артом, снизу акцентная полоса. Строка «картинка — имя —
   цена» во всю ширину тратила место и ломала длинные имена посреди слова.
   Углы прямые — как у ленты, которая стоит прямо над этой сеткой. */
.loot-preview--square {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.loot-preview--square .loot-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    text-align: left;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .025);
    overflow: hidden;
}

.loot-preview--square .loot-chip:hover {
    transform: none;
    border-color: rgba(255, 255, 255, .16);
}

/* Поле арта забирает всю высоту, кроме подписи: предмет должен читаться с
   одного взгляда, а имя — это подпись к нему, а не главное. */
.loot-chip-art {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 42%),
        radial-gradient(120% 90% at 78% 22%, rgba(56, 104, 192, .16), transparent 62%);
}

.loot-preview--square .loot-chip .loot-chip-image {
    width: auto;
    height: 74%;
    max-width: 76%;
    object-fit: contain;
}

/* Эмодзи вместо картинки — у части предметов арта нет вовсе. */
.loot-preview--square .loot-chip .loot-chip-art > span {
    font-size: 40px;
    line-height: 1;
}

.loot-chip-price {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    font-style: normal;
    font-family: 'Bebas Neue', cursive, sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1.1;
    color: #e8c840;
    background: rgba(38, 44, 58, .92);
    border-top-right-radius: 6px;
    white-space: nowrap;
}

.loot-chip-price img {
    width: 13px;
    height: 13px;
}

/* Кубик мутации на карточке дропа. Лежит ВНУТРИ .loot-chip-art: тот уже
   position: relative и без filter, а верх арта совпадает с верхом карточки —
   отдельный контейнер заводить не нужно. Размер тот же, что в ленте
   прокрутки (34 и 40): карточки почти одного размера (156 и 181 против 136
   и 180), и один и тот же кубик должен читаться одинаково в обоих местах.

   В отличие от ленты, тут кубик у широких предметов касается арта: ширина
   картинки плавает (height 74%, max-width 76%), и у самых широких зазор
   справа всего 18. Правило «не наезжать» дало бы 14 пикселей — мельче, чем
   кубик где-либо ещё на сайте, поэтому предпочли касание. */
.mut-badge-loot {
    top: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
}

@media (min-width: 761px) {
    .mut-badge-loot {
        width: 40px;
        height: 40px;
    }
}

/* Подпись: две строки максимум и обрыв многоточием. Высота карточки общая для
   всех, и третья строка выдавила бы акцентную полосу за край. */
.loot-preview--square .loot-chip strong {
    flex: 0 0 auto;
    padding: 8px 10px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    border-bottom: 2px solid var(--accent);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 760px) {
    .loot-preview--square {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .loot-preview--square {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    }

    .loot-preview--square .loot-chip strong {
        font-size: 11.5px;
        padding: 7px 8px 8px;
    }

    .loot-chip-price {
        font-size: 14px;
        padding: 3px 8px;
    }
}

#caseRouletteWindows .roulette-lane {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

#caseRouletteWindows .roulette-lane .roulette-window {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 230px !important;
}

/* Сетка дропа: у контейнера есть правило по id (#caseLootPreview.loot-preview),
   а оно специфичнее класса — без такой же привязки квадраты оставались по
   185px и внутри карточки зияла пустота. */
#caseLootPreview.loot-preview--square {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

@media (max-width: 760px) {
    #caseLootPreview.loot-preview--square {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    #caseLootPreview.loot-preview--square {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
    }
}


/* Набор брейнротов в строке приза цветного розыгрыша: предметы идут в ряд и
   переносятся, а не растягивают строку панели. */
.cr-item-set {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Свои заголовок и подпись розыгрыша стоят ВТОРОЙ строкой той же строки, а не
   отдельным блоком: они принадлежат конкретному призу, и оторванные поля
   пришлось бы подписывать «а это для какого». Перенос включён своим классом —
   пороговые розыгрыши делят ту же разметку, и им он не нужен. */
.cr-prize-row { flex-wrap: wrap; }

.cr-text-row {
    flex: 1 0 100%;
    display: flex;
    gap: 6px;
}

/* Заголовок короткий, подпись длинная — делим ширину в ту же пропорцию, что и
   на витрине, иначе поле на 200 символов выглядит как поле на 60. */
.cr-text-row .cr-text-input {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px !important;
    padding: 6px 8px !important;
}
.cr-text-row .cr-text-input:first-child { flex: 0 1 200px; }

.cr-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ── Справочник бафов в окне депозита ─────────────────────────────────────
   Панель живёт ВНУТРИ оболочки окна вторым столбцом: на широком экране окно
   расширяется вправо, на узком столбцы схлопываются в один и панель падает
   под депозит. Одна раскладка на оба случая — флекс с переносом. */
#depositFullscreenModal .deposit-fullscreen-shell {
    display: flex;
    align-items: stretch;
    /* Ширина меняется только при раскрытых бафах, поэтому переход плавный:
       окно «разворачивается», а не прыгает. */
    transition: width .26s ease;
}

.deposit-shell-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Раскрытые бафы — единственное, что меняет ширину окна. */
#depositFullscreenModal .deposit-fullscreen-shell.has-traits {
    width: min(1340px, 100%);
}

/* ── Кнопка раскрытия ──────────────────────────────────────────────────── */
.traits-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 14px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.traits-toggle:hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
}

.traits-toggle-icons {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

/* Иконки на кнопке идут внахлёст: показать шесть штук в строке, не съев
   половину ширины. Каждая следующая чуть заходит на предыдущую. */
.traits-toggle-icons img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: -7px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.traits-toggle-icons img:last-child { margin-right: 0; }

.traits-toggle-text { flex: 1 1 auto; min-width: 0; }
.traits-toggle-text b { color: var(--muted); font-weight: 600; }

.traits-toggle-chevron {
    flex-shrink: 0;
    color: var(--muted);
    transition: transform .2s ease;
}

.traits-toggle.is-open .traits-toggle-chevron { transform: rotate(180deg); }

/* ── Панель ────────────────────────────────────────────────────────────── */
.traits-panel {
    flex: 0 0 360px;
    min-width: 0;
    padding: 24px 22px 22px;
    border-left: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .18);
}

.traits-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.traits-panel-title {
    font-family: 'Bebas Neue', cursive, sans-serif;
    font-size: 24px;
    letter-spacing: .04em;
    line-height: 1;
}

.traits-panel-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.traits-panel-close:hover { color: var(--text); border-color: rgba(255, 255, 255, .26); }

.traits-panel-note {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.traits-panel-note b { color: var(--text); }

/* Список бафов прокручивается ВНУТРИ себя — как сетка выбора брейнрота в
   депозите (.pet-deposit-grid). Раньше панель просто тянулась вниз, и игроку
   приходилось листать весь экран, чтобы вернуться к форме. */
.traits-panel-body {
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* ── Ступени ───────────────────────────────────────────────────────────── */
.traits-tier + .traits-tier { margin-top: 10px; }

/* Заголовок ступени — кнопка: 70 бафов одним полотном не читают, их
   разворачивают по одной категории. */
.traits-tier-head {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 7px;
    padding: 4px 2px 5px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.traits-tier-head:hover .traits-tier-label { color: #fff; }

.traits-tier-count {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.traits-tier-chevron {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 11px;
    transition: transform .18s ease;
}

.traits-tier.is-open .traits-tier-chevron { transform: rotate(180deg); }

/* Свёрнутая ступень — это одна строка заголовка и всё. */
.traits-tier .traits-grid { display: none; }
.traits-tier.is-open .traits-grid { display: grid; }

.traits-tier-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.traits-tier-note { color: var(--muted); font-size: 11px; }

/* ── Плитки ────────────────────────────────────────────────────────────── */
.traits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 5px;
}

.traits-item {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 9px;
    background: rgba(255, 255, 255, .02);
}

.traits-item img {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* Процент не ужимается никогда: цена и есть то, ради чего сюда пришли.
   Имя переносится на вторую строку вместо многоточия — «Rainbow Balloon» и
   «Jack O' Lantern» иначе обрезались, а по обрезку баф не опознать. */
.traits-item-name {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.15;
}

.traits-item-pct {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: #4ade80;
}

/* Верхняя ступень светится — её видно, не читая цифр. */
.traits-item.is-top {
    border-color: rgba(255, 215, 106, .34);
    background: rgba(255, 215, 106, .07);
    box-shadow: 0 0 14px rgba(255, 215, 106, .1) inset;
}

.traits-item.is-top .traits-item-pct { color: #ffd76a; }
.traits-tier[data-tier="top"] .traits-tier-label { color: #ffd76a; }

/* Минусовые — красным и словами: их не «получают», их избегают. */
.traits-item.is-minus {
    border-color: rgba(248, 113, 113, .28);
    background: rgba(248, 113, 113, .06);
}

.traits-item.is-minus .traits-item-pct { color: #f87171; }
.traits-tier[data-tier="minus"] .traits-tier-label { color: #f87171; }

/* ── Узкие экраны ──────────────────────────────────────────────────────── */
/* Порог тот же, где окну уже не хватает места на два столбца: 980 основной
   + 360 панель + поля. Ниже — панель уходит под депозит. */
@media (max-width: 1380px) {
    #depositFullscreenModal .deposit-fullscreen-shell.has-traits { width: min(980px, 100%); }
    #depositFullscreenModal .deposit-fullscreen-shell { flex-wrap: wrap; }
    .deposit-shell-main { flex: 1 1 100%; }

    .traits-panel {
        flex: 1 1 100%;
        padding: 0 28px 24px;
        border-left: 0;
        background: transparent;
    }

    /* В стопке заголовок панели дублировал бы кнопку, с которой её открыли. */
    .traits-panel-head { display: none; }
    .traits-panel-note { margin-top: 0; }
    /* В стопке панель стоит под всей формой, и высокий список снова заставил бы
       листать страницу. Держим её в пределах половины экрана — прокрутка
       остаётся внутри списка. */
    .traits-panel-body { max-height: 44vh; }
}

@media (max-width: 560px) {
    .traits-panel { padding: 0 16px 18px; }
    /* Ровно две карточки в ряд. auto-fill раскладывал их по ширине экрана, и
       на аппаратах пошире выходило три штуки в строку — имя баффа ужималось до
       двух строк мелким кеглем. Ширину колонок задаём явно. */
    .traits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .traits-item { gap: 6px; padding: 5px 6px; }
    .traits-item img { width: 22px; height: 22px; }
    .traits-item-name { font-size: 11px; }
    .traits-item-pct { font-size: 11.5px; }
    .traits-toggle { font-size: 12px; padding: 8px 10px; }
    .traits-toggle-icons img { width: 20px; height: 20px; margin-right: -6px; }
}

@media (prefers-reduced-motion: reduce) {
    #depositFullscreenModal .deposit-fullscreen-shell, .traits-toggle-chevron { transition: none; }
}

/* ── Минимум штук на депозит (панель) ─────────────────────────────────── */
/* Список длинный (весь каталог), поэтому строка низкая и со своей полосой
   прокрутки: карточка панели не должна растягиваться на весь каталог. */
.mq-list {
    display: grid;
    gap: 4px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.mq-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 90px 74px 132px;
    gap: 8px;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
}

.mq-row-img { width: 28px; height: 28px; object-fit: contain; }
.mq-row-emoji { font-size: 18px; text-align: center; }

.mq-row-name {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mq-row-value { color: var(--muted); font-size: 12px; text-align: right; }

.mq-row-input {
    padding: 5px 7px !important;
    font-size: 12px !important;
    text-align: center;
}

.mq-row-hint { color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
    /* На узком экране цена и подсказка уезжают: остаются имя и поле —
       то, ради чего сюда пришли. */
    .mq-row { grid-template-columns: 28px minmax(0, 1fr) 74px; }
    .mq-row-value, .mq-row-hint { display: none; }
}

/* ── Люксовые брейнроты ───────────────────────────────────────────────────
   Обводка на карточке всего, что дороже порога (LUX_MIN_VALUE в app.js) —
   лента, кейсы, профиль, апгрейдер, краш, склейка, лестница, депозит.
   Только рамка и свечение: углы карточек уже заняты значком мутации
   (слева сверху) и мёдом/скаттером (справа снизу), и ещё одна метка там
   столкнулась бы с ними. Цвет тот же, что у верхней ступени бафов, —
   на площадке один «дорогой» цвет, а не три разных золотых. */
:root {
    --lux: #ffd76a;
    --lux-line: rgba(255, 215, 106, .55);
    --lux-glow: rgba(255, 215, 106, .22);
}

/* Карточек ленты прокрутки в этом списке намеренно нет: по просьбе владельца
   в самой рулетке дорогой предмет золотом не помечается — там и так видно,
   что выпало, а подсветка заранее выдавала результат ещё до остановки. В
   инвентаре, дропе и живой ленте пометка осталась. */
.live-card.is-lux,
.loot-chip.is-lux,
.inventory-card.is-lux,
.pet-deposit-card.is-lux,
.target-card.is-lux,
.upg-target-card.is-lux,
.upg-inv-card.is-lux {
    border-color: var(--lux-line) !important;
    box-shadow: 0 0 0 1px var(--lux-line), 0 0 16px var(--lux-glow);
}

/* У предмета «1 of 1» та же обводка, но красная вместо золотой: переопределяем
   сами переменные на карточке — правило выше их и читает, поэтому ни дублировать
   его, ни спорить с ним за !important не нужно. Дорогой предмет под меткой
   перестаёт быть золотым: метка важнее цены. */
.is-oneof {
    --lux-line: rgba(255, 60, 60, .75);
    --lux-glow: rgba(255, 42, 42, .38);
}


/* Тем, кто ниже порога люкса, обводки не досталось бы вовсе — задаём её тем же
   набором селекторов.
   Тень здесь с !important, в отличие от люксовой выше: собственная тень
   карточки (0 4px 24px чёрного) объявлена с !important и съедала свечение —
   замер показывал у люксовой карточки ровно её, без золотого ореола. Чёрную
   подкладываем сюда же третьим слоем, чтобы карточка не потеряла объём. */
.live-card.is-oneof,
.loot-chip.is-oneof,
.inventory-card.is-oneof,
.roulette-item.is-oneof {
    border-color: var(--lux-line) !important;
    box-shadow: 0 0 0 1px var(--lux-line),
                0 0 18px var(--lux-glow),
                0 4px 24px rgba(0, 0, 0, .5) !important;
}

/* Цена — единственное, что перекрашиваем внутри: по ней и опознают люкс,
   а перекрашивать имя значило бы спорить с выделением выбранной карточки. */
.inventory-card.is-lux .item-value,
.pet-deposit-card.is-lux .pet-deposit-card-value,
.upg-target-card.is-lux .upg-target-card-val,
.upg-inv-card.is-lux .upg-inv-card-val,
.loot-chip.is-lux .loot-chip-price {
    color: var(--lux);
}

/* Выбранная карточка остаётся выбранной: её собственная рамка важнее, иначе
   в апгрейдере и склейке не видно, что именно ты положил в слот. */
.inventory-card.is-lux.selected,
.target-card.is-lux.selected,
.upg-target-card.is-lux.is-selected,
.upg-inv-card.is-lux.is-selected {
    border-color: currentColor !important;
    box-shadow: 0 0 14px var(--lux-glow);
}

/* В ленте карточки узкие и идут вплотную — свечение там мягче, иначе полоса
   превращается в сплошное золотое пятно. */
.live-card.is-lux {
    box-shadow: 0 0 0 1px var(--lux-line), 0 0 10px rgba(255, 215, 106, .16);
}

@media (prefers-reduced-motion: reduce) {
    .live-card.is-lux, .loot-chip.is-lux,
    .inventory-card.is-lux, .pet-deposit-card.is-lux, .target-card.is-lux,
    .upg-target-card.is-lux, .upg-inv-card.is-lux { transition: none; }
}

/* ── Метки кейса в главном списке ─────────────────────────────────────────
   Правый верхний угол карточки: что у кейса поменялось. Словами, а не
   значками — метка должна читаться без наведения. Подсказка при наведении
   остаётся: слово говорит ЧТО, подсказка уточняет ЧТО ИМЕННО. */
.case-badges {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    /* Переносим ВПРАВО: три метки на узкой карточке уходят в столбик, и
       ровный правый край читается лучше рваного левого. */
    justify-content: flex-end;
    max-width: calc(100% - 14px);
    pointer-events: none;
}

/* Наведение ловит сама метка, а не контейнер: между ними пустота, и
   подсказка не должна всплывать от промаха мимо. */
/* Точка отсчёта подсказки — КОНТЕЙНЕР, а не сама метка: прижатая к
   своей метке, у левой она уезжала за карточку и срезалась её
   overflow: hidden. От правого края контейнера подсказка всегда растёт
   влево внутрь карточки, какой бы меткой её ни вызвали. */
.case-badge {
    pointer-events: auto;
    cursor: help;
}

.case-badge-label {
    display: block;
    padding: 2px 5px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 5px;
    background: rgba(8, 11, 18, .82);
    color: #b6c4d6;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1.25;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.case-badge:hover .case-badge-label {
    border-color: currentColor;
    background: rgba(8, 11, 18, .95);
}

/* Цвет назначен метке, а подписи достаётся через currentColor — так рамка
   и текст не могут разъехаться. */
.case-badge--drop:hover { color: #4ade80; }
.case-badge--design:hover { color: #a78bfa; }
.case-badge--new:hover { color: #ffd76a; }
.case-badge:hover .case-badge-label { color: inherit; }

/* «NEW» заметен и без наведения: это единственная метка, из-за которой
   игрок вообще полезет в кейс, которого раньше не видел. Но в покое он
   ПРИГЛУШЁН — иначе наведение на нём ничего не меняет, в отличие от двух
   соседних меток, и выглядит как будто метка не работает. */
.case-badge--new .case-badge-label {
    border-color: rgba(255, 215, 106, .34);
    background: rgba(255, 215, 106, .1);
    color: #d8ab45;
}

.case-badge--new:hover .case-badge-label {
    background: rgba(255, 215, 106, .2);
}

/* ── Подсказка ────────────────────────────────────────────────────────── */
.case-badge-tip {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 4;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    background: #0b0f17;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    /* visibility, а не display: без него не будет перехода, а с display:none
       подсказка мигала бы появлением. */
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.case-badge:hover .case-badge-tip,
.case-badge:focus-visible .case-badge-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* На телефоне карточка вдвое уже: слова те же, но мельче и теснее, иначе
   три метки закрыли бы картинку кейса целиком. */
@media (max-width: 560px) {
    .case-badges { top: 5px; right: 5px; gap: 2px; max-width: calc(100% - 10px); }
    .case-badge-label { padding: 1px 4px; font-size: 7.5px; border-radius: 4px; }
    .case-badge-tip { font-size: 10px; padding: 3px 6px; }
}
/* Кнопка метки в редакторе кейса: включённая видна состоянием, а не текстом. */
.ced-status-row .ghost-btn.is-active {
    border-color: rgba(74, 222, 128, .5);
    color: #4ade80;
}

@media (prefers-reduced-motion: reduce) {
    .case-badge, .case-badge-tip { transition: none; }
}

/* ── Причина невывода на карточке ─────────────────────────────────────────
   Серая заблокированная карточка не говорит, ПОЧЕМУ нельзя: причин четыре, и
   они разные по смыслу — одну ждать, другую менять, третью продавать. Текст
   на карточке избавляет от тыканья в каждую. Полная формулировка — в title,
   её же показывает окно по клику. */
.wdr-item-reason {
    max-width: 100%;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(248, 113, 113, .14);
    color: #f8a4a4;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.3;
    /* Переносим, а не режем: «дешевле 311 TOK» на узкой карточке не влезает
       в строку, а обрезок причины хуже, чем две строки. */
    white-space: normal;
    overflow-wrap: anywhere;
}


/* «Уже на выводе» — не отказ, а ожидание: красный тут пугал бы зря. */
.wdr-item-reason[data-reason="pending"] {
    background: rgba(96, 165, 250, .16);
    color: #93c5fd;
}

/* Спецвывод: пет не в наличии или цветной, но по спецпредложению его можно
   вывести, пока не кончился лимит. Не отказ, поэтому не красный. */
/* Личное ограничение пета на одну заявку: подсказка, не отказ. */
.wdr-item-limit {
    max-width: 100%;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(148, 163, 184, .14);
    color: #cbd5e1;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
}

.wdr-item-reason[data-reason="special"] {
    background: rgba(74, 222, 128, .15);
    color: #86efac;
}

/* ── Причина отказа по выводу ─────────────────────────────────────────────
   У игрока: своя строка под датой. Приклеенная к дате через точку, она
   читалась как часть даты и терялась. */
.wdr-history-reason {
    margin-top: 4px;
    color: #f8a4a4;
    font-size: 12px;
    line-height: 1.35;
}

/* Отказ с изъятием: строка заметнее причины — предмет не вернулся, и это
   главное, что игроку нужно понять из заявки. */
.wdr-history-dropped {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid #ff6b6b;
    color: #ffb4b4;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

/* В панели: выбор из набора. Список длинный, поэтому со своей прокруткой —
   окно не должно вылезать за экран на ноутбуке. */
.wdr-reason-card { max-width: 520px; }

.wdr-reason-list {
    display: grid;
    gap: 4px;
    max-height: 44vh;
    overflow-y: auto;
    margin-top: 12px;
    padding-right: 4px;
}

.wdr-reason-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 9px;
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
}

.wdr-reason-row:hover { border-color: rgba(255, 255, 255, .2); }

.wdr-reason-text { flex: 1 1 auto; font-size: 13px; line-height: 1.3; }

/* Под подписью для стаффа — дословно то, что прочитает игрок: причину
   выбирают для него, и подставлять её вслепую по короткому ярлыку нельзя. */
.wdr-reason-seen {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
    color: rgba(255, 255, 255, .42);
}

/* Пометка у причин, которые игроку не раскрываем: стафф должен видеть, что
   выбирает нейтральную формулировку, а не ту, что написана в списке. */
.wdr-reason-flag {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(231, 177, 99, .16);
    color: #e7b163;
    font-size: 10px;
    font-weight: 700;
}

/* Отказ с изъятием предметов. Красная рамка не украшение: отличить эту
   галочку от обычной настройки нужно до нажатия, отмены у действия нет. */
.wdr-reason-drop {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 107, 107, .38);
    border-radius: 9px;
    background: rgba(255, 107, 107, .07);
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

.wdr-reason-drop input {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #ff6b6b;
}

.wdr-reason-drop-note {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
}

/* Кнопка быстрой прокрутки кейса. Раньше тут стояла пилюля
   Медленная | Быстрая — она занимала полстроки рядом с кнопкой открытия и
   выбивалась из остального сайта: в апгрейдере и дайсах ту же настройку
   давно включает компактная молния. Геометрия и подсветка взяты оттуда
   (.dice-fast-spin-btn), чтобы кнопка читалась как та же самая. */
/* Строка открытия: широкая кнопка и молния рядом. Молния не тянется —
   ей хватает своих 38 пикселей, всё остальное забирает кнопка. */
.case-open-line {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.case-open-line > .primary-btn { flex: 1 1 auto; min-width: 0; width: auto; }
/* margin-top достался от прежней раскладки, где пилюля стояла ПОД кнопкой.
   В одной строке он не отступ, а вычет из высоты: молния оказывалась на
   10 пикселей ниже кнопки. */
.case-open-line > .spin-speed-switch { flex: 0 0 auto; align-items: stretch !important; margin: 0 !important; }
.case-open-line .case-fast-spin-btn { height: auto; align-self: stretch; }

.case-fast-spin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    min-width: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.case-fast-spin-btn:hover {
    border-color: rgba(56, 104, 192, .5);
    background: rgba(255, 255, 255, .08);
    transform: translateY(-2px);
}
.case-fast-spin-btn:active { transform: translateY(0); }
.case-fast-spin-btn.is-active {
    border-color: #f0a35e;
    background: rgba(240, 163, 94, .18);
    box-shadow: 0 0 12px rgba(240, 163, 94, .45);
    /* Молния внутри нарисована currentColor, поэтому включённый режим красит
       её вместе с рамкой — отдельного правила для иконки не нужно. */
    color: #f0a35e;
}

.case-fast-spin-icon {
    display: block;
    /* Своя молния мельче эмодзи по картинке, поэтому ей добавлен размер:
       кнопка 38, иконка 18 — та же доля, что у иконок в навигации. */
    width: 18px;
    height: 18px;
}

.case-fast-spin-btn.is-active .case-fast-spin-icon {
    filter: drop-shadow(0 0 5px rgba(240, 163, 94, .65));
}

/* Контейнер растягивался на всю ширину под широкую пилюлю. Для одной кнопки
   это оставляло бы половину строки пустой, поэтому ужимаем по содержимому. */
.spin-speed-switch { width: auto !important; flex: 0 0 auto; }
@media (max-width: 720px) {
    .spin-speed-switch { width: auto !important; }
}

/* ── Квадратная ячейка ленты прокрутки ───────────────────────────────────
   Ширина ячейки шла от содержимого (min-width сброшен в 0), и коробка
   растягивалась под длину имени: у «Guest 666» выходило 66 пикселей, у
   «Rosey and Teddy» — 98, у самых длинных — 135. Лента из разнокалиберных
   прямоугольников читается как сломанная.

   Высота у ячейки задана жёстко и своя на каждом изломе (136 на телефоне,
   180 на десктопе), поэтому квадрат делаем не числом, а пропорцией: при
   фиксированной высоте aspect-ratio:1 сам подбирает равную ей ширину. Одно
   правило работает на всех ширинах экрана и не разъедется, если высоту
   когда-нибудь поменяют.

   flex-basis прибит к auto, а сжатие запрещено — иначе во flex-дорожке
   ячейки снова поплыли бы, каждая по-своему. */
.roulette-item {
    aspect-ratio: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Имя и цена в квадрате уже, чем прежняя растянутая карточка, поэтому
   переносим их, а не режем многоточием: обрезанное имя предмета игроку
   бесполезно. */
.roulette-item .roulette-name {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

/* ── Длинные имена в ленте вне модалки ───────────────────────────────────
   Ступени кегля для длинных имён (name-long/name-xlong их вешает сам
   createRouletteWindow) были прописаны только под #rouletteModal, а лента на
   странице кейса живёт вне его. Пока карточка растягивалась под содержимое,
   это сходило с рук; в квадрате фиксированной ширины длинное имя упирается
   в край и режется многоточием.

   Значения те же, что в модалке, и три строки вместо двух: под имя в
   квадрате 136 остаётся около 50 пикселей, это как раз три строки при 11px. */
.roulette-item:not(.compact) .roulette-name {
    -webkit-line-clamp: 3 !important;
    overflow-wrap: anywhere !important;
}

/* На телефоне в квадрат помещается ровно ноль лишних пикселей: у картинки
   снизу 8, у цены сверху 3, и трёхстрочное имя при 11px сжимается и режется
   (NOODLE NOODLE POODLE просило 39px при 30 доступных). 10.5px хватает,
   чтобы то же имя уложилось в ДВЕ строки и ещё остался запас. На десктопе
   квадрат крупнее, там имя влезает и при 11px — поэтому шаг возвращаем
   ниже по брейкпоинту, а не мельчим имена везде. */
.roulette-item:not(.compact) .roulette-name.name-long {
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
}

@media (min-width: 721px) {
    .roulette-item:not(.compact) .roulette-name.name-long {
        font-size: 11px !important;
        letter-spacing: .01em !important;
    }
}

.roulette-item:not(.compact) .roulette-name.name-xlong {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
}

/* Значок цвета в ленте прокрутки. Раньше цвет был виден только приставкой в
   имени («Strawberry Elephant [Diamond]»), из-за чего в квадратной ячейке
   имя переносилось в три строки и мельчало. Показываем цвет тем же
   способом, что и везде на карточках, — кубиком в углу. */
.roulette-item {
    position: relative;
}

/* Кубик лежит ПРЯМЫМ ребёнком карточки, а не внутри блока картинки: у того
   стоит filter для тени, а filter делает элемент точкой отсчёта для absolute —
   кубик считал отступы от блока картинки и висел в середине карточки вместо
   угла.

   Размер кубика упирается не в долю от картинки, а в свободный зазор сбоку:
   картинка предмета стоит по центру, и кубик в углу может расти, пока не
   дойдёт до её края. Замер: зазор справа 38 на телефоне, 44 на десктопе,
   33 в компактной карточке; при отступе 4 от угла это даёт 34, 40 и 29 —
   ровно столько, чтобы кубик не наезжал на пета. Увеличивать дальше можно
   только вместе с уменьшением картинки. */
.mut-badge-roulette {
    top: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
}

/* В мультиоткрытии карточка мельче, но картинка та же (56), поэтому и кубик
   тот же — меняется только отступ от края. */
.roulette-item.compact .mut-badge-roulette {
    top: 4px;
    right: 4px;
    width: 29px;
    height: 29px;
}

@media (min-width: 721px) {
    .roulette-item:not(.compact) .mut-badge-roulette {
        top: 4px;
        right: 4px;
        width: 40px;
        height: 40px;
    }
}

/* ── Картинка предмета в ленте крупнее ───────────────────────────────────
   Пет занимал 40 пикселей из 136 — в квадратной ячейке это выглядело
   потерянным, а места вокруг было вдоволь. Замер: внутри ячейки 116 по
   высоте, содержимое занимало 88, то есть 28 пустовало; на десктопе 152
   против 72, свободных 80.

   Размеры взяты с запасом на три строки имени, а не под идеальный случай:
   56 на телефоне (остаётся 12 на третью строку) и 80 на десктопе. В
   мультиоткрытии карточка своя и мельче — её не трогаем, там 56 уже стоит
   и под неё всё посчитано. */
.roulette-item:not(.compact) .roulette-emoji {
    min-height: 60px !important;
    font-size: 55px !important;
}

.roulette-item:not(.compact) .roulette-image {
    width: 60px !important;
    height: 60px !important;
}

@media (min-width: 721px) {
    .roulette-item:not(.compact) .roulette-emoji {
        min-height: 92px !important;
        font-size: 82px !important;
    }

    .roulette-item:not(.compact) .roulette-image {
        width: 92px !important;
        height: 92px !important;
    }
}

/* Мультиоткрытие вне модалки. Компактная карточка 122x122, под содержимое
   102 по высоте: картинка 56, имя в одну строку 14 и цена 12 — 82, запас 20.
   Размер 56 не выдуман: ровно он уже стоит у такой же карточки в модалке
   (#rouletteModal.roulette-open .roulette-item.compact), просто то правило
   до ленты на странице кейса не доставало. */
.roulette-item.compact .roulette-emoji {
    min-height: 56px !important;
    font-size: 40px !important;
}

.roulette-item.compact .roulette-image {
    width: 56px !important;
    height: 56px !important;
}


/* ── Статистика сайта ──────────────────────────────────────────────────────
   Собран ИЗ ТЕХ ЖЕ деталей, что и сетка кейсов прямо над ним, а не своим
   оформлением: заголовок — штатный .case-section-title (он же с градиентной
   чертой), плитки повторяют .case-card один в один (фон rgba(4,6,12,.88),
   рамка 1px rgba(255,255,255,.07), padding 10 / 22 18, зазор 8 / 14),
   число набрано как цена кейса (DM Mono 500, белое), подпись — как
   .case-subtitle (Syne 400, приглушённый цвет).

   !important на шрифтах обязателен: html/body задаёт семейство через
   !important, и обычное объявление проигрывает — из-за этого первая версия
   рисовалась дефолтным шрифтом вместо Syne, хотя в файле было написано
   иначе. Проверять такое нужно по вычисленному стилю, а не по исходнику.

   Появление: блок и плитки выезжают, когда человек доскроллил (класс
   is-visible вешает initSiteStats). */
.site-stats {
    margin-top: 28px;
    /* Боковых отступов НЕТ: секция главной уже отступает от края ровно на
       столько же, и свои 14px задваивали инсет — подвал выходил на 28px уже
       сетки кейсов (замерено на 390/768/1280/1600). Из-за этого на 1280 в ряд
       влезало 5 плиток вместо 6, и шестая растягивалась на всю ширину. */
    padding: 0 0 28px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}

.site-stats.is-visible {
    opacity: 1;
    transform: none;
}

.site-stats-inner {
    min-width: 0;
}

/* Не grid, а flex с ростом: в сетке последний ряд оставлял одинокую плитку
   и пустую клетку рядом. У flex плитки последнего ряда растягиваются. */
.site-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-stat {
    flex: 1 1 150px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px;
    background: rgba(4, 6, 12, .88);
    border: 1px solid rgba(255, 255, 255, .07);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
}

.site-stats.is-visible .site-stat {
    opacity: 1;
    transform: none;
}

/* Плитки вступают по очереди — число успевает прочитаться. */
.site-stats.is-visible .site-stat:nth-child(2) { transition-delay: .05s; }
.site-stats.is-visible .site-stat:nth-child(3) { transition-delay: .1s; }
.site-stats.is-visible .site-stat:nth-child(4) { transition-delay: .15s; }
.site-stats.is-visible .site-stat:nth-child(5) { transition-delay: .2s; }
.site-stats.is-visible .site-stat:nth-child(6) { transition-delay: .25s; }

.site-stat-value {
    font-family: 'DM Mono', 'Space Grotesk', monospace !important;
    font-weight: 500 !important;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: .01em;
    color: #FFFFFF !important;
    /* Цифры одной ширины: при отсчёте число не дёргается по горизонтали. */
    font-variant-numeric: tabular-nums;
}

.site-stat-label {
    font-family: 'Syne', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px;
    line-height: 1.2;
    color: var(--muted) !important;
    text-align: center;
}

@media (min-width: 761px) {
    .site-stats { margin-top: 34px; padding: 0 0 40px; }
    .site-stats-grid { gap: 14px; }
    .site-stat { padding: 22px 18px; gap: 6px; }
    .site-stat-value { font-size: 30px; }
    .site-stat-label { font-size: 12px; }
}

/* Кому важнее покой: блок просто стоит на месте. */
@media (prefers-reduced-motion: reduce) {
    .site-stats, .site-stats .site-stat {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Страница кейса: компактная раскладка ───────────────────────────────
   Замерено на 420x900: страница занимала 1884 пикселя — 2,1 экрана, и это
   при восьми предметах. Крупное: картинка кейса 256, блок ленты 276,
   панель «что может выпасть» 778 (карточки по 171). Ужимаем всё разом, а
   не по одному блоку: уменьшить что-то одно — остальное станет выглядеть
   непропорционально большим.

   Всё привязано к #caseView: те же классы носит лента в модалке
   мультиоткрытия и карточки в других разделах, их размеры не трогаем. */
#caseView .case-page-stack {
    gap: 10px;
}

#caseView #casePageHeadStack {
    margin-bottom: 4px !important;
}

/* Кнопка возврата — главный выход со страницы, а была самой незаметной
   надписью на ней. Крупнее, с акцентной рамкой, и стрелка отъезжает влево
   при наведении: направление действия читается ещё до чтения текста. */
#caseView .back-btn {
    min-height: 42px !important;
    padding: 9px 18px 9px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-color: rgba(88, 166, 255, .35) !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

#caseView .back-btn:hover {
    border-color: rgba(88, 166, 255, .7) !important;
    background: rgba(56, 104, 192, .16) !important;
    transform: translateX(-2px);
}

/* Стрелка — псевдоэлементом, а не частью подписи: её нужно двигать отдельно,
   а текст обязан остаться настоящим текстовым узлом, иначе переключатель
   языка его не найдёт (он ходит по текстовым узлам, не по атрибутам). */
#caseView .back-btn::before {
    content: '←';
    font-size: 17px;
    line-height: 1;
    transition: transform .16s ease;
}

#caseView .back-btn:hover::before {
    transform: translateX(-3px);
}

/* Карточка, из которой игрок только что вышел: подсвечиваем на пару секунд,
   чтобы после возврата её не искать глазами в ряду одинаковых. */
.case-card--returned {
    animation: caseCardReturned 1.6s ease-out 1;
}

@keyframes caseCardReturned {
    0%, 55% { box-shadow: 0 0 0 2px rgba(88, 166, 255, .75), 0 0 26px rgba(56, 104, 192, .5); }
    100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0), 0 0 0 rgba(56, 104, 192, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .case-card--returned { animation: none; box-shadow: 0 0 0 2px rgba(88, 166, 255, .6); }
}

#caseView .case-hero {
    padding: 12px 14px 14px !important;
}

#caseView .case-showcase-emoji {
    font-size: 64px !important;
    margin-bottom: 2px !important;
}

/* Размер картинки приходит из данных кейса (iconSize в панели, по умолчанию
   96) — у «Дракона» там стоит 256, и один этот кейс растягивал страницу
   сильнее всего. Потолок держим здесь, чтобы настройка контента не могла
   больше разогнать вёрстку. */
#caseView .case-showcase-image {
    width: auto !important;
    height: auto !important;
    max-width: 116px !important;
    max-height: 116px !important;
}

#caseView .case-showcase-name {
    font-size: 18px !important;
    margin-top: 6px !important;
}

/* Лента. Высота покоя и боевой прокрутки обязаны совпадать — иначе при
   старте открытия всё, что ниже, прыгает вниз (ради этого высота и
   резервировалась). Уменьшаем обе на одну и ту же величину. */
#caseView .case-reel {
    min-height: 176px;
}

#caseView .case-reel-idle,
#caseView #caseRouletteWindows .roulette-lane .roulette-window {
    min-height: 128px !important;
}

/* Высота карточки ленты зашита числом (136 на телефоне, 180 на десктопе), и
   одна уменьшенная картинка её не меняет: ужать надо саму карточку, иначе
   она вылезает из уменьшенного окна, боевая лента становится выше покоя и
   на старте открытия всё, что ниже, уезжает вниз. Ширину ведём следом —
   карточка в ленте квадратная. */
#caseView .roulette-item:not(.compact) {
    min-width: 108px !important;
    width: 108px !important;
    height: 112px !important;
    padding: 8px !important;
}

#caseView .roulette-item:not(.compact) .roulette-emoji {
    min-height: 40px !important;
    font-size: 36px !important;
}

#caseView .roulette-item:not(.compact) .roulette-image {
    width: 40px !important;
    height: 40px !important;
}

/* Имя занимает две строки у половины предметов («Globa Steppa», «Rosey and
   Teddy»), и в ужатой карточке вторая строка упиралась в цену и обрезалась
   границей. Кегль меньше, строк не больше двух, остаток — многоточием. */
#caseView .roulette-item:not(.compact) .roulette-name {
    font-size: 11px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    /* !important здесь обязателен: выше по файлу у .roulette-item:not(.compact)
       .roulette-name стоит line-clamp: 3 с !important, и без него побеждает он.
       Карточка свёрстана под две строки (под имя 36 пикселей на десктопе, 26 на
       телефоне), поэтому третья строка рисовалась наполовину и обрезалась
       кромкой — замер на живой странице: коробка 36, содержимому нужно 43. */
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    /* Имя занимает карточку целиком, забирая её боковые отступы себе: картинка
       и цена стоят по центру и от этого не страдают, а имени лишние 12 пикселей
       решают судьбу. Без них «Los Combinasionas» не помещалось одним словом и
       ломалось пополам, требуя третью строку при любом кегле. */
    width: auto !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
}

/* Ступени кегля для длинных имён. Классы вешает createRouletteWindow по длине
   строки; общие ступени (.roulette-item:not(.compact) .roulette-name.name-long)
   до страницы кейса не доезжали — id в селекторе выше любого набора классов, и
   длинное имя печаталось тем же кеглем, что короткое. */
#caseView .roulette-item:not(.compact) .roulette-name.name-long {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
}

#caseView .roulette-item:not(.compact) .roulette-name.name-xlong {
    font-size: 9px !important;
    letter-spacing: 0 !important;
}

#caseView .roulette-item:not(.compact) .roulette-value {
    font-size: 13px !important;
}

/* Кубик мутации считается от свободного зазора сбоку от картинки: картинка
   стала меньше, значит и он обязан — иначе перекроет пета. */
#caseView .roulette-item .mut-badge-roulette {
    width: 26px !important;
    height: 26px !important;
}

/* Дорожка прибита к верху окна на 18px — отступ из тех времён, когда окно было
   230 в высоту, а карточка 136: тогда под ней ещё оставалось место. После
   ужатия окна под карточку эти 18 сверху выталкивали её на 4 пикселя ниже
   нижней кромки, и лента выглядела уехавшей под землю. Свободного места
   осталось ровно 16, из них 2 забирает верхняя рамка окна — делим остаток
   пополам, чтобы зазор сверху и снизу был одинаковым. */
#caseView .case-reel .roulette-track {
    top: 7px !important;
}

/* Карточка мультиоткрытия той же высоты, что обычная: дорожка у них общая, а
   с прежними 122 она вылезала бы из окна уже на 2 пикселя. */
#caseView .roulette-item.compact {
    height: 112px !important;
    min-width: 104px !important;
}

#caseView .case-showcase-meta > div {
    padding: 9px 12px !important;
}

#caseView .case-showcase-meta strong {
    font-size: 17px !important;
}

#caseView .multi-open-row {
    margin: 6px 0 6px !important;
}

#caseView .open-count-btn {
    min-height: 38px !important;
}

/* Кнопку открытия не трогаем: 44 — это размер под палец, и ужимать главное
   действие страницы ради двух десятков пикселей неправильно. */

#caseView .case-info-panel {
    padding: 13px !important;
}

#caseView #caseLootPreview.loot-preview--square {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
    gap: 8px !important;
}

#caseView .loot-chip-price {
    padding: 3px 7px !important;
    font-size: 13px !important;
}

#caseView .mut-badge-loot {
    width: 26px !important;
    height: 26px !important;
}

@media (min-width: 761px) {
    #caseView .case-showcase-image {
        max-width: 150px !important;
        max-height: 150px !important;
    }

    #caseView .case-reel {
        min-height: 204px;
    }

    #caseView .case-reel-idle,
    #caseView #caseRouletteWindows .roulette-lane .roulette-window {
        min-height: 152px !important;
    }

    /* Высота считается под худший случай — имя в две строки («Dragon
       Cannelloni», «Rosey and Teddy»): картинка 50 + отступ 8 + две строки 29
       + цена 20 = 107 при 116 внутри отступов. С запасом 130 вторая строка
       срезалась. */
    #caseView .roulette-item:not(.compact) {
        min-width: 126px !important;
        width: 126px !important;
        height: 136px !important;
        padding: 10px !important;
    }

    #caseView .roulette-item:not(.compact) .roulette-emoji {
        min-height: 50px !important;
        font-size: 46px !important;
    }

    #caseView .roulette-item:not(.compact) .roulette-image {
        width: 50px !important;
        height: 50px !important;
    }

    #caseView .roulette-item:not(.compact) .roulette-name {
        font-size: 12px !important;
    }

    /* Ступени повторяются и здесь: у правила выше классов меньше, и без этих
       двух строк телефонные 9.5/9 достались бы и десктопу, где карточка
       крупнее и имя спокойно читается. */
    #caseView .roulette-item:not(.compact) .roulette-name.name-long {
        font-size: 11px !important;
    }

    #caseView .roulette-item:not(.compact) .roulette-name.name-xlong {
        font-size: 10px !important;
    }

    #caseView .roulette-item:not(.compact) .roulette-value {
        font-size: 14px !important;
    }

    #caseView .roulette-item .mut-badge-roulette {
        width: 30px !important;
        height: 30px !important;
    }

    /* Окно 152, карточка 136 — свободных те же 16, отступ тот же. */
    #caseView .roulette-item.compact {
        height: 136px !important;
        min-width: 122px !important;
    }

    #caseView #caseLootPreview.loot-preview--square {
        grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)) !important;
    }
}

/* ── Оплата криптой на своей странице ─────────────────────────────────
   Скруглений нет намеренно: на сайте стоит глобальное
   * { border-radius: 0 !important }, углы везде прямые.
   Палитра и радиусы те же, что у форм депозита: экран не должен
   выглядеть вставкой из другого сайта. */

/* Плитки монет */
.plisio-coin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.plisio-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform .14s ease, border-color .14s ease, opacity .14s ease;
}
.plisio-coin:hover:not(:disabled) { border-color: var(--accent-3); transform: translateY(-1px); }
.plisio-coin:active:not(:disabled) { transform: scale(.97); }
.plisio-coin:disabled { opacity: .3; cursor: not-allowed; }
.plisio-coin-icon { width: 28px; height: 28px; border-radius: 50%; }
.plisio-coin-name { font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.plisio-coin-net { font-size: 10px; color: var(--muted); line-height: 1.25; }
.plisio-coin-min { font-size: 10px; color: var(--muted); }
.plisio-coin-fee { font-size: 10px; color: var(--warning); }

/* Шапка экрана оплаты */
.plisio-pay-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.plisio-back {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.plisio-back:hover { border-color: var(--accent-3); }
.plisio-back:active { transform: scale(.94); }
.plisio-pay-coin { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.plisio-pay-icon { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; }
.plisio-pay-coin-text { display: flex; flex-direction: column; min-width: 0; }
.plisio-pay-coin-name { font-weight: 800; font-size: 14px; }
.plisio-pay-coin-net { font-size: 11px; color: var(--muted); }
.plisio-pay-timer {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 15px;
  padding: 5px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.plisio-pay-timer.is-soon { color: var(--warning); border-color: var(--warning); }

/* Карточка с QR и реквизитами */
.plisio-pay-card {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plisio-pay-qr { display: flex; justify-content: center; }
.plisio-pay-qr img {
  width: 164px;
  height: 164px;
  background: #fff;
  padding: 9px;
}
.plisio-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.plisio-field:hover { border-color: var(--accent-3); }
.plisio-field:active { background: var(--panel-2); }
.plisio-field.is-copied { border-color: var(--success); }
.plisio-field-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plisio-field-value { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.plisio-field-value.is-address { font-size: 12px; font-weight: 600; line-height: 1.45; }
.plisio-field-copy { font-size: 10px; color: var(--muted); }
.plisio-field.is-copied .plisio-field-copy { color: var(--success); }

/* Примечание и состояние */
.plisio-pay-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.plisio-pay-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}
.plisio-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--accent-3);
  animation: plisio-pulse 1.4s ease-in-out infinite;
}
.plisio-pay-state.is-done .plisio-dot { background: var(--success); animation: none; }
.plisio-pay-state.is-dead .plisio-dot { background: var(--muted); animation: none; }
@keyframes plisio-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* Появление экрана: без рывка */
#plisioPay:not(.hidden), #plisioCoinPick:not(.hidden) { animation: plisio-in .18s ease-out; }
@keyframes plisio-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #plisioPay:not(.hidden), #plisioCoinPick:not(.hidden) { animation: none; }
  .plisio-dot { animation: none; }
}

@media (max-width: 380px) {
  .plisio-coin-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .plisio-pay-qr img { width: 140px; height: 140px; }
  .plisio-pay-card { padding: 12px; }
}

/* ── Подсветка выбранных кейсов (case-glow-20260927) ────────────────────────────────
   Включается у отдельных кейсов (db.cases[].glow), цвет — accent того же
   кейса, приходит переменными --cg-* прямо на карточке.

   .case-glow погашен глобально двумя правилами (styles.css:1333 и :1474) —
   там он закрывает пустой элемент из статичной разметки. Здесь перебиваем
   его только внутри помеченной карточки, а не снимаем запрет целиком.
   Ореол лежит внутри .case-visual: у неё overflow:hidden, поэтому свечение
   не вылезает за рамку картинки, а тонкая рамка и тень — уже на карточке. */
.case-card-glow .case-glow {
    display: block !important;
    position: absolute !important;
    inset: var(--cg-inset, -28%) !important;
    background: radial-gradient(var(--cg-shape, circle) at var(--cg-pos, 50% 50%), var(--cg-core, rgba(127, 77, 255, .55)), var(--cg-edge, rgba(127, 77, 255, .16)) var(--cg-inner, 45%), transparent var(--cg-outer, 70%)) !important;
    /* Перебивает общий blur(10px) для .case-glow ниже по файлу: мягкость
       настраивается на кейс. */
    filter: blur(var(--cg-blur, 10px)) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    animation: var(--cg-anim, caseGlowPulse) var(--cg-speed, 3.4s) ease-in-out infinite !important;
}

/* Картинку НЕ трогаем: она лежит абсолютом по inset:0 (см. правило
   .case-visual img.case-image ниже по файлу), и любая подмена position
   ломает её размер. Поверх ореола она и так — идёт после него в разметке. */

/* Рамка и внешнее свечение — отдельные классы, а не значения-пустышки:
   выключенная настройка не должна ничего перебивать, иначе вернуть обычный
   вид карточки станет нечем. */
.case-card.case-card-glow.cg-border {
    border-color: var(--cg-line, rgba(127, 77, 255, .55)) !important;
}

.case-card.case-card-glow.cg-shadow {
    box-shadow: 0 0 28px var(--cg-cast, rgba(127, 77, 255, .3)), 0 10px 22px rgba(0, 0, 0, .18) !important;
}

/* ── Настройка подсветки в редакторе кейса ─────────────────────────────────
   Предпросмотр — НАСТОЯЩАЯ карточка (.case-card со всеми её классами), а не
   похожая коробка: иначе он врёт, и сверять пришлось бы на главной. */
/* ced-glow-20260927-layout: карточка редактора узкая (замер: 340 px даже при
   окне 1440), поэтому раскладка гибкая и переносится сама. Медиазапросы тут
   бесполезны — они смотрят на окно, а тесно именно в колонке. */
.ced-glow {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.ced-glow-controls {
    flex: 1 1 240px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

/* Цвет, поле и кнопка «из акцента» в 280 px в строку не помещаются. */
.ced-glow .case-edit-color-row {
    flex-wrap: wrap;
}

.ced-glow .case-edit-color-row .ops-input {
    flex: 1 1 90px;
    min-width: 0;
}

.ced-glow-controls .ced-field-full {
    grid-column: 1 / -1;
}

.ced-glow-controls input[type="range"] {
    width: 100%;
    accent-color: #58A6FF;
}

.ced-glow-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5A7086;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 10px;
    margin-top: 2px;
}

.ced-glow-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ced-glow-flags label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.ced-glow-preview {
    flex: 1 1 180px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Предпросмотр не кликается и не дёргается: это картинка состояния, а не
   живая карточка витрины. */
.ced-glow-preview .case-card {
    cursor: default;
    pointer-events: none;
    min-height: 210px;
    width: 100%;
}

.ced-glow-preview .case-visual {
    min-height: 110px;
}

.ced-glow-actions {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* Нижняя точка яркости и размах дыхания — тоже настройки кейса, поэтому
   кадры собраны из переменных, а не зашиты числами. */
@keyframes caseGlowPulse {
    0%, 100% { opacity: var(--cg-dim, .55); transform: scale(var(--cg-lo, .94)); }
    50%      { opacity: 1;                  transform: scale(var(--cg-hi, 1.06)); }
}

/* Кому анимация мешает — остаётся ровное свечение, без движения. */
@media (prefers-reduced-motion: reduce) {
    .case-card-glow .case-glow { animation: none !important; opacity: .8 !important; }
}

/* ── Английская типографика (en-typography-20260927) ───────────────────────
   Русская версия НЕ затрагивается: все правила заперты на html[lang="en"],
   а этот признак ставит setCurrentLanguage в app.js.

   Зачем вообще: рабочие шрифты сайта (Syne, Chakra Petch) кириллицы не
   содержат, поэтому по-русски они молча падают в системный Segoe UI, а
   по-английски рисуются по-настоящему — и широкий Syne разваливал заголовок
   на пять строк. Плюс поверх всего висело рантайм-правило панели с
   пиксельными цифрами Silkscreen через unicode-range, и пиксель лез ВНУТРЬ
   слов: «EVERY 2 HOURS», «every 24 hours».

   Замер на стенде (шесть экранов, 390px): обрезанного текста было 22, стало
   0; по-русски всё до последнего числа совпадает с прежним.

   Шрифты грузит app.js при включении английского — держать их в общей
   загрузке нельзя, русскому игроку эти три семьи не нужны. */
/* ============================================================================
   Brainrot Battle — английская типографика, СВЕДЁННЫЙ вариант (судья).

   Основа — вариант C: три роли, ни одной лишней.
     Anton           — дисплей: заголовки, названия кейсов, крупные CTA.
                       Сверхузкий тяжёлый гротеск; длинная английская фраза
                       перестаёт разваливаться на пять строк.
     Archivo (var)   — интерфейс. Ось ширины wdth 62..125 закрывает и обычный
                       текст, и узкие подписи в тесных коробках одной семьёй.
     JetBrains Mono  — деньги и счётчики: моноширинный = табличный.

   Поверх основы взяты ТРИ хирургические правки из варианта B — ровно те,
   что снимают остаток обрезки, которую шрифт закрыть не может в принципе
   (строка длиннее коробки при любой гарнитуре):
     B-5  .live-item-name  — вторая строка вместо многоточия;
     B-8  .profile-username — перенос вместо многоточия;
     B-10 плейсхолдеры полей пополнения — «from TOK» не режется посреди слова.

   Silkscreen-цифры ('__gd') не отключаются отдельным правилом: рантайм-
   правило панели перебивается весом селектора html[lang="en"] body *
   (0,1,2 против 0,0,2) плюс !important, и '__gd' просто уходит из стека.

   Всё заперто на html[lang="en"] — русская версия не затрагивается.
   ========================================================================== */

/* --- 1. База интерфейса ------------------------------------ */
html[lang="en"] body,
html[lang="en"] body * {
    font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-optical-sizing: auto;
    /* Сброс наследования: ниже word-spacing поджимается только на листьях
       с чистыми числами и просочиться в подписи со словами не может. */
    word-spacing: normal;
}

html[lang="en"] body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- 2. Кнопки и вкладки по умолчанию ---------------------- */
/* Идёт ДО дисплейного блока: дисплейные кнопки перебьют ниже. */
html[lang="en"] body button,
html[lang="en"] body .primary-btn,
html[lang="en"] body .ghost-btn,
html[lang="en"] body .nav-btn,
html[lang="en"] body .tab,
html[lang="en"] body .chip,
html[lang="en"] body .deposit-cat-tab,
html[lang="en"] body .deposit-menu-tab {
    font-stretch: 90% !important;
    font-weight: 700 !important;
    letter-spacing: .035em !important;
}

html[lang="en"] body .upg-tab {
    font-size: 11.5px !important;
    font-stretch: 84% !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
}

html[lang="en"] body .upg-quick-btn {
    font-size: 11.5px !important;
    font-stretch: 88% !important;
    letter-spacing: .01em !important;
}

html[lang="en"] body .back-btn {
    font-stretch: 92% !important;
    letter-spacing: .01em !important;
}

/* --- 3. Дисплей: Anton ------------------------------------- */
html[lang="en"] body h1, html[lang="en"] body h1 *,
html[lang="en"] body h2, html[lang="en"] body h2 *,
html[lang="en"] body h3, html[lang="en"] body h3 *,
html[lang="en"] body .promo-title,
html[lang="en"] body .case-showcase-name,
html[lang="en"] body .upg-title-sub,
html[lang="en"] body .case-title,
html[lang="en"] body .case-section-title,
html[lang="en"] body .battle-create-title,
html[lang="en"] body .settings-title,
html[lang="en"] body .h1-digit,
html[lang="en"] body .upg-spin-btn,
html[lang="en"] body .upg-spin-btn span,
html[lang="en"] body .primary-btn.full-width,
html[lang="en"] body .lobby-action-btn,
html[lang="en"] body .free-case-claim-btn,
html[lang="en"] body .open-count-btn,
html[lang="en"] body .deposit-terminal-pay-btn,
html[lang="en"] body .pet-deposit-next-btn,
html[lang="en"] body .pet-deposit-submit-btn,
html[lang="en"] body .bonus-apply-btn-text {
    font-family: 'Anton', 'Oswald', 'Archivo', sans-serif !important;
    font-weight: 400 !important;
    font-stretch: normal !important;
    text-transform: uppercase !important;
    font-synthesis-weight: none;
}

/* Герой: Anton узкий — две строки вместо пяти, с запасом до края.
   Кегль ограничен сверху не вкусом, а замером на 360px (см. отчёт):
   34px там всё ещё ложится в две строки. */
html[lang="en"] body h1,
html[lang="en"] body .promo-hero h1,
html[lang="en"] body .bonus-hero h1 {
    font-size: 34px !important;
    line-height: .91 !important;
    letter-spacing: .004em !important;
}

html[lang="en"] body h2 {
    font-size: 24px !important;
    line-height: 1.06 !important;
    letter-spacing: .012em !important;
    padding-left: 2px !important;
}

html[lang="en"] body h3,
html[lang="en"] body .case-section-title {
    font-size: 22px !important;
    line-height: 1.04 !important;
    letter-spacing: .015em !important;
}

html[lang="en"] body #depositModalTitle {
    font-size: 27px !important;
    line-height: .96 !important;
    letter-spacing: .008em !important;
}

html[lang="en"] body .upg-title-sub {
    font-size: 26px !important;
    line-height: 1.06 !important;
    letter-spacing: .01em !important;
    padding-left: 2px !important;
}

html[lang="en"] body .case-showcase-name {
    font-size: 23px !important;
    letter-spacing: .012em !important;
}

html[lang="en"] body .case-title {
    font-size: 13.5px !important;
    letter-spacing: .02em !important;
    line-height: 1.12 !important;
}

html[lang="en"] body .settings-title {
    font-size: 24px !important;
    letter-spacing: .06em !important;
}

/* --- 4. Крупные CTA ---------------------------------------- */
html[lang="en"] body .upg-spin-btn,
html[lang="en"] body .upg-spin-btn span {
    font-size: 25px !important;
    letter-spacing: .04em !important;
}

html[lang="en"] body .primary-btn.full-width,
html[lang="en"] body .free-case-claim-btn,
html[lang="en"] body .deposit-terminal-pay-btn,
html[lang="en"] body .pet-deposit-next-btn,
html[lang="en"] body .pet-deposit-submit-btn {
    font-size: 15px !important;
    letter-spacing: .05em !important;
    line-height: 1.08 !important;
}

html[lang="en"] body .lobby-action-btn {
    font-size: 14px !important;
    letter-spacing: .045em !important;
    line-height: 1.08 !important;
}

html[lang="en"] body .open-count-btn {
    font-size: 17px !important;
    letter-spacing: .02em !important;
}

/* --- 5. Микро-подписи (кикеры) ----------------------------- */
/* Было 8–10px Syne с трекингом до .22em: широкие буквы плюс широкие
   пробелы — подписи не влезали и не читались. Archivo 85% уже, поэтому
   кегль поднят, а трекинг сохранён: подпись и читается, и занимает
   меньше места. */
html[lang="en"] body .panel-title,
html[lang="en"] body .sidebar-title,
html[lang="en"] body .hero-badge,
html[lang="en"] body .upg-slot-badge,
html[lang="en"] body .upg-empty-label,
html[lang="en"] body .profile-wager-title,
html[lang="en"] body .profile-history-toggle-kicker,
html[lang="en"] body .free-case-banner-kicker,
html[lang="en"] body .live-best-banner-mobile-label,
html[lang="en"] body .deposit-fullscreen-kicker,
html[lang="en"] body .deposit-field-label,
html[lang="en"] body .pet-deposit-panel-title,
html[lang="en"] body .pet-deposit-label,
html[lang="en"] body .profile-username-label,
html[lang="en"] body .profile-stats-body > div > div:first-child {
    font-family: 'Archivo', sans-serif !important;
    font-stretch: 85% !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
}

html[lang="en"] body .deposit-fullscreen-kicker,
html[lang="en"] body .pet-deposit-panel-title {
    font-size: 11px !important;
    letter-spacing: .15em !important;
}

/* Правка к варианту C. «BEST DROP», «ACCOUNT STATS», «WAGERING» — это
   .panel-title с ИНЛАЙНОВЫМ style="font-size:13px". Правило с !important
   из таблицы бьёт неважный инлайн, и в C эти заголовки схлопывались с 13
   до 10.5px — секции теряли ступень иерархии. Возвращаем 12.5px: Archivo
   на 85% ширины всё равно уже, чем был Syne на 13px, поэтому запас по
   ширине не тратится. */
html[lang="en"] body .panel-title,
html[lang="en"] body .sidebar-title,
html[lang="en"] body .profile-wager-title {
    font-size: 12.5px !important;
    letter-spacing: .11em !important;
}

html[lang="en"] body .upg-empty-label {
    font-stretch: 78% !important;
    letter-spacing: .06em !important;
}

/* --- 6. Названия предметов: самая тесная ширина ------------- */
/* Коробки под названия — самые узкие на сайте (56–105px), а имена
   брейнротов длинные. Ось ширины Archivo отрабатывает здесь лучше
   всего: 64–78% против 100% у обычного текста. */
html[lang="en"] body .item-name,
html[lang="en"] body .loot-name,
html[lang="en"] body .target-name,
html[lang="en"] body .roulette-name,
html[lang="en"] body .upg-inv-card-name,
html[lang="en"] body .upg-target-card-name,
html[lang="en"] body .live-item-name,
html[lang="en"] body .live-card-preview-label,
html[lang="en"] body .live-best-banner-mobile-name,
html[lang="en"] body .profile-bestdrop-item-name,
html[lang="en"] body .pet-deposit-card-name,
html[lang="en"] body .item-source {
    font-family: 'Archivo', sans-serif !important;
    font-weight: 600 !important;
    font-stretch: 76% !important;
    letter-spacing: 0 !important;
}

html[lang="en"] body .roulette-name {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    font-stretch: 78% !important;
    letter-spacing: .005em !important;
    line-height: 1.15 !important;
}

/* На 390px узкой оси 64% хватает, на 360px «Strawberry Elephant» снова
   упирается в край карточки. Поэтому здесь тот же приём, что у ленты:
   разрешаем вторую строку и снимаем жёсткий max-width. */
html[lang="en"] body .upg-inv-card-name,
html[lang="en"] body .upg-target-card-name {
    font-size: 10px !important;
    font-stretch: 64% !important;
    font-weight: 700 !important;
    letter-spacing: -.005em !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-width: 100% !important;
}

html[lang="en"] body .item-name {
    font-size: 10.5px !important;
    font-stretch: 74% !important;
    line-height: 1.2 !important;
}

html[lang="en"] body .pet-deposit-card-name {
    font-size: 11px !important;
    font-stretch: 78% !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

html[lang="en"] body .live-best-banner-mobile-name {
    font-stretch: 82% !important;
    font-weight: 700 !important;
}

html[lang="en"] body .profile-bestdrop-item-name {
    font-stretch: 86% !important;
    font-weight: 700 !important;
}

/* --- 6a. Взято из варианта B: перенос вместо многоточия ------ */
/* Единственное, что не лечится шрифтом: «Tang Tang Keletang» просит 79px
   в коробке 56px. Ужать до 56px можно только нечитаемыми 6–7px, поэтому
   отдаём вторую строку — по высоте карточки место под неё есть.
   В отличие от B здесь не 7.5px, а 9.5px при ширине 68%: узкая ось
   Archivo позволяет сохранить читаемый кегль. */
html[lang="en"] body .home-live-feed-mobile .live-item-name,
html[lang="en"] body .live-item-name {
    font-size: 9.5px !important;
    font-stretch: 68% !important;
    letter-spacing: -.005em !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

/* --- 7. Деньги и счётчики: JetBrains Mono ------------------- */
/* Только листья с числами. Контейнеры сюда не берём: mono и поджатый
   пробел наследуются и склеивают слова в соседних подписях. */
html[lang="en"] body .case-price,
html[lang="en"] body .item-value,
html[lang="en"] body .upg-inv-card-val,
html[lang="en"] body .upg-target-card-val,
html[lang="en"] body .upg-slot-value,
html[lang="en"] body .loot-chip-price,
html[lang="en"] body .roulette-value,
html[lang="en"] body .profile-best-drop-value,
html[lang="en"] body .profile-wager-nums,
html[lang="en"] body .profile-wager-pct,
html[lang="en"] body .profile-wager-hint,
html[lang="en"] body .profile-public-id,
html[lang="en"] body .profile-balance-box strong,
html[lang="en"] body .live-best-banner-mobile-value,
html[lang="en"] body .site-stat-value,
html[lang="en"] body .balance-chip strong,
html[lang="en"] body .rf-row-amount,
html[lang="en"] body .rf-podium-amount,
html[lang="en"] body .rf-jackpot-amount,
html[lang="en"] body .staking-history-amount,
html[lang="en"] body .trade-success-amount,
html[lang="en"] body .exchange-shop-balance,
html[lang="en"] body .profile-stats-body > div > div:last-child {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 600 !important;
    font-stretch: normal !important;
    letter-spacing: -.025em !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}

/* Разрядный пробел в моноширинном равен цифре: «232 000» расползалось
   на две группы. Поджимаем — но только там, где в строке нет слов. */
html[lang="en"] body .profile-best-drop-value,
html[lang="en"] body .profile-wager-nums,
html[lang="en"] body .profile-stats-body > div > div:last-child,
html[lang="en"] body .profile-balance-box strong,
html[lang="en"] body .live-best-banner-mobile-value,
html[lang="en"] body .site-stat-value {
    word-spacing: -.3em !important;
}

html[lang="en"] body .case-price {
    font-size: 13px !important;
    font-weight: 500 !important;
}

html[lang="en"] body .profile-best-drop-value {
    font-size: 19px !important;
    font-weight: 700 !important;
}

html[lang="en"] body .profile-stats-body > div > div:last-child {
    font-weight: 700 !important;
}

html[lang="en"] body .item-value,
html[lang="en"] body .upg-inv-card-val,
html[lang="en"] body .loot-chip-price {
    font-size: 11px !important;
    letter-spacing: -.03em !important;
}

/* Цена в карточке депозита несёт и слова («· from 2 up»), поэтому
   остаётся в Archivo с табличными цифрами, без моноширинного. */
html[lang="en"] body .pet-deposit-card-value {
    font-stretch: 88% !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Таймер акции сидел на Oswald — приводим к системе. */
html[lang="en"] body .promo-card strong,
html[lang="en"] body .hero-copy strong {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}

/* --- 8. Ник в профиле: взято из варианта B ------------------ */
/* «@alexandralexandrovichchayka» — 28 знаков, не влезет ни при каком
   шрифте и ни при каком кегле. Перенос вместо многоточия. */
html[lang="en"] body .profile-username {
    font-family: 'Archivo', sans-serif !important;
    font-stretch: 78% !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

/* --- 9. Текст-абзацы и поля -------------------------------- */
html[lang="en"] body p,
html[lang="en"] body .muted,
html[lang="en"] body .deposit-fullscreen-intro,
html[lang="en"] body .hint,
html[lang="en"] body .note {
    font-stretch: 96% !important;
    font-weight: 450 !important;
    letter-spacing: .002em !important;
    line-height: 1.45 !important;
}

html[lang="en"] body input,
html[lang="en"] body textarea,
html[lang="en"] body select,
html[lang="en"] body .pet-deposit-price-input {
    font-family: 'Archivo', sans-serif !important;
    font-stretch: 86% !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Взято из варианта B: по-английски «from TOK» резалось посреди слова. */
html[lang="en"] body .pet-deposit-price-input,
html[lang="en"] body .pet-deposit-price-input::placeholder {
    font-size: 11px !important;
    letter-spacing: -.01em !important;
}

/* Логотип шапки вне английской типографики: он должен выглядеть одинаково на
   обоих языках. Поэтому здесь задано ТОЛЬКО семейство — его надо вернуть,
   потому что базовое правило блока (html[lang="en"] body *) красит всё
   подряд. Кегль, вес, разрядка и регистр остаются те же, что в русской
   версии: их задаёт обычная вёрстка, и на другой ширине экрана они не
   разъедутся. */
/* Шрифт логотипа закреплён для обоих языков — см. правило .brand-btn ниже по
   файлу. Здесь только вес и разрядка: без них логотип забирает общее правило
   кнопок английского блока (700 / .035em). */
html[lang="en"] body .brand-btn,
html[lang="en"] body .brand-btn * {
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    font-stretch: normal !important;   /* ось ширины Archivo тут ни при чём */
}

/* Кроме самой надписи: на узком экране у слова свой вес и своя разрядка
   (.brand-word в медиазапросе до 760px), и перебивать их нельзя. */
@media (max-width: 760px) {
    html[lang="en"] body .brand-word {
        font-weight: 400 !important;
        letter-spacing: .03em !important;
    }
}

/* ── Шрифт логотипа: один и тот же всегда ──────────────────────────────────
   Логотип не должен менять начертание ни от языка, ни от настройки шрифта в
   панели. Раньше на широком экране надпись забирало общее правило панели
   (body, body * с !important), потому что собственное правило .brand-word
   живёт только в медиазапросе до 760px: по-русски логотип рисовался шрифтом
   настройки, по-английски — дисплейным, и ширина кнопки расходилась на
   семьдесят пикселей.

   Вес селектора здесь 0,2,1 (класс повторён намеренно) — выше и правила
   панели (0,0,2), и базового правила английского блока (0,1,2), поэтому оно
   больше логотипа не касается. Кегль, вес и разрядку НЕ трогаем: их задаёт
   обычная вёрстка, и на разных ширинах они разные не случайно. */
body .brand-btn.brand-btn,
body .brand-btn.brand-btn * {
    font-family: 'Syne', 'Segoe UI', system-ui, sans-serif !important;
}


/* ─── Ивент «Прыжок за яйцами»: то, что нужно до ленивого eggs.css ─────────
   Токены островов, кнопка меню, метка на бургере, бейдж XP на карточках
   кейсов, полоса ивентовых кейсов на главной, тост после рулетки, строка
   титулов/трофеев в профиле и значок косметики в ленте. Сама вкладка — в
   eggs.css. Вид — эскиз «золотая середина»: шасси сайта, один акцент ивента
   (--acc) в тоне острова текущего уровня, без пикселей и кислотного жёлтого. */

/* Острова: небо (верх/середина) + акцент ивента в тоне острова. */
[data-island="grass"]  { --sky-top: #183F35; --sky-mid: #0E2124; --acc: #86E0B2; --acc-rgb: 134, 224, 178; }
[data-island="desert"] { --sky-top: #43321B; --sky-mid: #1E1913; --acc: #F0C27A; --acc-rgb: 240, 194, 122; }
[data-island="snow"]   { --sky-top: #20395A; --sky-mid: #0F1A2B; --acc: #AAD3FF; --acc-rgb: 170, 211, 255; }
[data-island="cave"]   { --sky-top: #2E2553; --sky-mid: #15122B; --acc: #BFA9FF; --acc-rgb: 191, 169, 255; }
[data-island="water"]  { --sky-top: #103B50; --sky-mid: #0A1A27; --acc: #6FD7E8; --acc-rgb: 111, 215, 232; }
[data-island="lava"]   { --sky-top: #4B1E12; --sky-mid: #1F110D; --acc: #FFA477; --acc-rgb: 255, 164, 119; }
[data-island="heaven"] { --sky-top: #3B3668; --sky-mid: #1A1932; --acc: #FFE2A3; --acc-rgb: 255, 226, 163; }

/* Зоны батл-пасса (эскиз v3): небо и мягкий акцент. Нужны до eggs.css —
   ими красится пункт меню «Ивент». */
[data-zone="grass"]  { --z: #86E0B2; --z-rgb: 134, 224, 178; --sky-top: #183F35; --sky-mid: #0E2124; }
[data-zone="desert"] { --z: #F0C27A; --z-rgb: 240, 194, 122; --sky-top: #43321B; --sky-mid: #1E1913; }
[data-zone="snow"]   { --z: #AAD3FF; --z-rgb: 170, 211, 255; --sky-top: #20395A; --sky-mid: #0F1A2B; }
[data-zone="cave"]   { --z: #BFA9FF; --z-rgb: 191, 169, 255; --sky-top: #2E2553; --sky-mid: #15122B; }
[data-zone="lava"]   { --z: #FFA477; --z-rgb: 255, 164, 119; --sky-top: #4B1E12; --sky-mid: #1F110D; }
[data-zone="heaven"] { --z: #FFE2A3; --z-rgb: 255, 226, 163; --sky-top: #3B3668; --sky-mid: #1A1932; }

/* Рантайм шрифта сайта (body * { '__gd', … !important }) делает цифры
   пиксельными; в элементах ивента вне вкладки — шрифт сайта явно. */
#mainNav .ib-nav, #mainNav .ib-nav *, .egg-toast, .egg-toast *, .profile-egg-cosmetics, .profile-egg-cosmetics *, .live-card-egg {
    font-family: 'Syne', 'Segoe UI', system-ui, sans-serif !important;
}
.egg-toast .egg-toast-num { font-family: 'DM Mono', 'Segoe UI', monospace !important; }
/* Таймер яйца в пункте меню — шрифтом цифр сайта, как таймер на вкладке и статистика в профиле (правка 06.10). */
#mainNav .ib-nav .ib-nav-pill, #mainNav .ib-nav .ib-nav-pill * { font-family: var(--site-num-font, 'Chakra Petch'), 'Segoe UI', sans-serif !important; }
html[lang="en"] #mainNav .ib-nav .ib-nav-pill:not(.is-ready):not(.is-word), html[lang="en"] #mainNav .ib-nav .ib-nav-pill:not(.is-ready):not(.is-word) * { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ── пункт меню «Ивент»: живое яйцо, «ещё 2д 9ч», пилюля таймера ── */
.nav-btn-eggs.is-hidden, #mainNav .nav-btn.ib-nav.is-hidden { display: none !important; }
#mainNav .nav-btn.ib-nav {
    position: relative; display: flex !important; align-items: center; gap: 10px; overflow: hidden;
    text-transform: none !important; letter-spacing: 0 !important;
    background: linear-gradient(100deg, rgba(var(--z-rgb, 134, 224, 178), .2) 0%, rgba(255, 217, 138, .09) 55%, rgba(255, 255, 255, .02) 100%) !important;
    border: 1px solid rgba(255, 217, 138, .38) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
#mainNav .nav-btn.ib-nav:hover { background: linear-gradient(100deg, rgba(var(--z-rgb, 134, 224, 178), .28) 0%, rgba(255, 217, 138, .14) 55%, rgba(255, 255, 255, .04) 100%) !important; }
#mainNav .nav-btn.ib-nav.active { border-color: #FFD98A !important; }
.ib-nav-egg { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; }
.ib-nav-egg::before { content: ''; position: absolute; inset: -4px; background: radial-gradient(circle, rgba(255, 178, 122, .45), transparent 65%); opacity: 0; }
.ib-nav.is-heat .ib-nav-egg::before, .ib-nav.is-ready .ib-nav-egg::before { opacity: 1; animation: ibNavHeat 2.4s ease-in-out infinite; }
@keyframes ibNavHeat { 50% { opacity: .5; } }
.ib-nav-egg img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); transform-origin: 50% 90%; animation: ibNavBob 2.6s ease-in-out infinite; }
.ib-nav-egg img:not([src]) { visibility: hidden; }
.ib-nav.is-heat .ib-nav-egg img { animation: ibNavWobbleM 2.6s ease-in-out infinite; }
.ib-nav.is-ready .ib-nav-egg img { animation: ibNavWobbleM 1.1s ease-in-out infinite; }
@keyframes ibNavBob { 50% { transform: translateY(-3px); } }
@keyframes ibNavWobbleM { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg); } 84% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
.ib-nav-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.1; }
#mainNav .ib-nav .ib-nav-label { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
#mainNav .ib-nav .ib-nav-sub { display: none; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: #B9C7D8; white-space: nowrap; }
#mainNav .ib-nav .ib-nav-sub:empty { display: none !important; }
.ib-nav-pill { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 7px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.ib-nav-pill[hidden] { display: none !important; }
.ib-nav-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.ib-nav-pill.is-heat { color: #FFCDA2; border-color: rgba(255, 178, 122, .55); }
#mainNav .ib-nav .ib-nav-pill.is-ready { color: #2A1704; background: linear-gradient(180deg, #FFE7B0, #F7BD6E); border-color: #FFEDC6; font-family: 'Syne', 'Segoe UI', sans-serif !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; animation: ibNavBtn 1.8s ease-in-out infinite; }
#mainNav .ib-nav .ib-nav-pill.is-word { font-family: 'Syne', 'Segoe UI', sans-serif !important; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FFE2A3; }
@keyframes ibNavBtn { 50% { box-shadow: 0 0 14px rgba(255, 190, 110, .55); } }
/* В шторе (≤1599, см. NAV_DRAWER_MAX_WIDTH) — строка как в эскизе: яйцо 40px, подпись «ещё 2д 9ч». */
@media (max-width: 1599px) {
    #mainNav .nav-btn.ib-nav { min-height: 58px; padding: 8px 10px 8px 8px !important; margin: 4px 0 !important; }
    #mainNav .ib-nav .ib-nav-egg { width: 40px; height: 40px; }
    #mainNav .ib-nav .ib-nav-label { font-size: 14.5px; }
    #mainNav .ib-nav .ib-nav-sub { display: block; }
    .ib-nav::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .1) 45%, transparent 60%); transform: translateX(-100%); animation: ibNavSheen 5s ease-in-out 1s infinite; pointer-events: none; }
}
@keyframes ibNavSheen { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* Яйцо готово, а пункт спрятан в шторе: точка «желтка» на самом бургере. */
.burger-btn.ib-has-ready { position: relative; }
.burger-btn.ib-has-ready::after {
    content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
    background: #FFD98A; box-shadow: 0 0 0 2px #0c0d0f, 0 0 8px rgba(255, 217, 138, .95);
    border-radius: 0 !important; animation: ibNavDot 1.6s ease-in-out infinite;
}
@keyframes ibNavDot { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
    .ib-nav::before, .ib-nav-egg img, .ib-nav-egg::before, #mainNav .ib-nav .ib-nav-pill.is-ready, .burger-btn.ib-has-ready::after { animation: none !important; }
}

/* Бейдж «+N XP» на карточке кейса: левый верхний угол (правый — у меток). */
.case-egg-xp {
    position: absolute; z-index: 3; top: 7px; left: 7px;
    padding: 2px 6px;
    background: rgba(5, 7, 13, .82); color: #AAD3FF;
    border: 1px solid rgba(170, 211, 255, .38);
    font-size: 11px; font-weight: 600; line-height: 1.35;
    pointer-events: none;
}

/* Цифра в ячейке одной ширины (tabDigitsHtml в app.js): у шрифта цифр сайта
   нет табличных цифр, тикающий таймер иначе дёргается. */
.tdg { display: inline-block; width: .64em; text-align: center; }

/* ── Главная: «Ивент · лимитированные» (правка 06.10) ──
   Обычная категория каталога: заголовок и сетка как у всех, сверху таймер до
   конца ивента, у каждой карточки полоска «осталось · +N XP» над картинкой.
   Цифры — шрифтом цифр сайта (body * рантайма), без своего семейства. */
.case-section-timer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
    margin: -4px 0 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6683A0;
}
.case-section-timer > svg { width: 14px; height: 14px; color: #FFD98A; flex-shrink: 0; }
.ltd-cells { display: inline-flex; align-items: baseline; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.ltd-cells b { font-weight: 700; color: #FFFFFF; }
.ltd-cells i { font-style: normal; font-weight: 700; color: #9BB0C6; margin: 0 6px 0 2px; }
.ltd-cells i:last-child { margin-right: 0; }
.case-section-timer .ltd-cells b { font-size: 16px; }
.case-section-timer .ltd-cells i { font-size: 11px; }
.case-section-sep { display: inline-block; width: .32em; height: .32em; margin: 0 .2em; vertical-align: .22em; background: #FFD98A; box-shadow: 0 0 10px rgba(255, 217, 138, .7); }
/* Одной строке «часы 6д 23ч 59м  +300 XP» нужно 142 px. Полоска уже 144 px
   (телефоны до 374: карточка 120–140 px) — таймер и «+N XP» в две строки по
   центру, у всех карточек сразу: порог по ширине самой полоски, а не по
   содержимому, иначе соседние карточки разной высоты и картинки встают
   вразнобой. От 144 px (375, ПК 1024 и 1280: 146 px) — одна строка.
   flex-wrap — запас на длинное содержимое (ивент на 10+ дней): перенос, а не наезд. */
.case-ltd-bar {
    container: ltd-bar / inline-size;
    align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px;
    min-height: 22px; margin: -6px 0 10px; padding: 0 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: 11px; line-height: 1.2;
}
.case-ltd-left:empty { display: none; }
.case-ltd-left { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: #FFD98A; }
.case-ltd-left svg { width: 12px; height: 12px; flex-shrink: 0; }
.case-ltd-left .ltd-cells b { font-size: 12px; color: #FFE7B0; }
.case-ltd-left .ltd-cells i { font-size: 9.5px; margin: 0 3px 0 1px; }
.case-ltd-left .ltd-cells i:last-child { margin-right: 0; }
.case-ltd-xp {
    flex-shrink: 0; margin-left: auto; padding: 1px 4px; color: #AAD3FF; white-space: nowrap;
    border: 1px solid rgba(170, 211, 255, .38); background: rgba(5, 7, 13, .6);
    font-size: 11px; font-weight: 600;
}
@container ltd-bar (max-width: 143.98px) {
    .case-ltd-left { flex: 1 0 100%; justify-content: center; }
    .case-ltd-xp { margin: 0 auto; }
}

/* Тост ивента после рулетки: сверху по центру, под фиксированной шапкой
   (top ставит app.js — eggToastTop: на странице кейса ниже её заголовка). */
.egg-toast {
    position: fixed; z-index: 9400; top: 76px; left: 50%;
    display: flex; align-items: center; gap: 12px;
    width: max-content; max-width: min(92vw, 460px);
    padding: 10px 8px 10px 10px;
    background: rgba(5, 7, 13, .95);
    border: 1px solid rgba(var(--acc-rgb, 170, 211, 255), .4);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 24px rgba(var(--acc-rgb, 170, 211, 255), .1);
    transform: translate(-50%, -14px); opacity: 0;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .26s ease;
}
.egg-toast.hidden { display: none; }
.egg-toast.show { transform: translate(-50%, 0); opacity: 1; }
.egg-toast.is-levelup { border-color: rgba(var(--acc-rgb, 170, 211, 255), .7); box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 28px rgba(var(--acc-rgb, 170, 211, 255), .22); }
.egg-toast-egg {
    position: relative; width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
    background: radial-gradient(circle, rgba(var(--acc-rgb, 170, 211, 255), .32) 0%, transparent 70%);
}
.egg-toast-egg img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.egg-toast-body { min-width: 0; flex: 1; }
.egg-toast-body p { margin: 0; line-height: 1.4; }
.egg-toast-main { font-size: 14px; font-weight: 700; color: #fff; }
.egg-toast-main b { color: var(--acc, #AAD3FF); font-weight: 700; }
.egg-toast-sub { font-size: 12px; font-weight: 600; color: #93A6BA; }
.egg-toast-up { font-size: 12.5px; font-weight: 700; color: var(--acc, #AAD3FF); }
.egg-toast-bar { position: relative; height: 3px; margin-top: 6px; background: rgba(255, 255, 255, .08); }
.egg-toast-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--acc, #AAD3FF); box-shadow: 0 0 8px rgba(var(--acc-rgb, 170, 211, 255), .6); }
.egg-toast-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.egg-toast .egg-toast-go { min-height: 40px !important; padding: 0 14px !important; font-size: 11px !important; }
.egg-toast-close {
    width: 40px; height: 40px; border: 0; cursor: pointer; background: transparent;
    color: #93A6BA; font-size: 20px; line-height: 1;
}
.egg-toast-close:hover { color: #fff; }
@media (max-width: 800px) { .egg-toast { top: 66px; } }
@media (prefers-reduced-motion: reduce) { .egg-toast { transition: opacity .2s ease; transform: translate(-50%, 0); } }

/* ── Титул у ника ────────────────────────────────────────────────────────────
   Только картинка, без квадрата и рамки. Иконки титулов лежат в /title-img/
   уже обрезанными по прозрачным полям и выровненными по визуальному размеру
   (scripts/title-icons.py), поэтому у ника они стоят одинаково. Картинку не
   из /title-img/ (выбрали в OPS) app.js подгоняет так же на лету (--fs, --fx,
   --fy). Цвет тира — тонкий контур по краю самой картинки и мягкое свечение
   (drop-shadow повторяет её альфу). Размеры: xs — лента, sm — чужие ники,
   md — свой ник, lg/xl — меню и награды. Шрифт подсказки и меню выведен из
   рантайм-шрифта сайта явно (body * { … !important }). */
.bdg {
    --bg: 210, 154, 104;
    --fs: 1; --fx: 0%; --fy: 0%;
    --ring: .6px; --halo: 2.5px;
    position: relative; display: inline-grid; place-items: center;
    width: 20px; height: 20px; padding: 0; margin: 0; overflow: visible;
    vertical-align: middle; flex-shrink: 0; cursor: pointer;
    background: none; border: 0; border-radius: 0 !important; box-shadow: none;
    transition: transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.bdg img {
    width: 100% !important; height: 100% !important; object-fit: contain; pointer-events: none;
    transform: scale(var(--fs)) translate(var(--fx), var(--fy));
    filter: drop-shadow(0 0 var(--ring) rgba(var(--bg), .95)) drop-shadow(0 0 var(--halo) rgba(var(--bg), .42));
    transition: filter .15s;
}
.bdg:hover, .bdg:focus-visible { transform: translateY(-1px); outline: none; }
.bdg:hover img, .bdg:focus-visible img { filter: drop-shadow(0 0 var(--ring) rgba(var(--bg), 1)) drop-shadow(0 0 calc(var(--halo) * 2) rgba(var(--bg), .7)); }
.bdg[data-bdg-passive] { cursor: inherit; }
.bdg[data-bdg-passive]:hover { transform: none; }
.bdg-xs { width: 16px; height: 16px; --ring: .5px; --halo: 2px; }
.bdg-sm { width: 20px; height: 20px; }
.bdg-md { width: 26px; height: 26px; --ring: .7px; --halo: 3px; }
.bdg-lg { width: 44px; height: 44px; --ring: 1px; --halo: 5px; }
.bdg-xl { width: 76px; height: 76px; --ring: 1.2px; --halo: 9px; }
.bdg-bronze { --bg: 210, 154, 104; }
.bdg-silver { --bg: 205, 218, 236; }
.bdg-azure  { --bg: 127, 220, 236; }
.bdg-gold   { --bg: 246, 211, 124; }
/* Блик у золотых — редкий и только по самой картинке (маска той же иконки),
   без прямоугольника вокруг. */
.bdg-gold.has-mask::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 247, 222, .7) 50%, transparent 58%) no-repeat;
    background-size: 320% 100%; background-position: 100% 0;
    -webkit-mask: var(--bdg-img) center / contain no-repeat; mask: var(--bdg-img) center / contain no-repeat;
    transform: scale(var(--fs)) translate(var(--fx), var(--fy));
    animation: bdgShine 7s ease-in-out infinite;
}
@keyframes bdgShine { 0%, 78% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.bdg-empty { width: 100%; height: 100%; border: 1px dashed rgba(255, 255, 255, .28); cursor: default; }
/* Заготовка до прихода каталога: место держит, сама не видна. */
.bdg.is-pending { visibility: hidden; cursor: default; }
.bdg-slot { display: none; }
@media (prefers-reduced-motion: reduce) { .bdg-gold.has-mask::after { animation: none; display: none; } .bdg, .bdg img { transition: none; } }

/* Ник + титул: обрезается многоточием только ник, титул целиком. */
.bdg-nick { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; vertical-align: middle; }
.bdg-nick-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdg-pen {
    display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; margin: 0; flex-shrink: 0; cursor: pointer;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); border-radius: 0 !important;
    color: #9BB0C6; transition: color .15s, border-color .15s;
}
.bdg-pen svg { width: 13px; height: 13px; }
/* Области нажатия ≥ 44 px у карандаша, «Все титулы (N)» и крестика окна: вид
   прежний, растёт невидимый слой по центру. */
.bdg-pen, .bdg-all-btn { position: relative; }
.bdg-pen::before, .bdg-all-btn::before, .bdg-modal-x::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
/* Сам титул 16–26 px. На сенсорном экране вокруг него невидимая область 40×40
   (мышью целятся точно, там она не нужна и мешала бы наведению). */
@media (hover: none), (pointer: coarse) {
    .bdg:not([data-bdg-passive])::before {
        content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%);
    }
}
.bdg-pen:hover, .bdg-pen:focus-visible { color: #fff; border-color: rgba(255, 217, 138, .6); outline: none; }
/* Титул рядом с текстом без обёртки (батлы, история, краш, розыгрыши). */
.battle-list-meta > .bdg, .battle-final-card strong > .bdg, .battle-sidebar-current-body strong > .bdg,
.battle-player-name > .bdg, .combined-history-row span > .bdg, .sp-row-name > .bdg { margin-left: 6px; }
#battleOverlayLeftName > .bdg, #battleOverlayRightName > .bdg { margin-left: 6px; vertical-align: -4px; }
.crash-bet-name > .bdg-nick, .rf-winner-name > .bdg-nick { display: flex; max-width: 100%; }
.rf-tag-pbdg { display: inline-flex; line-height: 0; }
.rf-tag-pbdg:empty { display: none; }

/* Шапка и свой профиль. */
#userName .bdg-nick { gap: 5px; }
/* С титулом многоточие у самого ника; строка не режет область нажатия. */
#userName.has-bdg { overflow: visible !important; }
#userName .bdg { width: 18px; height: 18px; }
/* Титул с карандашом всегда справа от ника, в одну строку; длинный ник
   режется многоточием, титул и карандаш целиком. */
.profile-username .bdg-nick { gap: 8px; flex-wrap: nowrap; max-width: 100%; }
.profile-username .bdg-nick-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
/* Блок «аватар + имя» на телефоне растёт на свободное место: баланс либо
   стоит рядом, либо уходит строкой ниже, а нику с титулом хватает ширины. */
@media (max-width: 760px) {
    .profile-user-block { flex: 1 1 240px !important; max-width: none !important; }
}
#profileUserNameLarge.has-bdg, .profile-user-block > .has-bdg-row { overflow: visible !important; }
/* Строка ID ниже полупрозрачная (своя стопка) и перекрывала низ этих областей. */
#profileUserNameLarge.has-bdg { position: relative; z-index: 1; }
#publicProfileName .bdg-nick { gap: 8px; }
/* .section-head span красит любой span шапки в подпись (!important) — ник и
   «Все титулы» остаются в своём шрифте и цвете. */
#publicProfileName .bdg-nick, #publicProfileName .bdg-nick-t, #publicProfileBadgesAll span {
    color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important;
}
#publicProfileName .bdg { width: 24px; height: 24px; }
.bdg-all-btn {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 6px; padding: 5px 10px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 0 !important;
    color: #9BB0C6; font-size: 12px; font-weight: 700; cursor: pointer;
}
.bdg-all-btn b { color: #fff; font-weight: 700; }
.bdg-all-btn:hover { color: #fff; border-color: rgba(255, 217, 138, .45); }

/* В ленте дропов значков у ника нет (правка 06.10): карточка ленты — про дроп. */

/* ── подсказка титула ── */
/* Цифры подсказки и меню — DM Mono (у Syne цифры «игровые»). */
@font-face { font-family: 'bdgNum'; font-weight: 400 900; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2) format('woff2'); unicode-range: U+0030-0039; }
.bdg-pop, .bdg-pop *, .bdg-modal, .bdg-modal *, .bdg-toast, .bdg-toast * {
    font-family: 'bdgNum', 'Syne', 'Segoe UI', system-ui, sans-serif !important;
}
.bdg-pop {
    position: absolute; z-index: 9600; display: block; max-width: min(330px, calc(100vw - 16px)); padding: 12px 14px;
    background: rgba(10, 14, 26, .98); border: 1px solid rgba(255, 217, 138, .3); border-radius: 0 !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .65);
    font-size: 12.5px; line-height: 1.45; color: #DCE6F2; text-align: left;
    animation: bdgPopIn .16s ease both; pointer-events: auto;
}
.bdg-pop[hidden] { display: none; }
.bdg-pop::before {
    content: ''; position: absolute; left: calc(var(--ax, 50%) - 6px); top: -7px; width: 12px; height: 12px;
    background: rgba(10, 14, 26, .98); border-left: 1px solid rgba(255, 217, 138, .3); border-top: 1px solid rgba(255, 217, 138, .3);
    transform: rotate(45deg);
}
.bdg-pop.is-above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
@keyframes bdgPopIn { from { opacity: 0; transform: translateY(4px); } }
.bdg-tip { display: flex; align-items: flex-start; gap: 12px; }
.bdg-tip-art { display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; }
.bdg-tip-art .bdg { width: 60px; height: 60px; cursor: default; }
/* Предпросмотр в OPS кладёт картинку прямо в рамку подсказки. */
.bdg-tip-art > img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 1px rgba(var(--bg, 246, 211, 124), .9)) drop-shadow(0 0 6px rgba(var(--bg, 246, 211, 124), .4)); }
.bdg-tip-art .bdg:hover { transform: none; }
.bdg-tip-t { min-width: 0; }
.bdg-tip-t b { display: block; color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.bdg-tip-for { display: block; margin: 3px 0 8px; color: #DCE6F2; }
.bdg-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12px; }
.bdg-tip dt { padding-top: 2px; color: #6683A0; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bdg-tip dd { margin: 0; color: #fff; }
.bdg-tip-share { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .bdg-pop { animation: none; } }

/* ── окно: «Титул у ника» (Мои / Все) и «Титулы игрока» ── */
.bdg-modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; }
.bdg-modal[hidden] { display: none; }
.bdg-modal-scrim { position: absolute; inset: 0; background: rgba(2, 4, 10, .72); backdrop-filter: blur(3px); }
.bdg-modal-card {
    position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
    padding: 22px 20px 20px; background: #0B1020; border: 1px solid rgba(255, 255, 255, .14); border-radius: 0 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .7); color: #fff; animation: bdgCardIn .2s ease both;
    overscroll-behavior: contain;
}
.bdg-modal-card.is-busy { pointer-events: none; opacity: .75; }
@keyframes bdgCardIn { from { opacity: 0; transform: translateY(8px); } }
.bdg-modal-x {
    position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: 0 !important;
    color: #9BB0C6; font-size: 20px; line-height: 1; cursor: pointer;
}
.bdg-modal-x:hover { color: #fff; }
.bdg-h2 { margin: 0 40px 0 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.15; }
.bdg-sub { margin: 6px 0 0; color: #9BB0C6; font-size: 13px; line-height: 1.4; }
/* Вкладки «Мои титулы / Все титулы». */
.bdg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 14px; border: 1px solid rgba(255, 255, 255, .12); }
.bdg-tab {
    min-height: 40px; padding: 8px 10px; background: transparent; border: 0; border-radius: 0 !important; cursor: pointer;
    color: #9BB0C6; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.bdg-tab + .bdg-tab { border-left: 1px solid rgba(255, 255, 255, .12); }
.bdg-tab b { color: inherit; font-weight: 800; opacity: .75; }
.bdg-tab.is-on { background: rgba(255, 217, 138, .1); color: #FFD98A; box-shadow: inset 0 -2px 0 #FFD98A; }
.bdg-tab:hover:not(.is-on) { color: #fff; }
.bdg-pk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bdg-pk-empty { margin: 14px 0 0; padding: 12px; border: 1px dashed rgba(255, 255, 255, .16); color: #9BB0C6; font-size: 13px; text-align: center; }
.bdg-pk-empty button { display: inline; padding: 0; margin: 0; background: none; border: 0; color: #FFD98A; font: inherit; text-decoration: underline; cursor: pointer; }
.bdg-pk-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .075); border-radius: 0 !important;
    color: #fff; text-align: left; cursor: pointer; font: inherit;
}
.bdg-pk-row { display: flex; align-items: stretch; gap: 6px; }
.bdg-pk-row > .bdg-pk-item { flex: 1; min-width: 0; }
.bdg-pk-item:hover:not(.is-locked):not(.is-static) { border-color: rgba(255, 255, 255, .28); }
.bdg-pk-item.is-on { border-color: #FFD98A; background: rgba(255, 217, 138, .08); }
.bdg-pk-item.is-locked, .bdg-pk-item.is-static { cursor: default; }
.bdg-pk-item.is-locked .bdg img { filter: grayscale(1) brightness(.55); }
.bdg-pk-item.is-locked .bdg-pk-t b { color: #9BB0C6; }
.bdg-pk-item.is-shown { border-color: rgba(255, 217, 138, .45); }
.bdg-pk-item.is-new { border-color: rgba(127, 220, 236, .5); }
.bdg-pk-t { flex: 1; min-width: 0; }
.bdg-pk-t b { display: block; font-size: 14.5px; font-weight: 700; }
.bdg-pk-t span { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #9BB0C6; font-size: 12px; }
.bdg-pk-t .bdg-pk-for { color: #DCE6F2; }
.bdg-pk-t span svg { width: 11px; height: 11px; flex-shrink: 0; }
.bdg-pk-radio { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .3); color: #2A1704; }
.bdg-pk-radio svg { width: 13px; height: 13px; opacity: 0; }
.bdg-pk-item.is-on .bdg-pk-radio { border-color: #FFD98A; background: #FFD98A; }
.bdg-pk-item.is-on .bdg-pk-radio svg { opacity: 1; }
.bdg-pk-tag { flex-shrink: 0; padding: 2px 7px; border: 1px solid rgba(255, 217, 138, .45); color: #FFD98A; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bdg-pk-tag.is-new { border-color: rgba(127, 220, 236, .55); color: #7FDCEC; }
/* «Поделиться» — квадратная кнопка рядом со строкой своего титула. */
.bdg-share {
    display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; flex-shrink: 0; cursor: pointer;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); border-radius: 0 !important; color: #9BB0C6;
}
.bdg-share svg { width: 17px; height: 17px; }
.bdg-share:hover, .bdg-share:focus-visible { color: #FFD98A; border-color: rgba(255, 217, 138, .5); outline: none; }
.bdg-share-wide {
    display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 34px; padding: 0 12px;
    font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.bdg-share-wide svg { width: 14px; height: 14px; }
/* «Все титулы»: группы, у каждого титула — как получить и сколько игроков
   его уже имеют. */
.bdg-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 16px 0 0; color: #6683A0; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bdg-cat-h:first-child { margin-top: 2px; }
.bdg-cat-h span { color: #6683A0; font-size: 10.5px; letter-spacing: .06em; }
.bdg-cat-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bdg-cat-item { cursor: default; align-items: flex-start; }
.bdg-cat-item .bdg { margin-top: 2px; }
.bdg-cat-item.is-mine { border-color: rgba(255, 217, 138, .3); }
.bdg-cat-item:not(.is-mine) .bdg img { filter: grayscale(.85) brightness(.7) drop-shadow(0 0 var(--ring) rgba(var(--bg), .5)); }
.bdg-cat-item .bdg-pk-t .bdg-pk-for { display: block; color: #DCE6F2; line-height: 1.35; }
.bdg-rar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; font-size: 11.5px; color: #9BB0C6; }
.bdg-rar i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: rgb(var(--bg)); box-shadow: 0 0 6px rgba(var(--bg), .7); vertical-align: 1px; }
.bdg-rar .is-mine { color: #FFD98A; font-weight: 700; }
.bdg-rar .is-first { color: #7FDCEC; }
.bdg-rar-bronze { --bg: 210, 154, 104; } .bdg-rar-silver { --bg: 205, 218, 236; } .bdg-rar-azure { --bg: 127, 220, 236; } .bdg-rar-gold { --bg: 246, 211, 124; }
body.bdg-modal-open { overflow: hidden; }

/* ── тост «Новый титул» ── (как тост ивента: сверху, под шапкой; top ставит
   badges.js: ниже заголовка кейса и под тостом ивента, если тот виден) */
.bdg-toast {
    position: fixed; z-index: 9450; top: 76px; left: 50%;
    display: flex; align-items: center; gap: 12px;
    width: max-content; max-width: min(92vw, 440px);
    padding: 10px 6px 10px 12px;
    background: rgba(5, 7, 13, .96);
    border: 1px solid rgba(var(--bg, 246, 211, 124), .45);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 24px rgba(var(--bg, 246, 211, 124), .12);
    transform: translate(-50%, -14px); opacity: 0;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .26s ease, top .2s ease;
}
.bdg-toast.show { transform: translate(-50%, 0); opacity: 1; }
/* Скрытый тост не ловит нажатия: display:flex выше перебивал [hidden], и
   невидимый слой оставался сверху по центру (на телефоне поверх «Назад к
   кейсам»). */
.bdg-toast[hidden] { display: none; }
.bdg-toast:not(.show) { pointer-events: none; }
.bdg-toast .bdg { width: 42px; height: 42px; --ring: .9px; --halo: 5px; cursor: default; }
.bdg-toast-body { min-width: 0; }
.bdg-toast-k { margin: 0; color: #6683A0; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bdg-toast-n { margin: 1px 0 0; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.2; }
.bdg-toast-d { margin: 2px 0 0; color: #9BB0C6; font-size: 12px; line-height: 1.35; }
.bdg-toast-go {
    min-height: 40px; padding: 0 12px; flex-shrink: 0; cursor: pointer;
    background: rgba(255, 217, 138, .1); border: 1px solid rgba(255, 217, 138, .45); border-radius: 0 !important;
    color: #FFD98A; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.bdg-toast-go:hover { background: rgba(255, 217, 138, .18); }
.bdg-toast-x { width: 40px; height: 40px; flex-shrink: 0; border: 0; cursor: pointer; background: transparent; color: #93A6BA; font-size: 20px; line-height: 1; }
.bdg-toast-x:hover { color: #fff; }
@media (max-width: 800px) { .bdg-toast { top: 66px; } }
@media (max-width: 420px) { .bdg-toast { gap: 9px; padding-left: 9px; } .bdg-toast .bdg { width: 36px; height: 36px; } .bdg-toast-go { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { .bdg-toast { transition: opacity .2s ease; transform: translate(-50%, 0); } }

/* ═══ ОТСТУПЫ ПО ВСЕМУ САЙТУ (05.10.2026) ════════════════════════════════════
   Прогон 20 экранов на 10 ширинах (360–1920 и колонка Telegram на ПК 450px)
   скриптом: наезды, выход за экран, обрезка, разные поля. Здесь — общее для
   всех разделов; правки конкретного раздела лежат в его собственном css.

   Шапка и меню. Штора теперь до 1599px (блок @media max-width:1599px выше и
   NAV_DRAWER_MAX_WIDTH в app.js). На ≥1600 строка меню остаётся, но плотнее:
   её содержимому было нужно ~1620px, а места 1550 даже на 1920, и баланс
   обрезался. Поля у пунктов меньше; до 1920 без иконок, до 2200 без подписи
   «Telegram @ник» у профиля — аватар и баланс видны всегда. */
@media (min-width: 1600px) {
    #mainNav { gap: 4px !important; }
    #mainNav > .nav-btn:not(.ib-nav) { padding: 10px 12px !important; }
}
/* Иконки у пунктов прячутся, только когда строка меню действительно не
   влезает: класс .nav-noicons ставит fitNavIcons() в app.js по замеру.
   Раньше их прятали на всём отрезке 1600–1919 — и у игроков, у которых
   место было. */
@media (min-width: 1600px) {
    #mainNav.nav-noicons > .nav-btn > .solar-icon,
    #mainNav.nav-noicons > .nav-btn > .nav-icon-upg,
    #mainNav.nav-noicons > .nav-btn > .nav-icon-fuse,
    #mainNav.nav-noicons > .nav-btn > .nav-bee { display: none !important; }
}
@media (min-width: 1600px) and (max-width: 2199px) {
    #mainNav .user-meta { display: none !important; }
}
/* С 1920 иконки у пунктов возвращаются, и у владельца (лишние пункты Ops и
   таймер ивента) строке снова не хватало ~30px — баланс уезжал за край.
   Поля у пунктов на этом отрезке ещё на 3px уже с каждой стороны. */
@media (min-width: 1920px) and (max-width: 2199px) {
    #mainNav { gap: 3px !important; }
    #mainNav > .nav-btn:not(.ib-nav) { padding: 10px 9px !important; }
}
/* То же на 1600–1919 (иконок тут нет, но у владельца строка всё равно
   была шире на 24–50px). */
@media (min-width: 1600px) and (max-width: 1919px) {
    #mainNav { gap: 3px !important; }
    #mainNav > .nav-btn:not(.ib-nav) { padding: 10px 8px !important; }
    #mainNav > .nav-btn-eggs .ib-nav-egg { display: none !important; }
    #mainNav > .nav-btn-eggs { padding-left: 9px !important; padding-right: 9px !important; }
}

@media (max-width: 1599px) {
    /* Пункты шторы делят её высоту (flex: 1 1 auto) и на низком экране
       сжимались: на 375×667 до 37px при содержимом в 44px, подпись резалась
       снизу. Сжиматься ниже своей высоты им больше нельзя — если не влезают,
       штора прокручивается (overflow-y: auto у неё уже стоит). */
    #mainNav > .nav-btn { flex-shrink: 0 !important; }

    /* Единый зазор между шапкой и началом раздела. Было от 0 (профиль, кейс,
       батл, бонусы, игрок — заголовок лежал на линии шапки) до 32–40px
       (квесты, апгрейдер). Вкладка «Ивент» (eggs) ведёт верх сама. */
    .main-content > section.view { padding-top: 14px !important; }
    .main-content > #eggsView { padding-top: 0 !important; }
    #homeLiveFeedBestMobile,
    #homeLiveFeedMobile { margin-top: 0 !important; }

    /* Дайсы, краш и медовый ивент снимали у .main-content все поля, и шапка в
       них прыгала: на 14px вверх на любой ширине, а на 768+ ещё и на 24–32px
       шире, чем в остальных разделах. Возвращаем те же поля сверху и по бокам,
       что у обычной страницы; цветная подложка раздела по-прежнему уходит до
       низа экрана. */
    html body.dice-fullbleed-active .main-content,
    html body.crash-fullbleed-active .main-content,
    html body.event-fullbleed-active .main-content { padding-top: 14px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    html body.dice-fullbleed-active .main-content,
    html body.crash-fullbleed-active .main-content,
    html body.event-fullbleed-active .main-content { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    html body.dice-fullbleed-active .main-content,
    html body.crash-fullbleed-active .main-content,
    html body.event-fullbleed-active .main-content { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
    html body.dice-fullbleed-active .main-content,
    html body.crash-fullbleed-active .main-content,
    html body.event-fullbleed-active .main-content { padding-left: 32px !important; padding-right: 32px !important; }
}

/* Лента дропов слева держала сверху 92px под закреплённую шапку и в режиме
   шторы, где шапка в потоке: над первой карточкой висела пустая полоса, и
   лента начиналась ниже шапки, а не вровень с ней. */
@media (min-width: 1024px) and (max-width: 1599px) {
    .sidebar-live { padding-top: 14px !important; }
}

/* ── Главная: карточки кейсов ───────────────────────────────────────────────
   Картинка кейса была flex: 1 и отдавала место тексту под собой: у карточки с
   названием в две строки («Морская Братва», «Лос Трейдеры») или с подписью в
   две строки («Осталось 200», «За успешный стейкинг») картинка становилась
   ниже, и название в ряду прыгало вверх на 20–40px. На 1024–1600 так было в
   4–5 рядах из 11. Теперь высота картинки фиксирована (ровно та, что была у
   обычной карточки на каждой ширине), названия в ряду стоят на одной линии,
   а нижние строки (кол-во предметов и цена) — по низу карточки. Обычная
   карточка не изменилась ни на пиксель; ряд с длинным названием стал выше. */
.case-row { align-items: stretch !important; }
.case-row > .case-card > .case-visual { flex: 0 0 auto !important; }
.case-row > .case-card > .case-title { margin-bottom: auto !important; }
@media (min-width: 480px) and (max-width: 767px) {
    .case-row > .case-card > .case-visual { height: 113px !important; max-height: 113px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .case-row > .case-card > .case-visual { height: 120px !important; max-height: 120px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .case-row > .case-card > .case-visual { height: 129px !important; max-height: 129px !important; }
}
@media (min-width: 1280px) {
    .case-row > .case-card > .case-visual { height: 137px !important; max-height: 137px !important; }
}
/* Длинное слово в названии (класс ставит caseTitleLenClass в app.js) — мельче,
   иначе «ИМПЕРАТОРСКИЙ» шире карточки и последняя буква срезалась. */
@media (min-width: 480px) {
    html:not([lang="en"]) body .case-title.case-title--long { font-size: 15px !important; }
    html:not([lang="en"]) body .case-title.case-title--xlong { font-size: 13.5px !important; }
}
/* Подпись вместо цены («За успешный стейкинг», «Осталось 200») не влезала в
   строку рядом с «18 предм.»: стейкинг срезался на «стейк», а «18 предм.»
   ломалось на две строки. Подпись переносится на вторую строку справа,
   «N предм.» — никогда; в разделах с такими подписями строка у всех карточек
   на две строки, чтобы названия в ряду не разъезжались. */
.case-footer .case-subtitle { white-space: nowrap; flex-shrink: 0; }
.case-footer .deposit-case-label { white-space: normal !important; min-width: 0; text-align: right; line-height: 1.15 !important; }
.case-row:has(.deposit-case-label) .case-footer { min-height: 42px; }
@media (max-width: 760px) {
    .case-footer .deposit-case-label { font-size: 12px !important; }
    .case-row:has(.deposit-case-label) .case-footer { min-height: 40px; }
}

/* ── Главная: кнопки под промокодом ─────────────────────────────────────────
   «ПОПОЛНИТЬ» было шире своей кнопки: на 8px на 360–379, на 1px на 380–389,
   на 3px на 480–499 — и упиралось в края. */
@media (min-width: 480px) and (max-width: 519px) {
    .lobby-actions .lobby-action-btn { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (max-width: 389px) {
    .lobby-actions .lobby-action-btn {
        padding-left: 4px !important;
        padding-right: 4px !important;
        letter-spacing: 0 !important;
        font-size: 10.5px !important;
    }
}
/* 320–359: три кнопки в ряд не влезают при любом кегле — «Пополнить»
   встаёт первой строкой во всю ширину, две другие под ней. */
@media (max-width: 359px) {
    .lobby-actions { flex-wrap: wrap !important; }
    .lobby-actions .lobby-deposit-main { order: -1; flex: 1 1 100% !important; }
}
/* Подписи трёх кнопок всегда в одну строку. На 360–519 при равных долях «ОТКРЫТЬ КЕЙС» и «ПОПОЛНИТЬ»
   ломались на две строки, а кошелёк вставал над словом. Доли теперь по тексту (flex-basis auto), кегль
   от ширины экрана. Замер шириной без flex: подписи вместе ≈ 24,3 кегля со значком кошелька и ≈ 22,9 без
   него; поля страницы, кнопок, рамки и зазоры ≈ 138 px (на 360–389 поля кнопок 4 px, ≈ 126 px).
   На 360–389 значок кошелька убран, иначе кегль ниже 10 px. Проверено на 360, 375, 390, 414, 430, 480, 519. */
@media (max-width: 519px) {
    .lobby-actions .lobby-action-btn { white-space: nowrap !important; }
}
@media (min-width: 360px) and (max-width: 519px) {
    .lobby-actions .lobby-action-btn {
        flex: 1 1 auto !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        letter-spacing: 0 !important;
        font-size: min(12px, calc((100vw - 138px) / 24.6)) !important;
    }
}
@media (min-width: 360px) and (max-width: 389px) {
    .lobby-actions .lobby-action-btn {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: calc((100vw - 126px) / 23.2) !important;
    }
    .lobby-actions .lobby-deposit-main img.solar-icon { display: none !important; }
}
/* Лента живых дропов, превью «откуда выпало»: значок мутации принадлежит предмету и гаснет вместе с ним,
   иначе красный кубик садился на иконку режима. Скаттер и «1 из 1» так же. */
@media (hover: hover) and (pointer: fine) {
    .live-card:hover .mut-badge-live,
    .live-card:hover .oneof-badge-live,
    .live-card:hover .live-card-special-badge { opacity: 0; }
}
.mut-badge-live, .oneof-badge-live, .live-card-special-badge { transition: opacity .18s ease; }
/* Полоса ленты на узком экране (карточка 64 px): иконка 28 px и подпись в одну строку, без «Апгр…» под обрезом. */
.home-live-feed-mobile .live-card-preview { padding: 4px; gap: 3px; }
.home-live-feed-mobile .live-card-preview-media,
.home-live-feed-mobile .live-card-preview-image,
.home-live-feed-mobile .nav-icon-upg.live-drop-upg-icon { width: 28px; height: 28px; }
.home-live-feed-mobile .live-card-preview-emoji { font-size: 20px; }
.home-live-feed-mobile .live-card-preview-label {
    display: block; max-width: 100%;
    font-size: 10px; line-height: 1.2; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Лесенка (компьютер): кнопки «Забрать приз» и «Начать игру» в колонке 242 px шириной по 117 px,
   с полями 14 px подпись не влезала и ломалась на две строки. */
@media (min-width: 761px) {
    #ladderCashoutBtn, #openLadderModeBtn {
        white-space: nowrap;
        padding-left: 8px !important;
        padding-right: 8px !important;
        letter-spacing: 0 !important;
    }
}
/* Окно депозита брейнротом: «Бафы — доплата автоматически ▾» в одну строку, стрелка не падает под текст. */
@media (max-width: 420px) {
    #traitsToggleBtn { white-space: nowrap; font-size: min(12px, calc((100vw - 76px) / 24)) !important; }
}
/* Заголовки полноэкранных окон (депозит, вывод, обмен) на телефоне: не больше двух строк
   («ВЫБЕРИ ПРЕДМЕТЫ ДЛЯ ВЫВОДА» на 18 px занимал три). */
@media (max-width: 430px) {
    .deposit-fullscreen-head h3 { font-size: 16px !important; letter-spacing: .02em !important; line-height: 1.15 !important; }
}
/* Полоса «ТОП ДРОП ЗА 24 ЧАСА»: на 320–374 подпись шире места рядом с ценой. Меньше разрядка, на 320–339 без кубка. */
@media (max-width: 374px) {
    .live-best-banner-mobile-label { white-space: nowrap; letter-spacing: .01em !important; }
}
@media (max-width: 339px) {
    .live-best-banner-mobile-label { font-size: 9.5px !important; letter-spacing: 0 !important; }
    .live-best-banner-mobile-label > img, .live-best-banner-mobile-label > svg { display: none !important; }
}
/* Лесенка: подписи карточек статистики в узкой колонке в одну строку не встают («ПОСТАВЛЕН БРЕЙНРОТ»),
   а «ТЕКУЩИЙ ШАГ» встаёт, и числа под ними стояли на разной высоте. До 1100 px подпись всегда занимает две строки
   и прижата к числу: числа в ряд. */
@media (max-width: 1100px) {
    .ladder-stat-card > span { min-height: 2.5em; display: flex; align-items: flex-end; line-height: 1.25; }
}
/* Апгрейдер, телефон: вкладки «Мои предметы / Желаемые предметы / Магазин» шириной по подписи и в одну строку
   (upgrader.css делил строку поровну и разрешал перенос где угодно, «ЖЕЛАЕМЫЕ / ПРЕДМЕТЫ»). Сумма подписей
   влезают две; если вкладок три (с «Магазином»), на 320–375 ряд прокручивается сам, а не переносится. */
@media (max-width: 860px) {
    #upgTabs { overflow-x: auto; scrollbar-width: none; }
    #upgTabs::-webkit-scrollbar { display: none; }
    #upgTabs .upg-tab { flex: 1 1 auto; min-width: auto; white-space: nowrap; overflow-wrap: normal; letter-spacing: .02em; padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 400px) {
    #upgTabs .upg-tab { font-size: 10.5px; letter-spacing: 0; padding-left: 6px; padding-right: 6px; }
}
/* Заголовки разделов на главной: «ТЕМАТИЧЕСКИЕ КЕЙСЫ» шире строки до 380 px (20 px с разрядкой .08em
   и полями 20 px) и уходили на две строки. На телефоне поля и разрядка меньше, кегль от ширины экрана:
   заголовки до ~19 букв встают в строку, длиннее переносятся как раньше. */
@media (max-width: 480px) {
    .case-section-title-wrap .case-section-title {
        padding-left: 8px !important;
        padding-right: 8px !important;
        letter-spacing: .04em !important;
        font-size: min(20px, calc((100vw - 44px) / 14.5)) !important;
    }
}

/* ── Бонусы: переключатель периода ──────────────────────────────────────────
   «День / Неделя / Месяц / Всё время» не влезали в строку карточки на
   телефоне и на 768–1023 (там бонусы в две колонки): три кнопки в ряд и
   «Всё время» одна под ними. Кнопки делят строку поровну, а если карточка
   уже 330px — встают сеткой 2×2. Ширину берём у самой карточки (container
   query), а не у экрана: на 768 и на 360 карточка одинаково узкая. */
.ref-growth-period-row > .ghost-btn {
    flex: 1 1 auto;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
#refGrowthCard,
#partnerGrowthCard { container-type: inline-size; }
@container (max-width: 329px) {
    .ref-growth-period-row { display: grid !important; grid-template-columns: 1fr 1fr; }
}

/* ── Профиль: кнопки на карточке инвентаря ─────────────────────────────────
   На телефоне «Продать» и «Вывод» были по 17–19px в высоту и стояли
   вплотную (3px): промахнуться пальцем и продать вместо вывода — легко.
   Плашка «Кейс: …» над ними при этом была выше самих кнопок. То же на
   планшете (сенсорный экран любой ширины). */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    #profileView .profile-split-inventory .inventory-card .sell-btn,
    #profileView .profile-split-inventory .inventory-card .inv-withdraw-btn,
    #profileView .profile-split-inventory .inventory-card .case-voucher-claim-btn {
        min-height: 30px !important;
        font-size: 10px !important;
    }
    #profileView .profile-split-inventory .inventory-card .inv-action-btns { gap: 5px !important; }
}

/* ── Профиль игрока (/player/:code) ─────────────────────────────────────────
   Содержимое стоит колонкой 640px по центру, а «Назад», имя и дата над ним
   были прижаты к левому краю раздела: на 1280 шапка начиналась на 164px
   левее карточек. Шапка теперь в той же колонке. */
#publicProfileView > .section-head {
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Окно пополнения ────────────────────────────────────────────────────────
   Три разных левых края: заголовок 30px, вкладки 28px (16px на телефоне),
   содержимое вкладки 20px. На глаз поля, поиск и сетка брейнротов торчали
   на 8px шире вкладок над ними. Теперь один край: 28px, на телефоне 16px. */
#depositFullscreenModal .deposit-fullscreen-head,
#depositFullscreenModal .deposit-cat-panel {
    padding-left: 28px !important;
    padding-right: 28px !important;
}
@media (max-width: 440px) {
    #depositFullscreenModal .deposit-fullscreen-head,
    #depositFullscreenModal .deposit-cat-panel {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
/* 441–519: сжатые вкладки включались только до 440px, и на 441–475
   «Брейнроты» обрезалось многоточием на 4–6px, а у закрытой вкладки до
   520px иконка уезжала на отдельную строку. */
@media (min-width: 441px) and (max-width: 519px) {
    .deposit-category-tabs .deposit-cat-tab {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 12px;
        gap: 4px;
    }
}
/* Четыре вкладки и больше (включена крипта): до 640px иконка рядом со словом
   не помещается, и «Брейнроты» резалось на 2–12px. Как на ≤389px — только
   слово. */
@media (min-width: 441px) and (max-width: 639px) {
    .deposit-category-tabs:has(> .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden) ~ .deposit-cat-tab:not(.hidden)) .deposit-cat-tab-icon {
        display: none;
    }
}
/* Закрытая категория на телефоне: «Брейнроты ЗАКРЫТО» в одну строку в
   четверть экрана не влезало и резалось с обеих сторон («ейнроты ЗАКРЫТ»).
   Метка уходит под название; иконка остаётся рядом с ним (пустой ::after
   во всю ширину работает как перенос строки во флексе). */
@media (max-width: 600px) {
    .deposit-category-tabs .deposit-cat-tab.is-closed-tab {
        flex-wrap: wrap;
        row-gap: 3px;
        white-space: nowrap;
        line-height: 1.1;
    }
    .deposit-category-tabs .deposit-cat-tab.is-closed-tab::after {
        content: '';
        flex-basis: 100%;
        height: 0;
        order: 2;
    }
    .deposit-category-tabs .deposit-cat-tab.is-closed-tab .deposit-cat-tab-closed {
        order: 3;
        margin-left: 0;
    }
    /* С четырьмя вкладками (крипта включена) иконке рядом с названием места
       нет, и она уезжала третьей строкой. У закрытой вкладки она и так
       приглушена — убираем. */
    .deposit-category-tabs .deposit-cat-tab.is-closed-tab .deposit-cat-tab-icon { display: none; }
}

/* ── Окно вывода ────────────────────────────────────────────────────────────
   Заголовок стоял на 30px от края, шаги — на 24px (на телефоне на 16px).
   Липкая панель с кнопкой тянулась на -28px при полях тела 24px и вылезала
   за рамку окна на 4px с каждой стороны. Теперь один край: 24px, на
   телефоне 16px, панель ровно по краям окна. */
#withdrawalModal .deposit-fullscreen-head {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
#withdrawalModal .wdr-actionbar {
    margin: 4px -24px -24px;
    padding: 14px 24px 20px;
    bottom: -24px;
}
@media (max-width: 560px) {
    #withdrawalModal .deposit-fullscreen-head {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #withdrawalModal .wdr-actionbar {
        margin: 4px -16px -20px;
        padding: 12px 16px 16px;
        bottom: -20px;
    }
}

/* ── Страница брейнрота (/item/…) и профиль игрока: шапка ───────────────────
   Заголовок вставал сразу под кнопку «Назад» (2px). */
.section-head-stack .back-btn + h2 { margin-top: 10px !important; }

/* «Похожие брейнроты»: три колонки по 1fr на телефоне не ужимались под
   длинное имя («Headless Horseman» 16px) и сетка вылезала за экран на 65px —
   третья карточка обрезалась. Имена к тому же были чёрным по тёмному:
   карточка — <button>, и цвет текста брался кнопочный. */
#itemRelated { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)) !important; }
@media (max-width: 479px) {
    #itemRelated { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
#itemRelated .related-card { min-width: 0; color: var(--text); }
#itemRelated .related-card .item-name {
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
    margin-top: 6px;
}

/* ── Ревью интерфейса, вторая волна (05.10.2026) ─────────────────────────── */

/* Профиль, телефон. «Лучший дроп» и «Статистика» были по 328px в колонке
   292px (320×568): 1fr у грида — это minmax(auto, 1fr), и колонку распирала
   самая широкая карточка, правый край обрезался. Длинное имя дропа теперь
   переносится, а не режется многоточием (white-space в разметке инлайном,
   поэтому !important). */
@media (max-width: 600px) {
    .profile-top-row { grid-template-columns: minmax(0, 1fr) !important; }
    .profile-top-row > .profile-card { min-width: 0 !important; }
    .profile-stats-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    .profile-stats-body > div { min-width: 0; overflow-wrap: anywhere; }
    .profile-bestdrop-body > div { min-width: 0; }
    .profile-bestdrop-item-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }
}
/* «Инвентарь» и кнопки «Вывод» / «Продать всё» на 320 не влезали в одну
   строку (нужно 312px при 254) — «Продать всё» уходило за край карточки.
   Кнопки переносятся строкой ниже. */
@media (max-width: 359px) {
    #profileView .profile-split-inventory .inventory-head-wrapper { flex-wrap: wrap !important; row-gap: 8px !important; }
    #profileView .profile-split-inventory .inventory-actions-header { flex-wrap: wrap !important; gap: 8px !important; min-width: 0; }
}

/* Профиль, планшет и телефон боком (761–1100). Аватар с ником, баланс и
   «Отыгрыш» стояли в одну строку, и блоку имени оставалось 88–124px: ник
   «@…», значок и карандаш резались. «Отыгрыш» уходит своей строкой ниже (как
   на телефоне), имени — всё остальное место. */
@media (min-width: 761px) and (max-width: 1100px) {
    .profile-hero { flex-wrap: wrap !important; }
    .profile-user-block { flex: 1 1 240px !important; min-width: 200px !important; max-width: none !important; }
    #profileWagerBar { flex: 0 0 100% !important; width: 100% !important; margin-top: 4px; }
}

/* Шапка 1600–1699 (строка меню, не штора). В русском строке нужно ~1267px
   при 1235: профиль заезжал под шестерёнку на 20px. Поля у пунктов меньше
   только в этом диапазоне; с 1700 места хватает и с прежними. */
@media (min-width: 1600px) and (max-width: 1699px) {
    #mainNav > .nav-btn:not(.ib-nav) { padding-left: 7px !important; padding-right: 7px !important; }
    #mainNav > .nav-btn.ib-nav { padding-left: 9px !important; padding-right: 9px !important; }
}

/* Тост ивента на телефоне. Яйцо, текст, «Смотреть» и крестик стояли в одну
   строку, и тексту оставалось 104px на 360 (67px на 320) — строка задания
   ломалась на пять строк. «Смотреть» уходит под текст, яйцо меньше. */
@media (max-width: 480px) {
    .egg-toast {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas: "egg body close" "egg go go";
        column-gap: 8px;
        align-items: start;
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        padding: 8px 2px 8px 8px;
    }
    .egg-toast-egg { grid-area: egg; width: 36px; height: 36px; }
    .egg-toast-egg img { width: 32px; height: 32px; }
    .egg-toast-body { grid-area: body; align-self: center; }
    .egg-toast-actions { display: contents; }
    .egg-toast .egg-toast-go { grid-area: go; justify-self: start; min-height: 34px !important; margin-top: 6px; }
    .egg-toast-close { grid-area: close; width: 36px; height: 36px; }
}

/* Правила депозита: «Я прочитал(а)» стоит в подвале окна рядом с кнопкой,
   а не в конце прокручиваемого списка — на 320–430 галочка уезжала вниз
   и обрезалась, и кнопка «Продолжить» без неё ничего не делала. */
#depositRulesModal .oos-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-top: 1px solid var(--line);
}
#depositRulesModal .oos-modal-footer > .primary-btn { align-self: center; }
@media (max-width: 480px) {
    #depositRulesModal .oos-modal-footer { padding: 12px 18px 16px; gap: 10px; }
    #depositRulesModal .deposit-rules-agree { padding: 10px; }
    #depositRulesModal .deposit-rules-list { margin-bottom: 4px; }
}

/* Кнопка чата поддержки над «Открыть» бесплатного кейса на главной: прячется,
   пока под ней эта кнопка (класс ставит bindSupportFabAvoid в app.js). */
body.fab-over-cta .support-floating-btn {
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

/* Телефон: у дайсов и медового ивента нет подвала, и последний блок страницы
   (строка истории раундов с «+2×», пустые квесты улья) оставался под кнопкой
   чата даже в самом низу прокрутки. Запас снизу = кнопка 58px + отступ 14px
   + воздух. Обычные страницы заканчиваются подвалом — им не нужно. */
@media (max-width: 767px) {
    html body .dice-page,
    html body .hv-page { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Штора меню (правка 05.10). «Ивент» стоит первым пунктом, между профилем и
   «Главной»; над профилем больше нет пустого поля в 64 px (бургер шторы туда
   не заходит, она закрывается касанием мимо неё). На ≥1600, где меню —
   строка в шапке, порядок прежний: «Главная», за ней «Ивент». */
@media (max-width: 1599px) {
    .main-nav { padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
    #mainNav .topbar-user-wrap { order: -3 !important; }
    #mainNav .mystery-timer-block { order: -2 !important; }
    #mainNav .nav-btn.ib-nav { order: -1 !important; }
}

/* «Обмен перед выводом» — карточка обменника (.exchange-confirm-*): отдаёшь →
   получаешь. Колонки шире, чем у обменника: тут с обеих сторон по нескольку
   брейнротов, и ряд карточек переносится внутри своей колонки. */
.wdr-swap-card .exchange-confirm-section { flex: 1 1 0; min-width: 0; }
.wdr-swap-card .exchange-confirm-row { flex-wrap: nowrap; align-items: stretch; }
.wdr-swap-card .exchange-confirm-given { max-width: 100%; }
.wdr-swap-card .wdr-swap-note { margin: 10px 0 0; text-align: center; }
@media (max-width: 480px) {
    .wdr-swap-card .exchange-confirm-row { flex-direction: column; align-items: center; }
    .wdr-swap-card .exchange-confirm-arrow-wrap { transform: rotate(90deg); }
    .wdr-swap-card .exchange-confirm-arrow-spacer { display: none; }
    .wdr-swap-card .exchange-confirm-arrow-box { height: 24px; }
}

/* Шкала утешения (Go-only, 19.10.2026): под краш, дайсами и апгрейдером. */
.consol-meter{width:100%;max-width:420px;margin:10px auto 0;padding:10px 12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);border-radius:12px;box-sizing:border-box;}
.consol-meter__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;}
.consol-meter__title{font-family:'Syne',sans-serif;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.consol-meter__count{font-family:'Bebas Neue',cursive,sans-serif;font-size:16px;letter-spacing:1px;color:#e8c840;}
.consol-meter__bar{height:6px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;}
.consol-meter__bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),#e8c840);transition:width .5s ease;}
.consol-meter__hint{margin-top:6px;font-size:11px;line-height:1.35;color:var(--muted);}