/* ============================================================
   ВАРАКСА - дизайн-система (концепт)
   Тёмная студия: чернильный фон, акцент (лайм / лёд+огонь), янтарь токенов
   Тема переключается: html[data-theme="ice"] - голубой + красный
   ============================================================ */

:root{
  --ink:      #131217;   /* фон страницы */
  --ink-2:    #18171d;   /* фон секций */
  --card:     #1d1c24;   /* карточки */
  --card-2:   #232230;   /* карточки поверх карточек */
  --line:     rgba(244,241,234,.09);
  --line-2:   rgba(244,241,234,.16);
  --text:     #f2efe6;   /* кремовый текст */
  --muted:    #a49fae;   /* приглушённый */
  --faint:    #6d6878;   /* совсем тихий */
  --acc:      #c9f24f;   /* главный акцент (лайм) */
  --acc-hov:  #d7fa66;   /* акцент при наведении */
  --acc-ink:  #1c2405;   /* текст на акценте */
  --acc2:     #c9f24f;   /* второй акцент (в лайм-теме = первый) */
  --amber:    #ffb454;   /* токены/баланс */
  --coral:    #ff6a4d;   /* предупреждения/минус */
  --mint:     #59e0b8;   /* плюс/успех */
  --blue:     #5b8bff;

  --font-d: "Unbounded", sans-serif;      /* дисплей */
  --font-b: "Onest", sans-serif;          /* текст/UI */
  --font-m: "JetBrains Mono", monospace;  /* цифры/метки */

  --r: 20px;
  --r-s: 12px;
  --shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* ------- тема «лёд + огонь»: ледяной циан + алый ------- */
html[data-theme="ice"]{
  --acc:     #7fd0ff;
  --acc-hov: #a4deff;
  --acc-ink: #06131f;
  --acc2:    #ff6f7d;
}

*{ margin:0; padding:0; box-sizing:border-box }
/* overflow-x:clip (не hidden!) - режет горизонтальное панорамирование страницы на телефоне,
   не ломая position:sticky у шапки */
html{ scroll-behavior:smooth; overflow-x:clip }
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-b);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* зерно + виньетка атмосферы */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--acc) 8%, transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(91,139,255,.05), transparent 60%);
}
main, header, footer{ position:relative; z-index:1 }

::selection{ background:var(--acc); color:var(--acc-ink) }
a{ color:inherit; text-decoration:none }
img{ max-width:100% }
button{ font-family:inherit; cursor:pointer }
[hidden]{ display:none !important }  /* атрибут hidden сильнее любого display из классов */

/* ------- фирменные ползунки (везде: страница, панели, textarea) ------- */
*{ scrollbar-width:thin; scrollbar-color:var(--card-2) transparent }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background:var(--card-2); border-radius:99px;
  border:2.5px solid var(--ink); min-height:40px;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--faint) }
*::-webkit-scrollbar-corner{ background:transparent }
textarea::-webkit-resizer{ display:none }

h1,h2,h3,.disp{ font-family:var(--font-d); font-weight:600; line-height:1.12; letter-spacing:-.01em }
.mono{ font-family:var(--font-m); font-variant-numeric:tabular-nums }

.wrap{ max-width:1200px; margin:0 auto; padding:0 32px }

/* ---------- шапка ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(19,18,23,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; gap:28px; height:64px }
.logo{ font-family:var(--font-d); font-weight:700; font-size:19px; letter-spacing:.02em; display:flex; align-items:center; gap:2px }
.logo i{ font-style:normal; color:var(--acc) }
.nav-links{ display:flex; gap:22px; font-size:14.5px; color:var(--muted) }
.nav-links a:hover{ color:var(--text) }
.nav-links a.on{ color:var(--text) }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px }

/* фишки-статусы в шапке */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-2); border-radius:999px;
  padding:6px 13px; font-size:13.5px; color:var(--muted); white-space:nowrap;
}
.chip b{ color:var(--text); font-weight:600 }
.chip .tok{ color:var(--amber); font-family:var(--font-m); font-weight:600 }
.chip.lim b{ font-family:var(--font-m) }
.ava{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,#2aabee,#1b7dc0); /* телеграм */
  display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff;
  border:2px solid var(--line-2); text-decoration:none; cursor:pointer;
  transition:transform .12s, border-color .12s;
}
a.ava:hover{ transform:scale(1.06); border-color:var(--acc) }

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; border-radius:999px; font-weight:700; font-size:15.5px;
  padding:14px 28px; transition:.18s ease;
}
.btn-lime{ background:var(--acc); color:var(--acc-ink) }
.btn-lime:hover{ transform:translateY(-2px); box-shadow:0 10px 34px color-mix(in srgb, var(--acc) 30%, transparent); background:var(--acc-hov) }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line-2) }
.btn-ghost:hover{ border-color:var(--text); transform:translateY(-2px) }
.btn-amber{ background:var(--amber); color:#2a1a02 }
.btn-amber:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,180,84,.25) }
.btn-sm{ padding:9px 18px; font-size:14px }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none!important; box-shadow:none!important }

