/* ============================================================
   Prels dashboard — design layer
   Compact scale: static 248px sidebar, one packed filter row,
   three prel cards per row inside a 1120px content column.
   ============================================================ */

:root {
  --bg: #F1F2F4;
  --surface: #FFFFFF;
  --line: #E4E6EA;
  --ink: #16181D;
  --ink-2: #5C6270;
  --ink-3: #8B909C;

  --sidebar: #24262B;
  --sidebar-item: rgba(255, 255, 255, 0.07);
  --sidebar-item-hover: rgba(255, 255, 255, 0.13);
  --sidebar-ink: #C9CCD3;
  --sidebar-w: 248px;

  --accent: #635BFF;
  --accent-hover: #524BE0;

  --content-max: 1120px;

  --r-pill: 11px;
  --r-chip: 10px;
  --r-card: 14px;

  --group-bg: #F7F8FA;
  --group-bg-0: rgba(247, 248, 250, 0);
  --group-count-bg: #E7E9ED;
  --group-row-hover: #ECEEF2;
  --scroll-thumb: #C3C7D0;
  --scroll-thumb-hover: #A2A7B3;

  --shadow-card: 0 1px 2px rgba(16, 18, 23, 0.04), 0 5px 16px rgba(16, 18, 23, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(16, 18, 23, 0.06), 0 10px 26px rgba(16, 18, 23, 0.11);
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */

.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 22px 28px 36px 30px;
}

/* ---------- Sidebar (static — never scrolls) ---------- */

.sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 16px 20px;
  overflow: hidden;
  background: var(--sidebar);
  border-radius: 0 16px 16px 0;
}

.sidebar__section { margin-top: 22px; }
.sidebar__section--profile { margin-top: auto; padding-top: 22px; }

.sidebar__title {
  margin: 0 0 10px 10px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--sidebar-item);
  color: var(--sidebar-ink);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__item:hover {
  background: var(--sidebar-item-hover);
  color: #FFFFFF;
}

.nav__item--lead {
  height: 42px;
  font-size: 14.5px;
  font-weight: 600;
}

.nav__item--active {
  background: #EDEEF1;
  color: var(--ink);
  font-weight: 600;
}

