/* Визуальный язык HunterSend. Источник истины — прототип владельца
   (TZ/prototip-vladelca.html, строки 11–274). Токены и имена классов
   зафиксированы: на них завязаны рисовалки и все экраны. */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg:#060818;
  --s1:#0D1130;
  --s2:#141A40;
  --s3:#1C2356;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.15);
  --t1:#fff;
  --t2:#A6ADCF;
  --t3:#6A7196;
  --blue:#2F7BFF;
  --violet:#7C5CFF;
  --pink:#E452C3;
  --green:#22C55E;
  --yellow:#F5B400;
  --red:#F04461;
  --orange:#FF7A1A;
  --teal:#19C2A0;
  --grad:linear-gradient(90deg,#3A6BFF 0%,#8A4DFF 50%,#FF4FA8 80%,#FF8A3D 100%);
  --grad2:linear-gradient(90deg,#2F7BFF,#7C5CFF 60%,#E452C3);
}

html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
svg { flex: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: Inter, -apple-system, "SF Pro Text", Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; }

/* ===== оболочка мини-приложения =====
   Прототип владельца рисовал экран внутри рамки телефона (.phone > .screen >
   .view), и высоту задавала рамка. В мини-приложении рамки нет: в #koren
   ложатся сразу шапка, .body и нижнее меню. Без этого блока `.body { flex: 1 }`
   не растягивает ничего — содержимое занимало половину экрана, под ним висела
   чернота, а шапка с меню ехали вместе со страницей при каждом прокруте.
   22.09.2026, по снимкам владельца: «оно смещается нахуй постоянно».

   Высоту берём из --okno: его ставит index.mjs из `viewportStableHeight`
   Telegram. 100dvh — запас для обычного браузера и для первого кадра, пока
   Telegram ещё не назвал свою высоту. */
html, body { height: 100%; }
body { overflow-x: hidden; overscroll-behavior-y: none; }
#koren {
  display: flex;
  flex-direction: column;
  height: var(--okno, 100dvh);
}
#koren > .hdr { flex: none; padding: 10px 16px; background: var(--bg); }
#koren > .body {
  flex: 1;
  min-height: 0;                 /* без этого флекс-ребёнок не даёт себя прокрутить */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* прокрутка списка не тянет за собой окно Telegram */
}
#koren > .tabs { flex: none; }

