@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
/* Оформление песочницы по фирменному руководству OQ.
 *
 * Формула руководства: белый фон, чёрная типографика, тонкие серые
 * границы, один синий акцент на действии, минимум декора. Синего не
 * больше пяти процентов экрана — именно из-за его избытка прежний вид
 * раздражал руководителя подбора.
 *
 * Слой заменяет «стекло и свет» (_steklo.css) и работает тем же
 * способом: nginx подставляет его в конец головы каждой страницы.
 * Панелей шесть, написаны в разное время, у каждой свой словарь
 * переменных — здесь все словари сводятся к одной гамме.
 *
 * Про вес правил, как и раньше:
 *   • имена объявлены на html:root (вес 0,1,1) — выше, чем :root любой
 *     панели;
 *   • правила оформления пишутся с приставкой body, иначе их перебьёт
 *     _skin.css и то, что дописывают в голову _shell.js и _added.js;
 *   • где панель ставит !important, отвечаем тем же.
 *
 * Чего здесь нет намеренно:
 *   • света под страницей, стекла, размытия и теней — руководство
 *     запрещает градиенты, glassmorphism и тяжёлые тени;
 *   • тёмного режима. Руководство описывает белый интерфейс; держать
 *     вторую гамму значит держать вторую беду. Прежний тёмный был
 *     только у подбора.
 *
 * Про шрифт. Руководство просит Helvetica Neue Cyr, но её в проекте
 * нет — панели живут на Golos Text. Шрифт оставлен, а дисциплина
 * взята: 400 — текст, 500 — кнопки и подписи, 700 — только заголовки
 * и крупные значения. Жирного стало заметно меньше: на это тоже была
 * отдельная жалоба.
 */

/* ── основа: вес выше, чем :root любой панели ────────────────────── */
html:root{
  /* «Живое небо»: акцент один — спокойный индиго (29.09.2026).
     Имя --oq-blue оставлено: на него ссылаются правила ниже. */
  --oq-blue:#4A5A9E;
  --oq-blue-hover:#3B4A8C;
  --oq-blue-pressed:#34427E;

  --paper:#F6F7F9; --paper-2:#F8F9FB;
  --surface:#FFFFFF;
  --surface-2:#F8F9FB;
  --surface-3:#EEF0F4;
  --glass:#FFFFFF;
  --glass-thin:#F8F9FB;
  --shine:transparent;
  --line:#ECEEF2;
  /* граница полей и контурных кнопок: должна быть видна (≥3:1 к белому
     по смыслу «здесь можно нажать») — в коде такой роли нет, берём
     серый из той же гаммы */
  --line-2:#C9CED7;
  /* 85% чёрного вместо чистого: восемь часов за панелью, глаза
     устают от предельного контраста. Просьба Ксении. */
  --ink:#23272F; --ink-2:#474D59; --ink-3:#5C6370;
  --accent:#4A5A9E; --accent-2:#3B4A8C; --accent-soft:#EEF1F8;
  --accent-soft-h:#E2E7F4;
  --brand:#4A5A9E;
  --ok:#2E7D52; --ok-soft:#E4F1E9;
  --warn:#9A6A15; --warn-soft:#F6EEDF;
  --danger:#B8433A; --danger-soft:#F7E7E5;
  --bar:#5B79C9; --bar-muted:#AFC3E8; --bar-bad:#C9827A; --track:#EEF0F4;
  /* тень карточки по коду: нейтральная, мягкая, с отступом вниз */
  --shadow:0 1px 3px rgba(35,39,47,.04),0 14px 32px -18px rgba(35,39,47,.13);
  --shadow-lg:0 2px 6px rgba(35,39,47,.06),0 30px 60px -30px rgba(35,39,47,.22);
  /* суперэллипс: 24 — карточки, 14 — кнопки и пилюли, 11 — поля и мелкое */
  --r:24px; --r-m:14px; --r-s:11px;
  --font-ui:'Golos Text',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-head:'Rubik','Golos Text',Arial,sans-serif;
}

/* ── чужие словари: те же имена, что и раньше ────────────────────── */
html:root{
  /* земля */
  /* Подложка 5% чёрного: на ней белые карточки читаются как
     отдельные предметы, а не сливаются с фоном. */
  --bg:#F6F7F9;
  /* поверхности: у портала --card, у OQprint --panel, у Дружелюбия --card */
  --card:var(--surface);
  --panel:var(--surface);
  --panel2:var(--surface-2);
  --chip:var(--surface-3);
  --accbg:var(--accent-soft);
  --acc-soft:var(--accent-soft);
  --blue-soft:var(--accent-soft);
  --na:var(--surface-2);
  /* линии */
  --ln:var(--line);
  --b:var(--line);
  --faint:var(--line);
  /* текст */
  --fg:var(--ink);
  --tx:var(--ink);
  --txt:var(--ink);
  --mut:var(--ink-3);
  --muted:var(--ink-3);
  /* акцент */
  --ac:var(--accent);
  --acc:var(--accent);
  --blue:var(--accent);
  --blue-dark:var(--accent-2);
  /* состояния */
  --pos:var(--ok);
  --neg:var(--danger);
  --err:var(--danger);
  --bad:var(--danger);
  --bad-bg:var(--danger-soft);
  --ok-bg:var(--ok-soft);
}

