/* ===== БИБИНТО admin: liquid glass =====
   Стеклянные примитивы взяты из опердашборда Атмосферы (двойной безель +
   SVG-рефракция), палитра переведена на оранжевый бренда.
   Принцип: стекло живёт на КОНТРОЛАХ (шапка, кнопки, чипы), контент под ним
   остаётся читаемым. Рефракция через url(#lg) - только под @supports, иначе
   Safari теряет backdrop-filter целиком и панели становятся прозрачными. */

:root {
  color-scheme: dark;

  --ink: #0A0704;            /* тёплый почти-чёрный, не #000 */
  --amb: #ff9000;
  --amb-lo: #b35f00;
  --amb-hi: #ffb75c;

  --tx: #F6F0E9;
  --tx-mut: #A0958A;
  --tx-dim: #74695F;

  --ok: #57E0A6;
  --warn: #F6B450;
  --bad: #FF5D77;

  --hair: rgba(255, 255, 255, .085);
  --hair-2: rgba(255, 255, 255, .15);

  --e: cubic-bezier(.32, .72, 0, 1);
  --sh-amb: 0 34px 80px -44px rgba(0, 0, 0, .78), 0 8px 24px -18px rgba(0, 0, 0, .55);

  --r-out: 20px;
  --r-in: 15px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Onest', system-ui, -apple-system, sans-serif !important;
  background: var(--ink) !important;
  color: var(--tx);
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* цифры в таблицах не должны плясать по ширине */
table, .tnum, input[type="number"], code, pre { font-variant-numeric: tabular-nums; }

h1, h2, h3 { letter-spacing: -.4px; text-wrap: balance; }
/* Шаблоны просят font-black (900), но у Onest есть только до 700 - браузер
   дорисовывает недостающий вес сам и заголовок плывёт. Держим 700. */
h1[class~="font-black"], h1 { font-weight: 700 !important; }

/* ---------- фон: амбиентное свечение + зерно ---------- */
.aurora {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(115% 85% at 84% -10%, #2A1503 0%, transparent 52%),
    radial-gradient(95% 80% at 6% 112%, #1D1207 0%, transparent 48%),
    linear-gradient(180deg, #120A04, #0C0704 62%, var(--ink));
}
.aurora i {
  position: absolute; border-radius: 50%; filter: blur(85px);
  mix-blend-mode: screen; will-change: transform;
}
/* Свечение держим слабым и без резкой кромки: это подложка, а не декор.
   Всё, что ярче - лезет под панели и убивает контраст текста. */
.aurora .a {
  width: 58vw; height: 58vw; left: -22vw; top: -30vw;
  background: radial-gradient(circle, rgba(255, 144, 0, .16), transparent 70%);
  animation: dr1 34s var(--e) infinite alternate;
}
.aurora .b {
  width: 52vw; height: 52vw; right: -16vw; top: 2vh;
  background: radial-gradient(circle, rgba(179, 95, 0, .18), transparent 72%);
  opacity: .5; animation: dr2 40s var(--e) infinite alternate;
}
.aurora .c {
  width: 46vw; height: 46vw; left: 26vw; bottom: -24vw;
  background: radial-gradient(circle, rgba(255, 183, 92, .12), transparent 74%);
  opacity: .4; animation: dr3 37s var(--e) infinite alternate;
}
@keyframes dr1 { to { transform: translate3d(6vw, 6vh, 0) scale(1.12) } }
@keyframes dr2 { to { transform: translate3d(-5vw, -4vh, 0) scale(1.1) } }
@keyframes dr3 { to { transform: translate3d(4vw, -6vh, 0) scale(1.14) } }

.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none }
  * { transition-duration: .01ms !important }
}

/* ---------- примитив: двойной безель ---------- */
.bezel {
  position: relative; padding: 5px; border-radius: var(--r-out);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--hair);
  box-shadow: var(--sh-amb);
}
.core {
  position: relative; border-radius: var(--r-in); overflow: hidden;
  background: linear-gradient(158deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .038));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(255, 255, 255, .035);
}
.core::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(135% 90% at 50% -25%, rgba(255, 255, 255, .12), transparent 56%);
}
.glassy .core {
  -webkit-backdrop-filter: blur(9px) saturate(1.5);
  backdrop-filter: blur(9px) saturate(1.5);
}
/* Маркер называется .glassy, а НЕ .blur: у Tailwind есть утилита .blur
   (filter: blur(8px)) - она размывала саму шапку вместе с текстом.
   Настоящая рефракция - только там, где браузер тянет url() в backdrop-filter. */