/* ===== phone shell ===== */
.phone {
  position: relative;
  width: min(390px, calc(100vw - 24px));
  border-radius: 54px;
  padding: 9px;
  background: linear-gradient(155deg, #6d7dff 0%, #20265a 28%, #101335 62%, #9a45e0 100%);
  box-shadow: 0 0 70px rgba(100, 80, 255, .33), 0 30px 90px rgba(0, 0, 0, .65);
}
.screen {
  position: relative;
  border-radius: 46px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(130% 42% at 50% -6%, rgba(92, 64, 220, .42), rgba(6, 8, 24, 0) 62%),
    radial-gradient(90% 30% at 100% 105%, rgba(228, 82, 195, .12), transparent 70%),
    var(--bg);
}
.island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 35px;
  border-radius: 20px;
  background: #000;
  z-index: 6;
}
.sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px 4px 34px;
  font-weight: 600;
  font-size: 15px;
  height: 50px;
  flex: none;
}
.sb .r { display: flex; gap: 6px; align-items: center; }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.body { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 6px 16px 20px; }
.body > * { flex-shrink: 0; }
.grow { flex: 1; }
.enter { animation: enter .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ===== bits ===== */
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; }
.hdr { display: flex; align-items: center; gap: 14px; }
.hdr .logo { flex: 1; }
.ibtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}
.ibtn .pip {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--bg);
}
.av {
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  flex: none;
  position: relative;
  background: var(--s2);
}
.av::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.av .ch {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.ring2 { padding: 2.5px; border-radius: 50%; background: var(--grad); }
.ring2 > .av { box-shadow: 0 0 0 2.5px var(--bg); }
h1.t { font-size: 26px; line-height: 1.15; letter-spacing: -.03em; margin: 0; font-weight: 700; }
.sub { color: var(--t2); font-size: 14.5px; line-height: 1.45; margin: 6px 0 0; }
.muted { color: var(--t3); }
.card {
  background: linear-gradient(180deg, rgba(22, 28, 66, .9), rgba(13, 17, 48, .9));
  border: 1px solid var(--line);
  border-radius: 20px;
}
.pad { padding: 16px; }
.ch-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ch-h .grow { flex: 1; }
.lnk {
  font-size: 12.5px;
  color: var(--blue);
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.tap { cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.tap:active { transform: scale(.97); filter: brightness(1.1); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  color: #fff;
  width: 100%;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn.primary { background: var(--grad); box-shadow: 0 10px 28px rgba(138, 77, 255, .38); }
.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.btn.blue { background: linear-gradient(90deg, #2F7BFF, #4F6BFF); }
.btn.out { background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); }
.btn.gout {
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .6);
  color: #4ADE80;
}
.btn.vout {
  background: rgba(124, 92, 255, .08);
  border: 1px solid rgba(154, 120, 255, .7);
  color: #C4B5FD;
}
.btn.green { background: linear-gradient(90deg, #16A34A, #22C55E); }
.btn.sm { height: 42px; font-size: 13.5px; border-radius: 13px; }
.btnrow { display: flex; gap: 10px; }
.btnrow .btn { flex: 1; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #4ADE80; }
.live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  position: relative;
}
.live i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #22C55E;
  animation: ping 1.6s ease-out infinite;
}
@keyframes ping {
  from { opacity: .9; transform: scale(.5); }
  to { opacity: 0; transform: scale(1.6); }
}

.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding: 0 6px;
}
.stepper::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 15px;
  height: 2px;
  background: var(--line2);
}
.stepper .fillLine {
  position: absolute;
  left: 30px;
  top: 15px;
  height: 2px;
  background: var(--grad2);
  transition: width .6s;
}
.st {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 62px;
  position: relative;
  z-index: 1;
  font-size: 10.5px;
  color: var(--t3);
  font-weight: 500;
  text-align: center;
}
.st .c {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--bg);
  border: 1.5px solid var(--line2);
  color: var(--t2);
}
.st.on { color: #fff; font-weight: 600; }
.st.on .c {
  background: linear-gradient(135deg, #3A6BFF, #8A4DFF);
  border: 0;
  color: #fff;
  box-shadow: 0 0 0 5px rgba(124, 92, 255, .22), 0 0 18px rgba(124, 92, 255, .6);
}
.st.done .c {
  border-color: #3A8BFF;
  color: #3A8BFF;
  background: linear-gradient(rgba(47, 123, 255, .14), rgba(47, 123, 255, .14)), var(--bg);
}

.ta {
  border: 1.5px solid rgba(90, 110, 255, .8);
  border-radius: 16px;
  padding: 14px;
  background: rgba(13, 17, 48, .8);
  box-shadow: 0 0 0 4px rgba(60, 90, 255, .12);
  font-size: 14.5px;
  line-height: 1.5;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.ta .cur::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 17px;
  background: #6D8BFF;
  vertical-align: -3px;
  margin-left: 1px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chipx {
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t2);
  background: var(--s2);
  border: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
}
.chipx.on {
  background: rgba(47, 123, 255, .18);
  color: #fff;
  border-color: rgba(47, 123, 255, .8);
}
.chipx .n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  margin-left: 6px;
  padding: 0 5px;
}

.scrollx {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px;
}
.scrollx::-webkit-scrollbar { display: none; }

.utabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px;
}
.utabs::-webkit-scrollbar { display: none; }
.utabs button {
  background: none;
  border: 0;
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--t3);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.utabs button.on { color: #fff; font-weight: 600; }
.utabs button.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.src {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
}
.src .tx { flex: 1; min-width: 0; }
.src .ti { font-weight: 600; font-size: 15px; }
.src .su { font-size: 12px; color: var(--t3); margin-top: 2px; }
.ok { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #4ADE80; font-weight: 600; white-space: nowrap; }

.dash {
  border: 1.5px dashed var(--line2);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--t2);
  font-weight: 500;
  font-size: 14px;
  background: transparent;
  width: 100%;
  cursor: pointer;
}

.orb {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 6px auto 0;
  display: grid;
  place-items: center;
}
.orb .glow {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(124, 92, 255, .55), rgba(47, 123, 255, .18) 55%, transparent 70%);
  filter: blur(2px);
  animation: breathe 3s ease-in-out infinite;
}
.orb .rim {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(47, 123, 255, 0), #2F7BFF, #8A4DFF, #FF4FA8, rgba(255, 79, 168, 0));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: spin 3s linear infinite;
}
.orb .dots {
  position: absolute;
  inset: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 1px, transparent 1.6px) 0 0 / 12px 12px;
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 72%);
          mask: radial-gradient(circle, #000 55%, transparent 72%);
  opacity: .6;
}
.orb .orbit { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.orb .sat {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 26, 64, .9);
  border: 1px solid rgba(124, 92, 255, .6);
  box-shadow: 0 0 22px rgba(124, 92, 255, .5);
  animation: spin 14s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .85; } }

