/* HunterSend — дизайн-система. ОДИН источник правды по виду.
   Значения взяты из макетов владельца (referensy/01…10) и описаны в DIZAYN-SISTEMA.md.
   Экраны пишутся ТОЛЬКО этими переменными и классами. Свои цвета и свои отступы в экранах — нельзя:
   так интерфейс и разъезжается.

   КЛЮЧ КО ВСЕМУ ВИДУ (21.09.2026, после разбора макетов). Страница почти чёрная, а цвет приходит
   СВЕЧЕНИЕМ ИЗ-ЗА КРАЁВ, не заливкой. Карточка — не серый прямоугольник, а прозрачное стекло
   поверх этого свечения. Поэтому у карточек нет своей тени и нет своего фона-цвета: объём даёт
   кант в один пиксель плюс то, что светится под ним.

   Имена классов намеренно оставлены прежними (.karta, .knopka, .chip, .voronka…), хотя значения
   переписаны целиком: app.html и lending.html уже собраны на них, и переименование осыпало бы
   готовые экраны ради косметики.

   Градиент — ТОЛЬКО на одном действии экрана. В десяти макетах ровно одна градиентная кнопка на
   экран, второй такой рядом нет ни разу. Две — уже ярмарка. */

/* ── ТОКЕНЫ ─────────────────────────────────────────────── */
:root {
  /* Полотно */
  --fon:         #05070F;   /* самый низ страницы */
  --fon-verh:    #0A0E1A;   /* верхний край полотна */

  /* Стекло: карточки и панели — прозрачные, а не серые */
  --steklo:      rgba(255,255,255,.04);
  --steklo-verh: rgba(255,255,255,.07);   /* под курсором, выделенное */
  --kant:        rgba(255,255,255,.08);
  --kant-yarkiy: rgba(255,255,255,.14);   /* рамка выделенной строки */

  /* Свечение за содержимым. Размытие не меньше 200px, иначе видно пятно, а не свет. */
  --svet-siniy:  rgba(59,130,246,.22);
  --svet-lilovy: rgba(168,85,247,.18);

  --tekst:       #FFFFFF;
  --tekst-2:     #9AA3B8;   /* подписи, вторая строка списка */
  --tekst-3:     #6B7487;   /* служебное: время, «36/300» */

  --gradient:    linear-gradient(90deg, #3B82F6 0%, #8B5CF6 52%, #EC4899 100%);

  /* Цвет ступени воронки закреплён за СМЫСЛОМ, а не за местом в ряду:
     ступени переставят — цвет обязан уехать вместе со смыслом. */
  --naydeno:     #3B82F6;
  --napisano:    #8B5CF6;
  --otvetili:    #22C55E;
  --interested:  #F97316;
  --sdelki:      #EC4899;

  /* Состояния */
  --zdorov:      #22C55E;
  --vnimanie:    #F59E0B;
  --pauza:       #F97316;
  --rost:        #22C55E;
  --koltso:      #2DD4BF;   /* дуга совпадения */
  --koltso-fon:  rgba(255,255,255,.10);

  /* Красного в макетах нет ни разу — падения показателя там не бывает. Значит цвет свободен,
     и он отдан отказу, бану и провалу, а не «важному». Если покрасить им важное, отказ станет
     неотличим от заголовка ровно в тот момент, когда его надо заметить. */
  --otkaz:       #EF4444;

  /* Корзины балла лида */
  --goryachiy:   #EC4899;   /* HOT */
  --horoshiy:    #22C55E;   /* GOOD */
  --mozhet:      #F59E0B;   /* MAYBE */
  --slabyy:      #6B7487;   /* LOW */

  --r-karta:  18px;
  --r-knopka: 14px;
  --r-chip:   999px;
  --r-plitka: 12px;

  --p-1: 4px;  --p-2: 8px;  --p-3: 12px;  --p-4: 16px;  --p-5: 20px;  --p-6: 24px;

  --shrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bystro:   160ms cubic-bezier(.2,.8,.3,1);
  --sredne:   240ms cubic-bezier(.2,.8,.3,1);
  --pruzhina: 420ms cubic-bezier(.16,1.02,.3,1);

  /* Единственная тень во всей колоде — под градиентной кнопкой. */
  --ten-knopki: 0 8px 24px rgba(99,102,241,.35);

  --niz: 58px;
  --bezopasno-niz: env(safe-area-inset-bottom, 0px);
}

/* Светлой темы в макетах НЕТ НИ ОДНОГО (переключатель на экране 10 есть и включён, но светлого
   макета владелец не присылал). Выдумывать её здесь — значит развести два вида, из которых один
   никем не утверждён. Появится макет — появится блок. */

/* ── ОСНОВА ─────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--fon);
  color: var(--tekst);
  font: 15px/1.45 var(--shrift);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;   /* горизонтальной прокрутки у страницы нет ни на одной ширине */
}