@supports (backdrop-filter: blur(2px) url(#lg)) {
  .nav-island .core { backdrop-filter: blur(7px) saturate(1.6) url(#lg); }
}

/* ---------- шапка: плавающий остров ---------- */
.nav-island {
  position: sticky; top: 14px; z-index: 30;
  margin: 14px auto 26px; max-width: 1360px;
  width: calc(100% - clamp(24px, 4vw, 60px));
}
.nav-island .core { padding: 7px 9px; }
.nav-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.logo-mark {
  display: inline-flex; align-items: center; gap: 0;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em;
  margin-right: 10px; padding-left: 4px; text-decoration: none;
}
.logo-mark .l { color: #fff; padding-right: 5px; }
.logo-mark .r {
  background: linear-gradient(150deg, var(--amb-hi), var(--amb) 55%, var(--amb-lo));
  color: #1a0d00; padding: 3px 9px; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px -9px rgba(255, 144, 0, .8);
}

.nav-link {
  font-size: 13px; color: var(--tx-mut); text-decoration: none;
  padding: 10px 12px; border-radius: 10px; white-space: nowrap;
  transition: color .3s var(--e), background .3s var(--e);
}
@media (hover: hover) { .nav-link:hover { color: var(--tx); background: rgba(255, 255, 255, .05); } }
.nav-link.on {
  color: #fff; font-weight: 500;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.nav-link.on::after {
  content: ""; display: block; height: 2px; margin: 5px -4px -5px;
  border-radius: 2px; background: linear-gradient(90deg, transparent, var(--amb), transparent);
}

main { max-width: 1360px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 30px) 90px; }

.nav-links { display: contents; }
.nav-burger { display: none; }
.nav-settings { margin-left: auto; }

/* Сетки дашборда. Держим в css, а не в inline-style: инлайн не
   перебивается медиазапросом, и на телефоне дашборд уезжал вбок (699 при 390). */
.dash-cols { grid-template-columns: 1.35fr 1fr; }
/* Элементы grid по умолчанию не ужимаются ниже своего содержимого (min-width:
   auto), поэтому длинная строка события распирала колонку и всю страницу:
   на телефоне вылезало 495 при ширине 390. */
.dash-cols > *, .dash-res > * { min-width: 0; }
.dash-cols .truncate { min-width: 0; }
.dash-res  { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- телефон ----------
   Панель стала доступна с телефона (bibinto.dwkch.ru), а пользоваться ей
   оттуда было нельзя: таблица аккаунтов - 1267px в окне 364, крутить вбок в
   3,5 раза, кнопки действий за краем. Плюс меню из десяти ссылок занимало
   пять строк. Здесь таблицы превращаются в карточки, меню - в бургер. */
@media (max-width: 820px) {
  main > .flex, main > div > .flex { flex-wrap: wrap; }
  .nav-island { top: 8px; margin-top: 8px; }

  .dash-cols { grid-template-columns: 1fr; }
  .dash-res  { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    margin-left: auto; width: 42px; height: 38px; padding: 0 9px;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--hair);
    border-radius: 10px; cursor: pointer;
  }
  .nav-burger span {
    display: block; height: 2px; border-radius: 2px; background: var(--tx);
    transition: transform .3s var(--e), opacity .2s var(--e);
  }
  .nav-row.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-row.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-row.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-links {
    display: none; flex-basis: 100%; flex-direction: column; gap: 2px;
    padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--hair);
  }
  .nav-row.open .nav-links { display: flex; }
  .nav-link { padding: 12px; }          /* палец, а не курсор */
  .nav-settings { margin-left: 0; }
  .nav-link.on::after { display: none; }

  /* ---------- таблица -> карточки ---------- */
  .overflow-x-auto { overflow-x: visible; }
  table[data-cards] { display: block; width: 100%; }
  table[data-cards] thead { display: none; }
  table[data-cards] tbody { display: block; }

  table[data-cards] tbody tr {
    display: block; margin-bottom: 12px; padding: 12px 14px;
    border: 1px solid var(--hair); border-radius: 16px;
    background: rgba(255, 255, 255, .035);
  }
  table[data-cards] tbody tr + tr { border-top: 1px solid var(--hair); }

  table[data-cards] tbody td {
    display: flex; align-items: baseline; gap: 10px;
    padding: 4px 0 !important; white-space: normal !important;
    border: 0; text-align: left !important;
  }
  table[data-cards] tbody td::before {
    content: attr(data-label);
    flex: 0 0 42%; min-width: 0;
    color: var(--tx-dim); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .06em;
  }

  /* Первая ячейка - заголовок карточки (телефон, имя): без подписи, крупнее. */
  table[data-cards] tbody td:first-child {
    font-size: 15px; font-weight: 600; padding-bottom: 8px !important;
    margin-bottom: 6px; border-bottom: 1px solid var(--hair);
  }
  table[data-cards] tbody td:first-child::before { content: none; }

  /* Последняя - действия: во всю ширину, кнопки крупные и вразрядку. */
  table[data-cards] tbody td:last-child {
    flex-wrap: wrap; gap: 6px; padding-top: 10px !important;
    margin-top: 6px; border-top: 1px solid var(--hair);
  }
  table[data-cards] tbody td:last-child::before {
    flex-basis: 100%; margin-bottom: 4px;
  }
  /* Семь действий должны влезать в одну строку карточки: перенос на второй
     ряд выглядел случайным и у разных аккаунтов ломался по-разному. */
  table[data-cards] tbody td:last-child { gap: 5px; }
  table[data-cards] tbody td:last-child [title] {
    min-width: 36px !important; min-height: 36px !important;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--hair);
    font-size: 16px;
  }
  table[data-cards] tbody td:last-child [title="Удалить"] { margin-left: 3px; }
  table[data-cards] tbody td:last-child form { display: inline-flex; }

  /* Пустые ячейки в карточке - шум, скрываем вместе с подписью. */
  table[data-cards] tbody td:empty { display: none; }
}

/* ---------- автоапгрейд существующей вёрстки ----------
   Шаблоны везде используют одну и ту же пару утилит Tailwind под панель.
   Ловим её селектором, чтобы не переписывать девять страниц руками.
   Специфичность (0,2,0) бьёт утилиты Tailwind (0,1,0) при любом порядке. */
[class~="bg-zinc-950"][class~="border-zinc-800"] {
  /* Тёмная подложка ПОД стеклянным градиентом: без неё панель просто светлеет
     на фоне и текст на ней теряет контраст. */
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018) 46%, rgba(255, 255, 255, .036)),
    rgba(10, 7, 4, .62) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-out) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), var(--sh-amb);
  -webkit-backdrop-filter: blur(11px) saturate(1.35);
  backdrop-filter: blur(11px) saturate(1.35);
}

