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

     Светлая — «рабочий стол»: больше воздуха, мягкая тень вместо жирной
     рамки, синий акцент. Тёмная — те же размеры и тот же синий, только на
     тёмном полотне: переключение не должно менять привычную геометрию. */
  :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);}

  /* ── Фоны рабочей области: синяя палитра бренда ──────────────────────────
     Десять вариантов (выбор владельца 14.09.2026 по макету «Фоны портала
     Контекст»): шесть паттернов и четыре градиента, всё чистым CSS, без
     картинок. Выбирают их в профиле; выбор личный и живёт в браузере рядом
     с прежним «мягким».

     Каждый фон объявлен переменной --bgv-<имя> и используется дважды: самим
     полотном (body::before) и плиткой предпросмотра в профиле (.bgi). Так
     градиент описан один раз, и превью не может разойтись с настоящим фоном.
     Три цвета бренда и шаг колец — тоже переменные: правятся в одном месте. */
  :root{
    --brand-blue:#2F7CF6; --brand-sky:#8CC2FF; --brand-navy:#0F1B2B;
    --bg-ring-step:58px; --bg-ring-line:1.5px;
    /* 1 · Кольца из угла */
    --bgv-rings-corner:
      linear-gradient(135deg, #F4F7FB 38%, rgba(244,247,251,0) 100%),
      repeating-radial-gradient(circle at 100% 100%,
        color-mix(in srgb, var(--brand-blue) 22%, transparent) 0 var(--bg-ring-line),
        transparent var(--bg-ring-line) var(--bg-ring-step)),
      #F4F7FB;
    /* 2 · Кольца от центра */
    --bgv-rings-center:
      radial-gradient(circle at 50% 42%, #F5F8FC 0 200px, rgba(245,248,252,0) 560px),
      repeating-radial-gradient(circle at 50% 42%,
        color-mix(in srgb, var(--brand-blue) 18%, transparent) 0 var(--bg-ring-line),
        transparent var(--bg-ring-line) 64px),
      #F5F8FC;
    /* 3 · Две орбиты */
    --bgv-rings-duo:
      radial-gradient(60% 55% at 50% 45%, #F5F8FC 0 30%, rgba(245,248,252,0) 100%),
      repeating-radial-gradient(circle at 100% 100%,
        color-mix(in srgb, var(--brand-blue) 20%, transparent) 0 var(--bg-ring-line),
        transparent var(--bg-ring-line) 60px),
      repeating-radial-gradient(circle at 0% 0%,
        color-mix(in srgb, var(--brand-sky) 40%, transparent) 0 var(--bg-ring-line),
        transparent var(--bg-ring-line) 44px),
      #F5F8FC;
    /* 4 · Точечная сетка */
    --bgv-dots:
      radial-gradient(color-mix(in srgb, var(--brand-navy) 9%, transparent) 1.2px,
        transparent 1.7px) 0 0 / 22px 22px,
      #F3F5F8;
    /* 5 · Тонкая сетка */
    --bgv-grid:
      linear-gradient(color-mix(in srgb, var(--brand-navy) 7%, transparent) 1px,
        transparent 1px) 0 0 / 32px 32px,
      linear-gradient(90deg, color-mix(in srgb, var(--brand-navy) 7%, transparent) 1px,
        transparent 1px) 0 0 / 32px 32px,
      #F5F7FA;
    /* 6 · Штриховка */
    --bgv-hatch:
      repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--brand-blue) 10%, transparent) 0 1px, transparent 1px 14px),
      #F6F8FC;
    /* 7 · Синий → голубой */
    --bgv-sky:
      radial-gradient(70% 60% at 50% 42%, rgba(255,255,255,.55), transparent 72%),
      linear-gradient(118deg, color-mix(in srgb, var(--brand-blue) 20%, #F3F7FD) 0%,
        color-mix(in srgb, var(--brand-sky) 16%, #FBFDFF) 100%);
    /* 8 · Голубое свечение */
    --bgv-glow:
      radial-gradient(70% 45% at 50% 0%,
        color-mix(in srgb, var(--brand-sky) 48%, transparent), transparent 70%),
      #F7F9FC;
    /* 9 · Синий меш */
    --bgv-mesh-blue:
      radial-gradient(42% 42% at 16% 18%,
        color-mix(in srgb, var(--brand-blue) 20%, transparent), transparent 70%),
      radial-gradient(46% 46% at 84% 26%,
        color-mix(in srgb, var(--brand-sky) 42%, transparent), transparent 70%),
      radial-gradient(50% 50% at 50% 100%, rgba(169,184,255,.38), transparent 70%),
      #F6F8FC;
    /* 10 · Глубокий синий */
    --bgv-deep:
      radial-gradient(60% 40% at 50% 0%,
        color-mix(in srgb, var(--brand-sky) 14%, transparent), transparent 60%),
      linear-gradient(180deg, var(--brand-navy) 0%,
        color-mix(in srgb, var(--brand-blue) 42%, var(--brand-navy)) 100%);
  }

  body[data-bg="rings-corner"]::before{background: var(--bgv-rings-corner);}
  /* До применения выбора (скрипт ставит data-bg сразу после <body>) полотно уже
     рисуем фоном по умолчанию: иначе страница успевает мигнуть серым. */
  body:not([data-bg])::before{background: var(--bgv-rings-corner);}
  body[data-bg="rings-center"]::before{background: var(--bgv-rings-center);}
  body[data-bg="rings-duo"]::before{background: var(--bgv-rings-duo);}
  body[data-bg="dots"]::before{background: var(--bgv-dots);}
  body[data-bg="grid"]::before{background: var(--bgv-grid);}
  body[data-bg="hatch"]::before{background: var(--bgv-hatch);}
  body[data-bg="sky"]::before{background: var(--bgv-sky);}
  body[data-bg="glow"]::before{background: var(--bgv-glow);}
  body[data-bg="mesh-blue"]::before{background: var(--bgv-mesh-blue);}
  body[data-bg="deep"]::before{background: var(--bgv-deep);}
  .bgi[data-bg]{background:#F4F7FB;}
  /* Превью прежнего «мягкого»: его фон описан старым правилом выше, поэтому
     для плитки повторяем те же градиенты. */
  .bgi[data-bg="mesh"]{
    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);}
  .bgi[data-bg="rings-corner"]{background: var(--bgv-rings-corner);}
  .bgi[data-bg="rings-center"]{background: var(--bgv-rings-center);}
  .bgi[data-bg="rings-duo"]{background: var(--bgv-rings-duo);}
  .bgi[data-bg="dots"]{background: var(--bgv-dots);}
  .bgi[data-bg="grid"]{background: var(--bgv-grid);}
  .bgi[data-bg="hatch"]{background: var(--bgv-hatch);}
  .bgi[data-bg="sky"]{background: var(--bgv-sky);}
  .bgi[data-bg="glow"]{background: var(--bgv-glow);}
  .bgi[data-bg="mesh-blue"]{background: var(--bgv-mesh-blue);}
  .bgi[data-bg="deep"]{background: var(--bgv-deep);}

  /* Тёмный фон: светлым делаем только то, что лежит НА нём. Внутри белых
     карточек текст остаётся тёмным — тем же набором правил, что у «прилива». */
  body[data-bg="deep"]{color:#eaf3fb;--kb-sep:rgba(255,255,255,.28);}
  body[data-bg="deep"] h1,
  body[data-bg="deep"] h2{color:#f4f9ff;}
  body[data-bg="deep"] .kb-card,
  body[data-bg="deep"] .card,
  body[data-bg="deep"] .an-card,
  body[data-bg="deep"] .co-card,
  body[data-bg="deep"] .id-card,
  body[data-bg="deep"] .kb-col,
  body[data-bg="deep"] .an-kpi,
  body[data-bg="deep"] .id-kpi,
  body[data-bg="deep"] .sup-grid,
  body[data-bg="deep"] .cli-wrap,
  body[data-bg="deep"] .modal,
  body[data-bg="deep"] table,
  body[data-bg="deep"] .cardbox,
  body[data-bg="deep"] input,
  body[data-bg="deep"] select,
  body[data-bg="deep"] textarea{color:#1a1a1a;}

  /* ── Галерея фонов: меню шапки и страница профиля ────────────────────────
     Плитка = сам фон плюс белая карточка на нём: выбирают не «как фон
     выглядит», а «как он ведёт себя под контентом». Один набор правил на оба
     места, чтобы выбор выглядел одинаково. */
  .bgg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
  @media(max-width:1100px){.bgg{grid-template-columns:repeat(3,minmax(0,1fr));}}
  @media(max-width:700px){.bgg{grid-template-columns:repeat(2,minmax(0,1fr));}}
  .bgt{position:relative;height:104px;border-radius:10px;border:1px solid var(--line);
    overflow:hidden;cursor:pointer;padding:0;font:inherit;color:inherit;background:none;}
  .bgt .bgi{position:absolute;inset:0;}
  .bgt .bgm{position:absolute;left:18%;right:18%;top:20px;height:48px;background:#fff;
    border-radius:6px;box-shadow:0 6px 16px -10px rgba(15,27,43,.4);}
  .bgt .bgm::before{content:"";position:absolute;left:8px;top:8px;width:46%;height:7px;
    border-radius:4px;background:#182130;opacity:.85;}
  .bgt .bgm::after{content:"";position:absolute;left:8px;top:22px;right:8px;height:5px;
    border-radius:3px;background:#E3E8EF;}
  .bgt .bgl{position:absolute;left:7px;bottom:6px;font-size:11px;font-weight:600;color:#182130;
    background:rgba(255,255,255,.86);padding:2px 6px;border-radius:5px;}
  .bgt.dark .bgl{color:#fff;background:rgba(15,27,43,.72);}
  .bgt.on{outline:2px solid var(--accent);outline-offset:1px;}
  .bgt.on .bgl{background: var(--accent);color:#fff;}
  /* В меню шапки места меньше: три плитки в ряд и ниже ростом. */
  .bgg-menu{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:2px 10px 8px;}
  .bgg-menu .bgt{height:66px;border-radius:8px;}
  .bgg-menu .bgt .bgm{top:13px;height:30px;left:14%;right:14%;border-radius:4px;}
  .bgg-menu .bgt .bgm::before{left:5px;top:5px;height:5px;}
  .bgg-menu .bgt .bgm::after{left:5px;top:14px;right:5px;height:4px;}
  .bgg-menu .bgt .bgl{font-size:10px;left:5px;bottom:4px;padding:1px 5px;}


/* Шрифт портала из настроек (26.09.2026): переменную ставит applyFont в
   _theme.html; поля и кнопки тоже, иначе браузер оставит им системный. */
html[data-font] :where(body, button, input, select, textarea) { font-family: var(--ui-font); }
.st-font-sel { font: inherit; font-size: 14px; max-width: 58%; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: inherit; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
html[data-theme="dark"] .st-font-sel { background-color: var(--panel-2); }
/* Главная (home2): заголовок, большие числа и подписи набраны Unbounded; при
   выбранном шрифте они идут тем же семейством, что и весь портал (26.09.2026). */
html[data-font] :where(.h2-hi, .bt .big, .trio b, .ring text, .team b, .h2-river h2, .rleg b) { font-family: var(--ui-font); font-weight: 500; }