/* arena-premium-theme-v1 */

/* ============================================================
   PALETTE
============================================================ */

:root {
    color-scheme: light;

    --arena-brand: #B22000;
    --arena-brand-hover: #991b00;

    --arena-dark-bg: #0d0b0b;
    --arena-dark-bg-2: #100d0d;

    --arena-dark-surface: #151212;
    --arena-dark-surface-2: #1a1616;
    --arena-dark-surface-3: #211b1a;

    --arena-dark-text: #f4eeee;
    --arena-dark-text-soft: #d4c9c7;
    --arena-dark-muted: #9f9290;

    --arena-dark-border: rgba(255, 236, 232, .085);
    --arena-dark-border-strong: rgba(255, 236, 232, .14);

    --arena-dark-red-text: #e56b51;
    --arena-dark-red-soft: rgba(178, 32, 0, .16);

    --theme-x: 50vw;
    --theme-y: 50vh;
    --theme-r: 150vmax;
}


html[data-theme="dark"] {
    color-scheme: dark;
}


/* ============================================================
   VIEW TRANSITION
   Новый интерфейс как будто раскрывается из переключателя
============================================================ */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 999999;
    animation:
        arena-theme-reveal
        540ms
        cubic-bezier(.22,.8,.2,1)
        both;
}

@keyframes arena-theme-reveal {
    from {
        clip-path:
            circle(
                0px
                at
                var(--theme-x)
                var(--theme-y)
            );
    }

    to {
        clip-path:
            circle(
                var(--theme-r)
                at
                var(--theme-x)
                var(--theme-y)
            );
    }
}


/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ
============================================================ */

.arena-theme-toggle {
    position: relative;

    display: inline-grid;
    grid-template-columns: 34px 34px;
    align-items: center;
    justify-items: center;

    width: 72px;
    height: 40px;

    flex: 0 0 auto;

    padding: 2px;

    border:
        1px solid
        rgba(46, 34, 34, .11);

    border-radius: 999px;

    background:
        rgba(246, 241, 241, .90);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.45),
        0 7px 22px rgba(55, 30, 30, .07);

    color: #5e5050;

    cursor: pointer;
    isolation: isolate;

    -webkit-tap-highlight-color: transparent;

    transition:
        background 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 160ms ease;
}

.arena-theme-toggle:hover {
    transform: translateY(-1px);

    border-color:
        rgba(178, 32, 0, .22);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.52),
        0 9px 28px rgba(55, 30, 30, .10);
}

.arena-theme-toggle:active {
    transform: scale(.97);
}

.arena-theme-toggle-thumb {
    position: absolute;

    top: 3px;
    left: 3px;

    z-index: -1;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 4px 12px rgba(47, 26, 26, .14);

    transition:
        transform 420ms cubic-bezier(.2,.85,.2,1),
        background 260ms ease,
        box-shadow 260ms ease;
}

.arena-theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    transition:
        opacity 220ms ease,
        transform 420ms cubic-bezier(.2,.85,.2,1),
        color 220ms ease;
}

.arena-theme-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arena-theme-icon-sun {
    color: #B22000;
}

.arena-theme-icon-moon {
    color: #766868;
    opacity: .58;
}


html[data-theme="dark"] .arena-theme-toggle {
    border-color:
        rgba(255, 235, 231, .10);

    background:
        rgba(26, 21, 21, .94);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 9px 30px rgba(0,0,0,.24);

    color: #e9deda;
}

html[data-theme="dark"]
.arena-theme-toggle-thumb {
    transform: translateX(34px);

    background: #2a2020;

    box-shadow:
        0 5px 15px rgba(0,0,0,.38),
        inset 0 0 0 1px rgba(255,255,255,.07);
}

html[data-theme="dark"]
.arena-theme-icon-sun {
    color: #847574;
    opacity: .48;
    transform: rotate(-80deg) scale(.82);
}

html[data-theme="dark"]
.arena-theme-icon-moon {
    color: #f5ebe8;
    opacity: 1;
    transform: rotate(-8deg);
}


/*
Если JS нашёл шапку — переключатель становится частью навигации.
Иначе аккуратно плавает справа снизу.
*/

.arena-theme-toggle.is-floating {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9500;

    backdrop-filter: blur(18px);
}


/* ============================================================
   DARK: ОСНОВА
============================================================ */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--arena-dark-bg);
}

html[data-theme="dark"] body {
    color: var(--arena-dark-text);

    background-image:
        radial-gradient(
            circle at 87% -8%,
            rgba(178, 32, 0, .10),
            transparent 30rem
        );

    background-attachment: fixed;
}


/* Текст */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: var(--arena-dark-text);
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .helptext {
    color: var(--arena-dark-muted) !important;
}

html[data-theme="dark"] a {
    color: var(--arena-dark-red-text);
}


/* ============================================================
   HEADER / NAVIGATION
============================================================ */

html[data-theme="dark"] header {
    border-color: var(--arena-dark-border) !important;

    background:
        rgba(13, 11, 11, .82) !important;

    backdrop-filter: blur(22px);
}

html[data-theme="dark"]
nav a:not(.button):not(.btn) {
    color: #d9cfcc;
}

html[data-theme="dark"]
nav a:not(.button):not(.btn):hover {
    color: #fff;
}


/* ============================================================
   КАРТОЧКИ
============================================================ */

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    border-color:
        var(--arena-dark-border) !important;

    background:
        var(--arena-dark-surface) !important;

    color:
        var(--arena-dark-text);
}


/*
Вместо огромных дешёвых теней:
очень слабая внутренняя линия и мягкая глубина.
*/

html[data-theme="dark"] .card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 14px 40px rgba(0,0,0,.10);
}


/* ============================================================
   BUTTONS
============================================================ */

