/* ============================================================================ Тема «Тематическая» (data-ui-skin="zone") Второй облик интерфейса рядом с классическим. Классика остаётся ровно такой, какой была: 230 живых пользователей к ней привыкли, и менять вид без спроса нельзя. Всё, что здесь написано, действует ТОЛЬКО когда на стоит data-ui-skin="zone". Откуда взялся визуальный язык: с официальных сайтов игры. На stalzone.net заголовки набраны узким гротеском заглавными с крупным трекингом (Bebas Neue 80px / трекинг 8px), текст — Roboto, белый не чистый, а тёплый #ECE7E1 — цвет выгоревшей бумаги. На официальном статус-мониторе фон это фотография Зоны под сильным затемнением, а карточки полупрозрачные. Bebas Neue заменён на Oswald: у бесплатной версии Bebas нет кириллицы. Акцент — охра #C9822E. Янтарь занят конкурентом (у stalzoneauction.ru #c98500 — практически он же), а кислотно-зелёный спорил бы с зелёным цветом роста. ДОСТУПНОСТЬ — не украшение, а требование. Владелец проекта дальтоник, аудитория почти сплошь мужская (дальтонизм у ~8%). Поэтому: • направление цены НИКОГДА не держится на одном цвете — есть стрелка, знак и разная светлота (рост 0.56, падение 0.31); • красный заменён фиолетовым: красный с зелёным сливаются при дейтеранопии, самом частом типе; • все контрасты посчитаны по WCAG, а не подобраны на глаз. Минимум 4.5:1 для текста; значения указаны в комментариях у соответствующих правил. ========================================================================= */ @import url('/static/fonts/fonts.css'); /* ── Токены ────────────────────────────────────────────────────────────── Переопределяем те же переменные, что использует классическая тема, — поэтому большая часть интерфейса перекрашивается сама, без правки каждого правила. */ html[data-ui-skin="zone"] { --bg: #0B0B0C; /* Панели плотнее (.90 вместо .80) — это плата за более светлый фон между ними. Текст лежит на панелях, поэтому его контраст зависит от их плотности, а не от яркости кадра: приглушённый держит 5.0:1, охра 4.7:1 при норме 4.5. Фотография при этом работает в промежутках и по краям, где текста нет. */ --bg2: rgba(20,20,22,.90); --bg3: rgba(28,28,31,.92); --border: rgba(236,231,225,.10); --border2: rgba(236,231,225,.18); --text: #ECE7E1; /* тёплый белый, не #FFF */ --muted: #9C968E; /* 4.9:1 на панели — читается */ --accent: #C9822E; /* охра */ --green: #8FD4A2; /* рост: светлее падения */ --red: #A98BC4; /* падение: фиолетовый вместо красного */ --yellow: #D9B23F; --purple: #A98BC4; --shadow: 0 10px 30px rgba(0,0,0,.55); --tracking-caps: .12em; --radius: 4px; /* почти прямые углы: техника, не аппка */ color-scheme: dark; } /* ── Фотофон ───────────────────────────────────────────────────────────── Приём официального статус-монитора: фиксированный кадр на весь экран и сильное затемнение поверх. Затемнение слабее, чем у них (90/80/95): наш кадр — закат в тумане, он тёмный сам по себе, и под их градиентом от него не остаётся ничего. 66% в середине — самое светлое, при котором приглушённый текст в панелях держит 4.8:1, а охра 4.5:1. position:fixed, а не background-attachment:fixed — второй способ заметно тормозит прокрутку на телефонах и в Safari. */ html[data-ui-skin="zone"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: url('/static/zone-bg.webp') center / cover no-repeat; pointer-events: none; } html[data-ui-skin="zone"] body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Было 82/66/88 — на коротких страницах («Выгодные лоты» это 1129 px при экране 900) весь градиент виден разом, включая тёмные края, и страница выглядела заметно мрачнее длинной главной, где при прокрутке всё время видна светлая середина. Сняли по 10 пунктов: фон между панелями стал в полтора раза светлее (0.096 → 0.147 по яркости). Контраст при этом не пострадал — наоборот, вырос, потому что панели одновременно стали плотнее (см. --bg2). */ background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.48) 45%, rgba(11,11,12,.76) 100%); } html[data-ui-skin="zone"] body { background: var(--bg); font-family: 'Roboto', system-ui, -apple-system, sans-serif; } /* ── Базовый шрифт ─────────────────────────────────────────────────────── Правило со звёздочкой намеренно: в вёрстке, накопленной за год, десятки мест со своими шрифтами (Inter, JetBrains Mono, Segoe UI) — в модалках, тизерах, подсказках. Перечислять их поимённо бесполезно: аудит находил новые после каждой правки. Специфичность здесь минимальная (0-1-0), поэтому любое правило темы ниже с классом её перебивает — заголовки остаются Oswald, цены моноширинными. Работает это только потому, что тема подключена ПОСЛЕ стилей страницы: при равной специфичности побеждает тот, кто идёт последним. */ html[data-ui-skin="zone"] * { font-family: 'Roboto', system-ui, -apple-system, sans-serif; } /* Клавиши в окне горячих клавиш — моноширинные по смыслу, просто своим. */ html[data-ui-skin="zone"] .shortcut-key, html[data-ui-skin="zone"] kbd, html[data-ui-skin="zone"] code { font-family: 'Roboto Mono', ui-monospace, monospace; } /* ── Типографика ───────────────────────────────────────────────────────── Заголовки и любые управляющие подписи — Oswald заглавными с трекингом. Это фирменный приём официального сайта и то, чего нет ни у одного конкурента: у stalzone-monitor основной шрифт Poppins, у lunar-zone вообще системный Segoe UI. */ html[data-ui-skin="zone"] h1, html[data-ui-skin="zone"] h2, html[data-ui-skin="zone"] h3, html[data-ui-skin="zone"] .hdr-brand, html[data-ui-skin="zone"] .header-title, html[data-ui-skin="zone"] .stat-label, html[data-ui-skin="zone"] .quick-btn, html[data-ui-skin="zone"] .tab, html[data-ui-skin="zone"] th { font-family: 'Oswald', 'Roboto', sans-serif; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 500; } /* Числа — моноширинные с табличными цифрами: колонки цен не «пляшут». */ html[data-ui-skin="zone"] .stat-value, html[data-ui-skin="zone"] .price, html[data-ui-skin="zone"] td.num, html[data-ui-skin="zone"] .c-num { font-family: 'Roboto Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* Крупные показатели сводки набираем Oswald — он даёт нужный вес цифре. */ html[data-ui-skin="zone"] .stat-value { font-family: 'Oswald', sans-serif; letter-spacing: .02em; } /* ── Шапка: один вид на всех страницах ─────────────────────────────────── Историческая беда: шапка написана трижды, разными людьми и в разное время. Рынок использует .hdr-brand и .nav-btn, «Лоты» с «Историей» — .header-title и .back-link, а страницы, собираемые в коде (крафт, точность), — .brand и .nav a. Отсюда и разнобой: логотип то заглавными, то нет, пункты меню разного размера и регистра. Тема сводит все три набора к одному. Разметку при этом не трогаем: три шапки объединить в одну — отдельная работа, и делать её заодно с оформлением значит смешать два разных изменения. */ html[data-ui-skin="zone"] .hdr-brand, html[data-ui-skin="zone"] .header-title, html[data-ui-skin="zone"] .brand { font-family: 'Oswald', sans-serif !important; font-weight: 600 !important; font-size: 19px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--text) !important; text-decoration: none; } /* Пункты меню — единый размер, регистр и разрядка во всех трёх шапках. */ html[data-ui-skin="zone"] .nav-btn, html[data-ui-skin="zone"] .back-link, html[data-ui-skin="zone"] .nav a, html[data-ui-skin="zone"] .header-actions a { font-family: 'Oswald', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: .1em !important; text-transform: uppercase !important; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; } /* Активный пункт одинаково подсвечен везде. */ html[data-ui-skin="zone"] .nav-btn.active, html[data-ui-skin="zone"] .back-link.active, html[data-ui-skin="zone"] .nav a.active { color: var(--accent) !important; border-color: rgba(201,130,46,.45) !important; background: rgba(201,130,46,.14) !important; } /* Кнопка смены темы на страницах из кода задана инлайном — приводим к общему. */ html[data-ui-skin="zone"] .nav button[onclick*="toggleTheme"] { border-radius: var(--radius) !important; border-color: var(--border2) !important; background: transparent !important; color: var(--muted) !important; font-size: 13px !important; } /* Полоса состояния данных рядом с логотипом (только на рынке). */ html[data-ui-skin="zone"] .hdr-status { font-size: 11px; letter-spacing: .04em; color: var(--muted); } /* ── Поверхности ───────────────────────────────────────────────────────── Панели полупрозрачные, чтобы фотография читалась сквозь них, но плотные настолько, чтобы текст оставался в норме по контрасту. */ html[data-ui-skin="zone"] .header, html[data-ui-skin="zone"] .stat-card, html[data-ui-skin="zone"] .table-wrap, html[data-ui-skin="zone"] .filter-bar, html[data-ui-skin="zone"] .panel, html[data-ui-skin="zone"] .card { background: var(--bg2); border-color: var(--border); border-radius: var(--radius); backdrop-filter: blur(6px); } html[data-ui-skin="zone"] .header { background: rgba(11,11,12,.86); backdrop-filter: blur(10px); } /* ── Управляющие элементы ─────────────────────────────────────────────── На охряной кнопке надпись только тёмная: белая даёт 3.1:1 и не читается, тёмная — 6.0:1. */ html[data-ui-skin="zone"] .quick-btn, html[data-ui-skin="zone"] .header-btn, html[data-ui-skin="zone"] .page-btn { border-radius: var(--radius); border-color: var(--border2); font-size: 12px; } html[data-ui-skin="zone"] .quick-btn.active, html[data-ui-skin="zone"] .tab.active { color: var(--accent); border-color: rgba(201,130,46,.45); background: rgba(201,130,46,.14); } html[data-ui-skin="zone"] #premium-nav-btn { background: var(--accent); border-color: var(--accent); color: #14130A; font-weight: 500; } /* ── Таблица ───────────────────────────────────────────────────────────── Строки разделяются тонкой линией, а не заливкой: на фотографии чередование полос выглядит грязно. */ html[data-ui-skin="zone"] th { font-size: 11px; color: var(--muted); font-weight: 400; background: transparent; } html[data-ui-skin="zone"] td { border-bottom: 1px solid rgba(236,231,225,.05); } html[data-ui-skin="zone"] tr.item-row:hover td { background: rgba(236,231,225,.028); } /* ── Направление цены ──────────────────────────────────────────────────── Три признака вместо одного цвета (см. блок про доступность вверху). Стрелку добавляем через ::before, чтобы не трогать разметку и не ломать классическую тему. */ html[data-ui-skin="zone"] .signal.up::before, html[data-ui-skin="zone"] .fc-pill.up::before { content: '▲ '; } html[data-ui-skin="zone"] .signal.down::before, html[data-ui-skin="zone"] .fc-pill.down::before { content: '▼ '; } html[data-ui-skin="zone"] .signal.up, html[data-ui-skin="zone"] .fc-pill.up { color: var(--green); } html[data-ui-skin="zone"] .signal.down, html[data-ui-skin="zone"] .fc-pill.down { color: var(--red); } /* ── Элементы остальных страниц ───────────────────────────────────────── «Лоты», «История», профиль и подписка живут в отдельных шаблонах со своими классами. Переменные они берут общие, поэтому цвет подхватывается сам, а вот формы и шрифты приходится указывать явно. */ html[data-ui-skin="zone"] .chip, html[data-ui-skin="zone"] .back-link, html[data-ui-skin="zone"] .btn, html[data-ui-skin="zone"] .btn-primary, html[data-ui-skin="zone"] .f-group input, html[data-ui-skin="zone"] .f-group select { border-radius: var(--radius); } /* Круглые «пилюли» — язык мобильных приложений; тема держит прямые углы. */ html[data-ui-skin="zone"] .chip { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } html[data-ui-skin="zone"] .chip.on { color: var(--accent); border-color: rgba(201,130,46,.45); background: rgba(201,130,46,.14); } html[data-ui-skin="zone"] .back-link { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .1em; } html[data-ui-skin="zone"] .back-link:hover, html[data-ui-skin="zone"] .back-link.active { border-color: rgba(201,130,46,.5); color: var(--accent); background: rgba(201,130,46,.12); transform: none; /* без подпрыгивания: спокойнее и строже */ } html[data-ui-skin="zone"] .sum-card, html[data-ui-skin="zone"] .filters, html[data-ui-skin="zone"] .alerts-box, html[data-ui-skin="zone"] .panel { background: var(--bg2); border-color: var(--border); border-radius: var(--radius); backdrop-filter: blur(6px); } /* Цветная полоска сверху карточек — из классической темы; здесь она спорит с охряным акцентом и дробит композицию. */ html[data-ui-skin="zone"] .sum-card::before { display: none; } html[data-ui-skin="zone"] .sum-value { font-family: 'Oswald', sans-serif; font-weight: 500; letter-spacing: .02em; } html[data-ui-skin="zone"] .sum-label, html[data-ui-skin="zone"] .f-group label { font-family: 'Oswald', sans-serif; letter-spacing: .14em; } html[data-ui-skin="zone"] .page-head h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } /* ── Страница предмета ─────────────────────────────────────────────────── Самый насыщенный экран: график, сделки, стакан, витрина Premium. Классы здесь свои, поэтому формы и шрифты приходится перечислять явно — найдено аудитом (scripts/build_theme_preview.py + обход элементов). */ html[data-ui-skin="zone"] .item-header-btn, html[data-ui-skin="zone"] .item-toast, html[data-ui-skin="zone"] .item-chart-shell, html[data-ui-skin="zone"] .item-chart-skeleton, html[data-ui-skin="zone"] .chart-tip, html[data-ui-skin="zone"] .isb-cell, html[data-ui-skin="zone"] .gate-preview, html[data-ui-skin="zone"] .gate-preview-item, html[data-ui-skin="zone"] canvas { border-radius: var(--radius); } html[data-ui-skin="zone"] .item-header-btn { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .1em; } /* Числа стакана и сводки — тем же моноширинным, что и остальные цены. */ html[data-ui-skin="zone"] .isb-value, html[data-ui-skin="zone"] .isb-cell, html[data-ui-skin="zone"] .detail-num, html[data-ui-skin="zone"] .v, html[data-ui-skin="zone"] .val { font-family: 'Roboto Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* Кнопки и ссылки, у которых нет своего класса. */ html[data-ui-skin="zone"] a, html[data-ui-skin="zone"] button { border-radius: var(--radius) !important; } /* Формы не наследуют шрифт от body — это правило браузера, а не недосмотр вёрстки. Без явного inherit кнопки уезжают в Arial, а ссылки остаются на том, что задано в шаблоне (там местами Inter и JetBrains Mono). */ html[data-ui-skin="zone"] button, html[data-ui-skin="zone"] input, html[data-ui-skin="zone"] select, html[data-ui-skin="zone"] textarea, html[data-ui-skin="zone"] a { font-family: inherit; } /* Надзаголовок витрины Premium: моноширинный тут ни к чему, это не число. */ html[data-ui-skin="zone"] .premium-gate-kicker, html[data-ui-skin="zone"] .gate-btn { font-family: 'Oswald', sans-serif; letter-spacing: .1em; } /* График рисуется в canvas — скругление задаётся ему стилем страницы. */ html[data-ui-skin="zone"] canvas { border-radius: var(--radius) !important; } html[data-ui-skin="zone"] button.active { color: var(--accent); border-color: rgba(201,130,46,.45); background: rgba(201,130,46,.14); } /* ── Форма углов: общее правило ────────────────────────────────────────── Перечислять классы по одному бессмысленно: их сотни, и каждая страница приносит свои (только на «Крафте» аудит нашёл шестнадцать штук). Тема держит один радиус на весь интерфейс, поэтому задаём его разом. Элементы, которым круглая форма нужна по смыслу — индикаторы, аватары, переключатели, — перечислены исключениями ниже. Их немного, и они стабильны. */ html[data-ui-skin="zone"] div[class], html[data-ui-skin="zone"] section[class], html[data-ui-skin="zone"] aside[class], html[data-ui-skin="zone"] label[class], html[data-ui-skin="zone"] span[class], html[data-ui-skin="zone"] button[class], html[data-ui-skin="zone"] a[class], html[data-ui-skin="zone"] form[class], html[data-ui-skin="zone"] b[class], html[data-ui-skin="zone"] input, html[data-ui-skin="zone"] select, html[data-ui-skin="zone"] textarea, html[data-ui-skin="zone"] table, html[data-ui-skin="zone"] img { /* !important здесь осознанно. Тема — верхний слой поверх готовой вёрстки, накопленной за год, где встречаются и вложенные селекторы, и правила с идентификаторами. Без него приходится угадывать специфичность каждого частного случая и дописывать правила бесконечно — аудит показывал по одному-двум недобитым элементам на каждой странице после каждой правки. */ border-radius: var(--radius) !important; } /* Круглыми остаются только те, где это несёт смысл. */ html[data-ui-skin="zone"] .pulse, html[data-ui-skin="zone"] .dot, html[data-ui-skin="zone"] .avatar, html[data-ui-skin="zone"] .user-avatar, html[data-ui-skin="zone"] [class*="badge-dot"], html[data-ui-skin="zone"] [class*="spinner"], html[data-ui-skin="zone"] [class*="switch"]::after { border-radius: 999px !important; } /* Иконки предметов из каталога игры — их вид тема не меняет. */ html[data-ui-skin="zone"] img.item-icon { border-radius: 2px; } /* Надзаголовки разделов: моноширинный тут не к месту, это не число. */ html[data-ui-skin="zone"] .kicker { font-family: 'Oswald', sans-serif; letter-spacing: .16em; } /* Мелкие подписи и выделения, которым в старой вёрстке достались чужие шрифты (Inter, JetBrains Mono). ВАЖНО: именно 'Roboto', а не inherit. Наследование тянет шрифт от родителя, а он-то как раз и задан Inter — от такой «починки» ничего не меняется. Поймано на живой проверке: правило применялось, селектор совпадал, а шрифт оставался прежним. */ html[data-ui-skin="zone"] span.k, html[data-ui-skin="zone"] .hdr-menu, html[data-ui-skin="zone"] .hdr-menu-row, html[data-ui-skin="zone"] .hdr-menu-row span, html[data-ui-skin="zone"] .hdr-status, html[data-ui-skin="zone"] .hdr-status span, html[data-ui-skin="zone"] b { font-family: 'Roboto', system-ui, sans-serif !important; } /* Бирюза в акцентных выделениях внутри текста. */ html[data-ui-skin="zone"] b, html[data-ui-skin="zone"] .accent, html[data-ui-skin="zone"] .hl { color: var(--accent); } /* …но не там, где выделение просто усиливает обычный текст. */ html[data-ui-skin="zone"] p b, html[data-ui-skin="zone"] li b, html[data-ui-skin="zone"] .proof-txt b, html[data-ui-skin="zone"] td b { color: var(--text); } /* ── Профиль и подписка ────────────────────────────────────────────────── Единственная страница, где цвета вписаны прямо в правила, а не взяты из переменных: бирюза у бейджей и фиолетовый у Premium. Поэтому сама она не перекрашивается и требует явных переопределений. Фиолетовый тут важен отдельно: в теме этот цвет занят падением цены. Если оставить его на кнопке Premium, рядом окажутся два разных смысла в одном цвете — а у нас цвет и так несёт нагрузку для тех, кто различает не все оттенки. */ html[data-ui-skin="zone"] .profile-badge, html[data-ui-skin="zone"] .referral-code-pill, html[data-ui-skin="zone"] .referral-step-num, html[data-ui-skin="zone"] .profile-mini-btn { color: var(--accent); border-color: rgba(201,130,46,.42); background: rgba(201,130,46,.12); } html[data-ui-skin="zone"] .btn-premium, html[data-ui-skin="zone"] a.btn-premium { background: var(--accent); border-color: var(--accent); color: #14130A; /* тёмная надпись: белая на охре даёт 3.1:1 */ font-family: 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase; } html[data-ui-skin="zone"] .plan.premium { border-color: rgba(201,130,46,.45); box-shadow: 0 0 0 1px rgba(201,130,46,.14); } html[data-ui-skin="zone"] .profile-action-kicker, html[data-ui-skin="zone"] .profile-kicker, html[data-ui-skin="zone"] .profile-badge, html[data-ui-skin="zone"] .profile-note { font-family: 'Oswald', sans-serif; letter-spacing: .12em; } /* Кнопка оплаты и выгодный тариф были зелёными. В теме зелёный означает рост цены — держать им ещё и «выгоду» значит размыть единственный цвет, на который человек ориентируется в таблице. Отдаём их акценту. */ html[data-ui-skin="zone"] .pay-btn, html[data-ui-skin="zone"] a.pay-btn { background: var(--accent) !important; border-color: var(--accent) !important; color: #14130A !important; } html[data-ui-skin="zone"] .plan-offer { color: var(--accent); border-color: rgba(201,130,46,.35); background: rgba(201,130,46,.10); } /* ── Иконки вместо эмодзи ─────────────────────────────────────────────── Эмодзи остаются в разметке нетронутыми: классическое оформление должно выглядеть ровно так, как выглядело. Рядом с каждым лежит SVG, и тема меняет местами, что показано. Почему вообще: 🔔 💼 ☀ рендерятся по-разному в Windows, macOS и Android, у них свой цвет и своя оптическая плотность — рядом с текстом они всегда выглядят инородно. SVG наследует цвет текста и живёт в одном весе линии со всем остальным. */ .ic-svg { display: none; } html[data-ui-skin="zone"] .ic-emoji { display: none; } html[data-ui-skin="zone"] .ic-svg { display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ── Цвета, вписанные прямо в разметку ─────────────────────────────────── Несколько мест задают цвет инлайном (предупреждение «данные устарели», зелёная кнопка входа, бирюзовые счётчики). Переменные их не достают, поэтому ловим по самому значению. Красный тут отдельно важен: в теме он означает падение цены и заменён фиолетовым. Оставлять красным ещё и предупреждения — значит вернуть ту самую пару красный/зелёный, которая сливается при дальтонизме. Отдаём предупреждениям жёлтый: он различим при всех типах. */ html[data-ui-skin="zone"] [style*="#f85149"], html[data-ui-skin="zone"] [style*="#F85149"] { color: var(--yellow) !important; } html[data-ui-skin="zone"] [style*="#3fb950"], html[data-ui-skin="zone"] [style*="#3FB950"], html[data-ui-skin="zone"] .bestdeals-cta { color: var(--accent) !important; border-color: rgba(201,130,46,.45) !important; } html[data-ui-skin="zone"] [style*="#00d4ff"], html[data-ui-skin="zone"] [style*="#00D4FF"] { color: var(--accent) !important; } /* Цвета встречаются и в записи rgb(), не только шестнадцатеричной. */ html[data-ui-skin="zone"] [style*="rgb(0, 212, 255)"], html[data-ui-skin="zone"] [style*="rgb(0,212,255)"] { color: var(--accent) !important; } html[data-ui-skin="zone"] [style*="rgb(248, 81, 73)"], html[data-ui-skin="zone"] [style*="rgb(248,81,73)"] { color: var(--yellow) !important; } html[data-ui-skin="zone"] [style*="rgb(63, 185, 80)"], html[data-ui-skin="zone"] [style*="rgb(63,185,80)"] { color: var(--green) !important; } /* Шрифты, заданные прямо в теге: перебить их можно только важностью. */ html[data-ui-skin="zone"] [style*="JetBrains"] { font-family: 'Roboto Mono', ui-monospace, monospace !important; } html[data-ui-skin="zone"] [style*="Inter"], html[data-ui-skin="zone"] [style*="Segoe"] { font-family: 'Roboto', system-ui, sans-serif !important; } /* ── Мелочи ─────────────────────────────────────────────────────────────── */ html[data-ui-skin="zone"] ::selection { background: rgba(201,130,46,.32); color: var(--text); } html[data-ui-skin="zone"] .ic-svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }