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

     Светлая — «рабочий стол»: больше воздуха, мягкая тень вместо жирной
     рамки, синий акцент. Тёмная — те же размеры и тот же синий, только на
     тёмном полотне: переключение не должно менять привычную геометрию. */
  :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;}
  /* Стадион PRIMERA: фотография владельца. Поверх — тёмная вуаль, иначе
     белые карточки режут глаз, а подписи на светлом фоне тонут в траве. */
  /* Прилив: фирменный градиент портала — бирюза уходит в синий. Цвета взяты
     владельцем (0,182,165 и 24,104,219). Насыщенный фон терпит только плотные
     карточки: подписи и заголовки поверх него делаем светлыми — тем же набором
     правил, что у «ночи» и «стадиона». */
  body[data-bg="tide"]::before{
    background:
      radial-gradient(85% 65% at 12% 0%, rgba(255,255,255,.22), transparent 60%),
      linear-gradient(152deg, #00B6A5 0%, #0E8FC0 46%, #1868DB 100%);}
  body[data-bg="tide"]{color:#eaf3fb;}
  body[data-bg="tide"] h1,
  body[data-bg="tide"] h2{color:#f4f9ff;}
  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="tide"]{--kb-sep:rgba(255,255,255,.28);}
  /* Светлым делаем только то, что лежит НА фоне. Внутри карточек текст
     остаётся тёмным: белая карточка со светлым текстом нечитаема, и это
     первое, что бросилось в глаза на пробном экране. */
  body[data-bg="tide"] .kb-card,
  body[data-bg="tide"] .card,
  body[data-bg="tide"] .an-card,
  body[data-bg="tide"] .co-card,
  body[data-bg="tide"] .id-card,
  body[data-bg="tide"] .kb-col,
  body[data-bg="tide"] .an-kpi>div,
  body[data-bg="tide"] .id-kpi>div,
  body[data-bg="tide"] .sup-grid,
  body[data-bg="tide"] .cli-wrap,
  body[data-bg="tide"] .modal,
  body[data-bg="tide"] table,
  body[data-bg="tide"] .cardbox,
  body[data-bg="tide"] input,
  body[data-bg="tide"] select,
  body[data-bg="tide"] 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-page="support"][data-bg="tide"]::before{background:#f5f5f0 !important;}
  body[data-page="support"][data-bg="tide"]{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);}