/* Кабинет Sansaty. Палитра и шрифты — как на лендинге (Saitbot/styles.css).
   Правила интерфейса — по ui-ux-pro-max: контраст текста от 4.5:1, зоны нажатия от 44px,
   SVG-иконки одного набора, переходы 150–250 мс, видимый фокус, уважение к reduced-motion. */
:root {
  --paper: #FBF8F5;
  --surface: #FFFFFF;
  --hover: #F7F2ED;
  --ink: #15161B;
  --ink-2: #3A3C45;
  --muted: #62656F;          /* 5.4:1 на бумаге */
  --line: #E8E2DB;
  --line-strong: #D6CDC3;
  --accent: #F14635;         /* фирменный красный — блики, графики, точки */
  --accent-btn: #DC3423;     /* заливка главной кнопки: белый текст 4.6:1 */
  --accent-btn-hover: #C42C1D;
  --accent-text: #C2301F;    /* красный текст и ссылки: 5.2:1 */
  --accent-ink: #FFFFFF;
  --accent-soft: #FDE8E4;
  --accent-glow: rgba(241, 70, 53, .08);
  --mint: #157F4C;
  --mint-soft: #E1F4E9;
  --amber: #8F5100;
  --amber-soft: #FCEBD3;
  --danger: #B8183A;
  --danger-soft: #FBE2E6;
  --bubble-in: #FFFFFF;
  --bubble-out: #E2FFC7;
  --bar-empty: #ECE5DE;
  --soft: #F3EEE8;
  --pass: #24252D;
  --bar: #C7BDB2;
  --shadow-sm: 0 1px 2px rgba(40, 24, 10, .05), 0 2px 8px -4px rgba(40, 24, 10, .08);
  --shadow-md: 0 2px 4px rgba(40, 24, 10, .05), 0 12px 28px -14px rgba(40, 24, 10, .22);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Unbounded", var(--font);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --r: 20px;
  --r-sm: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --z-sticky: 10;
  --z-cta: 20;
  --z-toast: 50;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #121318;
  --surface: #1C1D25;
  --hover: #23242E;
  --ink: #F4F0EB;
  --ink-2: #D9D5D0;
  --muted: #A0A2AC;
  --line: #2B2C36;
  --line-strong: #3A3B47;
  --accent: #FF5A48;
  --accent-btn: #D9382A;
  --accent-btn-hover: #E8473A;
  --accent-text: #FF7F70;
  --accent-ink: #FFFFFF;
  --accent-soft: #3A1F1C;
  --accent-glow: rgba(255, 90, 72, .07);
  --mint: #4FD39A;
  --mint-soft: #15342A;
  --amber: #F2B35C;
  --amber-soft: #3A2C17;
  --danger: #FF8596;
  --danger-soft: #3D1A25;
  --bubble-in: #1C1D25;
  --bubble-out: #2D4A2B;
  --bar-empty: #2C2D38;
  --soft: #252630;
  --pass: #2A2B36;
  --bar: #5A5B68;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- основа ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: radial-gradient(560px 440px at 100% -140px, var(--accent-glow), transparent) no-repeat, var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
a, button, input, label, textarea, select { touch-action: manipulation; }
main {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
}
#app.enter { animation: screen-in .22s var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-size: 25px; line-height: 1.18; }
h2 { font-size: 21px; line-height: 1.22; }
h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
p { margin: 0; }
a { color: var(--accent-text); }
code { font-family: var(--mono); font-size: .93em; }
.lead { color: var(--muted); margin-top: 10px; line-height: 1.55; }
.muted { color: var(--muted); }
.step-no {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  color: var(--muted); font-weight: 600; font-size: 14px;
}
.step-no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--accent); }
.num { font-variant-numeric: tabular-nums; }
svg.i { width: 20px; height: 20px; flex: none; display: block; }