/* ---------- ярлыки ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-m); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc2); padding:5px 12px;
  border:1px solid color-mix(in srgb, var(--acc2) 38%, transparent); border-radius:999px;
}
.tag.amb{ color:var(--amber); border-color:rgba(255,180,84,.35) }
.tag.gray{ color:var(--faint); border-color:var(--line) }

/* ---------- карточки ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px;
}
.card h3{ font-size:17px; margin-bottom:8px }

/* ---------- секции лендинга ---------- */
.sec{ padding:96px 0 }
.sec-head{ margin-bottom:44px; max-width:640px }
.sec-head .tag{ margin-bottom:16px }
.sec-head h2{ font-size:clamp(26px,3.4vw,40px) }
.sec-head p{ color:var(--muted); margin-top:12px; font-size:17px }

/* hero */
.hero{ padding:84px 0 40px; position:relative }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center }
.hero h1{ font-size:clamp(34px,4.6vw,56px); font-weight:700 }
.hero h1 em{ font-style:normal; color:var(--acc) }
.hero p.lead{ color:var(--muted); font-size:18.5px; margin:22px 0 30px; max-width:520px }
.hero-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.hero-note{ margin-top:18px; font-size:14px; color:var(--faint); max-width:520px }
.hero-note b{ color:var(--amber); font-family:var(--font-m); font-weight:600 }