/* ── шрифт ─────────────────────────────────────────────────────────
   Общий слой ставит свой шрифт с !important, поэтому перебиваем точнее:
   html body — вес 0,0,2 против 0,0,1. */
html body{font-family:var(--font-ui)!important;-webkit-font-smoothing:antialiased;
  background:var(--bg);color:var(--ink)}

/* ── света под страницей больше нет ────────────────────────────────
   body::before занят плашкой «песочница», свет был на ::after. */
body::after{display:none!important;content:none!important}

/* ── ёмкости: белое поле в тонкой рамке ────────────────────────────
   Список тот же, что был у стекла: у половины панелей внутри прокрутка
   и липкие шапки, и трогать всё подряд звёздочкой нельзя. */
body .blk,
body .mc,
body .mcard,
body .cbox,
body .tile,
body .pan,
body .big,
body .card,
body .panel,
body .hero,
body .gbox,
body .grp,
body .msum,
body .det,
body .tsum,
body .vtu,
body .dayacc,
body .kpi .b,
body .links a,
body .uplink,
body .chartbox,
/* a.item — плитки портала — оформлены самой панелью, включая
   полоску-указатель слева. Сокращённая запись border сбивала
   её, поэтому сюда плитка не входит. */
body .box,
body .stat,
body .slide,
body .tbl,
body .dcard,
body .tblwrap,
body .wcol,
body .wcard{
  background:var(--surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow)}

/* В подборе .hero — не ёмкость, а строка с заголовком и счётчиками. */
html[data-skin="podbor"] body .hero{background:none;border:0;box-shadow:none;
  border-radius:0}

/* строки Дружелюбия узнаются по цветной метке — только они */
body .row.g,body .row.y,body .row.r,body .row.rr,body .row.nn{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);box-shadow:none}

/* липкие шапки таблиц обязаны остаться непрозрачными */
body .tblwrap th,body table.sched th,body .hm td:first-child{
  background:var(--surface)}

/* ── органы управления ─────────────────────────────────────────────
   Руководство: поля и кнопки скруглены на 10, граница у контурных
   элементов заметная — иначе непонятно, что это кнопка. */
body input,body select,body textarea{
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-s);color:var(--ink)}
body input:focus,body select:focus,body textarea:focus{
  outline:2px solid var(--oq-blue);outline-offset:1px;border-color:var(--oq-blue)}

body button,body .btn,body .tab,body .seg button,body .nav button,
body .who button,body .wbtn{
  border-radius:var(--r-m);
  transition:background .15s ease,border-color .15s ease,color .15s ease}
body button:focus-visible,body .btn:focus-visible,body a:focus-visible{
  outline:2px solid var(--oq-blue);outline-offset:2px}

/* главная кнопка — единственное место, где синий заливкой */
body .btn.pri,body button.pri,body .bg.pri,body .psend,body .save{
  background:var(--oq-blue);border-color:var(--oq-blue);color:#fff}
body .btn.pri:hover,body button.pri:hover,body .bg.pri:hover{
  background:var(--oq-blue-hover);border-color:var(--oq-blue-hover)}
body .btn.pri:active,body button.pri:active,body .bg.pri:active{
  background:var(--oq-blue-pressed)}

/* Кнопка «Сохранить» в окнах правки покрашена в самой панели прямо
   числом — зелёным. Главное действие должно быть одного цвета везде,
   поэтому перекрываем точнее, чем она: её вес 0,3,1, наш 0,3,2. */
body .modal .mact button.save,
body .modal .mact button.save:hover{
  background:var(--oq-blue);border-color:var(--oq-blue);color:#fff}
body .modal .mact button.save:hover{background:var(--oq-blue-hover)}

/* прочие кнопки — белое поле, чёрный текст, серая граница */
body .btn,body .bg{background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2)}
body .btn:hover,body .bg:hover{background:var(--surface-2)}

/* ── таблицы ───────────────────────────────────────────────────────
   Заголовок — мелкий, разрядкой, серый. Строка подсвечивается
   подложкой, а не цветом. */
body th{color:var(--ink-3)!important;letter-spacing:0!important;
  text-transform:none!important;font-size:12.5px!important;
  font-weight:600!important;
  border-bottom:1px solid var(--line)!important}
body td{border-bottom:1px solid var(--line-2x,#F0F2F5)}
body .mc .ml{text-transform:none!important;letter-spacing:0!important;
  font-size:12.5px!important}
body .mc .mh{font-size:12.5px!important}
body tbody tr:hover{background:var(--surface-2)}

/* ── типографика ───────────────────────────────────────────────────
   Жирного меньше: 700 только у заголовков и крупных чисел. */
body h1,body h2,body h3{font-family:var(--font-head)}
body h1{font-weight:700;letter-spacing:-.012em}
body h2,body h3{font-weight:700;letter-spacing:-.012em}
body .dim,body .m,body .sub,body .hint{color:var(--ink-2)}

/* ── левое меню песочницы ──────────────────────────────────────── */
body #opdesk-shell{background:var(--surface);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-right:1px solid var(--line)}
body #opdesk-shell .gh{letter-spacing:0;font-size:12px;font-weight:600;
  text-transform:none;color:var(--ink-3)}
body #opdesk-shell a{border-radius:0;margin-right:0;color:var(--ink);
  border-left:2px solid transparent;
  transition:background .15s ease,color .15s ease}
body #opdesk-shell a:hover{background:var(--surface-2)}
body #opdesk-shell a.on{background:var(--accent-soft);color:var(--oq-blue);
  border-left-color:var(--oq-blue);font-weight:500}