/* ---------- кнопки ---------- */
.btn {
  appearance: none; border: 0; cursor: pointer;
  font: 700 16px/1.15 var(--font);
  border-radius: var(--r-sm);
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease, transform .12s ease;
  padding: 14px 18px;
  min-height: 52px;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; text-align: center;
}
.btn:active { transform: scale(.985); }
.btn:disabled { cursor: default; }
.btn-primary { background: var(--accent-btn); color: var(--accent-ink); box-shadow: 0 8px 18px -12px rgba(220, 52, 35, .7); }
.btn-primary:disabled { opacity: .45; box-shadow: none; }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:disabled { opacity: .6; }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-add {
  background: transparent; color: var(--ink-2);
  box-shadow: none; border: 1.5px dashed var(--line-strong);
}
.btn-add svg.i { color: var(--accent-text); }
.btn-sm { padding: 10px 14px; min-height: 46px; font-size: 15px; }
@media (hover: hover) {
  .btn-primary:not(:disabled):hover { background: var(--accent-btn-hover); }
  .btn-ghost:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--hover); }
  .btn-add:hover { border-color: var(--accent); color: var(--ink); background: var(--surface); }
  .btn-danger:hover { background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 12%); }
}
:is(.btn, .linkish, .row, .chip, .tab, .pass-link, .seg button):focus-visible,
:is(input, textarea):focus-visible, .switch input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 2px;
}
.linkish {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--accent-text); font: 600 15px/1.4 var(--font);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  /* ссылка в строке текста: зона нажатия 44px за счёт отступов, строка при этом не раздвигается */
  display: inline-block; padding: 12px 0; margin: -12px 0;
}
.stack { display: grid; gap: 10px; margin-top: 20px; }
/* вне Telegram у страницы своя главная кнопка; в Telegram её заменяет нативная */
.page-cta {
  position: sticky; bottom: 0; z-index: var(--z-cta);
  padding: 16px 0 calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--paper) 30%);
  margin-top: 24px;
}
body.tg .page-cta { display: none; }

/* ---------- группы и строки ---------- */
.group { margin-top: 28px; }
.group > h3 { padding: 0 4px; color: var(--muted); font-weight: 600; font-size: 14px; }
.group-note { font-size: 13px; color: var(--muted); padding: 8px 4px 0; line-height: 1.45; }
.list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 16px; box-shadow: var(--shadow-sm);
}
.row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 16px; width: 100%; min-height: 60px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  text-decoration: none;
  position: relative;
  transition: background-color .15s ease;
}
.row + .row::before {
  content: ""; position: absolute; top: 0; left: 66px; right: 0; height: 1px; background: var(--line);
}
.row.no-ico::before, .row.no-ico + .row::before { left: 16px; }
button.row, a.row { cursor: pointer; }
button.row:active, a.row:active { background: var(--hover); }
@media (hover: hover) {
  button.row:hover, a.row:hover { background: var(--hover); }
  button.row:hover .chev, a.row:hover .chev { transform: translateX(2px); opacity: .9; }
}
.row .ico {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  font-size: 16px; background: var(--soft); color: var(--ink-2);
}
.row .ico.plain { background: none; }
.t-accent { background: var(--accent-soft) !important; color: var(--accent-text) !important; }
.t-mint { background: var(--mint-soft) !important; color: var(--mint) !important; }
.t-amber { background: var(--amber-soft) !important; color: var(--amber) !important; }
.t-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.t-ink { background: var(--ink) !important; color: var(--paper) !important; }
.row-main { min-width: 0; }
.row-title { font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.row-sub { font-size: 14px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; line-height: 1.4; }
.row-trail { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; text-align: right; }
.row .chev { width: 8px; height: 14px; flex: none; color: var(--muted); opacity: .55; transition: transform .15s ease, opacity .15s ease; }
.row.no-ico { grid-template-columns: 1fr auto; }
.row.danger .row-title { color: var(--danger); }
.row-sub.warn { color: var(--amber); }
.row-sub.bad { color: var(--danger); }
.row-sub.good { color: var(--mint); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; line-height: 1;
  padding: 6px 9px; border-radius: 99px; white-space: nowrap;
}
.badge.good, .badge.warn, .badge.bad { padding-left: 8px; }
.badge.good::before, .badge.warn::before, .badge.bad::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.badge.good { background: var(--mint-soft); color: var(--mint); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--soft); color: var(--ink); }

/* переключатель: сам input шире рисунка — палец попадает с запасом (44px) */
.switch { position: relative; display: inline-block; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; inset: -7px -4px; width: calc(100% + 8px); height: calc(100% + 14px); opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line-strong); transition: background-color .2s ease; }
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(10, 14, 40, .25); transition: transform .2s var(--ease);
}
.switch input:checked + span { background: var(--mint); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: .6; }