.chk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t2);
  transition: color .3s;
}
.chk .b {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line2);
  transition: all .3s;
}
.chk.done { color: #fff; }
.chk.done .b { background: var(--blue); border-color: var(--blue); }
.chk.run .b {
  border-color: var(--blue);
  border-top-color: transparent;
  animation: spin .8s linear infinite;
}

.kv {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.kv:first-child { border-top: 0; }
.kv .k { width: 88px; flex: none; color: var(--t3); display: flex; gap: 8px; align-items: center; }
.kv .v { color: #fff; line-height: 1.45; }

.stories {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 2px 16px;
}
.stories::-webkit-scrollbar { display: none; }
.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--t2);
  flex: none;
  width: 62px;
  background: none;
  border: 0;
  cursor: pointer;
}
.story .ci {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--grad);
}
.story .ci > div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s1);
  box-shadow: inset 0 0 0 2.5px var(--bg);
}
.story.add .ci { background: linear-gradient(135deg, #2F7BFF, #4F6BFF); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi {
  padding: 14px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.kpi .l { font-size: 12px; color: var(--t2); display: flex; gap: 6px; align-items: center; }
.kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.kpi .d { font-size: 11.5px; color: #4ADE80; font-weight: 600; }
.kpi svg.sp { position: absolute; right: 0; bottom: 0; opacity: .95; }

.miniF {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 64px;
  margin-top: 10px;
}
.miniF i {
  flex: 1;
  border-radius: 8px 8px 4px 4px;
  display: block;
  transform-origin: bottom;
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rise { from { transform: scaleY(0); } }

.ai {
  position: relative;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(58, 107, 255, .16), rgba(138, 77, 255, .2) 55%, rgba(255, 79, 168, .14));
  border: 1px solid rgba(138, 77, 255, .38);
  overflow: hidden;
}
.ai::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 168, .25), transparent 70%);
}
.ai p {
  margin: 8px 0 12px;
  color: var(--t2);
  font-size: 13.5px;
  line-height: 1.45;
  position: relative;
}

.feed { display: flex; flex-direction: column; }
.fi {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 2px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.fi:first-child { border-top: 0; }
.fi .tx { flex: 1; min-width: 0; }
.fi .n { font-weight: 600; font-size: 14px; }
.fi .p {
  font-size: 12.5px;
  color: var(--t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.fi .m {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 11px;
  color: var(--t3);
  flex: none;
}
.cnt12 {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 5px;
}

.lead {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .35s ease, opacity .35s ease, max-height .35s ease,
              margin .35s ease, padding .35s ease;
  /* 24.09.2026: было 400px — с длинным био второй ряд кнопок вылезал за карточку
     (снимок владельца). Предел нужен только для анимации ухода карточки. */
  max-height: 1200px;
}
.lead.out-r { transform: translateX(110%) rotate(6deg); opacity: 0; }
.lead.out-l { transform: translateX(-110%) rotate(-6deg); opacity: 0; }
.lead.gone {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -10px;
  border-width: 0;
}
.lead .top { display: flex; gap: 12px; align-items: flex-start; }
.lead .info { flex: 1; min-width: 0; }
.lead .nm { font-weight: 700; font-size: 15.5px; }
.lead .hd { font-size: 12px; color: var(--t3); margin-top: 1px; }
.lead .loc {
  font-size: 11.5px;
  color: var(--t2);
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 3px;
}
.lead .bio { font-size: 12.5px; color: var(--t2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lead .sc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: none;
  width: 78px;
}
.lead .sc small { font-size: 10.5px; font-weight: 600; text-align: center; line-height: 1.2; }

.tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--t2);
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, .03);
  white-space: nowrap;
}
.tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* 24.09.2026: четыре кнопки в один ряд не влезали на телефоне — «Взрослый,
   подходит» вылезал на «Отклонить», галочка выпадала наружу (снимок владельца).
   Теперь два ряда: решение (подходит / отклонить) и действия (закладка / в кампанию). */
.acts {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "ok ok no" "sv cp cp";
  gap: 8px;
}
.acts .a-ok { grid-area: ok; }
.acts .a-no { grid-area: no; }
.acts .a-sv { grid-area: sv; }
.acts .a-cp { grid-area: cp; }
.acts button {
  height: 38px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  padding: 0 4px;
}
.a-ok {
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .55);
  color: #4ADE80;
}
.a-sv {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line2);
  color: #fff;
}
.a-no {
  background: rgba(240, 68, 97, .08);
  border: 1px solid rgba(240, 68, 97, .5);
  color: #FF6B85;
}
.a-cp {
  background: rgba(47, 123, 255, .12);
  border: 1px solid rgba(47, 123, 255, .7);
  color: #7FAEFF;
}

