/* ==========================================================================
   Бан-трекер — «тихая диспетчерская»: тёмная по умолчанию консоль,
   холодные графитовые нейтрали, один акцент (сигнальный лайм),
   семантические тона статусов отдельно от акцента.
   ========================================================================== */

/* ---------- Токены: тёмная тема (по умолчанию) ---------- */
:root {
  color-scheme: dark;

  --f-display: "Unbounded", "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Шкала: 11 · 12.5 · 14 · 15 · 18 · 22 · 28+ */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;

  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --gutter: 16px;
  --header-h: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bg: #0c0e12;
  --surface: #13161c;
  --surface-2: #181c23;
  --surface-3: #1f242d;
  --sunken: #0f1216;
  --line: #232832;
  --line-2: #2f3541;
  --fg: #e6e9ef;
  --fg-2: #b3bac7;
  --muted: #828b9b;
  --faint: #5b6373;

  --accent: #c4f24a;
  --accent-hover: #d3f871;
  --accent-fg: #10150a;
  --accent-text: #cdf36a;
  --accent-soft: rgba(196, 242, 74, .09);
  --accent-line: rgba(196, 242, 74, .36);
  --focus: #c4f24a;
  --bar-run: #c4f24a;

  --red: #ff6b6b;   --red-soft: rgba(255, 107, 107, .11);  --red-line: rgba(255, 107, 107, .34);
  --amber: #f2b648; --amber-soft: rgba(242, 182, 72, .11); --amber-line: rgba(242, 182, 72, .34);
  --green: #3ddc97; --green-soft: rgba(61, 220, 151, .10); --green-line: rgba(61, 220, 151, .32);
  --blue: #74abff;  --blue-soft: rgba(116, 171, 255, .11); --blue-line: rgba(116, 171, 255, .34);
  --gray: #9aa3b2;  --gray-soft: rgba(154, 163, 178, .10); --gray-line: rgba(154, 163, 178, .28);
  --on-red: #1a0707;

  --overlay: rgba(4, 6, 9, .68);
  --shadow-pop: 0 24px 64px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-toast: 0 12px 32px -10px rgba(0, 0, 0, .6);
  --header-bg: rgba(12, 14, 18, .84);
  --sk: #191d24;
  --sk-hi: #232832;
  --mark-bg: #161a21;
  --mark-track: #2c3340;
  --grid-line: rgba(255, 255, 255, .025);
  /* тост инвертирован (светлый на тёмной теме) — иконкам нужны тёмные тона */
  --toast-ok: #0b8656;
  --toast-err: #d42f3c;
}

/* ---------- Токены: светлая тема ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f6;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --surface-3: #eceef2;
  --sunken: #f4f5f8;
  --line: #e2e5eb;
  --line-2: #cfd4dc;
  --fg: #11141a;
  --fg-2: #3b4250;
  --muted: #636b7a;
  --faint: #9aa1ae;
  --accent: #c0ea3c;
  --accent-hover: #b1dd28;
  --accent-fg: #141a04;
  --accent-text: #4a6600;
  --accent-soft: #f0f8d6;
  --accent-line: #a8cf2e;
  --focus: #3f5800;
  --bar-run: #84ad12;
  --red: #d42f3c;   --red-soft: #fdeced;  --red-line: #f3bfc3;
  --amber: #a46100; --amber-soft: #fff3dc; --amber-line: #efd09a;
  --green: #0b8656; --green-soft: #e1f5ec; --green-line: #a9dfc6;
  --blue: #2160cc;  --blue-soft: #e8effc;  --blue-line: #bad0f3;
  --gray: #5c6474;  --gray-soft: #eef0f3;  --gray-line: #d3d7de;
  --on-red: #ffffff;
  --overlay: rgba(17, 20, 26, .44);
  --shadow-pop: 0 28px 64px -18px rgba(17, 20, 26, .32), 0 0 0 1px rgba(17, 20, 26, .05);
  --shadow-toast: 0 14px 32px -12px rgba(17, 20, 26, .35);
  --header-bg: rgba(242, 243, 246, .86);
  --sk: #e8ebef;
  --sk-hi: #f5f6f8;
  --mark-bg: #11141a;
  --mark-track: #2f3644;
  --grid-line: rgba(17, 20, 26, .035);
  --toast-ok: #3ddc97;
  --toast-err: #ff7b7b;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f2f3f6;
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --surface-3: #eceef2;
    --sunken: #f4f5f8;
    --line: #e2e5eb;
    --line-2: #cfd4dc;
    --fg: #11141a;
    --fg-2: #3b4250;
    --muted: #636b7a;
    --faint: #9aa1ae;
    --accent: #c0ea3c;
    --accent-hover: #b1dd28;
    --accent-fg: #141a04;
    --accent-text: #4a6600;
    --accent-soft: #f0f8d6;
    --accent-line: #a8cf2e;
    --focus: #3f5800;
    --bar-run: #84ad12;
    --red: #d42f3c;   --red-soft: #fdeced;  --red-line: #f3bfc3;
    --amber: #a46100; --amber-soft: #fff3dc; --amber-line: #efd09a;
    --green: #0b8656; --green-soft: #e1f5ec; --green-line: #a9dfc6;
    --blue: #2160cc;  --blue-soft: #e8effc;  --blue-line: #bad0f3;
    --gray: #5c6474;  --gray-soft: #eef0f3;  --gray-line: #d3d7de;
    --on-red: #ffffff;
    --overlay: rgba(17, 20, 26, .44);
    --shadow-pop: 0 28px 64px -18px rgba(17, 20, 26, .32), 0 0 0 1px rgba(17, 20, 26, .05);
    --shadow-toast: 0 14px 32px -12px rgba(17, 20, 26, .35);
    --header-bg: rgba(242, 243, 246, .86);
    --sk: #e8ebef;
    --sk-hi: #f5f6f8;
    --mark-bg: #11141a;
    --mark-track: #2f3644;
    --grid-line: rgba(17, 20, 26, .035);
    --toast-ok: #3ddc97;
    --toast-err: #ff7b7b;
  }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 60px; }
}

/* ---------- Тона (семантика статусов) ---------- */
.t-red    { --t: var(--red);   --ts: var(--red-soft);   --tl: var(--red-line); }
.t-amber  { --t: var(--amber); --ts: var(--amber-soft); --tl: var(--amber-line); }
.t-green  { --t: var(--green); --ts: var(--green-soft); --tl: var(--green-line); }
.t-blue   { --t: var(--blue);  --ts: var(--blue-soft);  --tl: var(--blue-line); }
.t-gray   { --t: var(--gray);  --ts: var(--gray-soft);  --tl: var(--gray-line); }
.t-none   { --t: var(--muted); --ts: transparent;       --tl: var(--line-2); }
.t-fg     { --t: var(--fg-2);  --ts: var(--surface-2);  --tl: var(--line-2); }
.t-accent { --t: var(--accent-text); --ts: var(--accent-soft); --tl: var(--accent-line); }

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
html.modal-open { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-base)/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-text); }
kbd {
  font: 500 11px/1 var(--f-mono);
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  color: var(--fg-2);
  background: var(--surface-2);
}
::selection { background: var(--accent); color: var(--accent-fg); }