/* ---------- пропуск бота ---------- */
.pass {
  --notch: 11px;
  --cut: 52px;
  position: relative;
  border-radius: 22px;
  display: grid;
  grid-template-rows: 1fr auto;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 calc(100% - var(--cut)), #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% calc(100% - var(--cut)), #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 calc(100% - var(--cut)), #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% calc(100% - var(--cut)), #0000 98%, #000) right / 51% 100% no-repeat;
  transition: filter .2s ease;
}
/* как финальный блок лендинга: графит с тёплым красным бликом */
.pass-full {
  background: radial-gradient(300px 180px at 0% 0%, rgba(241, 70, 53, .32), transparent 70%), var(--pass);
  color: #FFFFFF;
}
.pass-full .avatar { background: rgba(255, 255, 255, .12); }
.pass-full.off { background: var(--soft); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.pass-full.off .avatar { background: var(--line); color: var(--muted); }
.pass-full.off .pass-name { color: var(--ink); opacity: .75; }
.pass-full.off .pass-stub { border-top-color: var(--line-strong); }
.pass-full.off .dot.off { background: var(--muted); }
.pass-empty {
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--line) 70%, transparent) 10px 11px),
    var(--surface);
  color: var(--muted);
  place-items: center; grid-template-rows: 1fr;
  text-align: center; padding: 24px; min-height: 168px; font-size: 15px;
}
.pass-empty.checking { animation: breathe 1.1s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: 1; } to { opacity: .55; } }
.pass.enter { animation: flip .55s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 100%; }
@keyframes flip { from { transform: perspective(900px) rotateX(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
.pass-main { display: flex; gap: 14px; align-items: center; padding: 20px 20px 16px; min-width: 0; }
.pass-main > div:last-child { min-width: 0; flex: 1; }
.avatar {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center;
  font: 800 24px/1 var(--font); overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.pass-name { font: 800 19px/1.2 var(--font); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pass-user { opacity: .82; font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.pass-stub {
  height: var(--cut);
  border-top: 2px dashed rgba(255,255,255,.3);
  margin: 0 18px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}
.pass-stub .sep { flex: 1; }
.pass-stub svg { flex: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7CF0B6; flex: none; box-shadow: 0 0 0 3px rgba(124, 240, 182, .18); }
.dot.off { background: rgba(255,255,255,.5); box-shadow: none; }
.pass-link { display: block; text-decoration: none; color: inherit; border-radius: 22px; }
.pass-link + .pass-link { margin-top: 12px; }
.pass-link:active .pass { filter: brightness(.96); }
@media (hover: hover) { .pass-link:hover .pass-full:not(.off) { filter: brightness(1.12); } .pass-link:hover .pass-full.off { filter: brightness(.98); } }
.pass.compact { --cut: 0px; -webkit-mask: none; mask: none; grid-template-rows: auto; }
.pass.compact .pass-main { padding: 16px 18px; }
.pass.compact .avatar { width: 48px; height: 48px; font-size: 20px; }
.pass.compact .pass-name { font-size: 17px; }

/* ---------- вкладки бота: сегменты на закреплённой полосе ---------- */
.tabs {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; gap: 2px;
  margin: 12px -16px 0; padding: 10px 20px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::before {
  content: ""; position: absolute; inset: 10px 16px; z-index: -1;
  background: var(--soft); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  flex: 1 0 auto; min-height: 44px; margin: 4px 0;
  font: 600 15px/1 var(--font); color: var(--muted);
  padding: 0 10px; white-space: nowrap; border-radius: 12px;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
@media (hover: hover) { .tab:not([aria-selected="true"]):hover { color: var(--ink); } }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }

/* ---------- статистика ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  appearance: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 14px/1 var(--font); padding: 0 14px; min-height: 44px; border-radius: 12px; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) { .chip:not([aria-pressed="true"]):hover { border-color: var(--line-strong); background: var(--hover); } }
.chips.even { display: grid; grid-template-columns: repeat(4, 1fr); }
.chips.even .chip { padding: 0 4px; text-align: center; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.card.revenue .chips.even { background: var(--soft); padding: 4px; border-radius: 14px; gap: 2px; }
.card.revenue .chip { border: 0; background: none; min-height: 44px; border-radius: 10px; }
.card.revenue .chip[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.hero-num { font: 800 40px/1.05 var(--font); letter-spacing: -0.025em; margin-top: 20px; }
.hero-sub { color: var(--muted); margin-top: 6px; font-size: 15px; }
.chart { margin-top: 22px; position: relative; }
.chart svg { display: block; width: 100%; height: 120px; overflow: visible; }
.chart svg path { transition: fill .15s ease; }
.chart .axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; }
.chart-label { color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.chart-label.picked { color: var(--ink); }
.chart-label b { font-weight: 800; }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.figure {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px; box-shadow: var(--shadow-sm); min-width: 0;
}
.fig-ico {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--soft); color: var(--ink-2); margin-bottom: 12px;
}
.fig-ico svg.i { width: 18px; height: 18px; }
.figure b { display: block; font: 800 20px/1.25 var(--font); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.figure span:not(.fig-ico) { font-size: 13px; color: var(--muted); line-height: 1.35; display: block; margin-top: 2px; }

.meter { height: 8px; border-radius: 4px; background: var(--bar-empty); overflow: hidden; margin-top: 12px; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.meter.warn i { background: var(--amber); }
.meter.bad i { background: var(--danger); }
.plan-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); }
.plan-box .plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-box .plan-head b { font: 800 17px/1.3 var(--font); }
.plan-box p { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* чек-лист настройки */
.checklist { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.checklist li { counter-increment: c; }
.checklist li + li .row::before { content: ""; position: absolute; top: 0; left: 66px; right: 0; height: 1px; background: var(--line); }
.checklist .row .ico { background: var(--accent-soft); }
.checklist .row .ico::before { content: counter(c); font-weight: 800; color: var(--accent-text); font-size: 15px; }
.checklist .done .ico { background: var(--mint-soft); }
.checklist .done .ico::before {
  content: ""; width: 18px; height: 18px; background: var(--mint);
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.checklist .done .row-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ---------- уведомления: цвет + иконка + текст, а не только цвет ---------- */
:root {
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --i-bad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  --i-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
.notice {
  position: relative;
  padding: 14px 16px 14px 46px; border-radius: 18px;
  background: var(--soft); font-size: 14px; line-height: 1.5;
  border: 1px solid var(--line);
}
.notice::before {
  content: ""; position: absolute; left: 16px; top: 15px; width: 19px; height: 19px;
  background: var(--muted);
  -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat;
}
.notice.warn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 22%, transparent); }
.notice.warn::before { background: var(--amber); -webkit-mask-image: var(--i-warn); mask-image: var(--i-warn); }
.notice.bad { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.notice.bad::before { background: var(--danger); -webkit-mask-image: var(--i-bad); mask-image: var(--i-bad); }
.notice b { font-weight: 700; }
/* действие внутри уведомления — настоящая кнопка с зоной нажатия 44px, а не мелкая ссылка */
.notice .linkish {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 16px;
  border-radius: 12px; background: var(--surface); color: var(--ink);
  font-weight: 700; text-decoration: none; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  transition: box-shadow .18s ease;
}
@media (hover: hover) { .notice .linkish:hover { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); } }
.notice + .notice, .notice + .group, * + .notice { margin-top: 14px; }

/* ---------- формы ---------- */
.field { margin-top: 20px; }
.field > label, .field > .label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.input, textarea {
  display: block; width: 100%; min-height: 50px;
  padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: 400 16px/1.4 var(--font);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
textarea { resize: none; min-height: 110px; line-height: 1.5; }
.input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
.input.bad, textarea.bad { border-color: var(--danger); }
.input.good, textarea.good { border-color: var(--mint); }
.mono { font-family: var(--mono); font-weight: 500; font-size: 15px; word-break: break-all; }
.field-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 8px; min-height: 20px; }
.field-row .linkish { padding: 12px 4px; margin: -12px -4px; }
.counter { font-size: 13px; color: var(--muted); white-space: nowrap; }
.counter.over { color: var(--danger); font-weight: 700; }
.msg { font-size: 14px; line-height: 1.4; color: var(--muted); }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--mint); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 16px; }
.seg button {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--muted);
  font: 600 14px/1.25 var(--font); padding: 10px 8px; min-height: 44px; border-radius: 12px;
  transition: background-color .18s ease, color .18s ease;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
/* похоже на инлайн-кнопку Telegram под сообщением, а не на кнопку действия кабинета */
.price-preview {
  padding: 11px 14px; border-radius: 10px;
  background: var(--bubble-in); border: 1.5px dashed var(--line-strong);
  color: var(--accent-text); text-align: center; font-weight: 600; font-size: 15px;
}
.photo-box { margin-top: 18px; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); min-height: 180px; display: grid; place-items: center; color: var(--muted); }
.photo-box img { width: 100%; display: block; }

/* ---------- первый экран и подключение ---------- */
.steps { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: s; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 24px 46px; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -3px;
  width: 32px; height: 32px; border-radius: 11px;
  background: var(--accent-btn); color: var(--accent-ink);
  display: grid; place-items: center; font: 700 14px/1 var(--display);
}
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 15.5px; top: 36px; bottom: 6px; width: 1px; background: var(--line-strong);
}
.steps > li > p:first-child { font-weight: 600; }
.steps .hint { font-size: 14px; margin-top: 4px; }
.steps .chat { padding: 10px 0 0; }
.bf-btn { margin-top: 12px; }

/* прогресс подключения: «Шаг 1 из 2» и полоски */
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--muted); font-size: 14px; font-weight: 600; }
.progress-bars { display: flex; gap: 4px; flex: 1; max-width: 120px; }
.progress-bars i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-strong); }
.progress-bars i.on { background: var(--accent); }