/* Свечение из-за краёв. Лежит ПОД содержимым и не перехватывает нажатия. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%,   var(--svet-siniy)  0%, transparent 70%),
    radial-gradient(60% 50% at 88% 100%, var(--svet-lilovy) 0%, transparent 70%),
    linear-gradient(180deg, var(--fon-verh) 0%, var(--fon) 55%);
  filter: blur(0px);
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: #8B5CF6; color: #fff; }

/* Телефон первым: колонка до 640, по бокам всегда 16px воздуха. */
.stolbec { width: 100%; max-width: 640px; margin: 0 auto; padding-inline: var(--p-4); }

/* ── ТИПОГРАФИКА ────────────────────────────────────────── */
.h1     { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.h2     { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.h3     { font-size: 16px; font-weight: 700; margin: 0; }
.podzag { font-size: 14px; font-weight: 400; color: var(--tekst-2); }
.tiho   { color: var(--tekst-2); }
.tishe  { color: var(--tekst-3); }
.malo   { font-size: 13px; }
.sluzhebno { font-size: 11px; font-weight: 400; color: var(--tekst-3); }

/* Цифры показателей — ТОЛЬКО табличные. Иначе четыре карточки в ряд дрожат при каждом
   обновлении, а обновляются они у нас постоянно. */
.krupno { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chislo { font-variant-numeric: tabular-nums; }

.razryadka {
  font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tekst-2);
}

.gradient-tekst {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── ШАПКА И НИЖНЯЯ ПАНЕЛЬ ──────────────────────────────── */
.shapka {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--p-3);
  height: 52px; padding-inline: var(--p-4);
  background: color-mix(in srgb, var(--fon) 72%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--kant);
}

/* Пять пунктов: Главная · Hunt · Inbox · Результаты · Ещё.
   На шести макетах из семи именно так; экран 05 называет второй пункт «Лиды» и «Ещё» не имеет —
   взята раскладка большинства, она же совпадает с рельсом внизу всех слайдов. */
.niz-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--niz) + var(--bezopasno-niz));
  padding-bottom: var(--bezopasno-niz);
  background: color-mix(in srgb, var(--fon) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--kant);
}
.niz-knopka {
  position: relative;
  display: grid; place-items: center; gap: 2px;
  background: none; border: 0; cursor: pointer;
  color: var(--tekst-3); font-size: 10px;
  transition: color var(--bystro), transform var(--bystro);
}
.niz-knopka[aria-current="page"] { color: var(--naydeno); }
.niz-knopka:active { transform: scale(.92); }
.niz-knopka .znak { font-size: 21px; line-height: 1; }
/* Метка непрочитанного у Inbox — единственная красная точка в спокойном состоянии экрана. */
.niz-knopka .metka {
  position: absolute; top: 6px; right: calc(50% - 16px);
  width: 8px; height: 8px; border-radius: var(--r-chip);
  background: var(--otkaz);
}
.pod-panel { padding-bottom: calc(var(--niz) + var(--bezopasno-niz) + var(--p-6)); }