html[data-theme="dark"] .button,
html[data-theme="dark"] .btn-primary {
    border-color:
        var(--arena-brand) !important;

    background:
        var(--arena-brand) !important;

    color:
        #fff !important;

    box-shadow:
        0 8px 24px rgba(178, 32, 0, .16);
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .btn-primary:hover {
    border-color:
        #c52b0d !important;

    background:
        #c52b0d !important;

    box-shadow:
        0 10px 30px rgba(178, 32, 0, .22);
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .button.secondary {
    border-color:
        var(--arena-dark-border-strong) !important;

    background:
        var(--arena-dark-surface-2) !important;

    color:
        var(--arena-dark-text) !important;

    box-shadow: none;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .button.secondary:hover {
    border-color:
        rgba(229, 107, 81, .30) !important;

    background:
        var(--arena-dark-surface-3) !important;
}


/* ============================================================
   CHIPS / LABELS
============================================================ */

html[data-theme="dark"] .chip,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .tag {
    border-color:
        var(--arena-dark-border) !important;

    background:
        var(--arena-dark-surface-2) !important;

    color:
        var(--arena-dark-text-soft) !important;
}

html[data-theme="dark"] .red-eyebrow,
html[data-theme="dark"] .eyebrow {
    color:
        var(--arena-dark-red-text) !important;
}


/* ============================================================
   FORMS
============================================================ */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
    border-color:
        var(--arena-dark-border-strong) !important;

    background:
        #171313 !important;

    color:
        var(--arena-dark-text) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015);
}

html[data-theme="dark"]
input::placeholder,
html[data-theme="dark"]
textarea::placeholder {
    color:
        #746967 !important;
}

html[data-theme="dark"]
input:focus,
html[data-theme="dark"]
textarea:focus,
html[data-theme="dark"]
select:focus,
html[data-theme="dark"]
.form-control:focus {
    border-color:
        rgba(229, 107, 81, .62) !important;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(178, 32, 0, .13) !important;
}

html[data-theme="dark"] label {
    color:
        var(--arena-dark-text-soft);
}


/* ============================================================
   TABLES / DIVIDERS
============================================================ */

html[data-theme="dark"] table {
    color:
        var(--arena-dark-text);
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
    border-color:
        var(--arena-dark-border) !important;
}

html[data-theme="dark"] th {
    color:
        var(--arena-dark-text-soft);
}

html[data-theme="dark"] hr {
    border-color:
        var(--arena-dark-border);
}


/* ============================================================
   PROGRESS
============================================================ */

html[data-theme="dark"] .progress-track {
    background:
        #2a2221 !important;
}

html[data-theme="dark"] .progress-track span {
    background:
        var(--arena-brand) !important;
}


/* ============================================================
   REVIEW PAGE
   Специально учитываем твой новый интерфейс проверки
============================================================ */

html[data-theme="dark"]
.review-page-header-v2 h1,

html[data-theme="dark"]
.review-section-head-v2 h2,

html[data-theme="dark"]
.review-grade-head-v2 h2,

html[data-theme="dark"]
.review-solution-top-v2 h2 {
    color:
        var(--arena-dark-text) !important;
}

html[data-theme="dark"]
.review-page-subtitle-v2 {
    color:
        var(--arena-dark-muted) !important;
}


html[data-theme="dark"]
.review-condition-card-v2,

html[data-theme="dark"]
.review-work-card-v2,

html[data-theme="dark"]
.review-grade-card-v2,

html[data-theme="dark"]
.review-solution-card-v2,

html[data-theme="dark"]
.review-solution-mini-v4 {
    border-color:
        var(--arena-dark-border) !important;

    background:
        var(--arena-dark-surface) !important;

    color:
        var(--arena-dark-text) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 16px 44px rgba(0,0,0,.11) !important;
}


html[data-theme="dark"]
.review-condition-card-v2,

html[data-theme="dark"]
.review-solution-body-v2 {
    color:
        var(--arena-dark-text-soft) !important;
}


html[data-theme="dark"]
.review-text-answer-v2 {
    background:
        var(--arena-dark-surface-2) !important;

    color:
        var(--arena-dark-text-soft) !important;
}


html[data-theme="dark"]
.review-prompt-image-v2,

html[data-theme="dark"]
.review-attachment-preview {
    background:
        #100e0e !important;
}


html[data-theme="dark"]
.review-attachment {
    border-color:
        var(--arena-dark-border) !important;

    background:
        var(--arena-dark-surface-2) !important;

    color:
        var(--arena-dark-text-soft) !important;
}


html[data-theme="dark"]
.review-section-badge-v2 {
    background:
        var(--arena-dark-red-soft) !important;

    color:
        #eb765c !important;
}


html[data-theme="dark"]
.review-max-score-v2 {
    background:
        var(--arena-dark-surface-2) !important;

    color:
        var(--arena-dark-muted) !important;
}


html[data-theme="dark"]
.review-solution-mini-icon-v4 {
    background:
        var(--arena-dark-red-soft) !important;

    color:
        #ea7057 !important;
}


html[data-theme="dark"]
.review-solution-mini-copy-v4 strong {
    color:
        var(--arena-dark-text) !important;
}

html[data-theme="dark"]
.review-solution-mini-copy-v4 span {
    color:
        var(--arena-dark-muted) !important;
}


html[data-theme="dark"]
.review-solution-mini-button-v4 {
    background:
        var(--arena-dark-surface-2) !important;

    color:
        var(--arena-dark-text) !important;
}

html[data-theme="dark"]
.review-solution-mini-button-v4:hover {
    background:
        var(--arena-brand) !important;

    color:
        #fff !important;
}


/* ============================================================
   "БЛЯ, ЗАБЫЛ" / ЭТАЛОННОЕ РЕШЕНИЕ
============================================================ */

html[data-theme="dark"]
.review-reference-solution-v4 {
    border-color:
        var(--arena-dark-border-strong) !important;

    background:
        var(--arena-dark-surface) !important;

    box-shadow:
        0 28px 90px rgba(0,0,0,.52) !important;
}


html[data-theme="dark"]
.review-reference-head-v4 {
    border-color:
        var(--arena-dark-border) !important;

    background:
        rgba(21, 18, 18, .96) !important;
}


html[data-theme="dark"]
.review-reference-head-v4 h2 {
    color:
        var(--arena-dark-text) !important;
}


html[data-theme="dark"]
.review-reference-kicker-v4 {
    color:
        #e56b51 !important;
}


html[data-theme="dark"]
.review-reference-close-v4 {
    background:
        var(--arena-dark-surface-3) !important;

    color:
        var(--arena-dark-text) !important;
}


html[data-theme="dark"]
.review-reference-scroll-v4 {
    background:
        #100d0d !important;
}


html[data-theme="dark"]
.review-reference-paper-v4 {
    border-color:
        var(--arena-dark-border) !important;

    background:
        #181414 !important;

    color:
        var(--arena-dark-text-soft) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 14px 35px rgba(0,0,0,.18) !important;
}


/* ============================================================
   FOOTER
============================================================ */

html[data-theme="dark"] footer {
    border-color:
        var(--arena-dark-border) !important;

    background:
        #0b0909 !important;

    color:
        var(--arena-dark-muted) !important;
}


/* ============================================================
   FALLBACK TRANSITION
============================================================ */

html.arena-theme-fallback body,
html.arena-theme-fallback header,
html.arena-theme-fallback footer,
html.arena-theme-fallback .card,
html.arena-theme-fallback input,
html.arena-theme-fallback textarea,
html.arena-theme-fallback select {
    transition:
        background-color 260ms ease,
        border-color 260ms ease,
        color 220ms ease,
        box-shadow 260ms ease;
}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    .arena-theme-toggle,
    .arena-theme-toggle-thumb,
    .arena-theme-icon {
        transition-duration: 0ms !important;
    }
}

@media (max-width: 720px) {

    .arena-theme-toggle.is-floating {
        right: 14px;
        bottom: 14px;
    }
}


/* ============================================================
   arena-project-dark-v2

   Полноценная dark-тема для текущего проекта.
   Цветовая система:
   bg        #0d0a0a
   surface   #171212
   elevated  #1d1716
   raised    #241c1b
   text      #f5efed
   brand     #B22000
============================================================ */


/* ============================================================
   1. ЕДИНАЯ ПАЛИТРА ВСЕГО ПРОЕКТА
============================================================ */

html[data-theme="dark"] {

    /* Старый app.css */

    --bg: #0d0a0a;
    --surface: #171212;
    --surface-soft: #1d1716;

    --ink: #f5efed;
    --muted: #a39895;
    --line: rgba(255, 238, 234, .09);

    --navy: #241514;
    --navy-2: #4b1710;

    --blue: #B22000;
    --blue-dark: #cf3a1b;
    --blue-soft: rgba(178, 32, 0, .14);

    --green: #5dbf85;
    --green-soft: rgba(61, 161, 104, .12);

    --red: #e36b53;
    --red-soft: rgba(178, 32, 0, .13);

    --yellow: #d9a64e;
    --yellow-soft: rgba(217, 166, 78, .12);

    --shadow:
        0 18px 55px rgba(0, 0, 0, .22);


    /* arena-theme.css */

    --apple-bg: #0d0a0a;

    --apple-surface:
        rgba(23, 18, 18, .90);

    --apple-surface-solid: #171212;
    --apple-surface-secondary: #1d1716;

    --apple-text: #f5efed;
    --apple-text-secondary: #aaa09d;
    --apple-text-tertiary: #817572;

    --apple-border:
        rgba(255, 238, 234, .085);

    --apple-border-strong:
        rgba(255, 238, 234, .15);

    --apple-blue: #e05a3d;
    --apple-violet: #bd5c4a;
    --apple-red: #B22000;

    --apple-accent-gradient:
        linear-gradient(
            105deg,
            #B22000 0%,
            #df5638 55%,
            #f08a70 100%
        );

    --apple-shadow:
        0 22px 70px rgba(0, 0, 0, .24);

    --apple-shadow-hover:
        0 28px 80px rgba(0, 0, 0, .34);


    /* Главная */

    --home-bg: #0d0a0a;
    --home-white: #171212;

    --home-black: #f5efed;
    --home-muted: #a39895;
    --home-light-muted: #817572;

    --home-border:
        rgba(255, 238, 234, .085);

    --home-border-strong:
        rgba(255, 238, 234, .15);

    --home-red: #B22000;
    --home-red-dark: #d14728;

    --home-red-soft:
        rgba(178, 32, 0, .13);

    --home-green: #63bd88;


    /* Studio editor */

    --studio-bg: #0d0a0a;
    --studio-surface: #171212;
    --studio-text: #f5efed;
    --studio-muted: #a39895;

    --studio-border:
        rgba(255, 238, 234, .085);

    --studio-border-strong:
        rgba(255, 238, 234, .15);

    --studio-red: #B22000;

    --studio-red-soft:
        rgba(178, 32, 0, .13);
}


/* ============================================================
   2. ОСНОВНОЙ ФОН
============================================================ */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .main {

    background:
        radial-gradient(
            circle at 82% -15%,
            rgba(178, 32, 0, .085),
            transparent 33rem
        ),
        #0d0a0a !important;

    color: #f5efed;
}


/* ============================================================
   3. ШАПКА
============================================================ */

html[data-theme="dark"] .topbar {

    border-bottom:
        1px solid rgba(255, 238, 234, .075) !important;

    background:
        rgba(13, 10, 10, .84) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.01) !important;

    -webkit-backdrop-filter:
        saturate(140%) blur(22px);

    backdrop-filter:
        saturate(140%) blur(22px);
}


html[data-theme="dark"]
.topbar .brand-name {

    color: #e34a2b !important;
}


html[data-theme="dark"]
.topbar .nav-links > a {

    color: #d8cfcc !important;
}


html[data-theme="dark"]
.topbar .nav-links > a:hover {

    color: #ffffff !important;
}


