/* «Реактор» — тема по референсу владельца (build.nvidia.com), 31.08.2026.

   Самая тёмная тема пульта и единственная, где глубину держит НЕ тень, а
   рамка: на графите #0C0C0C тень невидима физически — под ней тот же чёрный.
   Отсюда три приметы языка, снятые прямо со страницы референса:

     — лист почти чёрный, карточка на один шаг светлее и обведена волоском;
     — кислотный лайм #76B900 работает ТОЛЬКО акцентом: рамка кнопки, чип,
       значок, «где я». Заливка лаймом — одна первичная кнопка на экран;
     — скругления маленькие: 8px карточка, 4px контрол (у остальных тем 12–14).

   Про буквы. У референса свой NVIDIA Sans — нейтральный узкий гротеск. Ближе
   всего из уже вшитых в пульт — 'Inter' (он и стоит в теле), поэтому в этой
   теме заголовки переводим с 'Plus Jakarta Sans' на него же: жакарта круглее и
   мягче, рядом с графитом читается «детской» и ломает язык референса.

   Про зелёный. Лайм занят брендом, поэтому «успех» переехал на изумруд
   #00BB7F из той же палитры референса. Если бы оба были лаймовыми, светофор
   сборки слился бы с кнопками и «где я», и экран потерял бы навигацию.

   Замеры контраста на карточке #0E0E0E (порог 4,5 для текста):
   белый 19,2 · --muted 8,5 · --faint 5,95 · лайм 7,9 · изумруд 7,6 ·
   янтарь 8,97 · красный 5,5 · циан 10,5. Чернила --ink на заливках: 5,6–10,9.

   🔴 Файл подключается ПОСЛЕ style.css/mobile.css — спор одинаковых по силе
   правил решает порядок. */

html.theme-reaktor{
  /* Плоскости. Лист графитовый, карточка на шаг светлее, вторая плоскость
     (зебра, поля, наведение) — ещё на шаг. Разница мала намеренно: у референса
     карточку от фона отделяет рамка, а не подложка. */
  --bg:#0C0C0C;--surface:#0C0C0C;--surface2:#181818;
  /* Рамка карточки 1,3:1 — работа геометрическая, не контрастная. Кромка
     контрола (--border2) вдвое ярче: её человек должен видеть, а не угадывать. */
  --border:rgba(255,255,255,.20);--border2:rgba(255,255,255,.34);
  --text:#FFFFFF;--muted:#ADADAD;--faint:#8F8F8F;
  /* Акцент. --ink графитовый: белый по лайму даёт 2,4 — на кнопке это нечитаемо,
     поэтому у референса текст на зелёном тоже чёрный. */
  --brand:#76B900;--brand-soft:rgba(118,185,0,.14);--ink:#0C0C0C;
  --green:#00BB7F;--green-soft:rgba(0,187,127,.14);
  --amber:#F99C00;--amber-soft:rgba(249,156,0,.14);
  --red:#FE3F3F;--red-soft:rgba(254,63,63,.15);
  --teal:#00D2EF;--teal-soft:rgba(0,210,239,.13);
  /* Геометрия референса: 8 / 4. Это самая «строгая» тема набора. */
  --r:8px;--r-sm:4px;
  /* Тень оставлена только для всплывающих слоёв — им нужно оторваться от листа.
     На карточках она снята явно ниже: на графите это грязь, а не глубина. */
  --shadow:0 2px 4px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.5);
  --btn-hover-filter:brightness(1.12);
}

html.theme-reaktor,html.theme-reaktor input,html.theme-reaktor select,
html.theme-reaktor textarea{color-scheme:dark}
html.theme-reaktor body{background:var(--bg)}
/* Заголовки — тем же гротеском, что и тело (см. шапку файла), с плотным
   трекингом: у референса крупный заголовок собран, а не разрежен. */
html.theme-reaktor h1,html.theme-reaktor h2,html.theme-reaktor h3,
html.theme-reaktor .topbar h1,html.theme-reaktor .page-h2,
html.theme-reaktor .card-title,html.theme-reaktor .kpi-val,
html.theme-reaktor .auth-title,html.theme-reaktor .action-title{
  font-family:'Inter',system-ui,-apple-system,sans-serif;letter-spacing:-.02em;
}
/* Заголовки у референса приглушены до #E0E0E0 — чистый белый оставлен телу.
   Разница в один шаг, но именно она отделяет «шапку блока» от его содержимого
   (замер: 14,6 к карточке — выше порога с запасом). */
