/* Сорока · тема «моно» в духе Vercel (решение владельца 22.09.2026):
   чистый чёрный фон, всё держится на тонких линиях 1px, а не на тенях; радиусы мелкие;
   главное действие — белая кнопка с чёрным текстом; цвет только там, где он что-то значит —
   статусы, прогресс, фокус. Тема одна, тёмная: светлой версии у сервиса нет.
   Перекрывает токены и светлые места app.css. */
:root{
  color-scheme:dark;
  /* шкала как в Geist: 100–300 фоны компонентов, 400–600 границы, 700–800 плотные фоны,
     900–1000 текст и иконки. Числа не выдумываем — берём тёмную палитру Vercel. */
  --bg:#000000; --bg-2:#0a0a0a; --card:#0a0a0a; --card-2:#141414; --line:#1f1f1f; --line-2:#2e2e2e; --line-3:#454545;
  --ink:#ededed; --ink-2:#a1a1a1; --ink-3:#8f8f8f; --ink-4:#666666;
  /* главное действие — белое на чёрном */
  --accent:#ffffff; --accent-2:#ededed; --accent-soft:#1a1a1a;
  /* цветные элементы: синий — прогресс, фокус, ссылки по делу; остальное — статусы */
  --brand:#0072f5; --brand-2:#3291ff; --brand-soft:#0a1a2e;
  --ok:#62c073; --ok-soft:#0d2016; --warn:#f1a10d; --warn-soft:#241a05; --bad:#ff6166; --bad-soft:#2a1315;
  --mute:#8f8f8f; --mute-soft:#1a1a1a; --info:#52a8ff; --info-soft:#0a1a2e;
  /* глубина — границей, не тенью (тени только у всплывающего) */
  --shadow-1:none;
  --shadow-2:0 8px 30px rgba(0,0,0,.72);
  --inset:none;
  --r:12px; --r-sm:6px; --r-xs:4px;
  --row:40px;
  --font:"Golos Text","YS Text","Helvetica Neue",Arial,sans-serif;   /* как у Невода */
}
body{font-family:var(--font);font-size:14px;background:var(--bg);color:var(--ink);letter-spacing:-.008em}
/* цифры и идентификаторы — моноширинным: «диджитал» подача Vercel */
.num,.count,.pct,.key-prefix{font-family:var(--mono);font-variant-numeric:tabular-nums}
.table td.num,.table th.num{font-family:var(--mono);font-size:12.5px}
h1{letter-spacing:-.03em;font-weight:600}
h2{letter-spacing:-.02em}
h3{color:var(--ink-3);letter-spacing:.08em}
a{color:var(--ink);text-decoration:none}
a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
code{background:var(--card-2);border:1px solid var(--line);color:var(--ink-2)}
hr{border-color:var(--line)}