html[data-theme="dark"]
.topbar .nav-links > a.admin-link {

    color: #e15437 !important;
}


html[data-theme="dark"]
.topbar .btn-secondary {

    border-color:
        rgba(255,255,255,.11) !important;

    background:
        #1a1515 !important;

    color:
        #f5efed !important;
}


html[data-theme="dark"]
.topbar .btn-secondary:hover {

    border-color:
        rgba(229, 93, 65, .32) !important;

    background:
        #231b1a !important;
}


/* ============================================================
   4. ОСНОВНЫЕ КАРТОЧКИ
============================================================ */

html[data-theme="dark"] .card,
html[data-theme="dark"] .form-card {

    border-color:
        rgba(255,238,234,.085) !important;

    background:
        #171212 !important;

    color:
        #f5efed !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 18px 55px rgba(0,0,0,.16) !important;
}


html[data-theme="dark"] .card:hover {

    border-color:
        rgba(255,238,234,.13) !important;
}


/* ============================================================
   5. ФОРМЫ
============================================================ */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-card input,
html[data-theme="dark"] .form-card textarea,
html[data-theme="dark"] .form-card select {

    border-color:
        rgba(255,238,234,.12) !important;

    background:
        #141010 !important;

    color:
        #f5efed !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015) !important;
}


html[data-theme="dark"]
input::placeholder,

html[data-theme="dark"]
textarea::placeholder {

    color:
        #706562 !important;
}


html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {

    border-color:
        rgba(226, 82, 52, .60) !important;

    box-shadow:
        0 0 0 3px rgba(178,32,0,.13) !important;
}


/* ============================================================
   6. СТАНДАРТНЫЕ ВНУТРЕННИЕ БЛОКИ
============================================================ */

html[data-theme="dark"] .message,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .message-box,
html[data-theme="dark"] .question-prompt,
html[data-theme="dark"] .copy-field {

    border-color:
        rgba(255,238,234,.085) !important;

    background:
        #1a1515 !important;

    color:
        #ddd4d1 !important;
}


html[data-theme="dark"] .notification-item.unread {

    background:
        rgba(178,32,0,.095) !important;
}


html[data-theme="dark"] .chip,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .tag {

    border-color:
        rgba(255,238,234,.09) !important;

    background:
        #201919 !important;

    color:
        #b8adaa !important;
}


/* ============================================================
   7. ГЛАВНАЯ
============================================================ */

html[data-theme="dark"] .home-hero,
html[data-theme="dark"] .home-final {

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(178,32,0,.085),
            transparent 33rem
        ),
        #0d0a0a !important;
}


/* HERO */

html[data-theme="dark"]
.home-hero h1 {

    color:
        #f5efed !important;
}


html[data-theme="dark"]
.home-hero h1 span {

    color:
        #d13d1f !important;
}


html[data-theme="dark"]
.home-hero-copy > p {

    color:
        #aaa09d !important;
}


html[data-theme="dark"]
.home-button-primary {

    border-color:
        #B22000 !important;

    background:
        #B22000 !important;

    color:
        white !important;
}


html[data-theme="dark"]
.home-button-primary:hover {

    border-color:
        #ce3c1d !important;

    background:
        #ce3c1d !important;
}


html[data-theme="dark"]
.home-button-secondary {

    border-color:
        rgba(255,238,234,.13) !important;

    background:
        rgba(255,255,255,.035) !important;

    color:
        #eee6e3 !important;

    backdrop-filter:
        blur(14px);
}


html[data-theme="dark"]
.home-button-secondary:hover {

    border-color:
        rgba(226,91,62,.34) !important;

    background:
        rgba(255,255,255,.07) !important;
}


/* ДЕМО-КАБИНЕТ НА ГЛАВНОЙ */

html[data-theme="dark"] .home-product {

    border-color:
        rgba(255,238,234,.12) !important;

    background:
        #151111 !important;

    box-shadow:
        0 45px 110px rgba(0,0,0,.45),
        0 10px 30px rgba(0,0,0,.25) !important;
}


html[data-theme="dark"]
.home-product-topbar {

    border-color:
        rgba(255,238,234,.075) !important;

    background:
        #181313 !important;
}


html[data-theme="dark"]
.home-product-subject {

    border-color:
        rgba(255,238,234,.10) !important;

    background:
        #201919 !important;

    color:
        #a99d99 !important;
}


html[data-theme="dark"]
.home-product-sidebar {

    border-color:
        rgba(255,238,234,.075) !important;

    background:
        #100d0d !important;
}


html[data-theme="dark"]
.home-product-main {

    background:
        #171212 !important;
}


html[data-theme="dark"]
.home-result-card {

    border-color:
        rgba(255,238,234,.08) !important;

    background:
        #1c1717 !important;
}


html[data-theme="dark"]
.home-expert-card {

    background:
        #191414 !important;
}


/*
Бумагу в демонстрации намеренно не делаем угольно-чёрной.
Это физический "лист работы", поэтому он становится
тёплым молочным — выглядит как настоящий объект.
*/

html[data-theme="dark"]
.home-paper {

    border-color:
        rgba(255,245,240,.17) !important;

    background:
        repeating-linear-gradient(
            to bottom,
            #f4ece7 0,
            #f4ece7 25px,
            #d9cfca 26px
        ) !important;

    color:
        #302424 !important;

    box-shadow:
        0 15px 38px rgba(0,0,0,.32),
        inset 0 1px rgba(255,255,255,.6);
}

html[data-theme="dark"]
.home-expert-card > .home-result-label {
    color: #c9bbb6 !important;
}

html[data-theme="dark"]
.home-paper-line {
    background: #c9beba !important;
}

html[data-theme="dark"]
.home-paper-formula {
    color: #211817 !important;
}


/* FEATURES */

html[data-theme="dark"]
.home-feature-light {

    border-color:
        rgba(255,238,234,.09) !important;

    background:
        #171212 !important;
}


html[data-theme="dark"]
.home-feature-dark {

    border-color:
        rgba(255,238,234,.08) !important;

    background:
        #100d0d !important;
}


html[data-theme="dark"]
.home-feature-copy h2 {

    color:
        #f5efed !important;
}


html[data-theme="dark"]
.home-feature-copy p {

    color:
        #a39895 !important;
}


/* Иллюстрация проверки */

html[data-theme="dark"]
.home-review-sheet {

    border-color:
        rgba(255,255,255,.06) !important;

    background:
        #ede5e1 !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,.30) !important;
}


html[data-theme="dark"]
.home-review-sheet .home-sheet-caption {

    color:
        #746967 !important;
}


html[data-theme="dark"]
.home-review-sheet .home-sheet-line {

    background:
        #d4cac6 !important;
}


html[data-theme="dark"]
.home-review-sheet .home-sheet-equation {

    color:
        #322626 !important;
}


/* Список пробников */

html[data-theme="dark"]
.home-exam-row {

    border-color:
        rgba(255,238,234,.08) !important;

    color:
        #f2ebe8 !important;
}


html[data-theme="dark"]
.home-exam-row:hover {

    background:
        rgba(255,255,255,.035) !important;
}


html[data-theme="dark"]
.home-exam-type {

    background:
        #211919 !important;

    color:
        #d8cfcc !important;
}


/* ============================================================
   8. DASHBOARD
============================================================ */