html.theme-reaktor h1,html.theme-reaktor h2,html.theme-reaktor h3,
html.theme-reaktor .page-h2,html.theme-reaktor .card-title,html.theme-reaktor .action-title{
  color:#E0E0E0;
}

/* ── Фон ────────────────────────────────────────────────────
   Косой градиент лайм→голубой на 12 % — ровно тот, что лежит у референса
   (`linear-gradient(80.22deg,#BFF230,#7CD7FE)`, снят со страницы), плюс зелёное
   зарево над шапкой, как у него же.

   Про «искры» на фоне. Chrome разбивает такой градиент дизерингом, и на графите
   он читается мелкой зелёной крапой. Сперва я счёл это грязью и снял слой —
   ошибка: у самого build.nvidia.com крапа ровно та же и является частью вида
   (сверено скриншотом референса 31.08). Слой возвращён по решению владельца. */
html.theme-reaktor .aurora-bg{
  opacity:1;
  background:
    radial-gradient(760px 460px at 2% -12%,rgba(118,185,0,.24),rgba(118,185,0,.09) 44%,transparent 72%),
    linear-gradient(80.22deg,rgba(191,242,48,.12) 1.49%,rgba(124,215,254,.12) 99.95%),
    #0C0C0C;
}
html.theme-reaktor .aurora-bg .ga{background:transparent}

/* ── Шапка ──────────────────────────────────────────────────
   Референс не отделяет её ни тенью, ни стеклом — только волоском. Блюр снимаем
   явно: полупрозрачная плёнка поверх графита даёт грязно-серый, а не «стекло». */
html.theme-reaktor .nv-head{
  background:#0C0C0C;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--border);box-shadow:none;
}
/* Активный домен подчёркнут лаймом, а не залит: заливка в этом языке значит
   «кнопка», а раздел меню — не кнопка. */
html.theme-reaktor .nv-dom.is-on{background:transparent;color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)}
html.theme-reaktor .nv-dom:hover{background:var(--hover);color:var(--text)}
html.theme-reaktor .nv-logo-erp{letter-spacing:.02em}
/* Поиск — чёрное поле в рамке (у референса он именно обведён, а не залит). */
/* Поиск в шапке — поле на ступень СВЕТЛЕЕ шапки, а не чёрная дыра в ней:
   чистый #000 на графите читается провалом, особенно на телефоне, где поле
   занимает половину строки. */
