/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-clq4o1gbg6] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-clq4o1gbg6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* min-width: 0 обязателен: у flex-элемента min-width по умолчанию auto, поэтому широкая
       таблица внутри main не давала ему ужаться и отбирала ширину у сайдбара — тот съезжал
       с 300px и обрезал подписи пунктов меню. Теперь лишнее уходит в собственную прокрутку
       .page-content, а сайдбар остаётся фиксированным. */
    min-width: 0;
}

/* Раньше здесь стоял вложенный в <main> тег <body>: браузер сливал его class в настоящий
   body, и так на страницу попадала тема. Теперь тему ставит сервер в App.razor, а это
   обычная обёртка — стили те же. */
main > .main-inner[b-clq4o1gbg6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--body-bg);
    color: var(--font-color);
}

/* Mobile: the sidebar element only wraps the top bar (the nav itself is a
   fixed-position drawer). The stacking context keeps the top bar and its
   avatar dropdown above page content. */
.sidebar[b-clq4o1gbg6] {
    position: relative;
    z-index: 1030;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
}

/* Сайдбар остаётся сбоку только там, где после него колонке содержимого есть где развернуться.
   Он отнимает 300px плюс поля, и на 992px — прежней границе из шаблона проекта — странице
   оставалось около 610px: уже телефонной. Таблицы при этом сжимались в компактный вид, а меню
   всё ещё занимало треть экрана. С 1200px содержимому остаётся около 820px, и узкий вид
   включается только после того, как меню уехало в выдвижную панель. */
@media (min-width: 1200px) {
    .page[b-clq4o1gbg6] {
        flex-direction: row;
    }

    .sidebar[b-clq4o1gbg6] {
        display: flex;
        flex-direction: column;
        width: 300px;
        /* Ширина сайдбара фиксированная, ужиматься под соседа он не должен. */
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        overflow: hidden;
        top: 0;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
    }

    article[b-clq4o1gbg6] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-clq4o1gbg6] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-clq4o1gbg6] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ---------------------------------------------------------------
   Sidebar column: header (fixed) / nav list (scrolls) / footer (pinned).
   Nothing is absolutely positioned, so the list can never slide under
   or through the user button — it is clipped by .nav-scrollable.
   --------------------------------------------------------------- */

.sidebar-inner[b-i0kp5qli9z] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.top-row[b-i0kp5qli9z] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand[b-i0kp5qli9z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding-block: 0.3125rem;
    font-size: 1.25rem;
    color: var(--font-color);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.navbar-brand:hover[b-i0kp5qli9z] {
    color: var(--font-color);
}

.brand-version[b-i0kp5qli9z] {
    font-size: 0.4rem;
    align-self: center;
}

.nav-scrollable[b-i0kp5qli9z] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Столбец пунктов меню. Заменяет bootstrap-овские nav и flex-column. */
.nav-list[b-i0kp5qli9z] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-footer[b-i0kp5qli9z] {
    flex: 0 0 auto;
    padding: 0.75rem;
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--border-color);
}

/* ---------------------------------------------------------------
   Nav items
   --------------------------------------------------------------- */

.bi[b-i0kp5qli9z] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    /* Крышка подарка, ноты и блики во время анимации выходят за viewBox. */
    overflow: visible;
    transition: scale 120ms ease-out;
}

.nav-item[b-i0kp5qli9z] {
    padding-inline: 1rem;
    font-size: 1rem;
}

.nav-item:first-of-type[b-i0kp5qli9z] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-i0kp5qli9z] {
    padding-bottom: 1rem;
}

