/* ============================================================
   LeadGuard — БАЗОВЫЙ слой дизайн-системы «Точность».
   Общий для всех экранов: токены тем (light/dark), типографика,
   фоновая сетка, топбар, segmented-контролы, кнопки, тост.
   Шрифты подключаются из fonts.css (само-хостинг, офлайн).
   Само-достаточная копия: дублируется в каждой папке-поддомене.
   ============================================================ */

:root,
[data-theme="light"] {
  --ui-font:'Onest', sans-serif;
  --bg:#F5F6F8; --bg2:#EDEFF2; --surface:#FFFFFF; --panel:#FBFBFC; --field:#F7F8FA;
  --text:#15171C; --muted:#454B57; --faint:#5E6573; --ph:#98A0AC;
  --line:#E9EBEF; --line-strong:#DCDFE4; --hover:#F4F5F7; --ro:#7A828E; --zebra:#FAFBFC;
  --accent:oklch(0.605 0.205 33); --accent-hover:oklch(0.555 0.205 33); --accent-press:oklch(0.51 0.20 33);
  --accent-ring:oklch(0.605 0.205 33 / 0.18); --accent-soft:oklch(0.605 0.205 33 / 0.07);
  --ok:oklch(0.58 0.12 155);
  --shadow-pop:0 4px 14px -4px rgba(20,24,32,.16), 0 1px 2px rgba(20,24,32,.06);
  --grid:rgba(20,24,32,0.022);
  /* для статус-бейджей */
  --b-bg-l:0.965; --b-tx-l:0.42;
}
[data-theme="dark"] {
  --bg:#15181D; --bg2:#111318; --surface:#1C2026; --panel:#191D23; --field:#1B1F26;
  --text:#E8EAED; --muted:#A3AAB4; --faint:#737A85; --ph:#5B616B;
  --line:#272C34; --line-strong:#343A43; --hover:#21262E; --ro:#828A95; --zebra:#1A1E24;
  --accent:oklch(0.64 0.155 34); --accent-hover:oklch(0.68 0.16 34); --accent-press:oklch(0.60 0.15 34);
  --accent-ring:oklch(0.64 0.16 34 / 0.26); --accent-soft:oklch(0.64 0.16 34 / 0.10);
  --ok:oklch(0.70 0.12 155);
  --shadow-pop:0 8px 24px -8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
  --grid:rgba(255,255,255,0.02);
  --b-bg-l:0.30; --b-tx-l:0.84;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--ui-font); background:var(--bg); color:var(--text);
  font-size:14px; -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease, color .4s ease;
}
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
a { color:var(--accent); text-decoration:none; }
.themed, .themed * { transition:background-color .35s ease, color .35s ease, border-color .35s ease; }

/* фоновая инженерная сетка + мягкое одно-цветное свечение */
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(120% 80% at 50% -10%, #000 30%, transparent 75%); }

.app { position:relative; z-index:1; height:100vh; display:flex; flex-direction:column; overflow:hidden; }

/* ── Топбар ───────────────────────────── */
.top { flex:none; height:54px; display:flex; align-items:center; gap:14px; padding:0 18px;
  background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; }
.logo { width:30px; height:30px; border-radius:9px; background:var(--accent); display:grid; place-items:center; flex:none;
  box-shadow:0 5px 14px -5px var(--accent-ring); }
.logo svg { width:17px; height:17px; }
.brand b { font-size:16px; font-weight:700; letter-spacing:-.02em; display:block; }
.brand small { display:block; font-size:12px; font-weight:500; color:var(--faint); margin-top:1px; }
.mode { display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border-radius:999px;
  background:var(--field); border:1px solid var(--line); font-size:12.5px; color:var(--faint); margin-left:6px; }
.mode .d { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.mode .demo { color:var(--accent); font-weight:600; }
.top-sp { flex:1; }

.seg { display:flex; gap:2px; padding:3px; border-radius:9px; background:var(--field); border:1px solid var(--line); }
.seg button { height:30px; padding:0 12px; border-radius:6px; background:transparent; font-size:13.5px; font-weight:500;
  color:var(--faint); display:flex; align-items:center; gap:6px; transition:background-color .18s,color .18s; }
.seg button svg { width:15px; height:15px; }
.seg button:hover { color:var(--muted); }
.seg button[data-on="true"] { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.06); }
[data-theme="dark"] .seg button[data-on="true"] { background:#2A2F38; color:var(--accent); }

.iconbtn { width:34px; height:34px; border:1px solid var(--line); border-radius:9px; background:var(--field);
  color:var(--faint); display:grid; place-items:center; transition:color .18s,border-color .18s; }
.iconbtn svg { width:17px; height:17px; }
.iconbtn:hover { color:var(--muted); border-color:var(--line-strong); }
.iconbtn[data-on="true"] { color:var(--accent); border-color:var(--accent); }
.logout { height:36px; padding:0 14px; border:1px solid var(--line); border-radius:9px; background:var(--field);
  color:var(--muted); font-size:14px; font-weight:500; display:flex; align-items:center; gap:7px; transition:color .18s,border-color .18s; }
.logout svg { width:16px; height:16px; }
.logout:hover { color:var(--text); border-color:var(--line-strong); }

/* ── Кнопки ───────────────────────────── */
.btn { height:38px; padding:0 17px; border-radius:9px; font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:7px;
  transition:background-color .18s,transform .08s,color .18s,border-color .18s; }
.btn svg { width:16px; height:16px; }
.btn.primary { background:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-hover); }
.btn.primary:active { background:var(--accent-press); transform:scale(.99); }
.btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--line-strong); }
.btn.ghost:hover { color:var(--text); border-color:var(--line-strong); background:var(--hover); }

/* ── Тост ─────────────────────────────── */
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(8px); z-index:90;
  display:flex; align-items:center; gap:9px; padding:10px 15px; border-radius:10px; background:var(--surface);
  border:1px solid var(--line-strong); box-shadow:var(--shadow-pop); font-size:13px; color:var(--text);
  opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg { width:16px; height:16px; flex:none; }
.toast .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); }
.toast.err { border-color:var(--accent); }
.toast.err .dot { background:var(--accent); }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ── Полировка (в рамках «Точности», без смены идентичности) ── */
::selection { background:var(--accent-soft); }

/* тонкий кастомный скроллбар */
* { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:8px; border:2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background:var(--ph); }

/* доступные фокус-кольца (только при навигации с клавиатуры) */
.btn:focus-visible, .iconbtn:focus-visible, .logout:focus-visible,
.seg button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* единый отклик нажатия */
.btn.ghost:active { transform:scale(.99); }
.iconbtn, .logout { transition:color .18s,border-color .18s,background-color .18s,transform .08s; }
.iconbtn:active, .logout:active { transform:scale(.96); }

/* логотип — лёгкая объёмность акцентом */
.logo { background:linear-gradient(150deg, var(--accent-hover), var(--accent)); }