/* 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,255,255,.06) !important;

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

    color:
        #302424 !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.22);
}


/* 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-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;
}