/* дизайн-система */
/* ============================================================
   ИИ-Бот · Админ-кабинет — дизайн-система
   Тёмная тема по умолчанию, светлая по prefers-color-scheme,
   ручной оверрайд через :root[data-theme].
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* размеры/типографика (общие для тем) */
  --radius:16px; --radius-sm:12px; --radius-lg:20px;
  --sidebar-w:246px; --topbar-h:60px; --maxw:1280px;
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Inter",system-ui,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* тёмная палитра (по умолчанию) */
  --bg:#08080e;
  --bg-elev:#0e0e17;
  --surface:#14141f;
  --surface-2:#1c1c29;
  --surface-3:#262633;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.15);
  --text:#ececf4;
  --text-muted:#9494ab;
  --text-faint:#61617a;
  --accent:#8b7bff;
  --accent-1:#6e7bff;
  --accent-2:#a06bff;
  --accent-grad:linear-gradient(135deg,#6e7bff,#a06bff);
  --accent-weak:rgba(122,110,255,.15);
  --accent-border:rgba(122,110,255,.45);
  --ok:#34d399;   --ok-weak:rgba(52,211,153,.14);
  --warn:#f5b544; --warn-weak:rgba(245,181,68,.15);
  --danger:#ff6b81; --danger-weak:rgba(255,107,129,.15);
  --topbar-bg:rgba(14,14,23,.72);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 10px 34px -12px rgba(0,0,0,.55);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f3f4fb; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f1f2f9; --surface-3:#e6e8f3;
    --border:rgba(23,24,54,.10); --border-strong:rgba(23,24,54,.17);
    --text:#171826; --text-muted:#5b5d76; --text-faint:#8b8da6;
    --accent:#6a5cf0; --accent-1:#6e7bff; --accent-2:#9a5cf0;
    --accent-grad:linear-gradient(135deg,#6e7bff,#9a5cf0);
    --accent-weak:rgba(110,123,255,.12); --accent-border:rgba(110,123,255,.5);
    --ok:#0ea371; --ok-weak:rgba(14,163,113,.12);
    --warn:#c9820c; --warn-weak:rgba(201,130,12,.14);
    --danger:#e14a63; --danger-weak:rgba(225,74,99,.12);
    --topbar-bg:rgba(255,255,255,.75);
    --shadow-sm:0 1px 2px rgba(20,22,50,.06);
    --shadow:0 12px 34px -14px rgba(30,32,70,.22);
    --shadow-lg:0 28px 64px -22px rgba(30,32,70,.28);
  }
}
/* ручной оверрайд — выше специфичность, всегда выигрывает у media */
:root[data-theme="dark"]{
  --bg:#08080e; --bg-elev:#0e0e17; --surface:#14141f; --surface-2:#1c1c29; --surface-3:#262633;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.15);
  --text:#ececf4; --text-muted:#9494ab; --text-faint:#61617a;
  --accent:#8b7bff; --accent-1:#6e7bff; --accent-2:#a06bff;
  --accent-grad:linear-gradient(135deg,#6e7bff,#a06bff);
  --accent-weak:rgba(122,110,255,.15); --accent-border:rgba(122,110,255,.45);
  --ok:#34d399; --ok-weak:rgba(52,211,153,.14);
  --warn:#f5b544; --warn-weak:rgba(245,181,68,.15);
  --danger:#ff6b81; --danger-weak:rgba(255,107,129,.15);
  --topbar-bg:rgba(14,14,23,.72);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 10px 34px -12px rgba(0,0,0,.55);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --bg:#f3f4fb; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#f1f2f9; --surface-3:#e6e8f3;
  --border:rgba(23,24,54,.10); --border-strong:rgba(23,24,54,.17);
  --text:#171826; --text-muted:#5b5d76; --text-faint:#8b8da6;
  --accent:#6a5cf0; --accent-1:#6e7bff; --accent-2:#9a5cf0;
  --accent-grad:linear-gradient(135deg,#6e7bff,#9a5cf0);
  --accent-weak:rgba(110,123,255,.12); --accent-border:rgba(110,123,255,.5);
  --ok:#0ea371; --ok-weak:rgba(14,163,113,.12);
  --warn:#c9820c; --warn-weak:rgba(201,130,12,.14);
  --danger:#e14a63; --danger-weak:rgba(225,74,99,.12);
  --topbar-bg:rgba(255,255,255,.75);
  --shadow-sm:0 1px 2px rgba(20,22,50,.06);
  --shadow:0 12px 34px -14px rgba(30,32,70,.22);
  --shadow-lg:0 28px 64px -22px rgba(30,32,70,.28);
}

/* ---------- RESET ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font-sans); font-size:14px; line-height:1.5;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font-family:inherit; }
img,svg{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent-weak); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--border-strong); }

/* ---------- TYPO UTILITIES ---------- */
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--font-mono); font-size:.92em; }
.right{ text-align:right; } .center{ text-align:center; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.nowrap{ white-space:nowrap; }
.h1{ font-size:22px; font-weight:680; letter-spacing:-.02em; }
.h2{ font-size:16px; font-weight:650; letter-spacing:-.01em; }
.small{ font-size:12.5px; }
.tiny{ font-size:11.5px; }

/* ---------- LAYOUT UTILITIES ---------- */
.row{ display:flex; align-items:center; gap:10px; }
.col{ display:flex; flex-direction:column; gap:10px; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.wrap{ flex-wrap:wrap; }
.flex-1{ flex:1 1 auto; min-width:0; }
.spacer{ flex:1 1 auto; }
.gap-6{ gap:6px; } .gap-8{ gap:8px; } .gap-16{ gap:16px; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; }
.grid{ display:grid; gap:16px; }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--auto{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.stats-row{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
@media (max-width:900px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

/* ---------- SECTION HEAD ---------- */
.section{ animation:fadeUp .34s cubic-bezier(.2,.7,.3,1) both; }
.rise{ animation:fadeUp .34s cubic-bezier(.2,.7,.3,1) both; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.section-head__title{ font-size:22px; font-weight:680; letter-spacing:-.02em; }
.section-head__sub{ font-size:13.5px; color:var(--text-muted); margin-top:3px; }
.section-head__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- CARD ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.card--flush{ padding:0; overflow:hidden; }
.card--pad-lg{ padding:24px; }
.card--hover{ transition:transform .14s, border-color .14s, box-shadow .14s; }
.card--hover:hover{ transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card__title{ font-size:14px; font-weight:600; }
.card__sub{ font-size:12.5px; color:var(--text-muted); }
.divider{ height:1px; background:var(--border); border:0; margin:16px 0; }

/* ---------- STAT / KPI ---------- */
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); }
.stat__label{ font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:7px; }
.stat__value{ font-size:28px; font-weight:680; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:8px; line-height:1.05; }
.stat__delta{ font-size:12px; margin-top:6px; display:inline-flex; align-items:center; gap:4px; }
.stat__delta--up{ color:var(--ok); } .stat__delta--down{ color:var(--danger); }
.stat__ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--accent-weak); color:var(--accent); font-size:14px; }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:550;
  line-height:1; padding:10px 16px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); cursor:pointer;
  transition:transform .08s, background .15s, border-color .15s, filter .15s, opacity .15s; white-space:nowrap; }
.btn:hover{ background:var(--surface-3); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn--primary{ background:var(--accent-grad); border-color:transparent; color:#fff; box-shadow:0 8px 20px -8px rgba(122,110,255,.65); }
.btn--primary:hover{ background:var(--accent-grad); filter:brightness(1.07); }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:var(--surface-2); }
.btn--danger{ background:var(--danger-weak); color:var(--danger); border-color:transparent; }
.btn--danger:hover{ background:var(--danger-weak); filter:brightness(1.06); }
.btn--sm{ padding:7px 12px; font-size:12.5px; border-radius:9px; }
.btn--block{ width:100%; }
.btn.is-loading{ color:transparent !important; position:relative; pointer-events:none; }
.btn.is-loading::after{ content:''; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .7s linear infinite; }
.icon-btn{ width:38px; height:38px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); cursor:pointer; font-size:16px; transition:background .15s; }
.icon-btn:hover{ background:var(--surface-3); }
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.link{ color:var(--accent); cursor:pointer; }
.link:hover{ text-decoration:underline; }

/* ---------- FORM CONTROLS ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field--row{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.field__label{ font-size:12.5px; color:var(--text-muted); font-weight:500; }
.field__hint{ font-size:12px; color:var(--text-faint); }
.input,.select,.textarea{ width:100%; font-size:13.5px; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:11px; padding:10px 12px; transition:border-color .15s, box-shadow .15s; }
.input::placeholder,.textarea::placeholder{ color:var(--text-faint); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent-border); box-shadow:0 0 0 3px var(--accent-weak); }
.textarea{ resize:vertical; min-height:104px; line-height:1.5; }
.select{ appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.input--sm,.select--sm{ padding:8px 11px; font-size:13px; border-radius:9px; }
.search{ position:relative; }
.search .input{ padding-left:34px; }
.search__ic{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:14px; pointer-events:none; }

/* switch (чекбокс-тумблер) */
.switch{ position:relative; width:42px; height:24px; flex:none; display:inline-block; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer; }
.switch__track{ position:absolute; inset:0; border-radius:999px; background:var(--surface-3); transition:background .18s; pointer-events:none; }
.switch__track::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .switch__track{ background:var(--accent-grad); }
.switch input:checked + .switch__track::after{ transform:translateX(18px); }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- BADGE / PILL ---------- */
.badge{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 7px; border-radius:6px; background:var(--accent-weak); color:var(--accent); }
.badge--ok{ background:var(--ok-weak); color:var(--ok); }
.badge--warn{ background:var(--warn-weak); color:var(--warn); }
.badge--danger{ background:var(--danger-weak); color:var(--danger); }
.badge--muted{ background:var(--surface-2); color:var(--text-muted); }
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:4px 10px;
  border-radius:999px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pill--plain::before{ display:none; }
.pill--ok{ color:var(--ok); background:var(--ok-weak); border-color:transparent; }
.pill--warn{ color:var(--warn); background:var(--warn-weak); border-color:transparent; }
.pill--danger{ color:var(--danger); background:var(--danger-weak); border-color:transparent; }
.pill--accent{ color:var(--accent); background:var(--accent-weak); border-color:transparent; }

/* ---------- TABLE ---------- */
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{ text-align:left; font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-faint); padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
  position:sticky; top:0; background:var(--surface); z-index:1; }