/* появление hero */
@keyframes rise{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
.rise{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both }
.d1{ animation-delay:.05s } .d2{ animation-delay:.15s } .d3{ animation-delay:.25s } .d4{ animation-delay:.35s }

/* ---------- карусель каруселей (бесшовная лента) ---------- */
.belt{ margin:20px 0 0; position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* подпись под лентой примеров */
.belt-note{
  text-align:center; margin:2px auto 0; max-width:640px;
  font-size:15.5px; color:var(--muted);
}
.belt-note em{ font-style:normal; color:var(--acc); font-weight:600 }
/* трек = ЧЕТЫРЕ одинаковые группы; сдвиг ровно на -25% (одну группу) = бесшовный круг.
   Четыре копии нужны, чтобы контента хватало на широкие экраны в любой фазе сдвига. */
.belt-track{ display:flex; width:max-content; padding:34px 0;
  animation:belt 38s linear infinite; animation-play-state:paused }
/* лента едет только после ПОЛНОЙ загрузки страницы (шрифты/картинки) -
   иначе часы анимации убегают, пока рендер заморожен, и первое наведение даёт рывок */
html.pageloaded .belt-track{ animation-play-state:running }
html.pageloaded .belt:hover .belt-track{ animation-play-state:paused }
.belt-grp{ display:flex; gap:20px; padding-right:20px; flex:none }
@keyframes belt{ to{ transform:translateX(-25%) } }

.sl{
  width:196px; height:245px; border-radius:16px; flex:none;
  padding:18px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 18px 40px rgba(0,0,0,.4); position:relative; overflow:hidden;
  transition:transform .25s ease;
}
.sl:nth-child(odd){ transform:rotate(-2deg) } .sl:nth-child(even){ transform:rotate(2deg) }
.sl:hover{ transform:rotate(0) scale(1.05); z-index:2 }
.sl .k{ font-family:var(--font-m); font-size:10px; letter-spacing:.16em; opacity:.65; text-transform:uppercase }
.sl .t{ font-family:var(--font-d); font-weight:700; font-size:20px; line-height:1.15 }
.sl .b{ font-size:11.5px; line-height:1.45; opacity:.75 }
.sl .n{ position:absolute; right:14px; bottom:10px; font-family:var(--font-d); font-size:44px; font-weight:800; opacity:.14 }

.sl-cream{ background:#f2ecdd; color:#191613 }
.sl-coral{ background:linear-gradient(160deg,#ff6a4d,#e6402a); color:#fff7f2 }
.sl-ink{ background:#191823; color:#f2efe6; border:1px solid var(--line-2) }
.sl-ink .t em{ font-style:normal; color:var(--acc) }
.sl-lime{ background:var(--acc); color:var(--acc-ink) }
.sl-blue{ background:linear-gradient(170deg,#2b3f8f,#16204d); color:#eef1ff }
.sl-photo{ background:
  linear-gradient(180deg,rgba(10,10,14,.05) 40%,rgba(10,10,14,.78)),
  radial-gradient(120px 90px at 70% 30%, #d8a24f, transparent 70%),
  radial-gradient(200px 160px at 20% 80%, #7a4a2b, transparent 70%),
  #503321; color:#fff3e2 }

.sl .pill{ align-self:flex-start; background:rgba(0,0,0,.18); border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:700 }
/* карточка-картинка (примеры, загруженные админом) */
.sl-img{ padding:0; background:var(--card-2) }
.sl-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.sl-cream .pill{ background:#191613; color:#f2ecdd }

/* ---------- шаги ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.step-c{ position:relative; padding:30px 26px 26px }
.step-c .num{
  font-family:var(--font-m); color:var(--acc); font-size:13px; letter-spacing:.12em;
  display:block; margin-bottom:44px;
}
/* «необязательно» на строке с номером - тихая метка того же ряда, а не бейдж в заголовке */
.step-c .num-opt{
  color:var(--faint); letter-spacing:.14em; text-transform:uppercase; font-size:10.5px;
  padding-left:8px; margin-left:6px; border-left:1px solid var(--line-2);
}
.step-c::after{
  content:""; position:absolute; top:30px; right:26px; width:44px; height:44px;
  border-radius:12px; border:1px solid var(--line-2);
  background:var(--card-2) center/22px no-repeat;
}
.step-c.i-text::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9f24f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E") }
.step-c.i-drop::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9f24f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-4-4L5 21'/%3E%3C/svg%3E") }
.step-c.i-magic::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9f24f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 3 1 2 2 1-2 1-1 2-1-2-2-1 2-1zM19 13l1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5zM13 5l.8 1.7L15.5 7.5l-1.7.8L13 10l-.8-1.7-1.7-.8 1.7-.8z'/%3E%3C/svg%3E") }
html[data-theme="ice"] .step-c.i-text::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd0ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3C/svg%3E") }
html[data-theme="ice"] .step-c.i-drop::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-4-4L5 21'/%3E%3C/svg%3E") }
html[data-theme="ice"] .step-c.i-magic::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 3 1 2 2 1-2 1-1 2-1-2-2-1 2-1zM19 13l1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5zM13 5l.8 1.7L15.5 7.5l-1.7.8L13 10l-.8-1.7-1.7-.8 1.7-.8z'/%3E%3C/svg%3E") }
.step-c h3{ font-size:18px; margin-bottom:10px }
.step-c p{ color:var(--muted); font-size:15px }

/* ---------- продукты ---------- */
.prods{ display:grid; grid-template-columns:1.25fr .75fr; gap:20px }
.prod{
  border-radius:var(--r); padding:36px; position:relative; overflow:hidden;
  border:1px solid var(--line); min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
}
/* метка в углу карточки: не даём ей расползтись на всю ширину и налезть на заголовок */
.prod .tag{ position:absolute; top:26px; left:28px; max-width:calc(100% - 56px) }
.prod h3{ font-size:26px; margin-bottom:10px }
.prod p{ color:var(--muted); max-width:420px; margin-bottom:22px }
/* содержимое прижато к низу карточки: при длинном тексте оно доезжало до метки в углу.
   Резерв сверху держит их порознь (17.08) */
.prod{ padding-top:74px }
.prod-cta{ display:flex; gap:10px; flex-wrap:wrap }
.prod-car{ background:
  radial-gradient(400px 260px at 85% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 65%), var(--card) }
.prod-bot{ background:
  radial-gradient(300px 220px at 80% 0%, rgba(91,139,255,.14), transparent 65%), var(--card) }
/* пока Сценарист был «в разработке», текст карточки был приглушён - теперь продукт живой */
.prod-bot p{ opacity:.85 }

/* ---------- тарифы ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch }
.plan{ display:flex; flex-direction:column; padding:32px 28px }
.plan .nm{ font-family:var(--font-d); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.plan .nm.hi{ color:var(--acc) }
.plan .pr{ font-family:var(--font-d); font-size:38px; font-weight:700; margin:14px 0 2px }
.plan .pr span{ font-size:15px; font-weight:400; font-family:var(--font-b); color:var(--muted) }
.plan ul{ list-style:none; margin:22px 0 28px; display:grid; gap:11px; font-size:15px }
.plan li{ padding-left:26px; position:relative; color:var(--muted) }
.plan li.yes{ color:var(--text) }
.plan li.yes::before{ content:"✓"; position:absolute; left:0; color:var(--acc); font-weight:700 }
.plan li.no::before{ content:"—"; position:absolute; left:0; color:var(--faint) }
.plan .btn{ margin-top:auto }
.plan-pro{ border-color:color-mix(in srgb, var(--acc) 50%, transparent); background:
  radial-gradient(300px 200px at 50% 0%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%), var(--card);
  position:relative }
.plan-pro .pop{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--acc); color:var(--acc-ink); font-size:11.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:999px;
}
/* скидка на тарифе: зачёркнутая старая цена в одну строку с актуальной.
   Цена со скидкой чуть мельче (38→30px), чтобы «/ месяц» не переносился. */
.plan .pr span{ white-space:nowrap }
.plan .pr:has(.pr-old){ font-size:30px }
.plan .pr .pr-old{
  font-size:16px; font-weight:600; color:var(--faint); margin-right:9px;
  text-decoration-color:color-mix(in srgb, var(--acc2) 70%, transparent);
  text-decoration-thickness:2px;
}

/* полоса про токены */
.tokens-strip{
  margin-top:22px; border:1px dashed rgba(255,180,84,.4); border-radius:var(--r);
  padding:24px 28px; display:flex; gap:20px; align-items:center;
  background:radial-gradient(400px 120px at 8% 50%, rgba(255,180,84,.09), transparent 70%);
}
.coin{
  width:46px; height:46px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ffd9a0, var(--amber) 60%, #c67f2a);
  display:grid; place-items:center; font-family:var(--font-m); font-weight:700; color:#3a2405;
  box-shadow:0 6px 20px rgba(255,180,84,.3);
}
.tokens-strip b{ color:var(--amber) }
.tokens-strip p{ color:var(--muted); font-size:15px }
.tokens-strip .t-t{ font-weight:700; color:var(--text); margin-bottom:4px; font-size:16px }

/* ---------- фото создателей в hero (справа от заголовка) ---------- */
.hero-shot{ position:relative; justify-self:end; width:min(370px,100%); margin-top:8px }
.hero-shot .frame{
  position:relative; z-index:2; transform:rotate(2.5deg);
  background:var(--card-2); border:1px solid var(--line-2); border-radius:18px;
  padding:13px 13px 14px; box-shadow:var(--shadow); transition:transform .3s ease;
}
/* стикер живёт ВНУТРИ рамки - двигается вместе с фото */
.hero-shot .frame > .tag{ position:absolute; top:-12px; left:20px; z-index:3; background:var(--ink) }
/* при наведении рамка мягко выравнивается */
.hero-shot:hover .frame{ transform:rotate(1deg) }
.hero-shot .ph{
  height:420px; border-radius:12px; border:1px dashed var(--line-2);
  display:grid; place-items:center; text-align:center; line-height:2.1;
  color:var(--faint); font-family:var(--font-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden;
  background:
    radial-gradient(260px 200px at 72% 18%, color-mix(in srgb, var(--acc) 13%, transparent), transparent 70%),
    radial-gradient(220px 180px at 18% 88%, color-mix(in srgb, var(--acc2) 9%, transparent), transparent 70%),
    var(--ink-2);
}
.hero-shot .ph b{
  position:absolute; font-family:var(--font-d); font-weight:800; font-size:130px;
  color:var(--text); opacity:.045; pointer-events:none;
}
/* реальное фото: горизонтальный кадр 16:9, поэтому рамка ниже и кадрируем по центру
   (contain оставлял бы пустые полосы сверху и снизу) */
.hero-shot .ph.filled{ border:none; height:320px }
.hero-shot .ph.filled img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
}
.hero-shot .cap{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:11px; padding:0 5px; font-size:13px; color:var(--muted);
}
.hero-shot .cap .mono{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc2) }

/* ---------- FAQ ---------- */
.faq{ max-width:760px }
.faq details{ border-bottom:1px solid var(--line); padding:4px 0 }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; font-weight:600; font-size:17px; gap:20px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--font-m); color:var(--acc); font-size:22px; transition:.2s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ color:var(--muted); padding:0 40px 22px 0; font-size:15.5px }

/* ---------- футер ---------- */
footer{ border-top:1px solid var(--line); padding:44px 0 56px; margin-top:40px }
.foot{ display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; color:var(--muted); font-size:14px }
.foot .logo{ font-size:16px }
.foot a:hover{ color:var(--text) }
.foot-right{ margin-left:auto; display:flex; gap:22px }

/* ---------- переключатель темы (инструмент концепта) ---------- */
.themer{
  position:fixed; bottom:18px; right:18px; z-index:70;
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--card); border:1px solid var(--line-2); border-radius:999px;
  box-shadow:var(--shadow);
}
.themer span{ font-family:var(--font-m); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding-left:4px }
.th-dot{ width:22px; height:22px; border-radius:50%; border:2px solid transparent; padding:0; transition:.15s }
.th-dot:hover{ transform:scale(1.12) }
.th-dot.act{ border-color:var(--text) }
.th-lime{ background:#c9f24f }
.th-ice{ background:linear-gradient(135deg,#7fd0ff 50%,#ff6f7d 50%) }

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ
   ============================================================ */
.lk{ padding:44px 0 80px }
.lk h1{ font-size:30px; margin-bottom:6px }
.lk .sub{ color:var(--muted); margin-bottom:34px }
.lk-grid{ display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start }
.lk-col{ display:grid; gap:20px }

/* баланс */
.bal .k{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint) }
.bal .v{ font-family:var(--font-m); font-size:40px; font-weight:700; color:var(--amber); margin:10px 0 2px }
.bal .v span{ font-size:16px; color:var(--muted); font-weight:400 }
.bal .hint{ font-size:13.5px; color:var(--faint); margin-bottom:18px }
.bal{ background:
  radial-gradient(320px 160px at 90% -10%, rgba(255,180,84,.13), transparent 70%), var(--card) }

/* подписка */
.subs .row{ display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid var(--line) }
.subs .row:first-of-type{ border-top:none }
.subs .pic{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-family:var(--font-d); font-weight:700; font-size:16px }
.p-car{ background:color-mix(in srgb, var(--acc) 14%, transparent); color:var(--acc) }
.p-bot{ background:rgba(91,139,255,.12); color:var(--blue); opacity:.6 }
.subs .inf{ flex:1; min-width:0 }
.subs .inf b{ display:block; font-size:15.5px }
.subs .inf span{ font-size:13px; color:var(--muted) }
.badge{ font-family:var(--font-m); font-size:11px; font-weight:700; letter-spacing:.1em;
  padding:4px 10px; border-radius:7px }
.badge-pro{ background:var(--acc); color:var(--acc-ink) }
.badge-soon{ background:var(--card-2); color:var(--faint) }
.meter{ height:6px; border-radius:99px; background:var(--card-2); margin-top:8px; overflow:hidden }
.meter i{ display:block; height:100%; border-radius:99px; background:var(--acc) }

/* история генераций */
.gens .g{ display:flex; gap:16px; align-items:center; padding:14px 0; border-top:1px solid var(--line) }
.gens .g:first-of-type{ border-top:none }
.thumb{ width:52px; height:64px; border-radius:9px; flex:none; box-shadow:0 6px 16px rgba(0,0,0,.35);
  position:relative; overflow:hidden }
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transition:opacity .3s }
.th-1{ background:linear-gradient(160deg,#ff6a4d,#e6402a) }
.th-2{ background:#f2ecdd }
.th-3{ background:linear-gradient(170deg,#2b3f8f,#16204d) }
.th-4{ background:linear-gradient(150deg,#3c2a52,#191823) }
.gens .inf{ flex:1; min-width:0 }
.gens .inf b{ display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.gens .inf span{ font-size:13px; color:var(--faint) }
.gens .cost{ font-family:var(--font-m); font-size:13.5px; color:var(--muted); white-space:nowrap }
.gens .act{ display:flex; gap:8px }
.icobtn{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line-2); background:transparent;
  color:var(--muted); display:grid; place-items:center; font-size:15px; transition:.15s;
}
.icobtn:hover{ color:var(--acc); border-color:var(--acc) }

/* операции */
table.ledger{ width:100%; border-collapse:collapse; font-size:14.5px }
.ledger th{ text-align:left; font-family:var(--font-m); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); font-weight:500; padding:0 10px 12px 0 }
.ledger td{ padding:13px 10px 13px 0; border-top:1px solid var(--line) }
.ledger .sum{ font-family:var(--font-m); font-weight:600; text-align:right }
.plus{ color:var(--mint) } .minus{ color:var(--muted) }
.ledger .dt{ color:var(--faint); white-space:nowrap }

/* ============================================================
   СТРАНИЦА ПРОДУКТА (генератор)
   ============================================================ */
.tool{ display:grid; grid-template-columns:400px 1fr; height:calc(100vh - 64px); height:calc(100dvh - 64px) }

/* панель: прокручиваемая середина + плашка запуска ЖЁСТКО внизу */
.panel{
  border-right:1px solid var(--line); background:var(--ink-2);
  display:flex; flex-direction:column; overflow:hidden; min-height:0;
}
.panel-scroll{ flex:1; overflow-y:auto; padding:26px; min-height:0 }
.panel h1{ font-size:19px; margin-bottom:4px }
.panel .sub{ font-size:13.5px; color:var(--faint); margin-bottom:24px }

.grp{ margin-bottom:22px }
.grp label{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; margin-bottom:10px }
.grp-hint{ margin:-4px 0 12px; color:var(--faint); font-size:12.5px; line-height:1.5 }
.qhelp{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--faint); color:var(--faint); font-size:11px; font-weight:700;
  cursor:help; flex:none; transition:.15s; font-family:var(--font-b); vertical-align:middle }
.qhelp:hover, .qhelp:focus{ border-color:var(--acc); color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,transparent); outline:none }
.qtip{ position:fixed; z-index:9999; max-width:340px; background:var(--card); color:var(--text);
  border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; font-size:12.5px;
  line-height:1.55; white-space:pre-line; box-shadow:0 12px 32px rgba(0,0,0,.4); pointer-events:none }
.keep-row{ display:flex; align-items:center; gap:8px; margin-top:12px; min-height:26px;
  font-weight:500; font-size:13.5px; color:var(--muted) }
.keep-row > span:first-child{ line-height:1.3 }
.keep-lbl{ display:inline-flex; align-items:center; gap:8px; cursor:pointer }
.keep-txt .qhelp{ margin-left:5px }
.keep-row .sw{ flex:none; transform:scale(.8); transform-origin:left center }
/* чип в шапке (тариф/остаток) - строго по центру по вертикали */
.chip{ display:inline-flex; align-items:center; gap:6px }
/* карточки правой колонки ЛК одной ширины (не сжимаются по контенту) */
.lk-col > .card{ width:100%; box-sizing:border-box }
.lk-tabs{ display:flex; gap:8px; margin-bottom:16px; border-bottom:1px solid var(--line-2); padding-bottom:2px }
.lk-tabs button{ font-family:var(--font-b); font-size:14.5px; font-weight:600; cursor:pointer;
  padding:8px 4px; margin-bottom:-2px; color:var(--faint); background:none; border:none;
  border-bottom:2px solid transparent; transition:.15s }
.lk-tabs button:hover{ color:var(--text) }
.lk-tabs button.on{ color:var(--text); border-bottom-color:var(--acc) }
.stepn{
  width:22px; height:22px; border-radius:7px; background:var(--acc); color:var(--acc-ink);
  display:grid; place-items:center; font-family:var(--font-m); font-size:12px; font-weight:700; flex:none;
}
.grp .opt{ font-weight:400; color:var(--faint); font-size:12.5px }
.opt-badge{
  flex:none; font-weight:600; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--acc); background:color-mix(in srgb, var(--acc) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  border-radius:999px; padding:3px 9px;
}
.grp .hint{ font-size:12.5px; color:var(--faint); margin:-4px 0 10px }

/* сегмент-переключатель формата (Карусель / Сторис) */
.seg{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-s);
}
.seg button{
  padding:10px 8px; border-radius:calc(var(--r-s) - 4px); border:1px solid transparent;
  background:transparent; color:var(--muted); font-family:var(--font-b);
  font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s;
}
.seg button small{ display:block; font-weight:400; font-size:11.5px; color:var(--faint); margin-top:2px }
.seg button:hover{ color:var(--text) }
.seg button.on{
  background:color-mix(in srgb, var(--acc) 16%, transparent);
  border-color:var(--acc); color:var(--text);
}
.seg button.on small{ color:var(--muted) }

textarea.inp{
  width:100%; min-height:130px; resize:vertical;
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-s);
  color:var(--text); font-family:var(--font-b); font-size:14.5px; line-height:1.55; padding:14px 16px;
  transition:border-color .15s;
}
textarea.inp:focus{ outline:none; border-color:var(--acc) }

.drop{
  border:1.5px dashed var(--line-2); border-radius:var(--r-s); padding:22px 16px;
  text-align:center; color:var(--faint); font-size:13.5px; cursor:pointer; transition:.15s;
}
.drop b{ display:block; color:var(--muted); font-size:14px; margin-bottom:3px }
.drop:hover, .drop.hot{ border-color:var(--acc); color:var(--muted); background:color-mix(in srgb, var(--acc) 4%, transparent) }
.drop-tip{
  display:block; margin-top:10px; padding-top:9px; border-top:1px solid var(--line);
  color:var(--faint); font-size:12px; line-height:1.45;
}

.thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.thumbs .th{ width:56px; height:70px; border-radius:8px; position:relative }
.thumbs .th .x{
  position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  background:var(--card-2); border:1px solid var(--line-2); color:var(--muted);
  font-size:11px; display:grid; place-items:center;
}
.thumbs .th .x:hover{ background:var(--coral); color:#fff }
.thumbs .th{ cursor:grab }
.thumbs .th[draggable="true"]:active{ cursor:grabbing }
.thumbs .th.dragging{ opacity:.45 }
.thumbs .th .th-num{
  position:absolute; bottom:3px; left:3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--acc); color:var(--acc-ink);
  font:700 10px/16px var(--font-m); text-align:center;
}

/* глаз-переключатель */
.eye{
  display:flex; gap:14px; align-items:flex-start; padding:16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
}
.eye .sw{ margin-left:auto; flex:none }
.sw{ position:relative; width:46px; height:26px }
.sw input{ opacity:0; width:100%; height:100%; position:absolute; cursor:pointer; z-index:2 }
.sw i{
  position:absolute; inset:0; border-radius:99px; background:var(--card-2); transition:.2s;
  border:1px solid var(--line-2);
}
.sw i::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--faint); transition:.2s;
}
.sw input:checked + i{ background:color-mix(in srgb, var(--acc) 25%, transparent); border-color:var(--acc) }
.sw input:checked + i::after{ left:23px; background:var(--acc) }
.eye b{ font-size:14px; display:flex; align-items:center; gap:8px }
.eye p{ font-size:12.5px; color:var(--faint); margin-top:3px }
.pro-mark{ font-family:var(--font-m); font-size:9.5px; font-weight:700; letter-spacing:.1em;
  background:var(--acc); color:var(--acc-ink); border-radius:5px; padding:2px 6px }

/* плашка оценки + запуск: НЕ прокручивается, всегда внизу панели */
.launch{
  flex:none; padding:16px 26px 22px;
  border-top:1px solid var(--line); background:var(--ink-2);
}
.est{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  border:1px dashed rgba(255,180,84,.45); background:rgba(255,180,84,.06);
  border-radius:var(--r-s); padding:12px 16px; font-size:13.5px; color:var(--muted);
}
.est .val{ font-family:var(--font-m); font-weight:700; color:var(--amber); font-size:16px; margin-left:auto; white-space:nowrap }
.est-note{ font-size:11.5px; color:var(--faint); line-height:1.5; margin:-4px 2px 12px }
.launch .btn{ width:100% }

/* правая часть - конструктор */
.stage{ position:relative; display:grid; place-items:center; background:
  radial-gradient(600px 400px at 50% 40%, color-mix(in srgb, var(--acc) 5%, transparent), transparent 70%), var(--ink) }
.stage-empty{ text-align:center; max-width:420px; padding:40px }
.stage-empty .fr{
  width:230px; height:288px; margin:0 auto 28px; border-radius:18px;
  border:1.5px dashed var(--line-2); display:grid; place-items:center; color:var(--faint);
  font-family:var(--font-m); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  position:relative;
}
.stage-empty .fr::before, .stage-empty .fr::after{
  content:""; position:absolute; top:14px; bottom:14px; width:16px; border-radius:10px;
  border:1.5px dashed var(--line);
}
.stage-empty .fr::before{ left:-30px } .stage-empty .fr::after{ right:-30px }
.stage-empty h2{ font-size:19px; margin-bottom:8px }
.stage-empty p{ color:var(--faint); font-size:14px }

/* статус job */
/* Плашка статуса. Была капсулой во всю ширину: длинный текст ломался на две строки, скруглённые
   «торцы» 999px выглядели неряшливо, кнопка «Начать чистую» рвалась пополам, крестик уезжал.
   Теперь - аккуратная карточка ограниченной ширины, кнопки не переносятся. */
.jobbar{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:11px;
  width:max-content; max-width:min(620px, calc(100% - 28px));
  background:var(--card); border:1px solid var(--line-2); border-radius:14px;
  padding:10px 14px; font-size:13px; line-height:1.4; color:var(--muted); box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.jobbar #jobtext{ flex:1; min-width:0 }
.jobbar button{ flex:none; white-space:nowrap; font:inherit; color:inherit; cursor:pointer }
.jobbar #jobAct{
  padding:6px 13px; border-radius:9px; border:1px solid var(--line-2);
  background:transparent; transition:border-color .15s, color .15s;
}
.jobbar #jobAct:hover{ border-color:var(--acc); color:var(--text) }
.jobbar #jobClose{
  display:grid; place-items:center; width:26px; height:26px; margin-right:-4px;
  padding:0; border:none; border-radius:8px; background:transparent; font-size:14px; opacity:.6;
}
.jobbar #jobClose:hover{ opacity:1; background:var(--card-2) }
.jobbar.show{ opacity:1; pointer-events:auto }   /* видимая плашка ДОЛЖНА ловить клики: без этого кнопка «Начать чистую» и крестик не нажимались, клик проваливался сквозь */
.spin{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid var(--card-2); border-top-color:var(--acc); animation:sp .8s linear infinite;
}
@keyframes sp{ to{ transform:rotate(360deg) } }
.jobbar.done .spin{ animation:none; border:none; background:var(--mint); width:9px; height:9px; margin:3px }
.jobbar b{ color:var(--text) }

/* конструктор живёт в iframe на всю правую часть */
/* фон в тон конструктору - раньше был #fff и при загрузке мигал белым экраном */
.stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; background:#131217 }

/* спрятать панель сборки - конструктору почти всю ширину;
   от панели остаётся узкая полоска-«ручка», клик по ней возвращает панель */
.panel{ position:relative }
.panel-hide{
  position:absolute; top:18px; right:12px; z-index:3;
  width:30px; height:30px; border-radius:9px;
  background:color-mix(in srgb, var(--acc) 14%, transparent);
  border:1px solid var(--acc); color:var(--acc);
  font-size:14px; font-weight:700; line-height:1; cursor:pointer; transition:.15s;
}
.panel-hide:hover{ background:var(--acc); color:var(--acc-ink) }
.tool.nopanel{ grid-template-columns:26px 1fr }
.tool.nopanel .panel-scroll, .tool.nopanel .launch, .tool.nopanel .panel-hide{ display:none }
.tool.nopanel .panel{ cursor:pointer; display:grid; place-items:center }
.tool.nopanel .panel::after{ content:"⟩"; color:var(--acc); font-size:15px; font-weight:700 }
.tool.nopanel .panel:hover{ background:color-mix(in srgb, var(--acc) 14%, transparent) }
.jobbar{ z-index:10 }
.jobbar.err{ border-color:var(--coral); color:var(--coral) }
.jobbar.err .spin{ display:none }
.jobbar.info .spin{ display:none }   /* сообщение-подсказка: без «крутилки», висит пока не закроют */

/* индикатор автосохранения (левый нижний угол редактора).
   Кнопку «Сохранить» у клиента убрали - это единственный видимый признак того,
   дошли ли правки до сервера. В покое приглушён, при проблеме - выходит на первый план. */
.savechip{
  position:absolute; left:14px; bottom:14px; z-index:55;
  display:flex; align-items:center; gap:8px; max-width:min(320px,46vw);
  background:var(--card); border:1px solid var(--line-2); border-radius:999px;
  padding:6px 13px; font-size:12.5px; line-height:1.2; color:var(--muted);
  box-shadow:var(--shadow); opacity:.5; transition:opacity .2s, color .2s, border-color .2s;
  cursor:default; user-select:none;
}
.savechip:hover{ opacity:1 }
.savechip .sdot{ width:8px; height:8px; border-radius:50%; background:var(--mint); flex:none }
.savechip.busy{ opacity:1; color:var(--text) }
.savechip.busy .sdot{ background:var(--acc); animation:sfade .9s ease-in-out infinite alternate }
@keyframes sfade{ from{ opacity:.2 } to{ opacity:1 } }
.savechip.warn{ opacity:1; color:#e0a33e; border-color:#e0a33e }
.savechip.err{ opacity:1; color:var(--coral); border-color:var(--coral) }
.savechip.warn .sdot, .savechip.err .sdot{ background:currentColor }
/* Конструктор при ширине ≤1000px прижимает панель редактирования к низу экрана, и плашка
   садилась прямо на её кнопки («Черновик в браузере» закрывал два пункта меню, 17.08).
   Тапы она не перехватывала и раньше (pointer-events:none), но читать меню мешала - поэтому
   на телефоне уводим её наверх, в свободный правый угол сцены. Подсказки по наведению
   на сенсорном экране всё равно нет, так что теряем только hover. */
@media (max-width:1000px){
  .savechip{
    left:auto; right:10px; bottom:auto; top:10px;
    font-size:11.5px; padding:5px 11px; max-width:min(260px,60vw);
    pointer-events:none; opacity:.75;
  }
}

/* список фото-контента (имя + описание + удалить) */
.photo-list{ display:grid; gap:8px; margin-top:10px }
.photo-item{ display:flex; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px }
.photo-item .pv{ width:42px; height:52px; border-radius:7px; object-fit:cover; flex:none; background:var(--card-2) }
.photo-item .pv-ph{ display:grid; place-items:center; border:1px dashed var(--line-2);
  font-family:var(--font-m); font-size:8.5px; letter-spacing:.08em; color:var(--faint) }
.photo-item .meta{ flex:1; min-width:0 }
.photo-item .nm{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.photo-item .nm .vtag{ font-family:var(--font-m); font-size:9px; letter-spacing:.08em;
  background:var(--card-2); color:var(--muted); border-radius:5px; padding:1px 6px; margin-left:6px }
.photo-item input{ width:100%; background:transparent; border:none;
  border-bottom:1px dashed var(--line-2); color:var(--muted); font-size:12px; padding:2px 0 }
.photo-item input:focus{ outline:none; border-color:var(--acc); color:var(--text) }
.photo-item .rm{ width:26px; height:26px; border-radius:8px; flex:none; border:1px solid var(--line-2);
  background:transparent; color:var(--muted); font-size:13px }
.photo-item .rm:hover{ background:var(--coral); border-color:var(--coral); color:#fff }

/* оверлей «нужно войти» на странице продукта */
.gate{ position:absolute; inset:0; z-index:30; display:grid; place-items:center;
  background:rgba(19,18,23,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.gate[hidden]{ display:none }  /* иначе display:grid перебивает атрибут hidden */
.gate .card{ text-align:center; max-width:380px; padding:36px 32px }
.gate h2{ font-size:20px; margin-bottom:10px }
.gate p{ color:var(--muted); font-size:14.5px; margin-bottom:22px }

/* элементы только для узких экранов (например «Выйти» в шапке ЛК,
   когда меню .nav-links спрятано) */
.m-only{ display:none }
/* переключатель «Сборка / Редактор» на странице карусели - только телефон */
.mob-sw{ display:none }

/* ---------- адаптив (ПК-first, планшет терпимо) ---------- */
@media (max-width:1060px){
  .hero-grid{ grid-template-columns:1fr }
  .hero-shot{ display:none }
  .steps{ grid-template-columns:1fr }
  .prods, .plans{ grid-template-columns:1fr }
  .lk-grid{ grid-template-columns:1fr }
  .tool{ grid-template-columns:1fr; height:auto }
  .panel{ border-right:none; border-bottom:1px solid var(--line) }
  .stage{ min-height:520px }
  .nav-links{ display:none }
  .m-only{ display:inline-flex }
}

/* ---------- телефоны ---------- */
@media (max-width:720px){
  .wrap{ padding:0 18px }
  .nav-in{ height:56px; gap:10px }
  .nav-right .btn{ padding:8px 12px; font-size:12.5px }
  /* шапка не должна распирать страницу вширь: чипы компактнее,
     а если всё равно не влезли - листаются внутри себя, страница стоит на месте */
  .logo{ font-size:17px }
  .chip{ padding:4px 10px; font-size:12px; gap:5px; flex:none }
  .ava{ width:30px; height:30px; font-size:12px; flex:none }  /* flex:none - иначе кружок сплющивается */
  .nav-right{ min-width:0; overflow-x:auto; scrollbar-width:none }
  .nav-right::-webkit-scrollbar{ display:none }

  /* лендинг: плотнее по вертикали, лента чуть мельче */
  .sec{ padding:54px 0 }
  .sec-head{ margin-bottom:28px }
  .hero{ padding:48px 0 24px }
  .hero p.lead{ font-size:16.5px; margin:18px 0 24px }
  .hero-cta .btn{ width:100%; justify-content:center }
  .belt-track{ padding:24px 0 }
  .sl{ width:168px; height:212px }
  .card{ padding:20px }
  .prod{ padding:26px; min-height:210px; justify-content:flex-start }
  /* плашка «Доступно/Скоро» на телефоне - В ПОТОКЕ первой строкой:
     absolute наезжала на заголовок, когда карточка сжималась по высоте */
  .prod .tag{ position:static; align-self:flex-start; margin-bottom:12px }
  .plan{ padding:26px 22px }
  .tokens-strip{ flex-direction:column; align-items:flex-start; gap:12px; padding:20px }
  .faq summary{ padding:16px 0; font-size:15.5px }
  .faq details p{ padding-right:0 }
  .foot{ gap:16px }
  .foot-right{ margin-left:0 }

  /* ЛК: строки истории переносятся, таблица операций скроллится внутри карточки */
  .lk{ padding:26px 0 60px }
  .lk h1{ font-size:24px }
  .gens .g{ flex-wrap:wrap }
  .gens .act{ margin-left:auto }
  table.ledger{ font-size:13px }
  .lk-col > .card{ overflow-x:auto }

  /* страница карусели: ДВА ЭКРАНА - «Сборка» (форма) и «Редактор» (конструктор).
     Переключатель сверху; после сборки телефон сам прыгает в «Редактор». */
  .mob-sw{
    display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    position:sticky; top:56px; z-index:25;
  }
  .mob-sw button{
    padding:11px 8px; border-radius:10px; border:1px solid transparent;
    background:transparent; color:var(--muted); font-family:var(--font-b);
    font-size:14px; font-weight:700; cursor:pointer; transition:.15s;
  }
  .mob-sw button.on{
    background:color-mix(in srgb, var(--acc) 16%, transparent);
    border-color:var(--acc); color:var(--text);
  }
  .tool.m-panel .stage{ display:none }
  .tool.m-stage .panel{ display:none }
  /* экран «Редактор» = ровно окно, страница НЕ скроллится (иначе под конструктором
     оставался пустой чёрный «хвост» страницы); листается только сам конструктор внутри */
  .tool.m-stage{ display:grid; grid-template-rows:auto 1fr; overflow:hidden;
    height:calc(100vh - 56px); height:calc(100dvh - 56px) }
  .tool.m-stage .stage{ min-height:0 }
  /* в «Редакторе» страница не скроллится, а sticky внутри overflow:hidden сползал
     на 56px вниз и НАКРЫВАЛ холст - там вкладки обычные, в потоке */
  .tool.m-stage .mob-sw{ position:static }
  .panel-hide{ display:none }   /* ручку скрытия панели заменяют вкладки */
  .panel-scroll{ padding:20px 18px }
  .launch{ padding:14px 18px 18px }
  .stage{ min-height:74vh; min-height:74dvh }
  .qtip{ max-width:min(340px, 88vw) }

  /* переключатель тем (dev-виджет) на телефоне перекрывает контент - прячем */
  .themer{ display:none }
}