/* ── Палитра портала ──────────────────────────────────────────────────
     Все цвета и размеры собраны здесь переменными: страница берёт их, а не
     свой набор оттенков. Из-за этого светлая и тёмная тема — это два набора
     значений, а не две копии портала.

     Светлая — «рабочий стол»: больше воздуха, мягкая тень вместо жирной
     рамки, синий акцент. Тёмная — те же размеры и тот же синий, только на
     тёмном полотне: переключение не должно менять привычную геометрию. */
  :root{
    --bg:#f7f8fa;         /* полотно страницы */
    --panel:#ffffff;      /* карточки, таблицы, окна */
    --panel-2:#f4f6fa;    /* подложки: шапки таблиц, поля, вкладки */
    --line:#e6eaf0;       /* границы */
    --line-soft:#eef1f6;  /* внутренние разделители */
    --ink:#0f172a;        /* основной текст */
    --ink-2:#3b4557;      /* второстепенный */
    --mut:#78839a;        /* подписи */
    --accent:#1d6feb;
    --accent-ink:#ffffff;
    --accent-soft:#e8f1ff;
    --ok:#116b3a; --ok-soft:#e3f6e9;
    --warn:#8a5a00; --warn-soft:#fdf1dc;
    --bad:#a52121; --bad-soft:#fdeaea;
    --r:14px;             /* карточки */
    --r-s:10px;           /* кнопки, поля */
    --shadow:0 1px 3px rgba(16,24,40,.05), 0 8px 24px -18px rgba(16,24,40,.35);
    --shadow-pop:0 18px 44px rgba(16,24,40,.18);
    --speed:180ms;
    /* Фирменный тёмно-синий: шапки разделов и итоговые блоки. Один и тот же
       в обеих темах — это цвет марки, а не элемент палитры интерфейса. */
    --brand-dark:#0E1A2B;
  }
  html[data-theme="dark"]{
    --bg:#0e141f;
    --panel:#161e2c;
    --panel-2:#1b2434;
    --line:#28334699;
    --line-soft:#232d3f;
    --ink:#e6ebf3;
    --ink-2:#c2ccdb;
    --mut:#93a0b5;
    --accent:#4c9aff;
    --accent-ink:#08111f;
    --accent-soft:rgba(76,154,255,.16);
    --ok:#8ce0ab; --ok-soft:rgba(46,125,82,.28);
    --warn:#f0c987; --warn-soft:rgba(138,90,0,.3);
    --bad:#ff9a9a; --bad-soft:rgba(165,33,33,.28);
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 14px 32px -24px #000;
    --shadow-pop:0 22px 50px rgba(0,0,0,.55);
  }
  /* ── Темы оформления ──────────────────────────────────────────────────
     Фон и «стекло» — только фон и панель. Содержимое остаётся на плотных
     карточках: читать текст поверх картинки нельзя, сколько ни размывай.
     Картинок не грузим — градиенты рисуются браузером, весят ноль и не
     тормозят открытие страницы. */
  body::before{content:"";position:fixed;inset:0;z-index:-2;background:#f5f5f0;
    transition:background .4s ease;}
  body[data-bg="field"]::before{
    background:
      radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.55), transparent 60%),
      repeating-linear-gradient(100deg, #dbe9d8 0 42px, #d3e4d0 42px 84px),
      linear-gradient(160deg,#cfe3cb,#e8f0e4);}
  body[data-bg="sand"]::before{
    background:
      radial-gradient(90% 70% at 85% 0%, rgba(255,255,255,.6), transparent 60%),
      linear-gradient(150deg,#efe6d6,#f7f2e8 45%,#eae2d2);}
  body[data-bg="night"]::before{
    background:
      radial-gradient(90% 70% at 20% 0%, rgba(56,110,150,.35), transparent 55%),
      linear-gradient(160deg,#16222e,#1d2b38 55%,#132029);}
  /* Стадион PRIMERA: фотография владельца. Поверх — тёмная вуаль, иначе
     белые карточки режут глаз, а подписи на светлом фоне тонут в траве. */
  body[data-bg="stadium"]::before{
    background:
      linear-gradient(rgba(8,16,24,.55), rgba(8,16,24,.72)),
      url("/static/img/bg/stadium.webp") center/cover fixed no-repeat, #0b1620;}
  body[data-bg="stadium"]{color:#e8eef4;}
  body[data-bg="stadium"] h1,body[data-bg="stadium"] h2{color:#f2f6fa;}
  body[data-bg="mesh"]::before{
    background:
      radial-gradient(60% 55% at 12% 10%, rgba(79,191,139,.28), transparent 60%),
      radial-gradient(55% 50% at 88% 15%, rgba(24,95,165,.22), transparent 60%),
      radial-gradient(70% 60% at 60% 95%, rgba(232,255,71,.18), transparent 60%),
      linear-gradient(160deg,#f4f5f0,#eef1f4);}
  /* На тёмном фоне светлый текст в шапке и подписях остаётся читаемым, а
     карточки как были — белыми. Полноценную тёмную тему это не заменяет
     и не притворяется ею. */
  body[data-bg="night"], body[data-bg="stadium"]{--kb-sep:rgba(255,255,255,.28);}
  body[data-bg="night"]{color:#e8eef4;}
  body[data-bg="night"] h1,body[data-bg="night"] h2{color:#f2f6fa;}
  /* Светлым делаем только то, что лежит НА фоне. Внутри карточек текст
     остаётся тёмным: белая карточка со светлым текстом нечитаема, и это
     первое, что бросилось в глаза на пробном экране. */
  body[data-bg="night"] .kb-card, body[data-bg="stadium"] .kb-card,
  body[data-bg="night"] .card, body[data-bg="stadium"] .card,
  body[data-bg="night"] .an-card, body[data-bg="stadium"] .an-card,
  body[data-bg="night"] .co-card, body[data-bg="stadium"] .co-card,
  body[data-bg="night"] .id-card, body[data-bg="stadium"] .id-card,
  body[data-bg="night"] .kb-col, body[data-bg="stadium"] .kb-col,
  body[data-bg="night"] .an-kpi>div, body[data-bg="stadium"] .an-kpi>div,
  body[data-bg="night"] .id-kpi>div, body[data-bg="stadium"] .id-kpi>div,
  body[data-bg="night"] .sup-grid, body[data-bg="stadium"] .sup-grid,
  body[data-bg="night"] .cli-wrap, body[data-bg="stadium"] .cli-wrap,
  body[data-bg="night"] .modal, body[data-bg="stadium"] .modal,
  body[data-bg="night"] table, body[data-bg="stadium"] table,
  body[data-bg="night"] .cardbox, body[data-bg="stadium"] .cardbox,
  body[data-bg="night"] input, body[data-bg="stadium"] input,
  body[data-bg="night"] select, body[data-bg="stadium"] select,
  body[data-bg="night"] textarea, body[data-bg="stadium"] textarea{color:#1a1a1a;}

  /* ── Тёмная тема ──────────────────────────────────────────────────────
     Портал писался светлым, и белые прямоугольники заданы в сотне мест.
     Поэтому тёмная тема идёт двумя слоями: сначала общие элементы (полотно,
     карточки, таблицы, поля, окна), затем — раздел за разделом. Пока раздел
     не разобран, он может остаться светлым островом; это видно сразу и
     чинится точечно, а не молчаливо ломает работу. */
  html[data-theme="dark"] body::before{background:var(--bg) !important;}
  html[data-theme="dark"] body{background:var(--bg);color:var(--ink);}
  html[data-theme="dark"] h1,html[data-theme="dark"] h2,
  html[data-theme="dark"] h3,html[data-theme="dark"] h4{color:var(--ink);}
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .cardbox,
  html[data-theme="dark"] .modal,
  html[data-theme="dark"] .um-drop,
  html[data-theme="dark"] .section-nav{background:var(--panel);border-color:var(--line);
    color:var(--ink);}
  html[data-theme="dark"] .table th{color:var(--mut);border-color:var(--line);}
  html[data-theme="dark"] .table td{border-color:var(--line-soft);color:var(--ink);}
  html[data-theme="dark"] .table tr:hover td{background:var(--panel-2);}
  html[data-theme="dark"] input,html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,html[data-theme="dark"] .form-control{
    background:var(--panel-2);color:var(--ink);border-color:var(--line);}
  html[data-theme="dark"] input::placeholder,
  html[data-theme="dark"] textarea::placeholder{color:var(--mut);}
  html[data-theme="dark"] .btn{background:var(--panel-2);color:var(--ink);border-color:var(--line);}
  html[data-theme="dark"] .btn:hover{background:#222c3e;}
  html[data-theme="dark"] .btn-primary{background:var(--accent);color:var(--accent-ink);
    border-color:var(--accent);}
  html[data-theme="dark"] .stat{background:var(--panel-2);}
  html[data-theme="dark"] .stat .val{color:var(--ink);}
  html[data-theme="dark"] .upload-zone{background:var(--panel-2);border-color:var(--line);}
  html[data-theme="dark"] .um-item,html[data-theme="dark"] .um-status{color:var(--ink-2);}
  html[data-theme="dark"] .um-item:hover,html[data-theme="dark"] .um-status:hover{
    background:var(--panel-2);}
  html[data-theme="dark"] .um-head{color:var(--ink);}
  html[data-theme="dark"] .um-div{background:var(--line-soft);}
  html[data-theme="dark"] .um-snd{background:var(--panel-2);color:var(--ink-2);
    border-color:var(--line);}
  /* Ссылки в содержимом — синие; меню и шапка остаются как есть, иначе
     весь список разделов превращается в синий текст. */
  html[data-theme="dark"] .container a,
  html[data-theme="dark"] .card a{color:var(--accent);}
  /* Картинки фона в тёмной теме не участвуют: тёмное полотно и фотография
     стадиона вместе дают грязь. Выбор фона там просто скрыт. */
  html[data-theme="dark"] .um-themes{display:none;}
  html[data-theme="dark"] .um-bg-label{display:none;}

  /* Кнопки-иконки в списках (правка, статистика, письмо) красятся по смыслу:
     зелёная, синяя, фиолетовая. В тёмной теме их пастельные подложки светили
     квадратами через всю таблицу — берём тот же оттенок, но прозрачным. */
  html[data-theme="dark"] .ib,
  html[data-theme="dark"] .c-edit,
  html[data-theme="dark"] .c-stat,
  html[data-theme="dark"] .c-users{
    background:color-mix(in srgb, currentColor 16%, transparent) !important;
    border-color:color-mix(in srgb, currentColor 28%, transparent) !important;}

  /* Полосы прокрутки и выделение текста: в тёмной теме системные остаются
     светлыми и режут глаз ярче любого блока — на длинных таблицах это первое,
     что бросается в глаза. */
  html[data-theme="dark"]{color-scheme:dark;}
  html[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px;}
  html[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2a3548;border-radius:6px;
    border:2px solid transparent;background-clip:content-box;}
  html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#3a4760;
    border:2px solid transparent;background-clip:content-box;}
  html[data-theme="dark"] ::selection{background:rgba(76,154,255,.32);}

  /* Немного движения — там, где оно объясняет, что произошло: окно появилось,
     список обновился. Ничего вращающегося и мигающего: интерфейс, в котором
     сидят по восемь часов, не должен привлекать к себе внимание.
     У кого в системе выключены анимации — не показываем их вовсе. */
  @keyframes dcIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  @keyframes dcFade{from{opacity:0;}to{opacity:1;}}
  .modal.on, .ct-ov.on .ct-card, .ep-pick, #epPick, .gwin, #ptWin > div{
    animation:dcIn 180ms ease-out;}
  .ct-ov.on, .modal-ov.on{animation:dcFade 140ms ease-out;}
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }

  /* Переключатель светлой и тёмной темы в меню пользователя. */
  .um-mode{display:flex;gap:6px;padding:2px 10px 8px;}
  .um-mode button{flex:1;border:1px solid var(--line);background:var(--panel);
    color:var(--ink-2);font:inherit;font-size:12px;padding:7px 6px;border-radius:9px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;}
  .um-mode button:hover{border-color:var(--accent);color:var(--accent);}
  .um-mode button.on{background:var(--accent);border-color:var(--accent);
    color:var(--accent-ink);font-weight:600;}

  /* стекло: панель и шапка пропускают фон, но не мешают читать */
  body[data-glass="1"] .sidenav{background:rgba(18,32,43,.72);
    backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
    border-right:1px solid rgba(255,255,255,.08);}
  body[data-glass="1"] .navbar{background:rgba(14,26,43,.72);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  @supports not (backdrop-filter: blur(2px)){
    body[data-glass="1"] .sidenav{background:#12202b;}
    body[data-glass="1"] .navbar{background:#0E1A2B;}
  }
  /* Поддержка живёт без фона по решению владельца: там сплошной текст,
     и любая картинка под ним мешает работать. */
  /* В «Поддержке» отключаем только тяжёлые фоны — фотографию и ночь: там
     сплошной текст, и картинка под ним мешает читать. Светлые темы остаются,
     иначе раздел выпадает из портала. */
  body[data-page="support"][data-bg="stadium"]::before,
  body[data-page="support"][data-bg="night"]::before,
  body[data-page="support"][data-bg="field"]::before{background:#f5f5f0 !important;}
  body[data-page="support"][data-bg="stadium"],
  body[data-page="support"][data-bg="night"]{color:#1a1a1a;}

/* Выключенные варианты оформления: видно, что они есть, но выбрать пока нельзя. */
.um-mode button[disabled], .um-th[disabled]{opacity:.4;cursor:default;filter:grayscale(1);}
.um-mode button[disabled]:hover, .um-th[disabled]:hover{background:none;border-color:var(--line);}