/* что сделать в BotFather: одна карточка, номер — спокойный, пример — серым */
.howto {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.howto li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 16px; position: relative; }
.howto li + li::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--line); }
.howto-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--soft); color: var(--ink-2); font: 700 13px/1 var(--font); margin-top: -2px;
}
.howto li > div > b { display: block; font-weight: 600; line-height: 1.4; }
.howto p { margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.howto p b { color: var(--ink); }
/* главная нового владельца: что бот делает сам, деньги и цена */
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 14px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.feat-i {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent-text);
}
.feat-i svg.i { width: 18px; height: 18px; }
.feat .feat-i { margin-bottom: 10px; }
.feat b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.feat > span:last-child { font-size: 13px; color: var(--muted); line-height: 1.35; }
.facts { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); }
.fact { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px; position: relative; }
.fact + .fact::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--line); }
.fact .feat-i { background: var(--surface); color: var(--ink-2); }
.fact b { font-weight: 700; }
.fact p { font-size: 14px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.code-chip {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  min-height: 40px; padding: 0 12px; border-radius: 10px;
  background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font: 500 15px/1 var(--mono); transition: box-shadow .18s ease;
}
.code-chip svg.i { width: 16px; height: 16px; color: var(--muted); }
@media (hover: hover) { .code-chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } }
.code-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
.safe { margin-top: 18px; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.safe svg { flex: none; margin-top: 2px; }
.next ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.next li { margin: 4px 0; }
.next li::marker { color: var(--accent-text); font-weight: 700; }

/* ---------- загрузка, пусто, уведомления ---------- */
.skel { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--soft) 80%, transparent), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.empty { position: relative; text-align: center; padding: 88px 20px 28px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.empty::before, .empty::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }
.empty::before { top: 28px; width: 48px; height: 48px; border-radius: 16px; background: var(--soft); }
.empty::after {
  top: 40px; width: 24px; height: 24px; background: var(--muted);
  -webkit-mask: var(--i-inbox) center / contain no-repeat; mask: var(--i-inbox) center / contain no-repeat;
}
.empty b { display: block; color: var(--ink); font: 800 16px/1.3 var(--font); margin-bottom: 6px; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: var(--z-toast);
  transform: translate(-50%, 16px); opacity: 0;
  max-width: calc(100% - 32px); width: max-content;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 12px 16px 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: opacity .2s ease, transform .2s var(--ease); pointer-events: none;
}
.toast::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: 1px; background: #7CF0B6;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); color: #fff; }
.toast.err::before { background: #fff; -webkit-mask-image: var(--i-bad); mask-image: var(--i-bad); }
:root[data-theme="dark"] .toast.err { background: #B8183A; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.screen-title { margin-bottom: 4px; }

@media (max-width: 360px) {
  .tab { font-size: 14px; padding-left: 8px; padding-right: 8px; }
  .chips.even .chip { font-size: 13px; }
  main { padding-left: 12px; padding-right: 12px; }
  .tabs { margin-left: -12px; margin-right: -12px; padding-left: 16px; padding-right: 16px; }
  .tabs::before { left: 12px; right: 12px; }
  h1 { font-size: 23px; }
  h2 { font-size: 20px; }
  .hero-num { font-size: 34px; }
}
@media (min-width: 768px) {
  main { padding-top: 32px; }
  .figures { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- чеки на проверке и принятые оплаты ---------- */
.review + .review { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.receipt-box {
  border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  min-height: 160px; max-height: 70vh; display: grid; place-items: center;
  color: var(--muted); font-size: 14px; text-align: center; padding: 0;
}
.receipt-box img { width: 100%; display: block; background: #fff; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

/* ---------- выбор срока Pro ---------- */
.radio {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-left: 4px;
  border: 2px solid var(--line-strong); display: inline-grid; place-items: center;
  transition: border-color .18s ease;
}
[aria-checked="true"] .radio { border-color: var(--accent-btn); }
[aria-checked="true"] .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-btn); }

/* кнопка выбора файла: сам input прозрачный и лежит поверх кнопки — касание приходится прямо на него */
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.file-btn:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
.file-btn.busy { opacity: .6; pointer-events: none; }