.nav__item--active:hover { background: #FFFFFF; color: var(--ink); }

.page {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ---------- Кнопки й чипси ---------- */

/* `.filter` — спільна кнопка всіх екранів: нею скидають фільтри, приміняють
   панель і гортають сторінки. Живе тут, бо перший екран, який її показує, —
   дошка. */
.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.filter:hover {
  border-color: #CFD2D9;
  box-shadow: 0 1px 5px rgba(16, 18, 23, 0.06);
}

.filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filter__caret { color: var(--ink-3); flex: 0 0 auto; }

.filter--apply {
  margin-left: 4px;
  padding: 0 18px;
  border-color: transparent;
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.filter--apply:hover {
  background: var(--accent-hover);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3);
}

/* ============================================================
   Дошка прілів (/ і /games/<slug>/).

   Головна й сторінка сервісу — одна сторінка з різним зрізом, тож і скелет
   у них спільний з рештою розділів: шапка → смуга зведення → робоча панель →
   сітка. Вкладки, пошук і шухляда фільтрів — ті самі, що в реєстрі джерел:
   їхні правила лежать у розділі налаштувань, тут — лише картка й сітка.
   ============================================================ */

.page--board { max-width: var(--content-max); }

.page--board .pagehead { align-items: flex-end; margin-bottom: 14px; }
.page--board .pagehead__title { font-size: 23px; }
.page--board .pagehead__sub { margin-top: 3px; font-size: 12.5px; }

.boardbar__hint {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Сітка ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* ---------- Картка прілу ---------- */

/* Раніше картка була сама по собі: темна шапка з градієнтом акценту не
   зустрічалась більше ніде в сервісі. Тепер це та сама біла поверхня, що
   рядок реєстру й подія в стрічці, а колір лишився там, де він щось означає:
   у смужці тону, тегу статусу й монограмі сервісу. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* Тон прілу веде смужка ліворуч — та сама мова, що в стрічці й реєстрі. */
.card__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 3px;
  background: var(--tone, var(--ink-3));
}

.card[data-tone="green"] { --tone: #2FB47C; }
.card[data-tone="red"]   { --tone: #E2504F; }
.card[data-tone="grey"]  { --tone: #C7CAD1; }

/* Заблокований пріл мертвий, і картка не має вдавати інше: фон холоне, а
   скріншот знебарвлюється — його вже нікому не показати. */
.card--banned { background: color-mix(in srgb, #E2504F 4%, #FFFFFF); }
.card--banned .card__shot { background: color-mix(in srgb, #E2504F 5%, #F3F4F6); }
.card--banned .card__shot img { filter: grayscale(0.65); opacity: 0.72; }

/* Висота шапки фіксована: назви лістингу немає в кожного пріла, і без цього
   картки в ряду розʼїхались би, а над кнопкою в store зяяло б порожнє місце.
   Місця тут рівно на всі чотири рядки — тримає його сама шапка, а не порожній
   рядок усередині: зарезервоване місце під текст, якого немає, баєр читає як
   текст, що не догрузився.

   Текст сидить угорі, а не по центру. Інакше шапка з назвою в сторі та без неї
   центрували б різну кількість рядків, і назви сусідніх карток у ряду стояли б
   на різній висоті. Зверху ж збігаються завжди перші три рядки — назва, сервіс
   і джерела, — а четвертий просто дописується знизу, у те саме місце, яке при
   центруванні лишалось би повітрям. */
.card__head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 98px;
  padding: 11px 13px 11px 17px;
}

/* Монограма під сервіс: у сітці з тридцяти карток око спершу ловить колір
   розділу, і тільки потім читає назву. Стоїть при назві, а не посеред шапки:
   двома пікселями нижче за верх рядка вона оптично сідає на пару «назва +
   сервіс», з якою її й читають. */
.card__logo {
  margin-top: 2px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 11px;
  background: color-mix(in srgb, var(--card-accent) 14%, #FFFFFF);
  color: color-mix(in srgb, var(--card-accent) 72%, #101217);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.card__logo img { width: 100%; height: 100%; object-fit: cover; }

/* Під справжньою іконкою тло вимикається: воно тонувалось під сервіс, а
   іконка приносить власний колір. Рамка лишається — світлі іконки без неї
   розтікаються по білій картці. */
.card__logo--icon {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(16, 18, 23, 0.1);
}

.card__meta { flex: 1; min-width: 0; }

.card__name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Уся картка — вхід у повну інформацію про пріл. Посилання одне, висить на
   назві, а клік ловить по всій картці: накладка-псевдоелемент розтягується на
   її межі. Вкладати кнопку «Відкрити в store» в таке посилання не можна, тож
   вона просто стоїть вище за накладку й лишається окремим шляхом. */
.card__open {
  color: inherit;
  text-decoration: none;
}

.card__open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Курсор і підсвітка назви йдуть від усієї картки — інакше єдиним натяком на
   клікабельність лишався б підйом тіні. */
.card:hover .card__open { color: var(--accent); }

/* Обвести саме посилання нема чого: видимого тіла в накладки немає, тож
   фокус малює картка цілком. */
.card:has(.card__open:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.card__where {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

.card__where span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__sep { flex: 0 0 auto; }

/* Назва зі стору — довідка, а не заголовок: вона тихіша за все в шапці й
   ніколи не важить більше за назву, під якою пріл знають у команді. */
.card__listing {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: 11px;
}

.card__listing span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__listing-icon { flex: 0 0 auto; opacity: 0.75; }

/* Джерела трафіку — єдиний рядок шапки, який відповідає на «а мені його
   можна?». Тому він трохи темніший за назву в сторі, але однаково тихіший за
   заголовок: це умова допуску, а не імʼя прілу. Один рядок і крапки замість
   плашок — так у ширину картки влазить увесь список, а не три штуки з нього;
   решта, якщо не влізло, лишається в підказці й у фільтрі «Трафік». */
.card__traffic {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 15px;
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 11px;
}

.card__traffic span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__traffic-icon { flex: 0 0 auto; opacity: 0.7; }

/* Бот джерел не назвав. Рядок гасне до кольору довідки, але лишається на
   місці: мовчання тут — не «лий звідки хочеш», а «ми не знаємо», і сказати це
   треба словами. Пунктирне підкреслення кличе на підказку, де написано, що
   робити далі. */
.card__traffic--none {
  color: var(--ink-3);
}

.card__traffic--none .card__traffic-icon { opacity: 0.5; }

.card__traffic--none span {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 55%, transparent);
}

.card__head .tag { flex: 0 0 auto; }

/* Висоту тримає пропорція, а не картинка: банери прилітають будь-якої форми,
   і без `min-height: 0` бокс у флекс-колонці розтягується під натуральний
   розмір — картки в рядку розʼїжджаються, а над кнопкою в store зяє пусте
   місце. Усе зайве обрізається, бо низи карток мусять стояти на одній лінії. */
.card__shot {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 411 / 234;
  border-top: 1px solid var(--line);
  background: #F3F4F6;
}

.card__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Заглушка, поки до прілу не причепився жоден скріншот. */
.card__shot-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--card-accent) 55%, #6C7280);
  background:
    radial-gradient(95% 130% at 16% 8%, color-mix(in srgb, var(--card-accent) 20%, transparent), transparent 58%),
    radial-gradient(85% 120% at 94% 98%, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 56%),
    linear-gradient(160deg, #EEF0F3, #E2E5EA);
}

.card__shot-fallback svg { opacity: 0.55; }

/* Рядок довідки: чим пріл є в сторі й коли про нього востаннє чули.
   Висота фіксована — навіть коли ні package, ні дати немає, щоб низи карток
   у сітці стояли на одній лінії. */
.card__id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 8px 13px 8px 17px;
  color: var(--ink-3);
  font-size: 11.5px;
}

.card__id code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__when {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* Кнопка в store: тиха смужка на всю ширину картки — однакова висота
   в кожній картці сітки. Голосною вона стає лише під курсором, щоб не
   сперечатися з прев'ю. */
.card__store {
  position: relative;
  /* Вище за накладку, якою картка ловить клік: інакше прямий шлях у стор
     перехопило б посилання на сторінку прілу. */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  height: 42px;
  margin-top: auto;
  padding: 0 13px 0 17px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.card__store-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__store-icon {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #F1F2F5;
  color: var(--ink-2);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.card__store:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--accent);
}

.card__store:hover .card__store-icon {
  background: var(--accent);
  color: #FFFFFF;
  transform: translate(1px, -1px);
}

.card__store:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 0 0 var(--r-card) var(--r-card);
}

/* Пріл без посилання — та сама смужка, щоб сітка лишалась рівною. */
.card__store--off { color: var(--ink-3); font-weight: 500; }

/* ---------- Пагінація ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0 4px;
}

.pager__at {
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Край дошки лишається на місці, а не зникає: кнопка гасне, але тримає
   рядок — інакше «Наступна» стрибала б на місце «Попередньої». */
.filter--off { color: var(--ink-3); cursor: default; opacity: 0.55; }
.filter--off:hover { border-color: var(--line); box-shadow: none; }


/* ============================================================
   Event feed (/events/) — one column, live tail on top.
   ============================================================ */

.page--feed {
  --feed-max: 880px;
  max-width: var(--feed-max);
}

.pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

.pagehead__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pagehead__sub {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
}

.pagehead__count {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pagehead__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ліва половина шапки має право стискатись — інакше довгий підзаголовок
   виштовхує дію праворуч за край колонки. */
.pagehead__lead { min-width: 0; }

/* ---------- Manual resync ---------- */

.resync { display: flex; margin: 0; }

.resync__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.resync__btn:hover { border-color: var(--ink-3); color: var(--ink); }

.resync__btn:disabled { cursor: progress; opacity: 0.75; }

.resync__icon { flex: 0 0 auto; }

.resync__btn[data-busy] .resync__icon {
  transform-origin: 50% 50%;
  animation: resync-spin 0.9s linear infinite;
}

@keyframes resync-spin { to { transform: rotate(360deg); } }

.resync__note {
  margin: -8px 0 12px;
  color: var(--ink-2);
  font-size: 12px;
  text-align: right;
}

.resync__note--warn { color: #C2410C; }

@media (prefers-reduced-motion: reduce) {
  .resync__btn[data-busy] .resync__icon { animation: none; }
}

@media (max-width: 620px) {
  .resync__label { display: none; }
  .resync__btn { padding: 0 9px; }
}

/* ---------- Filter bar ---------- */

.feedbar {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 0 14px;
  padding: 10px 0 12px;
  background: linear-gradient(var(--bg) 78%, rgba(241, 242, 244, 0));
}

.feedbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 200px;
  height: 34px;
  padding: 0 32px 0 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.search__icon {
  position: absolute;
  left: 11px;
  color: var(--ink-3);
}

.search__input {
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.search__input::placeholder { color: var(--ink-3); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.search__clear:hover { background: #EEF0F3; color: var(--ink); }

.filter--toggle.filter--open { border-color: var(--accent); color: var(--accent); }
.filter--toggle.filter--open .filter__caret { transform: rotate(180deg); }
.filter__caret { transition: transform 0.15s ease; }

.filter__badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.filter--icon { padding: 0 11px; font-size: 12.5px; }

/* ---------- Типи подій просто в рядку ---------- */

/* «Покажи тільки бани» — те, по що стрічку відкривають щодня. Раніше це
   коштувало двох кліків углиб панелі; тепер це один клік на видноті. */
.types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.typechip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.typechip:hover { border-color: #CFD2D9; color: var(--ink); }

/* Справжній чекбокс лишається носієм значення й ловить фокус — ми лише
   кладемо його на всю площу чипса й робимо прозорим. */
.typechip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.typechip .dot { flex: 0 0 7px; }

.typechip:has(input:checked) {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 45%, var(--line));
  background: color-mix(in srgb, var(--tone, var(--accent)) 10%, #FFFFFF);
  color: color-mix(in srgb, var(--tone, var(--accent)) 82%, #101217);
}

.typechip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Щільність стрічки ---------- */

.dense {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.dense__btn {
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dense__btn:hover { background: var(--group-row-hover); color: var(--ink); }
.dense__btn--on,
.dense__btn--on:hover { background: var(--ink); color: #FFFFFF; }

.views { display: inline-flex; gap: 6px; align-items: center; }

.views__select {
  height: 34px;
  max-width: 170px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2FB47C;
  box-shadow: 0 0 0 0 rgba(47, 180, 124, 0.55);
  animation: live-pulse 2s infinite;
}

.live--off { color: var(--ink-3); }
.live--off .live__dot { background: var(--ink-3); animation: none; box-shadow: none; }

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 180, 124, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(47, 180, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 180, 124, 0); }
}

/* ---------- Expanded panel ---------- */

.panel {
  margin-top: 10px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Each group is its own card so neighbouring columns never read as one list. */
.group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  max-height: 248px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--group-bg);
}

/* A bordered <fieldset> would notch its border around the legend — floating the
   legend takes it out of that special layout and back into normal flow. */
.group__title {
  float: left;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 9px;
  padding: 0;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.group__count {
  min-width: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--group-count-bg);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.group__list {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 -5px -3px;
  padding: 0 5px 3px;
}

/* Scrollable groups: a permanently visible scrollbar plus edge shadows that
   uncover themselves as you scroll — on macOS the overlay scrollbar alone is
   invisible until you touch the list, so nothing hints at the hidden rows. */
.group__list--scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 9px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
  background:
    linear-gradient(var(--group-bg) 30%, var(--group-bg-0)) top / 100% 26px no-repeat local,
    linear-gradient(var(--group-bg-0), var(--group-bg) 70%) bottom / 100% 26px no-repeat local,
    linear-gradient(rgba(16, 18, 23, 0.09), rgba(16, 18, 23, 0)) top / 100% 12px no-repeat scroll,
    linear-gradient(rgba(16, 18, 23, 0), rgba(16, 18, 23, 0.09)) bottom / 100% 12px no-repeat scroll;
}

@supports selector(::-webkit-scrollbar) {
  .group__list--scroll { scrollbar-width: auto; scrollbar-color: auto; }
}

.group__list--scroll::-webkit-scrollbar { width: 9px; }
.group__list--scroll::-webkit-scrollbar-track { background: transparent; }

.group__list--scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scroll-thumb);
  background-clip: content-box;
}

.group__list--scroll::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.25;
  cursor: pointer;
}

.check:hover { background: var(--group-row-hover); }

.check:has(input:checked) { color: var(--ink); font-weight: 550; }

.check:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -1px;
}

.check input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.check input:focus-visible { outline: none; }

.check span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }

.input {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.input--select { cursor: pointer; }

.input--search {
  flex: 1 1 260px;
  min-width: 250px;
  max-width: 360px;
  text-overflow: ellipsis;
}

/* The period group holds a select rather than rows, so it keeps its own height
   instead of stretching to the tallest card in the row. */
.group:has(.group__list--field) { align-self: start; }

.group__list--field { flex: 0 0 auto; gap: 7px; margin: 0; padding: 0; }

.range { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }

.range__field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
}

.range__field .input { flex: 1; min-width: 0; }

.panel__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.panel__hint {
  margin-right: auto;
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Active filter chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  height: 26px;
  padding: 0 8px 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.chip:hover { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }

.chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__x { color: var(--ink-3); font-size: 14px; line-height: 1; }

/* ---------- "N new events" pill ---------- */

.newpill {
  position: sticky;
  top: 62px;
  z-index: 5;
  display: flex;
  justify-content: center;
  height: 0;
}

.newpill__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(99, 91, 255, 0.35);
  animation: pill-in 0.22s ease;
}

.newpill__btn:hover { background: var(--accent-hover); }

.newpill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
}

@keyframes pill-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Feed ---------- */

.feed { display: flex; flex-direction: column; gap: 8px; }

.daymark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.daymark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.feed .daymark:first-child { margin-top: 0; }

.event {
  position: relative;
  overflow: hidden;
  padding: 11px 15px 12px 17px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease, background-color 0.15s ease;
}

/* Тон події веде смужка ліворуч — та сама мова, що в реєстрі джерел. */
.event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone, var(--ink-3));
}

.event[data-tone="green"]  { --tone: #2FB47C; }
.event[data-tone="blue"]   { --tone: #3F8FD1; }
.event[data-tone="red"]    { --tone: #E2504F; }
.event[data-tone="violet"] { --tone: #7A5BF0; }
.event[data-tone="amber"]  { --tone: #E0932C; }
.event[data-tone="grey"]   { --tone: #C7CAD1; }

/* Бан і обмеження — те, через що стрічку відкривають поспіхом. Вони мають
   ловити око ще до того, як прочитано тег. */
.event[data-tone="red"]   { background: color-mix(in srgb, #E2504F 4%, #FFFFFF); }
.event[data-tone="amber"] { background: color-mix(in srgb, #E0932C 4%, #FFFFFF); }

/* Службове — фон збору, а не подія: воно потрібне адміну як доказ, що потік
   живий, і не має конкурувати з прілами за увагу. */
.event[data-type="service"],
.event[data-type="telegram_message"] {
  border: 1px solid var(--line);
  box-shadow: none;
}

.event:hover { box-shadow: var(--shadow-card-hover); }
.event--fresh { animation: event-in 0.5s ease; }

@keyframes event-in {
  from { opacity: 0; transform: translateY(-6px); background: color-mix(in srgb, var(--accent) 8%, #FFFFFF); }
  to   { opacity: 1; transform: none; }
}

/* Порядок рядків задає flex, а не розмітка: у компактному режимі «де» й час
   стають у той самий рядок, що й заголовок, без зміни HTML. */
.event__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
}

.event__top {
  order: 1;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.event__title {
  margin: 0;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.event__title a { color: inherit; text-decoration: none; }
.event__title a:hover { color: var(--accent); }
.event__title--quiet { font-weight: 500; color: var(--ink-2); font-size: 13.5px; }

.event__time {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ink-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Де це сталося — один тихий рядок під заголовком. */
.event__where {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 11.5px;
}

.event__where code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--group-bg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
}

.event__sep { color: var(--ink-3); }
.event__status--banned { color: #C23C3B; font-weight: 600; }
.event__status--in_store { color: #1F8F63; font-weight: 600; }

.event__perma {
  margin-left: auto;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}

.event__perma:hover { color: var(--accent); }

/* Три рядки тексту — стеля картки. Довгий пост бота інакше розганяє її на
   пів екрана, і сусідні події з нього зникають. */
.event__text {
  order: 4;
  flex: 1 1 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.event--open .event__text { -webkit-line-clamp: unset; overflow: visible; }

.event__more {
  order: 5;
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.event__more:hover { color: var(--accent); }

.event__text a,
.tgmsg__text a { color: #2481CC; overflow-wrap: anywhere; }

.event__media {
  order: 4;
  flex: 1 1 100%;
  display: block;
  width: min(460px, 100%);
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
  background: #EEF1F4;
}

.event__media img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.event__links {
  order: 6;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.event__links .tgmsg__button { padding: 6px 10px; font-size: 12px; }

/* ---------- Компактна стрічка ---------- */

/* Стрічку читають двома різними способами: швидким проходом по заголовках і
   власне читанням. Компактний режим обслуговує перший: текст, картинки й
   кнопки ховаються, картки злипаються в один список — на екран влазить
   утричі більше подій. */
.feed[data-density="compact"] {
  gap: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.feed[data-density="compact"] .event {
  padding: 7px 14px 7px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.feed[data-density="compact"] .event:hover { box-shadow: none; background: var(--group-bg); }

.feed[data-density="compact"] .event__text,
.feed[data-density="compact"] .event__links,
.feed[data-density="compact"] .event__media,
.feed[data-density="compact"] .event__more { display: none; }

.feed[data-density="compact"] .event__body { flex-wrap: nowrap; }
.feed[data-density="compact"] .event__top { flex: 0 1 auto; flex-wrap: nowrap; }

.feed[data-density="compact"] .event__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed[data-density="compact"] .event__where {
  order: 2;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

.feed[data-density="compact"] .event__perma { display: none; }
.feed[data-density="compact"] .event__time { order: 3; }

.feed[data-density="compact"] .daymark {
  margin: 0;
  padding: 9px 14px 7px 16px;
  background: var(--group-bg);
}

.feed[data-density="compact"] .daymark::after { display: none; }

/* Type tags — tone is set per event type. */

.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tone) 13%, #FFFFFF);
  color: color-mix(in srgb, var(--tone) 78%, #101217);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.tag--green,  .dot--green,  .typechip--green,  .mono--green  { --tone: #2FB47C; }
.tag--blue,   .dot--blue,   .typechip--blue,   .mono--blue   { --tone: #3F8FD1; }
.tag--red,    .dot--red,    .typechip--red,    .mono--red    { --tone: #E2504F; }
.tag--violet, .dot--violet, .typechip--violet, .mono--violet { --tone: #7A5BF0; }
.tag--amber,  .dot--amber,  .typechip--amber,  .mono--amber  { --tone: #E0932C; }
.tag--grey,   .dot--grey,   .typechip--grey,   .mono--grey   { --tone: #8B909C; }

.dot--green  { background: #2FB47C; }
.dot--blue   { background: #3F8FD1; }
.dot--red    { background: #E2504F; }
.dot--violet { background: #7A5BF0; }
.dot--amber  { background: #E0932C; }
.dot--grey   { background: #8B909C; }

/* ---------- Payload ---------- */

.payload { margin-top: 9px; }

.payload__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px 3px 7px;
  border-radius: 8px;
  background: #F3F4F6;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.payload__toggle::-webkit-details-marker { display: none; }
.payload__toggle:hover { background: #ECEEF1; color: var(--ink); }

.payload__caret { transition: transform 0.15s ease; }
.payload[open] .payload__caret { transform: rotate(180deg); }

.payload__hint { color: var(--ink-3); font-weight: 500; }

.payload__body {
  max-height: 320px;
  margin: 8px 0 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #FAFBFC;
  color: #2A2D34;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  tab-size: 2;
}

/* ---------- Feed footer ---------- */

.feed__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  padding: 26px;
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  text-align: center;
}

.feed__empty-text {
  margin: 0;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: 13px;
}

.feed__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0 6px;
}

.feed__sentinel { width: 100%; height: 1px; }

.feed__end { margin: 0; color: var(--ink-3); font-size: 12px; }

.feed__more { align-self: center; }

.feed__archive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.spinner { display: flex; gap: 5px; }

.spinner span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: spinner-bounce 0.9s infinite ease-in-out;
}

.spinner span:nth-child(2) { animation-delay: 0.15s; }
.spinner span:nth-child(3) { animation-delay: 0.3s; }

@keyframes spinner-bounce {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .event--fresh, .newpill__btn, .live__dot, .spinner span { animation: none; }
}

/* ---------- Responsive ---------- */
/* Three per row is the target layout; it only breaks on genuinely narrow screens. */

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar { flex-basis: 210px; }
  .main { padding: 18px 20px 28px 22px; }
}

@media (max-width: 760px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .feedbar__row { gap: 6px; }
  .search { flex-basis: 100%; }
  .views__select { max-width: 130px; }
  .feed[data-density="compact"] .event__where { display: none; }
}

/* ============================================================
   Налаштування (/settings/) — спільна мова трьох розділів.

   Скелет усюди однаковий, тож вивчивши один екран, знаєш решту:
   шапка → підменю → смуга зведення → шухляди → робоча панель → список.
   Хром тиснеться донизу, вміст росте: реєстр читають щодня, а заводять
   джерела й акаунти — раз на тиждень.
   ============================================================ */

/* Три пункти верхнього рівня в сайдбарі вже просяться розділити. */
.nav__item--lead + .nav__item--lead { margin-top: 6px; }

.page--settings { max-width: var(--content-max); }

/* ---------- Шапка розділу ---------- */

/* Заголовок веде назва розділу; слово «Налаштування» стоїть над ним
   дрібним рядком — воно тримає контекст, але не є новиною. */
.page--settings .pagehead { align-items: flex-end; margin-bottom: 14px; }

.pagehead__eyebrow {
  margin: 0 0 3px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.page--settings .pagehead__title { font-size: 23px; }
.page--settings .pagehead__sub { margin-top: 3px; font-size: 12.5px; }

/* ---------- Підменю розділів ---------- */

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.subnav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px 10px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.subnav__item:hover { color: var(--ink); }
.subnav__item--active { color: var(--ink); }

.subnav__item--active::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- Смуга зведення ---------- */

/* П'ять окремих карток читались як табло, з яким нічого не зробиш. Тут це
   один рядок, де кожна цифра — посилання у свій зріз реєстру. */
.tiles {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.tile {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  padding: 11px 16px;
  border-left: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.tile:first-child { border-left: 0; }
a.tile:hover { background: var(--group-bg); }

.tile__value {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tile__label {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.tile--ok .tile__value { color: #2FB47C; }
.tile--error .tile__value { color: #E2504F; }
.tile--warn .tile__value { color: #E0932C; }
.tile--quiet .tile__value { color: var(--ink-3); }

/* ---------- Шухляди: discovery, ручне заведення, довідка ---------- */

/* Обидва способи завести джерело стоять поруч, поки згорнуті, і забирають
   рядок на двох замість двох повновагих карток. */
.addrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.addrow > .drawer { flex: 1 1 320px; min-width: 0; margin: 0; }
.addrow > .drawer[open] { flex-basis: 100%; }

.drawer {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease;
}

.drawer:hover { border-color: #CFD2D9; }

.drawer__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.drawer__bar::-webkit-details-marker { display: none; }
.drawer__bar:hover { color: var(--accent); }
.drawer__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-card); }

.drawer__icon { flex: 0 0 auto; color: var(--ink-3); }
.drawer__title { flex: 0 0 auto; white-space: nowrap; }

.drawer__meta {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer__caret {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ink-3);
  transition: transform 0.18s ease;
}

.drawer[open] > .drawer__bar .drawer__caret { transform: rotate(180deg); }

.drawer__plus {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--group-bg);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.drawer[open] > .drawer__bar .drawer__plus { transform: rotate(45deg); }

.drawer__body {
  padding: 13px 14px 14px;
  border-top: 1px solid var(--line);
}

/* Знайдені чати — єдина шухляда, яка відкривається сама: коли кандидати є,
   це найкорисніше, що є на екрані. */
.drawer--disco[open] { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.drawer--disco[open] > .drawer__bar { color: color-mix(in srgb, var(--accent) 82%, #101217); }
.drawer--disco[open] > .drawer__bar .drawer__icon { color: inherit; }

/* ---------- Discovery ---------- */

.disco__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.disco__sub {
  flex: 1 1 280px;
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.disco__scan { display: flex; align-items: flex-end; gap: 8px; }

.disco__sub code,
.src__id code,
.cand__meta code,
.card__id code,
.src__err-code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--group-bg);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}

.disco__result {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--accent) 80%, #101217);
  font-size: 12.5px;
  font-weight: 600;
}

.disco__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.disco__empty {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
}

.cand {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.cand--out { opacity: 0; transform: scale(0.97); transition: opacity 0.18s ease, transform 0.18s ease; }

.cand__head { display: flex; align-items: center; gap: 7px; }

.cand__name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cand__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--ink-3);
  font-size: 11.5px;
}

/* Зразок повідомлення — цитата з рискою: це чужий текст, а не наш підпис. */
.cand__sample {
  margin: 3px 0 0;
  padding-left: 9px;
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cand__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 9px;
}

.cand__guess { flex: 0 0 100%; color: var(--ink-3); font-size: 11.5px; }
.cand__foot .filter { height: 30px; }

/* ---------- Робоча панель: вкладки, пошук, шухляда фільтрів ---------- */

/* Ту саму панель носить дошка прілів — вкладки, пошук і шухляда фільтрів там
   означають рівно те саме, тож і правила спільні. */
.srcbar,
.boardbar {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 0 12px;
  padding: 9px 0 11px;
  background: linear-gradient(var(--bg) 76%, var(--bg-0, rgba(241, 242, 244, 0)));
}

.srcbar__form,
.boardbar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Вкладки — один сегментований контрол, а не чотири окремі пігулки: це
   вибір одного стану з чотирьох, і виглядати має саме так. */
.tabs {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tab:hover { background: var(--group-row-hover); color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tab--active,
.tab--active:hover { background: var(--ink); color: #FFFFFF; }

.tab__count {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tab--active .tab__count { color: rgba(255, 255, 255, 0.62); }

.page--settings .search,
.page--board .search { flex: 1 1 240px; min-width: 190px; }

/* Решта фільтрів — у шухляді: щодня потрібні тільки вкладки й пошук,
   а бейдж чесно каже, скільки умов лежить усередині. */
.refine { position: relative; flex: 0 0 auto; }

.refine__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.refine__toggle::-webkit-details-marker { display: none; }
.refine__toggle:hover { border-color: #CFD2D9; box-shadow: 0 1px 5px rgba(16, 18, 23, 0.06); }
.refine__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.refine__toggle svg { color: var(--ink-3); }

.refine--on > .refine__toggle {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: color-mix(in srgb, var(--accent) 82%, #101217);
}

.refine--on > .refine__toggle svg { color: inherit; }

.refine[open] > .refine__toggle {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.refine__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: min(440px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(16, 18, 23, 0.15), 0 2px 6px rgba(16, 18, 23, 0.06);
}

.refine__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.refine__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.refine__note { color: var(--ink-3); font-size: 11px; }

.pick { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pick__label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pick .input { height: 34px; }

.filter--reset { color: var(--ink-2); }

.srcbar__hint {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

a.filter { text-decoration: none; }

/* ---------- Рядок реєстру ---------- */

.srclist { display: flex; flex-direction: column; gap: 8px; }

.src {
  position: relative;
  display: flex;
  gap: 13px;
  overflow: hidden;
  padding: 12px 14px 12px 17px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease, opacity 0.15s ease;
}

.src:hover { box-shadow: var(--shadow-card-hover); }

.src__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone, var(--ink-3));
}

.src--ok      { --tone: #2FB47C; }
.src--warning { --tone: #E0932C; }
.src--error   { --tone: #E2504F; }
.src--pending { --tone: #3F8FD1; }
.src--paused  { --tone: #C7CAD1; background: #FBFBFC; }
/* Реєстр акаунтів ділить розмітку рядка з джерелами — колір веде роль. */
.src--acc-admin { --tone: #7A5BF0; }
.src--acc-buyer { --tone: #3F8FD1; }
.src--paused .src__main { opacity: 0.7; }

/* Поки летить запит — рядок не приймає нових кліків. */
.src--busy { opacity: 0.55; pointer-events: none; }
.src--flash { animation: src-flash 0.7s ease; }

@keyframes src-flash {
  from { background: color-mix(in srgb, var(--accent) 9%, #FFFFFF); }
  to   { background: var(--surface); }
}

/* Монограма під роль: у списку людей око шукає людину, а не статус. */
.mono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tone, var(--ink-3)) 14%, #FFFFFF);
  color: color-mix(in srgb, var(--tone, var(--ink-3)) 78%, #101217);
  font-size: 14px;
  font-weight: 700;
}

.src__main { flex: 1; min-width: 0; }

.src__head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

.src__name { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }

.badge {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--group-bg);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 600;
}

.badge--partner {
  background: color-mix(in srgb, var(--accent) 10%, #FFFFFF);
  color: color-mix(in srgb, var(--accent) 78%, #101217);
}

.badge--via { background: #EDEFF3; color: var(--ink-3); }

.src__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

.src__access--restricted,
.src__access--pending { color: #C77C18; font-weight: 600; }

.src__note { margin: 5px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }

/* ---------- Остання помилка ---------- */

.src__err {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, #E2504F 24%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, #E2504F 6%, #FFFFFF);
}

/* Помилка, після якої синк уже проходив, — довідка, а не тривога. */
.src__err--stale { border-color: var(--line); background: #FAFBFC; }

.src__err-top { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

.src__err-code { color: #B23B3A; font-weight: 700; background: color-mix(in srgb, #E2504F 11%, #FFFFFF); }
.src__err--stale .src__err-code { color: var(--ink-2); background: var(--group-bg); }

.src__err-when { color: var(--ink-3); font-size: 11.5px; }

.src__err-flag {
  padding: 1px 8px;
  border-radius: 999px;
  background: #EEF0F3;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
}

/* Лічильники спроб їдуть у правий край того самого рядка — окремий рядок
   під них був найдешевшим місцем, яке можна забрати. */
.src__err-meta { margin-left: auto; color: var(--ink-3); font-size: 11px; }

/* Довгий стектрейс не має розсувати рядок: повний текст лежить у
   «Діагностиці» і в title. */
.src__err-msg {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ---------- Лічильники рядка ---------- */

/* Один рядок замість сітки з чотирьох колонок: реєстр гортають згори вниз,
   шукаючи, що зламалось, тож на екран має влазити якнайбільше джерел. */
.src__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 16px;
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.src__stat { display: flex; align-items: baseline; gap: 6px; }

.src__stat dt {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.src__stat dd {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.src .payload { margin-top: 8px; }

/* ---------- Права колонка: тогл і дії ---------- */

.src__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.src__acts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.switch__track {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: #D3D6DD;
  transition: background-color 0.16s ease;
}

.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.3);
  transition: transform 0.16s ease;
}

.switch--on { color: #1F8F63; }
.switch--on .switch__track { background: #2FB47C; }
.switch--on .switch__knob { transform: translateX(17px); }

/* Ширина під найдовший підпис — щоб рядок не сіпався на переключенні. */
.switch__label { width: 72px; text-align: left; }

/* ---------- Роль акаунта ---------- */

/* Ролей рівно дві, тож вибір між ними — сегментований контрол, а не селект:
   обидва варіанти видно одразу, і переводять людину одним кліком. Стоїть він
   у краю рядка, бо роль тут не підпис, а дія — читається вона й так, кольором
   смужки та монограми.

   Тон не задається окремо: `--tone` уже веде весь рядок (`.src--acc-*`), тож
   активна половина фарбується тим самим кольором, що й решта рядка, і зміна
   ролі перефарбовує все разом. */
.roleset {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.roleset__opt {
  height: 23px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.roleset__opt:hover { background: var(--group-row-hover); color: var(--ink); }
.roleset__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Роль, яка вже стоїть: тиснути нема куди, тож курсор нічого й не обіцяє. */
.roleset__opt--on,
.roleset__opt--on:hover {
  background: color-mix(in srgb, var(--tone, var(--ink-3)) 13%, #FFFFFF);
  color: color-mix(in srgb, var(--tone, var(--ink-3)) 74%, #101217);
  cursor: default;
}

/* Роль на замку — головний адмін і власний акаунт. Той самий чип на тому
   самому місці: реєстр гортають по правому краю, і роль має стояти в ньому
   в кожного рядка, а не зникати там, де її не міняють. Пунктир і замок
   кажуть, що це стан, а не кнопка. */
.roleset--fixed {
  gap: 6px;
  height: 27px;
  padding: 0 10px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--tone, var(--ink-3)) 26%, var(--line));
  background: color-mix(in srgb, var(--tone, var(--ink-3)) 8%, #FFFFFF);
  color: color-mix(in srgb, var(--tone, var(--ink-3)) 74%, #101217);
  font-size: 11.5px;
  font-weight: 600;
  cursor: help;
}

.roleset__lock { flex: 0 0 auto; opacity: 0.75; }

.src__link { color: var(--ink-3); font-size: 11.5px; text-decoration: none; }
.src__link:hover { color: var(--accent); }

.src__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.src__remove:hover { color: #C23C3B; }

/* Повне видалення завжди червоне, а не тільки під курсором: воно стоїть
   поруч зі зняттям зі збору, і сплутати їх можна рівно один раз. */
.src__remove--hard { color: #C23C3B; text-decoration-style: dotted; }
.src__remove--hard:hover { color: #9F2B2A; text-decoration-style: solid; }

/* Джерело з деплою: пояснюємо, чому кнопки видалення тут немає. */
.src__locked { color: var(--ink-3); font-size: 11.5px; cursor: help; }

/* ---------- Рядок-повідомлення про результат дії ---------- */

.notice {
  margin: 0 0 10px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--ink);
  font-size: 12.5px;
}

.notice--bad {
  border-color: color-mix(in srgb, #E2504F 30%, var(--line));
  background: color-mix(in srgb, #E2504F 7%, #FFFFFF);
}

/* Пояснення, а не результат дії: сірим, щоб не сперечалось за увагу з
   рядком, який після кожної дії пише accounts.js. */
.notice--info {
  border-color: var(--line);
  background: var(--group-bg);
  color: var(--ink-2);
  line-height: 1.5;
}

.notice--info code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface);
  font-size: 11.5px;
}

/* ---------- Форма заведення ---------- */

.addform { padding: 0 14px 14px; }

.addform__hint {
  margin: 0 0 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.addform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 16px;
}

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field__label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.field .input { height: 34px; width: 100%; }
.field__hint { color: var(--ink-3); font-size: 11px; }
.field__err { color: #C23C3B; font-size: 11.5px; font-weight: 500; }
.field__err ~ .field__hint { display: none; }

/* Поле пароля з оком: пароль задається один раз і більше ніде не показується,
   тож одрук у ньому нічим не спіймати, крім як подивитись на нього очима. */
.field__pw { position: relative; display: block; }
.field__pw .input { padding-right: 34px; }

.field__eye {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 34px;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.field__eye::before { content: "👁"; font-size: 13px; opacity: 0.55; }
.field__eye:hover::before { opacity: 0.9; }
.field__eye--on::before { opacity: 1; }

.addform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.addform__note { color: var(--ink-3); font-size: 11.5px; }

.filter--danger {
  border-color: color-mix(in srgb, #E2504F 35%, var(--line));
  color: #C23C3B;
}

.filter--danger:hover { border-color: #E2504F; background: color-mix(in srgb, #E2504F 6%, #FFFFFF); }

@media (prefers-reduced-motion: reduce) {
  .src--flash, .cand--out, .drawer__caret, .drawer__plus { animation: none; transition: none; }
}

@media (max-width: 860px) {
  .src { flex-direction: column; gap: 10px; }
  .src__side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .src__acts { flex-direction: row; align-items: center; gap: 12px; }
  .srcbar__hint { margin-left: 0; }
  .refine__panel { right: auto; left: 0; }
  .refine__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Telegram-акаунт (/settings/telegram/) — один екран під одну задачу:
   довести логін до кінця. Тому одна колонка, а не дві, і явні кроки.
   ============================================================ */

.tgpage { max-width: 660px; }

.tgcard {
  margin-bottom: 14px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.tgcard--connected { border-color: color-mix(in srgb, #2FB47C 30%, var(--line)); }

.tgcard__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tgcard__sub { margin: 6px 0 0; color: var(--ink-2); font-size: 12.5px; }
.tgcard__sub code { padding: 1px 6px; border-radius: 6px; background: var(--group-bg); font-size: 11.5px; }

/* ---------- Кроки логіну ---------- */

/* Три форми поспіль не казали, скільки лишилось. Тепер видно одразу:
   пройдене — зелене, поточне — акцент, попереду — сіре. */
.steps {
  display: flex;
  align-items: center;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.step + .step { flex: 1 1 auto; min-width: 0; }

.step + .step::before {
  content: "";
  flex: 1 1 auto;
  min-width: 14px;
  height: 2px;
  margin: 0 9px;
  border-radius: 2px;
  background: var(--line);
}

.step--done + .step::before { background: color-mix(in srgb, #2FB47C 55%, var(--line)); }

.step__dot {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}

.step__label { overflow: hidden; text-overflow: ellipsis; }

/* Пройдений крок міняє цифру на галочку: номер уже нічого не додає.
   Галочка лягає поверх, а цифра гасне розміром — так у кружку лишається
   рівно один центрований знак. */
.step--done { color: var(--ink-2); }
.step--done .step__dot { border-color: #2FB47C; background: #2FB47C; font-size: 0; }

.step--done .step__dot::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.step--on { color: var(--ink); }
.step--on .step__dot { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }

.tgcard__err {
  margin: 14px 0 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, #E2504F 26%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, #E2504F 6%, #FFFFFF);
  color: #B23B3A;
  font-size: 12.5px;
}

/* Підключений акаунт — це вже довідка, тож лічильники стають сіткою. */
.tgcard__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 11px 16px;
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

.tgcard__stats .src__stat { display: block; }
.tgcard__stats dd { margin-top: 2px; }
.tgcard__stats code { font-size: 11.5px; font-weight: 500; }

.tgform { margin-top: 18px; max-width: 340px; }

/* Єдине поле кроку — велике: більше на екрані робити нічого. */
.field .input--lead { height: 42px; font-size: 15px; }
.input--code { letter-spacing: 0.28em; font-variant-numeric: tabular-nums; }

.tgform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.tgform__note { color: var(--ink-3); font-size: 11.5px; }

.tgcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.tgcard__link {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tgcard__link:hover { color: var(--accent); }

/* Дрібний шрифт про session і журнал — унизу картки: це попередження,
   а не крок, і воно не має стояти між людиною та полем вводу. */
.tgcard__stub {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.5;
}

.tgcard__stub code { padding: 1px 5px; border-radius: 5px; background: var(--group-bg); font-size: 11px; }

.tgside { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.tgside p { margin: 0 0 12px; }
.tgside p:last-child { margin-bottom: 0; }

.tgside__title {
  margin: 0 0 6px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tgside__steps { margin: 0 0 12px; padding-left: 18px; }
.tgside__steps li { margin-bottom: 5px; }
.tgside code { padding: 1px 5px; border-radius: 5px; background: #EDEFF3; font-size: 11.5px; }

.tgside__warn {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #B27318;
}

/* ============================================================
   Сторінка повідомлення (/events/<id>/) — оригінал з Telegram
   ліворуч, розібрані факти праворуч. Дві колонки, бо баєру треба
   бачити картинку й package id одночасно.
   ============================================================ */

.page--message { max-width: var(--content-max); }

.msgback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.msgback:hover { color: var(--accent); }

.msghead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}

.msghead__main { min-width: 0; }
.msghead__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.msghead__title {
  margin: 9px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.msghead__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.msghead__chat { font-weight: 600; color: var(--ink); }
.msghead__dot { color: var(--ink-3); }
.msghead__sub code { color: var(--ink-3); }
.msghead__sub time { font-variant-numeric: tabular-nums; }

.msghead__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.msghead__cta:hover { background: var(--accent-hover); }

.msgcols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 16px;
}

.msgcol { min-width: 0; }

.msgside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ---------- Картки з розібраними фактами ---------- */

.factcard {
  padding: 13px 15px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.factcard__title {
  margin: 0 0 10px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.facts { display: grid; gap: 9px; margin: 0; }

.fact {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.fact--wide { grid-template-columns: minmax(0, 1fr); gap: 4px; }

.fact dt {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
}

.fact dd {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.fact__num { font-variant-numeric: tabular-nums; }

.fact__mono {
  display: block;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--group-bg);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.factcard__link {
  display: inline-block;
  margin-top: 11px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.factcard__link:hover { color: var(--accent-hover); }

.factcard--tech .payload:first-of-type { margin-top: 0; }

/* ---------- Оригінал повідомлення ---------- */

.tgmsg {
  padding: 12px 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* Вихідні повідомлення бота — зеленуватий фон, як у самому Telegram. */
.tgmsg--out { border-color: #CFE5C0; background: #F3FBEE; }

.tgmsg__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.tgmsg__from { color: var(--ink); font-size: 12.5px; font-weight: 600; }

.tgmsg__dir {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--group-bg);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
}

.tgmsg__media {
  min-height: 96px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 11px;
  background: var(--group-bg);
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}

.tgmsg__media a,
.tgmsg__media img { display: block; max-width: 100%; }
.tgmsg__media img { max-height: 380px; object-fit: contain; }
.tgmsg__media-stub { padding: 18px; }
.tgmsg__media-stub code { overflow-wrap: anywhere; }

.tgmsg__text { color: var(--ink); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.tgmsg__empty { margin: 0; color: var(--ink-3); font-size: 13px; font-style: italic; }

.tgmsg__group { margin-top: 12px; }

.tgmsg__grouplabel {
  margin: 0 0 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
}

.tgmsg__buttons { display: grid; gap: 6px; }

.tgmsg__button {
  padding: 9px 12px;
  border: 1px solid #C9DAE5;
  border-radius: 8px;
  background: #F4FAFE;
  color: #2481CC;
  text-align: center;
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.tgmsg__button:hover { border-color: #A8C9DF; background: #EAF5FD; }
.tgmsg__button:disabled { cursor: not-allowed; opacity: 0.7; }
.tgmsg__button:disabled:hover { border-color: #C9DAE5; background: #F4FAFE; }

.tgmsg__meta {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 940px) {
  .msgcols { grid-template-columns: minmax(0, 1fr); }
  .msghead { flex-wrap: wrap; }
}

/* ============================================================
   Селект у стилі сервісу (dashboard/js/select.js).
   Кнопка повторює розміри нативного поля — тому вона успадковує
   його ж класи (.input, .views__select …), а тут лишається тільки
   розкладка, каретка й сам список.
   ============================================================ */

.sel { position: relative; display: inline-flex; max-width: 100%; }

/* там, де нативний селект тягнувся на всю ширину колонки */
.field .sel,
.pick .sel,
.group__list .sel { display: flex; width: 100%; }

.views .sel { max-width: 170px; }

.sel__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.sel__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  appearance: none;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sel__btn:hover { border-color: #D3D6DD; }

.sel__btn:focus-visible,
.sel--open .sel__btn {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.15);
}

.sel--disabled .sel__btn { color: var(--ink-3); cursor: not-allowed; }

/* видимий підпис і невидимий «розпірка» зі всіх варіантів в одній
   комірці ґріда — поле тримає ширину найдовшої опції й не стрибає */
.sel__value { display: grid; flex: 1; min-width: 0; }
.sel__label,
.sel__sizer { grid-area: 1 / 1; }

.sel__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sel__sizer { height: 0; overflow: hidden; visibility: hidden; }
.sel__sizer > span { display: block; white-space: nowrap; }

.sel__caret {
  flex: 0 0 auto;
  color: var(--ink-3);
  transition: transform 0.16s ease;
}

.sel--open .sel__caret { transform: rotate(180deg); }
.sel__btn:hover .sel__caret { color: var(--ink-2); }

.sel__menu {
  position: fixed;
  z-index: 60;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card-hover);
  font-size: 13px;
  animation: sel-drop 0.13s ease;
}

@keyframes sel-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.sel__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.sel__opt + .sel__opt { margin-top: 1px; }

.sel__opt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sel__opt.is-active { background: #F1F2F5; }
.sel__opt.is-on { color: var(--accent); font-weight: 600; }
.sel__opt.is-on.is-active { background: rgba(99, 91, 255, 0.10); }

.sel__check { flex: 0 0 auto; opacity: 0; color: var(--accent); }
.sel__opt.is-on .sel__check { opacity: 1; }

.sel__opt[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.sel__opt[aria-disabled="true"].is-active { background: transparent; }

.sel__menu::-webkit-scrollbar { width: 9px; }
.sel__menu::-webkit-scrollbar-thumb {
  border: 3px solid var(--surface);
  border-radius: 6px;
  background: #D6D9E0;
}

@media (prefers-reduced-motion: reduce) {
  .sel__menu { animation: none; }
  .sel__caret { transition: none; }
}

@media (max-width: 900px) {
  .views .sel { max-width: 130px; }
}

/* ============================================================
   СВІЙ АКАУНТ
   ============================================================ */

/* Обране + Games ростуть разом, а сайдбар не тягнеться: коли сервісів багато,
   скролиться саме цей блок, а Dashboard/Live зверху й Profile знизу лишаються
   на місці. */
.sidebar__games {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.sidebar__games::-webkit-scrollbar { width: 6px; }
.sidebar__games::-webkit-scrollbar-track { background: transparent; }
.sidebar__games::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}

.sidebar__empty {
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12.5px;
  list-style: none;
}

/* Зірка тримає обраний пункт відмінним від такого ж у Games — групи стоять
   поруч, і сама лише назва групи їх не розводить. */
.nav__item--fav { gap: 7px; }
.nav__star { color: #E0B02C; font-size: 12px; line-height: 1; }

/* ============================================================
   Свій акаунт (/account/) — та сама мова, що й у налаштуваннях:
   шапка з надзаголовком, смуга з фактами, панель під головну дію
   і шухляда під ту, до якої вертаються раз на пів року.

   Колонка вужча за реєстри: це сторінка про людину, а не робочий
   стіл, і розтягувати її на всю ширину нема чим.
   ============================================================ */

.page--account { max-width: var(--content-max); }

/* .page центрує себе через margin-inline: auto, тож вузька колонка тут
   з'їхала б на середину екрана — а решта сторінок тримається лівого краю.
   Вузьким робимо вміст, а не саму сторінку. */
.page--account > * { max-width: 860px; }

.page--account .pagehead { align-items: flex-end; margin-bottom: 14px; }
.page--account .pagehead__title { font-size: 23px; }
.page--account .pagehead__sub { margin-top: 3px; max-width: 68ch; font-size: 12.5px; }

/* ---------- Смуга з даними акаунта ---------- */

/* Раніше це була картка з підписами в колонку на 118px. Дані тут читають
   один раз і більше не повертаються — тож вони стоять одним рядком, а не
   тримають чверть екрана. */
.idbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.idbar .mono { width: 42px; height: 42px; margin-top: 0; border-radius: 12px; font-size: 17px; }

.idbar__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.idbar__facts {
  flex: 1 1 340px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
}

.idfact { min-width: 0; }

.idfact dt {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.idfact dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.idfact code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--group-bg);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
}

.idbar__note {
  flex: 1 1 100%;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 11.5px;
}

/* ---------- Панель ---------- */

.sheet {
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.sheet__head { padding: 15px 16px 0; }

/* Картка з самою лише шапкою (стан «логіну немає») не має тулити текст
   до нижнього краю — відступ дає CSS, а не порожній div у розмітці. */
.sheet__head:last-child { padding-bottom: 16px; }

.sheet__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sheet__sub {
  margin: 5px 0 0;
  max-width: 74ch;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.sheet__sub code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--group-bg);
  font-size: 11.5px;
}

.sheet__body { padding: 14px 16px 16px; }

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* Вихід — не «розділ», а один рядок унизу картки безпеки: кнопка й одне
   речення, чому вона робить менше, ніж здається. */
.sheet__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}

.sheet__rowtext { flex: 1 1 320px; min-width: 0; }
.sheet__rowtitle { margin: 0; font-size: 13px; font-weight: 600; }

.sheet__rowsub {
  margin: 3px 0 0;
  max-width: 64ch;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.45;
}

/* Шухляда всередині панелі не має бути другою коробкою в коробці. */
.drawer--flush {
  margin: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.drawer--flush:hover { border-color: var(--line); }
.drawer--flush > .drawer__bar { padding: 0 16px; }
.drawer--flush > .drawer__body { padding: 0 16px 16px; border-top: 0; }

.pwgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
}

/* ---------- Обрані сервіси ---------- */

/* Колонка чекбоксів зі скролом на 260px показувала чотири сервіси з
   двадцяти. Чипси лягають у рядки й видно всі одразу. */
.favs { display: flex; flex-wrap: wrap; gap: 8px; }

.favchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.favchip:hover { border-color: #CFD2D9; color: var(--ink); }

/* Справжній чекбокс лишається на місці — він носить значення й ловить
   фокус; ми лише кладемо його на всю площу чипса й робимо прозорим. */
.favchip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.favchip__star { color: #D6D9DF; font-size: 12px; line-height: 1; transition: color 0.15s ease; }
.favchip__name { white-space: nowrap; }

.favchip:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, #FFFFFF);
  color: color-mix(in srgb, var(--accent) 82%, #101217);
  font-weight: 600;
}

.favchip:has(input:checked) .favchip__star { color: #E0B02C; }

.favchip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Поки зміни не збережені — кнопка світиться, а лічильник це проговорює:
   інакше людина відмічає сервіси й іде, а сайдбар лишається старим. */
[data-favorites].is-dirty .filter--apply {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

[data-favorites].is-dirty [data-favorites-count] { color: #B27318; font-weight: 600; }

@media (max-width: 620px) {
  .sheet__row { align-items: flex-start; }
}

/* ============================================================
   Auth — окрема повноекранна сторінка входу.
   Ліва темна панель тримає бренд, права — саму форму.
   ============================================================ */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
}

/* ---------- Ліва панель ---------- */

.auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 56px;
  overflow: hidden;
  background: var(--sidebar);
  color: #FFFFFF;
}

/* Дві м'які плями кольору акценту — щоб панель не читалась як плаский прямокутник. */
.auth__aside::before,
.auth__aside::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.auth__aside::before {
  top: -160px;
  right: -140px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(99, 91, 255, 0.55), rgba(99, 91, 255, 0) 68%);
}

.auth__aside::after {
  bottom: -200px;
  left: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(99, 91, 255, 0.24), rgba(99, 91, 255, 0) 70%);
}

.auth__aside > * { position: relative; z-index: 1; }

.auth__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.auth__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), #8F89FF);
  box-shadow: 0 6px 18px rgba(99, 91, 255, 0.42);
  color: #FFFFFF;
}

.auth__pitch { max-width: 30ch; }

.auth__headline {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.auth__lead {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.6;
}

.auth__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.auth__point {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.auth__point::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.18);
}

.auth__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.34);
  font-size: 11.5px;
}

/* ---------- Права колонка з формою ---------- */

.auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.auth__box { width: 100%; max-width: 340px; }

.auth__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.auth__sub {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

.auth__field { display: flex; flex-direction: column; gap: 6px; }

.auth__label {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth__input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--group-bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth__input::placeholder { color: var(--ink-3); }

.auth__input:hover { border-color: #CFD2D9; }

.auth__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}

/* Поле пароля ділить рядок з кнопкою «показати» — вона лежить поверх інпута. */
.auth__wrap { position: relative; display: flex; }

.auth__wrap .auth__input { padding-right: 48px; }

.auth__peek {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.auth__peek:hover { background: var(--group-row-hover); color: var(--ink-2); }
.auth__peek:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth__peek svg { display: block; }
.auth__peek .auth__peek-off { display: none; }
.auth__peek[aria-pressed="true"] .auth__peek-on { display: none; }
.auth__peek[aria-pressed="true"] .auth__peek-off { display: block; }

.auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.auth__submit:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 18px rgba(99, 91, 255, 0.32);
}

.auth__submit:active { transform: translateY(1px); }
.auth__submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.auth__err {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 20px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #E2504F 26%, var(--line));
  border-radius: var(--r-chip);
  background: color-mix(in srgb, #E2504F 6%, #FFFFFF);
  color: #B23B3A;
  font-size: 12.5px;
  line-height: 1.45;
}

.auth__err svg { flex: 0 0 auto; margin-top: 1px; }

.auth__foot {
  margin: 22px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .auth__input,
  .auth__peek,
  .auth__submit { transition: none; }
  .auth__submit:active { transform: none; }
}

@media (max-width: 900px) {
  /* Рядки задані явно: інакше grid розтягує шапку на половину екрана. */
  .auth {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* На вузькому екрані бренд згортається в шапку, а форма займає решту. */
  .auth__aside {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 20px 24px;
  }

  .auth__aside::before { top: -220px; right: -160px; }
  .auth__aside::after { display: none; }
  .auth__pitch,
  .auth__note { display: none; }
  .auth__panel { align-items: flex-start; padding: 48px 24px; }
  .auth__box { margin: 0 auto; }
}

/* ============================================================
   Вхід через корпоративну пошту: кнопка на екрані логіну й екран,
   який пояснює, чому вхід не склався.
   ============================================================ */

/* ---------- Екран входу ---------- */

.auth__sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth__sso:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, #FFFFFF);
  box-shadow: var(--shadow-card);
}

.auth__sso:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth__sso svg { color: var(--accent); }

.auth__hint {
  margin: 9px 0 0;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.5;
}

/* Розділювач «або пароль»: лінія, що розривається під підпис. */
.auth__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 4px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.auth__or::before,
.auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- Екран «вхід не склався» ---------- */

.auth__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 12%, #FFFFFF);
  color: var(--tone);
}

.auth__state--warn { --tone: #E0932C; }
.auth__state--bad  { --tone: #E2504F; }

.auth__foot a { color: var(--accent); }