/* ── КНОПКИ ─────────────────────────────────────────────── */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--p-2);
  min-height: 44px; padding: 0 var(--p-5);
  border: 1px solid var(--kant); border-radius: var(--r-knopka);
  background: var(--steklo); color: var(--tekst);
  font-weight: 600; cursor: pointer;
  transition: transform var(--bystro), background var(--bystro), filter var(--bystro);
}
.knopka:hover  { background: var(--steklo-verh); }
.knopka:active { transform: scale(.97); }
.knopka:disabled { opacity: .45; cursor: not-allowed; }

/* ОДНА на экран. Не две. */
.knopka.glavnaya {
  background: var(--gradient); border-color: transparent; color: #fff;
  font-weight: 700; box-shadow: var(--ten-knopki);
}
.knopka.glavnaya:hover { filter: brightness(1.08); }
.knopka.tihaya   { background: transparent; }
.knopka.opasnaya { background: transparent; color: var(--otkaz); border-color: color-mix(in srgb, var(--otkaz) 45%, transparent); }
.knopka.da       { background: transparent; color: var(--zdorov); border-color: color-mix(in srgb, var(--zdorov) 45%, transparent); }
.knopka.net      { background: transparent; color: var(--otkaz);  border-color: color-mix(in srgb, var(--otkaz) 45%, transparent); }
.knopka.sinyaya  { background: #2563EB; border-color: transparent; color: #fff; }
.knopka.vo-vsyu  { width: 100%; }

/* ── ПОЛЯ ───────────────────────────────────────────────── */
.pole, .pole-bolshoe {
  width: 100%; background: var(--steklo); color: var(--tekst);
  border: 1px solid var(--kant); border-radius: var(--r-karta);
  padding: var(--p-3) var(--p-4); outline: none;
  transition: border-color var(--bystro), background var(--bystro);
}
.pole:focus, .pole-bolshoe:focus { border-color: var(--kant-yarkiy); background: var(--steklo-verh); }
.pole::placeholder, .pole-bolshoe::placeholder { color: var(--tekst-3); }
.pole-bolshoe { min-height: 132px; resize: vertical; font-size: 17px; line-height: 1.5; }

/* ── КАРТОЧКА ───────────────────────────────────────────── */
.karta {
  background: var(--steklo); border: 1px solid var(--kant);
  border-radius: var(--r-karta); padding: var(--p-4);
  transition: transform var(--bystro), border-color var(--bystro), background var(--bystro);
}
.karta.zhmyotsya:active { transform: scale(.985); }
.karta.vydelena { border-color: var(--kant-yarkiy); background: var(--steklo-verh); }
.karty { display: grid; gap: var(--p-3); }            /* зазор между карточками — 12px */
.karty.para { grid-template-columns: repeat(2, 1fr); }

/* Плитка под значком — квадрат 40×40, заливка своим цветом на 12%. */
.plitka {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-plitka);
  font-size: 19px; line-height: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── ЧИПЫ ───────────────────────────────────────────────── */
.chipy { display: flex; gap: var(--p-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--p-2); }
.chipy::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 7px var(--p-4);
  border: 1px solid var(--kant); border-radius: var(--r-chip);
  background: var(--steklo); color: var(--tekst-2);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all var(--bystro);
}
.chip[aria-pressed="true"] { background: #2563EB; border-color: transparent; color: #fff; }

/* ── АВАТАР И ПЛОЩАДКА ──────────────────────────────────── */
.avatar { width: 44px; height: 44px; border-radius: var(--r-chip); object-fit: cover; background: var(--steklo-verh); flex: 0 0 auto; }
.avatar.bolshoy { width: 72px; height: 72px; }
.avatar.v-ramke { padding: 2px; background: var(--gradient); }

/* Значок площадки в углу аватара. Он здесь ДАЖЕ ПОКА ПЛОЩАДКА ОДНА: место под вторую заложено
   сразу, потому что перекраивать ленты потом дороже, чем оставить угол сейчас. */
.s-ploshchadkoy { position: relative; display: inline-block; flex: 0 0 auto; }
.s-ploshchadkoy .ploshchadka {
  position: absolute; right: -2px; bottom: -2px;
  width: 18px; height: 18px; border-radius: var(--r-chip);
  display: grid; place-items: center; font-size: 10px;
  background: var(--fon); border: 1px solid var(--kant);
}

/* ── БАЛЛ И ПРИЧИНЫ ─────────────────────────────────────── */
.ball { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ball::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-chip); background: currentColor; }
.ball.HOT   { color: var(--goryachiy); }
.ball.GOOD  { color: var(--horoshiy); }
.ball.MAYBE { color: var(--mozhet); }
.ball.LOW   { color: var(--slabyy); }