.ringc { position: relative; display: grid; place-items: center; flex: none; }
.ringc span { position: absolute; font-weight: 700; }
.ringc circle.p { transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1); }

.toast {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 54px;
  z-index: 8;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(24, 30, 72, .96);
  border: 1px solid rgba(124, 92, 255, .45);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  font-size: 13px;
  backdrop-filter: blur(12px);
  animation: tin .45s cubic-bezier(.2, .8, .2, 1);
}
.toast.hide { animation: tout .35s ease forwards; }
@keyframes tin {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
}
@keyframes tout { to { opacity: 0; transform: translateY(-16px); } }

.seg {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.seg.on {
  border-color: rgba(47, 123, 255, .9);
  background: linear-gradient(180deg, rgba(47, 123, 255, .2), rgba(30, 40, 110, .35));
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .15);
}
.seg .rb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  display: grid;
  place-items: center;
  flex: none;
}
.seg .rb svg { opacity: 0; }
.seg.on .rb svg { opacity: 1; }
.seg.on .rb { background: var(--blue); border-color: var(--blue); }
.seg .tx { flex: 1; min-width: 0; }
.seg .ti { font-weight: 600; font-size: 14.5px; }
.seg .su { font-size: 11.5px; color: var(--t2); margin-top: 2px; }

.stack { display: flex; margin-top: 8px; }
.stack .av { margin-left: -7px; }
.stack .av:first-child { margin-left: 0; }

.seg .num { text-align: right; flex: none; }
.seg .num b { font-size: 15px; }
.seg .num small { display: block; font-size: 10px; color: var(--t3); }

.bars { display: flex; gap: 4px; align-items: flex-end; height: 56px; }
.bars i {
  flex: 1;
  border-radius: 3px;
  background: linear-gradient(180deg, #7C5CFF, #2F7BFF);
  display: block;
  transform-origin: bottom;
  animation: rise .8s cubic-bezier(.2, .8, .2, 1) both;
}

.frow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  font-size: 13px;
}
.frow .k { width: 84px; flex: none; color: var(--t2); display: flex; gap: 8px; align-items: center; }
.frow .vals { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; }

.goal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.goal button {
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
}
.goal button b { font-size: 13px; }
.goal button small { font-size: 10.5px; color: var(--t3); }
.goal button.on {
  border-color: rgba(47, 123, 255, .9);
  background: rgba(47, 123, 255, .12);
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .15);
}

.var {
  display: inline;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(47, 123, 255, .2);
  color: #8FB6FF;
  font-weight: 600;
  font-size: 12.5px;
  border: 1px solid rgba(47, 123, 255, .45);
}

.msgbox {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: #E6E8F5;
}

.tog {
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: var(--blue);
  position: relative;
  flex: none;
  border: 0;
  cursor: pointer;
  transition: background .2s;
}
.tog::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 22px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  transition: left .22s cubic-bezier(.2, .8, .2, 1);
}
.tog.off { background: rgba(255, 255, 255, .16); }
.tog.off::after { left: 2px; }