/* ---------- контраст текста ----------
   Шаблоны используют холодную шкалу zinc, она на тёплом стекле читается
   плохо (на /settings подписи почти пропадали). Переводим на тёплую шкалу
   и поднимаем светлоту приглушённых уровней. */
[class~="text-zinc-300"] { color: #DED5CB !important; }
[class~="text-zinc-400"] { color: #C6BCB1 !important; }
[class~="text-zinc-500"] { color: #A79C90 !important; }
[class~="text-zinc-600"] { color: #8D8276 !important; }
[class~="text-white"] { color: #FBF7F2 !important; }

/* поля ввода: утопленные, не выпуклые */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background: rgba(0, 0, 0, .3) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 11px !important;
  color: var(--tx);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .38);
  transition: border-color .3s var(--e), box-shadow .3s var(--e), background .3s var(--e);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(255, 144, 0, .55) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .38), 0 0 0 3px rgba(255, 144, 0, .16);
}
input::placeholder, textarea::placeholder { color: var(--tx-dim); }

/* фокус с клавиатуры виден всегда */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(255, 144, 0, .7); outline-offset: 2px; border-radius: 8px;
}

/* ---------- кнопки ---------- */
button, .btn {
  font-family: inherit;
  transition: transform .18s var(--e), background .3s var(--e),
              border-color .3s var(--e), box-shadow .3s var(--e), color .3s var(--e);
}
button:active, .btn:active { transform: translateY(1px) scale(.985); }

/* главная (оранжевая) */
/* ~= ловит ТОЛЬКО целый класс bg-[#ff9000]. С *= под правило попадали и
   полупрозрачные варианты вроде bg-[#ff9000]/10 - плашка «Проверено: 0/5»
   заливалась сплошным оранжевым вместо мягкого тона. */
[class~="bg-[#ff9000]"], .btn-primary {
  background: linear-gradient(180deg, var(--amb-hi), var(--amb) 52%, var(--amb-lo)) !important;
  color: #1a0d00 !important; border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 11px !important; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 8px 20px -12px rgba(255, 144, 0, .85);
}
[class~="bg-[#ff9000]"]:hover, .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 26px -12px rgba(255, 144, 0, 1);
  filter: brightness(1.06);
}

/* второстепенная (стеклянная) */
[class~="bg-zinc-900"]:not(input):not(textarea):not(select):not(pre):not(code),
.btn-ghost {
  background: rgba(255, 255, 255, .055) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 11px !important;
  color: var(--tx);
}
[class~="bg-zinc-900"]:not(input):not(textarea):not(select):not(pre):not(code):hover,
.btn-ghost:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: var(--hair-2) !important;
}

/* ---------- иконки-действия в таблицах ----------
   Эмодзи-кнопки не имели собственной площади: реальный размер 9-15 x 16px,
   и «Удалить» стоит вплотную к остальным. Промах по соседней иконке в такой
   строке стоит аккаунта, поэтому даём каждой honest hit-area. */