/* «Почему подходит»: причина без доказательства не показывается — у нас её и в базе нет. */
.prichina { display: flex; gap: var(--p-3); align-items: flex-start; }
.prichina .zagolovok { font-size: 14px; font-weight: 600; }
.prichina .poyasnenie { font-size: 13px; color: var(--tekst-2); }
.prichina::before { content: ""; margin-top: 7px; width: 4px; height: 4px; border-radius: var(--r-chip); background: var(--zdorov); flex: 0 0 auto; }
.prichina.protiv::before { background: var(--otkaz); }

/* ── ВОРОНКА (пять ступеней, со «Сделками») ─────────────── */
.voronka { display: flex; gap: var(--p-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--p-3); align-items: stretch; }
.voronka::-webkit-scrollbar { display: none; }
.etazh {
  flex: 0 0 auto; min-width: 116px; padding: var(--p-3) var(--p-4);
  background: var(--steklo); border: 1px solid var(--kant); border-radius: var(--r-karta);
  cursor: pointer; transition: all var(--sredne);
}
.etazh[aria-pressed="true"] { border-color: var(--kant-yarkiy); background: var(--steklo-verh); }
.etazh .chislo { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.etazh .imya   { font-size: 12px; font-weight: 500; color: var(--tekst-2); }
.etazh.naydeno    { color: var(--naydeno); }
.etazh.napisano   { color: var(--napisano); }
.etazh.otvetili   { color: var(--otvetili); }
.etazh.interested { color: var(--interested); }
.etazh.sdelki     { color: var(--sdelki); }
.etazh .chislo, .etazh .imya { color: var(--tekst); }
.etazh .imya { color: var(--tekst-2); }
.shevron { display: grid; place-items: center; color: var(--tekst-3); flex: 0 0 auto; }

/* ── КОЛЬЦО СОВПАДЕНИЯ ──────────────────────────────────── */
/* Задаётся через --procent на элементе: style="--procent:87". */
.koltso {
  width: 56px; height: 56px; border-radius: var(--r-chip); flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: conic-gradient(var(--koltso) calc(var(--procent, 0) * 1%), var(--koltso-fon) 0);
}
.koltso > span {
  width: 46px; height: 46px; border-radius: var(--r-chip);
  display: grid; place-items: center; background: var(--fon);
}

/* ── СОСТОЯНИЯ И РОСТ ───────────────────────────────────── */
.sostoyanie { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.sostoyanie::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-chip); background: currentColor; }
.sostoyanie.zdorov   { color: var(--zdorov); }
.sostoyanie.vnimanie { color: var(--vnimanie); }
.sostoyanie.pauza    { color: var(--pauza); }
.sostoyanie.otkaz    { color: var(--otkaz); }
.rost   { font-size: 12px; font-weight: 600; color: var(--rost); font-variant-numeric: tabular-nums; }
.padeniye { font-size: 12px; font-weight: 600; color: var(--otkaz); font-variant-numeric: tabular-nums; }

/* Полоска лимита. Никогда не подписывать её словом «безопасно»: официального лимита Instagram
   не публикует, и обещать его мы не будем — за каждый бан пришлось бы возвращать деньги. */