input[type=range] {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3A6BFF var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%));
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(58, 107, 255, .35);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 5px rgba(58, 107, 255, .35);
  cursor: pointer;
}

.bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.45;
}
.bubble.in { background: var(--s2); border-bottom-left-radius: 6px; }
.bubble.out {
  background: linear-gradient(135deg, #2F5BFF, #5B45F0);
  border-bottom-right-radius: 6px;
  margin-left: auto;
}
.bt { font-size: 10.5px; color: var(--t3); margin-top: 4px; }

.typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--s2);
  border-bottom-left-radius: 6px;
}
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t2);
  animation: bounce 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--s1);
  border: 1px solid var(--line);
}
.composer .ph {
  flex: 1;
  min-width: 0;
  color: var(--t3);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sendb {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--blue);
  display: grid;
  place-items: center;
  border: 0;
  flex: none;
}

.meter { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #FF4FA8, #22C55E);
}

.funnel { display: flex; flex-direction: column; gap: 6px; }
.fb { display: flex; align-items: center; gap: 10px; }
.fb .bar {
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #fff;
  transform-origin: left;
  animation: grow 1s cubic-bezier(.2, .8, .2, 1) both;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px rgba(0, 0, 0, .25);
  min-width: 118px;
}
.fb .bar b { font-size: 17px; letter-spacing: -.02em; }
.fb .bar small { font-size: 11px; opacity: .9; font-weight: 500; }
.fb .drop { font-size: 11.5px; color: var(--t3); white-space: nowrap; }
@keyframes grow { from { transform: scaleX(.05); opacity: .3; } }