.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.nil { color: var(--faint); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
.noscript { padding: 24px; color: var(--fg); }

.h2 {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 var(--fs-md)/1.25 var(--f-display);
  letter-spacing: -.01em;
}
.h2 .ic { color: var(--muted); }
.hint { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
/* Кнопка-ссылка внутри подсказки («добавьте стримеров в Настройках») */
.link-btn {
  display: inline; padding: 0; border: 0; background: none;
  color: var(--accent-text); font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.label, .field > label {
  display: block;
  font: 600 var(--fs-xs)/1.2 var(--f-body);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--fg);
  font: 600 13px/1 var(--f-body);
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn:hover { background: var(--surface-3); border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); border-color: transparent; color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); border-color: transparent; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn--ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--fg); }
.btn--danger { background: transparent; border-color: var(--red-line); color: var(--red); }
.btn--danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn--danger[data-armed] { background: var(--red); border-color: var(--red); color: var(--on-red); }
/* «Ушёл в бан» — главное действие строки новых: красный тон, но тихий (заливка — только под курсором) */
.btn--ban { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.btn--ban:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn--ban.is-busy::after { border-color: var(--red); border-right-color: transparent; }
.btn--sm { height: 30px; padding: 0 10px; gap: 6px; font-size: var(--fs-sm); font-weight: 500; }
.btn--sm .ic { width: 14px; height: 14px; }
.btn--lg { height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--accent-fg); border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn:not(.btn--primary).is-busy::after { border-color: var(--fg); border-right-color: transparent; }
.btn-count {
  min-width: 22px; height: 20px; padding: 0 6px; margin-left: 2px;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: rgba(0, 0, 0, .14);
  font: 600 11.5px/1 var(--f-mono);
}

.ibtn {
  width: 30px; height: 30px; flex: none;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ibtn:hover { background: var(--surface-3); color: var(--fg); }
.ibtn[aria-pressed="true"] { color: var(--accent-text); }
.ibtn--xs { width: 26px; height: 26px; border-radius: 6px; }
.ibtn--xs .ic { width: 14px; height: 14px; }
@media (pointer: coarse) {
  .ibtn--xs { width: 34px; height: 34px; }
  .btn--sm { height: 34px; }
}

/* ---------- Поля ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-width: 0;
  height: 38px; padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background-color: var(--sunken);
  color: var(--fg);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s, filter .2s;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"] { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
input[type="datetime-local"] { font-family: var(--f-mono); font-size: 13px; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; transition: opacity .15s; }
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }
/* Нативная стрелка datalist не следует теме (чёрный треугольник на тёмном) — подсказки работают и без неё */
input[list]::-webkit-calendar-picker-indicator { display: none !important; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px; cursor: pointer; text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--surface); color: var(--fg); }
textarea.mono, .mono-input { font-family: var(--f-mono); font-size: 13px; }
input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; flex: none; }
/* Телефон: поля ввода 16px — иначе iOS Safari при фокусе зумит страницу и ломает раскладку */
@media (pointer: coarse) and (max-width: 767.98px) {
  input:not([type="checkbox"]):not([type="radio"]), textarea, textarea.mono, .add-input textarea { font-size: 16px; }
  .days input[type="number"] { width: 72px; }
}

/* Скрытие паролей от стрима: текст размыт, пока поле не в фокусе */
body:not(.pw-shown) .veil:not(:focus):not(:placeholder-shown) { filter: blur(4.5px); }

.input-affix { position: relative; }
.input-affix input:not([type="checkbox"]) { padding-right: 44px; }
.input-affix .ibtn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

.form-error {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }

/* Сегменты (срок бана) */
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--sunken);
  max-width: 100%;
}
.seg button {
  height: 30px; padding: 0 13px; border: 0; border-radius: 7px;
  background: transparent; color: var(--fg-2);
  font: 500 13px/1 var(--f-body); white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.seg button:hover { color: var(--fg); background: var(--surface-3); }
.seg button[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 600;
}
.dur-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.days { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.days input[type="number"] { width: 84px; }

/* Переключатель «Показывать пароли» */
.switch {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 12px 0 10px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--sunken);
  color: var(--fg-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.switch:hover { border-color: var(--faint); color: var(--fg); }
.switch-track {
  position: relative; width: 30px; height: 18px; flex: none;
  border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .18s;
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted); transition: transform .18s var(--ease), background-color .18s;
}
.switch[aria-checked="true"] { color: var(--fg); border-color: var(--accent-line); }
.switch[aria-checked="true"] .switch-track { background: var(--accent); box-shadow: none; }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(12px); background: var(--accent-fg); }

/* ---------- Бренд ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--fg); text-decoration: none;
  font: 600 15px/1 var(--f-display); letter-spacing: -.02em;
}
.mark { width: 28px; height: 28px; flex: none; }
.mark-bg { fill: var(--mark-bg); }
.mark-track { fill: none; stroke: var(--mark-track); stroke-width: 3; }
.mark-arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.mark-dot { fill: var(--accent); }
.brand--lg { font-size: 18px; gap: 12px; }
.brand--lg .mark { width: 36px; height: 36px; }

/* ---------- Шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1280px; height: var(--header-h); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 10px;
}
.brand-name { display: none; }
@media (min-width: 560px) { .brand-name { display: inline; } }

.sync {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px; min-width: 0;
  border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); font: 500 12px/1 var(--f-mono); white-space: nowrap; cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.sync:hover { border-color: var(--line-2); color: var(--fg-2); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; position: relative; }
.sync-pre { display: none; }
.sync-ic { width: 13px; height: 13px; opacity: .7; }
.sync[data-state="load"] .sync-dot, .sync[data-state="busy"] .sync-dot { background: var(--accent); }
.sync[data-state="busy"] .sync-ic, .sync[data-state="load"] .sync-ic { animation: spin 1s linear infinite; }
.sync[data-state="err"] { border-color: var(--red-line); background: var(--red-soft); color: var(--red); }
.sync[data-state="err"] .sync-dot { background: var(--red); }
.sync[data-state="err"] .sync-pre { display: none !important; }
@media (min-width: 640px) { .sync-pre { display: inline; } }
/* Узкая шапка: текст индикатора лучше обрезать многоточием, чем наехать на кнопки справа */
.sync { overflow: hidden; }
.sync-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; min-width: 36px; padding: 0 9px;
  border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--fg-2); font: 500 13px/1 var(--f-body); white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.hbtn:hover { background: var(--surface-2); border-color: var(--line); color: var(--fg); }
.hbtn .ic { width: 18px; height: 18px; }
.hbtn--icon { padding: 0; width: 36px; }
.hbtn-label { display: none; }
@media (min-width: 960px) { .hbtn-label { display: inline; } }
.hbtn-dot {
  position: absolute; top: 7px; left: 21px;
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg);
  background: var(--faint);
}
#notif-btn[data-state="on"] { color: var(--fg); }
#notif-btn[data-state="on"] .hbtn-dot { background: var(--accent); }
#notif-btn[data-state="denied"] .hbtn-dot { background: var(--red); }
#notif-btn[data-state="off"] .hbtn-dot { background: var(--amber); }
/* Шестерёнка «Настройки»: нажата, пока открыт экран настроек — как выбранная вкладка */
#settings-btn[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line-2); color: var(--fg); }
#settings-btn[aria-pressed="true"] .ic { color: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .ic-gear { transition: transform .45s var(--ease); }
  #settings-btn:hover .ic-gear { transform: rotate(60deg); }
}

.user { display: flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); min-width: 0; }
.avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 600 11.5px/1 var(--f-display); text-transform: uppercase;
}
.user-name { display: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13.5px; }
@media (min-width: 760px) { .user-name { display: inline; } }
/* Телефон: в шапке ещё и шестерёнка «Настройки» — место индикатору синхронизации освобождают
   декоративные иконка обновления (вся «пилюля» и так кнопка с подписью) и аватар-инициал */