.nav-item[b-i0kp5qli9z]  .nav-link {
    color: var(--font-color) !important;
    background: none;
    border-width: 0;
    border-style: solid;
    border-radius: 0.5rem;
    border-color: #e7e7e8;
    box-sizing: border-box;
    overflow-wrap: break-word;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Пункт, недоступный без подключённого бота: рисуется как обычный, но это кнопка,
   которая вместо перехода показывает модалку. */
.nav-item[b-i0kp5qli9z]  .nav-link-locked {
    width: 100%;
    text-align: start;
    cursor: pointer;
}

/* Раздел в доработке: тот же пункт, но приглушённый и с меткой, чтобы недоступность
   была видна до клика, а не только по модалке после него. */
.nav-item[b-i0kp5qli9z]  .nav-link-wip {
    color: var(--text-muted) !important;
}

.nav-item[b-i0kp5qli9z]  .nav-link-wip .bi {
    opacity: 0.6;
}

.nav-item[b-i0kp5qli9z]  .nav-link-wip-badge {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--hover);
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-item[b-i0kp5qli9z]  a.active {
    background-color: var(--nav-active-bg);
}

.nav-item[b-i0kp5qli9z]  .nav-link:hover:not(.active) {
    background-color: var(--navlink-hover);
}

/* ---------------------------------------------------------------
   Nav icon animations

   Каждая иконка разыгрывает свою сценку по клику — и только по нему.
   Класс nav-icon-play вешает navmenu.js и снимает, когда сценка доиграла.
   На чистом CSS клик не поймать: :active держится, только пока кнопка
   зажата, а :focus сразу после перехода уводит на h1 FocusOnNavigate.

   Трансформы частей SVG считаются от их собственной рамки (fill-box),
   поэтому transform-origin ниже задан в процентах от самой части.
   --------------------------------------------------------------- */

/* :where — чтобы частные transform-origin ниже перебивали это правило без подсчёта весов. */
.nav-item[b-i0kp5qli9z]  .bi :where(path, g) {
    transform-box: fill-box;
    transform-origin: center;
}

/* Ноты и блики появляются только в анимации. */
.nav-item[b-i0kp5qli9z]  :is(.songs-note, .vip-glint) {
    opacity: 0;
}

.nav-item[b-i0kp5qli9z]  .icon-home { transform-origin: 50% 100%; }
.nav-item[b-i0kp5qli9z]  .cmd-wand { transform-origin: 8% 92%; }
.nav-item[b-i0kp5qli9z]  .gift-lid { transform-origin: 50% 100%; }
.nav-item[b-i0kp5qli9z]  .gift-box { transform-origin: 50% 100%; }
.nav-item[b-i0kp5qli9z]  .logs-line { transform-origin: 0% 50%; }
.nav-item[b-i0kp5qli9z]  .bell-body { transform-origin: 50% 0%; }
.nav-item[b-i0kp5qli9z]  .icon-songs { transform-origin: 50% 70%; }
.nav-item[b-i0kp5qli9z]  .rewards-wand { transform-origin: 6% 94%; }
.nav-item[b-i0kp5qli9z]  .rewards-box { transform-origin: 50% 100%; }
.nav-item[b-i0kp5qli9z]  .icon-timeouts { transform-origin: 50% 90%; }
.nav-item[b-i0kp5qli9z]  .icon-shield { transform-origin: 50% 90%; }

/* Стрелка живёт в маске, её рамка — весь циферблат: крутим вокруг центра часов. */
.nav-item[b-i0kp5qli9z]  .timers-hand {
    transform-box: view-box;
    transform-origin: 8px 8.5px;
}

/* Пока кнопка зажата, иконка вдавлена. */
.nav-item[b-i0kp5qli9z]  .nav-link:active .bi {
    scale: 0.82;
}

/* Главная: домик подпрыгивает, приседая перед прыжком и после приземления. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play.icon-home {
    animation: nav-home-hop-b-i0kp5qli9z 650ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* Команды: взмах палочкой — и искры вспыхивают одна за другой. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play .cmd-wand {
    animation: nav-wand-wave-b-i0kp5qli9z 700ms ease-in-out;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .cmd-sparkle {
    animation: nav-sparkle-b-i0kp5qli9z 600ms ease-out backwards;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .cmd-sparkle-left { animation-delay: 120ms; }
.nav-item[b-i0kp5qli9z]  .nav-icon-play .cmd-sparkle-top { animation-delay: 220ms; }
.nav-item[b-i0kp5qli9z]  .nav-icon-play .cmd-sparkle-right { animation-delay: 320ms; }

/* Розыгрыши: крышка подарка подскакивает, коробка приседает под ней. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play .gift-lid {
    animation: nav-gift-lid-b-i0kp5qli9z 750ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .gift-box {
    animation: nav-gift-box-b-i0kp5qli9z 750ms ease-out;
}

/* Логи: строки дописываются сверху вниз. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play .logs-mark {
    animation: nav-logs-mark-b-i0kp5qli9z 420ms cubic-bezier(0.3, 0.7, 0.4, 1.4) backwards;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .logs-line {
    animation: nav-logs-line-b-i0kp5qli9z 420ms cubic-bezier(0.3, 0.7, 0.4, 1) backwards;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .logs-row-1 { animation-delay: 0ms; }
.nav-item[b-i0kp5qli9z]  .nav-icon-play .logs-row-2 { animation-delay: 110ms; }
.nav-item[b-i0kp5qli9z]  .nav-icon-play .logs-row-3 { animation-delay: 220ms; }

/* Оповещения: колокольчик звенит, язычок отстаёт от чаши. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play .bell-body {
    animation: nav-bell-ring-b-i0kp5qli9z 900ms ease-out;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .bell-clapper {
    animation: nav-bell-clapper-b-i0kp5qli9z 900ms ease-out;
}

/* Заказ песен: наушники качаются в такт, из них вылетают ноты. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play.icon-songs {
    animation: nav-songs-bop-b-i0kp5qli9z 800ms ease-in-out;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .songs-note-left {
    animation: nav-songs-note-left-b-i0kp5qli9z 900ms ease-out 80ms;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .songs-note-right {
    animation: nav-songs-note-right-b-i0kp5qli9z 900ms ease-out 360ms;
}

/* Медиа-виджет: экран включается, как старый кинескоп. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play.icon-screen {
    animation: nav-screen-power-b-i0kp5qli9z 750ms ease-in-out;
}

/* Награды: взмах лентой — звёзды вспыхивают, коробка подпрыгивает. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play .rewards-wand {
    animation: nav-rewards-wand-b-i0kp5qli9z 700ms ease-in-out;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .rewards-star {
    animation: nav-sparkle-b-i0kp5qli9z 550ms ease-out backwards;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .rewards-star-1 { animation-delay: 200ms; }
.nav-item[b-i0kp5qli9z]  .nav-icon-play .rewards-star-2 { animation-delay: 290ms; }
.nav-item[b-i0kp5qli9z]  .nav-icon-play .rewards-star-3 { animation-delay: 380ms; }

.nav-item[b-i0kp5qli9z]  .nav-icon-play .rewards-box {
    animation: nav-rewards-box-b-i0kp5qli9z 700ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* VIP: камень поворачивается и вспыхивает бликами. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play .vip-gem {
    animation: nav-vip-spin-b-i0kp5qli9z 800ms cubic-bezier(0.5, 0, 0.3, 1);
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .vip-glint {
    animation: nav-vip-glint-b-i0kp5qli9z 550ms ease-out 450ms;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .vip-glint-left {
    animation-delay: 560ms;
}

/* Таймауты: часы трезвонят и подпрыгивают, как будильник на тумбочке. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play.icon-timeouts {
    animation: nav-alarm-ring-b-i0kp5qli9z 750ms linear;
}

/* Таймеры: стрелка делает полный круг, колокольчики будильника подпрыгивают по очереди. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play .timers-hand {
    animation: nav-timers-hand-b-i0kp5qli9z 900ms cubic-bezier(0.6, 0, 0.3, 1);
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .timers-bell-left {
    animation: nav-timers-bell-left-b-i0kp5qli9z 900ms ease-in-out;
}

.nav-item[b-i0kp5qli9z]  .nav-icon-play .timers-bell-right {
    animation: nav-timers-bell-right-b-i0kp5qli9z 900ms ease-in-out;
}

/* Интеграции: деталь пазла вынимается и защёлкивается обратно. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play.icon-puzzle {
    animation: nav-puzzle-snap-b-i0kp5qli9z 700ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* Администрирование: щит поднимается и встаёт в защиту. */
.nav-item[b-i0kp5qli9z]  .nav-icon-play.icon-shield {
    animation: nav-shield-guard-b-i0kp5qli9z 750ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

@keyframes nav-home-hop-b-i0kp5qli9z {
    0% { transform: translateY(0) scale(1, 1); }
    15% { transform: translateY(0) scale(1.15, 0.8); }
    40% { transform: translateY(-38%) scale(0.9, 1.1); }
    62% { transform: translateY(0) scale(1.12, 0.86); }
    80% { transform: translateY(0) scale(0.97, 1.03); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes nav-wand-wave-b-i0kp5qli9z {
    0% { transform: rotate(0); }
    25% { transform: rotate(-16deg); }
    55% { transform: rotate(10deg); }
    78% { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
}

@keyframes nav-sparkle-b-i0kp5qli9z {
    0% { transform: scale(0) rotate(-60deg); opacity: 0; }
    55% { transform: scale(1.4) rotate(15deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes nav-gift-lid-b-i0kp5qli9z {
    0% { transform: translateY(0) rotate(0); }
    15% { transform: translateY(5%) rotate(0); }
    42% { transform: translateY(-55%) rotate(-12deg); }
    64% { transform: translateY(0) rotate(0); }
    78% { transform: translateY(-12%) rotate(4deg); }
    100% { transform: translateY(0) rotate(0); }
}

@keyframes nav-gift-box-b-i0kp5qli9z {
    0%, 8% { transform: scale(1, 1); }
    16% { transform: scale(1.06, 0.9); }
    32% { transform: scale(0.97, 1.04); }
    56% { transform: scale(1, 1); }
    66% { transform: scale(1.06, 0.9); }
    82%, 100% { transform: scale(1, 1); }
}

@keyframes nav-logs-mark-b-i0kp5qli9z {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes nav-logs-line-b-i0kp5qli9z {
    0% { transform: scaleX(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes nav-bell-ring-b-i0kp5qli9z {
    0% { transform: rotate(0); }
    10% { transform: rotate(18deg); }
    24% { transform: rotate(-15deg); }
    38% { transform: rotate(11deg); }
    52% { transform: rotate(-8deg); }
    66% { transform: rotate(5deg); }
    80% { transform: rotate(-2deg); }
    100% { transform: rotate(0); }
}

@keyframes nav-bell-clapper-b-i0kp5qli9z {
    0% { transform: translateX(0); }
    14% { transform: translateX(-40px); }
    28% { transform: translateX(34px); }
    42% { transform: translateX(-24px); }
    56% { transform: translateX(16px); }
    70% { transform: translateX(-8px); }
    84% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

@keyframes nav-songs-bop-b-i0kp5qli9z {
    0% { transform: rotate(0) scale(1); }
    15% { transform: rotate(-10deg) scale(1.15); }
    32% { transform: rotate(0) scale(1); }
    50% { transform: rotate(10deg) scale(1.15); }
    68% { transform: rotate(0) scale(1); }
    100% { transform: rotate(0) scale(1); }
}

@keyframes nav-songs-note-left-b-i0kp5qli9z {
    0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-170px, -420px) rotate(-25deg) scale(1); opacity: 0; }
}

@keyframes nav-songs-note-right-b-i0kp5qli9z {
    0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(200px, -400px) rotate(20deg) scale(1); opacity: 0; }
}

@keyframes nav-screen-power-b-i0kp5qli9z {
    0% { transform: scale(1, 1); opacity: 1; }
    20% { transform: scale(1.25, 0.06); opacity: 1; }
    32% { transform: scale(0.06, 0.06); opacity: 0.4; }
    38% { transform: scale(0.06, 0.06); opacity: 0.4; }
    54% { transform: scale(1.2, 0.06); opacity: 1; }
    66% { transform: scale(1.2, 0.06); opacity: 1; }
    80% { transform: scale(0.94, 1.1); opacity: 1; }
    91% { transform: scale(1.03, 0.97); opacity: 1; }
    100% { transform: scale(1, 1); opacity: 1; }
}

@keyframes nav-rewards-wand-b-i0kp5qli9z {
    0% { transform: rotate(0); }
    25% { transform: rotate(-12deg); }
    50% { transform: rotate(12deg); }
    72% { transform: rotate(-3deg); }
    100% { transform: rotate(0); }
}

@keyframes nav-rewards-box-b-i0kp5qli9z {
    0%, 30% { transform: translateY(0) scale(1, 1); }
    42% { transform: translateY(0) scale(1.08, 0.88); }
    62% { transform: translateY(-18%) scale(0.96, 1.05); }
    80% { transform: translateY(0) scale(1.05, 0.93); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes nav-vip-spin-b-i0kp5qli9z {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(360deg); }
}

@keyframes nav-vip-glint-b-i0kp5qli9z {
    0% { transform: scale(0) rotate(0); opacity: 0; }
    45% { transform: scale(1.2) rotate(45deg); opacity: 1; }
    100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

@keyframes nav-alarm-ring-b-i0kp5qli9z {
    0% { transform: translateY(0) rotate(0); }
    8% { transform: translateY(-10%) rotate(-14deg); }
    16% { transform: translateY(-10%) rotate(14deg); }
    24% { transform: translateY(-10%) rotate(-14deg); }
    32% { transform: translateY(-10%) rotate(14deg); }
    40% { transform: translateY(-10%) rotate(-12deg); }
    48% { transform: translateY(-10%) rotate(12deg); }
    56% { transform: translateY(-6%) rotate(-10deg); }
    64% { transform: translateY(-6%) rotate(10deg); }
    72% { transform: translateY(-3%) rotate(-6deg); }
    80% { transform: translateY(0) rotate(4deg); }
    90% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0); }
}

@keyframes nav-timers-hand-b-i0kp5qli9z {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

@keyframes nav-timers-bell-left-b-i0kp5qli9z {
    0%, 40%, 80%, 100% { transform: translate(0, 0); }
    20%, 60% { transform: translate(-1px, -1.2px); }
}

@keyframes nav-timers-bell-right-b-i0kp5qli9z {
    0%, 20%, 60%, 100% { transform: translate(0, 0); }
    40%, 80% { transform: translate(1px, -1.2px); }
}

@keyframes nav-puzzle-snap-b-i0kp5qli9z {
    0% { transform: translate(0, 0) rotate(0) scale(1); }
    32% { transform: translate(-14%, -18%) rotate(-16deg) scale(1.06); }
    56% { transform: translate(3%, 3%) rotate(2deg) scale(0.9); }
    74% { transform: translate(0, 0) rotate(0) scale(1.06); }
    100% { transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes nav-shield-guard-b-i0kp5qli9z {
    0% { transform: translateY(0) rotate(0) scale(1); }
    25% { transform: translateY(-14%) rotate(-10deg) scale(1.12); }
    45% { transform: translateY(-14%) rotate(8deg) scale(1.12); }
    66% { transform: translateY(3%) rotate(0) scale(0.92); }
    84% { transform: translateY(0) rotate(0) scale(1.04); }
    100% { transform: translateY(0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-item[b-i0kp5qli9z]  :is(.bi, .bi *) {
        animation: none !important;
        transition: none;
    }

    .nav-item[b-i0kp5qli9z]  .nav-link {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   Icon buttons (mobile hamburger + drawer close)
   --------------------------------------------------------------- */

.icon-button[b-i0kp5qli9z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background-color: transparent;
    color: var(--font-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition-property: background-color, border-color, color;
    transition-duration: 200ms;
}

.icon-button:hover[b-i0kp5qli9z] {
    background-color: var(--nav-item-hover);
}

.icon-button:focus-visible[b-i0kp5qli9z] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 255, 0.6);
}

.icon-button svg[b-i0kp5qli9z] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ---------------------------------------------------------------
   Mobile top bar + drawer
   --------------------------------------------------------------- */

.mobile-topbar[b-i0kp5qli9z] {
    display: none;
}

@media (max-width: 1199.98px) {
    /* hamburger | logo | avatar — the 1fr side columns keep the logo optically centred */
    .mobile-topbar[b-i0kp5qli9z] {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0.5rem;
        min-height: 3.5rem;
        padding: 0.5rem 0.75rem;
    }

    .mobile-topbar .icon-button[b-i0kp5qli9z] {
        justify-self: start;
    }

    /* The third column is the <UserMenu> root; it aligns itself
       (.user-menu.topbar) because it lives in another CSS scope. */
    .mobile-brand[b-i0kp5qli9z] {
        justify-self: center;
        display: flex;
        align-items: center;
    }

    .mobile-brand img[b-i0kp5qli9z] {
        display: block;
        height: 2.5rem;
        width: auto;
    }

    .sidebar-inner[b-i0kp5qli9z] {
        position: fixed;
        inset: 0;
        /* Above page content, deliberately below modals (.tb-modal, 1055)
           so #botRequiredModal still renders on top of an open drawer. */
        z-index: 1045;
        background-color: var(--sidebar-bg);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 280ms;
        overscroll-behavior: contain;
    }

    .sidebar-inner.open[b-i0kp5qli9z] {
        transform: translateX(0);
        visibility: visible;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
}

@media (min-width: 1200px) {
    .nav-close[b-i0kp5qli9z] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-inner[b-i0kp5qli9z] {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   Bot-required modal
   --------------------------------------------------------------- */

/* Окно рисуется в разметке меню, а у body цвет текста не задан: заголовок унаследовал
   бы тёмный по умолчанию из base.css и пропал на тёмном фоне. На страницах этого
   не видно — там цвет приходит от контейнера страницы. */
.modal-font-title[b-i0kp5qli9z] {
    color: var(--font-color);
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Копия MainLayout.razor.css: изоляция стилей в Blazor привязана к компоненту, и правила
   соседнего layout сюда не достают. Правки сетки сайдбара нужно вносить в оба файла. */

.page[b-65xmk6ihiy] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-65xmk6ihiy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* min-width: 0 обязателен: у flex-элемента min-width по умолчанию auto, поэтому широкая
       таблица внутри main не давала ему ужаться и отбирала ширину у сайдбара — тот съезжал
       с 300px и обрезал подписи пунктов меню. Теперь лишнее уходит в собственную прокрутку
       .page-content, а сайдбар остаётся фиксированным. */
    min-width: 0;
}

/* Раньше здесь стоял вложенный в <main> тег <body>: браузер сливал его class в настоящий
   body, и так на страницу попадала тема. Теперь тему ставит сервер в App.razor, а это
   обычная обёртка — стили те же. */
main > .main-inner[b-65xmk6ihiy] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--body-bg);
    color: var(--font-color);
}

/* Mobile: the sidebar element only wraps the top bar (the nav itself is a
   fixed-position drawer). The stacking context keeps the top bar and its
   avatar dropdown above page content. */
.sidebar[b-65xmk6ihiy] {
    position: relative;
    z-index: 1030;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
}

/* Граница та же, что в MainLayout: до 1200px сайдбар отнимал у содержимого столько, что
   страница оказывалась уже телефонной, а меню всё ещё висело сбоку. */
@media (min-width: 1200px) {
    .page[b-65xmk6ihiy] {
        flex-direction: row;
    }

    .sidebar[b-65xmk6ihiy] {
        display: flex;
        flex-direction: column;
        width: 300px;
        /* Ширина сайдбара фиксированная, ужиматься под соседа он не должен. */
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        overflow: hidden;
        top: 0;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
    }

    article[b-65xmk6ihiy] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-65xmk6ihiy] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-65xmk6ihiy] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/PublicNavMenu.razor.rz.scp.css */
/* Копия NavMenu.razor.css: изоляция стилей в Blazor привязана к компоненту, соседние
   правила сюда не достают. Правки внешнего вида сайдбара нужно вносить в оба файла. */

/* ---------------------------------------------------------------
   Sidebar column: header (fixed) / nav list (scrolls) / footer (pinned).
   Nothing is absolutely positioned, so the list can never slide under
   or through the user button — it is clipped by .nav-scrollable.
   --------------------------------------------------------------- */

.sidebar-inner[b-eaz4nn90x6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.top-row[b-eaz4nn90x6] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand[b-eaz4nn90x6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding-block: 0.3125rem;
    font-size: 1.25rem;
    color: var(--font-color);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.navbar-brand:hover[b-eaz4nn90x6] {
    color: var(--font-color);
}

.brand-version[b-eaz4nn90x6] {
    font-size: 0.4rem;
    align-self: center;
}

.nav-scrollable[b-eaz4nn90x6] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Столбец пунктов меню. Заменяет bootstrap-овские nav и flex-column. */
.nav-list[b-eaz4nn90x6] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

/* В отличие от подвала панели, здесь два элемента подряд: ссылка на панель управления
   и под ней вход либо карточка пользователя. Промежуток задаёт подвал — на самих
   элементах его держать нельзя, они разные и меняются местами по состоянию входа. */
.nav-footer[b-eaz4nn90x6] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--border-color);
}

/* ---------------------------------------------------------------
   Nav items
   --------------------------------------------------------------- */

.bi[b-eaz4nn90x6] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.nav-item[b-eaz4nn90x6] {
    padding-inline: 1rem;
    font-size: 1rem;
}

.nav-item:first-of-type[b-eaz4nn90x6] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-eaz4nn90x6] {
    padding-bottom: 1rem;
}

.nav-item[b-eaz4nn90x6]  .nav-link {
    color: var(--font-color) !important;
    background: none;
    border-width: 0;
    border-style: solid;
    border-radius: 0.5rem;
    border-color: #e7e7e8;
    box-sizing: border-box;
    overflow-wrap: break-word;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav-item[b-eaz4nn90x6]  a.active {
    background-color: var(--nav-active-bg);
}

.nav-item[b-eaz4nn90x6]  .nav-link:hover:not(.active) {
    background-color: var(--navlink-hover);
}

/* ---------------------------------------------------------------
   Icon buttons (mobile hamburger + drawer close)
   --------------------------------------------------------------- */

.icon-button[b-eaz4nn90x6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background-color: transparent;
    color: var(--font-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition-property: background-color, border-color, color;
    transition-duration: 200ms;
}

.icon-button:hover[b-eaz4nn90x6] {
    background-color: var(--nav-item-hover);
}

.icon-button:focus-visible[b-eaz4nn90x6] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 255, 0.6);
}

.icon-button svg[b-eaz4nn90x6] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ---------------------------------------------------------------
   Mobile top bar + drawer
   --------------------------------------------------------------- */

.mobile-topbar[b-eaz4nn90x6] {
    display: none;
}

@media (max-width: 1199.98px) {
    /* hamburger | logo | avatar — the 1fr side columns keep the logo optically centred */
    .mobile-topbar[b-eaz4nn90x6] {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0.5rem;
        min-height: 3.5rem;
        padding: 0.5rem 0.75rem;
    }

    .mobile-topbar .icon-button[b-eaz4nn90x6] {
        justify-self: start;
    }

    /* The third column is the <UserMenu> root; it aligns itself
       (.user-menu.topbar) because it lives in another CSS scope. */
    .mobile-brand[b-eaz4nn90x6] {
        justify-self: center;
        display: flex;
        align-items: center;
    }

    .mobile-brand img[b-eaz4nn90x6] {
        display: block;
        height: 2.5rem;
        width: auto;
    }

    .sidebar-inner[b-eaz4nn90x6] {
        position: fixed;
        inset: 0;
        /* Above page content, deliberately below modals (.tb-modal, 1055)
           so #botRequiredModal still renders on top of an open drawer. */
        z-index: 1045;
        background-color: var(--sidebar-bg);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 280ms;
        overscroll-behavior: contain;
    }

    .sidebar-inner.open[b-eaz4nn90x6] {
        transform: translateX(0);
        visibility: visible;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
}

@media (min-width: 1200px) {
    .nav-close[b-eaz4nn90x6] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-inner[b-eaz4nn90x6] {
        transition: none;
    }

    .nav-item[b-eaz4nn90x6]  .nav-link,
    .nav-panel-link[b-eaz4nn90x6] {
        transition: none;
    }
}

/* ---------------------------------------------------------------
   Подвал публичного сайдбара
   --------------------------------------------------------------- */

/* Ссылка в панель — тот же пункт меню, что и разделы выше, но живёт в подвале,
   а не в .nav-item, поэтому отступы и вид задаются ей самой. */
.nav-panel-link[b-eaz4nn90x6] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: var(--font-color) !important;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav-panel-link:hover[b-eaz4nn90x6] {
    background-color: var(--navlink-hover);
}

/* Кнопка входа занимает то же место, что карточка UserMenu у зашедшего зрителя,
   поэтому и посадка у неё такая же: во всю ширину подвала, тот же радиус и отступы.
   Цвет — фирменный фиолетовый Twitch: он одинаков в обеих темах сайта. */
.nav-login-button[b-eaz4nn90x6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background-color: #9146ff;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition-property: background-color, box-shadow;
    transition-duration: 200ms;
}

.nav-login-button:hover[b-eaz4nn90x6] {
    background-color: #a56bff;
}

.nav-login-button:focus-visible[b-eaz4nn90x6] {
    box-shadow: 0 0 0 3px rgba(66, 153, 255, 0.6);
    outline: none;
}

/* Логотип в файле уже белый — перекрашивать нечем. */
.nav-login-icon[b-eaz4nn90x6] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-6x6zq4dcn3] {
    position: relative;
}

.user-menu.topbar[b-6x6zq4dcn3] {
    justify-self: end;
}

.user-menu-trigger[b-6x6zq4dcn3] {
    display: flex;
    align-items: center;
    color: var(--font-color);
    background-color: var(--nav-surface-raised);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 200ms;
}

.user-menu.sidebar .user-menu-trigger[b-6x6zq4dcn3] {
    width: 100%;
    height: 56px;
    gap: 0.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1.2;
}

.user-menu.topbar .user-menu-trigger[b-6x6zq4dcn3] {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    overflow: hidden;
}

.user-menu-trigger:hover[b-6x6zq4dcn3] {
    background-color: var(--nav-button-hover);
}

.user-menu-trigger.active[b-6x6zq4dcn3],
.user-menu-trigger:focus-visible[b-6x6zq4dcn3] {
    box-shadow: 0 0 0 3px rgba(66, 153, 255, 0.6);
    outline: none;
}

.user-menu-name[b-6x6zq4dcn3] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}

.user-menu-caret[b-6x6zq4dcn3] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.navigation-avatar[b-6x6zq4dcn3] {
    flex: 0 0 auto;
    display: block;
    border-radius: 50%;
    background-color: var(--nav-item-hover);
    background-size: cover;
    background-position: center;
}

.user-menu.sidebar .navigation-avatar[b-6x6zq4dcn3] {
    width: 32px;
    height: 32px;
}

.user-menu.topbar .navigation-avatar[b-6x6zq4dcn3] {
    width: 100%;
    height: 100%;
}

/* Меню — компонент Dropdown, его разметка рисуется не здесь, поэтому через ::deep.
   Базовые значения (min-width, font-size, list-style) приходят из Dropdown.css. */
.user-menu[b-6x6zq4dcn3]  .tb-dropdown-menu {
    z-index: 1200;
    padding: 0;
    margin: 0;
    background-color: var(--nav-surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.user-menu[b-6x6zq4dcn3]  .tb-dropdown-menu.show {
    display: grid;
}

.user-menu.sidebar[b-6x6zq4dcn3]  .tb-dropdown-menu {
    left: 0;
    right: 0;
    bottom: calc(100% + 0.5rem);
}

.user-menu.sidebar[b-6x6zq4dcn3]  .tb-dropdown-menu.show {
    animation: fadeInUp-b-6x6zq4dcn3 0.2s ease-in-out;
}

.user-menu.topbar[b-6x6zq4dcn3]  .tb-dropdown-menu {
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 13rem;
}

.user-menu.topbar[b-6x6zq4dcn3]  .tb-dropdown-menu.show {
    animation: fadeInDown-b-6x6zq4dcn3 0.2s ease-in-out;
}

.user-menu[b-6x6zq4dcn3]  .user-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    color: var(--font-color);
    user-select: none;
    cursor: pointer;
}

.user-menu[b-6x6zq4dcn3]  .user-menu-item:hover,
.user-menu[b-6x6zq4dcn3]  .user-menu-item:focus-visible {
    background-color: var(--nav-item-hover);
    outline: none;
}

@keyframes fadeInUp-b-6x6zq4dcn3 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown-b-6x6zq4dcn3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-menu[b-6x6zq4dcn3]  .tb-dropdown-menu.show {
        animation: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Страница входа в палитре лендинга (Home.css). Цвета продублированы здесь, а не взяты
   из .tb-landing: тот класс тянет за собой landing.js и фон body. */
.login-page[b-2bb4iqbdwa] {
    --login-bg: #0a0512;
    --login-violet: #7c3aed;
    --login-violet-hi: #a855f7;
    --login-magenta: #d946ef;
    --login-twitch: #9146ff;
    --login-glow: rgba(168, 85, 247, .35);
    --login-surface: rgba(255, 255, 255, .045);
    --login-border: rgba(168, 85, 247, .18);
    --login-border-hi: rgba(168, 85, 247, .45);
    --login-text: #ede9fe;
    --login-text-dim: #a99fc4;
    --login-text-mute: #7d7396;
    --login-success: #34d399;
    --login-ease: cubic-bezier(0, 0, .2, 1);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    color: var(--login-text);
    font-family: var(--tearinbot-fonts-heading, 'Lexend', sans-serif);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Фон ---------- */

/* fixed, чтобы и при оттягивании страницы на телефоне под ней не показался фон панели */
.login-bg[b-2bb4iqbdwa] {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% -10%, #2a1259 0%, rgba(42, 18, 89, 0) 62%),
    radial-gradient(90% 60% at 85% 15%, rgba(217, 70, 239, .16) 0%, rgba(217, 70, 239, 0) 70%),
    linear-gradient(180deg, #14082b 0%, var(--login-bg) 100%);
}

.login-blob[b-2bb4iqbdwa] {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    will-change: transform;
}

.login-blob--a[b-2bb4iqbdwa] {
    top: 6%;
    left: 4%;
    width: 44vw;
    max-width: 580px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(124, 58, 237, .85) 0%, rgba(124, 58, 237, 0) 70%);
    animation: login-drift-a-b-2bb4iqbdwa 26s ease-in-out infinite;
}

.login-blob--b[b-2bb4iqbdwa] {
    top: -4%;
    right: 2%;
    width: 40vw;
    max-width: 520px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(217, 70, 239, .7) 0%, rgba(217, 70, 239, 0) 70%);
    animation: login-drift-b-b-2bb4iqbdwa 32s ease-in-out infinite;
}

.login-blob--c[b-2bb4iqbdwa] {
    bottom: -10%;
    left: 38%;
    width: 36vw;
    max-width: 480px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(99, 102, 241, .6) 0%, rgba(99, 102, 241, 0) 70%);
    animation: login-drift-c-b-2bb4iqbdwa 38s ease-in-out infinite;
}

.login-grid[b-2bb4iqbdwa] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(168, 85, 247, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 85, 247, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
}

/* ---------- Шапка ---------- */

.login-header[b-2bb4iqbdwa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 80rem;
    height: 76px;
    margin: 0 auto;
    padding: 0 24px;
}

.login-brand[b-2bb4iqbdwa] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--login-text);
    text-decoration: none;
}

.login-brand:hover[b-2bb4iqbdwa] {
    color: var(--login-text);
}

.login-brand__logo[b-2bb4iqbdwa] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px var(--login-glow));
}

.login-brand__name[b-2bb4iqbdwa] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.login-back[b-2bb4iqbdwa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--login-border);
    border-radius: 999px;
    background: var(--login-surface);
    color: var(--login-text-dim);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: color 200ms var(--login-ease), border-color 200ms var(--login-ease);
}

.login-back:hover[b-2bb4iqbdwa] {
    border-color: var(--login-border-hi);
    color: var(--login-text);
}

.login-brand:focus-visible[b-2bb4iqbdwa],
.login-back:focus-visible[b-2bb4iqbdwa],
.login-card__terms a:focus-visible[b-2bb4iqbdwa] {
    outline: 2px solid var(--login-violet-hi);
    outline-offset: 3px;
    border-radius: 6px;
}

.login-back:focus-visible[b-2bb4iqbdwa] {
    border-radius: 999px;
}

/* ---------- Раскладка ---------- */

.login-main[b-2bb4iqbdwa] {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: 64px;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 24px 24px 64px;
}

/* ---------- Левая колонка ---------- */

.login-hero[b-2bb4iqbdwa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: login-rise-b-2bb4iqbdwa 700ms var(--login-ease) both;
}

.login-hero__logo[b-2bb4iqbdwa] {
    display: block;
    width: auto;
    height: clamp(140px, 26vh, 260px);
    margin-bottom: 20px;
    filter: drop-shadow(0 24px 60px rgba(124, 58, 237, .55));
    animation: login-float-b-2bb4iqbdwa 7s ease-in-out infinite;
}

.login-hero__title[b-2bb4iqbdwa] {
    display: flex;
    flex-direction: column;
    margin: 0 0 28px;
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.login-gradient-text[b-2bb4iqbdwa] {
    background: linear-gradient(100deg, #f5f3ff 0%, var(--login-violet-hi) 45%, var(--login-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.login-features[b-2bb4iqbdwa] {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-features li[b-2bb4iqbdwa] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--login-text-dim);
    font-size: 15px;
}

/* Галочка в круге: рамка — псевдоэлемент, сама галочка — повёрнутый уголок */
.login-features li[b-2bb4iqbdwa]::before {
    content: '';
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(52, 211, 153, .12) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35);
}

/* ---------- Карточка входа ---------- */

.login-card[b-2bb4iqbdwa] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 36px 32px;
    border: 1px solid var(--login-border);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02) inset;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: center;
    animation: login-rise-b-2bb4iqbdwa 700ms 120ms var(--login-ease) both;
}

/* Подсвеченная верхняя кромка карточки */
.login-card[b-2bb4iqbdwa]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 70, 239, .8), transparent);
}

.login-card__badge[b-2bb4iqbdwa] {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: linear-gradient(140deg, #a56bff 0%, var(--login-twitch) 55%, #6d28d9 100%);
    box-shadow: 0 14px 34px -10px rgba(145, 70, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* Мягкий пульсирующий ореол вокруг значка */
.login-card__badge[b-2bb4iqbdwa]::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 24px;
    border: 1px solid rgba(168, 85, 247, .4);
    animation: login-halo-b-2bb4iqbdwa 3s ease-out infinite;
}

.login-card__title[b-2bb4iqbdwa] {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.login-card__text[b-2bb4iqbdwa] {
    max-width: 300px;
    margin: 0 0 28px;
    color: var(--login-text-dim);
    font-size: 15px;
}

.login-form[b-2bb4iqbdwa] {
    width: 100%;
    margin: 0;
}

.login-twitch[b-2bb4iqbdwa] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 54px;
    padding: 0 24px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--login-twitch);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 30px -10px rgba(145, 70, 255, .85);
    transition: transform 200ms var(--login-ease), background-color 200ms var(--login-ease),
    box-shadow 200ms var(--login-ease);
}

/* Блик, пробегающий по кнопке при наведении */
.login-twitch[b-2bb4iqbdwa]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    transition: left 600ms var(--login-ease);
}

.login-twitch:hover[b-2bb4iqbdwa] {
    transform: translateY(-2px);
    background: #a56bff;
    box-shadow: 0 16px 38px -10px rgba(145, 70, 255, .95);
}

.login-twitch:hover[b-2bb4iqbdwa]::after {
    left: 120%;
}

.login-twitch:active[b-2bb4iqbdwa] {
    transform: translateY(0);
}

.login-twitch:focus-visible[b-2bb4iqbdwa] {
    outline: 2px solid var(--login-violet-hi);
    outline-offset: 3px;
}

.login-twitch__icon[b-2bb4iqbdwa] {
    width: 16px;
    height: 19px;
}

.login-card__terms[b-2bb4iqbdwa] {
    width: 100%;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(168, 85, 247, .12);
    color: var(--login-text-mute);
    font-size: 12.5px;
}

.login-card__terms a[b-2bb4iqbdwa] {
    color: var(--login-violet-hi);
    text-decoration: none;
    transition: color 200ms var(--login-ease);
}

.login-card__terms a:hover[b-2bb4iqbdwa] {
    color: #c084fc;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Узкие экраны: одна колонка ---------- */

@media (max-width: 960px) {
    .login-main[b-2bb4iqbdwa] {
        grid-template-columns: minmax(0, 420px);
        justify-content: center;
        align-content: center;
        gap: 0;
        padding-top: 0;
        padding-bottom: 32px;
    }

    /* От левой колонки остаётся только маскот над карточкой */
    .login-hero[b-2bb4iqbdwa] {
        align-items: center;
    }

    .login-hero__title[b-2bb4iqbdwa],
    .login-features[b-2bb4iqbdwa] {
        display: none;
    }

    .login-hero__logo[b-2bb4iqbdwa] {
        height: clamp(96px, 18vh, 160px);
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .login-header[b-2bb4iqbdwa] {
        height: 64px;
        padding: 0 16px;
    }

    .login-main[b-2bb4iqbdwa] {
        padding-inline: 16px;
    }

    .login-card[b-2bb4iqbdwa] {
        padding: 32px 22px 24px;
        border-radius: 20px;
    }

    .login-card__title[b-2bb4iqbdwa] {
        font-size: 23px;
    }

    .login-card__text[b-2bb4iqbdwa] {
        margin-bottom: 24px;
    }
}

/* Низкие телефоны: маскот и значок ужимаются, чтобы карточка влезла без прокрутки */
@media (max-width: 960px) and (max-height: 620px) {
    .login-hero__logo[b-2bb4iqbdwa] {
        height: 72px;
        margin-bottom: 8px;
    }

    .login-card[b-2bb4iqbdwa] {
        padding-top: 24px;
    }

    .login-card__badge[b-2bb4iqbdwa] {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .login-card__badge[b-2bb4iqbdwa]::after {
        border-radius: 20px;
    }

    .login-card__text[b-2bb4iqbdwa] {
        margin-bottom: 18px;
    }

    .login-twitch[b-2bb4iqbdwa] {
        height: 50px;
    }

    .login-card__terms[b-2bb4iqbdwa] {
        margin-top: 16px;
        padding-top: 14px;
    }
}

/* ---------- Анимации ---------- */

@keyframes login-rise-b-2bb4iqbdwa {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes login-float-b-2bb4iqbdwa {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes login-halo-b-2bb4iqbdwa {
    0% {
        opacity: .9;
        transform: scale(.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

@keyframes login-drift-a-b-2bb4iqbdwa {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(6vw, 5vh) scale(1.1);
    }
}

@keyframes login-drift-b-b-2bb4iqbdwa {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-5vw, 7vh) scale(.92);
    }
}

@keyframes login-drift-c-b-2bb4iqbdwa {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-7vw, -5vh) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-hero[b-2bb4iqbdwa],
    .login-card[b-2bb4iqbdwa],
    .login-hero__logo[b-2bb4iqbdwa],
    .login-blob[b-2bb4iqbdwa],
    .login-card__badge[b-2bb4iqbdwa]::after {
        animation: none;
    }

    .login-twitch[b-2bb4iqbdwa],
    .login-twitch[b-2bb4iqbdwa]::after,
    .login-back[b-2bb4iqbdwa],
    .login-card__terms a[b-2bb4iqbdwa] {
        transition: none;
    }
}
/* /Components/UnderDevelopmentModal.razor.rz.scp.css */
/* Окно живёт в разметке бокового меню, а у body цвет текста не задан — модалка
   наследует тёмный по умолчанию из base.css и заголовок пропадает на тёмном фоне.
   На страницах этого не видно: там цвет приходит от контейнера страницы. */
.modal-font-title[b-dmcnmc6306] {
    color: var(--font-color);
}