html.theme-reaktor .nv-search{
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-sm);
}
html.theme-reaktor .nv-search:focus-within{border-color:var(--brand)}
html.theme-reaktor .topbar{background:#0C0C0C;border-bottom:1px solid var(--border)}

/* ── Колонка разделов ───────────────────────────────────────
   Тот же графит, что лист: у референса левая панель не отделена подложкой.
   «Где я» — плашка второй плоскости с лаймовой полосой (полоса уже нарисована
   базовым ::before, ей достаточно цвета). */
html.theme-reaktor .nv-side{
  background:#0C0C0C;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-right:1px solid var(--border);
}
html.theme-reaktor .nv-item{border-radius:var(--r-sm)}
html.theme-reaktor .nv-item.is-on{background:var(--surface2);color:var(--text);box-shadow:none;font-weight:600}
html.theme-reaktor .nv-item.is-on::before{background:var(--brand)}
html.theme-reaktor .nv-item.is-on .nv-item-ico{color:var(--brand)}
html.theme-reaktor .nv-item:hover{background:var(--hover)}
html.theme-reaktor .nv-sec,html.theme-reaktor .nv-sec-btn{letter-spacing:.06em;text-transform:uppercase}

/* ── Карточки: рамка вместо тени ────────────────────────────
   Главное правило языка. Тень снимаем явно — базовая из style.css осталась бы
   грязным пятном под карточкой. Наведение зажигает лаймовую рамку: это и есть
   единственный «живой» жест темы, взятый с карточек моделей референса.
   Подъёма (translateY) у него нет — карточки стоят на месте. */
html.theme-reaktor .card,html.theme-reaktor .kpi,html.theme-reaktor .action{
  border:1px solid var(--border);box-shadow:none;border-radius:var(--r);
  background:var(--surface);
}
html.theme-reaktor .card:hover,html.theme-reaktor .action:hover{
  transform:none;border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(118,185,0,.25);
}
html.theme-reaktor .action{transition:border-color .18s ease,box-shadow .18s ease}
html.theme-reaktor .card-head{background:transparent;border-bottom:1px solid var(--border)}
html.theme-reaktor .action.primary{
  border-color:rgba(118,185,0,.45);background:linear-gradient(180deg,rgba(118,185,0,.07),transparent 60%),var(--surface);
}
/* Значки карточек — квадраты со скруглением языка, а не «таблетки» 9–11px. */
html.theme-reaktor .kpi-ico{border-radius:var(--r-sm)}
html.theme-reaktor .action-ico{border-radius:var(--r-sm)}
html.theme-reaktor .kpi-val{letter-spacing:-.03em}

/* ── Кнопки и чипы ──────────────────────────────────────────
   Первичная — лаймовая заливка с графитовыми чернилами (одна на экран).
   Вторичная (.ghost) у референса прозрачная с лаймовой кромкой и белым словом:
   «More Models», «View Skills». Базовый .ghost красит кромку в --border2 —
   переопределяем, иначе вторичное действие перестаёт читаться действием. */
/* 🔴 Заливка — только настоящим кнопкам-действиям: классу .btn и голым <button>
   без собственного класса (формы). Служебная мелочь таблиц носит свои классы
   (.gm-toggle, .gm-pen, .gm-cp-go…) и красится своими правилами — правило темы
   перебивало их по специфичности и заливало лаймом 215 микрокнопок на одном
   экране товаров (замер на рендере /m/goods). */
html.theme-reaktor .main .btn,html.theme-reaktor .main button:not([class]){
  border-radius:var(--r-sm);font-weight:700;
  background:var(--brand);color:var(--ink);box-shadow:none;
}
html.theme-reaktor .main .btn:hover,html.theme-reaktor .main button:not([class]):hover{
  filter:var(--btn-hover-filter);background:var(--brand);color:var(--ink);
}
/* Цветные кнопки остаются заливными: их на экране единицы, и цвет там несёт
   смысл («удалить», «включить»), а не иерархию. */
html.theme-reaktor .main .btn.danger,html.theme-reaktor .main button.danger:not(.gm-toggle){background:var(--red);color:var(--ink);box-shadow:none}
html.theme-reaktor .main .btn.success,html.theme-reaktor .main button.success:not(.gm-toggle){background:var(--green);color:var(--ink);box-shadow:none}
html.theme-reaktor .main .btn.danger:hover,html.theme-reaktor .main button.danger:hover{filter:brightness(1.12);background:var(--red)}
html.theme-reaktor .main .btn.success:hover,html.theme-reaktor .main button.success:hover{filter:brightness(1.12);background:var(--green)}
html.theme-reaktor .main .btn.ghost,html.theme-reaktor .main button.ghost{
  background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(118,185,0,.55);
}
html.theme-reaktor .main .btn.ghost:hover,html.theme-reaktor .main button.ghost:hover{
  background:rgba(118,185,0,.12);color:var(--text);box-shadow:inset 0 0 0 1px var(--brand);
}
/* Чип — пилюля из кромки и слова, без заливки: так набраны ярлыки моделей
   («mixture-of-experts», «agent»). Цветные варианты берут свой цвет в кромку. */
html.theme-reaktor .chip{
  background:transparent;border:1px solid var(--border2);color:var(--muted);font-weight:500;
}
html.theme-reaktor .chip.brand{color:var(--brand);border-color:rgba(118,185,0,.5);background:transparent}
html.theme-reaktor .chip.green,html.theme-reaktor .chip.ok{color:var(--green);border-color:rgba(0,187,127,.5);background:transparent}
html.theme-reaktor .chip.amber,html.theme-reaktor .chip.warn{color:var(--amber);border-color:rgba(249,156,0,.5);background:transparent}
html.theme-reaktor .chip.red{color:var(--red);border-color:rgba(254,63,63,.5);background:transparent}
html.theme-reaktor .chip.teal{color:var(--teal);border-color:rgba(0,210,239,.5);background:transparent}
/* Бейдж смены остаётся заливным — он читается как индикатор, а не как ярлык. */
html.theme-reaktor .badge.off-shift{background:var(--surface2);color:var(--muted)}

/* Пилюли-счётчики лент (ФБС, волны): наведение базово нарисовано чёрной тенью —
   на графите это ничто. Отзыв даёт кромка, тем же жестом, что у карточек. */
html.theme-reaktor .pill{background:var(--surface);border-color:var(--border2)}
html.theme-reaktor .pill:hover{box-shadow:inset 0 0 0 1px var(--brand);border-color:var(--brand)}
html.theme-reaktor .pill b{background:var(--surface2)}
html.theme-reaktor .pill-row .pill.mute{border-color:var(--border)}

/* ── Таблицы ────────────────────────────────────────────────
   Зебры у референса нет: строки делит волосок темнее рамки карточки — на
   графите обычный --border рябил бы решёткой на длинном списке. Шапка —
   мелкие серые прописные. */
html.theme-reaktor .tbl th{
  color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;font-weight:600;
  border-bottom:1px solid var(--border);
}
html.theme-reaktor .tbl tbody td{border-bottom:1px solid #1E1E1E}
html.theme-reaktor .tbl tbody tr:nth-of-type(even) td{background:transparent}
html.theme-reaktor .tbl tbody tr:hover td{background:#151515}
html.theme-reaktor .tbl tbody tr.cell-band td{background:var(--surface2)}

/* ── Поля ввода ─────────────────────────────────────────────
   Перечень типов повторяет style.css целиком: урезанный оставлял бы
   email/password/time на чужом фоне — серые окна в форме входа. */
html.theme-reaktor input:not([type]),html.theme-reaktor input[type=text],
html.theme-reaktor input[type=email],html.theme-reaktor input[type=password],
html.theme-reaktor input[type=number],html.theme-reaktor input[type=search],
html.theme-reaktor input[type=date],html.theme-reaktor input[type=datetime-local],
html.theme-reaktor input[type=time],html.theme-reaktor select,html.theme-reaktor textarea{
  background:var(--surface2);border-color:var(--border2);color:var(--text);border-radius:var(--r-sm);
}
html.theme-reaktor input::placeholder,html.theme-reaktor textarea::placeholder{color:var(--faint)}
/* 🔴 Поле поиска в шапке — не самостоятельный инпут, а начинка обёртки .nv-search:
   рамку и фон носит она. Правило по типам выше по специфичности, чем nav.css, и
   на телефоне чёрный прямоугольник инпута (44 px) вылезал из обёртки (34 px)
   вторым прямоугольником — поймано на рендере. Возвращаем его в прозрачность. */
html.theme-reaktor .nv-search input,html.theme-reaktor .list-search input{
  background:transparent;border:0;box-shadow:none;
}
html.theme-reaktor .nv-search input:focus,html.theme-reaktor .list-search input:focus{box-shadow:none}
html.theme-reaktor .list-search:focus-within{border-color:var(--brand)}
html.theme-reaktor input:focus,html.theme-reaktor select:focus,html.theme-reaktor textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(118,185,0,.22);
}

/* ── Поверхности браузера ───────────────────────────────────
   Выделение, каретка, полоса прокрутки и кольцо фокуса приезжают из системы и
   не принадлежат ни одной теме: на графите они выглядят как чужая деталь.
   Красим их из палитры — это самое дешёвое, что отличает собранный экран от
   свёрстанного. */
html.theme-reaktor ::selection{background:rgba(118,185,0,.32);color:#FFF}
html.theme-reaktor{scrollbar-color:#3D3D3D transparent;scrollbar-width:thin}
html.theme-reaktor input,html.theme-reaktor textarea{caret-color:var(--brand)}
html.theme-reaktor :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
html.theme-reaktor ::-webkit-scrollbar{width:10px;height:10px}
html.theme-reaktor ::-webkit-scrollbar-track{background:transparent}
html.theme-reaktor ::-webkit-scrollbar-thumb{background:#2F2F2F;border-radius:99px;border:2px solid #0C0C0C}
html.theme-reaktor ::-webkit-scrollbar-thumb:hover{background:#4A4A4A}

/* Край листа: экран-копия МойСклада берёт var(--border) напрямую — на графите
   рамка 1,3:1 лист не отделяет, ему нужна кромка контрола. Имя файла в этом
   правиле намеренно без расширения: отбор тестов CI грепает статику по
   базовому имени. */
html.theme-reaktor .ms-copy{border-color:var(--border2)}