html[data-theme="dark"]
.dashboard-ege-card {

    border-color:
        rgba(255,238,234,.09) !important;

    background:
        linear-gradient(
            145deg,
            #181313 0%,
            #141010 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 24px 70px rgba(0,0,0,.24) !important;
}


html[data-theme="dark"]
.dashboard-caption,

html[data-theme="dark"]
.dashboard-current-score > span,

html[data-theme="dark"]
.dashboard-current-score small,

html[data-theme="dark"]
.dashboard-score-summary span,

html[data-theme="dark"]
.dashboard-scale-note {

    color:
        #887c79 !important;
}


html[data-theme="dark"]
.dashboard-ege-header h2,

html[data-theme="dark"]
.dashboard-current-score strong,

html[data-theme="dark"]
.dashboard-score-summary b,

html[data-theme="dark"]
.dashboard-summary-grid .metric {

    color:
        #f5efed !important;
}


html[data-theme="dark"]
.dashboard-ege-header p {

    color:
        #a39895 !important;
}


/* Три метрики */

html[data-theme="dark"]
.dashboard-score-summary {

    border-color:
        rgba(255,238,234,.085) !important;

    background:
        rgba(255,255,255,.018);
}


html[data-theme="dark"]
.dashboard-score-summary > div {

    border-color:
        rgba(255,238,234,.075) !important;
}


/* Сам график */

html[data-theme="dark"]
.dashboard-chart-wrap {

    border-color:
        rgba(255,238,234,.085) !important;

    background:
        linear-gradient(
            180deg,
            #121010 0%,
            #0f0c0c 100%
        ) !important;
}


html[data-theme="dark"]
.dashboard-chart-grid {

    stroke:
        rgba(255,255,255,.075) !important;
}


html[data-theme="dark"]
.dashboard-chart-axis-label,

html[data-theme="dark"]
.dashboard-chart-date {

    fill:
        #827774 !important;
}


html[data-theme="dark"]
.dashboard-chart-point-label {

    fill:
        #eee5e2 !important;
}


html[data-theme="dark"]
.dashboard-chart-line {

    stroke:
        #c63012 !important;
}


html[data-theme="dark"]
.dashboard-chart-point {

    fill:
        #c63012 !important;

    stroke:
        #171212 !important;
}


html[data-theme="dark"]
.dashboard-chart-tooltip {

    border-color:
        rgba(255,238,234,.12) !important;

    background:
        rgba(30,24,24,.96) !important;

    color:
        #f5efed !important;

    box-shadow:
        0 18px 48px rgba(0,0,0,.42) !important;
}


html[data-theme="dark"]
.dashboard-chart-tooltip-grid small {

    color:
        #948985 !important;
}


html[data-theme="dark"]
.dashboard-chart-empty {

    border-color:
        rgba(255,238,234,.09) !important;

    background:
        #171212 !important;
}


html[data-theme="dark"]
.dashboard-chart-empty > span {

    color:
        #f5efed !important;
}


html[data-theme="dark"]
.dashboard-chart-empty p {

    color:
        #a39895 !important;
}


html[data-theme="dark"]
.dashboard-pending {

    background:
        #211a1a !important;

    color:
        #aaa09d !important;
}


/* ============================================================
   9. STUDIO / РЕДАКТОР ПРОБНИКОВ
============================================================ */

html[data-theme="dark"]
.studio-editor-minimal {

    --studio-bg: #0d0a0a;
    --studio-surface: #171212;
    --studio-text: #f5efed;
    --studio-muted: #a39895;

    --studio-border:
        rgba(255,238,234,.085);

    --studio-border-strong:
        rgba(255,238,234,.15);

    --studio-red: #B22000;

    --studio-red-soft:
        rgba(178,32,0,.13);
}


html[data-theme="dark"]
.studio-main-settings,

html[data-theme="dark"]
.question-editor-minimal {

    background:
        #171212 !important;

    box-shadow:
        0 20px 65px rgba(0,0,0,.20) !important;
}


html[data-theme="dark"]
.question-answer-panel,

html[data-theme="dark"]
.question-latex-preview,

html[data-theme="dark"]
.question-existing-render {

    border-color:
        rgba(255,238,234,.08) !important;

    background:
        #1d1716 !important;
}


html[data-theme="dark"]
.question-mode-options > div label,

html[data-theme="dark"]
.question-prompt-format-options > div label {

    border-color:
        rgba(255,238,234,.09) !important;

    background:
        #1a1515 !important;

    color:
        #e4dcda !important;
}


html[data-theme="dark"]
.question-manual-score {

    background:
        #261d1c !important;

    color:
        #e8dfdc !important;
}


/* ============================================================
   10. ПРОХОЖДЕНИЕ ПРОБНИКА
============================================================ */

html[data-theme="dark"]
.take-exam-page .question-plain-prompt {

    color:
        #e5ddda !important;
}


html[data-theme="dark"]
.take-exam-page .question-latex-render {

    border-radius:
        18px;
}


/*
SVG / PNG с напечатанным условием может быть рассчитан
на белый лист — его не инвертируем.
*/


/* ============================================================
   11. ТАБЛИЦЫ
============================================================ */

html[data-theme="dark"] table,
html[data-theme="dark"] .table {

    color:
        #e9e1de !important;
}


html[data-theme="dark"] table th,
html[data-theme="dark"] .table th {

    border-color:
        rgba(255,238,234,.08) !important;

    color:
        #8e827f !important;
}


html[data-theme="dark"] table td,
html[data-theme="dark"] .table td {

    border-color:
        rgba(255,238,234,.07) !important;

    color:
        #ddd4d1 !important;
}


html[data-theme="dark"]
table tbody tr:hover,

html[data-theme="dark"]
.table tbody tr:hover {

    background:
        rgba(255,255,255,.022) !important;
}


/* ============================================================
   12. FOOTER
============================================================ */

html[data-theme="dark"]
.footer {

    border-color:
        rgba(255,238,234,.07) !important;

    background:
        #090707 !important;

    color:
        #8f8380 !important;
}


html[data-theme="dark"]
.footer b,

html[data-theme="dark"]
.footer .brand {

    color:
        #e7dfdc !important;
}


html[data-theme="dark"]
.footer a {

    color:
        #9f9390 !important;
}


html[data-theme="dark"]
.footer a:hover {

    color:
        #e45a3d !important;
}


/* ============================================================
   13. СКРОЛЛБАР
============================================================ */

html[data-theme="dark"] {

    scrollbar-color:
        #3a2d2b #0d0a0a;
}


html[data-theme="dark"]
::-webkit-scrollbar {

    width: 11px;
    height: 11px;
}


html[data-theme="dark"]
::-webkit-scrollbar-track {

    background:
        #0d0a0a;
}


html[data-theme="dark"]
::-webkit-scrollbar-thumb {

    border:
        3px solid #0d0a0a;

    border-radius:
        999px;

    background:
        #3a2d2b;
}


html[data-theme="dark"]
::-webkit-scrollbar-thumb:hover {

    background:
        #513a36;
}


/* ============================================================
   14. ВЫДЕЛЕНИЕ ТЕКСТА
============================================================ */

html[data-theme="dark"]
::selection {

    background:
        rgba(178,32,0,.32);

    color:
        #ffffff;
}


/* ============================================================
   15. МОБИЛЬНАЯ НАВИГАЦИЯ
============================================================ */

@media (max-width: 820px) {

    html[data-theme="dark"]
    .nav-links.open {

        border-color:
            rgba(255,238,234,.10) !important;

        background:
            rgba(18,14,14,.98) !important;

        box-shadow:
            0 20px 55px rgba(0,0,0,.38) !important;
    }


    html[data-theme="dark"]
    .mobile-menu {

        border-color:
            rgba(255,238,234,.10) !important;

        background:
            #1c1616 !important;

        color:
            #eee6e3 !important;
    }
}



/* ============================================================
   arena-smart-system-theme-v3
   Light / System / Dark
============================================================ */

.arena-theme-control-v3 {
    position: relative;

    display: grid;
    grid-template-columns:
        repeat(3, 34px);

    width: 108px;
    height: 40px;

    padding: 2px;

    overflow: hidden;
}


.arena-theme-choice-v3 {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #8a7c7a;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        color 220ms ease,
        opacity 220ms ease,
        transform 180ms ease;
}


.arena-theme-choice-v3 svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.arena-theme-choice-v3:hover {
    color: #B22000;
}


.arena-theme-choice-v3:active {
    transform: scale(.88);
}


.arena-theme-choice-v3.is-active {
    color: #B22000;
}


.arena-theme-control-v3
.arena-theme-toggle-thumb {

    top: 3px;
    left: 3px;

    width: 32px;
    height: 32px;

    transform:
        translateX(0);
}


/* LIGHT */

html[data-theme-mode="light"]
.arena-theme-control-v3
.arena-theme-toggle-thumb {

    transform:
        translateX(0);
}


/* SYSTEM */

html[data-theme-mode="system"]
.arena-theme-control-v3
.arena-theme-toggle-thumb {

    transform:
        translateX(34px);
}


/* DARK */

html[data-theme-mode="dark"]
.arena-theme-control-v3
.arena-theme-toggle-thumb {

    transform:
        translateX(68px);
}


/*
В тёмной теме сам ползунок также тёмный,
но чуть светлее панели.
*/

html[data-theme="dark"]
.arena-theme-control-v3
.arena-theme-toggle-thumb {

    background:
        #2a2020;

    box-shadow:
        0 5px 15px rgba(0,0,0,.38),
        inset 0 0 0 1px
        rgba(255,255,255,.07);
}


html[data-theme="dark"]
.arena-theme-choice-v3 {

    color:
        #786b69;
}


html[data-theme="dark"]
.arena-theme-choice-v3:hover {

    color:
        #e46b51;
}


html[data-theme="dark"]
.arena-theme-choice-v3.is-active {

    color:
        #f3e9e6;
}


/*
SYSTEM получает небольшой фирменный акцент,
но без текста AUTO и без визуального шума.
*/

.arena-theme-system-v3::after {
    position: absolute;

    right: 5px;
    bottom: 5px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #B22000;

    content: "";

    opacity: 0;

    transform: scale(.5);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


html[data-theme-mode="system"]
.arena-theme-system-v3::after {

    opacity: 1;
    transform: scale(1);
}


/* Фокус с клавиатуры */

.arena-theme-choice-v3:focus-visible {

    outline:
        2px solid rgba(178,32,0,.48);

    outline-offset:
        -2px;
}


/* Плавающая версия */

.arena-theme-control-v3.is-floating {

    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9500;

    backdrop-filter:
        blur(18px);
}


@media (max-width: 720px) {

    .arena-theme-control-v3.is-floating {
        right: 14px;
        bottom: 14px;
    }

    .arena-theme-control-v3 {
        transform-origin:
            right center;
    }
}



/* ============================================================
   arena-premium-selection-v1
   Аккуратное выделение текста
============================================================ */


/*
Обычный текст остаётся выделяемым и копируемым.
Убираем тяжёлые бордовые прямоугольники.
*/

::selection {
    background: rgba(178, 32, 0, .16);
    color: inherit;
}

::-moz-selection {
    background: rgba(178, 32, 0, .16);
    color: inherit;
}


html[data-theme="dark"] ::selection {
    background: rgba(229, 91, 62, .22);
    color: #ffffff;
}

html[data-theme="dark"] ::-moz-selection {
    background: rgba(229, 91, 62, .22);
    color: #ffffff;
}


/* ============================================================
   ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ НЕ ДОЛЖНЫ ВЫДЕЛЯТЬСЯ
============================================================ */

.home-hero h1,
.home-hero .home-eyebrow,
.home-hero-badge,

.brand,
.brand-name,

.topbar nav,
.nav-links,

button,
.button,

.btn,
.btn-primary,
.btn-secondary,

.arena-theme-toggle,

.home-button-primary,
.home-button-secondary,

.chip,
.badge,
.tag {

    -webkit-user-select: none;
    user-select: none;
}


/*
Но обычный содержательный текст сайта,
который человеку реально может понадобиться скопировать,
оставляем доступным.
*/

p,
li,
td,
th,

.question-prompt,
.question-plain-prompt,
.question-latex-render,

.review-condition-card-v2,
.review-text-answer-v2,
.review-reference-paper-v4,
.review-solution-body-v2,

textarea,
input {

    -webkit-user-select: text;
    user-select: text;
}


/*
У картинок и UI также убираем случайное
синее/красное выделение при drag.
*/

img,
svg,
canvas {

    -webkit-user-select: none;
    user-select: none;

    -webkit-user-drag: none;
}


/*
Фокус клавиатуры при этом НЕ убираем.
Это отдельная вещь и нужна для accessibility.
*/



/* ============================================================
   arena-selection-system-v2

   Логика:
   — весь интерфейс по умолчанию НЕ выделяется;
   — выделение разрешено только у содержательного текста,
     который реально имеет смысл копировать.
============================================================ */


/* ============================================================
   1. ВЕСЬ UI ПО УМОЛЧАНИЮ НЕ ВЫДЕЛЯЕТСЯ
============================================================ */

html body,
html body * {
    -webkit-user-select: none !important;
    user-select: none !important;
}


/*
Заодно не даём браузеру случайно тащить картинки,
SVG и canvas как отдельные объекты.
*/

html body img,
html body svg,
html body canvas {
    -webkit-user-drag: none;
}


/* ============================================================
   2. ПОЛЯ ВВОДА — ВСЕГДА МОЖНО ВЫДЕЛЯТЬ
============================================================ */

html body input,
html body textarea,

html body [contenteditable="true"],
html body [contenteditable="true"] * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* ============================================================
   3. ЗАДАНИЯ / УСЛОВИЯ
============================================================ */

/* Прохождение пробника */

html body .question-prompt,
html body .question-prompt *,

html body .question-plain-prompt,
html body .question-plain-prompt *,

html body .question-latex-render,
html body .question-latex-render *,

html body .question-rendered,
html body .question-rendered * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* ============================================================
   4. СТРАНИЦА РЕЗУЛЬТАТА
============================================================ */

/* Написанный учеником ответ */

html body .result-list .question > p,
html body .result-list .question > p * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* Правильное решение */

html body .result-list .solution,
html body .result-list .solution * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* Комментарий проверяющего */

html body .result-list .notice,
html body .result-list .notice * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* ============================================================
   5. ЭКРАН ПРОВЕРКИ КУРАТОРА
============================================================ */

/* Условие */

html body .review-condition-card-v2,
html body .review-condition-card-v2 * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* Текст ответа ученика */

html body .review-text-answer-v2,
html body .review-text-answer-v2 * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* Эталонное решение */

html body .review-reference-paper-v4,
html body .review-reference-paper-v4 *,

html body .review-solution-body-v2,
html body .review-solution-body-v2 * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/*
Canvas, фото, toolbar, zoom и "Бля, забыл"
остаются полностью невыделяемыми.
*/


/* ============================================================
   6. ЧАТ С КУРАТОРОМ
============================================================ */

html body .bubble-text,
html body .bubble-text * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/*
Имя отправителя и время специально не включаем:
это элементы интерфейса, а не содержимое сообщения.
*/


/* ============================================================
   7. ЮРИДИЧЕСКИЕ ДОКУМЕНТЫ
============================================================ */

html body .legal-document,
html body .legal-document * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* ============================================================
   8. СПЕЦИАЛЬНЫЕ ТЕКСТОВЫЕ БЛОКИ
============================================================ */

html body .message-box,
html body .message-box *,

html body .copy-field,
html body .copy-field * {

    -webkit-user-select: text !important;
    user-select: text !important;
}


/* ============================================================
   9. ВЫДЕЛЕНИЕ В РАЗРЕШЁННЫХ МЕСТАХ
============================================================ */

/*
Не тёмный бордовый прямоугольник,
а лёгкое фирменное выделение.
*/

html body input::selection,
html body textarea::selection,

html body [contenteditable="true"]::selection,

html body .question-prompt::selection,
html body .question-prompt *::selection,

html body .question-plain-prompt::selection,
html body .question-plain-prompt *::selection,

html body .question-latex-render::selection,
html body .question-latex-render *::selection,

html body .question-rendered::selection,
html body .question-rendered *::selection,

html body .result-list .question > p::selection,
html body .result-list .question > p *::selection,

html body .result-list .solution::selection,
html body .result-list .solution *::selection,

html body .result-list .notice::selection,
html body .result-list .notice *::selection,

html body .review-condition-card-v2::selection,
html body .review-condition-card-v2 *::selection,

html body .review-text-answer-v2::selection,
html body .review-text-answer-v2 *::selection,

html body .review-reference-paper-v4::selection,
html body .review-reference-paper-v4 *::selection,

html body .review-solution-body-v2::selection,
html body .review-solution-body-v2 *::selection,

html body .bubble-text::selection,
html body .bubble-text *::selection,

html body .legal-document::selection,
html body .legal-document *::selection,

html body .message-box::selection,
html body .message-box *::selection,

html body .copy-field::selection,
html body .copy-field *::selection {

    background:
        rgba(178, 32, 0, .20) !important;

    color:
        inherit !important;
}


/* DARK */

html[data-theme="dark"]
body input::selection,

html[data-theme="dark"]
body textarea::selection,

html[data-theme="dark"]
body [contenteditable="true"]::selection,

html[data-theme="dark"]
body .question-prompt::selection,

html[data-theme="dark"]
body .question-prompt *::selection,

html[data-theme="dark"]
body .question-plain-prompt::selection,

html[data-theme="dark"]
body .question-plain-prompt *::selection,

html[data-theme="dark"]
body .question-latex-render::selection,

html[data-theme="dark"]
body .question-latex-render *::selection,

html[data-theme="dark"]
body .question-rendered::selection,

html[data-theme="dark"]
body .question-rendered *::selection,

html[data-theme="dark"]
body .result-list .question > p::selection,

html[data-theme="dark"]
body .result-list .question > p *::selection,

html[data-theme="dark"]
body .result-list .solution::selection,

html[data-theme="dark"]
body .result-list .solution *::selection,

html[data-theme="dark"]
body .result-list .notice::selection,

html[data-theme="dark"]
body .result-list .notice *::selection,

html[data-theme="dark"]
body .review-condition-card-v2::selection,

html[data-theme="dark"]
body .review-condition-card-v2 *::selection,

html[data-theme="dark"]
body .review-text-answer-v2::selection,

html[data-theme="dark"]
body .review-text-answer-v2 *::selection,

html[data-theme="dark"]
body .review-reference-paper-v4::selection,

html[data-theme="dark"]
body .review-reference-paper-v4 *::selection,

html[data-theme="dark"]
body .review-solution-body-v2::selection,

html[data-theme="dark"]
body .review-solution-body-v2 *::selection,

html[data-theme="dark"]
body .bubble-text::selection,

html[data-theme="dark"]
body .bubble-text *::selection,

html[data-theme="dark"]
body .legal-document::selection,

html[data-theme="dark"]
body .legal-document *::selection {

    background:
        rgba(222, 77, 47, .27) !important;

    color:
        #ffffff !important;
}


/* ============================================================
   10. FIREFOX
============================================================ */

html body input::-moz-selection,
html body textarea::-moz-selection,

html body .question-prompt::-moz-selection,
html body .question-prompt *::-moz-selection,

html body .question-plain-prompt::-moz-selection,
html body .question-plain-prompt *::-moz-selection,

html body .result-list .solution::-moz-selection,
html body .result-list .solution *::-moz-selection,

html body .review-condition-card-v2::-moz-selection,
html body .review-condition-card-v2 *::-moz-selection,

html body .review-text-answer-v2::-moz-selection,
html body .review-text-answer-v2 *::-moz-selection,

html body .review-reference-paper-v4::-moz-selection,
html body .review-reference-paper-v4 *::-moz-selection,

html body .bubble-text::-moz-selection,
html body .bubble-text *::-moz-selection,

html body .legal-document::-moz-selection,
html body .legal-document *::-moz-selection {

    background:
        rgba(178, 32, 0, .20) !important;

    color:
        inherit !important;
}



/* ============================================================
   arena-auth-input-premium-v1
   Премиальные тёмные поля для логина / регистрации
============================================================ */

html[data-theme="dark"] .form-card input[type="text"],
html[data-theme="dark"] .form-card input[type="email"],
html[data-theme="dark"] .form-card input[type="password"],
html[data-theme="dark"] .form-card input[type="search"],
html[data-theme="dark"] .form-card input[type="tel"],
html[data-theme="dark"] .form-card input[type="url"],
html[data-theme="dark"] .form-card textarea,
html[data-theme="dark"] .form-card select,

html[data-theme="dark"] .auth-card input[type="text"],
html[data-theme="dark"] .auth-card input[type="email"],
html[data-theme="dark"] .auth-card input[type="password"],
html[data-theme="dark"] .auth-card textarea,
html[data-theme="dark"] .auth-card select,

html[data-theme="dark"] .login-card input[type="text"],
html[data-theme="dark"] .login-card input[type="email"],
html[data-theme="dark"] .login-card input[type="password"],
html[data-theme="dark"] .login-card textarea,
html[data-theme="dark"] .login-card select {

    border: 1px solid rgba(255, 237, 233, .12) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            180deg,
            #191313 0%,
            #141010 100%
        ) !important;

    color: #f6efed !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 0 0 0 1px rgba(255,255,255,.01),
        0 6px 20px rgba(0,0,0,.08) !important;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}


html[data-theme="dark"] .form-card input::placeholder,
html[data-theme="dark"] .form-card textarea::placeholder,

html[data-theme="dark"] .auth-card input::placeholder,
html[data-theme="dark"] .auth-card textarea::placeholder,

html[data-theme="dark"] .login-card input::placeholder,
html[data-theme="dark"] .login-card textarea::placeholder {

    color: #8f8280 !important;
    opacity: 1 !important;
}


html[data-theme="dark"] .form-card input:hover,
html[data-theme="dark"] .form-card textarea:hover,
html[data-theme="dark"] .form-card select:hover,

html[data-theme="dark"] .auth-card input:hover,
html[data-theme="dark"] .auth-card textarea:hover,
html[data-theme="dark"] .auth-card select:hover,

html[data-theme="dark"] .login-card input:hover,
html[data-theme="dark"] .login-card textarea:hover,
html[data-theme="dark"] .login-card select:hover {

    border-color: rgba(255, 237, 233, .18) !important;
    background:
        linear-gradient(
            180deg,
            #1c1515 0%,
            #161111 100%
        ) !important;
}


html[data-theme="dark"] .form-card input:focus,
html[data-theme="dark"] .form-card textarea:focus,
html[data-theme="dark"] .form-card select:focus,

html[data-theme="dark"] .auth-card input:focus,
html[data-theme="dark"] .auth-card textarea:focus,
html[data-theme="dark"] .auth-card select:focus,

html[data-theme="dark"] .login-card input:focus,
html[data-theme="dark"] .login-card textarea:focus,
html[data-theme="dark"] .login-card select:focus {

    border-color: rgba(226, 82, 52, .68) !important;
    background:
        linear-gradient(
            180deg,
            #1a1414 0%,
            #151010 100%
        ) !important;

    box-shadow:
        0 0 0 4px rgba(178, 32, 0, .13),
        inset 0 1px 0 rgba(255,255,255,.03),
        0 10px 30px rgba(0,0,0,.16) !important;

    outline: none !important;
}


/* Чтобы Chrome не делал светлый/жёлтый autofill */

html[data-theme="dark"] .form-card input:-webkit-autofill,
html[data-theme="dark"] .form-card input:-webkit-autofill:hover,
html[data-theme="dark"] .form-card input:-webkit-autofill:focus,

html[data-theme="dark"] .auth-card input:-webkit-autofill,
html[data-theme="dark"] .auth-card input:-webkit-autofill:hover,
html[data-theme="dark"] .auth-card input:-webkit-autofill:focus,

html[data-theme="dark"] .login-card input:-webkit-autofill,
html[data-theme="dark"] .login-card input:-webkit-autofill:hover,
html[data-theme="dark"] .login-card input:-webkit-autofill:focus {

    -webkit-text-fill-color: #f6efed !important;

    -webkit-box-shadow:
        0 0 0px 1000px #151010 inset,
        0 0 0 1px rgba(255,255,255,.01) inset !important;

    transition: background-color 99999s ease-in-out 0s !important;

    border: 1px solid rgba(255, 237, 233, .12) !important;
}


/* Чуть приятнее подписи над полями */

html[data-theme="dark"] .form-card label,
html[data-theme="dark"] .auth-card label,
html[data-theme="dark"] .login-card label {

    color: #ddd3d0 !important;
    font-weight: 700 !important;
}


/* Если кнопки рядом — тоже чуть дороже выглядят */

html[data-theme="dark"] .form-card .btn-secondary,
html[data-theme="dark"] .auth-card .btn-secondary,
html[data-theme="dark"] .login-card .btn-secondary {

    background: #1a1515 !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #eee6e3 !important;
}



/* ============================================================
   arena-footer-always-dark-v1

   Footer Арены всегда тёмный независимо
   от выбранной темы сайта.
============================================================ */

footer,
.footer,
.site-footer {

    border-top:
        1px solid rgba(255, 255, 255, .075) !important;

    background:
        linear-gradient(
            180deg,
            #0d0b0b 0%,
            #090707 100%
        ) !important;

    color:
        #9e9290 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015);
}


/* Основной текст */

footer p,
.footer p,
.site-footer p,

footer span,
.footer span,
.site-footer span {

    color:
        #9e9290 !important;
}


/* Заголовки колонок */

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {

    color:
        #f4edeb !important;
}


/* Жирный текст */

footer strong,
footer b,

.footer strong,
.footer b,

.site-footer strong,
.site-footer b {

    color:
        #eee6e3 !important;
}


/* Ссылки */

footer a,
.footer a,
.site-footer a {

    color:
        #aaa09d !important;

    text-decoration: none;

    transition:
        color 150ms ease;
}


footer a:hover,
.footer a:hover,
.site-footer a:hover {

    color:
        #ffffff !important;
}


/* Название бренда */

footer .brand-name,
.footer .brand-name,
.site-footer .brand-name,

footer .brand,
.footer .brand,
.site-footer .brand {

    color:
        #f5efed !important;
}


/* Красный фирменный акцент остаётся красным */

footer .red,
.footer .red,
.site-footer .red,

footer .accent,
.footer .accent,
.site-footer .accent {

    color:
        #c63113 !important;
}


/*
Если внутри футера есть SVG-логотип,
не затемняем его темой.
*/

footer svg,
.footer svg,
.site-footer svg {

    opacity: 1;
}


/*
Dark mode не должен поверх этого
перекрашивать footer другими правилами.
*/

html[data-theme="light"] footer,
html[data-theme="light"] .footer,
html[data-theme="light"] .site-footer,

html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .site-footer {

    background:
        linear-gradient(
            180deg,
            #0d0b0b 0%,
            #090707 100%
        ) !important;

    color:
        #9e9290 !important;
}



/* ============================================================
   arena-plan-badge-v1
============================================================ */


/* ------------------------------------------------------------
   БЕЙДЖ ПОДПИСКИ В ШАПКЕ
------------------------------------------------------------ */

.topbar .brand-plan-badge {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    max-width: 150px;

    margin-left: 7px;
    padding: 0 10px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 999px;

    background:
        var(--plan-color, #B22000);

    color:
        var(--plan-text, #fff) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 3px 10px rgba(0,0,0,.12);

    font-size: 10px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: .07em;

    text-overflow: ellipsis;
    white-space: nowrap;

    vertical-align: middle;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}


.topbar .brand:hover .brand-plan-badge {
    transform: translateY(-1px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 5px 15px rgba(0,0,0,.16);
}


/*
Тема сайта на цвет тарифа не влияет.
*/

html[data-theme="light"]
.topbar .brand-plan-badge,

html[data-theme="dark"]
.topbar .brand-plan-badge {

    background:
        var(--plan-color, #B22000) !important;

    color:
        var(--plan-text, #fff) !important;
}


/* ------------------------------------------------------------
   HEX PICKER В STUDIO
------------------------------------------------------------ */

.plan-color-editor-v1 {
    display: grid;

    grid-template-columns:
        54px
        minmax(130px, 190px)
        minmax(120px, 1fr);

    align-items: center;

    gap: 10px;

    width: 100%;
}


.plan-color-picker-v1 {
    width: 54px !important;
    height: 48px !important;

    padding: 4px !important;

    border:
        1px solid rgba(128,110,107,.25) !important;

    border-radius:
        14px !important;

    background:
        transparent !important;

    cursor:
        pointer;
}


.plan-color-picker-v1::-webkit-color-swatch-wrapper {
    padding: 0;
}


.plan-color-picker-v1::-webkit-color-swatch {
    border: 0;
    border-radius: 9px;
}


.plan-color-picker-v1::-moz-color-swatch {
    border: 0;
    border-radius: 9px;
}


.plan-color-hex-v1 {
    min-width: 0;
    text-transform: uppercase;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}


.plan-color-preview-v1 {
    display: flex;
    align-items: center;

    min-height: 48px;

    padding: 7px 10px;

    border:
        1px solid rgba(128,110,107,.16);

    border-radius:
        15px;

    background:
        rgba(128,110,107,.045);
}


.plan-color-preview-badge-v1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;

    padding: 8px 12px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:
        999px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 4px 12px rgba(0,0,0,.10);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


@media (max-width: 700px) {

    .topbar .brand-plan-badge {
        max-width: 92px;

        min-height: 24px;

        margin-left: 4px;

        padding:
            0 8px;

        font-size:
            9px;
    }


    .plan-color-editor-v1 {
        grid-template-columns:
            52px
            1fr;
    }


    .plan-color-preview-v1 {
        grid-column:
            1 / -1;
    }
}



/* ============================================================
   arena-global-premium-fields-v1

   Единый вид всех обычных полей сайта в тёмной теме.
============================================================ */


/* ------------------------------------------------------------
   ОСНОВНЫЕ ПОЛЯ
------------------------------------------------------------ */

html[data-theme="dark"] body
input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):not(
    [type="color"]
):not(
    [type="range"]
):not(
    [type="file"]
):not(
    [type="submit"]
):not(
    [type="button"]
):not(
    [type="reset"]
),

html[data-theme="dark"] body textarea,

html[data-theme="dark"] body select {

    box-sizing: border-box;

    border:
        1px solid rgba(255, 237, 233, .11) !important;

    border-radius:
        16px !important;

    background:
        linear-gradient(
            180deg,
            #191414 0%,
            #141010 100%
        ) !important;

    color:
        #f5efed !important;

    caret-color:
        #e35234;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 0 0 0 1px rgba(255,255,255,.008),
        0 4px 16px rgba(0,0,0,.06) !important;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;

    color-scheme:
        dark;
}


/* ------------------------------------------------------------
   PLACEHOLDER
------------------------------------------------------------ */

html[data-theme="dark"] body
input:not([type="checkbox"]):not([type="radio"])::placeholder,

html[data-theme="dark"] body
textarea::placeholder {

    color:
        #847876 !important;

    opacity:
        1 !important;
}


/* ------------------------------------------------------------
   HOVER
------------------------------------------------------------ */

html[data-theme="dark"] body
input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):not(
    [type="color"]
):not(
    [type="range"]
):not(
    [type="file"]
):not(
    [type="submit"]
):not(
    [type="button"]
):not(
    [type="reset"]
):hover,

html[data-theme="dark"] body textarea:hover,

html[data-theme="dark"] body select:hover {

    border-color:
        rgba(255, 237, 233, .19) !important;

    background:
        linear-gradient(
            180deg,
            #1d1616 0%,
            #171111 100%
        ) !important;
}


/* ------------------------------------------------------------
   FOCUS
------------------------------------------------------------ */

html[data-theme="dark"] body
input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):not(
    [type="color"]
):not(
    [type="range"]
):not(
    [type="file"]
):not(
    [type="submit"]
):not(
    [type="button"]
):not(
    [type="reset"]
):focus,

html[data-theme="dark"] body textarea:focus,

html[data-theme="dark"] body select:focus {

    border-color:
        rgba(210, 62, 33, .72) !important;

    background:
        linear-gradient(
            180deg,
            #1b1414 0%,
            #151010 100%
        ) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 4px rgba(178, 32, 0, .12),
        inset 0 1px 0 rgba(255,255,255,.03),
        0 8px 24px rgba(0,0,0,.13) !important;
}


/* ------------------------------------------------------------
   AUTOFILL CHROME / EDGE
------------------------------------------------------------ */

html[data-theme="dark"] body
input:-webkit-autofill,

html[data-theme="dark"] body
input:-webkit-autofill:hover,

html[data-theme="dark"] body
input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        #f5efed !important;

    caret-color:
        #f5efed;

    -webkit-box-shadow:
        0 0 0 1000px #151010 inset !important;

    border:
        1px solid rgba(255, 237, 233, .11) !important;

    transition:
        background-color 999999s ease-in-out 0s;
}


/* ------------------------------------------------------------
   DISABLED
------------------------------------------------------------ */

html[data-theme="dark"] body
input:disabled:not([type="checkbox"]):not([type="radio"]),

html[data-theme="dark"] body textarea:disabled,

html[data-theme="dark"] body select:disabled {

    background:
        #120f0f !important;

    border-color:
        rgba(255,255,255,.06) !important;

    color:
        #716765 !important;

    opacity:
        .7;
}


/* ------------------------------------------------------------
   NUMBER
   Делаем нативные стрелки менее чужеродными.
------------------------------------------------------------ */

html[data-theme="dark"] body
input[type="number"] {

    color-scheme:
        dark;
}


/* ------------------------------------------------------------
   DATE / DATETIME
------------------------------------------------------------ */

html[data-theme="dark"] body
input[type="date"],

html[data-theme="dark"] body
input[type="datetime-local"],

html[data-theme="dark"] body
input[type="time"] {

    color-scheme:
        dark;
}


/* ------------------------------------------------------------
   SELECT OPTION
------------------------------------------------------------ */

html[data-theme="dark"] body
select option {

    background:
        #171212;

    color:
        #f5efed;
}


/* ------------------------------------------------------------
   TEXTAREA
------------------------------------------------------------ */

html[data-theme="dark"] body textarea {

    resize:
        vertical;
}


/* ------------------------------------------------------------
   STUDIO — немного усиливаем целостность формы
------------------------------------------------------------ */

html[data-theme="dark"] .studio-form label,
html[data-theme="dark"] .studio-card label,
html[data-theme="dark"] .studio-editor label {

    color:
        #d8cecb !important;
}


/*
HEX поле тарифа тоже должно совпадать
с остальными полями.
*/

html[data-theme="dark"]
.plan-color-hex-v1 {

    background:
        linear-gradient(
            180deg,
            #191414 0%,
            #141010 100%
        ) !important;

    color:
        #f5efed !important;
}


/*
Сам цветовой квадрат оставляем настоящей
палитрой — его не затемняем.
*/

html[data-theme="dark"]
.plan-color-picker-v1 {

    background:
        #171212 !important;

    border-color:
        rgba(255,255,255,.12) !important;
}

/* arena-command-deck-v1-active */
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
  min-height: 88px;
  padding: 10px 0;
  overflow: visible;
  border: 0 !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(207, 38, 12, .13), transparent 30%),
    linear-gradient(180deg, rgba(9, 7, 7, .97), rgba(9, 7, 7, .84)) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) saturate(145%);
}