/* ---- каркас: линии вместо теней */
.side{background:#000;border-right:1px solid var(--line)}
.nav-group{color:var(--ink-4);letter-spacing:.08em}
.nav-item{color:var(--ink-2);border:1px solid transparent;border-radius:var(--r-sm)}
.nav-item:hover{background:#141414;color:#fff;text-decoration:none}
.nav-item.on{background:#141414;border-color:var(--line-2);color:#fff;box-shadow:none}
.nav-item.on .ico{color:#fff}
.nav-item:hover .ico{color:var(--ink)}
.nav-badge{background:var(--bad-soft);color:var(--bad);border:1px solid #3a1a1a}
.topbar,.head{border-color:var(--line);background:transparent}
.card,.stat,.attn-row,.ccard,.pre,.empty,.toast{background:var(--card);border-color:var(--line);box-shadow:none}
.card{border-radius:var(--r)}
.stat{background:var(--card);border-radius:var(--r)}
.stat:hover{border-color:var(--line-2)}
.attn-row{border-left:1px solid var(--line);border-top:1px solid var(--line);position:relative}
.attn-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--warn);border-radius:2px 0 0 2px}
.card-head{border-color:var(--line)}
.savebar{background:rgba(10,10,10,.9);border-color:var(--line-2);backdrop-filter:blur(8px)}
.toast{background:#141414;border-color:var(--line-2);border-left:2px solid var(--ok);color:var(--ink)}

/* ---- знак: чёрный квадрат с белой точкой */
.brand-name{color:#fff;letter-spacing:-.02em;font-weight:600}
.brand-mark{width:46px;height:24px;border-radius:0;background:none;border:0;box-shadow:none;flex:none}   /* знак «~*>»: viewBox 46×24 */
.brand-mark::after{content:none}   /* точка теперь внутри знака */

/* ---- кнопки */
.btn{height:32px;background:transparent;border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r-sm);
  box-shadow:none;font-weight:500;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:#1a1a1a;border-color:var(--line-3);color:#fff;box-shadow:none}
.btn:active{transform:none;background:#141414}
.btn-primary{background:#fff;border-color:#fff;color:#000;box-shadow:none}
.btn-primary:hover{background:#d9d9de;border-color:#d9d9de;color:#000}
.btn-danger{background:transparent;border-color:#3a1f1f;color:var(--bad)}
.btn-danger:hover{background:var(--bad-soft);border-color:#55292b;color:#ff8a8a}
.btn-sm{height:26px;font-size:12.5px}
.btn-lg{height:40px;font-size:14px}

/* ---- поля */
/* селекторы повторяют app.css: у него input[type=…] — специфичнее простого input */
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],input[type=date],
input[type=url],input[type=tel],input[type=time],input:not([type]),select,textarea{
  background:#000;border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r-sm);box-shadow:none;height:32px}
textarea{height:auto}
/* шеврон одной штукой справа: `background:#000` выше сбрасывает repeat/position, и без явных значений
   стрелка замащивала всё поле рядом «˅˅˅˅» поверх текста (выглядело как десяток галочек) */
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px;padding-right:30px}
select[multiple],select[size]:not([size="1"]){background-image:none;padding-right:10px;height:auto}
select option{background:#0a0a0a;color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover,select:hover,textarea:hover{border-color:var(--line-3)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,114,245,.25);outline:none}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #0a0a0a inset;caret-color:var(--ink)}
.check input{accent-color:var(--brand)}
.switch input{background:#2e2e33}
.switch input:checked{background:var(--brand)}
.switch input::after{background:#fff}
.search input{background:#000}
.search kbd{background:#141414;border-color:var(--line-2);color:var(--ink-4)}

/* ---- таблицы */
.table th{background:#0a0a0a;color:var(--ink-3);border-color:var(--line);font-weight:500;letter-spacing:.02em}
.table td{border-color:var(--line)}
.table tbody tr:hover td{background:#0f0f0f}
.table th.on a{color:#fff}
.table a.obj{color:#fff}

/* ---- чипы, бейджи, вкладки */
.chip{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);border-radius:999px}
.chip:hover{background:#1a1a1a;color:#fff}
.chip.on{background:#fff;border-color:#fff;color:#000}
.chip.on b{opacity:.65}
.badge{border:1px solid transparent;border-radius:999px;font-weight:500}
.badge.info,.badge.running{background:var(--info-soft);color:var(--info);border-color:#123255}
.badge.ok,.badge.done,.badge.live{background:var(--ok-soft);color:var(--ok);border-color:#14402b}
.badge.warn,.badge.flood{background:var(--warn-soft);color:var(--warn);border-color:#3d2b08}
.badge.bad,.badge.failed,.badge.banned{background:var(--bad-soft);color:var(--bad);border-color:#43201f}
.badge.queued,.badge.mute,.badge.new{background:var(--mute-soft);color:var(--mute);border-color:var(--line-2)}
.tabs{border-color:var(--line)}
.tabs a{color:var(--ink-3)}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:#fff;border-color:#fff}
.bulk{background:#141414;border-color:var(--line-2)}
.bulk .cnt{color:#fff}
.callout{background:#0f0f0f;border-color:var(--line-2);color:var(--ink-2);border-radius:var(--r-sm)}
.callout.bad{background:var(--bad-soft);border-color:#43201f;color:#ff8a8a}
.mini{background:var(--brand)}
.key-prefix,.pill{background:#141414;border:1px solid var(--line);color:var(--ink-2)}

/* ---- прогресс: единственный крупный цвет */
.progress .pct{color:var(--ink-2);font-variant-numeric:tabular-nums}
.bar{background:#1f1f1f;border-radius:999px}
.bar>i{background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:999px}
.bar.ok>i{background:linear-gradient(90deg,#28a06b,var(--ok))}
.bar.bad>i{background:linear-gradient(90deg,#b93c3c,#ff8a8a)}
.bar.warn>i{background:linear-gradient(90deg,#b8801a,var(--warn))}
.steps span i{background:#141414;border:1px solid var(--line-2);color:var(--ink-3)}
.steps span.on i{background:#fff;border-color:#fff;color:#000}
.steps span.done i{background:#141414;border-color:var(--ok);color:var(--ok)}
.ccard:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,114,245,.18)}

/* ---- вход и секреты */
.secret{background:#000;border:1px solid var(--line-2);color:#fff;font-family:var(--mono)}
/* сетка на фоне входа: «grid — часть эстетики Vercel» */
body.login{background:
  radial-gradient(760px 380px at 50% -15%,rgba(0,114,245,.10),transparent 70%),
  linear-gradient(transparent 39px,#0f0f0f 39px,#0f0f0f 40px,transparent 40px),
  linear-gradient(90deg,transparent 39px,#0f0f0f 39px,#0f0f0f 40px,transparent 40px),
  #000;
  background-size:auto,40px 40px,40px 40px,auto}
.login-card{background:rgba(10,10,10,.92);border:1px solid var(--line-2);border-radius:var(--r);
  backdrop-filter:blur(14px);box-shadow:var(--shadow-2)}
.login-err{background:var(--bad-soft);color:var(--bad);border:1px solid #43201f}
::selection{background:rgba(0,114,245,.35);color:#fff}

/* ---- подвал: проект Cluster, как в Декретуме */
.foot{margin-top:auto;padding:18px 28px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-3);font-size:12px;border-top:1px solid var(--line)}
.foot a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3)}
.foot a:hover{color:#fff;text-decoration:none}
.foot svg{width:16px;height:16px;display:inline-block}

/* ---- раздел «Мониторинг» (docs/UX.md §16.1): нейтральное число непрочитанного и красная точка «требует внимания»
   в меню; тёмные рамки у callout warn/info (светлые рамки app.css на чёрном фоне светились) */
.nav-lp{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.nav-lp:empty{display:none}
.nav-badge.is-count{background:#1f1f1f;color:#fff;border:1px solid var(--line-2)}
.nav-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none}
.nav-dot.bad{background:var(--bad)}
.callout.warn{border-color:#3d2b08}
.callout.info{border-color:var(--line-2)}
.callout.ok{border-color:#14402b}
.callout.bad{border-color:#43201f}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- телефон: поля и кнопки (docs/UX.md §13).
   Селекторы повторяют app.css и блок «поля» выше — иначе тема (она грузится последней) вернёт
   свои 32 px. Шрифт поля не меньше 16 px: иначе iOS при фокусе зумит страницу и её потом не
   вернуть. Высота 40 px — палец, а не мышь. */
@media (max-width:760px){
  input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],input[type=date],
  input[type=url],input[type=tel],input[type=time],input:not([type]),select,textarea{font-size:16px;height:40px}
  textarea{height:auto;min-height:120px;padding:10px 12px}
  /* места, где app.css ставит свой мелкий шрифт полей, — тоже 16 px (свои мелкие поля
     lk.css, listen.css и sites.css чинят у себя: они грузятся после темы) */
  .filters select,.bulk select,.table input,.table select,textarea.mono{font-size:16px}
  .table input,.table select{height:34px}
  .bulk select{height:34px}
  .btn{height:38px;padding:0 14px}
  .btn-sm{height:32px;padding:0 12px}
  .btn-lg{height:44px}
  .chip{height:32px;padding:0 12px}
  .filters select{height:40px}
  .bulk select,.bulk .btn{height:32px}
  .switch,.switch input{width:44px;height:26px}
  .switch input::after{width:20px;height:20px}
  .switch input:checked::after{transform:translateX(18px)}
  input[type=checkbox]{width:18px;height:18px}
}

/* ---- оплата криптой (docs/ARCHITECTURE.md §22): одна карточка, ничего лишнего.
   Анимация здесь ровно одна и по делу — видно, что сервис ждёт перевод и считает время. */
.pay{max-width:620px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.pay-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.pay-amount{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.pay-clock{position:relative;width:52px;height:52px;flex:none}
.pay-clock svg{width:52px;height:52px;transform:rotate(-90deg)}
.pay-clock circle{fill:none;stroke-width:3}
.pay-clock .t{stroke:var(--line-2)}
.pay-clock .p{stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}
.pay-clock b{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pay.soon .pay-clock .p{stroke:var(--warn)}
.pay.soon .pay-clock b{color:var(--warn)}
.pay-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;margin:4px 0 16px}
.pay-qr{background:#fff;border-radius:var(--r-sm);padding:8px;width:168px;flex:none}
.pay-qr svg{display:block;width:100%;height:auto}
.pay-fields{min-width:0}
.pay-fields .field{margin-bottom:12px}
.pay-fields .secret{word-break:break-all;cursor:pointer;transition:border-color .2s,color .2s}
.pay-fields .secret:hover{border-color:var(--line-3)}
.pay-fields .secret.copied{border-color:var(--ok);color:var(--ok)}
.pay-fields .secret.copied::after{content:" скопировано";font-size:11px;color:var(--ok)}
.pay-net{color:var(--ink-3);font-size:12.5px;margin:0 0 16px}
.pay-wait{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:13px;
  border-top:1px solid var(--line);padding-top:14px}
.pay-wait .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;
  animation:pay-pulse 1.6s ease-in-out infinite}
@keyframes pay-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.pay-done{text-align:center;padding:14px 0 6px}
.pay-done h2{margin:12px 0 6px}
.pay-done p{margin:0 0 18px}
.pay-tick{width:64px;height:64px}
.pay-tick circle,.pay-tick path{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pay-tick circle{stroke-dasharray:151;animation:pay-draw .5s ease-out forwards}
.pay-tick path{stroke-dasharray:36;animation:pay-draw .35s .35s ease-out forwards;stroke-dashoffset:36}
@keyframes pay-draw{from{stroke-dashoffset:151}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .pay-wait .dot,.pay-tick circle,.pay-tick path{animation:none}
  .pay-tick path{stroke-dashoffset:0}
  .pay-clock .p{transition:none}
}
@media (max-width:640px){
  .pay{padding:18px 16px}
  .pay-body{grid-template-columns:1fr}
  .pay-qr{width:100%;max-width:220px;margin:0 auto}
  .pay-amount{font-size:26px}
}

/* ---------------------------------------------------------------- подсветка страницы в цвет площадки
   Свет площадки падает справа, как лампа за краем экрана, и гаснет к середине. Лежит В ФОНЕ: карточки,
   боковая панель и любые блоки закрывают его собой, видно только в просветах. Поверх заливки — лёгкое
   зерно, иначе большой градиент выглядит пластиковым.
   Цвет приходит переменной --src (admin/brands.py → render → base.html); у чёрно-белых площадок её нет. */
body.tinted::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to left,
    color-mix(in srgb,var(--src) 38%,transparent) 0%,
    color-mix(in srgb,var(--src) 20%,transparent) 18%,
    color-mix(in srgb,var(--src) 7%,transparent) 36%,
    transparent 56%)}
body.tinted::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");background-size:160px 160px}
/* содержимое — поверх подсветки */
body.tinted .shell{position:relative;z-index:1}
body.tinted .brand-mark,body.tinted .mbar-brand .brand-mark{color:var(--src)}
@media print{body.tinted::before,body.tinted::after{display:none}}