.chart path.l {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw 1.8s .2s cubic-bezier(.3, .7, .2, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.sbar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sbar .n {
  width: 112px;
  flex: none;
  color: #E6E8F5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sbar .tr {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.sbar .tr i {
  display: block;
  height: 100%;
  border-radius: 4px;
  transform-origin: left;
  animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
.sbar .pc { width: 36px; text-align: right; color: var(--t2); font-weight: 600; }

.acc {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
}
.acc .tx { flex: 1; min-width: 0; }
.acc .ti { font-weight: 600; font-size: 14.5px; }
.acc .su { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.acc .st2 { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-top: 5px; }

.gborder {
  position: relative;
  border-radius: 18px;
  padding: 1.5px;
  background: var(--grad);
}
.gborder > button {
  width: 100%;
  height: 56px;
  border-radius: 17px;
  background: #0B0E28;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.infra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.infra div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}
.infra b { font-size: 13px; display: block; }
.infra small { font-size: 10.5px; color: var(--t3); }

.menu {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 18px;
  cursor: pointer;
}
.menu .tx { flex: 1; min-width: 0; }
.menu .ti { font-weight: 600; font-size: 14.5px; }
.menu .su {
  font-size: 12px;
  color: var(--t3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile { display: grid; place-items: center; flex: none; }

.sys {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.sys:first-child { border-top: 0; }

.abv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.abv > div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 24, .78);
  backdrop-filter: blur(8px);
  animation: tin .3s ease;
}
.overlay .in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
}
.boom {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad);
  box-shadow: 0 0 60px rgba(138, 77, 255, .7);
  animation: pop .6s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* ===== tab bar (нижнее меню) ===== */
.tabs {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 8px 6px 26px;
  background: rgba(9, 12, 32, .97);
  border-top: 1px solid var(--line);
  flex: none;
  position: relative;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--t3);
  font-weight: 500;
  width: 64px;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.tab.on { color: #fff; }
.tab.on svg { stroke: #5B8CFF; }
.tab .bd {
  position: absolute;
  top: -4px;
  right: 12px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px #090C20;
}
.tab.mid .cb {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--grad);
  box-shadow: 0 8px 22px rgba(138, 77, 255, .55);
  margin-top: -22px;
}
.tab.mid.on .cb {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 8px 22px rgba(138, 77, 255, .55);
}

/* ===== avatar gradients по инициалам ===== */
.av-AK { background: linear-gradient(150deg, #FBCFE8, #BE185D); }
.av-MO { background: linear-gradient(150deg, #BFDBFE, #1D4ED8); }
.av-SR { background: linear-gradient(150deg, #FED7AA, #C2410C); }
.av-IS { background: linear-gradient(150deg, #DDD6FE, #6D28D9); }
.av-SM { background: linear-gradient(150deg, #F9A8D4, #A21CAF); }
.av-DV { background: linear-gradient(150deg, #E2E8F0, #475569); }
.av-ES { background: linear-gradient(150deg, #FBCFE8, #9D174D); }
.av-MC { background: linear-gradient(150deg, #BAE6FD, #0369A1); }
.av-KI { background: linear-gradient(150deg, #FDE68A, #A16207); }
.av-AP { background: linear-gradient(150deg, #A7F3D0, #047857); }
.av-ET { background: linear-gradient(150deg, #C7D2FE, #4338CA); }
.av-DK { background: linear-gradient(150deg, #FECACA, #B91C1C); }
.av-ML { background: linear-gradient(150deg, #FDBA74, #9A3412); }
.av-SK { background: linear-gradient(150deg, #A5F3FC, #0E7490); }
.av-AC { background: linear-gradient(150deg, #FCD34D, #B45309); }
.av-NP { background: linear-gradient(150deg, #F5D0FE, #86198F); }
.av-TG { background: linear-gradient(150deg, #CBD5E1, #334155); }
.av-IC { background: linear-gradient(150deg, #99F6E4, #0F766E); }
.av-MB { background: linear-gradient(150deg, #FBCFE8, #BE185D); }
.av-TF { background: linear-gradient(150deg, #BFDBFE, #1E40AF); }
.av-GL { background: linear-gradient(150deg, #C4B5FD, #5B21B6); }
.av-AS { background: linear-gradient(150deg, #BBF7D0, #15803D); }
.av-MP { background: linear-gradient(150deg, #FDE68A, #B45309); }
.av-DP { background: linear-gradient(150deg, #E0E7FF, #3730A3); }
.av-AL { background: linear-gradient(150deg, #FECDD3, #BE123C); }

/* ===== tint подложки и рамки (вместо hexA() в .mjs) ===== */
.tint-blue   { background: rgba(47, 123, 255, .16); }
.tint-green  { background: rgba(34, 197, 94, .16); }
.tint-violet { background: rgba(124, 92, 255, .16); }
.tint-pink   { background: rgba(228, 82, 195, .16); }
.tint-yellow { background: rgba(245, 180, 0, .16); }
.tint-red    { background: rgba(240, 68, 97, .16); }
.tint-teal   { background: rgba(25, 194, 160, .16); }
.tint-orange { background: rgba(255, 122, 26, .16); }
.tint-blue-bd   { border-color: rgba(47, 123, 255, .55); }
.tint-green-bd  { border-color: rgba(34, 197, 94, .55); }
.tint-violet-bd { border-color: rgba(154, 120, 255, .7); }
.tint-pink-bd   { border-color: rgba(228, 82, 195, .55); }
.tint-yellow-bd { border-color: rgba(245, 180, 0, .55); }
.tint-red-bd    { border-color: rgba(240, 68, 97, .55); }
.tint-teal-bd   { border-color: rgba(25, 194, 160, .55); }
.tint-orange-bd { border-color: rgba(255, 122, 26, .55); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Проводник Хант (24.09.2026) ─────────────────────────────
   Выскакивает снизу над меню, как советник в игре: персонаж слева, облачко справа.
   Подсветка — рамка поверх нужного блока с затемнением всего остального; рамка
   не ловит нажатия, поэтому подсвеченный блок нажимается как обычно. */
#provodnik { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; pointer-events: none; display: flex; justify-content: center; padding: 0 12px; }
.prov-okno { pointer-events: auto; display: flex; align-items: flex-end; gap: 6px; width: 100%; max-width: 440px; animation: prov-vyskok .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.prov-hant { flex: none; filter: drop-shadow(0 6px 14px rgba(124, 92, 255, .45)); animation: prov-kachaetsya 2.8s ease-in-out .6s infinite; transform-origin: 50% 100%; }
.prov-glaza { animation: prov-morgaet 4.5s infinite; transform-origin: 36px 38px; }
.prov-oblako { position: relative; flex: 1; min-width: 0; background: var(--s2); border: 1px solid var(--line2); border-radius: 16px 16px 16px 4px; padding: 11px 13px 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.prov-imya { font-weight: 700; font-size: 13px; color: var(--yellow); letter-spacing: .02em; }
.prov-shag { font-size: 11px; color: var(--t3); margin-top: 1px; }
.prov-tekst { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.42; color: var(--t1); }
.prov-knopki { display: flex; gap: 8px; flex-wrap: wrap; }
.prov-knopki .btn { flex: 1 1 auto; min-width: 0; }
#prov-ramka { position: fixed; z-index: 29; pointer-events: none; border-radius: 14px; border: 2px solid var(--yellow); box-shadow: 0 0 0 9999px rgba(3, 5, 16, .62); animation: prov-pulsiruet 1.4s ease-in-out infinite; transition: left .15s, top .15s, width .15s, height .15s; }
@keyframes prov-vyskok { from { transform: translateY(40px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes prov-kachaetsya { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-4deg) translateY(-3px); } }
@keyframes prov-morgaet { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes prov-pulsiruet { 0%, 100% { border-color: var(--yellow); } 50% { border-color: var(--orange); } }
@media (prefers-reduced-motion: reduce) { .prov-okno, .prov-hant, .prov-glaza, #prov-ramka { animation: none; } }

/* Хант свёрнут до фигурки, пока человек работает с подсвеченным блоком. */
.prov-mini { pointer-events: auto; position: absolute; right: 12px; bottom: 0; border: 0; padding: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }

/* Е2: лид на ручной проверке — клиент сам смотрит профиль перед «подходит». */
.lead .ruchnaya{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--s2);font-size:12.5px;color:var(--t2);display:flex;flex-direction:column;gap:6px}
.lead .ruchnaya a{color:var(--blue);font-weight:600;text-decoration:none}

/* Идёт действие (zov.mjs, 24.09.2026): полоска наверху и кнопки не принимают второй клик. */
html.hs-zhdu::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);background-size:40% 100%;
  background-repeat:no-repeat;animation:hs-zhdu 1s linear infinite}
@keyframes hs-zhdu{from{background-position:-40% 0}to{background-position:140% 0}}
html.hs-zhdu button,html.hs-zhdu [data-d]{pointer-events:none}
html.hs-zhdu .btn{opacity:.65;cursor:progress}

/* Пока открыта подсказка Ханта, у экрана снизу запас под неё: окно висит над нижним
   меню во всю ширину, и последняя кнопка экрана («Начать Hunt», «Запустить Hunt»)
   оказывалась под ним — клик уходил в подсказку (слепые проверяющие, 24.09.2026). */
body:has(#provodnik .prov-okno) #koren > .body { padding-bottom: 260px; }
/* Окно подсказки перекрыло кнопку экрана — уезжает наверх (provodnik.mjs, razvesti). */
#provodnik.prov-verh { bottom: auto; top: calc(64px + env(safe-area-inset-top)); }
#provodnik.prov-verh .prov-oblako { border-radius: 16px 16px 16px 16px; }

/* ===== волна 15: плавающий ассистент (public/js/kontent.mjs) ===== */
/* Ассистент — это Хант (слово владельца 24.09): в покое фигурка в углу, нажатие открывает чат.
   Когда Хант что-то говорит (#provodnik непуст), фигурка — его собственная, наша прячется. */
.kf-ii-knopka {
  position: fixed;
  right: 12px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 29;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
body:has(#provodnik > *) .kf-ii-knopka { display: none; }
body:has(#kf-ii-panel) #provodnik { display: none; }
.prov-figura { pointer-events: auto; border: 0; padding: 0; background: transparent; cursor: pointer; flex: none; }
.kf-ii-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  max-width: 520px;
  margin: 0 auto;
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .55);
  animation: enter .28s cubic-bezier(.2, .8, .2, 1);
}
.kf-ii-lenta {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 14px;
}

/* Проводник, который мешает везде: окно пропускает нажатия к экрану, кроме своих кнопок. */
#provodnik.prov-skvoz .prov-okno { pointer-events: none; opacity: .82; }
#provodnik.prov-skvoz .prov-okno button { pointer-events: auto; }