.table td{ padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.table tbody tr{ transition:background .12s; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:var(--surface-2); }
.table--rows tbody tr{ cursor:pointer; }
.table .num{ font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* ---------- KEY/VALUE ---------- */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:11px 18px; margin:0; }
.kv dt{ color:var(--text-muted); font-size:13px; }
.kv dd{ margin:0; text-align:right; font-size:13px; font-variant-numeric:tabular-nums; }

/* ---------- BARLIST (самодельный график-рейтинг) ---------- */
.barlist{ display:flex; flex-direction:column; gap:12px; }
.barlist__row{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; }
.barlist__name{ font-size:13px; display:flex; align-items:center; gap:8px; min-width:0; }
.barlist__val{ font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.barlist__track{ grid-column:1 / -1; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.barlist__fill{ height:100%; border-radius:999px; background:var(--accent-grad); transition:width .5s cubic-bezier(.2,.7,.3,1); }

/* ---------- AVATAR ---------- */
.avatar{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:13px;
  font-weight:600; color:#fff; background:var(--accent-grad); flex:none; }
.avatar--sm{ width:26px; height:26px; border-radius:8px; font-size:11px; }

/* ---------- TABS / TOOLBAR ---------- */
.tabs{ display:inline-flex; gap:2px; padding:4px; background:var(--surface-2); border-radius:12px; }
.tab{ padding:7px 14px; border-radius:9px; font-size:13px; color:var(--text-muted); cursor:pointer; border:0; background:transparent; transition:background .14s,color .14s; }
.tab:hover{ color:var(--text); }
.tab.is-active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }

/* ---------- EMPTY / LOADING / SKELETON ---------- */
.empty{ text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty__icon{ font-size:34px; opacity:.75; }
.empty__title{ color:var(--text); font-weight:600; margin-top:8px; }
.loading{ display:flex; align-items:center; justify-content:center; gap:12px; padding:56px; color:var(--text-muted); }
.spinner{ width:22px; height:22px; border-radius:50%; border:2.5px solid var(--border-strong); border-top-color:var(--accent); animation:spin .7s linear infinite; }
.skeleton{ background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:8px; }

/* ---------- KEYFRAMES ---------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes shimmer{ to{ background-position:-200% 0; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes floaty{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(20px,-24px); } }

/* ============================================================
   КАРКАС (SHELL)
   ============================================================ */

/* --- вход --- */
.login{ min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden; }
.login__glow{ position:absolute; width:520px; height:520px; border-radius:50%; top:-140px; left:50%;
  transform:translateX(-50%); background:radial-gradient(circle,rgba(122,110,255,.30),transparent 62%);
  filter:blur(30px); animation:floaty 11s ease-in-out infinite; pointer-events:none; }
.login__card{ position:relative; z-index:1; width:100%; max-width:384px; background:var(--surface);
  border:1px solid var(--border); border-radius:20px; padding:28px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:16px; }
.login__card::before{ content:''; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.login__error{ font-size:13px; color:var(--danger); background:var(--danger-weak); padding:9px 12px; border-radius:10px; }
.login__hint{ font-size:12px; color:var(--text-faint); text-align:center; margin:0; }

/* --- бренд-марка --- */
.brand-mark{ width:34px; height:34px; border-radius:11px; background:var(--accent-grad); display:grid; place-items:center;
  color:#fff; font-size:17px; box-shadow:0 6px 16px -6px rgba(122,110,255,.7); flex:none; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text b{ font-size:14.5px; font-weight:680; letter-spacing:-.01em; }
.brand__text span{ font-size:11.5px; color:var(--text-muted); }

/* --- каркас приложения --- */
.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
.sidebar{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:8px;
  padding:16px 12px; border-right:1px solid var(--border); background:var(--bg-elev); }
.sidebar__head{ padding:8px 8px 14px; }
.sidebar__foot{ margin-top:auto; padding-top:8px; }
.nav{ display:flex; flex-direction:column; gap:2px; }
.nav__item{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px; color:var(--text-muted);
  font-size:13.5px; font-weight:500; position:relative; transition:background .14s,color .14s; }
.nav__item:hover{ background:var(--surface-2); color:var(--text); }
.nav__item.is-active{ background:var(--accent-weak); color:var(--text); }
.nav__item.is-active::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--accent-grad); }
.nav__icon{ font-size:15px; width:20px; text-align:center; flex:none; }
.nav__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{ position:sticky; top:0; z-index:30; height:var(--topbar-h); display:flex; align-items:center; gap:12px;
  padding:0 22px; border-bottom:1px solid var(--border); background:var(--topbar-bg);
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); }
.topbar__title{ font-size:15px; font-weight:600; }
.view{ padding:24px 26px 64px; max-width:var(--maxw); width:100%; margin:0 auto; }

#menu-toggle{ display:none; }
.scrim{ display:none; }

/* --- toasts --- */
.toasts{ position:fixed; z-index:200; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; }
.toast{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:11px 14px; font-size:13px; box-shadow:var(--shadow-lg); max-width:340px;
  transform:translateY(10px); opacity:0; transition:transform .22s, opacity .22s; }
.toast.is-in{ transform:none; opacity:1; }
.toast__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.toast--ok .toast__dot{ background:var(--ok); }
.toast--error .toast__dot{ background:var(--danger); }
.toast--info .toast__dot{ background:var(--accent); }

/* --- modal --- */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px;
  background:rgba(5,5,10,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .18s; }
.modal.is-in{ opacity:1; }
.modal__card{ width:100%; max-width:460px; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; box-shadow:var(--shadow-lg); padding:22px; max-height:88vh; overflow:auto;
  transform:translateY(8px) scale(.99); transition:transform .18s; }
.modal.is-in .modal__card{ transform:none; }
.modal__card--wide{ max-width:640px; }
.modal__title{ font-size:16px; font-weight:650; letter-spacing:-.01em; margin-bottom:4px; }
.modal__foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap; }

/* --- адаптив --- */
@media (max-width:860px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; z-index:60; left:0; top:0; width:264px; transform:translateX(-100%);
    transition:transform .22s ease; box-shadow:var(--shadow-lg); }
  .sidebar.is-open{ transform:none; }
  .nav__item.is-active::before{ left:0; }
  #menu-toggle{ display:grid; }
  .scrim{ display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.5);
    opacity:0; pointer-events:none; transition:opacity .2s; }
  .scrim.is-open{ opacity:1; pointer-events:auto; }
  .view{ padding:18px 16px 52px; }
  .topbar{ padding:0 16px; }
}