.topbar::before {
  position: absolute;
  top: 0;
  left: 9%;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--az-red), transparent);
  box-shadow: 0 0 18px rgba(216, 42, 14, .75);
  content: "";
  pointer-events: none;
}

.topbar .nav {
  position: relative;
  width: min(calc(100% - 20px), 1440px) !important;
  min-height: 66px;
  gap: 10px;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(31, 25, 25, .9), rgba(16, 13, 13, .96)) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .045);
}

.topbar .nav::after {
  position: absolute;
  inset: auto 22px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 70, 38, .35), transparent);
  content: "";
  pointer-events: none;
}

.topbar .brand {
  min-width: max-content;
  padding: 0 13px 0 4px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.topbar .brand-logo {
  filter: drop-shadow(0 8px 18px rgba(216, 42, 14, .2));
  transition: filter .25s ease, transform .25s ease;
}

.topbar .brand:hover .brand-logo {
  filter: drop-shadow(0 8px 22px rgba(216, 42, 14, .48));
  transform: translateY(-1px) rotate(-2deg);
}

.topbar .exam-world-switch {
  min-height: 42px;
  gap: 3px;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 15px !important;
  background: rgba(0, 0, 0, .22) !important;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .25);
}

.topbar .exam-world-switch button {
  min-width: 47px;
  min-height: 34px;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--az-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.topbar .exam-world-switch button.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #ec3b18, #b51f08) !important;
  box-shadow: 0 6px 18px rgba(213, 42, 14, .3) !important;
}