.polosa { height: 6px; border-radius: var(--r-chip); background: var(--koltso-fon); overflow: hidden; }
.polosa > i { display: block; height: 100%; background: var(--gradient); }
.polosa.riskovanno > i { background: var(--vnimanie); }

/* ── ПЕРЕКЛЮЧАТЕЛЬ ──────────────────────────────────────── */
.tumbler {
  width: 44px; height: 26px; flex: 0 0 auto; position: relative;
  border-radius: var(--r-chip); border: 1px solid var(--kant);
  background: var(--steklo); cursor: pointer; transition: background var(--bystro);
}
.tumbler::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: var(--r-chip);
  background: var(--tekst-2); transition: transform var(--bystro), background var(--bystro);
}
.tumbler[aria-pressed="true"] { background: #2563EB; border-color: transparent; }
.tumbler[aria-pressed="true"]::after { transform: translateX(18px); background: #fff; }

/* ── ПЕРЕПИСКА ──────────────────────────────────────────── */
.puzyr {
  max-width: 78%; padding: var(--p-3) var(--p-4);
  border-radius: var(--r-karta); font-size: 15px; line-height: 1.4;
}
.puzyr.ot-nih { background: var(--steklo); border: 1px solid var(--kant); align-self: flex-start; }
.puzyr.ot-nas { background: #2563EB; color: #fff; align-self: flex-end; }
.perepiska { display: flex; flex-direction: column; gap: var(--p-2); }

/* ── СКЕЛЕТОНЫ ──────────────────────────────────────────
   Вместо спиннеров. Спиннер = «непонятно, сколько ждать», скелетон = «вот что появится». */
.skelet {
  position: relative; overflow: hidden;
  background: var(--steklo); border-radius: var(--r-plitka); color: transparent !important;
}
.skelet::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: probeg 1.25s infinite;
}
@keyframes probeg { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── ДВИЖЕНИЕ ───────────────────────────────────────────── */
.vplyv { animation: vplyv var(--pruzhina) both; }
@keyframes vplyv { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.pokaz { animation: pokaz var(--sredne) both; }
@keyframes pokaz { from { opacity: 0; } to { opacity: 1; } }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* Кому движение мешает — тому его не будет. Это не украшение, это доступность. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── МЕЛОЧИ ─────────────────────────────────────────────── */
.ryad { display: flex; align-items: center; gap: var(--p-3); }
.ryad.mezhdu { justify-content: space-between; }
.ryad.verh { align-items: flex-start; }
.stopka { display: flex; flex-direction: column; gap: var(--p-3); }
.rastyanut { flex: 1 1 auto; min-width: 0; }
.obrez { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.razdel { height: 1px; background: var(--kant); border: 0; margin: var(--p-4) 0; }
.pusto { text-align: center; color: var(--tekst-2); padding: var(--p-6) var(--p-4); }

/* Таблицы, схемы и код — единственное, чему можно быть шире экрана, и только в своей коробке. */
.shire { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── СТОЛ (широкий экран) ───────────────────────────────── */
@media (min-width: 900px) {
  .stol { display: grid; grid-template-columns: 200px 1fr; gap: var(--p-6); }
  .bok { display: flex; flex-direction: column; gap: var(--p-1); padding: var(--p-4) 0; }
  .bok a, .bok button {
    display: flex; align-items: center; gap: var(--p-3);
    padding: 10px var(--p-3); border: 0; border-radius: var(--r-knopka);
    background: transparent; color: var(--tekst-2); cursor: pointer; text-align: left;
  }
  .bok [aria-current="page"] { background: var(--steklo); color: var(--tekst); }
  .niz-panel { display: none; }
  .pod-panel { padding-bottom: var(--p-6); }
}

table.tablica { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tablica th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--tekst-2);
  padding: var(--p-2) var(--p-3); border-bottom: 1px solid var(--kant); white-space: nowrap;
}
table.tablica td { padding: var(--p-3); border-bottom: 1px solid var(--kant); }
table.tablica td.chislo { font-variant-numeric: tabular-nums; }