button[title], a[title] {
  transition: transform .18s var(--e), filter .3s var(--e), background .25s var(--e);
}
table button[title], table a[title] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; border-radius: 7px; line-height: 1;
}
@media (hover: hover) {
  button[title]:hover, a[title]:hover { filter: drop-shadow(0 0 8px rgba(255, 144, 0, .55)); }
  table button[title]:hover, table a[title]:hover { background: rgba(255, 255, 255, .09); }
}
/* удаление отделено зазором и красной подсветкой - его не жмут вслепую */
table [title="Удалить"] { margin-left: 6px; }
@media (hover: hover) {
  table [title="Удалить"]:hover {
    background: rgba(255, 93, 119, .16);
    filter: drop-shadow(0 0 8px rgba(255, 93, 119, .6));
  }
}

/* ---------- таблицы ---------- */
table thead {
  color: var(--tx-dim);
  background: rgba(0, 0, 0, .22);
}
table thead th {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; padding: 11px 5px; white-space: nowrap;
}
/* Воздух в ячейках держим скромным: на /accounts тринадцать колонок, и лишние
   10px с каждой стороны выталкивали колонку «Действия» за край контейнера.
   5px вместо 6 - это ~26px запаса, чтобы персона с длинным именем
   («Екатерина, 22») не выдавила таблицу обратно за край. */
table tbody td { padding-left: 5px; padding-right: 5px; }
/* Первая колонка несёт утилиту p-3 (12px) прямо в разметке - она бьёт правило
   выше по специфичности. Подбираем её отдельно: 8px по бокам дают те самые
   ~8px, которых не хватало персоне с длинным именем. */
table thead th[class~="p-3"], table tbody td[class~="p-3"] { padding: 10px 8px; }
/* Колонка выбора - служебная, ей широкие поля ни к чему; в таблице аккаунтов
   тринадцать содержательных колонок, и каждый лишний пиксель тут выталкивает
   «Действия» за край. */
table thead th[class~="w-8"], table tbody td[class~="w-8"] {
  padding: 10px 2px !important; width: 26px;
}
table tbody td[class~="w-8"] input, table thead th[class~="w-8"] input {
  margin: 0; vertical-align: middle;
}
/* Идентификатор строки (телефон, имя) рвать нельзя. Вторую колонку тоже: в
   таблице аккаунтов первой стала галочка выбора, и телефон уехал на позицию
   два - без этого он снова разъезжается на две строки. */
table tbody td:first-child,
table tbody td:nth-child(2) { white-space: nowrap; }
table tbody tr { transition: background .25s var(--e); }
@media (hover: hover) { table tbody tr:hover { background: rgba(255, 255, 255, .038); } }
table tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .05); }

/* ---------- прочее ---------- */
pre, code {
  background: rgba(0, 0, 0, .34) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 10px !important;
  color: var(--tx-mut);
}
hr, .divide-y > * + * { border-color: rgba(255, 255, 255, .06) !important; }

/* мягкое появление контента, без «мигания» всей страницы */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: rise .55s var(--e) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- пальцем, а не мышью ---------- */
/* Панель открывают и с телефона: сводку смотрят по дороге, аккаунт
   останавливают из кровати. Замер 03.08 показал галочки выбора по 13 пикселей
   и кнопки «выкл» по 16 - в такое на ходу не попасть, промах по соседней
   кнопке в этой панели означает остановленный аккаунт или удалённую строку.
   Разводим только там, где нет мыши: на десктопе плотность таблиц - это
   удобство, а не недосмотр. */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px;
  }
  button, a.btn, input[type="submit"], select {
    min-height: 40px;
  }
  /* Кнопки-иконки в строках таблицы (▶ ⏸ 🎲 ✏️ ×) - самые мелкие цели во
     всей панели и при этом самые опасные. Только то, по чему реально можно
     нажать: у выключенных действий в строке стоит <span> с подсказкой
     «почему нельзя», и с этим правилом он превращался в пустую рамку -
     выглядело как сломанная кнопка. */
  table button, table a[href], table input[type="submit"] {
    min-height: 40px; min-width: 40px;
  }
  /* Ссылка внутри абзаца остаётся ссылкой в тексте: раздувать её нельзя,
     иначе строка распадается. */
  p a, li a, .prose a, td a.inline, span a { min-height: 0; min-width: 0; }
}

/* Выключенное действие не должно выглядеть кнопкой. В строке аккаунта на месте
   недоступной кнопки стоит <span> с подсказкой «почему нельзя» - и он получал
   ту же плашку с рамкой и фоном, что и живые кнопки рядом. Человек жмёт и
   ничего не происходит: ровно то молчание, от которого панель и лечили. */
td span[title][class*="opacity-"] {
  background: none !important;
  border-color: transparent !important;
  cursor: not-allowed;
  box-shadow: none !important;
}