.topbar .nav-links {
  flex: 1;
  justify-content: flex-end;
  gap: 2px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 16px;
  background: rgba(0, 0, 0, .16);
}

.topbar .nav-links > a:not(.button),
.topbar .nav-links > form > button {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: rgba(242, 235, 232, .67) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap;
  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.topbar .nav-links > a:not(.button)::after {
  display: none !important;
}

.topbar .nav-links > a:not(.button):hover,
.topbar .nav-links > a[aria-current="page"] {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(255, 73, 38, .17), rgba(255, 73, 38, .06)) !important;
  transform: translateY(-1px);
}

.topbar .nav-links > a[aria-current="page"] {
  box-shadow: inset 0 0 0 1px rgba(255, 83, 48, .28) !important;
}

.topbar .nav-links > a.admin-link {
  color: #ff6849 !important;
}

.topbar .nav-links > a.admin-link:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #d92d0b, #a91c06) !important;
}

.topbar .nav-links > .curator-queue-nav-v2 {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0 !important;
  flex: 0 0 40px;
  border: 1px solid rgba(255, 81, 46, .24) !important;
  border-radius: 12px !important;
  background: rgba(255, 66, 34, .07) !important;
  overflow: visible;
}

.topbar .nav-links > .curator-queue-nav-v2:hover {
  background: linear-gradient(135deg, #e13917, #a91c06) !important;
  border-color: transparent !important;
}

.curator-queue-nav-v2 > svg {
  width: 20px;
  height: 20px;
}

.curator-nav-live-count-v2 {
  top: -7px;
  right: -7px;
  border-color: #171111;
}

.topbar .nav-links > form:last-child {
  margin-left: 4px;
}

.topbar .nav-links > form:last-child > button {
  padding-inline: 17px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .055) !important;
}