/* --- доступность: приглушить анимацию --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ── раздел overview ── */
/* ==== overview: индикатор «живой» + время ==== */
.overview-updated{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:12px;white-space:nowrap}
.overview-live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.overview-live::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ok);opacity:.55;animation:overviewPulse 2.2s ease-out infinite}
@keyframes overviewPulse{0%{transform:scale(1);opacity:.55}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}
@media (prefers-reduced-motion: reduce){.overview-live::after{animation:none}}

/* ==== overview: графики (общее) ==== */
.overview-chart{position:relative;width:100%}
.overview-chart svg{display:block;width:100%;height:auto;overflow:visible}
.overview-grid-line{stroke:var(--border);stroke-width:1;shape-rendering:crispEdges;opacity:.7}
.overview-axis{fill:var(--text-faint);font-size:10px;font-family:inherit}
.overview-line-calls{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.overview-line-signups{fill:none;stroke:var(--ok);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.overview-dot-c{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.overview-dot-s{fill:var(--ok);stroke:var(--surface);stroke-width:2}
.overview-cross{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 3}
.overview-hit{fill:transparent;cursor:crosshair}
.overview-dot-c,.overview-dot-s,.overview-cross{opacity:0;transition:opacity .12s ease}
.overview-chart.is-on .overview-dot-c,
.overview-chart.is-on .overview-dot-s,
.overview-chart.is-on .overview-cross{opacity:1}
.overview-bar{transition:opacity .12s ease}
.overview-bar-guide{fill:var(--accent);opacity:0}
.overview-chart.is-on .overview-bar-guide{opacity:.1}

/* легенда над линейным графиком */
.overview-chart-legend{display:flex;gap:16px;margin-bottom:6px}
.overview-cl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.overview-cl__dot{width:10px;height:10px;border-radius:3px;flex:none}
.overview-cl__dot--c{background:var(--accent)}
.overview-cl__dot--s{background:var(--ok)}

/* всплывающая подсказка графика */
.overview-tip{position:absolute;top:4px;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--border);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow);pointer-events:none;opacity:0;transition:opacity .12s ease;font-size:12px;white-space:nowrap;z-index:4}
.overview-chart.is-on .overview-tip{opacity:1}
.overview-tip__day{font-weight:600;margin-bottom:5px;color:var(--text)}
.overview-tip__row{display:flex;align-items:center;gap:7px;color:var(--text-muted);line-height:1.5}
.overview-tip__row b{margin-left:auto;padding-left:14px;color:var(--text);font-variant-numeric:tabular-nums}
.overview-tip__dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ==== overview: донат моделей ==== */
.overview-donut{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.overview-donut__chart{position:relative;flex:none;width:180px;max-width:46%}
.overview-donut__chart svg{display:block;width:100%;height:auto}
.overview-seg{transition:opacity .15s ease}
.overview-donut__chart:hover .overview-seg{opacity:.55}
.overview-donut__chart .overview-seg:hover{opacity:1}
.overview-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.overview-donut__total{font-size:23px;font-weight:700;line-height:1;color:var(--text)}
.overview-donut__cap{font-size:11px;color:var(--text-muted);margin-top:3px}
.overview-legend{flex:1;min-width:170px;display:flex;flex-direction:column;gap:9px}
.overview-legend__row{display:flex;align-items:center;gap:10px;font-size:13px}
.overview-legend__sw{width:10px;height:10px;border-radius:3px;flex:none}
.overview-legend__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.overview-legend__val{color:var(--text-muted);font-variant-numeric:tabular-nums}
.overview-legend__pct{width:42px;text-align:right;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* ==== overview: провайдеры ==== */
.overview-prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.overview-prov{border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 14px;background:var(--surface-2);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.overview-prov:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.overview-prov__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.overview-prov__name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overview-prov__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ==== overview: таблица ошибок ==== */
.overview-err-note{max-width:420px;color:var(--text-muted)}
@media (max-width:640px){.overview-err-note{max-width:180px}}

/* ── раздел users ── */
/* === Раздел «Пользователи» — только префикс .users- === */

/* Тулбар поиска + сортировки */
.users-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.users-toolbar .search { flex: 1 1 280px; min-width: 220px; }
.users-toolbar__sort { flex: 0 0 auto; min-width: 190px; }

/* Сортируемые заголовки колонок */
.users-th--sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s ease; }
.users-th--sort:hover { color: var(--text); }
.users-th--active { color: var(--accent); }
.users-sortic { font-size: 11px; opacity: .55; margin-left: 4px; }
.users-th--active .users-sortic { opacity: 1; }

/* Клик по строке */
.users-row { cursor: pointer; }

/* Ячейка пользователя: аватар + имя/username */
.users-usercell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.users-uname { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.users-uname__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.users-uname__sub { line-height: 1.1; }

/* Пагинация */
.users-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); flex-wrap: wrap; }
.users-pager__info { color: var(--text-muted); font-size: 13px; }
.users-pager__ctrls { display: flex; align-items: center; gap: 8px; }
.users-pager__size { min-width: 92px; }
.users-pager button[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* Карточка (модалка) пользователя */
.users-cardload { display: flex; align-items: center; justify-content: center; padding: 56px 24px; }

.users-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.users-detail-head__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.users-detail-head__name { font-size: 19px; font-weight: 700; line-height: 1.15; }
.users-detail-head__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.users-detail-head__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.users-grantform { display: flex; align-items: center; gap: 8px; }
.users-daysinput { width: 74px; text-align: center; }

/* Пустышки внутри мини-карточек детали */
.users-mini-empty { padding: 18px 4px 4px; font-size: 13px; }
.users-card__head-pad { padding: 16px 16px 0; }

/* Заметка вызова — не растягивать таблицу */
.users-note { max-width: 260px; }

@media (max-width: 640px) {
  .users-detail-head__actions { margin-left: 0; width: 100%; }
  .users-uname__name { max-width: 150px; }
  .users-note { max-width: 140px; }
}

/* ── раздел payments ── */
/* Раздел «Платежи» — локальные стили (префикс .payments-) */

.payments-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* кликабельный user_id как ссылка, но это <button> */
.payments-user {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  transition: opacity .15s ease;
}
.payments-user:hover { text-decoration: underline; opacity: .82; }
.payments-user:focus-visible { outline: 2px solid var(--accent-weak); outline-offset: 2px; }

/* ячейка с коротким id + кнопка копирования */
.payments-id { display: inline-flex; align-items: center; gap: 8px; }
.payments-copy { font-size: 14px; line-height: 1; }
.payments-copy:hover { color: var(--accent); }

/* колонка «начислено» */
.payments-granted { color: var(--text-faint); }
.payments-granted.is-yes { color: var(--ok); font-weight: 700; }

.payments-time { line-height: 1.3; }

/* строки таблицы кликабельны (открывают детали) */
.payments-rowline { cursor: pointer; }

/* чип активного фильтра по пользователю */
.payments-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-muted);
}
.payments-chip__x {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 6px;
  transition: color .15s ease;
}
.payments-chip__x:hover { color: var(--danger); }

/* счётчик у вкладок фильтра */
.payments-tabcount {
  margin-left: 6px;
  font-size: 12px;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.tab.is-active .payments-tabcount { opacity: .85; }

/* итоговая строка таблицы */
.payments-table tfoot td {
  border-top: 1px solid var(--border-strong);
  background: var(--surface-2);
  font-size: 13px;
}

.payments-error { padding: 24px 0; }

.payments-modal { min-width: min(460px, 88vw); }
.payments-modal .kv { margin: 0; }
.payments-modal .truncate { max-width: 320px; display: inline-block; vertical-align: bottom; }

/* ── раздел plans ── */
/* ===== Раздел «Тарифы» — все классы с префиксом .plans- ===== */

.plans-plus { font-weight: 700; margin-right: 2px; }

/* --- блок бесплатных запросов --- */
.plans-free {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.plans-free__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.plans-free__ic {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-weak);
  font-size: 1.35rem;
}
.plans-free__ctrl { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.plans-free__inp { width: 96px; text-align: right; }

/* --- сетка витрины --- */
.plans-gridwrap { margin-top: 16px; }
.plans-grid {
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  align-items: stretch;
}

/* --- карточка тарифа --- */
.plans-card {
  display: flex; flex-direction: column; gap: 12px;
  animation: plans-rise .32s ease both;
}
@keyframes plans-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.plans-card--off { opacity: .68; }
.plans-card--off .plans-card__amount { -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); }

.plans-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.plans-card__titles { min-width: 0; }
.plans-card__title {
  font-weight: 650; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere;
}
.plans-card__code { font-size: .74rem; margin-top: 3px; letter-spacing: .01em; }

.plans-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plans-card__amount {
  font-size: 1.6rem; font-weight: 750; line-height: 1;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.plans-card__per { font-size: .82rem; }

.plans-card__desc { flex: 1 1 auto; font-size: .86rem; line-height: 1.45; }

.plans-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.plans-card__status { display: flex; align-items: center; gap: 8px; }
.plans-card__actions { display: flex; align-items: center; gap: 6px; }
.plans-on { color: var(--ok); }
.plans-del:hover { color: var(--danger); }

/* --- инлайн-форма редактирования / добавления --- */
.plans-edit { gap: 14px; animation: plans-rise .28s ease both; }
.plans-edit__title { font-weight: 650; font-size: 1rem; }
.plans-edit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .plans-edit__grid { grid-template-columns: 1fr; } }
.plans-edit__switch { display: flex; align-items: center; gap: 10px; }
.plans-edit__actions { display: flex; gap: 8px; margin-top: 2px; }
.plans-edit .input.is-locked { opacity: .6; cursor: not-allowed; }
.plans-hint { font-size: .72rem; color: var(--text-faint); margin-top: 4px; }

/* --- модалка подтверждения удаления --- */
.plans-confirm {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 6px 4px; max-width: 380px;
}
.plans-confirm__ic { font-size: 2rem; }
.plans-confirm__title { font-weight: 650; font-size: 1.15rem; }
.plans-confirm__text { font-size: .9rem; line-height: 1.5; }
.plans-confirm__actions { display: flex; gap: 10px; margin-top: 8px; }

/* ── раздел providers ── */
/* ==== Провайдеры и модели ==== */
.providers-stats { margin-bottom: 22px; }

.providers-filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.providers-filter__lbl {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.providers-subhead {
  margin-top: 8px;
  margin-bottom: 4px;
}
.providers-h2 { font-size: 17px; }

/* сетка карточек провайдеров */
.providers-grid { gap: 16px; }

.providers-pcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.providers-pcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-grad, var(--accent));
  opacity: .55;
}
.providers-pcard--nokey {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}
.providers-pcard--nokey::before {
  background: var(--danger);
  opacity: .9;
}

.providers-pcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.providers-pcard__name {
  font-weight: 640;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.providers-pcard__sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
}
.providers-pcard__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* чип лимита RPD */
.providers-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.4;
}
.providers-chip__k {
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.providers-chip__v {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

/* маршруты на паузе */
.providers-routes {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.providers-routes__lbl {
  font-size: 12.5px;
  color: var(--text-muted);
}
.providers-routes--ok .providers-routes__lbl { color: var(--text-faint); }
.providers-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-faint);
}
.providers-dot--ok {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
}

/* акцентный бейдж (Платный / PREMIUM) */
.providers-prem {
  color: var(--accent);
  background: var(--accent-weak);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* таблицы моделей */
.providers-mname {
  font-weight: 560;
  letter-spacing: -.005em;
}
.providers-yes { color: var(--ok); font-weight: 700; }
.providers-no  { color: var(--text-faint); }

/* строка модели без ключа — подсветка */
.providers-off > td {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.providers-off > td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}
.providers-off .providers-mname { color: var(--text-muted); }

.providers-emptyrow { padding: 0 !important; }
.providers-emptyrow__in {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13.5px;
}

/* ── раздел broadcast ── */
/* ===== Раздел «Рассылка» ===== */

/* Бейдж охвата в шапке */
.broadcast-reach {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.broadcast-reach__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
}
.broadcast-reach__val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Сетка: композер + предпросмотр */
.broadcast-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 16px;
  align-items: start;
}
@media (max-width: 920px) {
  .broadcast-grid { grid-template-columns: 1fr; }
}

/* Композер */
.broadcast-textarea {
  min-height: 220px;
  resize: vertical;
  line-height: 1.55;
  font-size: 15px;
}
.broadcast-metaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.broadcast-counter {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 13px;
}
.broadcast-counter--over {
  color: var(--danger);
  font-weight: 600;
}

.broadcast-optRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.broadcast-optRow__title { font-weight: 600; }

.broadcast-testRow {
  display: flex;
  gap: 10px;
  align-items: center;
}
.broadcast-testid { max-width: 170px; }
.broadcast-testHint { margin-top: 8px; }

.broadcast-sendAll { margin-top: 4px; }
.broadcast-sendAll__ic { margin-right: 8px; }
.broadcast-sendAll:disabled,
.broadcast-testBtn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Предпросмотр: телефон / чат MAX ---- */
.broadcast-previewCard { position: sticky; top: 16px; }

.broadcast-phone {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-2);
  padding: 10px;
  box-shadow: var(--shadow-sm);
}
.broadcast-chat {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.broadcast-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.broadcast-bot-ava {
  background: var(--accent-grad);
  color: #fff;
  font-weight: 700;
  border: none;
}
.broadcast-chat__name { font-weight: 600; line-height: 1.2; }
.broadcast-chat__status { font-size: 12px; color: var(--ok); }
.broadcast-chat__dots {
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
}
.broadcast-chat__body {
  padding: 20px 14px 24px;
  min-height: 200px;
  background:
    linear-gradient(180deg, var(--accent-weak), transparent 140px),
    var(--surface);
}
.broadcast-msgRow { display: flex; }
.broadcast-bubble {
  position: relative;
  max-width: 86%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 12px 7px;
  box-shadow: var(--shadow-sm);
  animation: broadcast-pop .18s ease-out;
}
@keyframes broadcast-pop {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.broadcast-bubble__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.broadcast-bubble__ph {
  color: var(--text-faint);
  font-style: italic;
}
.broadcast-bubble__time {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ---- Баннер результата ---- */
.broadcast-bannerHost:empty { display: none; }
.broadcast-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-left: 3px solid var(--ok);
}
.broadcast-result--test { border-left-color: var(--accent); }
.broadcast-result__ic { font-size: 20px; line-height: 1; }
.broadcast-result__title { font-weight: 600; }

/* ---- Модалка подтверждения ---- */
.broadcast-confirm { min-width: min(440px, 84vw); }
.broadcast-confirm__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.broadcast-confirm__sub { margin-bottom: 14px; color: var(--text-muted); }
.broadcast-confirm__sub b { color: var(--text); }
.broadcast-confirm__preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  max-height: 180px;
  overflow: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}
.broadcast-confirm__warn { margin-bottom: 18px; }
.broadcast-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── раздел settings ── */
/* ===== Раздел «Настройки» — локальные стили (префикс .settings-) ===== */

.settings-card { animation: settingsRise .28s ease both; }
@keyframes settingsRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- лимит бесплатных запросов --- */
.settings-free { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.settings-free__val { display: flex; align-items: baseline; gap: 8px; }
.settings-free__num {
  font-size: 42px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.settings-free__unit { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.settings-free__form { display: flex; gap: 8px; align-items: stretch; }
.settings-free__form .input { max-width: 140px; }
.settings-free__hint { color: var(--text-faint); font-size: 12.5px; line-height: 1.55; }

/* --- тема --- */
.settings-theme { margin-top: 6px; }
.settings-theme__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-theme__name { font-weight: 600; font-size: 14px; }

/* --- состояние системы --- */
.settings-kv { margin: 4px 0; }
.settings-err { color: var(--danger); font-weight: 600; }
.ok-text { color: var(--ok); font-weight: 600; }
.settings-provs-head { margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.settings-provs { display: flex; flex-direction: column; gap: 8px; }

.settings-prov {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.settings-prov:hover { border-color: var(--border-strong); transform: translateY(-1px); background: var(--surface-3); }
.settings-prov__name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; min-width: 0; }
.settings-prov__name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-prov__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.settings-prov__dot--on  { background: var(--ok);     box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.settings-prov__dot--off { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.settings-prov__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.settings-prov__rpd { white-space: nowrap; }
.settings-note { line-height: 1.5; }

/* --- быстрые ссылки --- */
.settings-links { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.settings-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.settings-link:hover { border-color: var(--border-strong); transform: translateY(-1px); background: var(--surface-3); }
.settings-link__ic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 18px; background: var(--accent-weak); flex: none;
}
.settings-link__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-link__title { font-weight: 600; font-size: 14px; }
.settings-link__url { color: var(--text-faint); font-size: 12px; }
.settings-link__arrow { margin-left: auto; color: var(--text-faint); font-size: 15px; flex: none; }

/* --- сессия --- */
.settings-session__note { color: var(--text-muted); font-size: 13px; line-height: 1.55; }

/* --- подтверждение выхода --- */
.settings-confirm { display: flex; flex-direction: column; gap: 10px; text-align: center; padding: 8px 6px 4px; max-width: 380px; }
.settings-confirm__ic { font-size: 36px; line-height: 1; }
.settings-confirm .muted { line-height: 1.55; }
.settings-confirm__actions { display: flex; gap: 10px; margin-top: 10px; }
.settings-confirm__actions .btn { flex: 1; }

/* адаптив: на узком экране формы и провайдеры переносятся аккуратно */
@media (max-width: 560px) {
  .settings-free__form { flex-direction: column; }
  .settings-free__form .input { max-width: none; }
  .settings-prov { flex-direction: column; align-items: flex-start; }
  .settings-prov__meta { justify-content: flex-start; }
}