@media (max-width: 419.98px) {
  .sync-ic, .avatar { display: none; }
  .user { margin-left: 2px; padding-left: 8px; }
}

/* ---------- Каркас ---------- */
.wrap {
  max-width: 1280px; margin: 0 auto;
  padding: 18px var(--gutter) 96px;
  display: flex; flex-direction: column; gap: 18px;
}
@media (min-width: 768px) { .wrap { padding-top: 24px; gap: 22px; } }
/* ---------- Разделы (v2.5): «Аккаунты стримеров» / «Аккаунты записи» ----------
   Узко — переключатель с подчёркиванием над вкладками (уровнем выше их); от 1400px — колонка слева,
   контент справа той же ширины, что раньше (таблица «Банов» не сжимается). */
.sections { display: flex; gap: 6px; min-width: 0; border-bottom: 1px solid var(--line); }
.sections-h { display: none; }
.sec {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); font: inherit; text-align: left; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.sec .ic { width: 20px; height: 20px; flex: none; }
.sec-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.sec-l { font: 500 16px/1.1 var(--f-display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Полное название — для экранного диктора (на экране хватает «Стримеры» / «Записи») */
.sec-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sec-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-sub:empty { display: none; }
.sec-due { width: 7px; height: 7px; }
.sec-n {
  display: inline-grid; place-items: center; flex: none; min-width: 26px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--surface-3); color: var(--fg-2);
  font: 600 12px/1 var(--f-mono); font-variant-numeric: tabular-nums;
  transition: background-color .15s, color .15s;
}
.sec:hover { color: var(--fg); }
.sec[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.sec[aria-current="page"] .ic { color: var(--accent-text); }
.sec[aria-current="page"] .sec-n { background: var(--accent); color: var(--accent-fg); }
@media (max-width: 559.98px) {
  /* Телефон: «Стримеры» + счётчик должны влезть в полширины — иконку раздела убираем */
  .sec { gap: 8px; padding-inline: 4px; }
  .sec .ic { display: none; }
  .sec-sub { display: none; }
  .sec-l { font-size: 15px; }
}
@media (min-width: 1400px) {
  .topbar-in { max-width: 1528px; }
  .wrap {
    max-width: 1528px;
    display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 22px 24px; align-items: start;
  }
  .wrap > * { grid-column: 2; }
  .sections {
    grid-column: 1; grid-row: 1 / span 3;
    position: sticky; top: calc(var(--header-h) + 24px);
    flex-direction: column; gap: 4px; border-bottom: 0;
  }
  .sections-h {
    display: block; margin: 4px 0 8px 12px;
    font: 600 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
  /* В сетке вкладки «Новые / Баны» — по содержимому слева, как и в колонке flex */
  .wrap > .tabs { justify-self: start; }
  .sec { flex: none; align-items: flex-start; padding: 11px 10px 11px 12px; margin: 0; border-bottom: 0; border-radius: var(--r-md); }
  .sec-sub { white-space: normal; line-height: 1.35; }
  .sec .ic { margin-top: 1px; }
  .sec:hover { background: var(--surface-2); }
  .sec[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
  /* Выбранный раздел — акцентная полоска слева, как метки строк */
  .sec[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--accent);
  }
}

/* Вкладка — тот же вертикальный ритм, что у .wrap */
.pane { display: flex; flex-direction: column; gap: inherit; min-width: 0; }

/* ---------- Вкладки «Баны» / «Новые» ---------- */
.tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface);
}
.tab {
  position: relative; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--muted);
  font: 500 14.5px/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.tab .ic { width: 17px; height: 17px; }
.tab:hover { background: var(--surface-2); color: var(--fg); }
.tab[aria-selected="true"] { background: var(--surface-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.tab[aria-selected="true"] .ic { color: var(--accent-text); }
.tab-l { overflow: hidden; text-overflow: ellipsis; }
.tab-n {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--surface-3); color: var(--fg-2);
  font: 600 12px/1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0;
  transition: background-color .15s, color .15s;
}
.tab[aria-selected="true"] .tab-n { background: var(--accent); color: var(--accent-fg); }
.tab-due { width: 7px; height: 7px; }
@media (min-width: 640px) {
  /* Планшет/десктоп: компактный сегмент слева, а не полоса во всю ширину */
  .tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(168px, auto)); align-self: flex-start; }
  .tab { padding: 0 18px; }
}

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.panel-sub { color: var(--muted); font-size: 13px; }
.count {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--red); color: var(--on-red);
  font: 600 12px/1 var(--f-mono);
}

/* ---------- Сводка ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat {
  position: relative; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
  color: var(--fg); text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.stat:hover { border-color: var(--line-2); background: var(--surface-2); }
.stat-top { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-2); font-size: 13px; font-weight: 500; }
.stat-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-n { font: 500 18px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--t); }
.stat[data-stat="review"] .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--t); }
.stat[data-stat="perma"] .dot { border-radius: 2px; }
.stat[data-stat="all"] .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.stat[aria-pressed="true"] {
  border-color: var(--accent-line); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.stat[aria-pressed="true"] .stat-top { color: var(--fg); }
/* «Все» — состояние по умолчанию: отмечаем спокойно, акцент — только для активного фильтра */
.stat[data-stat="all"][aria-pressed="true"] { border-color: var(--line-2); background: var(--surface-2); box-shadow: none; }
/* 6 чипов (v2.4: без «В работе»): «Все» + «Срок вышел» первой строкой, 4 статуса — 2×2 на телефоне */
.stat--due { order: 0; }
@media (max-width: 559.98px) {
  .stat { padding: 10px 11px; gap: 8px; }
  .stat-top { font-size: 12.5px; gap: 7px; }
}
.stat--due.is-hot { border-color: var(--red-line); background: var(--red-soft); }
.stat--due.is-hot .stat-n, .stat--due.is-hot .stat-top { color: var(--red); }
.stat--due.is-hot[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--red); }
.stat--sk { cursor: default; height: 44px; }
.stat--sk .sk-line { width: 60%; }
.stat--sk .sk-num { width: 24px; height: 16px; }
@media (min-width: 560px) {
  /* Планшет: 6 чипов = 2 широких сверху («Все», «Срок вышел») + 4 статуса строкой — без пустой ячейки */
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { grid-column: span 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 12px 14px 14px; }
  .stats > :nth-child(-n+2) { grid-column: span 2; }
  .stat--due { order: 0; }
  .stat-n { font-size: 24px; }
  .stat--sk { height: 76px; }
}
@media (min-width: 1100px) {
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat, .stats > :nth-child(-n+2) { grid-column: auto; }
}