.topbar .nav-links > form:last-child > button:hover {
  border-color: rgba(255, 82, 45, .4) !important;
  background: rgba(255, 70, 36, .12) !important;
}

.topbar .mobile-menu {
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}

@media (max-width: 1240px) and (min-width: 981px) {
  .topbar .nav {
    gap: 6px;
    padding-inline: 7px !important;
  }

  .topbar .brand {
    padding-right: 8px;
  }

  .topbar .nav-links > a:not(.button),
  .topbar .nav-links > form > button {
    padding-inline: 7px !important;
    font-size: 10px !important;
  }

  .topbar .nav-links > form:last-child > button {
    padding-inline: 12px !important;
  }
}

@media (max-width: 980px) {
  .topbar {
    min-height: 78px;
    padding: 8px 0;
  }

  .topbar .nav {
    width: calc(100% - 16px) !important;
    min-height: 60px;
    border-radius: 19px;
  }

  .topbar .brand {
    padding-right: 8px;
    border-right: 0;
  }

  .topbar .mobile-menu {
    display: grid;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
  }

  .topbar .nav-links {
    inset: 78px 8px 8px !important;
    padding: 24px !important;
    align-content: start;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    background:
      radial-gradient(circle at 100% 0%, rgba(211, 43, 15, .16), transparent 35%),
      rgba(12, 9, 9, .985) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .56);
  }

  .topbar .nav-links > a:not(.button),
  .topbar .nav-links > form > button {
    width: 100% !important;
    min-height: 54px;
    justify-content: flex-start;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-size: 19px !important;
  }

  .topbar .nav-links > a:not(.button) {
    margin-bottom: 3px;
  }

  .topbar .nav-links > .curator-queue-nav-v2 {
    width: 100% !important;
    min-width: 100%;
    height: 54px;
    justify-content: flex-start;
    gap: 12px;
  }

  .topbar .nav-links > .curator-queue-nav-v2::before {
    display: block;
    color: inherit;
    content: "Чаты кураторов";
    font-size: 19px;
    font-weight: 900;
  }

  .curator-nav-live-count-v2 {
    top: 9px;
    right: 10px;
  }

  .topbar .nav-links > form:last-child {
    width: 100%;
    margin: 10px 0 0;
  }
}