/* ── меньше синего ─────────────────────────────────────────────────
   У панелей акцентом покрашено многое: полоски у заголовков панелей,
   надстрочные подписи, рамки вкладок. По руководству синий остаётся
   действию и активному состоянию, остальное — чёрное и серое. */
body .bar{background:var(--line)!important}
body .bar.w,body .bar.o{background:var(--line)!important}
body .kicker{color:var(--ink-3)}
body .ph{background:var(--surface-2);border-bottom:1px solid var(--line)}
body table.sortable th:hover{color:var(--ink)}
/* ─── ПРАВКИ ПО СНИМКАМ ─────────────────────────────────────────── */
/* Выбранная вкладка: заливка фирменным синим и белый текст. Раньше
   слой красил синим только надпись, а заливка оставалась синей —
   выходило синее по синему, и подписи было не видно. */
body .vtab.on,body .tab.on,body .stab.active,body .seg button.on{
  background:var(--oq-blue);border-color:var(--oq-blue);color:#fff}
body .vtab.on span,body .tab.on span{color:#fff;opacity:.85}
body .vtab,body .tab{color:var(--ink-2)}

/* Счётчик писем в общем меню держится правого края при любой длине
   подписи. Плавающий счётчик у переносимой строки съезжал вверх. */
body #opdesk-shell a{display:flex;align-items:center;gap:8px}
body #opdesk-shell a .pisma{float:none;margin-left:auto;flex:none}

/* Статус: плашка: рамка цветом, текст чёрный (раздел 5.6 руководства).
   Красить сам текст нельзя: зелёный и оранжевый на белом дают 4,42 и
   4,10 при норме 4,5 — для обычного текста мало. */
body .pill{border:1px solid var(--line);color:var(--ink);
  background:var(--surface)}
body .pill.p-ok{border-color:var(--ok);background:var(--ok-soft)}
body .pill.p-w{border-color:var(--warn);background:var(--warn-soft)}
body .pill.p-d{border-color:var(--danger);background:var(--danger-soft)}
body .pill.p-n{border-color:var(--line);background:var(--surface-2);
  color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  body *{transition:none!important;animation:none!important}
}

/* ─── ПРОСЬБА КСЕНИИ: мягче фон, мягче чернила ──────────────────── */
/* Страница — подложка 5%, карточки и панели — белые. Так видно, где
   содержимое, а где просто фон. */
body .pan,body .card,body .task,body .sblk,body .mc,body .blk,
body .cbox,body .tile,body .box,body .wcol,body .dcard,body .frame{
  background:var(--surface)}
/* Заголовки чуть темнее текста — иерархия сохраняется. */
body h1,body h2,body h3{color:var(--ink)}

/* ─── «ЖИВОЕ НЕБО» (29.09.2026) ─────────────────────────────────── */
/* Суперэллипс «как у iPhone» везде, где есть скругление; браузер без
   поддержки оставляет обычный радиус — это штатный запасной вариант. */
html:root *{corner-shape:squircle}
/* цифры одной ширины — столбцы не пляшут */
body td,body .n,body .v,body .mv,body .num{font-variant-numeric:tabular-nums}
/* выделение текста и каретка — из той же гаммы */
html:root ::selection{background:var(--accent-soft-h);color:var(--ink)}
body input,body textarea{caret-color:var(--accent)}
/* надписи-«шапочки» капсом над заголовками запрещены кодом */
body .kicker,body .eyebrow{text-transform:none!important;letter-spacing:0!important}