/* ---------- Индикаторы ---------- */
.pulse { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--red); }
.ring { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  .pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: inherit; animation: pulse 1.9s var(--ease) infinite;
  }
}
@keyframes pulse { 0% { transform: scale(1); opacity: .65; } 75%, 100% { transform: scale(3); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Пора проверить ---------- */
.alerts.is-hot { border-color: var(--red-line); box-shadow: inset 0 2px 0 var(--red); }
.al-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  grid-template-areas: "ind who time" ". meta meta" "acts acts acts";
  align-items: center; gap: 6px 12px;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.al-row:first-child { border-top: 0; }
.al-row--due { background: linear-gradient(90deg, var(--red-soft), transparent 75%); }
.al-ind { grid-area: ind; }
.al-who { grid-area: who; display: flex; align-items: center; gap: 4px; min-width: 0; }
.al-who .handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 2px; }
.al-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 12.5px; min-width: 0; }
.al-meta .sep { color: var(--faint); }
@media (max-width: 639.98px) {
  /* Телефон: срок и дата — всегда отдельной строкой (без «висящей» точки-разделителя в конце строки) */
  .al-meta > .sep:nth-last-child(2) { display: none; }
  .al-meta > :last-child { flex-basis: 100%; }
}
.al-time { grid-area: time; text-align: right; font: 600 13px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-time .tm-lbl { display: block; margin-bottom: 3px; }
.al-row--due .al-time { color: var(--red); }
.al-row--soon .al-time { color: var(--amber); }
.al-acts { grid-area: acts; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
@media (min-width: 640px) { .al-acts { display: flex; flex-wrap: wrap; } }
/* Планшет: кнопки выровнены по логину, как и мета-строка */
@media (min-width: 640px) and (max-width: 1099.98px) {
  .al-row { grid-template-areas: "ind who time" ". meta meta" ". acts acts"; }
}
/* Быстрые действия — спокойные контурные кнопки; цвет несёт только точка статуса */
.qa { background: var(--surface); }
.qa:hover { background: var(--surface-3); }
.qa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t); flex: none; }
.qa[data-status="review"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--t); }
.qa[data-status="perma"]::before { border-radius: 2px; }
.qa--reuse::before { display: none; }
.qa--reuse { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.qa--reuse:hover { background: var(--accent-soft); border-color: var(--accent); }
.al-more { padding: 10px 16px; border-top: 1px solid var(--line); }
.al-sk { display: flex; justify-content: space-between; gap: 20px; padding: 16px; border-top: 1px solid var(--line); }
.al-sk:first-child { border-top: 0; }
@media (min-width: 1100px) {
  .al-row {
    grid-template-columns: 8px minmax(200px, 1fr) minmax(0, 1.1fr) 118px auto;
    grid-template-areas: "ind who meta time acts";
    column-gap: 10px;
    min-height: 58px;
    padding: 9px 16px;
  }
  /* Одна строка мета-данных: одинаковая высота строк; срок/дата обрезаются многоточием */
  .al-meta { flex-wrap: nowrap; overflow: hidden; }
  .al-meta > * { flex: none; white-space: nowrap; }
  .al-meta > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .al-time { text-align: left; }
  .al-time .tm-lbl { display: block; margin: 0 0 3px; }
  .al-acts { flex-wrap: nowrap; margin-top: 0; justify-content: flex-end; }
}
.alerts:focus { outline: none; }
.alerts:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.is-copied, .is-copied:hover { color: var(--green) !important; border-color: var(--green-line) !important; }

/* Пустые состояния */
.empty { display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px; }
.empty-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.empty-ic .ic { width: 18px; height: 18px; }
.empty-ic.t-green { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.empty-ic.t-red { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.empty-ic.t-accent { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-line); }
.empty-t { font: 500 14px/1.35 var(--f-display); letter-spacing: -.01em; }
.empty-d { color: var(--muted); font-size: 13.5px; margin-top: 4px; max-width: 64ch; }
.empty-d .mono { color: var(--fg-2); }
.empty-a { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.empty--big { padding: 40px 24px; gap: 20px; position: relative; overflow: hidden; }
.empty--big .empty-ic { width: 48px; height: 48px; border-radius: 14px; }
.empty--big .empty-ic .ic { width: 22px; height: 22px; }
.empty--big .empty-t { font-size: 17px; }

/* ---------- Добавление ---------- */
.add-h { margin: 0; font: inherit; }
.add-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 12px; border: 0; border-radius: var(--r-lg);
  background: transparent; text-align: left; cursor: pointer;
}
.add-toggle:hover .add-title { color: var(--accent-text); }
.add-plus {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
  transition: background-color .15s, color .15s;
}
.add-plus .ic { stroke-width: 2.4; transition: transform .2s var(--ease); }
/* Открыто: поворачиваем только «+» (в «×»), сама плашка остаётся ровной и становится тише */
.add-toggle[aria-expanded="true"] .add-plus { background: var(--surface-3); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.add-toggle[aria-expanded="true"] .add-plus .ic { transform: rotate(45deg); }
.add-title { font: 500 var(--fs-md)/1.25 var(--f-display); letter-spacing: -.01em; transition: color .15s; }
.add-hint { display: none; color: var(--muted); font-size: 13px; }
@media (min-width: 640px) { .add-hint { display: inline; } }
.chev { margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
.add-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.add.is-open { border-color: var(--line-2); }
.add-body { border-top: 1px solid var(--line); padding: 16px; }
.add-grid { display: grid; gap: 18px; }
.add-input { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.add-input textarea { min-height: 148px; font-family: var(--f-mono); font-size: 13px; }
.add-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.add-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 2px; }
.add-submit .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .add-submit .btn { flex: 0 0 auto; } }
@media (min-width: 980px) {
  .add-body { padding: 20px; }
  .add-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
}

/* Превью разбора */
.pv { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); overflow: hidden; }
.pv-head {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.pv-head b { color: var(--fg); font-weight: 600; font-family: var(--f-mono); }
.pv-head .ok b { color: var(--green); }
.pv-head .dup b { color: var(--amber); }
/* Строка превью: [бейдж] логин — сверху, части/теги/гео — ровной строкой под логином */
.pv-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 7px 8px; padding: 10px 12px; border-top: 1px solid var(--line); min-width: 0;
}
.pv-row:first-of-type, .pv-head + .pv-row { border-top: 0; }
.pv-row .handle { font-size: 12.5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-toks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.pv-toks .tok, .pv-toks .tag { height: 22px; }
@media (min-width: 560px) { .pv-toks { grid-column: 2; } }
/* В превью части — просто метки, не кнопки */
.pv .tok, .pv .tok:hover { cursor: default; border-color: var(--line); background: var(--surface-2); color: var(--fg-2); }
.pv-row--dup .handle { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.pv-badge {
  display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: var(--r-xs);
  font: 600 10.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
  color: var(--t); background: var(--ts); white-space: nowrap;
}
.pv-geo { font-size: 12px; color: var(--accent-text); white-space: nowrap; }
.pv-geo--none { color: var(--muted); }
.pv-more { padding: 8px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }

/* ---------- Список: шапка и тулбар ---------- */
.accounts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.accounts:focus { outline: none; }
.accounts-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 32px; }
.list-count { color: var(--muted); font: 500 12.5px/1 var(--f-mono); }
#f-reset, #nw-reset { margin-left: auto; }

.toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.search { grid-column: 1 / -1; position: relative; }
.search > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input[type="search"] { padding-left: 36px; padding-right: 36px; }
.search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search input:focus ~ .search-kbd, .search input:not(:placeholder-shown) ~ .search-kbd { display: none; }
@media (pointer: coarse) { .search-kbd, .kbd-hint { display: none; } }
.toolbar .switch { grid-column: 1 / -1; justify-content: flex-start; }
.toolbar select { font-size: 13.5px; }
@media (min-width: 760px) {
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; }
  .search { flex: 1 1 220px; }
  .toolbar select { width: auto; flex: 0 0 auto; max-width: 220px; }
  .toolbar .switch { grid-column: auto; }
}
/* Планшет: сверху поиск + переключатель паролей, ниже четыре фильтра равной ширины — ровная сетка без «хвостов» */
@media (min-width: 760px) and (max-width: 1099.98px) {
  /* Последняя колонка — не уже переключателя паролей (иначе на 768 его подпись вылезала за рамку) */
  .toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(max-content, 1fr); }
  .search { grid-column: 1 / 4; grid-row: 1; }
  .toolbar .switch { grid-column: 4; grid-row: 1; }
  .toolbar select { width: 100%; max-width: none; }
}

/* ---------- Список: строки (карточки на мобиле, сетка-таблица на десктопе) ---------- */
.list-body { display: grid; gap: 10px; }
@media (min-width: 700px) and (max-width: 1099.98px) {
  .list-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-body > .empty, .list-body > .acc--sk { grid-column: 1 / -1; }
}
.lhead { display: none; }

.acc {
  position: relative; min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Гео — полное название страны (до 16 символов): ему и стримеру по половине строки */
  grid-template-areas:
    "acc acc acc acc"
    "st st tm tm"
    "geo geo str str"
    "perf perf ru ru"
    "acts acts acts acts";
  gap: 14px 12px;
  padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.acc > div { min-width: 0; }
.c-acc { grid-area: acc; }
.c-st { grid-area: st; }
.c-tm { grid-area: tm; }
.c-geo { grid-area: geo; }
.c-str { grid-area: str; }
.c-perf { grid-area: perf; }
.c-ru { grid-area: ru; }
.c-acts { grid-area: acts; display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.c-acts .btn { flex: 1 1 0; }
/* В карточке обе кнопки одного веса: «Ещё» — контурная, без заливки */
.c-acts .btn--more { border-color: var(--line-2); }
.c-acts .btn--more:hover { border-color: var(--faint); }
.acc .ml {
  display: block; margin-bottom: 6px;
  font: 600 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.c-str .val { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acc--due { border-color: var(--red-line); background: linear-gradient(90deg, var(--red-soft), transparent 55%), var(--surface); }
/* Метка срока — ровная «таблетка» у левого края (inset-тень гнулась по скруглению карточки) */
.acc--due::before, .acc--soon::before {
  content: ""; position: absolute; z-index: 1;
  left: -1px; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--red);
  pointer-events: none;
}
.acc--soon::before { background: var(--amber); }
.acc--sk { display: flex; flex-direction: column; gap: 12px; min-height: 120px; }

/* Аккаунт: логин, части, теги, заметка */
.acc-login { display: flex; align-items: center; gap: 2px; min-width: 0; }
.handle {
  font: 600 13.5px/1.3 var(--f-mono); color: var(--fg);
  overflow-wrap: anywhere; min-width: 0; margin-right: 4px;
}
.acc-login .handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-toks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tok {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; min-width: 0; height: 24px; padding: 0 8px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--fg-2); font: 500 12px/1 var(--f-mono); cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.tok > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok .ic { width: 12px; height: 12px; opacity: .45; transition: opacity .15s; }
.tok:hover { border-color: var(--accent-line); color: var(--fg); background: var(--surface-3); }
.tok:hover .ic { opacity: 1; }
.tok--masked { gap: 5px; padding: 0 7px; }
.tok--masked > span { letter-spacing: .02em; color: var(--muted); }
.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; max-width: 100%;
  border-radius: 999px; border: 1px dashed var(--line-2); color: var(--muted);
  font: 500 11.5px/1 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag::before { content: "#"; color: var(--faint); margin-right: 1px; }
.acc-note {
  margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.45;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Статус прямо в строке */
.st-sel {
  --dot: radial-gradient(circle closest-side, var(--t) 0 calc(100% - 1px), transparent 100%) 10px 50% / 8px 8px no-repeat;
  width: 100%; max-width: 210px; height: 30px;
  padding: 0 21px 0 23px;
  border-radius: 999px; border: 1px solid var(--tl);
  color: var(--t); font: 600 12.5px/1 var(--f-body);
  background:
    var(--dot),
    linear-gradient(45deg, transparent 50%, var(--t) 50%) calc(100% - 14px) calc(50% + 1px) / 5px 5px no-repeat,
    linear-gradient(135deg, var(--t) 50%, transparent 50%) calc(100% - 9px) calc(50% + 1px) / 5px 5px no-repeat,
    var(--ts);
}
.st-sel:hover { border-color: var(--t); }
.st-sel[data-st="review"] { --dot: radial-gradient(circle closest-side, transparent 0 calc(100% - 2.6px), var(--t) calc(100% - 2px) calc(100% - 1px), transparent 100%) 10px 50% / 9px 9px no-repeat; }
.st-sel[data-st="perma"] { --dot: linear-gradient(var(--t), var(--t)) 11px 50% / 7px 7px no-repeat; }
.st-sel:disabled { opacity: .6; cursor: progress; }
@media (pointer: coarse) { .st-sel { height: 36px; } }

/* Таймер */
.tm { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font: 600 14px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
.tm-main .ic { width: 14px; height: 14px; color: var(--muted); }
.tm-lbl { font: 600 10.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.tm--soon .tm-main, .tm--soon .tm-main .ic { color: var(--amber); }
.tm--due .tm-main { color: var(--red); }
/* «Срок вышел» — всегда надстрочник, ниже точка + время: одна и та же раскладка при любой ширине колонки
   (раньше метка и время то стояли в строку, то переносились) */
.tm--due .tm-main {
  display: grid; grid-template-columns: 14px auto; justify-content: start; align-items: center;
  gap: 5px 7px;
}
.tm--due .tm-main .tm-lbl { grid-column: 1 / -1; order: -1; }
.tm--due .tm-main .pulse { justify-self: center; }
/* В карточке надстрочник «Срок вышел» встаёт на место подписи колонки — без двух подписей подряд */
.c-tm:has(.tm--due) > .ml { display: none; }
.bar { position: relative; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--bar-run); transition: width .6s var(--ease); }
.tm--soon .bar i { background: var(--amber); }
.tm--due .bar i { background: var(--red); }
.tm-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm--idle .tm-sub { display: flex; align-items: center; gap: 6px; white-space: normal; line-height: 1.4; }
.tm--idle .tm-sub .ic { width: 13px; height: 13px; flex: none; }

/* Мелкие значения */
.geo {
  display: inline-flex; align-items: center; min-height: 22px; padding: 4px 7px; max-width: 100%;
  border-radius: var(--r-xs); background: var(--surface-3); color: var(--fg-2);
  font: 600 12px/1.15 var(--f-mono); letter-spacing: .04em; white-space: normal; overflow-wrap: anywhere;
}
/* В одну строку мета-данных («Пора проверить») гео не переносим — там оно идёт рядом с датой */
.al-meta .geo { white-space: nowrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; max-width: 100%;
  border-radius: 999px; border: 1px solid var(--tl); background: var(--ts); color: var(--t);
  font: 600 12px/1 var(--f-body); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.reuse { font: 600 13px/1 var(--f-mono); color: var(--accent-text); white-space: nowrap; }

/* Десктоп: плотная таблица-сетка */
@media (min-width: 1100px) {
  .list { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  .list-body { display: block; }
  .lhead, .acc {
    display: grid;
    /* Гео — не код страны, а что ввели («КАМБОДЖА», до 16 символов): колонка тянется, чип переносится */
    grid-template-columns: minmax(200px, 2.2fr) 164px minmax(160px, 1.1fr) minmax(96px, 1fr) minmax(76px, .8fr) 110px 40px 108px;
    grid-template-areas: "acc st tm geo str perf ru acts";
    column-gap: 12px;
    padding: 0 16px;
  }
  .lhead > span:last-child { justify-self: end; }
  .lhead {
    position: sticky; top: var(--header-h); z-index: 5;
    height: 40px; align-items: center;
    border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--surface-2);
    font: 600 var(--fs-xs)/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
  .acc {
    align-items: center; row-gap: 0;
    padding-top: 12px; padding-bottom: 12px;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: transparent;
    transition: background-color .12s;
  }
  .acc:first-child { border-top: 0; }
  .acc:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .acc:hover { background: var(--surface-2); }
  .acc--due { border-color: var(--line); background: linear-gradient(90deg, var(--red-soft), transparent 45%); }
  .acc--due:hover { background: linear-gradient(90deg, var(--red-soft), transparent 45%), var(--surface-2); }
  .acc--due::before, .acc--soon::before { left: 0; top: 10px; bottom: 10px; }
  .acc .ml {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .c-acts { padding-top: 0; border-top: 0; justify-content: flex-end; gap: 4px; }
  .c-acts .btn { flex: none; }
  .c-acts .more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .c-acts .btn--more { width: 30px; padding: 0; border-color: transparent; }
  .c-acts .btn--more:hover { border-color: transparent; }
  .acc--sk { display: flex; min-height: 64px; justify-content: center; gap: 10px; padding: 14px 16px; }
  .list-body > .empty { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (max-width: 1099.98px) {
  .list-body > .empty { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
}

/* ==========================================================================
   Вкладка «Новые»: сводка по гео, форма, список по группам гео
   ========================================================================== */

/* Сводка по гео: «Все M» + чип на каждое гео (клик — фильтр, повторный — сброс) */
.geos { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.gchip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; max-width: 100%; min-width: 0; padding: 0 6px 0 13px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
  color: var(--fg-2); text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.gchip:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--fg); }
.gchip-l {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 12.5px/1 var(--f-mono); letter-spacing: .05em;
}
.gchip-n {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; flex: none;
  border-radius: 7px; background: var(--surface-3); color: var(--fg);
  font: 500 14px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  transition: background-color .15s, color .15s;
}
.gchip--all .gchip-l, .gchip--none .gchip-l { font: 500 13px/1 var(--f-body); letter-spacing: 0; }
.gchip--none .gchip-l { color: var(--muted); }
.gchip[aria-pressed="true"] {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.gchip[aria-pressed="true"] .gchip-l { color: var(--fg); }
.gchip[aria-pressed="true"] .gchip-n { background: var(--accent); color: var(--accent-fg); }
/* «Все» — состояние по умолчанию: отмечаем спокойно, как «Все» в сводке банов */
.gchip--all[aria-pressed="true"] { border-color: var(--line-2); background: var(--surface-2); box-shadow: none; }
.gchip--all[aria-pressed="true"] .gchip-n { background: var(--surface-3); color: var(--fg); }
.gchip--sk { width: 104px; cursor: default; padding-right: 13px; }
.gchip--sk .sk-line { width: 100%; }
@media (min-width: 560px) {
  .gchip { height: 44px; gap: 12px; padding: 0 7px 0 14px; }
  .gchip-n { min-width: 30px; height: 30px; font-size: 15px; }
}

/* Тулбар новых — только поиск и переключатель паролей: с планшета просто строкой */
@media (min-width: 760px) {
  .toolbar--new { display: flex; flex-wrap: nowrap; align-items: center; }
  .toolbar--new .search { flex: 1 1 auto; min-width: 0; }
  .toolbar--new .switch { flex: none; }
}

/* Гео — главное поле формы новых: крупнее, моноширинное, заглавными (как его покажет список) */
.field--geo input[type="text"] {
  height: 44px;
  font: 600 15px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
}
.field--geo input[type="text"]::placeholder { font: 400 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; }
@media (pointer: coarse) and (max-width: 767.98px) {
  .field--geo input[type="text"] { font-size: 16px; }
}
.geo-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.gpick {
  height: 28px; max-width: 100%; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--fg-2); font: 600 11.5px/1 var(--f-mono); letter-spacing: .05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.gpick:hover { border-color: var(--faint); color: var(--fg); }
.gpick[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
@media (pointer: coarse) { .gpick { height: 34px; padding: 0 12px; } }

/* Список: группы гео. Мобила/планшет — заголовок с линией и карточки; десктоп — таблица в карточке группы */
.nw-list { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.nw-list > .empty { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ng { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ng-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ng-head::after { content: ""; flex: 1 1 24px; height: 1px; background: var(--line); }
.ng-title {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font: 600 13px/1.25 var(--f-mono); letter-spacing: .06em; color: var(--fg);
}
.ng-title .ic { width: 15px; height: 15px; color: var(--muted); }
.ng-geo { min-width: 0; overflow-wrap: anywhere; }
.ng-sep { color: var(--faint); }
.ng-n { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng--none .ng-title .ic { color: var(--faint); }
.ng--none .ng-geo { font-family: var(--f-body); letter-spacing: .01em; color: var(--muted); }
.ng-col { display: none; }
.ng-body { display: grid; gap: 10px; min-width: 0; }
@media (min-width: 700px) and (max-width: 1099.98px) {
  .ng-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nacc {
  position: relative; min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "acc acc"
    "add add"
    "acts acts";
  gap: 14px 12px;
  padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.nacc > div { min-width: 0; }
.c-add { grid-area: add; }
.nacc .ml {
  display: block; margin-bottom: 6px;
  font: 600 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
/* Главное действие карточки — шире; «Ещё» — по содержимому */
.nacc .c-acts .btn--ban { flex: 1 1 auto; }
.nacc .c-acts .btn--more { flex: 0 0 auto; padding: 0 14px; }
/* «Взять в работу» — на телефоне отдельной строкой во всю ширину, под ней «Ушёл в бан» и «Ещё» */
.nacc .c-acts { flex-wrap: wrap; }
.nacc .c-acts .btn--work, .nacc .c-acts .btn--unwork { flex: 1 1 100%; }

/* «В работе» (v2.4): кнопка, подсветка строки, бейдж и время в работе */
.btn--work { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
.btn--work:hover { background: var(--blue); border-color: var(--blue); color: var(--surface); }
.btn--work.is-busy::after, .btn--unwork.is-busy::after { border-color: currentColor; border-right-color: transparent; }
.nacc--live {
  border-color: var(--blue-line);
  /* Подсветка — заливка на всю строку (а не уходящий градиент), чтобы «в работе» было видно сразу */
  background: linear-gradient(var(--blue-soft), var(--blue-soft)), var(--surface);
}
.nacc--live::before {
  content: ""; position: absolute; z-index: 1;
  left: -1px; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--blue);
  pointer-events: none;
}
.added--work .added-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; white-space: normal; }
.added--work .added-when { color: var(--fg); font-weight: 500; }
.added--work + .added { margin-top: 6px; }
.work-chip { flex: none; height: 22px; padding: 0 8px; font-size: 11.5px; }
.added--work .added-age { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-weight: 500; }
.added--work .added-age .ic { width: 13px; height: 13px; flex: none; }
/* Чип-фильтр «В работе» в сводке «Новых» — синим, как подсветка строк */
.gchip--work .gchip-l { font: 500 13px/1 var(--f-body); letter-spacing: 0; color: var(--blue); }
.gchip--work .gchip-n { background: var(--blue-soft); color: var(--blue); }
.gchip--work[aria-pressed="true"] { border-color: var(--blue-line); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue-line); }
.gchip--work[aria-pressed="true"] .gchip-l { color: var(--blue); }
.gchip--work[aria-pressed="true"] .gchip-n { background: var(--blue); color: var(--surface); }
.added { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.added-d { font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.added-by { color: var(--muted); }
.added-age { font-size: 12px; color: var(--muted); }
/* Стример/оценка у вернувшихся из «Банов» — компактно под датой */
.nacc-was { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; min-width: 0; }
.nacc-was .val { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nacc-was .val .ic { width: 13px; height: 13px; flex: none; color: var(--muted); }
/* Возвращён в новые из «Банов»: на мобиле это видно по подписи поля, на десктопе (подпись скрыта) — пометка */
.added-back { display: none; color: var(--accent-text); }
.nacc--sk { display: flex; flex-direction: column; gap: 12px; min-height: 96px; }
/* Только что добавленные — короткая подсветка, чтобы глаз нашёл их в группе */
@media (prefers-reduced-motion: no-preference) {
  .nacc--fresh { animation: fresh 2.4s var(--ease); }
}
@keyframes fresh {
  0%, 40% { background-color: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
}

@media (min-width: 1100px) {
  .nw-list { gap: 16px; }
  .ng { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  .ng-head, .nacc {
    display: grid;
    grid-template-columns: minmax(260px, 2.4fr) minmax(200px, 1.2fr) 304px;
    grid-template-areas: "acc add acts";
    column-gap: 12px;
    padding: 0 16px;
  }
  /* Заголовок группы — он же шапка колонок; липнет под шапкой, пока листается своя группа */
  .ng-head {
    position: sticky; top: var(--header-h); z-index: 4;
    height: 42px; align-items: center;
    border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--surface-2);
  }
  .ng-head::after { display: none; }
  .ng-title { grid-area: acc; }
  .ng-col {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 var(--fs-xs)/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  }
  .ng-col--add { grid-area: add; }
  .ng-body { display: block; }
  .nacc {
    align-items: center; row-gap: 0;
    padding-top: 12px; padding-bottom: 12px;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: transparent;
    transition: background-color .12s;
  }
  .nacc:first-child { border-top: 0; }
  .nacc:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .nacc:hover { background: var(--surface-2); }
  .nacc .ml {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nacc .c-acts .btn--ban { flex: none; }
  .nacc .c-acts .btn--more { flex: none; padding: 0; }
  .nacc .c-acts { flex-wrap: nowrap; }
  .nacc .c-acts .btn--work, .nacc .c-acts .btn--unwork { flex: none; }
  .nacc--live { background: var(--blue-soft); }
  .nacc--live:hover { background: linear-gradient(var(--blue-soft), var(--blue-soft)), var(--surface-2); }
  .nacc--live + .nacc--live { border-top-color: var(--blue-line); }
  .nacc--live::before { left: 0; top: 10px; bottom: 10px; }
  .added-back { display: inline; }
  .nacc--sk { display: flex; min-height: 64px; justify-content: center; gap: 10px; padding: 14px 16px; }
}

/* ==========================================================================
   «Настройки» (v2.2): отдельный экран — вместо вкладок «Назад» и заголовок;
   раздел «Стримеры» (справочник для выбора «Кто стримил»)
   ========================================================================== */

.set-head { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; }
.set-back { padding: 0 12px 0 8px; color: var(--fg-2); }
.set-back .ic { width: 18px; height: 18px; }
.set-title {
  min-width: 0; padding-left: 14px; border-left: 1px solid var(--line-2);
  font: 500 var(--fs-xl)/1.15 var(--f-display); letter-spacing: -.02em;
}
.set-title:focus { outline: none; }
.set-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }

.set-grid { display: grid; gap: 22px; align-items: start; min-width: 0; }
@media (min-width: 1100px) { .set-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } }

.set-panel:focus { outline: none; }
.set-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.set-panel-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.set-ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.set-ic .ic { width: 18px; height: 18px; }
.set-panel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 1px; }
.set-panel-d { color: var(--muted); font-size: 13px; line-height: 1.45; }
.set-count { flex: none; padding-top: 4px; white-space: nowrap; }

/* Добавление: поле и кнопка в строку (Enter — тоже «Добавить») */
.st-add { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; }
.st-add-row { display: flex; gap: 8px; min-width: 0; }
.st-add-row input { flex: 1 1 auto; }
.st-add-row .btn { flex: none; height: 38px; }
.st-add .form-error { margin-top: 3px; }

/* «Есть в аккаунтах, но нет в списке: … — [Добавить все]» */
.st-missing { padding: 0 16px 16px; }
.st-miss {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--amber-line); background: var(--amber-soft);
}
.st-miss-ic { display: grid; color: var(--amber); padding-top: 1px; }
.st-miss-ic .ic { width: 17px; height: 17px; }
.st-miss-t { font-size: 13.5px; line-height: 1.45; color: var(--fg); overflow-wrap: anywhere; }
.st-miss-t b { font-weight: 600; }
.st-miss-d { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.st-miss-btn { grid-column: 1 / -1; width: 100%; background: var(--surface); }
@media (min-width: 640px) {
  .st-miss { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .st-miss-ic { align-self: start; }
  .st-miss-btn { grid-column: auto; width: auto; }
}

/* Список: телефон — карточка-строка с кнопками снизу; с 640 px — имя и счётчики слева, действия справа */
.st-body { border-top: 1px solid var(--line); min-width: 0; }
.st-body > .empty { padding: 22px 16px; }
.str-list { list-style: none; margin: 0; padding: 0; }
.str {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "ava name" "ava stats" "acts acts";
  align-items: center; gap: 3px 12px;
  padding: 14px 16px; border-top: 1px solid var(--line);
  transition: background-color .12s;
}
.str:first-child { border-top: 0; }
.str:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.str-ava {
  grid-area: ava; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 600 12.5px/1 var(--f-display); text-transform: uppercase;
}
.str-name {
  grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--fg);
}
.str-stats { grid-area: stats; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.str-c { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.str-c b { font: 600 12.5px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.str-c.t-red b, .str-c.t-accent b { color: var(--t); }
.str-c.t-red::before, .str-c.t-accent::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--t); }
.str-c.is-zero b { color: var(--faint); }
.str-acts { grid-area: acts; display: flex; gap: 8px; margin-top: 11px; min-width: 0; }
.str-acts .btn { flex: 1 1 0; min-width: 0; }
/* На телефоне обе кнопки одного веса (как «Реюз» / «Ещё» в карточке аккаунта) */
.str-acts .btn--ghost { border-color: var(--line-2); }
.str-note { grid-column: 1 / -1; margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.str-note--warn { color: var(--red); }
.str-err { grid-column: 1 / -1; margin-top: 8px; }
/* Переименование прямо в строке */
.str--edit { grid-template-areas: "ava input" "acts acts"; background: var(--surface-2); }
.str-input { grid-area: input; }
.str--sk { grid-template-areas: "ava name" "ava stats"; gap: 9px 12px; }
.str--sk .str-ava { height: 34px; border-radius: 50%; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .str--fresh { animation: fresh 2.4s var(--ease); }
}
@media (min-width: 640px) {
  .str {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "ava name acts" "ava stats acts";
    column-gap: 14px; padding: 12px 16px;
  }
  .str:hover:not(.str--edit):not(.str--sk) { background: var(--surface-2); }
  .str-acts { margin-top: 0; gap: 4px; }
  .str-acts .btn { flex: none; }
  .str-acts .btn--ghost { border-color: transparent; }
  /* «Удалить» в списке тихое, пока не взведено: красная заливка — только у «Точно удалить?» */
  .str-del:not([data-armed]) { border-color: transparent; color: var(--muted); }
  .str-del:not([data-armed]):hover { background: var(--red-soft); border-color: transparent; color: var(--red); }
  .str-note, .str-err { grid-column: 2 / -1; margin-top: 6px; }
  .str--edit { grid-template-areas: "ava input acts"; }
  .str--edit .str-input { height: 34px; }
}

/* «Как это работает» — справка рядом со списком (на десктопе — колонкой справа) */
.set-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.set-aside-t { font: 600 var(--fs-xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.set-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.set-points li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.set-points .ic {
  width: 32px; height: 32px; padding: 7px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line); color: var(--accent-text);
}
.set-points span { min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.set-points b { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 600; color: var(--fg); }
@media (min-width: 640px) and (max-width: 1099.98px) {
  .set-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .set-points li { flex-direction: column; gap: 10px; }
}
@media (min-width: 1100px) {
  .set-aside { position: sticky; top: calc(var(--header-h) + 24px); padding-top: 16px; }
}

/* ---------- Скелетоны ---------- */
.sk { display: block; height: 10px; border-radius: 5px; background: var(--sk); }
.sk-line { height: 10px; }
.w-20 { width: 20%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .sk {
    background: linear-gradient(90deg, var(--sk) 0%, var(--sk-hi) 50%, var(--sk) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
  }
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Модальные окна ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal {
  width: 100%; max-height: 92vh; max-height: 92dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-pop);
}
.m-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.m-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.m-kicker { font: 600 var(--fs-xs)/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.m-title { font: 500 16px/1.3 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.m-title.mono { font-family: var(--f-mono); font-weight: 600; font-size: 15px; letter-spacing: 0; word-break: break-all; }
/* «В бан:» перед логином — шрифт заголовков и красный тон действия */
.m-title-pre { font: 500 15px/1.3 var(--f-display); letter-spacing: -.01em; color: var(--red); word-break: normal; white-space: nowrap; }
@media (max-width: 599.98px) {
  /* Шторка на телефоне: очень длинный логин не съедает пол-экрана (полностью он есть в строке аккаунта) */
  .m-title.mono { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.m-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 12.5px; }
.m-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.m-lead { color: var(--fg-2); font-size: 13.5px; text-wrap: pretty; }
.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.m-grid--dates { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.m-calc {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--sunken); border: 1px dashed var(--line-2);
  color: var(--muted); font-size: 13px;
}
.m-calc b { color: var(--fg); font-weight: 600; }
.m-calc .ic { color: var(--accent-text); }
.m-sep { height: 1px; background: var(--line); margin: 2px 0; }
.m-foot {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 20px;
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.m-foot-l, .m-foot-r { display: flex; flex-wrap: wrap; gap: 8px; }
.m-foot-r { margin-left: auto; }
@media (min-width: 600px) {
  /* Десктоп: окно не выше экрана — шапка и кнопки всегда на виду, прокручивается только тело */
  .overlay { align-items: flex-start; padding: max(6vh, 24px) 24px 24px; }
  .modal {
    max-width: 520px; max-height: calc(100vh - max(6vh, 24px) - 24px); max-height: calc(100dvh - max(6vh, 24px) - 24px);
    overflow: hidden; border-bottom: 1px solid var(--line-2); border-radius: var(--r-xl);
  }
  .modal--wide { max-width: 780px; }
  .m-head, .m-foot { position: static; flex: none; }
  .m-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .m-foot { padding-bottom: 12px; }
  .m-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .overlay { animation: fade .16s ease-out; }
  .modal { animation: rise .22s var(--ease); }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* История */
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); }
/* История без собственного скролла: прокручивается тело окна (вложенный скролл только мешает) */
.hist-i { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.hist-i:first-child { border-top: 0; }
.hist-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--t); }
.hist-t { font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
.hist-note { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; overflow-wrap: anywhere; }
.hist-m { font: 500 11.5px/1.3 var(--f-mono); color: var(--muted); margin-top: 3px; }
.hist-empty { padding: 12px; color: var(--muted); font-size: 13px; }

/* ---------- Тосты ---------- */
.toasts {
  position: fixed; z-index: 70;
  left: var(--gutter); right: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
@media (min-width: 760px) { .toasts { left: auto; right: 24px; bottom: 24px; align-items: flex-end; } }
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: min(440px, 100%);
  padding: 11px 14px 11px 12px; border-radius: 12px;
  background: var(--fg); color: var(--bg);
  box-shadow: var(--shadow-toast);
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
}
.toast .ic { width: 17px; height: 17px; margin-top: 1px; }
.toast--success .ic { color: var(--toast-ok); }
.toast--error .ic { color: var(--toast-err); }
.toast-b { min-width: 0; overflow-wrap: anywhere; }
.toast-d { opacity: .72; font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: rise .2s var(--ease); } }

/* ---------- Вход ---------- */
.login {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  background: var(--bg);
}
.login-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 28px;
  padding: 24px var(--gutter) 8px;
}
.login-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.eyebrow { font: 600 var(--fs-xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.login-title { font: 600 clamp(24px, 6.4vw, 44px)/1.08 var(--f-display); letter-spacing: -.035em; max-width: 15ch; text-wrap: balance; }
.login-lead { color: var(--fg-2); font-size: 15px; line-height: 1.55; max-width: 48ch; }
.login-points { display: none; list-style: none; margin: 8px 0 0; padding: 0; flex-direction: column; gap: 14px; }
.login-points li { display: flex; gap: 12px; align-items: flex-start; }
.login-points .ic {
  width: 34px; height: 34px; padding: 8px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--accent-text);
}
.login-points b { display: block; font-weight: 600; color: var(--fg); margin-bottom: 1px; }
.login-points span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.dial { display: none; }
.login-panel { display: flex; flex-direction: column; align-items: center; padding: 20px var(--gutter) 40px; }
.login-tools { position: absolute; z-index: 2; top: 18px; right: var(--gutter); }
.login-card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line);
}
.login-card-head { display: flex; gap: 12px; align-items: flex-start; }
.login-card-head .muted { font-size: 13px; margin-top: 4px; }
.login-lock {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.login-card .btn--primary { width: 100%; margin-top: 4px; }

@media (min-width: 900px) {
  .login { grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); align-content: stretch; }
  .login-hero {
    justify-content: space-between; padding: 40px 56px 56px;
    background:
      linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px,
      var(--surface);
    border-right: 1px solid var(--line);
  }
  .login-points { display: flex; }
  .login-title { font-size: clamp(34px, 3.6vw, 50px); }
  .dial {
    display: block; position: absolute; z-index: 0;
    width: 440px; height: 440px; right: -120px; top: -120px;
    pointer-events: none;
  }
  .login-panel { justify-content: center; padding: 48px; }
  .login-tools { top: 24px; right: 24px; }
  .login-card { padding: 0; border: 0; background: transparent; gap: 18px; }
  .login-card .h2 { font-size: 18px; }
  .login-card-head { gap: 14px; margin-bottom: 4px; }
  .login-lock { width: 40px; height: 40px; border-radius: 11px; }
}
.dial-ticks { fill: none; stroke: var(--line-2); stroke-width: 12; stroke-dasharray: 1.4 17.66; }
.dial-major { fill: none; stroke: var(--faint); stroke-width: 22; stroke-dasharray: 2.6 92.69; opacity: .6; }
.dial-track { fill: none; stroke: var(--line); stroke-width: 10; }
.dial-arc { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 706.86 942.48; opacity: .85; }
.dial-hub { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .dial-arc { animation: dial 1.6s var(--ease) both .2s; }
}
@keyframes dial { from { stroke-dasharray: 0 942.48; } }

/* Карточка «Ещё»: раздел (v2.5) — селект + пояснение рядом */
.m-grid--sec { align-items: end; }
.m-sec-hint { margin: 0 0 11px; }
@media (max-width: 559.98px) { .m-grid--sec { grid-template-columns: minmax(0, 1fr); } .m-sec-hint { margin: 0; } }