@media (max-width: 620px) {
  .topbar .brand-name {
    display: none !important;
  }

  .topbar .exam-world-switch button {
    min-width: 42px;
    padding-inline: 9px !important;
  }
}

/* arena-command-deck-light-v1 */
html[data-theme="light"] .topbar {
  background:
    radial-gradient(circle at 10% 0%, rgba(213, 44, 16, .07), transparent 32%),
    linear-gradient(180deg, rgba(250, 248, 247, .97), rgba(246, 243, 242, .9)) !important;
}

html[data-theme="light"] .topbar .nav {
  border-color: rgba(47, 34, 31, .11);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 245, 244, .96)) !important;
  box-shadow:
    0 18px 46px rgba(52, 37, 33, .12),
    inset 0 1px 0 #fff;
}

html[data-theme="light"] .topbar .nav::after {
  background: linear-gradient(90deg, transparent, rgba(207, 43, 14, .32), transparent);
}

html[data-theme="light"] .topbar .brand {
  border-right-color: rgba(48, 34, 31, .1);
}

html[data-theme="light"] .topbar .brand-name,
html[data-theme="light"] .topbar .brand-name-main {
  color: #191515 !important;
}

html[data-theme="light"] .topbar .brand-name-sub {
  color: #837673 !important;
}

html[data-theme="light"] .topbar .exam-world-switch {
  border-color: rgba(49, 35, 31, .1) !important;
  background: #f1edeb !important;
  box-shadow: inset 0 1px 5px rgba(45, 31, 28, .06);
}

html[data-theme="light"] .topbar .exam-world-switch button {
  color: #756965 !important;
}

html[data-theme="light"] .topbar .exam-world-switch button.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #e83b18, #bd240b) !important;
}

html[data-theme="light"] .topbar .nav-links {
  border-color: rgba(48, 34, 31, .085);
  background: rgba(237, 232, 230, .62);
}

html[data-theme="light"] .topbar .nav-links > a:not(.button),
html[data-theme="light"] .topbar .nav-links > form > button {
  color: #594d49 !important;
}

html[data-theme="light"] .topbar .nav-links > a:not(.button):hover,
html[data-theme="light"] .topbar .nav-links > a[aria-current="page"] {
  color: #1d1817 !important;
  background:
    linear-gradient(135deg, rgba(211, 45, 15, .12), rgba(211, 45, 15, .045)) !important;
}

html[data-theme="light"] .topbar .nav-links > a.admin-link {
  color: #c52c11 !important;
}

html[data-theme="light"] .topbar .nav-links > a.admin-link:hover {
  color: #fff !important;
}

html[data-theme="light"] .topbar .nav-links > .curator-queue-nav-v2 {
  border-color: rgba(202, 45, 17, .2) !important;
  background: rgba(210, 45, 15, .075) !important;
}

html[data-theme="light"] .topbar .nav-links > form:last-child > button {
  border-color: rgba(48, 34, 31, .12) !important;
  color: #302725 !important;
  background: rgba(255, 255, 255, .75) !important;
}

html[data-theme="light"] .topbar .nav-links > form:last-child > button:hover {
  border-color: rgba(201, 44, 16, .3) !important;
  color: #b8270e !important;
  background: #fff !important;
}

html[data-theme="light"] .curator-nav-live-count-v2 {
  border-color: #fff;
}

html[data-theme="light"] .topbar .mobile-menu {
  border-color: rgba(48, 34, 31, .12);
  color: #211b1a;
  background: rgba(255, 255, 255, .72);
}

@media (max-width: 980px) {
  html[data-theme="light"] .topbar .nav-links {
    border-color: rgba(48, 34, 31, .1);
    background:
      radial-gradient(circle at 100% 0%, rgba(211, 43, 15, .1), transparent 36%),
      rgba(251, 249, 248, .985) !important;
    box-shadow: 0 30px 80px rgba(52, 37, 33, .18);
  }

  html[data-theme="light"] .topbar .nav-links > a:not(.button),
  html[data-theme="light"] .topbar .nav-links > form > button {
    border-bottom-color: rgba(48, 34, 31, .08) !important;
    color: #211b1a !important;
  }
}